Update index.html

index.html

@@ -6,209 +6,65 @@
     <title>Political Speech Semantic Map Gallery</title>
     <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;700&display=swap" rel="stylesheet">
     <style>
-        body {
-            font-family: 'Roboto', sans-serif;
-            line-height: 1.6;
-            color: #333;
-            background-color: #f0f4f8;
-            margin: 0;
-            padding: 0;
-        }
-        .container {
-            max-width: 1200px;
-            margin: 0 auto;
-            padding: 40px 20px;
-        }
-        header {
-            background-color: #2c3e50;
-            color: white;
-            text-align: center;
-            padding: 60px 0;
-            margin-bottom: 40px;
-        }
-        h1 {
-            font-size: 2.5em;
-            margin: 0;
-            text-transform: uppercase;
-            letter-spacing: 2px;
-        }
-        .subtitle {
-            font-size: 1.2em;
-            font-weight: 300;
-            margin-top: 10px;
-        }
-        .gallery {
-            display: grid;
-            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
-            gap: 30px;
-        }
+        /* ... (keep all existing styles) ... */
         .map-item {
             background-color: white;
             border-radius: 10px;
             overflow: hidden;
             box-shadow: 0 10px 20px rgba(0,0,0,0.1);
             transition: all 0.3s ease;
-        }
-        .map-item:hover {
-            transform: translateY(-10px);
-            box-shadow: 0 15px 30px rgba(0,0,0,0.2);
-        }
-        .map-preview {
-            position: relative;
-            height: 200px;
-            overflow: hidden;
-        }
-        .map-preview iframe {
-            width: 100%;
-            height: 100%;
-            border: none;
-            pointer-events: none;
-        }
-        .map-overlay {
-            position: absolute;
-            top: 0;
-            left: 0;
-            width: 100%;
-            height: 100%;
-            background: rgba(44, 62, 80, 0.7);
             display: flex;
-            align-items: center;
-            justify-content: center;
-            opacity: 0;
-            transition: opacity 0.3s ease;
-        }
-        .map-item:hover .map-overlay {
-            opacity: 1;
-        }
-        .view-button {
-            padding: 10px 20px;
-            background-color: #e74c3c;
-            color: white;
-            text-decoration: none;
-            border-radius: 5px;
-            font-weight: bold;
-            text-transform: uppercase;
-            transition: background-color 0.3s ease;
-        }
-        .view-button:hover {
-            background-color: #c0392b;
+            flex-direction: column;
         }
-        .map-info {
-            padding: 20px;
-        }
-        .map-info h2 {
-            margin: 0 0 10px 0;
-            color: #2c3e50;
-            font-size: 1.4em;
+        .map-preview {
+            flex: 1;
+            min-height: 200px;
         }
-        .map-info p {
-            margin: 0;
-            color: #7f8c8d;
+        .stats {
+            background-color: #f8f9fa;
+            padding: 10px;
             font-size: 0.9em;
+            border-top: 1px solid #e9ecef;
         }
-        .modal {
-            display: none;
-            position: fixed;
-            z-index: 1000;
-            left: 0;
-            top: 0;
-            width: 100%;
-            height: 100%;
-            background-color: rgba(0,0,0,0.8);
-        }
-        .modal-content {
-            position: relative;
-            width: 90%;
-            height: 90%;
-            margin: 2% auto;
-            background-color: #fff;
-            border-radius: 10px;
-            overflow: hidden;
-        }
-        .close-modal {
-            position: absolute;
-            top: 10px;
-            right: 20px;
-            color: #fff;
-            font-size: 30px;
-            font-weight: bold;
-            cursor: pointer;
-            z-index: 1001;
-        }
-        .modal iframe {
-            width: 100%;
-            height: 100%;
-            border: none;
+        .stats p {
+            margin: 5px 0;
         }
     </style>
 </head>
 <body>
-    <header>
-        <h1>Political Speech Semantic Map Gallery</h1>
-        <p class="subtitle">Explore visual topic modeling of political speeches</p>
-    </header>
-    <div class="container">
-        <div class="gallery">
-            <div class="map-item">
-                <div class="map-preview">
-                    <iframe src="trump_speeches.html"></iframe>
-                    <div class="map-overlay">
-                        <a href="#" class="view-button" data-map="trump_speeches.html">View Map</a>
-                    </div>
-                </div>
-                <div class="map-info">
-                    <h2>Trump Speeches Analysis</h2>
-                    <p>Visual topic modeling of Trump's speeches, with metadata about which parts of his speeches discuss each topic.</p>
+    <!-- ... (keep header and container opening tags) ... -->
+    <div class="gallery">
+        <!-- ... (keep Trump Speeches Analysis card) ... -->
+        <div class="map-item">
+            <div class="map-preview">
+                <iframe src="inaugural_speeches_map.html"></iframe>
+                <div class="map-overlay">
+                    <a href="#" class="view-button" data-map="inaugural_speeches_map.html">View Map</a>
                 </div>
             </div>
-            <div class="map-item">
-                <div class="map-preview">
-                    <iframe src="inaugural_speeches_map.html"></iframe>
-                    <div class="map-overlay">
-                        <a href="#" class="view-button" data-map="inaugural_speeches_map.html">View Map</a>
-                    </div>
-                </div>
-                <div class="map-info">
-                    <h2>US Presidential Inaugural Speeches</h2>
-                    <p>Visual topic modeling of various US presidential inaugural speeches throughout history.</p>
-                </div>
+            <div class="map-info">
+                <h2>US Presidential Inaugural Speeches</h2>
+                <p>Visual topic modeling of various US presidential inaugural speeches throughout history.</p>
+            </div>
+            <div class="stats">
+                <p><strong>Chi-square statistic:</strong> 50.52226900766782</p>
+                <p><strong>p-value:</strong> 1.1307886006522511e-06</p>
+                <p><strong>Interpretation:</strong> There is a statistically significant difference in topic distribution across political sides.</p>
             </div>
         </div>
-    </div>
-
-    <div id="mapModal" class="modal">
-        <span class="close-modal">&times;</span>
-        <div class="modal-content">
-            <iframe id="modalIframe" src=""></iframe>
+        <div class="map-item">
+            <div class="map-preview">
+                <iframe src="topic_analysis_plot.html"></iframe>
+                <div class="map-overlay">
+                    <a href="#" class="view-button" data-map="topic_analysis_plot.html">View Plot</a>
+                </div>
+            </div>
+            <div class="map-info">
+                <h2>Topic Distribution Analysis</h2>
+                <p>Comparison of topic distributions between Trump, Republican, and Democratic speeches.</p>
+            </div>
         </div>
     </div>
-
-    <script>
-        const modal = document.getElementById('mapModal');
-        const modalIframe = document.getElementById('modalIframe');
-        const viewButtons = document.querySelectorAll('.view-button');
-        const closeModal = document.querySelector('.close-modal');
-
-        viewButtons.forEach(button => {
-            button.addEventListener('click', (e) => {
-                e.preventDefault();
-                const mapSrc = button.getAttribute('data-map');
-                modalIframe.src = mapSrc;
-                modal.style.display = 'block';
-            });
-        });
-
-        closeModal.addEventListener('click', () => {
-            modal.style.display = 'none';
-            modalIframe.src = '';
-        });
-
-        window.addEventListener('click', (e) => {
-            if (e.target == modal) {
-                modal.style.display = 'none';
-                modalIframe.src = '';
-            }
-        });
-    </script>
+    <!-- ... (keep closing tags and script) ... -->
 </body>
 </html>