Hugging Face's logo

Spaces:
Boody123
/
my-awesome-space
Running

App Files Community
my-awesome-space / index.html
Boody123's picture
Boody123
Add 3 files
7c1c335 verified
raw
history blame contribute delete
55.7 kB
 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>The World in 2070 - A Futuristic Vision</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>
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700&family=Roboto:wght@300;400;700&display=swap');
body {
font-family: 'Roboto', sans-serif;
background-color: #0f172a;
color: #e2e8f0;
scroll-behavior: smooth;
}
.futuristic-font {
font-family: 'Orbitron', sans-serif;
}
.gradient-text {
background: linear-gradient(90deg, #3b82f6, #10b981, #ec4899);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.card-hover {
transition: all 0.3s ease;
border: 1px solid rgba(255, 255, 255, 0.1);
}
.card-hover:hover {
transform: translateY(-10px);
box-shadow: 0 10px 25px rgba(59, 130, 246, 0.3);
border-color: #3b82f6;
}
.timeline-item::before {
content: '';
position: absolute;
left: -38px;
top: 0;
width: 20px;
height: 20px;
border-radius: 50%;
background: #3b82f6;
border: 3px solid #0f172a;
}
.futuristic-bg {
background: radial-gradient(circle at 10% 20%, rgba(59, 130, 246, 0.1) 0%, rgba(16, 185, 129, 0.05) 90%);
}
@keyframes float {
0%, 100% {
transform: translateY(0);
}
50% {
transform: translateY(-10px);
}
}
.floating {
animation: float 6s ease-in-out infinite;
}
.typewriter {
overflow: hidden;
border-right: .15em solid #3b82f6;
white-space: nowrap;
margin: 0 auto;
letter-spacing: .15em;
animation:
typing 3.5s steps(40, end),
blink-caret .75s step-end infinite;
}
@keyframes typing {
from { width: 0 }
to { width: 100% }
}
@keyframes blink-caret {
from, to { border-color: transparent }
50% { border-color: #3b82f6; }
}
</style>
</head>
<body class="min-h-screen">
<!-- Navigation -->
<nav class="fixed w-full bg-gray-900/80 backdrop-blur-md z-50 border-b border-gray-800">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex items-center justify-between h-16">
<div class="flex items-center">
<div class="flex-shrink-0">
<span class="text-2xl font-bold gradient-text futuristic-font">2070</span>
</div>
<div class="hidden md:block">
<div class="ml-10 flex items-baseline space-x-4">
<a href="#home" class="px-3 py-2 rounded-md text-sm font-medium hover:text-blue-400 transition">Home</a>
<a href="#predictions" class="px-3 py-2 rounded-md text-sm font-medium hover:text-emerald-400 transition">Predictions</a>
<a href="#technology" class="px-3 py-2 rounded-md text-sm font-medium hover:text-pink-400 transition">Technology</a>
<a href="#environment" class="px-3 py-2 rounded-md text-sm font-medium hover:text-green-400 transition">Environment</a>
<a href="#quiz" class="px-3 py-2 rounded-md text-sm font-medium hover:text-purple-400 transition">Quiz</a>
</div>
</div>
</div>
<div class="-mr-2 flex md:hidden">
<button id="mobile-menu-button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white focus:outline-none">
<svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
</svg>
</button>
</div>
</div>
</div>
<!-- Mobile menu -->
<div id="mobile-menu" class="hidden md:hidden bg-gray-900/95 pb-3 border-t border-gray-800">
<div class="px-2 pt-2 pb-3 space-y-1 sm:px-3">
<a href="#home" class="block px-3 py-2 rounded-md text-base font-medium hover:text-blue-400 transition">Home</a>
<a href="#predictions" class="block px-3 py-2 rounded-md text-base font-medium hover:text-emerald-400 transition">Predictions</a>
<a href="#technology" class="block px-3 py-2 rounded-md text-base font-medium hover:text-pink-400 transition">Technology</a>
<a href="#environment" class="block px-3 py-2 rounded-md text-base font-medium hover:text-green-400 transition">Environment</a>
<a href="#quiz" class="block px-3 py-2 rounded-md text-base font-medium hover:text-purple-400 transition">Quiz</a>
</div>
</div>
</nav>
<!-- Hero Section -->
<section id="home" class="relative pt-24 pb-32 px-4 sm:px-6 lg:px-8 flex items-center justify-center min-h-screen futuristic-bg">
<div class="max-w-7xl mx-auto">
<div class="text-center">
<h1 class="text-5xl md:text-7xl font-bold mb-6 gradient-text futuristic-font">
<span class="typewriter">The World in 2070</span>
</h1>
<p class="text-xl md:text-2xl max-w-3xl mx-auto mb-10 text-gray-300">
A visionary exploration of how technology, society, and the environment might evolve by the year 2070
</p>
<div class="flex flex-col sm:flex-row justify-center gap-4">
<a href="#predictions" class="px-8 py-3 bg-blue-600 hover:bg-blue-700 rounded-lg font-medium transition transform hover:scale-105">
Explore Predictions <i class="fas fa-arrow-down ml-2"></i>
</a>
<a href="#quiz" class="px-8 py-3 bg-transparent border border-blue-400 text-blue-400 hover:bg-blue-900/30 rounded-lg font-medium transition transform hover:scale-105">
Take the Quiz <i class="fas fa-question-circle ml-2"></i>
</a>
</div>
</div>
<div class="mt-20 grid grid-cols-2 md:grid-cols-4 gap-6 max-w-4xl mx-auto">
<div class="bg-gray-800/50 p-4 rounded-xl border border-gray-700 text-center card-hover">
<i class="fas fa-robot text-4xl mb-3 text-blue-400"></i>
<h3 class="font-bold text-lg">AI Integration</h3>
</div>
<div class="bg-gray-800/50 p-4 rounded-xl border border-gray-700 text-center card-hover">
<i class="fas fa-leaf text-4xl mb-3 text-emerald-400"></i>
<h3 class="font-bold text-lg">Green Cities</h3>
</div>
<div class="bg-gray-800/50 p-4 rounded-xl border border-gray-700 text-center card-hover">
<i class="fas fa-brain text-4xl mb-3 text-purple-400"></i>
<h3 class="font-bold text-lg">Mind Tech</h3>
</div>
<div class="bg-gray-800/50 p-4 rounded-xl border border-gray-700 text-center card-hover">
<i class="fas fa-globe-americas text-4xl mb-3 text-pink-400"></i>
<h3 class="font-bold text-lg">Global Unity</h3>
</div>
</div>
</div>
<div class="absolute bottom-10 left-0 right-0 flex justify-center">
<a href="#predictions" class="text-gray-400 hover:text-white animate-bounce">
<i class="fas fa-chevron-down text-3xl"></i>
</a>
</div>
</section>
<!-- Predictions Section -->
<section id="predictions" class="py-20 px-4 sm:px-6 lg:px-8 bg-gray-900">
<div class="max-w-7xl mx-auto">
<div class="text-center mb-16">
<h2 class="text-4xl font-bold mb-4 gradient-text futuristic-font">Our Predictions for 2070</h2>
<p class="text-xl text-gray-300 max-w-3xl mx-auto">
Based on current trends and technological advancements, here's what we envision for the world in 2070
</p>
</div>
<div class="relative">
<!-- Timeline -->
<div class="border-l-2 border-blue-400/50 pl-8 ml-4 space-y-16">
<!-- Item 1 -->
<div class="timeline-item relative">
<div class="bg-gray-800/50 p-6 rounded-xl border border-gray-700 card-hover">
<div class="flex flex-col md:flex-row gap-6">
<div class="md:w-1/3">
<img src="https://images.unsplash.com/photo-1620712943543-bcc4688e7485?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=600&q=80"
alt="AI Integration"
class="w-full h-auto rounded-lg object-cover">
</div>
<div class="md:w-2/3">
<div class="flex items-center mb-4">
<span class="bg-blue-900/50 text-blue-400 px-3 py-1 rounded-full text-sm font-medium">Technology</span>
<span class="ml-3 text-gray-400 text-sm">2045-2070</span>
</div>
<h3 class="text-2xl font-bold mb-3">Full AI Integration</h3>
<p class="text-gray-300 mb-4">
By 2070, artificial intelligence will be seamlessly integrated into every aspect of daily life.
AI personal assistants will anticipate our needs, manage our schedules, and even make decisions
on our behalf based on deep learning of our preferences.
</p>
<div class="flex flex-wrap gap-2">
<span class="bg-gray-700/50 px-2 py-1 rounded text-sm">Neural Interfaces</span>
<span class="bg-gray-700/50 px-2 py-1 rounded text-sm">Predictive Systems</span>
<span class="bg-gray-700/50 px-2 py-1 rounded text-sm">Automation</span>
</div>
</div>
</div>
</div>
</div>
<!-- Item 2 -->
<div class="timeline-item relative">
<div class="bg-gray-800/50 p-6 rounded-xl border border-gray-700 card-hover">
<div class="flex flex-col md:flex-row gap-6">
<div class="md:w-1/3">
<img src="https://images.unsplash.com/photo-1542601906990-b4d3fb778b09?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=600&q=80"
alt="Sustainable Cities"
class="w-full h-auto rounded-lg object-cover">
</div>
<div class="md:w-2/3">
<div class="flex items-center mb-4">
<span class="bg-emerald-900/50 text-emerald-400 px-3 py-1 rounded-full text-sm font-medium">Environment</span>
<span class="ml-3 text-gray-400 text-sm">2030-2070</span>
</div>
<h3 class="text-2xl font-bold mb-3">Sustainable Megacities</h3>
<p class="text-gray-300 mb-4">
Urban areas will transform into self-sustaining ecosystems with vertical farms,
renewable energy grids, and advanced waste management systems. Buildings will be
constructed with smart materials that adapt to weather conditions and generate energy.
</p>
<div class="flex flex-wrap gap-2">
<span class="bg-gray-700/50 px-2 py-1 rounded text-sm">Vertical Farming</span>
<span class="bg-gray-700/50 px-2 py-1 rounded text-sm">Carbon Capture</span>
<span class="bg-gray-700/50 px-2 py-1 rounded text-sm">Smart Infrastructure</span>
</div>
</div>
</div>
</div>
</div>
<!-- Item 3 -->
<div class="timeline-item relative">
<div class="bg-gray-800/50 p-6 rounded-xl border border-gray-700 card-hover">
<div class="flex flex-col md:flex-row gap-6">
<div class="md:w-1/3">
<img src="https://images.unsplash.com/photo-1620641788421-7a1c342ea42e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=600&q=80"
alt="Space Colonization"
class="w-full h-auto rounded-lg object-cover">
</div>
<div class="md:w-2/3">
<div class="flex items-center mb-4">
<span class="bg-purple-900/50 text-purple-400 px-3 py-1 rounded-full text-sm font-medium">Space</span>
<span class="ml-3 text-gray-400 text-sm">2060-2070</span>
</div>
<h3 class="text-2xl font-bold mb-3">Moon and Mars Colonies</h3>
<p class="text-gray-300 mb-4">
Permanent human settlements will exist on the Moon and Mars, serving as research bases
and stepping stones for deeper space exploration. These colonies will test technologies
for sustainable living in extreme environments.
</p>
<div class="flex flex-wrap gap-2">
<span class="bg-gray-700/50 px-2 py-1 rounded text-sm">Space Tourism</span>
<span class="bg-gray-700/50 px-2 py-1 rounded text-sm">Terraforming</span>
<span class="bg-gray-700/50 px-2 py-1 rounded text-sm">Off-World Mining</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Technology Section -->
<section id="technology" class="py-20 px-4 sm:px-6 lg:px-8 futuristic-bg">
<div class="max-w-7xl mx-auto">
<div class="text-center mb-16">
<h2 class="text-4xl font-bold mb-4 gradient-text futuristic-font">Technological Advancements</h2>
<p class="text-xl text-gray-300 max-w-3xl mx-auto">
Revolutionary technologies that will reshape human existence by 2070
</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
<!-- Card 1 -->
<div class="bg-gray-800/50 p-6 rounded-xl border border-gray-700 card-hover">
<div class="flex items-center justify-center w-16 h-16 bg-blue-900/30 rounded-lg mb-4 text-blue-400">
<i class="fas fa-brain text-3xl"></i>
</div>
<h3 class="text-2xl font-bold mb-3">Brain-Computer Interfaces</h3>
<p class="text-gray-300 mb-4">
Direct neural connections will allow thought-controlled devices, instant knowledge downloads,
and enhanced cognitive abilities through brain augmentation.
</p>
<div class="flex items-center text-sm text-blue-400">
<span>Estimated arrival: 2055</span>
</div>
</div>
<!-- Card 2 -->
<div class="bg-gray-800/50 p-6 rounded-xl border border-gray-700 card-hover">
<div class="flex items-center justify-center w-16 h-16 bg-emerald-900/30 rounded-lg mb-4 text-emerald-400">
<i class="fas fa-dna text-3xl"></i>
</div>
<h3 class="text-2xl font-bold mb-3">Genetic Engineering</h3>
<p class="text-gray-300 mb-4">
CRISPR and advanced gene therapies will eliminate hereditary diseases, extend lifespan,
and allow for biological enhancements tailored to individual needs.
</p>
<div class="flex items-center text-sm text-emerald-400">
<span>Widespread by: 2060</span>
</div>
</div>
<!-- Card 3 -->
<div class="bg-gray-800/50 p-6 rounded-xl border border-gray-700 card-hover">
<div class="flex items-center justify-center w-16 h-16 bg-purple-900/30 rounded-lg mb-4 text-purple-400">
<i class="fas fa-atom text-3xl"></i>
</div>
<h3 class="text-2xl font-bold mb-3">Quantum Computing</h3>
<p class="text-gray-300 mb-4">
Quantum computers will solve problems in seconds that would take current supercomputers millennia,
revolutionizing medicine, materials science, and cryptography.
</p>
<div class="flex items-center text-sm text-purple-400">
<span>Commercial use: 2045+</span>
</div>
</div>
<!-- Card 4 -->
<div class="bg-gray-800/50 p-6 rounded-xl border border-gray-700 card-hover">
<div class="flex items-center justify-center w-16 h-16 bg-pink-900/30 rounded-lg mb-4 text-pink-400">
<i class="fas fa-robot text-3xl"></i>
</div>
<h3 class="text-2xl font-bold mb-3">Humanoid Robotics</h3>
<p class="text-gray-300 mb-4">
Advanced androids with human-like appearance and intelligence will serve as companions,
caregivers, and coworkers, blurring the line between human and machine.
</p>
<div class="flex items-center text-sm text-pink-400">
<span>Commonplace by: 2065</span>
</div>
</div>
<!-- Card 5 -->
<div class="bg-gray-800/50 p-6 rounded-xl border border-gray-700 card-hover">
<div class="flex items-center justify-center w-16 h-16 bg-yellow-900/30 rounded-lg mb-4 text-yellow-400">
<i class="fas fa-vr-cardboard text-3xl"></i>
</div>
<h3 class="text-2xl font-bold mb-3">Full-Dive Virtual Reality</h3>
<p class="text-gray-300 mb-4">
Neural VR systems will provide fully immersive experiences indistinguishable from reality,
enabling virtual travel, education, and social interactions with complete sensory feedback.
</p>
<div class="flex items-center text-sm text-yellow-400">
<span>Consumer version: 2050</span>
</div>
</div>
<!-- Card 6 -->
<div class="bg-gray-800/50 p-6 rounded-xl border border-gray-700 card-hover">
<div class="flex items-center justify-center w-16 h-16 bg-red-900/30 rounded-lg mb-4 text-red-400">
<i class="fas fa-syringe text-3xl"></i>
</div>
<h3 class="text-2xl font-bold mb-3">Medical Nanobots</h3>
<p class="text-gray-300 mb-4">
Microscopic robots will patrol our bloodstream, repairing cellular damage,
eliminating pathogens, and continuously monitoring health at the molecular level.
</p>
<div class="flex items-center text-sm text-red-400">
<span>First applications: 2040</span>
</div>
</div>
</div>
<div class="mt-16 text-center">
<button id="tech-more-btn" class="px-6 py-3 bg-transparent border border-blue-400 text-blue-400 hover:bg-blue-900/30 rounded-lg font-medium transition">
Show More Technologies <i class="fas fa-chevron-down ml-2"></i>
</button>
<div id="more-tech" class="hidden mt-8 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
<!-- Additional hidden tech cards would go here -->
</div>
</div>
</div>
</section>
<!-- Environment Section -->
<section id="environment" class="py-20 px-4 sm:px-6 lg:px-8 bg-gray-900">
<div class="max-w-7xl mx-auto">
<div class="text-center mb-16">
<h2 class="text-4xl font-bold mb-4 gradient-text futuristic-font">Environmental Transformation</h2>
<p class="text-xl text-gray-300 max-w-3xl mx-auto">
How humanity will restore and coexist with nature in 2070
</p>
</div>
<div class="flex flex-col lg:flex-row gap-12 items-center">
<div class="lg:w-1/2">
<div class="relative">
<img src="https://images.unsplash.com/photo-1462331940025-496dfbfc7564?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80"
alt="Future Earth"
class="w-full rounded-xl shadow-2xl floating">
<div class="absolute -bottom-6 -right-6 bg-blue-900/80 p-4 rounded-xl border border-blue-400 w-2/3">
<h4 class="font-bold text-lg mb-2">Earth Restoration Projects</h4>
<p class="text-sm text-gray-300">Global efforts successfully reversed climate change by 2065</p>
</div>
</div>
</div>
<div class="lg:w-1/2">
<div class="space-y-6">
<div class="flex items-start">
<div class="flex-shrink-0 bg-green-900/30 rounded-lg p-3 text-green-400 mr-4">
<i class="fas fa-solar-panel text-2xl"></i>
</div>
<div>
<h3 class="text-2xl font-bold mb-2">100% Renewable Energy</h3>
<p class="text-gray-300">
Fossil fuels will be completely phased out in favor of fusion power, advanced solar,
and orbital energy collection systems providing clean, abundant energy worldwide.
</p>
</div>
</div>
<div class="flex items-start">
<div class="flex-shrink-0 bg-teal-900/30 rounded-lg p-3 text-teal-400 mr-4">
<i class="fas fa-recycle text-2xl"></i>
</div>
<div>
<h3 class="text-2xl font-bold mb-2">Circular Economy</h3>
<p class="text-gray-300">
Zero-waste manufacturing and complete material recycling will be standard,
with AI-optimized resource flows eliminating pollution and minimizing extraction.
</p>
</div>
</div>
<div class="flex items-start">
<div class="flex-shrink-0 bg-emerald-900/30 rounded-lg p-3 text-emerald-400 mr-4">
<i class="fas fa-tree text-2xl"></i>
</div>
<div>
<h3 class="text-2xl font-bold mb-2">Rewilded Landscapes</h3>
<p class="text-gray-300">
Vast areas will be returned to wilderness, with de-extinction projects restoring
lost species and smart conservation systems protecting biodiversity hotspots.
</p>
</div>
</div>
</div>
<div class="mt-10 bg-gray-800/50 p-6 rounded-xl border border-gray-700">
<h3 class="text-xl font-bold mb-4">Environmental Progress Timeline</h3>
<div class="space-y-4">
<div>
<div class="flex justify-between mb-1">
<span class="text-sm font-medium text-blue-400">Carbon Neutrality</span>
<span class="text-sm text-gray-400">2040 Achieved</span>
</div>
<div class="w-full bg-gray-700 rounded-full h-2.5">
<div class="bg-blue-600 h-2.5 rounded-full" style="width: 100%"></div>
</div>
</div>
<div>
<div class="flex justify-between mb-1">
<span class="text-sm font-medium text-emerald-400">Ocean Cleanup</span>
<span class="text-sm text-gray-400">2055 Completed</span>
</div>
<div class="w-full bg-gray-700 rounded-full h-2.5">
<div class="bg-emerald-600 h-2.5 rounded-full" style="width: 85%"></div>
</div>
</div>
<div>
<div class="flex justify-between mb-1">
<span class="text-sm font-medium text-purple-400">Species Restoration</span>
<span class="text-sm text-gray-400">2068 Ongoing</span>
</div>
<div class="w-full bg-gray-700 rounded-full h-2.5">
<div class="bg-purple-600 h-2.5 rounded-full" style="width: 65%"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Quiz Section -->
<section id="quiz" class="py-20 px-4 sm:px-6 lg:px-8 futuristic-bg">
<div class="max-w-4xl mx-auto">
<div class="text-center mb-16">
<h2 class="text-4xl font-bold mb-4 gradient-text futuristic-font">2070 Future Quiz</h2>
<p class="text-xl text-gray-300 max-w-3xl mx-auto">
Test your knowledge about our predictions for the world in 2070
</p>
</div>
<div class="bg-gray-800/50 p-8 rounded-xl border border-gray-700">
<div id="quiz-container">
<div id="quiz-intro" class="text-center">
<i class="fas fa-question-circle text-6xl mb-6 text-purple-400"></i>
<h3 class="text-2xl font-bold mb-4">How Well Do You Know the Future?</h3>
<p class="text-gray-300 mb-8">
Take this 5-question quiz to see how aligned your vision of 2070 is with our predictions.
You'll get immediate feedback on each answer!
</p>
<button id="start-quiz" class="px-8 py-3 bg-purple-600 hover:bg-purple-700 rounded-lg font-medium transition transform hover:scale-105">
Start Quiz <i class="fas fa-play ml-2"></i>
</button>
</div>
<div id="quiz-questions" class="hidden">
<!-- Question 1 -->
<div class="question hidden" data-question="1">
<h3 class="text-xl font-bold mb-6">1. What percentage of jobs do we predict will be automated by 2070?</h3>
<div class="space-y-3">
<button class="answer-btn w-full text-left bg-gray-700/50 hover:bg-gray-700 p-4 rounded-lg border border-gray-600 transition" data-correct="false">
A. 30-40%
</button>
<button class="answer-btn w-full text-left bg-gray-700/50 hover:bg-gray-700 p-4 rounded-lg border border-gray-600 transition" data-correct="false">
B. 50-60%
</button>
<button class="answer-btn w-full text-left bg-gray-700/50 hover:bg-gray-700 p-4 rounded-lg border border-gray-600 transition" data-correct="true">
C. 70-80%
</button>
<button class="answer-btn w-full text-left bg-gray-700/50 hover:bg-gray-700 p-4 rounded-lg border border-gray-600 transition" data-correct="false">
D. 90-100%
</button>
</div>
<div class="mt-6 feedback hidden">
<div class="p-4 rounded-lg bg-gray-700/80 border hidden correct-feedback border-green-500 text-green-400">
<i class="fas fa-check-circle mr-2"></i> Correct! We predict 70-80% automation as many jobs will still require human creativity and oversight.
</div>
<div class="p-4 rounded-lg bg-gray-700/80 border hidden incorrect-feedback border-red-500 text-red-400">
<i class="fas fa-times-circle mr-2"></i> Not quite. The correct answer is C. While automation will be extensive, many jobs will still require human creativity and oversight.
</div>
</div>
</div>
<!-- Question 2 -->
<div class="question hidden" data-question="2">
<h3 class="text-xl font-bold mb-6">2. Which energy source will likely dominate by 2070?</h3>
<div class="space-y-3">
<button class="answer-btn w-full text-left bg-gray-700/50 hover:bg-gray-700 p-4 rounded-lg border border-gray-600 transition" data-correct="false">
A. Fossil fuels with carbon capture
</button>
<button class="answer-btn w-full text-left bg-gray-700/50 hover:bg-gray-700 p-4 rounded-lg border border-gray-600 transition" data-correct="true">
B. Nuclear fusion
</button>
<button class="answer-btn w-full text-left bg-gray-700/50 hover:bg-gray-700 p-4 rounded-lg border border-gray-600 transition" data-correct="false">
C. Traditional nuclear fission
</button>
<button class="answer-btn w-full text-left bg-gray-700/50 hover:bg-gray-700 p-4 rounded-lg border border-gray-600 transition" data-correct="false">
D. Biofuels
</button>
</div>
<div class="mt-6 feedback hidden">
<div class="p-4 rounded-lg bg-gray-700/80 border hidden correct-feedback border-green-500 text-green-400">
<i class="fas fa-check-circle mr-2"></i> Right! Fusion power is expected to become commercially viable by 2050 and dominant by 2070.
</div>
<div class="p-4 rounded-lg bg-gray-700/80 border hidden incorrect-feedback border-red-500 text-red-400">
<i class="fas fa-times-circle mr-2"></i> Actually, the correct answer is B. Fusion power is expected to become commercially viable by 2050 and dominant by 2070.
</div>
</div>
</div>
<!-- Question 3 -->
<div class="question hidden" data-question="3">
<h3 class="text-xl font-bold mb-6">3. What will be the average human lifespan in 2070?</h3>
<div class="space-y-3">
<button class="answer-btn w-full text-left bg-gray-700/50 hover:bg-gray-700 p-4 rounded-lg border border-gray-600 transition" data-correct="false">
A. 75-80 years (similar to today)
</button>
<button class="answer-btn w-full text-left bg-gray-700/50 hover:bg-gray-700 p-4 rounded-lg border border-gray-600 transition" data-correct="false">
B. 85-90 years
</button>
<button class="answer-btn w-full text-left bg-gray-700/50 hover:bg-gray-700 p-4 rounded-lg border border-gray-600 transition" data-correct="false">
C. 95-100 years
</button>
<button class="answer-btn w-full text-left bg-gray-700/50 hover:bg-gray-700 p-4 rounded-lg border border-gray-600 transition" data-correct="true">
D. 110-120 years
</button>
</div>
<div class="mt-6 feedback hidden">
<div class="p-4 rounded-lg bg-gray-700/80 border hidden correct-feedback border-green-500 text-green-400">
<i class="fas fa-check-circle mr-2"></i> Correct! Advances in medicine and biotechnology will likely push average lifespans beyond 110 years.
</div>
<div class="p-4 rounded-lg bg-gray-700/80 border hidden incorrect-feedback border-red-500 text-red-400">
<i class="fas fa-times-circle mr-2"></i> Not quite. The correct answer is D. Advances in medicine and biotechnology will likely push average lifespans beyond 110 years.
</div>
</div>
</div>
<!-- Question 4 -->
<div class="question hidden" data-question="4">
<h3 class="text-xl font-bold mb-6">4. Which technology will be most impactful for education in 2070?</h3>
<div class="space-y-3">
<button class="answer-btn w-full text-left bg-gray-700/50 hover:bg-gray-700 p-4 rounded-lg border border-gray-600 transition" data-correct="false">
A. Augmented reality classrooms
</button>
<button class="answer-btn w-full text-left bg-gray-700/50 hover:bg-gray-700 p-4 rounded-lg border border-gray-600 transition" data-correct="false">
B. AI tutors
</button>
<button class="answer-btn w-full text-left bg-gray-700/50 hover:bg-gray-700 p-4 rounded-lg border border-gray-600 transition" data-correct="true">
C. Neural knowledge implants
</button>
<button class="answer-btn w-full text-left bg-gray-700/50 hover:bg-gray-700 p-4 rounded-lg border border-gray-600 transition" data-correct="false">
D. Global education networks
</button>
</div>
<div class="mt-6 feedback hidden">
<div class="p-4 rounded-lg bg-gray-700/80 border hidden correct-feedback border-green-500 text-green-400">
<i class="fas fa-check-circle mr-2"></i> Right! While all will be important, direct neural knowledge transfer will revolutionize learning.
</div>
<div class="p-4 rounded-lg bg-gray-700/80 border hidden incorrect-feedback border-red-500 text-red-400">
<i class="fas fa-times-circle mr-2"></i> Actually, the correct answer is C. While all will be important, direct neural knowledge transfer will revolutionize learning.
</div>
</div>
</div>
<!-- Question 5 -->
<div class="question hidden" data-question="5">
<h3 class="text-xl font-bold mb-6">5. How will climate change be addressed by 2070?</h3>
<div class="space-y-3">
<button class="answer-btn w-full text-left bg-gray-700/50 hover:bg-gray-700 p-4 rounded-lg border border-gray-600 transition" data-correct="false">
A. Geoengineering projects to cool the planet
</button>
<button class="answer-btn w-full text-left bg-gray-700/50 hover:bg-gray-700 p-4 rounded-lg border border-gray-600 transition" data-correct="false">
B. Adaptation to warmer temperatures
</button>
<button class="answer-btn w-full text-left bg-gray-700/50 hover:bg-gray-700 p-4 rounded-lg border border-gray-600 transition" data-correct="true">
C. Combination of carbon capture and renewable energy
</button>
<button class="answer-btn w-full text-left bg-gray-700/50 hover:bg-gray-700 p-4 rounded-lg border border-gray-600 transition" data-correct="false">
D. Climate change will be largely unresolved
</button>
</div>
<div class="mt-6 feedback hidden">
<div class="p-4 rounded-lg bg-gray-700/80 border hidden correct-feedback border-green-500 text-green-400">
<i class="fas fa-check-circle mr-2"></i> Correct! A multi-pronged approach will successfully reverse climate change by 2070.
</div>
<div class="p-4 rounded-lg bg-gray-700/80 border hidden incorrect-feedback border-red-500 text-red-400">
<i class="fas fa-times-circle mr-2"></i> Not quite. The correct answer is C. A multi-pronged approach will successfully reverse climate change by 2070.
</div>
</div>
</div>
</div>
<div id="quiz-results" class="hidden text-center">
<i class="fas fa-chart-line text-6xl mb-6 text-blue-400"></i>
<h3 class="text-2xl font-bold mb-4">Your Future Knowledge Score</h3>
<div class="text-5xl font-bold mb-6 gradient-text futuristic-font" id="score-display">0/5</div>
<p class="text-gray-300 mb-8" id="result-message">
Based on your answers, you have some learning to do about our future predictions!
</p>
<div class="flex justify-center gap-4">
<button id="retake-quiz" class="px-6 py-3 bg-blue-600 hover:bg-blue-700 rounded-lg font-medium transition">
<i class="fas fa-redo mr-2"></i> Try Again
</button>
<a href="#home" class="px-6 py-3 bg-transparent border border-blue-400 text-blue-400 hover:bg-blue-900/30 rounded-lg font-medium transition">
<i class="fas fa-home mr-2"></i> Back to Home
</a>
</div>
</div>
<div class="mt-8 flex justify-between items-center">
<div id="quiz-progress" class="text-sm text-gray-400 hidden">
Question <span id="current-question">1</span> of 5
</div>
<button id="next-question" class="hidden px-6 py-2 bg-blue-600 hover:bg-blue-700 rounded-lg font-medium transition ml-auto">
Next <i class="fas fa-arrow-right ml-2"></i>
</button>
</div>
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer class="bg-gray-900/80 border-t border-gray-800 py-12 px-4 sm:px-6 lg:px-8">
<div class="max-w-7xl mx-auto">
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
<div>
<h3 class="text-xl font-bold mb-4 gradient-text futuristic-font">2070 Future Vision</h3>
<p class="text-gray-400">
A school project exploring possible futures based on current technological, environmental, and social trends.
</p>
</div>
<div>
<h3 class="text-lg font-bold mb-4 text-gray-300">Quick Links</h3>
<ul class="space-y-2">
<li><a href="#home" class="text-gray-400 hover:text-blue-400 transition">Home</a></li>
<li><a href="#predictions" class="text-gray-400 hover:text-emerald-400 transition">Predictions</a></li>
<li><a href="#technology" class="text-gray-400 hover:text-pink-400 transition">Technology</a></li>
<li><a href="#environment" class="text-gray-400 hover:text-green-400 transition">Environment</a></li>
<li><a href="#quiz" class="text-gray-400 hover:text-purple-400 transition">Quiz</a></li>
</ul>
</div>
<div>
<h3 class="text-lg font-bold mb-4 text-gray-300">Connect</h3>
<div class="flex space-x-4">
<a href="#" class="text-gray-400 hover:text-blue-400 transition text-xl">
<i class="fab fa-twitter"></i>
</a>
<a href="#" class="text-gray-400 hover:text-pink-400 transition text-xl">
<i class="fab fa-instagram"></i>
</a>
<a href="#" class="text-gray-400 hover:text-blue-600 transition text-xl">
<i class="fab fa-linkedin"></i>
</a>
<a href="#" class="text-gray-400 hover:text-red-500 transition text-xl">
<i class="fab fa-youtube"></i>
</a>
</div>
<div class="mt-4">
<p class="text-gray-400 text-sm">
<i class="fas fa-envelope mr-2"></i> future2070@schoolproject.edu
</p>
</div>
</div>
</div>
<div class="mt-12 pt-8 border-t border-gray-800 text-center text-gray-500 text-sm">
<p>© 2023 Future Vision Project. All predictions are speculative and for educational purposes only.</p>
</div>
</div>
</footer>
<script>
// Mobile menu toggle
document.getElementById('mobile-menu-button').addEventListener('click', function() {
const menu = document.getElementById('mobile-menu');
menu.classList.toggle('hidden');
});
// Smooth scrolling for navigation links
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
const targetId = this.getAttribute('href');
const targetElement = document.querySelector(targetId);
if (targetElement) {
// Close mobile menu if open
const mobileMenu = document.getElementById('mobile-menu');
mobileMenu.classList.add('hidden');
window.scrollTo({
top: targetElement.offsetTop - 80,
behavior: 'smooth'
});
}
});
});
// Show more technologies
document.getElementById('tech-more-btn').addEventListener('click', function() {
const moreTech = document.getElementById('more-tech');
const icon = this.querySelector('i');
if (moreTech.classList.contains('hidden')) {
moreTech.classList.remove('hidden');
icon.classList.remove('fa-chevron-down');
icon.classList.add('fa-chevron-up');
this.textContent = 'Show Less Technologies ';
} else {
moreTech.classList.add('hidden');
icon.classList.remove('fa-chevron-up');
icon.classList.add('fa-chevron-down');
this.textContent = 'Show More Technologies ';
}
// Append the icon back to the button
this.appendChild(icon);
});
// Quiz functionality
let currentQuestion = 1;
let score = 0;
const totalQuestions = 5;
document.getElementById('start-quiz').addEventListener('click', function() {
document.getElementById('quiz-intro').classList.add('hidden');
document.getElementById('quiz-questions').classList.remove('hidden');
document.querySelector(`[data-question="1"]`).classList.remove('hidden');
document.getElementById('quiz-progress').classList.remove('hidden');
});
document.querySelectorAll('.answer-btn').forEach(button => {
button.addEventListener('click', function() {
const isCorrect = this.getAttribute('data-correct') === 'true';
const questionDiv = this.closest('.question');
const feedbackDiv = questionDiv.querySelector('.feedback');
// Show feedback
if (isCorrect) {
questionDiv.querySelector('.correct-feedback').classList.remove('hidden');
score++;
} else {
questionDiv.querySelector('.incorrect-feedback').classList.remove('hidden');
}
feedbackDiv.classList.remove('hidden');
// Disable all answer buttons for this question
questionDiv.querySelectorAll('.answer-btn').forEach(btn => {
btn.disabled = true;
if (btn.getAttribute('data-correct') === 'true') {
btn.classList.add('border-green-500', 'bg-green-900/20');
} else {
btn.classList.add('border-red-500', 'bg-red-900/20');
}
});
// Show next button or finish quiz
if (currentQuestion < totalQuestions) {
document.getElementById('next-question').classList.remove('hidden');
} else {
document.getElementById('next-question').classList.add('hidden');
setTimeout(showQuizResults, 1500);
}
});
});
document.getElementById('next-question').addEventListener('click', function() {
// Hide current question
document.querySelector(`[data-question="${currentQuestion}"]`).classList.add('hidden');
// Show next question
currentQuestion++;
document.querySelector(`[data-question="${currentQuestion}"]`).classList.remove('hidden');
document.getElementById('current-question').textContent = currentQuestion;
// Hide next button until answer is selected
this.classList.add('hidden');
});
document.getElementById('retake-quiz').addEventListener('click', function() {
resetQuiz();
});
function showQuizResults() {
document.getElementById('quiz-questions').classList.add('hidden');
document.getElementById('quiz-results').classList.remove('hidden');
// Set score and message
document.getElementById('score-display').textContent = `${score}/${totalQuestions}`;
let message = '';
if (score === totalQuestions) {
message = "Perfect! You're a true futurist with excellent knowledge of potential future developments.";
} else if (score >= 3) {
message = "Good job! You have a solid understanding of potential future trends.";
} else {
message = "Keep exploring! The future holds many possibilities worth learning about.";
}
document.getElementById('result-message').textContent = message;
}
function resetQuiz() {
currentQuestion = 1;
score = 0;
// Reset all questions
document.querySelectorAll('.question').forEach(question => {
question.classList.add('hidden');
question.querySelector('.feedback').classList.add('hidden');
question.querySelector('.correct-feedback').classList.add('hidden');
question.querySelector('.incorrect-feedback').classList.add('hidden');
question.querySelectorAll('.answer-btn').forEach(btn => {
btn.disabled = false;
btn.classList.remove('border-green-500', 'bg-green-900/20', 'border-red-500', 'bg-red-900/20');
});
});
// Show first question
document.querySelector(`[data-question="1"]`).classList.remove('hidden');
document.getElementById('current-question').textContent = '1';
document.getElementById('quiz-results').classList.add('hidden');
document.getElementById('quiz-questions').classList.remove('hidden');
document.getElementById('next-question').classList.add('hidden');
}
// Add floating animation to elements with .floating class
const floatingElements = document.querySelectorAll('.floating');
floatingElements.forEach(el => {
// Randomize delay to create wave effect
el.style.animationDelay = `${Math.random() * 2}s`;
});
// Typewriter effect for the hero heading
setTimeout(() => {
const typewriter = document.querySelector('.typewriter');
typewriter.style.animation = 'none';
setTimeout(() => {
typewriter.style.animation = '';
typewriter.style.borderRight = 'none';
}, 10);
}, 3500);
</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=Boody123/my-awesome-space" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>