File size: 2,431 Bytes
91b1382
 
9f9b03a
89530e3
8fd272b
273eb27
 
 
 
 
 
 
 
 
 
3fb4aea
 
273eb27
 
 
 
3fb4aea
 
273eb27
 
 
 
 
3fb4aea
 
 
 
 
273eb27
 
 
 
3fb4aea
273eb27
 
9f9b03a
 
 
 
 
273eb27
9f9b03a
 
273eb27
9f9b03a
 
273eb27
9f9b03a
 
 
 
 
 
273eb27
e553e8c
9f9b03a
60917fd
9f9b03a
 
 
 
 
99f43ed
9f9b03a
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
<!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>