chore: added ie styles
532e2e3e
1 file(s) · +263 −9
| 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>} |