Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | |
| <title>Windows 95 Simulator</title> | |
| <link rel="preconnect" href="https://fonts.googleapis.com" /> | |
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin /> | |
| <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet"/> | |
| <lick rel="stylesheet" href="index.css""> | |
| <script type="importmap"> | |
| { | |
| "imports": { | |
| "@google/genai": "https://esm.sh/@google/[email protected]", | |
| "@tailwindcss/browser": "https://esm.sh/@tailwindcss/browser@^4.1.3" | |
| } | |
| } | |
| </script> | |
| </head> | |
| <body> | |
| <div class="desktop" id="desktop"> | |
| <!-- Desktop Icons --> | |
| <div class="icon" data-app="myComputer"> | |
| <img | |
| src="https://storage.googleapis.com/gemini-95-icons/mycomputer.png" | |
| alt="My Computer" | |
| style="width: 70px; height: 50px" | |
| /> | |
| <span>My Gemtop</span> | |
| </div> | |
| <div class="icon" data-app="chrome"> | |
| <img src="https://storage.googleapis.com/gemini-95-icons/chrome-icon-2.png" alt="Chrome" /> | |
| <span>Chrome</span> | |
| </div> | |
| <div class="icon" data-app="notepad"> | |
| <img src="https://storage.googleapis.com/gemini-95-icons/GemNotes.png" alt="Notepad" /> | |
| <span>GemNotes</span> | |
| </div> | |
| <div class="icon" data-app="paint"> | |
| <img src="https://storage.googleapis.com/gemini-95-icons/gempaint.png" alt="Paint" /> | |
| <span>GemPaint</span> | |
| </div> | |
| <div class="icon" data-app="doom"> | |
| <img | |
| src="https://64.media.tumblr.com/1d89dfa76381e5c14210a2149c83790d/7a15f84c681c1cf9-c1/s540x810/86985984be99d5591e0cbc0dea6f05ffa3136dac.png" | |
| alt="Doom II" | |
| /> | |
| <span>Doom II</span> | |
| </div> | |
| <div class="icon" data-app="gemini"> | |
| <img | |
| src="https://storage.googleapis.com/gemini-95-icons/GeminiChatRetro.png" | |
| alt="Gemini App" | |
| /> | |
| <span>Gemini App</span> | |
| </div> | |
| <div class="icon" data-app="minesweeper"> | |
| <img | |
| src="https://storage.googleapis.com/gemini-95-icons/gemsweeper.png" | |
| alt="Minesweeper" | |
| style="width: 48px; height: 48px" | |
| /> | |
| <span>GemSweeper</span> | |
| </div> | |
| <div class="icon" data-app="mediaPlayer"> | |
| <img | |
| src="https://storage.googleapis.com/gemini-95-icons/ytmediaplayer.png" | |
| alt="Media Player" | |
| style="width: 48px; height: 48px" | |
| /> | |
| <span>GemPlayer</span> | |
| </div> | |
| <!-- Windows --> | |
| <div class="window resizable" id="myComputer"> | |
| <div class="window-titlebar"> | |
| <span class="window-title">My Gemtop</span> | |
| <div class="window-controls"> | |
| <div class="window-minimize window-control-button">−</div> | |
| <div class="window-close window-control-button">✕</div> | |
| </div> | |
| </div> | |
| <div class="window-content" style="background-color: white"> | |
| <div id="c-drive-icon" class="window-icon"> | |
| <img src="https://storage.googleapis.com/gemini-95-icons/cdrive.png" alt="C Drive" /> | |
| <span>C:</span> | |
| </div> | |
| <div id="c-drive-content" style="display: none"> | |
| <div id="secret-image-icon" class="window-icon"> | |
| <img | |
| src="https://win98icons.alexmeub.com/icons/png/paint_file-0.png" | |
| alt="Secret File" | |
| /> | |
| <span>dontshowthis<br />toanyone.jpg</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="window resizable" id="chrome"> | |
| <div class="window-titlebar"> | |
| <span class="window-title">Chrome</span> | |
| <div class="window-controls"> | |
| <div class="window-minimize window-control-button">−</div> | |
| <div class="window-close window-control-button">✕</div> | |
| </div> | |
| </div> | |
| <div class="window-content"> | |
| <div class="browser-toolbar"> | |
| <div class="address-bar-container"> | |
| <input | |
| type="text" | |
| class="browser-address-bar" | |
| placeholder="Enter a website URL..." | |
| value="https://www.google.com" | |
| /> | |
| <button class="browser-go-button">Go!</button> | |
| </div> | |
| </div> | |
| <div class="browser-viewport"> | |
| <iframe | |
| id="browser-frame" | |
| src="https://web.archive.org/web/19990428171538/http://google.com/" | |
| width="100%" | |
| height="100%" | |
| ></iframe> | |
| <div class="browser-loading"> | |
| Generating website... | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="window resizable" id="notepad"> | |
| <div class="window-titlebar"> | |
| <span class="window-title">GemNotes</span> | |
| <div class="window-controls"> | |
| <div class="window-minimize window-control-button">−</div> | |
| <div class="window-close window-control-button">✕</div> | |
| </div> | |
| </div> | |
| <div class="window-content"> | |
| <div class="notepad-menu"> | |
| <button class="notepad-story-button">Generate Story</button> | |
| </div> | |
| <textarea | |
| class="notepad-textarea" | |
| style=" | |
| width: 100%; | |
| height: calc(100% - 30px); | |
| border: none; | |
| outline: none; | |
| resize: none; | |
| background-color: white; | |
| border: 1px solid #808080; | |
| " | |
| ></textarea> | |
| </div> | |
| </div> | |
| <div class="window resizable" id="paint"> | |
| <div class="window-titlebar"> | |
| <span class="window-title">GemPaint</span> | |
| <div class="window-controls"> | |
| <div class="window-minimize window-control-button">−</div> | |
| <div class="window-close window-control-button">✕</div> | |
| </div> | |
| </div> | |
| <div | |
| class="window-content" | |
| style=" | |
| display: flex; | |
| flex-direction: column; | |
| padding: 0; | |
| margin: 0; | |
| background-color: #c0c0c0; | |
| " | |
| > | |
| <div class="paint-toolbar"> | |
| <div class="paint-colors"> | |
| <button | |
| class="paint-color-swatch" | |
| data-color="black" | |
| style="background-color: black" | |
| ></button> | |
| <button | |
| class="paint-color-swatch" | |
| data-color="red" | |
| style="background-color: red" | |
| ></button> | |
| <button | |
| class="paint-color-swatch" | |
| data-color="blue" | |
| style="background-color: blue" | |
| ></button> | |
| <button | |
| class="paint-color-swatch" | |
| data-color="green" | |
| style="background-color: green" | |
| ></button> | |
| <button | |
| class="paint-color-swatch" | |
| data-color="yellow" | |
| style="background-color: yellow" | |
| ></button> | |
| <button class="paint-color-swatch" data-color="white" style="background-color: white"> | |
| E | |
| </button> | |
| </div> | |
| <div class="paint-brush-sizes"> | |
| <button class="paint-size-button" data-size="2">S</button> | |
| <button class="paint-size-button" data-size="5">M</button> | |
| <button class="paint-size-button" data-size="10">L</button> | |
| </div> | |
| <button class="paint-clear-button">Clear</button> | |
| </div> | |
| <canvas | |
| id="paint-canvas" | |
| style="flex-grow: 1; background-color: white; cursor: crosshair; display: block" | |
| ></canvas> | |
| </div> | |
| </div> | |
| <div class="window resizable" id="doom"> | |
| <div class="window-titlebar"> | |
| <span class="window-title">Doom II</span> | |
| <div class="window-controls"> | |
| <div class="window-minimize window-control-button">−</div> | |
| <div class="window-close window-control-button">✕</div> | |
| </div> | |
| </div> | |
| <div class="window-content" id="doom-content"> | |
| </div> | |
| </div> | |
| <div class="window resizable" id="gemini"> | |
| <div class="window-titlebar"> | |
| <span class="window-title">Gemini App</span> | |
| <div class="window-controls"> | |
| <div class="window-minimize window-control-button">−</div> | |
| <div class="window-close window-control-button">✕</div> | |
| </div> | |
| </div> | |
| <div class="window-content gemini-chat-content"> | |
| <div class="gemini-chat-history"> | |
| </div> | |
| <div class="gemini-chat-input-area"> | |
| <input type="text" class="gemini-chat-input" placeholder="Type your message..." /> | |
| <button class="gemini-chat-send">Send</button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="window resizable" id="minesweeper" style="width: 400px; height: 450px"> | |
| <div class="window-titlebar"> | |
| <span class="window-title">GemSweeper</span> | |
| <div class="window-controls"> | |
| <div class="window-minimize window-control-button">−</div> | |
| <div class="window-close window-control-button">✕</div> | |
| </div> | |
| </div> | |
| <div | |
| class="window-content minesweeper-content" | |
| style=" | |
| display: flex; | |
| flex-direction: column; | |
| padding: 0; | |
| margin: 0; | |
| background-color: #c0c0c0; | |
| " | |
| > | |
| <div class="minesweeper-controls"> | |
| <div class="minesweeper-info minesweeper-flag-count">🚩 10</div> | |
| <button class="minesweeper-reset-button">🙂</button> | |
| <div class="minesweeper-info minesweeper-timer">⏱️ 0</div> | |
| </div> | |
| <div class="minesweeper-hint-area"> | |
| <button class="minesweeper-hint-button">💡 Hint</button> | |
| <div class="minesweeper-commentary">Let's play! Click a square to start.</div> | |
| </div> | |
| <div class="minesweeper-grid-container"> | |
| <div class="minesweeper-grid" id="minesweeper-board"> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="window resizable" id="imageViewer" style="width: 350px; height: 300px"> | |
| <div class="window-titlebar"> | |
| <span class="window-title" id="image-viewer-title">Image Viewer</span> | |
| <div class="window-controls"> | |
| <div class="window-minimize window-control-button">−</div> | |
| <div class="window-close window-control-button">✕</div> | |
| </div> | |
| </div> | |
| <div | |
| class="window-content image-viewer-content" | |
| style=" | |
| padding: 0; | |
| overflow: hidden; | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| background-color: #808080; | |
| " | |
| > | |
| <img | |
| id="image-viewer-img" | |
| src="" | |
| alt="Image" | |
| style="max-width: 100%; max-height: 100%; object-fit: contain" | |
| /> | |
| </div> | |
| </div> | |
| <div class="window resizable" id="mediaPlayer" style="width: 520px; height: 500px;"> | |
| <div class="window-titlebar"> | |
| <span class="window-title">GemPlayer</span> | |
| <div class="window-controls"> | |
| <div class="window-minimize window-control-button">−</div> | |
| <div class="window-close window-control-button">✕</div> | |
| </div> | |
| </div> | |
| <div class="window-content media-player-content"> | |
| <div class="media-player-url-bar"> | |
| <input type="text" class="media-player-input" placeholder="Enter YouTube Video URL or ID" /> | |
| <button class="media-player-load-button">Load</button> | |
| </div> | |
| <div class="media-player-video-container"> | |
| <div id="youtube-player-mediaPlayer"> | |
| <p class="media-player-status-message">Loading GemPlayer...</p> | |
| </div> | |
| </div> | |
| <div class="media-player-controls-panel"> | |
| <div class="media-player-buttons-group"> | |
| <button class="media-player-control-button" id="media-player-play" title="Play">▶</button> | |
| <button class="media-player-control-button" id="media-player-pause" title="Pause">❚❚</button> | |
| <button class="media-player-control-button" id="media-player-stop" title="Stop">■</button> | |
| </div> | |
| <div class="media-player-progress-bar-container-placeholder"> | |
| <div class="media-player-progress-bar-placeholder"></div> | |
| </div> | |
| <div class="media-player-volume-placeholder"> | |
| <span>🔊</span> | |
| <div class="media-player-volume-slider-placeholder"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Start Menu --> | |
| <div class="start-menu" id="start-menu"> | |
| <div class="start-menu-item" data-app="myComputer">My Gemtop</div> | |
| <div class="start-menu-item" data-app="chrome">Chrome</div> | |
| <div class="start-menu-item" data-app="notepad">GemNotes</div> | |
| <div class="start-menu-item" data-app="paint">GemPaint</div> | |
| <div class="start-menu-item" data-app="doom">Doom II</div> | |
| <div class="start-menu-item" data-app="gemini">Gemini App</div> | |
| <div class="start-menu-item" data-app="minesweeper">GemSweeper</div> | |
| <div class="start-menu-item" data-app="mediaPlayer">GemPlayer</div> | |
| </div> | |
| <!-- Taskbar --> | |
| <div id="taskbar"> | |
| <button id="start-button"> | |
| <img | |
| src="https://storage.googleapis.com/gemini-95-icons/start-gemini.png" | |
| alt="Start" | |
| style="width: 80px; height: 70px" | |
| /> | |
| </button> | |
| <div id="taskbar-apps"> | |
| </div> | |
| </div> | |
| <div id="paint-assistant"> | |
| <div class="assistant-bubble">Thinking...</div> | |
| <img | |
| src="https://storage.googleapis.com/gemini-95-icons/robot-assistant.gif" | |
| alt="Paint Assistant" | |
| class="assistant-image" | |
| /> | |
| </div> | |
| </div> | |
| </body> | |
| </html> | |