<!DOCTYPE html>
<html lang="en" data-bs-theme="dark">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Virtual Playground</title>
    
    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Bootstrap Icons -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.0/font/bootstrap-icons.css" rel="stylesheet">
    
    <style>
        body {
            background-color: #121212;
            color: #e0e0e0;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }
        
        .main-container {
            background-color: #1e1e1e;
            border: 1px solid #333;
            color: #ffffff;
        }
        
        .welcome-title {
            color: #ffffff;
            font-weight: 700;
        }
        
        .subtitle {
            color: #adb5bd;
            font-weight: 300;
        }
        
        .datetime-card {
            background-color: #2d2d2d;
            border: 1px solid #404040;
        }
        
        .current-date {
            color: #f8f9fa;
            font-weight: 600;
        }
        
        .current-time {
            color: #ffffff;
            font-family: 'Courier New', monospace;
            font-weight: 700;
        }
        
        .refresh-note {
            color: #6c757d;
            font-size: 0.875rem;
        }
        
        .footer-text {
            color: #adb5bd;
            font-style: italic;
        }
        
        .divider {
            background-color: #495057;
            height: 2px;
            border: none;
        }
        
        .fade-in {
            animation: fadeIn 0.8s ease-out forwards;
        }
        
        @keyframes fadeIn {
            from {
                opacity: 0;
                transform: translateY(20px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
        
        .stagger-1 { animation-delay: 0.1s; }
        .stagger-2 { animation-delay: 0.2s; }
        .stagger-3 { animation-delay: 0.3s; }
        .stagger-4 { animation-delay: 0.4s; }
    </style>
</head>
<body>
    <div class="container-fluid min-vh-100 d-flex align-items-center justify-content-center py-4">
        <div class="main-container rounded-3 p-4 p-md-5 text-center" style="max-width: 600px; width: 90%;">
            
            <!-- Welcome Section -->
            <div class="fade-in stagger-1">
                <h1 class="welcome-title display-4 mb-3">
                    <i class="bi bi-code-slash me-2"></i>
                    Welcome to my Virtual Playground
                </h1>
                <p class="subtitle lead mb-4">Explore, Create, and Innovate</p>
            </div>
            
            <!-- Divider -->
            <div class="fade-in stagger-2">
                <hr class="divider my-4">
            </div>
            
            <!-- Date Time Card -->
            <div class="fade-in stagger-3">
                <div class="card datetime-card border-0 my-4">
                    <div class="card-body py-4">
                        <div class="row">
                            <div class="col-12">
                                <div class="current-date h4 mb-3">
                                    <i class="bi bi-calendar-event me-2"></i>
                                    Thursday, May 21, 2026                                </div>
                                <div class="current-time display-5 mb-3">
                                    <i class="bi bi-clock me-2"></i>
                                    01:59:41 PM                                </div>
                                <!-- <small class="refresh-note">
                                    <i class="bi bi-arrow-clockwise me-1"></i>
                                    Updates automatically every second
                                </small> -->
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- Divider -->
            <div class="fade-in stagger-4">
                <hr class="divider my-4">
            </div>
            
            <!-- Footer -->
            <div class="fade-in stagger-4">
                <p class="footer-text mb-0">
                    <i class="bi bi-lightbulb me-2"></i>
                    Your digital space for endless possibilities
                </p>
            </div>
            
        </div>
    </div>

    <!-- Bootstrap JS -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    
    <!-- Real-time Clock Script -->
    <script>
        function updateDateTime() {
            const now = new Date();
            
            // Format date (e.g., "Thursday, February 6, 2026")
            const dateOptions = { 
                weekday: 'long', 
                year: 'numeric', 
                month: 'long', 
                day: 'numeric',
                timeZone: 'Asia/Manila'
            };
            const formattedDate = now.toLocaleDateString('en-US', dateOptions);
            
            // Format time (e.g., "02:30:45 PM")
            const timeOptions = {
                hour: '2-digit',
                minute: '2-digit',
                second: '2-digit',
                hour12: true,
                timeZone: 'Asia/Manila'
            };
            const formattedTime = now.toLocaleTimeString('en-US', timeOptions);
            
            // Update the DOM elements
            const dateElement = document.querySelector('.current-date');
            const timeElement = document.querySelector('.current-time');
            
            if (dateElement && timeElement) {
                dateElement.innerHTML = `<i class="bi bi-calendar-event me-2"></i>${formattedDate}`;
                timeElement.innerHTML = `<i class="bi bi-clock me-2"></i>${formattedTime}`;
            }
        }
        
        // Update immediately when page loads
        document.addEventListener('DOMContentLoaded', function() {
            updateDateTime();
            
            // Update every second
            setInterval(updateDateTime, 1000);
        });
    </script>
</body>
</html>