Last active
April 6, 2026 22:11
-
-
Save ZakomakotheZBH/33945e91403f16e250e5878f2c2740bd to your computer and use it in GitHub Desktop.
a tiny snippet to make a simple browser template in html using iframe
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Zewpol superweb5</title> | |
| <style> | |
| body, html { | |
| margin: 0; | |
| padding: 0; | |
| height: 100%; | |
| font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; | |
| overflow: hidden; | |
| background-color: #202124; | |
| } | |
| /* Browser Toolbar */ | |
| #toolbar { | |
| background-color: #35363a; | |
| padding: 10px; | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| color: white; | |
| } | |
| #address-bar { | |
| flex-grow: 1; | |
| padding: 8px 15px; | |
| border-radius: 20px; | |
| border: none; | |
| outline: none; | |
| background-color: #202124; | |
| color: white; | |
| font-size: 14px; | |
| } | |
| button { | |
| background-color: #4a4d51; | |
| color: white; | |
| border: none; | |
| padding: 8px 15px; | |
| border-radius: 5px; | |
| cursor: pointer; | |
| transition: background 0.2s; | |
| } | |
| button:hover { | |
| background-color: #5f6368; | |
| } | |
| /* Viewport Container */ | |
| #viewport-container { | |
| width: 100%; | |
| height: calc(100vh - 56px); /* Subtract toolbar height */ | |
| background-color: white; | |
| } | |
| iframe { | |
| width: 100%; | |
| height: 100%; | |
| border: none; | |
| } | |
| .status-msg { | |
| position: fixed; | |
| bottom: 10px; | |
| right: 10px; | |
| color: #9aa0a6; | |
| font-size: 12px; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div id="toolbar"> | |
| <button onclick="goHome()">🏠 Home</button> | |
| <input type="text" id="address-bar" placeholder="Enter URL (e.g., https://wikipedia.org)" | |
| onkeydown="if (event.key === 'Enter') navigate()"> | |
| <button onclick="navigate()">Go</button> | |
| </div> | |
| <div id="viewport-container"> | |
| <iframe id="browser-frame" src="https://www.wikipedia.org"></iframe> | |
| </div> | |
| <div class="status-msg">Zewpol superweb5 | Built with <iframe></div> | |
| <script> | |
| const addressBar = document.getElementById('address-bar'); | |
| const iframe = document.getElementById('browser-frame'); | |
| function navigate() { | |
| let url = addressBar.value.trim(); | |
| // Basic URL formatting | |
| if (url && !url.startsWith('http://') && !url.startsWith('https://')) { | |
| url = 'https://' + url; | |
| } | |
| if (url) { | |
| iframe.src = url; | |
| addressBar.value = url; | |
| } | |
| } | |
| function goHome() { | |
| const homeUrl = "https://www.wikipedia.org"; | |
| iframe.src = homeUrl; | |
| addressBar.value = homeUrl; | |
| } | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment