<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>My Windows 98 Portfolio</title>
    <!-- Animate.css for animations -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/>
    <!-- Google Fonts for better typography -->
    <link href="https://fonts.googleapis.com/css2?family=Tahoma&display=swap" rel="stylesheet">
    <style>
        /* General Styles */
        body {
            margin: 0;
            padding: 0;
            font-family: 'Tahoma', sans-serif;
            background: url('https://www.publicdomainpictures.net/pictures/320000/velka/background-image.png') repeat;
            height: 100vh;
            overflow: hidden;
        }
        
        .desktop {
            position: relative;
            width: 100%;
            height: 100%;
        }

        /* Desktop Icons */
        .icon-container {
            position: absolute;
            top: 20px;
            left: 20px;
            display: grid;
            grid-template-columns: repeat(4, 100px);
            grid-gap: 30px;
        }

        .icon {
            width: 80px;
            text-align: center;
            color: #FFFFFF;
            cursor: pointer;
            text-shadow: 1px 1px #000000;
            user-select: none;
        }

        .icon img {
            width: 64px;
            height: 64px;
            margin-bottom: 5px;
            border: 1px solid #000080;
        }

        .icon span {
            display: block;
            font-size: 14px;
        }

        /* Taskbar */
        .taskbar {
            position: fixed;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 40px;
            background-color: #C0C0C0;
            border-top: 2px solid #FFFFFF;
            border-left: 2px solid #FFFFFF;
            border-right: 2px solid #404040;
            border-bottom: 2px solid #404040;
            display: flex;
            align-items: center;
            padding: 0 10px;
            box-sizing: border-box;
            z-index: 1000;
        }

        .start-button {
            width: 80px;
            height: 30px;
            background-color: #C0C0C0;
            border: 2px solid #FFFFFF;
            border-bottom: 2px solid #404040;
            box-shadow: 1px 1px #FFFFFF, -1px -1px #404040;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            margin-right: 10px;
            position: relative;
            user-select: none;
        }

        .start-button:hover {
            background-color: #FFFFFF;
        }

        .start-menu {
            display: none;
            position: absolute;
            bottom: 40px;
            left: 10px;
            width: 200px;
            background-color: #C0C0C0;
            border: 2px solid #FFFFFF;
            border-bottom: 2px solid #404040;
            box-shadow: 2px 2px #808080, -2px -2px #FFFFFF;
            z-index: 1001;
        }

        .start-menu ul {
            list-style: none;
            padding: 5px 0;
            margin: 0;
        }

        .start-menu li {
            padding: 5px 10px;
            cursor: pointer;
            font-size: 14px;
        }

        .start-menu li:hover {
            background-color: #000080;
            color: #FFFFFF;
        }

        .taskbar .time {
            margin-left: auto;
            padding-right: 10px;
            font-weight: bold;
            font-size: 14px;
        }

        /* Window Styles */
        .window {
            position: absolute;
            width: 500px;
            background-color: #C0C0C0;
            border: 2px solid #FFFFFF;
            border-bottom: 2px solid #404040;
            box-shadow: 2px 2px #808080, -2px -2px #FFFFFF;
            top: 60px;
            left: 60px;
            display: none;
            z-index: 500;
            animation-duration: 0.5s;
        }

        .window.animate__animated {
            /* Placeholder for dynamic animation classes */
        }

        .window .title-bar {
            background-color: #000080;
            color: #FFFFFF;
            padding: 2px 5px;
            cursor: move;
            display: flex;
            align-items: center;
            justify-content: space-between;
            font-weight: bold;
            user-select: none;
        }

        .window .title-bar .controls {
            display: flex;
            gap: 3px;
        }

        .window .title-bar .controls div {
            width: 15px;
            height: 15px;
            background-color: #C0C0C0;
            border: 1px solid #FFFFFF;
            text-align: center;
            line-height: 15px;
            font-weight: bold;
            cursor: pointer;
            font-size: 12px;
        }

        .window .title-bar .controls div:hover {
            background-color: #808080;
        }

        .window .content {
            padding: 10px;
            background-color: #FFFFFF;
            height: 350px;
            overflow: auto;
            box-sizing: border-box;
        }

        /* Project Cards */
        .projects-grid {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
        }

        .project-card {
            width: 180px;
            background-color: #FFFFFF;
            border: 2px solid #000080;
            padding: 10px;
            box-sizing: border-box;
            cursor: pointer;
            transition: background-color 0.3s;
        }

        .project-card:hover {
            background-color: #C0C0C0;
        }

        .project-card img {
            width: 100%;
            height: 100px;
            object-fit: cover;
            border: 1px solid #000080;
        }

        .project-card h4 {
            margin: 10px 0 5px 0;
            font-size: 16px;
            color: #000080;
        }

        .project-card p {
            font-size: 12px;
            text-align: justify;
        }

        /* Contact Form */
        .contact-form input, .contact-form textarea {
            width: 100%;
            padding: 5px;
            margin: 5px 0;
            border: 2px inset #C0C0C0;
            background-color: #FFFFFF;
            resize: none;
            box-sizing: border-box;
            font-size: 14px;
        }

        .contact-form button {
            width: 100%;
            padding: 5px;
            background-color: #C0C0C0;
            border: 2px solid #FFFFFF;
            border-bottom: 2px solid #404040;
            box-shadow: 1px 1px #FFFFFF, -1px -1px #404040;
            cursor: pointer;
            font-size: 14px;
            user-select: none;
        }

        .contact-form button:hover {
            background-color: #FFFFFF;
        }

        /* Footer */
        .footer {
            text-align: center;
            padding: 10px;
            background-color: #C0C0C0;
            border-top: 2px solid #FFFFFF;
            border-left: 2px solid #FFFFFF;
            border-right: 2px solid #404040;
            border-bottom: 2px solid #404040;
            position: fixed;
            bottom: 40px;
            width: 100%;
            box-sizing: border-box;
            z-index: 1000;
            color: #000080;
            font-size: 14px;
        }

        /* Hide scrollbars for aesthetic */
        ::-webkit-scrollbar {
            width: 8px;
        }

        ::-webkit-scrollbar-track {
            background: #C0C0C0;
        }

        ::-webkit-scrollbar-thumb {
            background-color: #000080;
            border-radius: 4px;
        }

        /* Start Menu Item Hover */
        .start-menu li:hover {
            background-color: #000080;
            color: #FFFFFF;
        }

        /* Responsive Adjustments */
        @media (max-width: 800px) {
            .project-card {
                width: 100%;
            }
        }

        @media (max-width: 600px) {
            .window {
                width: 90%;
                left: 5%;
            }

            .projects-grid {
                flex-direction: column;
                align-items: center;
            }

            .icon-container {
                grid-template-columns: repeat(2, 100px);
                grid-gap: 10px;
            }
        }
    </style>
</head>
<body>
    <div class="desktop">
        <!-- Desktop Icons -->
        <div class="icon-container">
            <div class="icon" onclick="openWindow('about-window')">
                <img src="https://img.icons8.com/fluency/96/000000/about.png" alt="About Icon">
                <span>About</span>
            </div>
            <div class="icon" onclick="openWindow('projects-window')">
                <img src="https://img.icons8.com/fluency/96/000000/project.png" alt="Projects Icon">
                <span>Projects</span>
            </div>
            <div class="icon" onclick="openWindow('contact-window')">
                <img src="https://img.icons8.com/fluency/96/000000/contacts.png" alt="Contact Icon">
                <span>Contact</span>
            </div>
            <div class="icon" onclick="openWindow('computer-window')">
                <img src="https://img.icons8.com/fluency/96/000000/computer.png" alt="My Computer Icon">
                <span>My Computer</span>
            </div>
            <!-- Add more icons as needed -->
        </div>

        <!-- About Window -->
        <div class="window animate__animated" id="about-window">
            <div class="title-bar" onmousedown="dragWindow(event, 'about-window')">
                <span>About Me</span>
                <div class="controls">
                    <div onclick="minimizeWindow('about-window')">_</div>
                    <div onclick="closeWindow('about-window')">X</div>
                </div>
            </div>
            <div class="content">
                <p>Hello! I'm <strong>[Your Name]</strong>, a passionate developer specializing in creating dynamic and user-friendly websites. With a strong foundation in HTML, CSS, and JavaScript, I strive to build applications that not only look good but also provide an excellent user experience.</p>
                <p>In my free time, I enjoy exploring new technologies, contributing to open-source projects, and continuously improving my coding skills.</p>
            </div>
        </div>

        <!-- Projects Window -->
        <div class="window animate__animated" id="projects-window">
            <div class="title-bar" onmousedown="dragWindow(event, 'projects-window')">
                <span>My Projects</span>
                <div class="controls">
                    <div onclick="minimizeWindow('projects-window')">_</div>
                    <div onclick="closeWindow('projects-window')">X</div>
                </div>
            </div>
            <div class="content">
                <div class="projects-grid">
                    <div class="project-card">
                        <img src="https://via.placeholder.com/180x100" alt="Project 1">
                        <h4>Project One</h4>
                        <p>A web application built with HTML, CSS, and JavaScript.</p>
                    </div>
                    <div class="project-card">
                        <img src="https://via.placeholder.com/180x100" alt="Project 2">
                        <h4>Project Two</h4>
                        <p>A responsive website redesign for a local business.</p>
                    </div>
                    <div class="project-card">
                        <img src="https://via.placeholder.com/180x100" alt="Project 3">
                        <h4>Project Three</h4>
                        <p>An interactive portfolio built to showcase my skills.</p>
                    </div>
                    <!-- Add more projects as needed -->
                </div>
            </div>
        </div>

        <!-- Contact Window -->
        <div class="window animate__animated" id="contact-window">
            <div class="title-bar" onmousedown="dragWindow(event, 'contact-window')">
                <span>Contact Me</span>
                <div class="controls">
                    <div onclick="minimizeWindow('contact-window')">_</div>
                    <div onclick="closeWindow('contact-window')">X</div>
                </div>
            </div>
            <div class="content">
                <form class="contact-form" onsubmit="submitForm(event)">
                    <label for="name">Name:</label><br>
                    <input type="text" id="name" name="name" required><br>
                    <label for="email">Email:</label><br>
                    <input type="email" id="email" name="email" required><br>
                    <label for="message">Message:</label><br>
                    <textarea id="message" name="message" rows="4" required></textarea><br>
                    <button type="submit">Send</button>
                </form>
            </div>
        </div>

        <!-- My Computer Window -->
        <div class="window animate__animated" id="computer-window">
            <div class="title-bar" onmousedown="dragWindow(event, 'computer-window')">
                <span>My Computer</span>
                <div class="controls">
                    <div onclick="minimizeWindow('computer-window')">_</div>
                    <div onclick="closeWindow('computer-window')">X</div>
                </div>
            </div>
            <div class="content">
                <h4>System Properties</h4>
                <p><strong>Computer Name:</strong> DESKTOP-12345</p>
                <p><strong>Operating System:</strong> Windows 98</p>
                <p><strong>Processor:</strong> Intel Pentium III</p>
                <p><strong>Installed Memory:</strong> 256 MB</p>
                <p><strong>Available Memory:</strong> 128 MB</p>
                <p><strong>System Type:</strong> 32-bit Operating System</p>
                <hr>
                <h4>Hard Drives</h4>
                <p><strong>C: Drive:</strong> 20 GB</p>
                <p><strong>D: Drive:</strong> 100 GB</p>
                <!-- Add more system-like information as desired -->
            </div>
        </div>

        <!-- Footer -->
        <div class="footer">
            &copy; 2023 [Your Name]. All Rights Reserved.
        </div>

        <!-- Taskbar -->
        <div class="taskbar">
            <div class="start-button" onclick="toggleStartMenu()">Start</div>
            <div class="start-menu" id="start-menu">
                <ul>
                    <li onclick="openWindow('about-window')">About Me</li>
                    <li onclick="openWindow('projects-window')">My Projects</li>
                    <li onclick="openWindow('contact-window')">Contact Me</li>
                    <li onclick="openWindow('computer-window')">My Computer</li>
                    <li>Settings</li>
                    <li>Shut Down</li>
                </ul>
            </div>
            <div class="time" id="clock">12:00 PM</div>
        </div>
    </div>

    <!-- JavaScript for interactivity -->
    <script>
        // Function to open a window
        function openWindow(windowId) {
            const windowEl = document.getElementById(windowId);
            windowEl.style.display = 'block';
            windowEl.classList.remove('animate__fadeOut');
            windowEl.classList.add('animate__fadeIn');
            bringToFront(windowEl);
        }

        // Function to close a window
        function closeWindow(windowId) {
            const windowEl = document.getElementById(windowId);
            windowEl.classList.remove('animate__fadeIn');
            windowEl.classList.add('animate__fadeOut');
            windowEl.addEventListener('animationend', () => {
                windowEl.style.display = 'none';
            }, { once: true });
        }

        // Function to minimize a window
        function minimizeWindow(windowId) {
            const windowEl = document.getElementById(windowId);
            const content = windowEl.querySelector('.content');
            if (content.style.display === 'none') {
                content.style.display = 'block';
            } else {
                content.style.display = 'none';
            }
        }

        // Function to toggle Start Menu
        function toggleStartMenu() {
            const startMenu = document.getElementById('start-menu');
            if (startMenu.style.display === 'block') {
                startMenu.style.display = 'none';
            } else {
                startMenu.style.display = 'block';
            }
        }

        // Function to update clock every second
        function updateClock() {
            const clock = document.getElementById('clock');
            const now = new Date();
            let hours = now.getHours();
            let minutes = now.getMinutes();
            let ampm = hours >= 12 ? 'PM' : 'AM';
            hours = hours % 12;
            hours = hours ? hours : 12; // the hour '0' should be '12'
            minutes = minutes < 10 ? '0' + minutes : minutes;
            const strTime = hours + ':' + minutes + ' ' + ampm;
            clock.innerHTML = strTime;
        }

        setInterval(updateClock, 1000);
        updateClock();

        // Function to handle form submission
        function submitForm(event) {
            event.preventDefault();
            alert('Thank you for your message!');
            document.querySelector('.contact-form').reset();
        }

        // Dragging functionality
        let activeWindow = null;
        let offset = { x: 0, y: 0 };

        function dragWindow(e, windowId) {
            e.preventDefault();
            activeWindow = document.getElementById(windowId);
            bringToFront(activeWindow);
            offset.x = e.clientX - activeWindow.offsetLeft;
            offset.y = e.clientY - activeWindow.offsetTop;

            document.addEventListener('mousemove', moveWindow);
            document.addEventListener('mouseup', stopDrag);
        }

        function moveWindow(e) {
            if (activeWindow) {
                let newX = e.clientX - offset.x;
                let newY = e.clientY - offset.y;

                // Prevent window from moving out of viewport
                newX = Math.max(0, Math.min(newX, window.innerWidth - activeWindow.offsetWidth));
                newY = Math.max(0, Math.min(newY, window.innerHeight - activeWindow.offsetHeight - 40)); // 40px for taskbar

                activeWindow.style.left = newX + 'px';
                activeWindow.style.top = newY + 'px';
            }
        }

        function stopDrag() {
            activeWindow = null;
            document.removeEventListener('mousemove', moveWindow);
            document.removeEventListener('mouseup', stopDrag);
        }

        // Bring window to front
        let highestZ = 500;

        function bringToFront(windowEl) {
            highestZ += 1;
            windowEl.style.zIndex = highestZ;
        }

        // Close Start Menu when clicking outside
        document.addEventListener('click', function(event) {
            const startMenu = document.getElementById('start-menu');
            const startButton = document.querySelector('.start-button');
            if (!startMenu.contains(event.target) && !startButton.contains(event.target)) {
                startMenu.style.display = 'none';
            }
        });
    </script>
</body>
</html>