Hugging Face's logo

Spaces:
Alcime
/
trump_maps
Running

App Files Community
Alcime commited on
Commit
d3a295a
•
1 Parent(s): 526adcb

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +214 -19
index.html CHANGED
@@ -1,19 +1,214 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Political Speech Semantic Map Gallery</title>
7
+ <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;700&display=swap" rel="stylesheet">
8
+ <style>
9
+ body {
10
+ font-family: 'Roboto', sans-serif;
11
+ line-height: 1.6;
12
+ color: #333;
13
+ background-color: #f0f4f8;
14
+ margin: 0;
15
+ padding: 0;
16
+ }
17
+ .container {
18
+ max-width: 1200px;
19
+ margin: 0 auto;
20
+ padding: 40px 20px;
21
+ }
22
+ header {
23
+ background-color: #2c3e50;
24
+ color: white;
25
+ text-align: center;
26
+ padding: 60px 0;
27
+ margin-bottom: 40px;
28
+ }
29
+ h1 {
30
+ font-size: 2.5em;
31
+ margin: 0;
32
+ text-transform: uppercase;
33
+ letter-spacing: 2px;
34
+ }
35
+ .subtitle {
36
+ font-size: 1.2em;
37
+ font-weight: 300;
38
+ margin-top: 10px;
39
+ }
40
+ .gallery {
41
+ display: grid;
42
+ grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
43
+ gap: 30px;
44
+ }
45
+ .map-item {
46
+ background-color: white;
47
+ border-radius: 10px;
48
+ overflow: hidden;
49
+ box-shadow: 0 10px 20px rgba(0,0,0,0.1);
50
+ transition: all 0.3s ease;
51
+ }
52
+ .map-item:hover {
53
+ transform: translateY(-10px);
54
+ box-shadow: 0 15px 30px rgba(0,0,0,0.2);
55
+ }
56
+ .map-preview {
57
+ position: relative;
58
+ height: 200px;
59
+ overflow: hidden;
60
+ }
61
+ .map-preview iframe {
62
+ width: 100%;
63
+ height: 100%;
64
+ border: none;
65
+ pointer-events: none;
66
+ }
67
+ .map-overlay {
68
+ position: absolute;
69
+ top: 0;
70
+ left: 0;
71
+ width: 100%;
72
+ height: 100%;
73
+ background: rgba(44, 62, 80, 0.7);
74
+ display: flex;
75
+ align-items: center;
76
+ justify-content: center;
77
+ opacity: 0;
78
+ transition: opacity 0.3s ease;
79
+ }
80
+ .map-item:hover .map-overlay {
81
+ opacity: 1;
82
+ }
83
+ .view-button {
84
+ padding: 10px 20px;
85
+ background-color: #e74c3c;
86
+ color: white;
87
+ text-decoration: none;
88
+ border-radius: 5px;
89
+ font-weight: bold;
90
+ text-transform: uppercase;
91
+ transition: background-color 0.3s ease;
92
+ }
93
+ .view-button:hover {
94
+ background-color: #c0392b;
95
+ }
96
+ .map-info {
97
+ padding: 20px;
98
+ }
99
+ .map-info h2 {
100
+ margin: 0 0 10px 0;
101
+ color: #2c3e50;
102
+ font-size: 1.4em;
103
+ }
104
+ .map-info p {
105
+ margin: 0;
106
+ color: #7f8c8d;
107
+ font-size: 0.9em;
108
+ }
109
+ .modal {
110
+ display: none;
111
+ position: fixed;
112
+ z-index: 1000;
113
+ left: 0;
114
+ top: 0;
115
+ width: 100%;
116
+ height: 100%;
117
+ background-color: rgba(0,0,0,0.8);
118
+ }
119
+ .modal-content {
120
+ position: relative;
121
+ width: 90%;
122
+ height: 90%;
123
+ margin: 2% auto;
124
+ background-color: #fff;
125
+ border-radius: 10px;
126
+ overflow: hidden;
127
+ }
128
+ .close-modal {
129
+ position: absolute;
130
+ top: 10px;
131
+ right: 20px;
132
+ color: #fff;
133
+ font-size: 30px;
134
+ font-weight: bold;
135
+ cursor: pointer;
136
+ z-index: 1001;
137
+ }
138
+ .modal iframe {
139
+ width: 100%;
140
+ height: 100%;
141
+ border: none;
142
+ }
143
+ </style>
144
+ </head>
145
+ <body>
146
+ <header>
147
+ <h1>Political Speech Semantic Map Gallery</h1>
148
+ <p class="subtitle">Explore visual topic modeling of political speeches</p>
149
+ </header>
150
+ <div class="container">
151
+ <div class="gallery">
152
+ <div class="map-item">
153
+ <div class="map-preview">
154
+ <iframe src="trump_speeches.html"></iframe>
155
+ <div class="map-overlay">
156
+ <a href="#" class="view-button" data-map="trump_speeches.html">View Map</a>
157
+ </div>
158
+ </div>
159
+ <div class="map-info">
160
+ <h2>Trump Speeches Analysis</h2>
161
+ <p>Visual topic modeling of Trump's speeches, with metadata about which parts of his speeches discuss each topic.</p>
162
+ </div>
163
+ </div>
164
+ <div class="map-item">
165
+ <div class="map-preview">
166
+ <iframe src="inaugural_speeches_map.html"></iframe>
167
+ <div class="map-overlay">
168
+ <a href="#" class="view-button" data-map="inaugural_speeches_map.html">View Map</a>
169
+ </div>
170
+ </div>
171
+ <div class="map-info">
172
+ <h2>US Presidential Inaugural Speeches</h2>
173
+ <p>Visual topic modeling of various US presidential inaugural speeches throughout history.</p>
174
+ </div>
175
+ </div>
176
+ </div>
177
+ </div>
178
+
179
+ <div id="mapModal" class="modal">
180
+ <span class="close-modal">&times;</span>
181
+ <div class="modal-content">
182
+ <iframe id="modalIframe" src=""></iframe>
183
+ </div>
184
+ </div>
185
+
186
+ <script>
187
+ const modal = document.getElementById('mapModal');
188
+ const modalIframe = document.getElementById('modalIframe');
189
+ const viewButtons = document.querySelectorAll('.view-button');
190
+ const closeModal = document.querySelector('.close-modal');
191
+
192
+ viewButtons.forEach(button => {
193
+ button.addEventListener('click', (e) => {
194
+ e.preventDefault();
195
+ const mapSrc = button.getAttribute('data-map');
196
+ modalIframe.src = mapSrc;
197
+ modal.style.display = 'block';
198
+ });
199
+ });
200
+
201
+ closeModal.addEventListener('click', () => {
202
+ modal.style.display = 'none';
203
+ modalIframe.src = '';
204
+ });
205
+
206
+ window.addEventListener('click', (e) => {
207
+ if (e.target == modal) {
208
+ modal.style.display = 'none';
209
+ modalIframe.src = '';
210
+ }
211
+ });
212
+ </script>
213
+ </body>
214
+ </html>