index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Futuristic Timeline</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        .timeline-container {
            height: 100vh;
            width: 100%;
            overflow-x: scroll;
            overflow-y: hidden;
            scroll-snap-type: x mandatory;
            scroll-behavior: smooth;
        }
        
        .timeline {
            display: flex;
            height: 100%;
            width: 1000%;
        }
        
        .timeline-item {
            min-width: 100vw;
            height: 100%;
            scroll-snap-align: start;
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .timeline-line {
            position: absolute;
            height: 4px;
            background: linear-gradient(90deg, rgba(20,83,200,1) 0%, rgba(0,212,255,1) 100%);
            top: 50%;
            left: 0;
            width: 100%;
            z-index: 1;
        }
        
        .timeline-marker {
            position: absolute;
            width: 20px;
            height: 20px;
            background-color: #00d4ff;
            border-radius: 50%;
            top: calc(50% - 10px);
            left: calc(50vw - 10px);
            z-index: 2;
            box-shadow: 0 0 0 3px rgba(0,212,255,0.3);
            transition: all 0.3s ease;
        }
        
        .timeline-content {
            width: 60%;
            height: 80%;
            background: rgba(20, 83, 200, 0.2);
            backdrop-filter: blur(10px);
            border-radius: 20px;
            padding: 30px;
            position: relative;
            overflow: hidden;
            border: 1px solid rgba(255,255,255,0.1);
            box-shadow: 0 10px 30px rgba(0,0,0,0.3);
            transform: scale(0.9);
            opacity: 0.5;
            transition: all 0.5s ease;
        }
        
        .active .timeline-content {
            transform: scale(1);
            opacity: 1;
            box-shadow: 0 20px 50px rgba(0, 212, 255, 0.5);
        }
        
        .active .timeline-marker {
            transform: scale(1.5);
            background-color: #ff00ff;
            box-shadow: 0 0 0 5px rgba(255, 0, 255, 0.3);
        }
        
        .timeline-content::before {
            content: '';
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
            transform: rotate(45deg);
            pointer-events: none;
        }
        
        .timeline-date {
            background: linear-gradient(90deg, #ff00ff 0%, #00d4ff 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            font-weight: bold;
            margin-bottom: 15px;
        }
        
        @keyframes pulse {
            0% { box-shadow: 0 0 0 0 rgba(0, 212, 255, 0.7); }
            70% { box-shadow: 0 0 0 15px rgba(0, 212, 255, 0); }
            100% { box-shadow: 0 0 0 0 rgba(0, 212, 255, 0); }
        }
        
        .animate-pulse {
            animation: pulse 2s infinite;
        }
        
        @keyframes float {
            0% { transform: translateY(0px); }
            50% { transform: translateY(-10px); }
            100% { transform: translateY(0px); }
        }
        
        .float-animation {
            animation: float 4s ease-in-out infinite;
        }
        
        .nav-dots {
            position: fixed;
            bottom: 30px;
            left: 50%;
            transform: translateX(-50%);
            display: flex;
            gap: 10px;
            z-index: 10;
        }
        
        .nav-dot {
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background: rgba(255,255,255,0.3);
            cursor: pointer;
            transition: all 0.3s ease;
        }
        
        .nav-dot.active {
            background: #00d4ff;
            transform: scale(1.2);
        }
        
        .scroll-hint {
            position: fixed;
            right: 30px;
            top: 50%;
            transform: translateY(-50%);
            background: rgba(255,255,255,0.1);
            backdrop-filter: blur(10px);
            padding: 10px 15px;
            border-radius: 30px;
            font-size: 14px;
            display: flex;
            align-items: center;
            gap: 10px;
            opacity: 0;
            transition: opacity 0.5s ease;
        }
        
        .show-hint {
            opacity: 1;
        }
        
        /* Responsive styles */
        @media (max-width: 768px) {
            .timeline-content {
                width: 85%;
                height: 70%;
            }
            
            .timeline-date {
                font-size: 18px;
            }
            
            .timeline-title {
                font-size: 16px;
            }
            
            .timeline-desc {
                font-size: 14px;
            }
        }
    </style>
</head>
<body class="bg-gray-900 text-white font-sans">
    <div class="timeline-container" id="timelineContainer">
        <div class="timeline" id="timeline">
            <!-- Timeline items will be added here by JavaScript -->
        </div>
    </div>
    
    <div class="scroll-hint" id="scrollHint">
        <i class="fas fa-arrow-right animate-pulse"></i>
        <span>Scroll horizontally</span>
    </div>
    
    <div class="nav-dots" id="navDots">
        <!-- Navigation dots will be added here by JavaScript -->
    </div>
    
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const timelineData = [
                {
                    date: "2024 Q1",
                    title: "Quantum Computing Breakthrough",
                    description: "First commercially available quantum computers achieve quantum supremacy with 128 qubits, revolutionizing cryptography.",
                    icon: "fa-microchip"
                },
                {
                    date: "2025 Q3",
                    title: "Neural Interface Revolution",
                    description: "Widespread adoption of non-invasive BCI (Brain-Computer Interface) for controlling smart devices with thought alone.",
                    icon: "fa-brain"
                },
                {
                    date: "2026",
                    title: "Mars Colony Foundation",
                    description: "Establishment of the first permanent human settlement on Mars with 50 residents and growing.terraforming begins.",
                    icon: "fa-rocket"
                },
                {
                    date: "2027 Q4",
                    title: "AI Consciousness Debate",
                    description: "First AI system passes the Modified Turing Test, sparking global debate about machine consciousness and rights.",
                    icon: "fa-robot"
                },
                {
                    date: "2028",
                    title: "Nanomedicine Milestone",
                    description: "Medical nanobots approved for targeted cancer treatment, achieving 98% effectiveness with minimal side effects.",
                    icon: "fa-medkit"
                },
                {
                    date: "2029 Q2",
                    title: "Fusion Power Grid",
                    description: "First commercial fusion power plant begins operation, providing clean, unlimited energy to a major city.",
                    icon: "fa-bolt"
                },
                {
                    date: "2030",
                    title: "Anti-Aging Therapy",
                    description: "Breakthrough gene therapy extends human lifespan by 30-50 years, triggering major social and economic shifts.",
                    icon: "fa-clock"
                },
                {
                    date: "2031 Q3",
                    title: "Holographic Society",
                    description: "Holographic technology becomes standard for communication, replacing 40% of in-person meetings and 60% of video calls.",
                    icon: "fa-vr-cardboard"
                },
                {
                    date: "2032",
                    title: "Ocean Cities Project",
                    description: "First floating, self-sustaining cities launched to address overpopulation and rising sea levels.",
                    icon: "fa-water"
                },
                {
                    date: "2033 Q1",
                    title: "Mind Upload Research",
                    description: "Successful transfer of human consciousness to digital substrate achieved in controlled lab conditions.",
                    icon: "fa-upload"
                }
            ];
            
            const timeline = document.getElementById('timeline');
            const navDots = document.getElementById('navDots');
            const timelineContainer = document.getElementById('timelineContainer');
            const scrollHint = document.getElementById('scrollHint');
            
            // Create timeline items and navigation dots
            timelineData.forEach((item, index) => {
                // Create timeline item
                const timelineItem = document.createElement('div');
                timelineItem.className = 'timeline-item';
                timelineItem.id = `item-${index}`;
                
                timelineItem.innerHTML = `
                    <div class="timeline-line"></div>
                    <div class="timeline-marker"></div>
                    <div class="timeline-content">
                        <div class="absolute top-4 right-4 text-3xl opacity-30"><i class="fas ${item.icon}"></i></div>
                        <div class="timeline-date text-2xl">${item.date}</div>
                        <h2 class="timeline-title text-2xl font-bold mb-4">${item.title}</h2>
                        <p class="timeline-desc">${item.description}</p>
                    </div>
                `;
                
                timeline.appendChild(timelineItem);
                
                // Create navigation dot
                const dot = document.createElement('div');
                dot.className = 'nav-dot';
                dot.dataset.index = index;
                navDots.appendChild(dot);
            });
            
            // Make first item active
            document.querySelector(`#item-0`).classList.add('active');
            document.querySelector(`.nav-dot[data-index="0"]`).classList.add('active');
            
            // Handle scroll events
            let currentIndex = 0;
            timelineContainer.addEventListener('scroll', function() {
                const scrollX = this.scrollLeft;
                const windowWidth = window.innerWidth;
                const newIndex = Math.round(scrollX / windowWidth);
                
                if (newIndex !== currentIndex) {
                    // Update current item
                    document.querySelector(`#item-${currentIndex}`).classList.remove('active');
                    document.querySelector(`.nav-dot[data-index="${currentIndex}"]`).classList.remove('active');
                    
                    currentIndex = newIndex;
                    
                    // Update new item
                    document.querySelector(`#item-${currentIndex}`).classList.add('active');
                    document.querySelector(`.nav-dot[data-index="${currentIndex}"]`).classList.add('active');
                    
                    // Show hint for new users
                    if (currentIndex === 0 && scrollX < 100) {
                        scrollHint.classList.add('show-hint');
                    } else {
                        scrollHint.classList.remove('show-hint');
                    }
                }
            });
            
            // Handle dot clicks
            navDots.addEventListener('click', function(e) {
                if (e.target.classList.contains('nav-dot')) {
                    const index = parseInt(e.target.dataset.index);
                    const windowWidth = window.innerWidth;
                    timelineContainer.scrollTo({
                        left: index * windowWidth,
                        behavior: 'smooth'
                    });
                }
            });
            
            // Handle keyboard navigation
            document.addEventListener('keydown', function(e) {
                if (e.key === 'ArrowLeft' && currentIndex > 0) {
                    timelineContainer.scrollTo({
                        left: (currentIndex - 1) * window.innerWidth,
                        behavior: 'smooth'
                    });
                } else if (e.key === 'ArrowRight' && currentIndex < timelineData.length - 1) {
                    timelineContainer.scrollTo({
                        left: (currentIndex + 1) * window.innerWidth,
                        behavior: 'smooth'
                    });
                }
            });
            
            // Show hint on initial load
            setTimeout(() => {
                scrollHint.classList.add('show-hint');
                
                setTimeout(() => {
                    scrollHint.classList.remove('show-hint');
                }, 5000);
            }, 1000);
            
            // Add floating animation to random elements
            const contents = document.querySelectorAll('.timeline-content');
            const markers = document.querySelectorAll('.timeline-marker');
            
            function getRandomInt(min, max) {
                return Math.floor(Math.random() * (max - min + 1)) + min;
            }
            
            contents.forEach(content => {
                if (getRandomInt(0, 1) === 1) {
                    content.classList.add('float-animation');
                    // Random delay to prevent sync
                    content.style.animationDelay = `${getRandomInt(0, 3)}s`;
                }
            });
            
            // Make markers pulse while not active
            markers.forEach(marker => {
                if (!marker.closest('.timeline-item').classList.contains('active')) {
                    marker.classList.add('animate-pulse');
                }
            });
        });
    </script>
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=GMA2/test-again" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>