<!DOCTYPE html> <html> <head> <title>Nomic Atlas</title> <link rel="stylesheet" href="styles.css"> <style> /* Add CSS styles to position the select element at the top */ body { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; min-height: 100vh; margin: 0; padding: 0; font-family: Arial, sans-serif; /* Modern font */ color: #333; /* Text color */ } h2 { margin-top: 20px; font-weight: bold; /* Bold font weight */ font-size: 24px; /* Font size */ } select { margin-top: 20px; width: 300px; font-size: 16px; /* Font size */ padding: 10px; /* Padding */ border-radius: 5px; /* Rounded corners */ border: 1px solid #ddd; /* Border */ background-color: #fff; /* Background color */ } iframe { margin-top: 20px; margin-bottom: 20px; /* Bottom margin */ } </style> <script> // Define the function to change the source of the iframe function changeIframeSrc() { // Get the dropdown element var dropdown = document.getElementById('urlDropdown'); // Get the selected URL var selectedUrl = dropdown.options[dropdown.selectedIndex].value; // Get the iframe element var iframe = document.getElementById('urlIframe'); // Set the iframe source to the selected URL iframe.src = selectedUrl; } </script> </head> <body> <h2>Nomic Atlas</h2> <select id="urlDropdown" onchange="changeIframeSrc()"> <option value="https://atlas.nomic.ai/map/0488ba79-9a62-4c0d-b384-63e9a26b628b/d5e64288-6490-4c3c-a727-4ef6b133d6fc">Quora Questions</option> <option value="https://atlas.nomic.ai/map/2a222eb6-8f5a-405b-9ab8-f5ab23b71cfd/1dae224b-0284-49f7-b7c9-5f80d9ef8b32">MNIST Logits</option> <option value="https://atlas.nomic.ai/map/neurips">NeurIPS Proceedings</option> <!-- Add more options as needed --> </select> <iframe id="urlIframe" src="https://atlas.nomic.ai/map/0488ba79-9a62-4c0d-b384-63e9a26b628b/d5e64288-6490-4c3c-a727-4ef6b133d6fc" width="800" height="600"></iframe> </body> </html>