ZewpolOS: a Linux-based secure OS for browsing the web

#webdev #programming #javascript #opensource
ZewpolOS for starters

Even though I hate open source I recommend ZewpolOS. It is a clean nice OS with Faceone viewing and zewpol searching. To get the code there are 2 options: go to the site or get the code here. 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>zewpolOS Web Edition</title>
    <style>
        /* Reset and Base Styles */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }

        body {
            background-color: #1a1a1a;
            color: #e0e0e0;
            height: 100vh;
            overflow: hidden;
        }

        /* Desktop Area */
        #desktop {
            width: 100%;
            height: calc(100% - 40px);
            position: relative;
            background-color: #2a2a2a;
            background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHZpZXdCb3g9IjAgMCA0MCA0MCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiBvcGFjaXR5PSIwLjEiPjxnIGZpbGw9IiNmZmYiPjxyZWN0IHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgeD0iMCIgeT0iMCI+PC9yZWN0PjxyZWN0IHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgeD0iMjAiIHk9IjIwIj48L3JlY3Q+PC9nPjwvc3ZnPg=');
            overflow: hidden;
        }

        /* Taskbar Styles */
        #taskbar {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            height: 40px;
            background-color: #252525;
            display: flex;
            align-items: center;
            padding: 0 10px;
            gap: 5px;
            z-index: 1000;
        }

        .taskbar-icon {
            width: 30px;
            height: 30px;
            background-color: #3a3a3a;
            border-radius: 4px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.2s;
        }

        .taskbar-icon:hover {
            background-color: #4a4a4a;
        }

        .taskbar-icon.active {
            background-color: #4d9be6;
        }

        #clock {
            margin-left: auto;
            padding: 0 10px;
            font-size: 12px;
        }

        /* Window Styles */
        .window {
            position: absolute;
            background-color: #3a3a3a;
            border-radius: 8px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
            overflow: hidden;
            min-width: 300px;
            min-height: 200px;
            display: flex;
            flex-direction: column;
            transition: box-shadow 0.2s;
        }

        .window.active {
            box-shadow: 0 5px 20px rgba(0, 0, 0, 0.7);
        }

        .window-header {
            background-color: #2a2a2a;
            padding: 8px 12px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            cursor: move;
            user-select: none;
        }

        .window-title {
            font-weight: bold;
            font-size: 14px;
        }

        .window-controls {
            display: flex;
            gap: 8px;
        }

        .window-control {
            width: 16px;
            height: 16px;
            border-radius: 50%;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #000;
            font-size: 10px;
            font-weight: bold;
        }

        .window-close {
            background-color: #ff5f56;
        }

        .window-minimize {
            background-color: #ffbd2e;
        }

        .window-maximize {
            background-color: #27c93f;
        }

        .window-content {
            flex-grow: 1;
            padding: 12px;
            overflow: auto;
        }

        /* Start Menu */
        #start-menu {
            position: absolute;
            bottom: 40px;
            left: 10px;
            width: 300px;
            background-color: #2a2a2a;
            border-radius: 8px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
            display: none;
            z-index: 1001;
            overflow: hidden;
        }

        .start-menu-header {
            padding: 15px;
            background-color: #1e1e1e;
            font-size: 18px;
            font-weight: bold;
        }

        .start-menu-item {
            padding: 10px 15px;
            display: flex;
            align-items: center;
            gap: 10px;
            cursor: pointer;
        }

        .start-menu-item:hover {
            background-color: #3a3a3a;
        }

        .start-menu-icon {
            width: 20px;
            height: 20px;
            background-color: #4d9be6;
            border-radius: 4px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 12px;
        }

        /* Search Window Specific Styles */
        .search-container {
            display: flex;
            margin-bottom: 15px;
        }

        #search-input {
            flex-grow: 1;
            padding: 8px;
            border-radius: 4px;
            border: none;
            background: #4a4a4a;
            color: white;
        }

        .search-button {
            margin-left: 8px;
            padding: 8px 16px;
            background: #4d9be6;
            border: none;
            border-radius: 4px;
            color: white;
            cursor: pointer;
        }

        .search-results {
            margin-top: 15px;
        }

        .search-result {
            padding: 8px;
            border-bottom: 1px solid #4a4a4a;
        }

        .search-result-title {
            color: #4d9be6;
            font-weight: bold;
        }

        .search-result-url {
            color: #5d9e5d;
            font-size: 12px;
        }

        .search-result-desc {
            font-size: 14px;
            margin-top: 4px;
        }

        /* File Explorer Styles */
        .file-list {
            display: flex;
            flex-wrap: wrap;
            gap: 15px;
        }

        .file-item {
            width: 80px;
            text-align: center;
            cursor: pointer;
            padding: 5px;
            border-radius: 4px;
        }

        .file-item:hover {
            background-color: #4a4a4a;
        }

        .file-icon {
            width: 50px;
            height: 50px;
            background-color: #4a4a4a;
            border-radius: 8px;
            margin: 0 auto 5px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 24px;
        }

        .file-name {
            font-size: 12px;
            word-break: break-all;
        }
    </style>
</head>
<body>
    <div id="desktop">
        <!-- Windows will be created here dynamically -->
    </div>

    <div id="taskbar">
        <div class="taskbar-icon" id="start-button">Z</div>
        <div class="taskbar-icon" id="search-button">
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <circle cx="11" cy="11" r="8"></circle>
                <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
            </svg>
        </div>
        <div class="taskbar-icon" id="explorer-button">
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 2h9a2 2 0 0 1 2 2z"></path>
            </svg>
        </div>
        <div id="clock">00:00</div>
    </div>

    <div id="start-menu">
        <div class="start-menu-header">zewpolOS</div>
        <div class="start-menu-item" id="start-search">
            <div class="start-menu-icon">
                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                    <circle cx="11" cy="11" r="8"></circle>
                    <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
                </svg>
            </div>
            <div>Search</div>
        </div>
        <div class="start-menu-item" id="start-explorer">
            <div class="start-menu-icon">
                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                    <path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 2h9a2 2 0 0 1 2 2z"></path>
                </svg>
            </div>
            <div>File Explorer</div>
        </div>
        <div class="start-menu-item" id="start-settings">
            <div class="start-menu-icon">⚙</div>
            <div>Settings</div>
        </div>
        <div class="start-menu-item" id="start-about">
            <div class="start-menu-icon">?</div>
            <div>About zewpolOS</div>
        </div>
    </div>

    <script>
        // Window management system
        class WindowManager {
            constructor() {
                this.zIndexCounter = 1;
                this.activeWindows = new Set();
                this.currentActiveWindow = null;
            }

            createWindow(options) {
                const windowElement = document.createElement('div');
                windowElement.className = 'window';
                windowElement.style.width = `${options.width}px`;
                windowElement.style.height = `${options.height}px`;
                windowElement.style.zIndex = this.zIndexCounter;
                this.zIndexCounter++;

                windowElement.innerHTML = `
                    <div class="window-header">
                        <span class="window-title">${options.title}</span>
                        <div class="window-controls">
                            <div class="window-control window-minimize">−</div>
                            <div class="window-control window-maximize">□</div>
                            <div class="window-control window-close">×</div>
                        </div>
                    </div>
                    <div class="window-content">${options.content}</div>
                `;

                // Position window
                if (options.x && options.y) {
                    windowElement.style.left = `${options.x}px`;
                    windowElement.style.top = `${options.y}px`;
                } else {
                    this.centerWindow(windowElement);
                }

                // Add drag functionality
                this.setupDragBehavior(windowElement);

                // Add control buttons
                this.setupWindowControls(windowElement);

                // Add click handler to bring to front
                windowElement.addEventListener('mousedown', () => {
                    this.activateWindow(windowElement);
                });

                document.getElementById('desktop').appendChild(windowElement);
                this.activeWindows.add(windowElement);
                this.activateWindow(windowElement);

                return windowElement;
            }

            centerWindow(windowElement) {
                const desktop = document.getElementById('desktop');
                if (desktop) {
                    const desktopRect = desktop.getBoundingClientRect();
                    const windowRect = windowElement.getBoundingClientRect();

                    windowElement.style.left = `${(desktopRect.width - windowRect.width) / 2}px`;
                    windowElement.style.top = `${(desktopRect.height - windowRect.height) / 2}px`;
                }
            }

            setupDragBehavior(windowElement) {
                const header = windowElement.querySelector('.window-header');
                let isDragging = false;
                let offsetX, offsetY;

                header.addEventListener('mousedown', (e) => {
                    isDragging = true;
                    offsetX = e.clientX - windowElement.getBoundingClientRect().left;
                    offsetY = e.clientY - windowElement.getBoundingClientRect().top;
                    this.activateWindow(windowElement);
                    e.preventDefault(); // Prevent text selection
                });

                document.addEventListener('mousemove', (e) => {
                    if (!isDragging) return;

                    const desktop = document.getElementById('desktop');
                    const desktopRect = desktop.getBoundingClientRect();
                    const windowRect = windowElement.getBoundingClientRect();

                    let newX = e.clientX - offsetX - desktopRect.left;
                    let newY = e.clientY - offsetY - desktopRect.top;

                    // Constrain to desktop bounds
                    newX = Math.max(0, Math.min(newX, desktopRect.width - windowRect.width));
                    newY = Math.max(0, Math.min(newY, desktopRect.height - windowRect.height));

                    windowElement.style.left = `${newX}px`;
                    windowElement.style.top = `${newY}px`;
                });

                document.addEventListener('mouseup', () => {
                    isDragging = false;
                });
            }

            setupWindowControls(windowElement) {
                // Close button
                windowElement.querySelector('.window-close').addEventListener('click', () => {
                    this.closeWindow(windowElement);
                });

                // Minimize button
                windowElement.querySelector('.window-minimize').addEventListener('click', () => {
                    windowElement.style.display = 'none';
                    this.activeWindows.delete(windowElement);
                });

                // Maximize button (toggle)
                windowElement.querySelector('.window-maximize').addEventListener('click', () => {
                    if (windowElement.classList.contains('maximized')) {
                        windowElement.classList.remove('maximized');
                        windowElement.style.width = windowElement.dataset.prevWidth;
                        windowElement.style.height = windowElement.dataset.prevHeight;
                        windowElement.style.left = windowElement.dataset.prevLeft;
                        windowElement.style.top = windowElement.dataset.prevTop;
                    } else {
                        windowElement.classList.add('maximized');
                        windowElement.dataset.prevWidth = windowElement.style.width;
                        windowElement.dataset.prevHeight = windowElement.style.height;
                        windowElement.dataset.prevLeft = windowElement.style.left;
                        windowElement.dataset.prevTop = windowElement.style.top;

                        const desktop = document.getElementById('desktop');
                        const desktopRect = desktop.getBoundingClientRect();

                        windowElement.style.width = `${desktopRect.width}px`;
                        windowElement.style.height = `${desktopRect.height}px`;
                        windowElement.style.left = '0px';
                        windowElement.style.top = '0px';
                    }
                });
            }

            activateWindow(windowElement) {
                // Reset z-index of all windows
                this.activeWindows.forEach(win => {
                    win.classList.remove('active');
                });

                // Set this window to highest z-index
                windowElement.style.zIndex = this.zIndexCounter;
                windowElement.classList.add('active');
                this.zIndexCounter++;
                this.currentActiveWindow = windowElement;
            }

            closeWindow(windowElement) {
                document.getElementById('desktop').removeChild(windowElement);
                this.activeWindows.delete(windowElement);
            }
        }

        // Application management
        class ApplicationManager {
            constructor(windowManager) {
                this.windowManager = windowManager;
            }

            createSearchWindow() {
                const window = this.windowManager.createWindow({
                    title: 'zewpol Search',
                    content: `
                        <div class="search-container">
                            <input type="text" id="search-input" placeholder="Search with zewpol...">
                            <button class="search-button" id="search-execute">Search</button>
                        </div>
                        <div class="search-results" id="search-results">
                            <div style="color: #aaa; text-align: center; margin-top: 50px;">
                                Enter a search term to begin
                            </div>
                        </div>
                    `,
                    width: 700,
                    height: 500
                });

                window.querySelector('#search-execute').addEventListener('click', () => this.performSearch(window));
                window.querySelector('#search-input').addEventListener('keypress', (e) => {
                    if (e.key === 'Enter') this.performSearch(window);
                });
            }

            performSearch(windowElement) {
                const query = windowElement.querySelector('#search-input').value;
                const results = windowElement.querySelector('#search-results');

                if (!query.trim()) {
                    results.innerHTML = '<div style="color: #aaa; text-align: center;">Please enter a search term</div>';
                    return;
                }

                // Simulate search results
                results.innerHTML = `
                    <div class="search-result">
                        <div class="search-result-title">${query} - zewpol Search Results</div>
                        <div class="search-result-url">https://www.zewpol.com/search?q=${encodeURIComponent(query)}</div>
                        <div class="search-result-desc">See the full results for "${query}" on zewpol search engine. The zewpol search engine provides comprehensive results from across the web.</div>
                    </div>
                    <div class="search-result">
                        <div class="search-result-title">About ${query}</div>
                        <div class="search-result-url">https://www.zewpol.com/wiki/${encodeURIComponent(query)}</div>
                        <div class="search-result-desc">Learn more about ${query} in the zewpol knowledge base. Our knowledge base contains detailed information on millions of topics.</div>
                    </div>
                    <div class="search-result">
                        <div class="search-result-title">${query} Images</div>
                        <div class="search-result-url">https://www.zewpol.com/images?q=${encodeURIComponent(query)}</div>
                        <div class="search-result-desc">View images related to ${query} on zewpol. Browse through thousands of high-quality images.</div>
                    </div>
                    <div class="search-result">
                        <div class="search-result-title">${query} Videos</div>
                        <div class="search-result-url">https://www.zewpol.com/videos?q=${encodeURIComponent(query)}</div>
                        <div class="search-result-desc">Watch videos about ${query} from across the web. Our video search indexes content from all major platforms.</div>
                    </div>
                `;
            }

            createExplorerWindow() {
                const window = this.windowManager.createWindow({
                    title: 'File Explorer',
                    content: `
                        <div class="file-list">
                            <div class="file-item">
                                <div class="file-icon">📁</div>
                                <div class="file-name">Documents</div>
                            </div>
                            <div class="file-item">
                                <div class="file-icon">📁</div>
                                <div class="file-name">Pictures</div>
                            </div>
                            <div class="file-item">
                                <div class="file-icon">📁</div>
                                <div class="file-name">Downloads</div>
                            </div>
                            <div class="file-item">
                                <div class="file-icon">📄</div>
                                <div class="file-name">notes.txt</div>
                            </div>
                            <div class="file-item">
                                <div class="file-icon">📄</div>
                                <div class="file-name">config.cfg</div>
                            </div>
                            <div class="file-item">
                                <div class="file-icon">📁</div>
                                <div class="file-name">Projects</div>
                            </div>
                            <div class="file-item">
                                <div class="file-icon">📁</div>
                                <div class="file-name">Music</div>
                            </div>
                            <div class="file-item">
                                <div class="file-icon">📁</div>
                                <div class="file-name">Videos</div>
                            </div>
                        </div>
                    `,
                    width: 600,
                    height: 400
                });
            }

            createAboutWindow() {
                this.windowManager.createWindow({
                    title: 'About zewpolOS',
                    content: `
                        <div style="text-align: center; margin-bottom: 20px;">
                            <h2>zewpolOS</h2>
                            <p>Version 2.0</p>
                        </div>
                        <p>zewpolOS is the operating system developed by zewpol search engine to provide a seamless integration between web services and local computing.</p>
                        <p>© 2023 zewpol Technologies. All rights reserved.</p>
                        <div style="margin-top: 20px; font-size: 12px; color: #aaa;">
                            <p>This is a simulation of zewpolOS running in your browser.</p>
                        </div>
                    `,
                    width: 400,
                    height: 300
                });
            }

            createWelcomeWindow() {
                this.windowManager.createWindow({
                    title: 'Welcome to zewpolOS',
                    content: `
                        <div style="text-align: center; padding: 20px;">
                            <h2>Welcome to zewpolOS</h2>
                            <p style="margin: 15px 0;">Your integrated search and computing environment</p>
                            <button id="quick-search" style="padding: 8px 16px; background: #4d9be6; border: none; border-radius: 4px; color: white; cursor: pointer;">Start Searching</button>
                            <p style="margin-top: 20px; font-size: 12px; color: #aaa;">Click the Z button in the taskbar to explore more features</p>
                        </div>
                    `,
                    width: 400,
                    height: 250
                }).querySelector('#quick-search').addEventListener('click', () => {
                    this.createSearchWindow();
                });
            }
        }

        // Main OS initialization
        document.addEventListener('DOMContentLoaded', () => {
            const windowManager = new WindowManager();
            const appManager = new ApplicationManager(windowManager);

            // Update clock
            function updateClock() {
                const now = new Date();
                const hours = now.getHours().toString().padStart(2, '0');
                const minutes = now.getMinutes().toString().padStart(2, '0');
                document.getElementById('clock').textContent = `${hours}:${minutes}`;
            }

            setInterval(updateClock, 1000);
            updateClock();

            // Start menu toggle
            document.getElementById('start-button').addEventListener('click', (e) => {
                const menu = document.getElementById('start-menu');
                menu.style.display = menu.style.display === 'block' ? 'none' : 'block';
                e.stopPropagation(); // Prevent immediate close
            });

            // Close menu when clicking elsewhere
            document.addEventListener('click', () => {
                document.getElementById('start-menu').style.display = 'none';
            });

            // Start menu items
            document.getElementById('start-search').addEventListener('click', () => {
                appManager.createSearchWindow();
            });

            document.getElementById('start-explorer').addEventListener('click', () => {
                appManager.createExplorerWindow();
            });

            document.getElementById('start-about').addEventListener('click', () => {
                appManager.createAboutWindow();
            });

            // Taskbar buttons
            document.getElementById('search-button').addEventListener('click', () => {
                appManager.createSearchWindow();
            });

            document.getElementById('explorer-button').addEventListener('click', () => {
                appManager.createExplorerWindow();
            });

            // Create welcome window on startup
            appManager.createWelcomeWindow();
        });
    </script>
</body>
</html>
Save the HTML file in a .txtFile
Apps included

The apps included include:
File explorer
About
Zewpol search
Settings
To get it here is the link: https://zewpolos.playcode.io
Type Z to see what happens
Thank you for watching!
🐯 🚀 Timescale is now TigerData: Building the Modern PostgreSQL for the Analytical and Agentic Era

We’ve quietly evolved from a time-series database into the modern PostgreSQL for today’s and tomorrow’s computing, built for performance, scale, and the agentic future.
So we’re changing our name: from Timescale to TigerData. Not to change who we are, but to reflect who we’ve become. TigerData is bold, fast, and built to power the next era of software.