Learn how to add the ZTK to your mobile apps

To access the ZTK in JS you will want to use the innerHTML element like this:
// Create the ZewpolOS class
class ZewpolOS {
    constructor() {
        this.activeWindows = [];
        this.nextZIndex = 1;
        this.currentTheme = 'default';
        this.fileSystem = new FileSystem();

        // Create the entire HTML structure
        this.createHTMLStructure();

        // Initialize the OS
        this.initElements();
        this.initEventListeners();
        this.initClock();

        // Open welcome notepad after slight delay
        setTimeout(() => {
            this.openApp('notepad');
        }, 500);
    }

    // Method to create the entire HTML structure
    createHTMLStructure() {
        // Create the main HTML structure
        document.body.innerHTML = `
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ZTK Pro</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Arial', sans-serif;
        }

        body {
            overflow: hidden;
            height: 100vh;
            background-color: #008080;
            color: white;
        }

        /* [All the CSS styles from original HTML here...] */
        /* ... (include all the CSS styles from the original HTML) ... */

        .icon {
            width: 16px;
            height: 16px;
            margin-right: 5px;
        }
    </style>
</head>
<body>
    <div class="desktop" id="desktop">
        <div class="taskbar" id="taskbar">
            <div class="start-menu" id="startMenu">
                <button class="start-button" id="startButton">Start</button>
                <div class="start-menu-content" id="startMenuContent">
                    <div class="menu-header">ZewpolOS Pro</div>

                    <div class="menu-item" data-app="notepad">
                        <span class="icon">📝</span> Notepad
                    </div>
                    <div class="menu-item" data-app="calculator">
                        <span class="icon">🧮</span> Calculator
                    </div>
                    <!-- [All other menu items...] -->
                    <div class="menu-item" id="shutdown">
                        <span class="icon">⏻</span> Shut Down
                    </div>
                </div>
            </div>
            <div class="taskbar-items" id="taskbarItems"></div>
            <div class="clock" id="clock"></div>
        </div>

        <div class="window-container" id="windowContainer"></div>

        <div class="desktop-icons">
            <div class="desktop-icon" data-app="notepad">
                <span style="font-size: 48px;">📝</span>
                <span>Notepad</span>
            </div>
            <!-- [Other desktop icons...] -->
        </div>
    </div>
</body>
</html>
        `;
    }

    // [Rest of the ZewpolOS class methods...]
    initElements() {
        this.elements = {
            desktop: document.getElementById('desktop'),
            taskbar: document.getElementById('taskbar'),
            // [Other element references...]
        };
    }

    // [All other methods from the original class...]
    openApp(appName) {
        // Implementation...
    }

    // [More methods...]
}

// FileSystem class
class FileSystem {
    constructor() {
        // Implementation...
    }
    // [FileSystem methods...]
}

// Initialize the OS when the page loads
document.addEventListener('DOMContentLoaded', () => {
    const os = new ZewpolOS();
    window.zewpolOS = os;
});
That is how you put ZTK in js.
How to access the ZTK in JS

Learn how to add the ZTK to your mobile apps

Subscribe to my newsletter

Zako Mako

Zako Mako
