DEV Community

Zako Mako
Zako Mako

Posted on

A template for browsers

Here is a perfect chromium alternative that is made by AI and fixed by human. It is called Superbuild: https://gemini.google.com/app/1cf5fd4864213187?canvas-id=c_1cf5fd4864213187_superbuild-browser-template&full-screen=true here is the code:


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Superbuild Browser</title>
    <style>
        /* Basic styling for the browser layout */
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            display: flex;
            flex-direction: column;
            height: 100vh;
            overflow: hidden;
            background-color: #f0f2f5; /* Light grey background */
        }

        .browser-header {
            display: flex;
            align-items: center;
            padding: 10px;
            background-color: #ffffff; /* White header background */
            border-bottom: 1px solid #e0e0e0;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }

        .browser-header button {
            padding: 8px 12px;
            margin-right: 5px;
            border: 1px solid #ccc;
            border-radius: 4px;
            background-color: #f0f0f0;
            cursor: pointer;
            font-size: 14px;
        }

        .browser-header button:hover {
            background-color: #e0e0e0;
        }

        .url-bar {
            flex-grow: 1;
            margin: 0 10px;
            padding: 8px 10px;
            border: 1px solid #ccc;
            border-radius: 4px;
            font-size: 14px;
        }

        .tabs-container {
            display: flex;
            background-color: #e8e8e8; /* Light grey for tabs */
            padding-left: 10px;
            border-bottom: 1px solid #d0d0d0;
        }

        .tab {
            padding: 8px 15px;
            border-top-left-radius: 6px;
            border-top-right-radius: 6px;
            background-color: #f0f0f0;
            margin-right: 2px;
            cursor: pointer;
            border: 1px solid #d0d0d0;
            border-bottom: none;
            font-size: 14px;
        }

        .tab.active {
            background-color: #ffffff;
            border-top: 2px solid #007bff; /* Highlight active tab */
            border-left: 1px solid #d0d0d0;
            border-right: 1px solid #d0d0d0;
            border-bottom: none;
        }

        .tab:hover:not(.active) {
            background-color: #e0e0e0;
        }

        .add-tab-button {
            padding: 8px 12px;
            background-color: #f0f0f0;
            border: 1px solid #d0d0d0;
            border-top-left-radius: 6px;
            border-top-right-radius: 6px;
            cursor: pointer;
            font-size: 14px;
            margin-left: auto; /* Push button to the right */
        }

        .add-tab-button:hover {
            background-color: #e0e0e0;
        }


        .browser-content {
            flex-grow: 1;
            border: none; /* iframe will handle its own borders if any */
            width: 100%;
            height: 100%;
            background-color: #ffffff;
        }

        /* Styling for the iframe itself */
        iframe {
            width: 100%;
            height: 100%;
            border: none;
        }
    </style>
</head>
<body>
    <div class="browser-header">
        <button id="backButton">Back</button>
        <button id="forwardButton">Forward</button>
        <button id="reloadButton">Reload</button>
        <input type="text" class="url-bar" id="urlInput" value="https://www.google.com">
        <button id="goButton">Go</button>
    </div>

    <div class="tabs-container" id="tabsContainer">
        <div class="tab active" data-tab-id="tab-1">Tab 1</div>
        <button class="add-tab-button" id="addTabButton">+</button>
    </div>

    <div class="browser-content" id="browserContent">
        <iframe id="browserFrame" src="https://www.google.com"></iframe>
    </div>

    <script>
        const urlInput = document.getElementById('urlInput');
        const goButton = document.getElementById('goButton');
        const browserFrame = document.getElementById('browserFrame');
        const backButton = document.getElementById('backButton');
        const forwardButton = document.getElementById('forwardButton');
        const reloadButton = document.getElementById('reloadButton');
        const tabsContainer = document.getElementById('tabsContainer');
        const addTabButton = document.getElementById('addTabButton');

        let tabCounter = 1;
        let activeTabId = 'tab-1'; // Keep track of the active tab

        // Function to load a URL into the iframe
        function loadUrl(url) {
            if (url) {
                // Ensure the URL has a protocol, otherwise, default to HTTPS
                if (!url.startsWith('http://') && !url.startsWith('https://')) {
                    url = 'https://' + url;
                }
                browserFrame.src = url;
                urlInput.value = url; // Update the URL bar
            }
        }

        // Event listener for the Go button
        goButton.addEventListener('click', () => {
            loadUrl(urlInput.value);
        });

        // Event listener for Enter key in the URL bar
        urlInput.addEventListener('keypress', (e) => {
            if (e.key === 'Enter') {
                loadUrl(urlInput.value);
            }
        });

        // Navigation buttons
        backButton.addEventListener('click', () => {
            browserFrame.contentWindow.history.back();
        });

        forwardButton.addEventListener('click', () => {
            browserFrame.contentWindow.history.forward();
        });

        reloadButton.addEventListener('click', () => {
            browserFrame.contentWindow.location.reload();
        });

        // Tab functionality (basic)
        addTabButton.addEventListener('click', () => {
            tabCounter++;
            const newTabId = `tab-${tabCounter}`;
            const newTab = document.createElement('div');
            newTab.classList.add('tab');
            newTab.setAttribute('data-tab-id', newTabId);
            newTab.textContent = `Tab ${tabCounter}`;

            // Deactivate current active tab
            document.querySelector('.tab.active').classList.remove('active');
            newTab.classList.add('active');
            activeTabId = newTabId;

            // Insert new tab before the add button
            tabsContainer.insertBefore(newTab, addTabButton);

            // For now, new tabs will load the default Google page
            loadUrl('https://www.google.com');

            // Add click listener for new tab
            newTab.addEventListener('click', () => {
                // In a real browser, clicking a tab would switch to that tab's content
                // For this template, we'll just activate the clicked tab visually
                document.querySelector('.tab.active').classList.remove('active');
                newTab.classList.add('active');
                activeTabId = newTabId;
                // You would typically restore the state (URL) associated with this tab here
            });
        });

        // Initial load for the first tab
        loadUrl(urlInput.value);
    </script>
</body>
</html>

Enter fullscreen mode Exit fullscreen mode

Please use it. Thank you!

Top comments (0)