A fullstack app for indexing standard.site documents
stevedylan.dev
chore: added ie styles
+263
-9
packages/client/src/App.tsx
+263
-9
packages/client/src/App.tsx
···
105
105
};
106
106
107
107
return (
108
-
<div className="window" style={{ width: "100%", maxWidth: "800px" }}>
108
+
<div className="window" style={{ width: "100%", maxWidth: "900px" }}>
109
109
<div className="title-bar">
110
-
<div className="title-bar-text">Internet Explorer 6</div>
110
+
<div className="title-bar-text">ATFeeds - Microsoft Internet Explorer</div>
111
111
<div className="title-bar-controls">
112
112
<button aria-label="Minimize" />
113
113
<button aria-label="Maximize" />
114
114
<button aria-label="Close" />
115
115
</div>
116
116
</div>
117
-
<div className="window-body">
117
+
118
+
{/* IE Chrome Container */}
119
+
<div style={{ margin: "0 2px" }}>
120
+
{/* Menu Bar */}
118
121
<div
119
122
style={{
120
123
display: "flex",
121
-
gap: "8px",
122
-
marginBottom: "16px",
124
+
gap: "0",
125
+
padding: "1px 2px",
126
+
backgroundColor: "#ece9d8",
127
+
borderBottom: "1px solid #aca899",
128
+
fontSize: "12px",
129
+
}}
130
+
>
131
+
{["File", "Edit", "View", "Favorites", "Tools", "Help"].map((item) => (
132
+
<button
133
+
key={item}
134
+
style={{
135
+
background: "none",
136
+
border: "none",
137
+
padding: "1px 6px",
138
+
cursor: "pointer",
139
+
fontFamily: "inherit",
140
+
fontSize: "inherit",
141
+
}}
142
+
>
143
+
{item}
144
+
</button>
145
+
))}
146
+
</div>
147
+
148
+
{/* Toolbar */}
149
+
<div
150
+
style={{
151
+
display: "flex",
123
152
alignItems: "center",
153
+
gap: "2px",
154
+
padding: "2px 4px",
155
+
backgroundColor: "#ece9d8",
156
+
borderBottom: "1px solid #aca899",
124
157
}}
125
158
>
126
-
<button onClick={fetchFeed}>Refresh</button>
159
+
{/* Back button */}
160
+
<button
161
+
style={{
162
+
display: "flex",
163
+
alignItems: "center",
164
+
gap: "2px",
165
+
padding: "1px 4px",
166
+
background: "none",
167
+
border: "none",
168
+
cursor: "pointer",
169
+
}}
170
+
>
171
+
<img
172
+
src="/windows-icons/Back.png"
173
+
alt="Back"
174
+
style={{ width: "20px", height: "20px" }}
175
+
/>
176
+
<span style={{ fontSize: "11px" }}>Back</span>
177
+
</button>
178
+
179
+
{/* Forward button */}
180
+
<button
181
+
style={{
182
+
display: "flex",
183
+
alignItems: "center",
184
+
padding: "1px 2px",
185
+
background: "none",
186
+
border: "none",
187
+
cursor: "pointer",
188
+
}}
189
+
>
190
+
<img
191
+
src="/windows-icons/Forward.png"
192
+
alt="Forward"
193
+
style={{ width: "20px", height: "20px" }}
194
+
/>
195
+
</button>
196
+
197
+
<div style={{ width: "1px", height: "20px", backgroundColor: "#aca899", margin: "0 2px" }} />
198
+
199
+
{/* Stop */}
200
+
<button
201
+
style={{
202
+
padding: "1px 2px",
203
+
background: "none",
204
+
border: "none",
205
+
cursor: "pointer",
206
+
}}
207
+
>
208
+
<img
209
+
src="/windows-icons/Stop.png"
210
+
alt="Stop"
211
+
style={{ width: "20px", height: "20px" }}
212
+
/>
213
+
</button>
214
+
215
+
{/* Refresh */}
216
+
<button
217
+
onClick={fetchFeed}
218
+
style={{
219
+
padding: "1px 2px",
220
+
background: "none",
221
+
border: "none",
222
+
cursor: "pointer",
223
+
}}
224
+
>
225
+
<img
226
+
src="/windows-icons/IE Refresh.png"
227
+
alt="Refresh"
228
+
style={{ width: "20px", height: "20px" }}
229
+
/>
230
+
</button>
231
+
232
+
{/* Home */}
127
233
<button
128
234
onClick={() => window.open("https://standard.site", "_blank")}
235
+
style={{
236
+
padding: "1px 2px",
237
+
background: "none",
238
+
border: "none",
239
+
cursor: "pointer",
240
+
}}
129
241
>
130
-
Standard.site
242
+
<img
243
+
src="/windows-icons/IE Home.png"
244
+
alt="Home"
245
+
style={{ width: "20px", height: "20px" }}
246
+
/>
131
247
</button>
132
-
<div style={{ flex: 1 }} />
133
-
<span>{documents.length} documents</span>
248
+
249
+
<div style={{ width: "1px", height: "20px", backgroundColor: "#aca899", margin: "0 2px" }} />
250
+
251
+
{/* Search */}
252
+
<button
253
+
style={{
254
+
display: "flex",
255
+
alignItems: "center",
256
+
gap: "2px",
257
+
padding: "1px 4px",
258
+
background: "none",
259
+
border: "none",
260
+
cursor: "pointer",
261
+
}}
262
+
>
263
+
<img
264
+
src="/windows-icons/Search.png"
265
+
alt="Search"
266
+
style={{ width: "20px", height: "20px" }}
267
+
/>
268
+
<span style={{ fontSize: "11px" }}>Search</span>
269
+
</button>
270
+
271
+
{/* Favorites */}
272
+
<button
273
+
style={{
274
+
display: "flex",
275
+
alignItems: "center",
276
+
gap: "2px",
277
+
padding: "1px 4px",
278
+
background: "none",
279
+
border: "none",
280
+
cursor: "pointer",
281
+
}}
282
+
>
283
+
<img
284
+
src="/windows-icons/Favorites.png"
285
+
alt="Favorites"
286
+
style={{ width: "20px", height: "20px" }}
287
+
/>
288
+
<span style={{ fontSize: "11px" }}>Favorites</span>
289
+
</button>
290
+
291
+
<div style={{ width: "1px", height: "20px", backgroundColor: "#aca899", margin: "0 2px" }} />
292
+
293
+
{/* Mail */}
294
+
<button
295
+
style={{
296
+
padding: "1px 2px",
297
+
background: "none",
298
+
border: "none",
299
+
cursor: "pointer",
300
+
}}
301
+
>
302
+
<img
303
+
src="/windows-icons/Email.png"
304
+
alt="Mail"
305
+
style={{ width: "20px", height: "20px" }}
306
+
/>
307
+
</button>
308
+
309
+
{/* Print */}
310
+
<button
311
+
style={{
312
+
padding: "1px 2px",
313
+
background: "none",
314
+
border: "none",
315
+
cursor: "pointer",
316
+
}}
317
+
>
318
+
<img
319
+
src="/windows-icons/Printer.png"
320
+
alt="Print"
321
+
style={{ width: "20px", height: "20px" }}
322
+
/>
323
+
</button>
324
+
</div>
325
+
326
+
{/* Address Bar */}
327
+
<div
328
+
style={{
329
+
display: "flex",
330
+
alignItems: "center",
331
+
gap: "4px",
332
+
padding: "2px 4px",
333
+
backgroundColor: "#ece9d8",
334
+
borderBottom: "1px solid #aca899",
335
+
}}
336
+
>
337
+
<span style={{ fontSize: "11px", fontWeight: "normal" }}>Address</span>
338
+
<div
339
+
style={{
340
+
flex: 1,
341
+
display: "flex",
342
+
alignItems: "center",
343
+
backgroundColor: "white",
344
+
border: "1px solid #7f9db9",
345
+
padding: "1px 3px",
346
+
}}
347
+
>
348
+
<img
349
+
src="/windows-icons/Internet Explorer 6.png"
350
+
alt=""
351
+
style={{ width: "14px", height: "14px", marginRight: "3px" }}
352
+
/>
353
+
<span style={{ fontSize: "11px", color: "#000" }}>
354
+
https://atfeeds.stevedsimkins.workers.dev/feed
355
+
</span>
356
+
</div>
357
+
<button
358
+
style={{
359
+
display: "flex",
360
+
alignItems: "center",
361
+
gap: "2px",
362
+
padding: "1px 6px",
363
+
fontSize: "11px",
364
+
}}
365
+
>
366
+
<img
367
+
src="/windows-icons/Go.png"
368
+
alt=""
369
+
style={{ width: "14px", height: "14px" }}
370
+
/>
371
+
Go
372
+
</button>
373
+
<span style={{ fontSize: "11px" }}>Links</span>
374
+
</div>
375
+
</div>
376
+
377
+
<div className="window-body" style={{ margin: 0, padding: "4px 6px" }}>
378
+
<div
379
+
style={{
380
+
display: "flex",
381
+
gap: "4px",
382
+
marginBottom: "4px",
383
+
alignItems: "center",
384
+
fontSize: "11px",
385
+
}}
386
+
>
387
+
<span>{documents.length} documents loaded</span>
134
388
</div>
135
389
136
390
{loading && <p style={{ textAlign: "center" }}>Searching...</p>}