CODE FOR CREATING OWN OPERATING SYSTEM ► MacroNepal

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Enhanced Desktop App</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 20px;
            background: url('https://example.com/background.jpg') no-repeat center center fixed;
            background-size: cover;
            transition: background 0.5s ease;
        }
        h1 {
            text-align: center;
            color: #fff;
        }
        #clock {
            font-size: 2em;
            color: #fff;
            text-align: center;
            animation: fadeIn 1s;
        }
        #weather, #todo, #music, #calendar, #ticTacToe, #stickyNotes, #pomodoro {
            background: rgba(255, 255, 255, 0.8);
            padding: 15px;
            margin: 10px 0;
            border-radius: 10px;
            box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
            animation: slideIn 0.5s;
        }
        button {
            cursor: pointer;
            padding: 10px;
            margin: 5px;
            border: none;
            border-radius: 5px;
            background-color: #007BFF;
            color: white;
            transition: background-color 0.3s;
        }
        button:hover {
            background-color: #0056b3;
        }
        .game-cell {
            width: 60px;
            height: 60px;
            display: inline-block;
            border: 1px solid #000;
            line-height: 60px;
            text-align: center;
            font-size: 2em;
            transition: background-color 0.3s;
        }
        .game-cell:hover {
            background-color: #f0f0f0;
        }
        .sticky-note {
            position: absolute;
            width: 150px;
            height: 150px;
            background-color: #FFD700;
            border: 1px solid #FFD700;
            border-radius: 5px;
            padding: 10px;
            cursor: move;
            transition: transform 0.3s;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
        }
        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }
        @keyframes slideIn {
            from { transform: translateY(-30px); opacity: 0; }
            to { transform: translateY(0); opacity: 1; }
        }
        /* Dark theme styles */
        .dark-theme {
            background: #333;
            color: #fff;
        }
        /* Countdown Timer */
        #countdown {
            font-size: 2em;
            color: #fff;
            margin-top: 20px;
        }
        #themeSelector {
            display: flex;
            justify-content: center;
            margin: 20px 0;
        }
        #themeSelector select {
            padding: 10px;
            border-radius: 5px;
            border: none;
        }
    </style>
</head>
<body>

    <h1>Enhanced Desktop Application</h1>
    <div id="clock"></div>
    <div id="weather">
        <h2>Weather</h2>
        <p id="temperature">Loading...</p>
        <p id="condition"></p>
    </div>
    <div id="todo">
        <h2>To-Do List</h2>
        <input type="text" id="taskInput" placeholder="New Task" />
        <button onclick="addTask()">Add Task</button>
        <ul id="taskList"></ul>
    </div>
    <div id="music">
        <h2>Music Player</h2>
        <input type="file" id="musicInput" accept="audio/*" />
        <button onclick="addMusic()">Add Music</button>
        <ul id="musicList"></ul>
        <button onclick="playPlaylist()">Play Playlist</button>
    </div>
    <div id="calendar">
        <h2>Calendar</h2>
        <button onclick="changeMonth(-1)">❮</button>
        <button onclick="changeMonth(1)">❯</button>
        <div id="calendarDisplay"></div>
    </div>
    <div id="ticTacToe">
        <h2>Tic Tac Toe</h2>
        <div id="ticTacToeBoard"></div>
        <div id="scoreboard">
            <p id="scoreX">X: 0</p>
            <p id="scoreO">O: 0</p>
        </div>
    </div>
    <div id="stickyNotes">
        <h2>Sticky Notes</h2>
        <button onclick="createStickyNote()">New Note</button>
    </div>
    <div id="pomodoro">
        <h2>Pomodoro Timer</h2>
        <div id="pomodoroTime">25:00</div>
        <button onclick="startPomodoro()">Start</button>
        <button onclick="stopPomodoro()">Stop</button>
        <button onclick="resetPomodoro()">Reset</button>
    </div>
    <div id="countdown">
        <h2>Countdown Timer</h2>
        <input type="number" id="countdownInput" placeholder="Minutes" />
        <button onclick="startCountdown()">Start Countdown</button>
        <div id="countdownDisplay"></div>
    </div>
    <div id="themeSelector">
        <label for="theme">Select Theme: </label>
        <select id="theme" onchange="changeTheme()">
            <option value="light">Light</option>
            <option value="dark">Dark</option>
        </select>
    </div>

    <script>
        // Clock
        function updateClock() {
            const now = new Date();
            document.getElementById('clock').textContent = now.toLocaleTimeString();
        }

        // Weather
        async function getWeather() {
            const response = await fetch('https://api.openweathermap.org/data/2.5/weather?q=Kathmandu&appid=YOUR_API_KEY&units=metric');
            const data = await response.json();
            document.getElementById('temperature').textContent = data.main.temp + ' °C';
            document.getElementById('condition').textContent = data.weather[0].description;
        }

        // Calendar
        let currentMonth = new Date().getMonth();
        let currentYear = new Date().getFullYear();

        function displayCalendar() {
            const calendarDisplay = document.getElementById('calendarDisplay');
            const daysInMonth = new Date(currentYear, currentMonth + 1, 0).getDate();
            const firstDay = new Date(currentYear, currentMonth, 1).getDay();
            calendarDisplay.innerHTML = '';
            for (let i = 0; i < firstDay; i++) {
                calendarDisplay.innerHTML += '<div class="day"></div>';
            }
            for (let day = 1; day <= daysInMonth; day++) {
                calendarDisplay.innerHTML += `<div class="day">${day}</div>`;
            }
        }

        function changeMonth(direction) {
            currentMonth += direction;
            if (currentMonth < 0) {
                currentMonth = 11;
                currentYear--;
            } else if (currentMonth > 11) {
                currentMonth = 0;
                currentYear++;
            }
            displayCalendar();
        }

        displayCalendar();

        // Tic-Tac-Toe Game
        let board = ['', '', '', '', '', '', '', '', ''];
        let currentPlayer = 'X';
        let scoreX = 0;
        let scoreO = 0;

        function renderBoard() {
            const ticTacToeBoard = document.getElementById('ticTacToeBoard');
            ticTacToeBoard.innerHTML = '';
            board.forEach((cell, index) => {
                const div = document.createElement('div');
                div.classList.add('game-cell');
                div.textContent = cell;
                div.onclick = () => handleCellClick(index);
                ticTacToeBoard.appendChild(div);
            });
        }

        function handleCellClick(index) {
            if (!board[index]) {
                board[index] = currentPlayer;
                if (checkWinner(currentPlayer)) {
                    alert(`${currentPlayer} wins!`);
                    if (currentPlayer === 'X') scoreX++;
                    else scoreO++;
                    document.getElementById('scoreX').textContent = `X: ${scoreX}`;
                    document.getElementById('scoreO').textContent = `O: ${scoreO}`;
                    resetGame();
                } else if (board.every(cell => cell)) {
                    alert('It\'s a draw!');
                    resetGame();
                } else {
                    currentPlayer = currentPlayer === 'X' ? 'O' : 'X';
                }
                renderBoard();
            }
        }

        function checkWinner(player) {
            const winningCombinations = [
                [0, 1, 2], [3, 4, 5], [6, 7, 8], // horizontal
                [0, 3, 6], [1, 4, 7], [2, 5, 8], // vertical
                [0, 4, 8], [2, 4, 6] // diagonal
            ];
            return winningCombinations.some(combination => {
                return combination.every(index => board[index] === player);
            });
        }

        function resetGame() {
            board = ['', '', '', '', '', '', '', '', ''];
            currentPlayer = 'X';
            renderBoard();
        }

        renderBoard();

        // To-Do List
        function addTask() {
            const taskInput = document.getElementById('taskInput');
            const task = taskInput.value;
            if (task) {
                const li = document.createElement('li');
                li.textContent = task;
                document.getElementById('taskList').appendChild(li);
                taskInput.value = '';
            }
        }

        // Music Playlist
        function addMusic() {
            const musicInput = document.getElementById('musicInput');
            const file = musicInput.files[0];
            if (file) {
                const li = document.createElement('li');
                li.textContent = file.name;
                document.getElementById('musicList').appendChild(li);
                // Optional: Add functionality to play music
            }
        }

        function playPlaylist() {
            const musicList = document.getElementById('musicList').children;
            // Functionality to play music can be implemented here
            alert('Playing playlist...');
        }

        // Sticky Notes
        function createStickyNote() {
            const note = document.createElement('div');
            note.className = 'sticky-note';
            note.contentEditable = true;
            note.style.top = Math.random() * 300 + 'px';
            note.style.left = Math.random() * 300 + 'px';
            note.ondragstart = (event) => event.preventDefault();
            note.ondragend = (event) => {
                note.style.top = (event.clientY - 75) + 'px';
                note.style.left = (event.clientX - 75) + 'px';
            };
            document.body.appendChild(note);
        }

        // Pomodoro Timer
        let pomodoroInterval;
        let pomodoroTime = 1500; // 25 minutes

        function startPomodoro() {
            pomodoroInterval = setInterval(() => {
                pomodoroTime--;
                updatePomodoroDisplay();
                if (pomodoroTime <= 0) {
                    clearInterval(pomodoroInterval);
                    alert('Pomodoro finished!');
                    resetPomodoro();
                }
            }, 1000);
        }

        function stopPomodoro() {
            clearInterval(pomodoroInterval);
        }

        function resetPomodoro() {
            pomodoroTime = 1500;
            updatePomodoroDisplay();
        }

        function updatePomodoroDisplay() {
            const minutes = Math.floor(pomodoroTime / 60);
            const seconds = pomodoroTime % 60;
            document.getElementById('pomodoroTime').textContent = `${minutes}:${seconds < 10 ? '0' : ''}${seconds}`;
        }

        // Countdown Timer
        function startCountdown() {
            const minutes = document.getElementById('countdownInput').value;
            let countdownTime = minutes * 60;
            const countdownDisplay = document.getElementById('countdownDisplay');
            countdownDisplay.textContent = `${minutes}:00`;
            const countdownInterval = setInterval(() => {
                countdownTime--;
                const displayMinutes = Math.floor(countdownTime / 60);
                const displaySeconds = countdownTime % 60;
                countdownDisplay.textContent = `${displayMinutes}:${displaySeconds < 10 ? '0' : ''}${displaySeconds}`;
                if (countdownTime <= 0) {
                    clearInterval(countdownInterval);
                    alert('Countdown finished!');
                }
            }, 1000);
        }

        // Theme Selector
        function changeTheme() {
            const theme = document.getElementById('theme').value;
            document.body.className = theme === 'dark' ? 'dark-theme' : '';
        }

        // Initial Calls
        setInterval(updateClock, 1000);
        getWeather();
    </script>
</body>
</html>
HTML
Share this:

Leave a Reply Cancel reply
