Hugging Face's logo

Spaces:
IssamKLAI
/
pythonexplorer
Running

App Files Community
pythonexplorer / index.html
IssamKLAI's picture
IssamKLAI
Add 3 files
0b1083a verified
raw
history blame contribute delete
50.2 kB
 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Python Explorer - Learn to Code!</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>
@keyframes float {
0% { transform: translateY(0px); }
50% { transform: translateY(-10px); }
100% { transform: translateY(0px); }
}
@keyframes shake {
0% { transform: rotate(0deg); }
25% { transform: rotate(5deg); }
50% { transform: rotate(0deg); }
75% { transform: rotate(-5deg); }
100% { transform: rotate(0deg); }
}
.floating {
animation: float 3s ease-in-out infinite;
}
.shake {
animation: shake 0.5s ease-in-out infinite;
}
.code-block {
font-family: 'Courier New', monospace;
background-color: #2d3748;
color: #f7fafc;
border-radius: 0.5rem;
padding: 1rem;
position: relative;
}
.code-block::before {
content: '';
position: absolute;
top: 0;
right: 0;
width: 0;
height: 0;
border-style: solid;
border-width: 0 30px 30px 0;
border-color: transparent #4a5568 transparent transparent;
}
.typewriter {
overflow: hidden;
border-right: .15em solid orange;
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: orange; }
}
.lesson-card {
transition: all 0.3s ease;
transform-style: preserve-3d;
}
.lesson-card:hover {
transform: translateY(-5px) rotateY(5deg);
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
}
.progress-bar {
height: 10px;
background-color: #e2e8f0;
border-radius: 5px;
overflow: hidden;
}
.progress-fill {
height: 100%;
background-color: #48bb78;
transition: width 0.5s ease;
}
.terminal {
background-color: #1a202c;
color: #f7fafc;
border-radius: 0.5rem;
padding: 1rem;
font-family: 'Courier New', monospace;
height: 200px;
overflow-y: auto;
}
.terminal-line {
margin-bottom: 0.5rem;
}
.terminal-prompt {
color: #48bb78;
}
.terminal-output {
color: #f7fafc;
}
.terminal-error {
color: #f56565;
}
</style>
</head>
<body class="bg-blue-50 min-h-screen">
<!-- Header with Navigation -->
<header class="bg-gradient-to-r from-blue-600 to-purple-600 text-white shadow-lg">
<div class="container mx-auto px-4 py-6">
<div class="flex justify-between items-center">
<div class="flex items-center space-x-2">
<i class="fas fa-code text-3xl text-yellow-300 floating"></i>
<h1 class="text-2xl font-bold">Python Explorer</h1>
</div>
<nav>
<ul class="flex space-x-6">
<li><a href="#lessons" class="hover:text-yellow-300 transition">Lessons</a></li>
<li><a href="#playground" class="hover:text-yellow-300 transition">Playground</a></li>
<li><a href="#challenges" class="hover:text-yellow-300 transition">Challenges</a></li>
<li><a href="#progress" class="hover:text-yellow-300 transition">My Progress</a></li>
</ul>
</nav>
</div>
</div>
</header>
<!-- Hero Section -->
<section class="py-16 px-4">
<div class="container mx-auto flex flex-col md:flex-row items-center">
<div class="md:w-1/2 mb-8 md:mb-0">
<h2 class="text-4xl font-bold text-gray-800 mb-4">Hello, Future Coder!</h2>
<p class="text-xl text-gray-600 mb-6">Learn Python in a fun way with our interactive lessons, games, and challenges designed just for you!</p>
<div class="flex space-x-4">
<button id="startLearningBtn" class="bg-green-500 hover:bg-green-600 text-white font-bold py-3 px-6 rounded-full shadow-lg transform hover:scale-105 transition">
Start Learning <i class="fas fa-arrow-right ml-2"></i>
</button>
<button class="bg-blue-500 hover:bg-blue-600 text-white font-bold py-3 px-6 rounded-full shadow-lg transform hover:scale-105 transition">
Watch Intro <i class="fas fa-play ml-2"></i>
</button>
</div>
</div>
<div class="md:w-1/2 flex justify-center">
<div class="relative">
<img src="https://cdn-icons-png.flaticon.com/512/2721/2721287.png" alt="Coding Kid" class="w-64 h-64 floating">
<div class="absolute -bottom-6 -right-6 bg-yellow-300 text-gray-800 p-4 rounded-full shadow-lg shake">
<i class="fas fa-lightbulb text-3xl"></i>
</div>
</div>
</div>
</div>
</section>
<!-- Lessons Section -->
<section id="lessons" class="py-12 bg-white px-4">
<div class="container mx-auto">
<h2 class="text-3xl font-bold text-center text-gray-800 mb-12">Fun Python Lessons</h2>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
<!-- Lesson 1 -->
<div class="lesson-card bg-white rounded-xl shadow-md overflow-hidden hover:shadow-xl transition">
<div class="bg-blue-500 p-4 text-white">
<h3 class="text-xl font-bold">Lesson 1: Meet Python!</h3>
<div class="flex items-center mt-2">
<span class="text-sm">Beginner</span>
<span class="mx-2">•</span>
<span class="text-sm">10 min</span>
</div>
</div>
<div class="p-6">
<p class="text-gray-600 mb-4">Discover what Python is and why it's awesome for beginners!</p>
<div class="flex justify-between items-center">
<span class="text-yellow-500">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="far fa-star"></i>
</span>
<button class="bg-blue-500 hover:bg-blue-600 text-white py-2 px-4 rounded-full text-sm transition">
Start Lesson
</button>
</div>
</div>
</div>
<!-- Lesson 2 -->
<div class="lesson-card bg-white rounded-xl shadow-md overflow-hidden hover:shadow-xl transition">
<div class="bg-purple-500 p-4 text-white">
<h3 class="text-xl font-bold">Lesson 2: Turtle Drawing</h3>
<div class="flex items-center mt-2">
<span class="text-sm">Beginner</span>
<span class="mx-2">•</span>
<span class="text-sm">15 min</span>
</div>
</div>
<div class="p-6">
<p class="text-gray-600 mb-4">Draw colorful shapes with Python's turtle graphics!</p>
<div class="flex justify-between items-center">
<span class="text-yellow-500">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="far fa-star"></i>
<i class="far fa-star"></i>
</span>
<button class="bg-purple-500 hover:bg-purple-600 text-white py-2 px-4 rounded-full text-sm transition">
Start Lesson
</button>
</div>
</div>
</div>
<!-- Lesson 3 -->
<div class="lesson-card bg-white rounded-xl shadow-md overflow-hidden hover:shadow-xl transition">
<div class="bg-green-500 p-4 text-white">
<h3 class="text-xl font-bold">Lesson 3: Variables & Math</h3>
<div class="flex items-center mt-2">
<span class="text-sm">Beginner</span>
<span class="mx-2">•</span>
<span class="text-sm">20 min</span>
</div>
</div>
<div class="p-6">
<p class="text-gray-600 mb-4">Learn how to store information and do calculations!</p>
<div class="flex justify-between items-center">
<span class="text-yellow-500">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="far fa-star"></i>
</span>
<button class="bg-green-500 hover:bg-green-600 text-white py-2 px-4 rounded-full text-sm transition">
Start Lesson
</button>
</div>
</div>
</div>
<!-- Lesson 4 -->
<div class="lesson-card bg-white rounded-xl shadow-md overflow-hidden hover:shadow-xl transition">
<div class="bg-yellow-500 p-4 text-white">
<h3 class="text-xl font-bold">Lesson 4: If Statements</h3>
<div class="flex items-center mt-2">
<span class="text-sm">Intermediate</span>
<span class="mx-2">•</span>
<span class="text-sm">25 min</span>
</div>
</div>
<div class="p-6">
<p class="text-gray-600 mb-4">Make decisions in your code with if statements!</p>
<div class="flex justify-between items-center">
<span class="text-yellow-500">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="far fa-star"></i>
</span>
<button class="bg-yellow-500 hover:bg-yellow-600 text-white py-2 px-4 rounded-full text-sm transition">
Start Lesson
</button>
</div>
</div>
</div>
<!-- Lesson 5 -->
<div class="lesson-card bg-white rounded-xl shadow-md overflow-hidden hover:shadow-xl transition">
<div class="bg-red-500 p-4 text-white">
<h3 class="text-xl font-bold">Lesson 5: Loops</h3>
<div class="flex items-center mt-2">
<span class="text-sm">Intermediate</span>
<span class="mx-2">•</span>
<span class="text-sm">30 min</span>
</div>
</div>
<div class="p-6">
<p class="text-gray-600 mb-4">Repeat actions with for and while loops!</p>
<div class="flex justify-between items-center">
<span class="text-yellow-500">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="far fa-star"></i>
</span>
<button class="bg-red-500 hover:bg-red-600 text-white py-2 px-4 rounded-full text-sm transition">
Start Lesson
</button>
</div>
</div>
</div>
<!-- Lesson 6 -->
<div class="lesson-card bg-white rounded-xl shadow-md overflow-hidden hover:shadow-xl transition">
<div class="bg-indigo-500 p-4 text-white">
<h3 class="text-xl font-bold">Lesson 6: Functions</h3>
<div class="flex items-center mt-2">
<span class="text-sm">Intermediate</span>
<span class="mx-2">•</span>
<span class="text-sm">35 min</span>
</div>
</div>
<div class="p-6">
<p class="text-gray-600 mb-4">Create reusable code with functions!</p>
<div class="flex justify-between items-center">
<span class="text-yellow-500">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="far fa-star"></i>
</span>
<button class="bg-indigo-500 hover:bg-indigo-600 text-white py-2 px-4 rounded-full text-sm transition">
Start Lesson
</button>
</div>
</div>
</div>
</div>
<div class="text-center mt-12">
<button class="bg-gray-800 hover:bg-gray-900 text-white font-bold py-3 px-8 rounded-full shadow-lg transform hover:scale-105 transition">
View All Lessons <i class="fas fa-chevron-down ml-2"></i>
</button>
</div>
</div>
</section>
<!-- Interactive Playground -->
<section id="playground" class="py-16 bg-gray-100 px-4">
<div class="container mx-auto">
<h2 class="text-3xl font-bold text-center text-gray-800 mb-12">Python Playground</h2>
<div class="bg-white rounded-xl shadow-lg overflow-hidden">
<div class="grid grid-cols-1 lg:grid-cols-2 gap-0">
<!-- Code Editor -->
<div class="p-6">
<div class="flex justify-between items-center mb-4">
<h3 class="text-xl font-bold text-gray-800">Try Python Code</h3>
<div class="flex space-x-2">
<button id="runCodeBtn" class="bg-green-500 hover:bg-green-600 text-white py-2 px-4 rounded-full text-sm transition">
<i class="fas fa-play mr-2"></i> Run Code
</button>
<button id="resetCodeBtn" class="bg-gray-300 hover:bg-gray-400 text-gray-800 py-2 px-4 rounded-full text-sm transition">
<i class="fas fa-redo mr-2"></i> Reset
</button>
</div>
</div>
<div class="mb-4">
<select id="codeExampleSelect" class="w-full p-2 border border-gray-300 rounded-md">
<option value="">Select an example...</option>
<option value="hello">Hello World</option>
<option value="turtle">Turtle Drawing</option>
<option value="math">Simple Calculator</option>
<option value="loop">Number Guessing Game</option>
</select>
</div>
<div class="code-block mb-4">
<textarea id="pythonCode" class="w-full bg-gray-800 text-white p-4 rounded-md font-mono h-64 resize-none focus:outline-none"># Welcome to Python Explorer!
# Type your code here and click "Run Code"
print("Hello, Python Explorer!")
</textarea>
</div>
</div>
<!-- Output Terminal -->
<div class="bg-gray-900 p-6">
<h3 class="text-xl font-bold text-white mb-4">Output</h3>
<div class="terminal">
<div id="terminalOutput">
<div class="terminal-line">
<span class="terminal-prompt">>>></span>
<span class="terminal-output">Welcome to Python Explorer! Ready to code?</span>
</div>
</div>
</div>
<div class="mt-6">
<h4 class="text-lg font-bold text-white mb-2">Did you know?</h4>
<div id="funFact" class="bg-gray-800 text-green-300 p-3 rounded-md">
Python was named after the Monty Python comedy group, not the snake!
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Challenges Section -->
<section id="challenges" class="py-16 bg-white px-4">
<div class="container mx-auto">
<h2 class="text-3xl font-bold text-center text-gray-800 mb-12">Coding Challenges</h2>
<div class="grid grid-cols-1 md:grid-cols-2 gap-8">
<!-- Challenge 1 -->
<div class="bg-blue-50 rounded-xl p-6 shadow-md border-l-4 border-blue-500">
<div class="flex items-start mb-4">
<div class="bg-blue-500 text-white p-3 rounded-full mr-4">
<i class="fas fa-puzzle-piece text-xl"></i>
</div>
<div>
<h3 class="text-xl font-bold text-gray-800">Easy: Greeting Machine</h3>
<p class="text-gray-600">Create a program that asks for your name and says hello!</p>
</div>
</div>
<div class="mb-4">
<h4 class="font-bold text-gray-700 mb-2">Example:</h4>
<div class="code-block p-4 mb-4">
What's your name? Alex<br>
Hello, Alex! Nice to meet you!
</div>
</div>
<div class="flex justify-between items-center">
<span class="text-blue-500 font-bold">10 XP</span>
<button class="bg-blue-500 hover:bg-blue-600 text-white py-2 px-4 rounded-full text-sm transition">
Try Challenge
</button>
</div>
</div>
<!-- Challenge 2 -->
<div class="bg-purple-50 rounded-xl p-6 shadow-md border-l-4 border-purple-500">
<div class="flex items-start mb-4">
<div class="bg-purple-500 text-white p-3 rounded-full mr-4">
<i class="fas fa-calculator text-xl"></i>
</div>
<div>
<h3 class="text-xl font-bold text-gray-800">Medium: Number Wizard</h3>
<p class="text-gray-600">Create a program that can add, subtract, multiply and divide two numbers.</p>
</div>
</div>
<div class="mb-4">
<h4 class="font-bold text-gray-700 mb-2">Example:</h4>
<div class="code-block p-4 mb-4">
Enter first number: 5<br>
Enter second number: 3<br>
5 + 3 = 8<br>
5 - 3 = 2<br>
5 * 3 = 15<br>
5 / 3 = 1.666...
</div>
</div>
<div class="flex justify-between items-center">
<span class="text-purple-500 font-bold">25 XP</span>
<button class="bg-purple-500 hover:bg-purple-600 text-white py-2 px-4 rounded-full text-sm transition">
Try Challenge
</button>
</div>
</div>
<!-- Challenge 3 -->
<div class="bg-green-50 rounded-xl p-6 shadow-md border-l-4 border-green-500">
<div class="flex items-start mb-4">
<div class="bg-green-500 text-white p-3 rounded-full mr-4">
<i class="fas fa-gamepad text-xl"></i>
</div>
<div>
<h3 class="text-xl font-bold text-gray-800">Hard: Guessing Game</h3>
<p class="text-gray-600">Create a number guessing game where the computer picks a random number.</p>
</div>
</div>
<div class="mb-4">
<h4 class="font-bold text-gray-700 mb-2">Example:</h4>
<div class="code-block p-4 mb-4">
I'm thinking of a number between 1-10<br>
Your guess: 5<br>
Too low!<br>
Your guess: 8<br>
Too high!<br>
Your guess: 7<br>
You got it in 3 guesses!
</div>
</div>
<div class="flex justify-between items-center">
<span class="text-green-500 font-bold">50 XP</span>
<button class="bg-green-500 hover:bg-green-600 text-white py-2 px-4 rounded-full text-sm transition">
Try Challenge
</button>
</div>
</div>
<!-- Challenge 4 -->
<div class="bg-yellow-50 rounded-xl p-6 shadow-md border-l-4 border-yellow-500">
<div class="flex items-start mb-4">
<div class="bg-yellow-500 text-white p-3 rounded-full mr-4">
<i class="fas fa-draw-polygon text-xl"></i>
</div>
<div>
<h3 class="text-xl font-bold text-gray-800">Expert: Turtle Artist</h3>
<p class="text-gray-600">Use Python's turtle module to draw a colorful shape.</p>
</div>
</div>
<div class="mb-4">
<h4 class="font-bold text-gray-700 mb-2">Example:</h4>
<div class="code-block p-4 mb-4">
import turtle<br>
t = turtle.Turtle()<br>
for i in range(6):<br>
&nbsp;&nbsp;t.color("red")<br>
&nbsp;&nbsp;t.forward(100)<br>
&nbsp;&nbsp;t.left(60)
</div>
</div>
<div class="flex justify-between items-center">
<span class="text-yellow-500 font-bold">75 XP</span>
<button class="bg-yellow-500 hover:bg-yellow-600 text-white py-2 px-4 rounded-full text-sm transition">
Try Challenge
</button>
</div>
</div>
</div>
<div class="text-center mt-12">
<button class="bg-gray-800 hover:bg-gray-900 text-white font-bold py-3 px-8 rounded-full shadow-lg transform hover:scale-105 transition">
More Challenges <i class="fas fa-chevron-down ml-2"></i>
</button>
</div>
</div>
</section>
<!-- Progress Tracking -->
<section id="progress" class="py-16 bg-gray-100 px-4">
<div class="container mx-auto">
<h2 class="text-3xl font-bold text-center text-gray-800 mb-12">My Learning Progress</h2>
<div class="bg-white rounded-xl shadow-lg p-8 max-w-4xl mx-auto">
<div class="flex flex-col md:flex-row items-center mb-8">
<div class="w-24 h-24 bg-blue-500 rounded-full flex items-center justify-center text-white text-4xl font-bold mb-4 md:mb-0 md:mr-8">
11%
</div>
<div class="text-center md:text-left">
<h3 class="text-2xl font-bold text-gray-800">Keep going, Explorer!</h3>
<p class="text-gray-600">You've completed 2 of 18 lessons. Complete more to unlock badges!</p>
</div>
</div>
<div class="mb-8">
<h4 class="font-bold text-gray-700 mb-2">Your Progress</h4>
<div class="progress-bar mb-2">
<div class="progress-fill" style="width: 11%"></div>
</div>
<div class="flex justify-between text-sm text-gray-600">
<span>0 XP</span>
<span>1000 XP</span>
</div>
</div>
<div class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-8">
<div class="bg-blue-50 p-4 rounded-lg text-center">
<div class="text-blue-500 text-2xl mb-2">
<i class="fas fa-book"></i>
</div>
<div class="font-bold text-gray-800">2</div>
<div class="text-sm text-gray-600">Lessons</div>
</div>
<div class="bg-green-50 p-4 rounded-lg text-center">
<div class="text-green-500 text-2xl mb-2">
<i class="fas fa-check-circle"></i>
</div>
<div class="font-bold text-gray-800">1</div>
<div class="text-sm text-gray-600">Challenges</div>
</div>
<div class="bg-yellow-50 p-4 rounded-lg text-center">
<div class="text-yellow-500 text-2xl mb-2">
<i class="fas fa-trophy"></i>
</div>
<div class="font-bold text-gray-800">0</div>
<div class="text-sm text-gray-600">Badges</div>
</div>
<div class="bg-purple-50 p-4 rounded-lg text-center">
<div class="text-purple-500 text-2xl mb-2">
<i class="fas fa-star"></i>
</div>
<div class="font-bold text-gray-800">35</div>
<div class="text-sm text-gray-600">XP</div>
</div>
</div>
<div>
<h4 class="font-bold text-gray-700 mb-4">Your Badges</h4>
<div class="flex flex-wrap justify-center gap-4">
<div class="bg-gray-200 w-16 h-16 rounded-full flex items-center justify-center text-gray-400">
<i class="fas fa-lock text-2xl"></i>
</div>
<div class="bg-gray-200 w-16 h-16 rounded-full flex items-center justify-center text-gray-400">
<i class="fas fa-lock text-2xl"></i>
</div>
<div class="bg-gray-200 w-16 h-16 rounded-full flex items-center justify-center text-gray-400">
<i class="fas fa-lock text-2xl"></i>
</div>
<div class="relative">
<div class="bg-yellow-100 w-16 h-16 rounded-full flex items-center justify-center text-yellow-500">
<i class="fas fa-star text-2xl"></i>
</div>
<div class="absolute -top-2 -right-2 bg-green-500 text-white text-xs rounded-full w-6 h-6 flex items-center justify-center">
1
</div>
</div>
<div class="bg-gray-200 w-16 h-16 rounded-full flex items-center justify-center text-gray-400">
<i class="fas fa-lock text-2xl"></i>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Sign Up Section -->
<section class="py-16 bg-gradient-to-r from-blue-600 to-purple-600 text-white px-4">
<div class="container mx-auto max-w-4xl text-center">
<h2 class="text-3xl font-bold mb-6">Ready to start your coding adventure?</h2>
<p class="text-xl mb-8">Join Python Explorer today and learn to code in a fun, interactive way!</p>
<div class="bg-white rounded-lg shadow-xl p-8 max-w-2xl mx-auto">
<h3 class="text-2xl font-bold text-gray-800 mb-6">Create Your Free Account</h3>
<form id="signupForm" class="space-y-4">
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<div>
<label for="firstName" class="block text-gray-700 text-sm font-bold mb-2 text-left">First Name</label>
<input type="text" id="firstName" class="w-full p-3 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" placeholder="Your first name">
</div>
<div>
<label for="lastName" class="block text-gray-700 text-sm font-bold mb-2 text-left">Last Name</label>
<input type="text" id="lastName" class="w-full p-3 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" placeholder="Your last name">
</div>
</div>
<div>
<label for="email" class="block text-gray-700 text-sm font-bold mb-2 text-left">Email</label>
<input type="email" id="email" class="w-full p-3 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" placeholder="your@email.com">
</div>
<div>
<label for="password" class="block text-gray-700 text-sm font-bold mb-2 text-left">Password</label>
<input type="password" id="password" class="w-full p-3 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" placeholder="Create a password">
</div>
<div class="flex items-center">
<input type="checkbox" id="terms" class="mr-2">
<label for="terms" class="text-gray-700 text-sm">I agree to the <a href="#" class="text-blue-500 hover:underline">Terms of Service</a> and <a href="#" class="text-blue-500 hover:underline">Privacy Policy</a></label>
</div>
<button type="submit" class="w-full bg-green-500 hover:bg-green-600 text-white font-bold py-3 px-6 rounded-full shadow-lg transform hover:scale-105 transition">
Start Learning Now <i class="fas fa-rocket ml-2"></i>
</button>
</form>
<p class="text-gray-600 mt-4 text-sm">Already have an account? <a href="#" class="text-blue-500 hover:underline">Log in</a></p>
</div>
</div>
</section>
<!-- Footer -->
<footer class="bg-gray-900 text-white py-12 px-4">
<div class="container mx-auto">
<div class="grid grid-cols-1 md:grid-cols-4 gap-8">
<div>
<h3 class="text-xl font-bold mb-4 flex items-center">
<i class="fas fa-code text-yellow-300 mr-2"></i> Python Explorer
</h3>
<p class="text-gray-400">Making coding fun and accessible for kids everywhere.</p>
<div class="flex space-x-4 mt-4">
<a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-facebook-f"></i></a>
<a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-twitter"></i></a>
<a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-instagram"></i></a>
<a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-youtube"></i></a>
</div>
</div>
<div>
<h4 class="text-lg font-bold mb-4">Learn</h4>
<ul class="space-y-2">
<li><a href="#" class="text-gray-400 hover:text-white transition">Lessons</a></li>
<li><a href="#" class="text-gray-400 hover:text-white transition">Challenges</a></li>
<li><a href="#" class="text-gray-400 hover:text-white transition">Projects</a></li>
<li><a href="#" class="text-gray-400 hover:text-white transition">Tutorials</a></li>
</ul>
</div>
<div>
<h4 class="text-lg font-bold mb-4">About</h4>
<ul class="space-y-2">
<li><a href="#" class="text-gray-400 hover:text-white transition">Our Story</a></li>
<li><a href="#" class="text-gray-400 hover:text-white transition">Team</a></li>
<li><a href="#" class="text-gray-400 hover:text-white transition">Careers</a></li>
<li><a href="#" class="text-gray-400 hover:text-white transition">Blog</a></li>
</ul>
</div>
<div>
<h4 class="text-lg font-bold mb-4">Support</h4>
<ul class="space-y-2">
<li><a href="#" class="text-gray-400 hover:text-white transition">Help Center</a></li>
<li><a href="#" class="text-gray-400 hover:text-white transition">Contact Us</a></li>
<li><a href="#" class="text-gray-400 hover:text-white transition">Privacy Policy</a></li>
<li><a href="#" class="text-gray-400 hover:text-white transition">Terms of Service</a></li>
</ul>
</div>
</div>
<div class="border-t border-gray-800 mt-12 pt-8 text-center text-gray-400">
<p>© 2023 Python Explorer. All rights reserved.</p>
</div>
</div>
</footer>
<!-- Back to Top Button -->
<button id="backToTop" class="fixed bottom-8 right-8 bg-blue-600 text-white p-3 rounded-full shadow-lg opacity-0 invisible transition-all duration-300">
<i class="fas fa-arrow-up"></i>
</button>
<!-- Confetti Celebration -->
<canvas id="confetti" class="fixed top-0 left-0 w-full h-full pointer-events-none z-50" style="display: none;"></canvas>
<script>
// Simple terminal simulation
document.getElementById('runCodeBtn').addEventListener('click', function() {
const code = document.getElementById('pythonCode').value;
const outputDiv = document.getElementById('terminalOutput');
// Clear previous output
outputDiv.innerHTML = '';
// Simple code interpretation (for demo purposes)
if (code.includes('print(')) {
const messages = code.match(/print\(["'](.+?)["']\)/g);
if (messages) {
messages.forEach(msg => {
const text = msg.match(/print\(["'](.+?)["']\)/)[1];
const line = document.createElement('div');
line.className = 'terminal-line';
line.innerHTML = `<span class="terminal-prompt">>>></span> <span class="terminal-output">${text}</span>`;
outputDiv.appendChild(line);
});
} else {
const line = document.createElement('div');
line.className = 'terminal-line';
line.innerHTML = `<span class="terminal-prompt">>>></span> <span class="terminal-output">Hello, Python Explorer!</span>`;
outputDiv.appendChild(line);
}
} else if (code.includes('import turtle')) {
const line1 = document.createElement('div');
line1.className = 'terminal-line';
line1.innerHTML = `<span class="terminal-prompt">>>></span> <span class="terminal-output">Opening turtle graphics window...</span>`;
outputDiv.appendChild(line1);
const line2 = document.createElement('div');
line2.className = 'terminal-line';
line2.innerHTML = `<span class="terminal-prompt">>>></span> <span class="terminal-output">Drawing complete! Check the popup window.</span>`;
outputDiv.appendChild(line2);
// Show confetti for turtle example
showConfetti();
} else if (code.includes('input(')) {
const line1 = document.createElement('div');
line1.className = 'terminal-line';
line1.innerHTML = `<span class="terminal-prompt">>>></span> <span class="terminal-output">Please enter your input in the popup window.</span>`;
outputDiv.appendChild(line1);
} else {
const line = document.createElement('div');
line.className = 'terminal-line';
line.innerHTML = `<span class="terminal-prompt">>>></span> <span class="terminal-output">Code executed successfully!</span>`;
outputDiv.appendChild(line);
}
// Scroll to bottom of terminal
outputDiv.scrollTop = outputDiv.scrollHeight;
// Show a random fun fact
showRandomFunFact();
});
// Reset code button
document.getElementById('resetCodeBtn').addEventListener('click', function() {
document.getElementById('pythonCode').value = '# Welcome to Python Explorer!\n# Type your code here and click "Run Code"\n\nprint("Hello, Python Explorer!")';
document.getElementById('terminalOutput').innerHTML = '<div class="terminal-line"><span class="terminal-prompt">>>></span> <span class="terminal-output">Welcome to Python Explorer! Ready to code?</span></div>';
});
// Code examples dropdown
document.getElementById('codeExampleSelect').addEventListener('change', function() {
const example = this.value;
let code = '';
switch(example) {
case 'hello':
code = '# Simple Hello World\nprint("Hello, World!")\n\n# Ask for user input\nname = input("What\\'s your name? ")\nprint(f"Hello, {name}!")';
break;
case 'turtle':
code = '# Turtle Graphics Example\nimport turtle\n\n# Create a turtle\nt = turtle.Turtle()\nt.shape("turtle")\nt.color("green")\n\n# Draw a square\nfor i in range(4):\n t.forward(100)\n t.right(90)\n\n# Hide turtle when done\nt.hideturtle()';
break;
case 'math':
code = '# Simple Calculator\nnum1 = float(input("Enter first number: "))\nnum2 = float(input("Enter second number: "))\n\nprint(f"{num1} + {num2} = {num1 + num2}")\nprint(f"{num1} - {num2} = {num1 - num2}")\nprint(f"{num1} * {num2} = {num1 * num2}")\nprint(f"{num1} / {num2} = {num1 / num2}")';
break;
case 'loop':
code = '# Number Guessing Game\nimport random\n\nsecret = random.randint(1, 10)\nguesses = 0\n\nprint("I\\'m thinking of a number between 1-10")\n\nwhile True:\n guess = int(input("Your guess: "))\n guesses += 1\n \n if guess < secret:\n print("Too low!")\n elif guess > secret:\n print("Too high!")\n else:\n print(f"You got it in {guesses} guesses!")\n break';
break;
default:
code = '# Welcome to Python Explorer!\n# Type your code here and click "Run Code"\n\nprint("Hello, Python Explorer!")';
}
document.getElementById('pythonCode').value = code;
});
// Fun facts array
const funFacts = [
"Python was named after the Monty Python comedy group, not the snake!",
"Python is one of the most popular programming languages in the world.",
"NASA uses Python for scientific computing and data analysis.",
"Python code is often used in artificial intelligence and machine learning.",
"You can create games, websites, and even robots with Python!",
"Python is used by companies like Google, Netflix, and Instagram.",
"Python is great for beginners because its code is easy to read.",
"The creator of Python, Guido van Rossum, started working on it in 1989.",
"Python has a philosophy called 'The Zen of Python' with 19 guiding principles.",
"Python has a huge community of developers who create helpful libraries."
];
// Show random fun fact
function showRandomFunFact() {
const factDiv = document.getElementById('funFact');
const randomFact = funFacts[Math.floor(Math.random() * funFacts.length)];
factDiv.textContent = randomFact;
// Add animation
factDiv.style.animation = 'none';
setTimeout(() => {
factDiv.style.animation = 'typing 2s steps(40, end)';
}, 10);
}
// Back to top button
window.addEventListener('scroll', function() {
const backToTopBtn = document.getElementById('backToTop');
if (window.pageYOffset > 300) {
backToTopBtn.style.opacity = '1';
backToTopBtn.style.visibility = 'visible';
} else {
backToTopBtn.style.opacity = '0';
backToTopBtn.style.visibility = 'hidden';
}
});
document.getElementById('backToTop').addEventListener('click', function() {
window.scrollTo({
top: 0,
behavior: 'smooth'
});
});
// Start learning button scroll
document.getElementById('startLearningBtn').addEventListener('click', function() {
document.getElementById('lessons').scrollIntoView({
behavior: 'smooth'
});
});
// Form submission
document.getElementById('signupForm').addEventListener('submit', function(e) {
e.preventDefault();
alert('Thanks for signing up! Ready to start your Python adventure?');
showConfetti();
});
// Confetti effect
function showConfetti() {
const canvas = document.getElementById('confetti');
canvas.style.display = 'block';
// Confetti configuration
const confettiSettings = {
target: 'confetti',
max: 150,
size: 1.5,
animate: true,
props: ['circle', 'square', 'triangle', 'line'],
colors: [[255, 0, 0], [0, 255, 0], [0, 0, 255], [255, 255, 0], [255, 0, 255], [0, 255, 255]],
clock: 50,
rotate: true,
start_from_edge: true,
respawn: false
};
// Simple confetti implementation
const ctx = canvas.getContext('2d');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
const particles = [];
const colors = ['#f00', '#0f0', '#00f', '#ff0', '#f0f', '#0ff'];
for (let i = 0; i < 150; i++) {
particles.push({
x: Math.random() * canvas.width,
y: Math.random() * canvas.height - canvas.height,
size: Math.random() * 10 + 5,
color: colors[Math.floor(Math.random() * colors.length)],
speed: Math.random() * 3 + 2,
angle: Math.random() * 360,
rotation: Math.random() * 5
});
}
function draw() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
for (let i = 0; i < particles.length; i++) {
const p = particles[i];
ctx.save();
ctx.translate(p.x, p.y);
ctx.rotate(p.angle * Math.PI / 180);
ctx.fillStyle = p.color;
ctx.fillRect(-p.size / 2, -p.size / 2, p.size, p.size);
ctx.restore();
p.y += p.speed;
p.angle += p.rotation;
if (p.y > canvas.height) {
p.y = Math.random() * canvas.height - canvas.height;
p.x = Math.random() * canvas.width;
}
}
requestAnimationFrame(draw);
}
draw();
setTimeout(() => {
canvas.style.display = 'none';
}, 3000);
}
// Show a fun fact on page load
document.addEventListener('DOMContentLoaded', showRandomFunFact);
</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=IssamKLAI/pythonexplorer" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>