DEV Community: Zako Mako

A template for browsers

Zako Mako — Tue, 01 Jul 2025 17:07:00 +0000

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>

Please use it. Thank you!

Zewpol cloud: your cloud server

Zako Mako — Tue, 01 Jul 2025 14:58:12 +0000

The Zewpol cloud server is the best cloud server on playcode. Try it now! (It’s connected to a local account not a Zewpol account!) https://zewpolcloud.playcode.io

AimOS: enjoy ZewpolOS on mobile

Zako Mako — Tue, 01 Jul 2025 14:36:37 +0000

Our new OS aimOS brings the joy of ZewpolOS at your mobile. We are still updating ZewpolOS to the max. Here is the link: https://aimos.playcode.io

New game!

Zako Mako — Mon, 30 Jun 2025 22:56:24 +0000

My new game is awesome! you get to make a civilization in space! here is the code:

<!DOCTYPE html>
<html>
<head>
    <title>Space Boy - Build a Space Civilization</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            background-color: #0f0f1f;
            color: #fff;
            font-family: 'Courier New', monospace;
            overflow: hidden;
            touch-action: none;
        }

        #gameContainer {
            position: relative;
            width: 800px;
            height: 600px;
            margin: 20px auto;
            border: 4px solid #4466ff;
            box-shadow: 0 0 20px #4466ff;
            image-rendering: pixelated;
        }

        #gameCanvas {
            background-color: #000022;
        }

        #uiPanel {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 120px;
            background-color: rgba(0, 0, 40, 0.8);
            border-top: 2px solid #4466ff;
            display: flex;
            flex-direction: column;
            padding: 10px;
            box-sizing: border-box;
        }

        #resources {
            display: flex;
            justify-content: space-around;
            margin-bottom: 10px;
        }

        .resource {
            display: flex;
            align-items: center;
        }

        .resource-icon {
            width: 16px;
            height: 16px;
            margin-right: 5px;
        }

        #buildMenu {
            display: flex;
            justify-content: space-around;
        }

        .buildButton {
            width: 64px;
            height: 64px;
            background-color: #112244;
            border: 2px solid #4466ff;
            color: white;
            cursor: pointer;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            font-size: 10px;
            image-rendering: pixelated;
        }

        .buildButton:hover {
            background-color: #224466;
        }

        #titleScreen {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 40, 0.9);
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            z-index: 100;
        }

        #title {
            font-size: 48px;
            color: #4466ff;
            margin-bottom: 30px;
            text-shadow: 0 0 10px #4466ff;
        }

        #startButton {
            padding: 10px 30px;
            background-color: #112244;
            border: 2px solid #4466ff;
            color: white;
            font-size: 20px;
            cursor: pointer;
        }

        #startButton:hover {
            background-color: #224466;
        }

        #message {
            position: absolute;
            top: 20px;
            left: 50%;
            transform: translateX(-50%);
            background-color: rgba(0, 0, 40, 0.8);
            border: 2px solid #4466ff;
            padding: 10px;
            display: none;
            z-index: 50;
        }
    </style>
</head>
<body>
    <div id="gameContainer">
        <canvas id="gameCanvas" width="800" height="600"></canvas>

        <div id="uiPanel">
            <div id="resources">
                <div class="resource">
                    <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAhklEQVQ4y2NgGAXDFmzatMmKAQ38v3//PgMqRgWoYqgYFQwqC1A9gOoRRjQxRrQwYEQTY0QTY0QTY0QTY0QTY0QTY0QTY0QTY0QTY0QTY0QTY0QTY0QTY0QTY0QTY0QTY0QTY0QTY0QTY0QTY0QTY0QTY0QTY0QTY0QTY0QTY0QTYwQAjXQYw4QhXAAAAABJRU5ErkJggg==" class="resource-icon">
                    <span id="metalCount">100</span>
                </div>
                <div class="resource">
                    <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAdklEQVQ4y2NgGAXDFmzatMmKAQ38v3//PgMqRgWoYqgYFQwqC1A9gOoRRjQxRrQwYEQTY0QTY0QTY0QTY0QTY0QTY0QTY0QTY0QTY0QTY0QTY0QTY0QTY0QTY0QTY0QTY0QTY0QTY0QTY0QTY0QTY0QTY0QTY0QTY0QTY0QTY0QTYwQANVYYw4QhXAAAAABJRU5ErkJggg==" class="resource-icon">
                    <span id="energyCount">50</span>
                </div>
                <div class="resource">
                    <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAhklEQVQ4y2NgGAXDFmzatMmKAQ38v3//PgMqRgWoYqgYFQwqC1A9gOoRRjQxRrQwYEQTY0QTY0QTY0QTY0QTY0QTY0QTY0QTY0QTY0QTY0QTY0QTY0QTY0QTY0QTY0QTY0QTY0QTY0QTY0QTY0QTY0QTY0QTY0QTY0QTY0QTY0QTYwQAjXQYw4QhXAAAAABJRU5ErkJggg==" class="resource-icon">
                    <span id="foodCount">30</span>
                </div>
                <div class="resource">
                    <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAhklEQVQ4y2NgGAXDFmzatMmKAQ38v3//PgMqRgWoYqgYFQwqC1A9gOoRRjQxRrQwYEQTY0QTY0QTY0QTY0QTY0QTY0QTY0QTY0QTY0QTY0QTY0QTY0QTY0QTY0QTY0QTY0QTY0QTY0QTY0QTY0QTY0QTY0QTY0QTY0QTY0QTY0QTYwQAjXQYw4QhXAAAAABJRU5ErkJggg==" class="resource-icon">
                    <span id="populationCount">5</span>
                </div>
            </div>

            <div id="buildMenu">
                <div class="buildButton" data-building="habitat">
                    <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAhklEQVQ4y2NgGAXDFmzatMmKAQ38v3//PgMqRgWoYqgYFQwqC1A9gOoRRjQxRrQwYEQTY0QTY0QTY0QTY0QTY0QTY0QTY0QTY0QTY0QTY0QTY0QTY0QTY0QTY0QTY0QTY0QTY0QTY0QTY0QTY0QTY0QTY0QTY0QTY0QTY0QTY0QTYwQAjXQYw4QhXAAAAABJRU5ErkJggg==" width="32" height="32">
                    Habitat
                </div>
                <div class="buildButton" data-building="solar">
                    <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAhklEQVQ4y2NgGAXDFmzatMmKAQ38v3//PgMqRgWoYqgYFQwqC1A9gOoRRjQxRrQwYEQTY0QTY0QTY0QTY0QTY0QTY0QTY0QTY0QTY0QTY0QTY0QTY0QTY0QTY0QTY0QTY0QTY0QTY0QTY0QTY0QTY0QTY0QTY0QTY0QTY0QTY0QTYwQAjXQYw4QhXAAAAABJRU5ErkJggg==" width="32" height="32">
                    Solar Panel
                </div>
                <div class="buildButton" data-building="mine">
                    <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAhklEQVQ4y2NgGAXDFmzatMmKAQ38v3//PgMqRgWoYqgYFQwqC1A9gOoRRjQxRrQwYEQTY0QTY0QTY0QTY0QTY0QTY0QTY0QTY0QTY0QTY0QTY0QTY0QTY0QTY0QTY0QTY0QTY0QTY0QTY0QTY0QTY0QTY0QTY0QTY0QTY0QTY0QTYwQAjXQYw4QhXAAAAABJRU5ErkJggg==" width="32" height="32">
                    Mine
                </div>
                <div class="buildButton" data-building="farm">
                    <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAhklEQVQ4y2NgGAXDFmzatMmKAQ38v3//PgMqRgWoYqgYFQwqC1A9gOoRRjQxRrQwYEQTY0QTY0QTY0QTY0QTY0QTY0QTY0QTY0QTY0QTY0QTY0QTY0QTY0QTY0QTY0QTY0QTY0QTY0QTY0QTY0QTY0QTY0QTY0QTY0QTY0QTY0QTYwQAjXQYw4QhXAAAAABJRU5ErkJggg==" width="32" height="32">
                    Farm
                </div>
            </div>
        </div>

        <div id="titleScreen">
            <h1 id="title">SPACE BOY</h1>
            <button id="startButton">START GAME</button>
        </div>

        <div id="message"></div>
    </div>

    <script>
        // Game state
        const gameState = {
            resources: {
                metal: 100,
                energy: 50,
                food: 30,
                population: 5,
                maxPopulation: 10
            },
            buildings: [],
            selectedBuilding: null,
            gameStarted: false
        };

        // Building definitions
        const buildingTypes = {
            habitat: {
                name: "Habitat",
                cost: { metal: 50, energy: 20 },
                production: { population: 2 },
                color: "#4466ff",
                width: 40,
                height: 40
            },
            solar: {
                name: "Solar Panel",
                cost: { metal: 30 },
                production: { energy: 5 },
                color: "#ffff00",
                width: 30,
                height: 30
            },
            mine: {
                name: "Mine",
                cost: { energy: 10 },
                production: { metal: 3 },
                color: "#aaaaaa",
                width: 35,
                height: 35
            },
            farm: {
                name: "Farm",
                cost: { metal: 20, energy: 5 },
                production: { food: 4 },
                color: "#44ff44",
                width: 40,
                height: 30
            }
        };

        // DOM elements
        const canvas = document.getElementById('gameCanvas');
        const ctx = canvas.getContext('2d');
        const titleScreen = document.getElementById('titleScreen');
        const startButton = document.getElementById('startButton');
        const messageDiv = document.getElementById('message');
        const buildButtons = document.querySelectorAll('.buildButton');
        const resourceCounts = {
            metal: document.getElementById('metalCount'),
            energy: document.getElementById('energyCount'),
            food: document.getElementById('foodCount'),
            population: document.getElementById('populationCount')
        };

        // Event listeners
        startButton.addEventListener('click', startGame);
        canvas.addEventListener('click', handleCanvasClick);
        buildButtons.forEach(button => {
            button.addEventListener('click', () => {
                const buildingType = button.getAttribute('data-building');
                selectBuilding(buildingType);
            });
        });

        // Game functions
        function startGame() {
            titleScreen.style.display = 'none';
            gameState.gameStarted = true;
            updateResourceDisplay();

            // Start game loop
            setInterval(gameLoop, 1000);
            requestAnimationFrame(render);
        }

        function gameLoop() {
            // Update resources from buildings
            gameState.buildings.forEach(building => {
                const type = buildingTypes[building.type];
                Object.keys(type.production).forEach(resource => {
                    gameState.resources[resource] += type.production[resource];

                    // Handle population cap
                    if (resource === 'population') {
                        gameState.resources.population = Math.min(
                            gameState.resources.population,
                            gameState.resources.maxPopulation
                        );
                    }
                });
            });

            updateResourceDisplay();
        }

        function updateResourceDisplay() {
            Object.keys(resourceCounts).forEach(resource => {
                resourceCounts[resource].textContent = gameState.resources[resource];
            });
        }

        function selectBuilding(buildingType) {
            gameState.selectedBuilding = buildingType;
            showMessage(`Selected: ${buildingTypes[buildingType].name}`);
        }

        function handleCanvasClick(e) {
            if (!gameState.gameStarted || !gameState.selectedBuilding) return;

            const rect = canvas.getBoundingClientRect();
            const x = e.clientX - rect.left;
            const y = e.clientY - rect.top;

            // Check if we can afford the building
            const buildingType = buildingTypes[gameState.selectedBuilding];
            let canAfford = true;

            Object.keys(buildingType.cost).forEach(resource => {
                if (gameState.resources[resource] < buildingType.cost[resource]) {
                    canAfford = false;
                }
            });

            if (!canAfford) {
                showMessage("Not enough resources!");
                return;
            }

            // Pay for the building
            Object.keys(buildingType.cost).forEach(resource => {
                gameState.resources[resource] -= buildingType.cost[resource];
            });

            // Add the building
            gameState.buildings.push({
                type: gameState.selectedBuilding,
                x: x - buildingType.width/2,
                y: y - buildingType.height/2
            });

            updateResourceDisplay();
            showMessage(`${buildingType.name} built!`);
        }

        function showMessage(text) {
            messageDiv.textContent = text;
            messageDiv.style.display = 'block';
            setTimeout(() => {
                messageDiv.style.display = 'none';
            }, 2000);
        }

        function render() {
            // Clear canvas
            ctx.fillStyle = '#000022';
            ctx.fillRect(0, 0, canvas.width, canvas.height);

            // Draw stars
            for (let i = 0; i < 100; i++) {
                ctx.fillStyle = '#ffffff';
                ctx.fillRect(
                    Math.random() * canvas.width,
                    Math.random() * canvas.height,
                    1, 1
                );
            }

            // Draw buildings
            gameState.buildings.forEach(building => {
                const type = buildingTypes[building.type];
                ctx.fillStyle = type.color;
                ctx.fillRect(building.x, building.y, type.width, type.height);

                // Draw building details
                ctx.fillStyle = '#000000';
                ctx.fillRect(building.x + 5, building.y + 5, type.width - 10, 3);
                ctx.fillRect(building.x + 5, building.y + 10, type.width - 10, 3);
            });

            // Draw selected building preview
            if (gameState.selectedBuilding) {
                const type = buildingTypes[gameState.selectedBuilding];
                ctx.strokeStyle = '#ffffff';
                ctx.setLineDash([5, 5]);
                ctx.strokeRect(
                    gameState.mouseX - type.width/2,
                    gameState.mouseY - type.height/2,
                    type.width,
                    type.height
                );
                ctx.setLineDash([]);
            }

            requestAnimationFrame(render);
        }

        // Track mouse position for building preview
        canvas.addEventListener('mousemove', (e) => {
            const rect = canvas.getBoundingClientRect();
            gameState.mouseX = e.clientX - rect.left;
            gameState.mouseY = e.clientY - rect.top;
        });

        // Initialize
        updateResourceDisplay();
    </script>
</body>
</html>

here is the link:

spacebuild.playcode.io

thank you!

Faceonescript with html tutorial

Zako Mako — Sun, 29 Jun 2025 12:16:01 +0000

Faceonescript is much better when used with html. Here is some code for a html file:

<!DOCTYPE html>
  <html>
    <head>
 <body>
<button> follow Zako mako <button>
 <body>
   <head>
     </script> src= ‘function.fnes’</script>
     <html>

`Now add faceonescript in a new.fnes` or even

‘.txt’ file.

`
//include funtion.n
// line.5= ((DEBUG )).5
// src(‘index.html’).4
// [line.4] open(https://dev.to)
// return.5 if [false]

`
This will add a function to your button. Use this instead of JS or TS.

ZewpolOS 2.2 no Zewpol search

Zako Mako — Sun, 29 Jun 2025 11:55:53 +0000

We are sorry, but there is no longer a intergrated search in ZewpolOS. You can ask to edit the files in the comments so I can give you access.

New dev discord

Zako Mako — Sat, 28 Jun 2025 14:44:08 +0000

We have a discord! You can chat about new products of the company Zebra inc. Here it is:
https://discord.gg/s8qDWjZFSs

Zewai: your better ai

Zako Mako — Sat, 28 Jun 2025 14:40:41 +0000

ZewAI is better ai for you it is just good
To get the link get it here: https://zewai.playcode.io/

ZewpolOS 2.2: your windows 11 alternative

Zako Mako — Sat, 28 Jun 2025 14:30:18 +0000

Windows 10 support ends soon. These are your options:

Windows 11🤮
ZewpolOS 😁

Oh and ZorinOS, too laggy and pricy.
So switch to ZewpolOS, your perfect alternative.

ZewpolOS 2.2

Zako Mako — Sat, 28 Jun 2025 13:41:05 +0000

ZewpolOS 2.2 is going to be a MASSIVE UPGRADE. We are introducing things like ZewpolOS apps
And ZewpolOS chat. All new features will come in July 2025.

New ZewpolOS mod

Zako Mako — Fri, 27 Jun 2025 23:14:33 +0000

Here is DOSFY: the first ever ZewpolOS skin. The link: https://dosfy.playcode.io

Gaming on switch 2 🤮🤢🤢🤮🤮🤮🤮🤮🤑🤑🤑🤑🤑🤑

Zako Mako — Fri, 27 Jun 2025 21:10:48 +0000

Nintendo switch 2 is overpriced and bad. Solution? Game on switch oled.