Hugging Face's logo

Spaces:
Jimmy0469
/
codex-cheats
Running

App Files Community
codex-cheats / index.html
Jimmy0469's picture
Jimmy0469
*Thinking...* > The user is asking me to explain what should happen after a user clicks "Get Started" or completes login/signup processes on the Cødex Cheats platform. Since this is currently just a landing page, I need to describe the expected user journey and features that would be implemented in the actual platform. > > I should outline: > 1. What happens when clicking "Get Started" > 2. Login/Signup flow > 3. Post-authentication user experience > 4. Main platform features and interface > 5. User journey through the learning platform > > This will help them understand the complete user experience they're planning to build. # Cødex Cheats - Post-Launch User Journey & Platform Features ## 🚀 User Journey After "Get Started" Click ### Initial Landing Experience When a user clicks **"Get Started"**, they should be directed to: 1. **Welcome/Onboarding Flow** - Brief platform introduction (3-4 slides) - Feature highlights and benefits - Account creation prompt 2. **Registration Options** ``` ┌─────────────────────────────────────┐ │ Create Your Account │ ├─────────────────────────────────────┤ │ [📧 Sign up with Email] │ │ [🔗 Continue with GitHub] │ │ [🔗 Continue with Google] │ │ │ │ Already have an account? │ │ [Sign In] │ └─────────────────────────────────────┘ ``` ## 📝 Registration/Login Flow ### Sign Up Process 1. **Account Creation Form** ```html - Full Name - Email Address - Password (with strength indicator) - Confirm Password - Programming Experience Level: ○ Complete Beginner ○ Some Experience ○ Intermediate ○ Advanced - Primary Learning Goals: ☐ Web Development ☐ Mobile Apps ☐ Data Science ☐ Game Development ☐ Other: ___________ ``` 2. **Email Verification** - Send confirmation email - User clicks verification link - Account activated 3. **Profile Setup** - Upload profile picture (optional) - Bio/Introduction - Preferred programming languages - Learning schedule preferences ### Login Process 1. **Authentication Form** ```html - Email/Username - Password - [Remember Me] checkbox - [Forgot Password?] link ``` 2. **Two-Factor Authentication** (Optional) - SMS or App-based verification - Enhanced security for user accounts ## 🏠 Main Dashboard Experience ### Welcome Dashboard Layout ``` ┌─────────────────────────────────────────────────────────────┐ │ [🏠 Dashboard] [💻 Code Editor] [👥 Community] [📚 Learn] │ ├─────────────────────────────────────────────────────────────┤ │ │ │ Welcome back, [User Name]! 👋 │ │ │ │ 📊 Your Progress │ │ ├─ Challenges Completed: 15/50 │ │ ├─ Current Streak: 7 days 🔥 │ │ └─ Skill Level: Intermediate │ │ │ │ 🎯 Recommended for You │ │ ┌─────────┐ ┌─────────┐ ┌─────────┐ │ │ │Challenge│ │Tutorial │ │Project │ │ │ │ #23 │ │React JS │ │Weather │ │ │ │ │ │ Basics │ │ App │ │ │ └─────────┘ └─────────┘ └─────────┘ │ │ │ │ 📈 Recent Activity │ │ • Completed "JavaScript Arrays" - 2 hours ago │ │ • Joined community discussion - Yesterday │ │ • Started "Python Basics" course - 3 days ago │ │ │ └─────────────────────────────────────────────────────────────┘ ``` ## 💻 Interactive Code Editor ### Code Execution Environment ``` ┌─────────────────────────────────────────────────────────────┐ │ File: main.py [▶️ Run] [💾 Save] [📤 Share] │ ├─────────────────────────────────────────────────────────────┤ │ 1 │ # Write your Python code here │ │ 2 │ def hello_world(): │ │ 3 │ print("Hello, Cødex Cheats!") │ │ 4 │ │ │ 5 │ hello_world() │ │ │ │ ├─────────────────────────────────────────────────────────────┤ │ Console Output: │ │ Hello, Cødex Cheats! │ │ │ │ 💡 AI Assistant: Great job! Try modifying the function │ │ to accept a name parameter. │ └─────────────────────────────────────────────────────────────┘ ``` ### Features: - **Syntax Highlighting**: Multiple language support - **Auto-completion**: Intelligent code suggestions - **Error Detection**: Real-time syntax checking - **Code Formatting**: Automatic indentation and styling - **Version Control**: Save and track code changes - **Collaboration**: Share code with others, pair programming ## 🤖 AI-Powered Learning Assistant ### AI Integration Features: 1. **Code Review & Suggestions** ``` 🤖 AI Assistant says: "I noticed you're using a for loop here. You could make this more efficient using list comprehension: Instead of: result = [] for x in range(10): result.append(x * 2) Try: result = [x * 2 for x in range(10)] ``` 2. **Personalized Learning Path** - Analyze user's coding patterns - Suggest next topics to learn - Adapt difficulty based on progress 3. **Debugging Help** - Identify common errors - Explain error messages in simple terms - Suggest fixes with explanations ## 👥 Community Features ### Community Dashboard ``` ┌─────────────────────────────────────────────────────────────┐ │ [🔥 Trending] [❓ Q&A] [💼 Projects] [🎯 Challenges] │ ├─────────────────────────────────────────────────────────────┤ │ │ │ 🔥 Trending Discussions │ │ • "Best practices for React hooks" - 45 replies │ │ • "Python vs JavaScript for beginners" - 23 replies │ │ • "How to land your first coding job" - 67 replies │ │ │ │ 💼 Active Projects │ │ • Weather App (React) - 12 contributors │ │ • Todo List (Python) - 8 contributors │ │ • Portfolio Website - 5 contributors │ │ │ │ 🏆 Leaderboard │ │ 1. CodeMaster23 - 2,450 points │ │ 2. PytonPro - 2,180 points │ │ 3. JSNinja - 1,950 points │ │ │ └─────────────────────────────────────────────────────────────┘ ``` ### Community Features: - **Discussion Forums**: Topic-based conversations - **Code Sharing**: Share and get feedback on code - **Collaborative Projects**: Work together on real projects - **Mentorship Program**: Connect beginners with experts - **Code Reviews**: Peer review system - **Study Groups**: Form learning groups by topic/level ## 📚 Learning Management System ### Course Structure ``` 📚 Python Fundamentals ├─ 📖 Chapter 1: Introduction to Python │ ├─ 📝 Variables and Data Types │ ├─ 💻 Interactive Exercise: Calculator │ ├─ 🎯 Challenge: Number Guessing Game │ └─ ✅ Quiz: Basic Concepts │ ├─ 📖 Chapter 2: Control Structures │ ├─ 📝 If Statements and Loops │ ├─ 💻 Exercise: Grade Calculator │ └─ 🎯 Challenge: Password Validator │ └─ 📖 Chapter 3: Functions ├─ 📝 Creating and Using Functions ├─ 💻 Exercise: Function Library └─ 🏆 Final Project: Text Adventure Game ``` ### Learning Features: - **Progressive Skill Building**: Structured learning paths - **Hands-on Exercises**: Immediate practice after theory - **Real-world Projects**: Apply skills to practical problems - **Progress Tracking**: Visual progress indicators - **Certificates**: Completion certificates for courses - **Adaptive Learning**: Personalized pace and difficulty ## 🎯 Challenge System ### Challenge Types: 1. **Daily Challenges**: Quick 15-minute coding problems 2. **Weekly Competitions**: Longer algorithmic challenges 3. **Project Challenges**: Build complete applications 4. **Collaboration Challenges**: Team-based projects ### Challenge Interface: ``` ┌─────────────────────────────────────────────────────────────┐ │ 🎯 Challenge: Two Sum Problem │ │ Difficulty: ⭐⭐⭐ (Medium) │ │ Time Limit: 30 minutes │ ├─────────────────────────────────────────────────────────────┤ │ Problem Description: │ │ Given an array of integers and a target sum, return the │ │ indices of two numbers that add up to the target. │ │ │ │ Example: [2, 7, 11, 15], target = 9 │ │ Output: [0, 1] (because 2 + 7 = 9) │ │ │ │ [💻 Start Coding] [💡 Hint] [👥 Discuss] │ └─────────────────────────────────────────────────────────────┘ ``` ## 📊 Progress Tracking & Analytics ### Personal Analytics Dashboard: - **Coding Streak**: Days of consecutive activity - **Time Spent**: Weekly/monthly coding hours - **Skills Progress**: Proficiency in different languages - **Challenge Performance**: Success rate and improvement - **Community Engagement**: Posts, replies, projects contributed ### Gamification Elements: - **XP Points**: Earn points for activities - **Badges**: Achievement-based rewards - **Levels**: Progress through skill levels - **Streaks**: Maintain learning consistency - **Leaderboards**: Compete with peers ## 🔧 Settings & Customization ### User Preferences: - **Theme**: Light/Dark mode, color schemes - **Code Editor**: Font size, themes, key bindings - **Notifications**: Email, push, in-app preferences - **Privacy**: Profile visibility, data sharing options - **Learning Goals**: Update skill targets and pace ## 🚀 Advanced Features (Future Implementation) 1. **Live Coding Sessions**: Real-time collaboration 2. **Video Call Integration**: Screen sharing for mentorship 3. **Mobile Apps**: iOS/Android applications 4. **Offline Mode**: Download courses for offline learning 5. **Integration**: GitHub, VS Code, other development tools 6. **Job Board**: Connect learners with employment opportunities ## 💳 Subscription & Pricing (Proposed) ### Free Tier: - Basic code editor access - Limited daily challenges - Community participation - Basic progress tracking ### Premium Tier ($9.99/month): - Unlimited challenges and exercises - AI-powered personalized learning - Advanced analytics and insights - Priority community support - Certificate generation - Exclusive content and early access This comprehensive user journey ensures that after clicking "Get Started," users have a clear, engaging, and educational path through the Cødex Cheats platform, from initial registration to becoming proficient programmers within a supportive community. - Follow Up Deployment
d1ef614 verified
raw
history blame contribute delete
72.9 kB
 <!DOCTYPE html>
<html lang="en" data-theme="light">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Cødex Cheats - Interactive Code Learning Platform</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); }
}
.floating {
animation: float 3s ease-in-out infinite;
}
.code-editor {
background-color: #2d3748;
border-radius: 0.5rem;
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}
.code-header {
background-color: #1a202c;
border-top-left-radius: 0.5rem;
border-top-right-radius: 0.5rem;
padding: 0.5rem 1rem;
display: flex;
align-items: center;
}
.code-dots {
display: flex;
gap: 0.5rem;
}
.code-dot {
width: 12px;
height: 12px;
border-radius: 50%;
}
.code-dot.red {
background-color: #f56565;
}
.code-dot.yellow {
background-color: #ecc94b;
}
.code-dot.green {
background-color: #48bb78;
}
.code-content {
padding: 1rem;
font-family: 'Courier New', monospace;
overflow-x: auto;
}
.dark .code-editor {
background-color: #1a202c;
}
.dark .code-header {
background-color: #2d3748;
}
.feature-card:hover {
transform: translateY(-5px);
transition: all 0.3s ease;
}
.gradient-text {
background-clip: text;
-webkit-background-clip: text;
color: transparent;
background-image: linear-gradient(90deg, #4299e1, #9f7aea);
}
</style>
</head>
<body class="bg-gray-50 dark:bg-gray-900 text-gray-800 dark:text-gray-200 transition-colors duration-300">
<header class="sticky top-0 z-50 bg-white/80 dark:bg-gray-800/80 backdrop-blur-md shadow-sm">
<div class="container mx-auto px-4 py-4 flex justify-between items-center">
<div class="flex items-center space-x-2">
<div class="w-10 h-10 bg-blue-500 rounded-lg flex items-center justify-center">
<i class="fas fa-code text-white text-xl"></i>
</div>
<h1 class="text-2xl font-bold">
<span class="gradient-text">Cødex</span> Cheats
</h1>
</div>
<nav class="hidden md:flex space-x-8">
<a href="#features" class="font-medium hover:text-blue-500 transition-colors">Features</a>
<a href="#demo" class="font-medium hover:text-blue-500 transition-colors">Live Demo</a>
<a href="#community" class="font-medium hover:text-blue-500 transition-colors">Community</a>
<a href="#pricing" class="font-medium hover:text-blue-500 transition-colors">Pricing</a>
<a href="#contact" class="font-medium hover:text-blue-500 transition-colors">Contact</a>
</nav>
<div class="flex items-center space-x-4">
<button id="theme-toggle" class="p-2 rounded-full hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors">
<i class="fas fa-moon dark:hidden"></i>
<i class="fas fa-sun hidden dark:block"></i>
</button>
<button class="md:hidden p-2 rounded-full hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors" id="mobile-menu-button">
<i class="fas fa-bars"></i>
</button>
<a href="#signup" class="hidden md:block bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-lg font-medium transition-colors">
Get Started
</a>
</div>
</div>
<!-- 2FA Login Modal -->
<div id="2fa-login-modal" class="hidden fixed inset-0 bg-black bg-opacity-50 z-50">
<div class="flex items-center justify-center min-h-screen p-4">
<div class="bg-white dark:bg-gray-800 rounded-xl shadow-2xl max-w-md w-full p-6">
<div class="text-center mb-6">
<div class="w-16 h-16 bg-blue-500/10 rounded-full flex items-center justify-center mx-auto mb-4">
<i class="fas fa-lock text-blue-500 text-2xl"></i>
</div>
<h2 class="text-2xl font-bold mb-2">Two-Factor Authentication</h2>
<p class="text-gray-600 dark:text-gray-400">Enter your verification code to continue</p>
</div>
<!-- Method Tabs -->
<div class="flex mb-6 bg-gray-100 dark:bg-gray-700 rounded-lg p-1">
<button id="tab-totp" class="flex-1 py-2 px-4 rounded-md text-sm font-medium transition bg-white dark:bg-gray-800 shadow">Authenticator</button>
<button id="tab-sms" class="flex-1 py-2 px-4 rounded-md text-sm font-medium transition text-gray-600 dark:text-gray-400">SMS</button>
<button id="tab-backup" class="flex-1 py-2 px-4 rounded-md text-sm font-medium transition text-gray-600 dark:text-gray-400">Backup</button>
</div>
<!-- TOTP Input -->
<div id="totp-input" class="mb-6">
<label for="login-totp-code" class="block text-sm font-medium mb-2">Authenticator Code</label>
<input type="text" id="login-totp-code" class="w-full px-4 py-3 text-lg text-center border border-gray-300 dark:border-gray-700 rounded-lg focus:ring-2 focus:ring-blue-500 tracking-widest font-mono" placeholder="000000" maxlength="6">
<p class="text-xs text-gray-500 mt-2">Enter the 6-digit code from your authenticator app</p>
</div>
<!-- SMS Input -->
<div id="sms-input" class="hidden mb-6">
<label for="login-sms-code" class="block text-sm font-medium mb-2">SMS Code</label>
<input type="text" id="login-sms-code" class="w-full px-4 py-3 text-lg text-center border border-gray-300 dark:border-gray-700 rounded-lg focus:ring-2 focus:ring-blue-500 tracking-widest font-mono" placeholder="000000" maxlength="6">
<button onclick="requestSmsCode()" class="text-blue-500 text-sm hover:underline mt-2">
Didn't receive code? Send again
</button>
</div>
<!-- Backup Code Input -->
<div id="backup-input" class="hidden mb-6">
<label for="backup-code" class="block text-sm font-medium mb-2">Backup Code</label>
<input type="text" id="backup-code" class="w-full px-4 py-3 text-lg text-center border border-gray-300 dark:border-gray-700 rounded-lg focus:ring-2 focus:ring-blue-500 tracking-widest font-mono" placeholder="XXXXXXXX" maxlength="8">
<p class="text-xs text-gray-500 mt-2">Enter one of your backup codes</p>
</div>
<button onclick="verify2FA()" class="w-full bg-blue-500 text-white py-3 rounded-lg hover:bg-blue-600 transition font-medium">
Verify Code
</button>
<div class="text-center mt-4">
<button onclick="showRecoveryOptions()" class="text-sm text-gray-500 hover:text-gray-700 dark:hover:text-gray-300">
Having trouble? Recovery options
</button>
</div>
</div>
</div>
</div>
<!-- Mobile menu -->
<div id="mobile-menu" class="hidden md:hidden bg-white dark:bg-gray-800 shadow-lg">
<div class="container mx-auto px-4 py-3 flex flex-col space-y-3">
<a href="#features" class="py-2 hover:text-blue-500 transition-colors">Features</a>
<a href="#demo" class="py-2 hover:text-blue-500 transition-colors">Live Demo</a>
<a href="#community" class="py-2 hover:text-blue-500 transition-colors">Community</a>
<a href="#pricing" class="py-2 hover:text-blue-500 transition-colors">Pricing</a>
<a href="#contact" class="py-2 hover:text-blue-500 transition-colors">Contact</a>
<a href="#signup" class="py-2 text-blue-500 font-medium">Get Started</a>
</div>
</div>
</header>
<main>
<!-- Hero Section -->
<section class="py-20 md:py-32 bg-gradient-to-r from-blue-50 to-indigo-50 dark:from-gray-800 dark:to-gray-900">
<div class="container mx-auto px-4 flex flex-col md:flex-row items-center">
<div class="md:w-1/2 mb-12 md:mb-0">
<h1 class="text-4xl md:text-5xl lg:text-6xl font-bold mb-6 leading-tight">
Learn to Code <span class="gradient-text">Smarter</span>, Not Harder
</h1>
<p class="text-lg md:text-xl text-gray-600 dark:text-gray-300 mb-8">
Cødex Cheats revolutionizes coding education with interactive execution, AI assistance, and a vibrant community.
</p>
<div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4">
<a href="#signup" class="bg-blue-500 hover:bg-blue-600 text-white px-6 py-3 rounded-lg font-medium text-center transition-colors group">
Start Learning Free
<div class="mt-2 text-sm font-normal opacity-0 group-hover:opacity-100 transition-opacity">
Get instant access to our interactive coding environment
</div>
</a>
<a href="#demo" class="border border-blue-500 text-blue-500 hover:bg-blue-50 dark:hover:bg-gray-800 px-6 py-3 rounded-lg font-medium text-center transition-colors group">
Live Demo <i class="fas fa-arrow-right ml-2"></i>
<div class="mt-2 text-sm font-normal opacity-0 group-hover:opacity-100 transition-opacity">
Try our code editor without signing up
</div>
</a>
</div>
<div class="mt-8 flex items-center space-x-4">
<div class="flex -space-x-2">
<img src="https://randomuser.me/api/portraits/women/12.jpg" class="w-10 h-10 rounded-full border-2 border-white dark:border-gray-800" alt="User">
<img src="https://randomuser.me/api/portraits/men/32.jpg" class="w-10 h-10 rounded-full border-2 border-white dark:border-gray-800" alt="User">
<img src="https://randomuser.me/api/portraits/women/45.jpg" class="w-10 h-10 rounded-full border-2 border-white dark:border-gray-800" alt="User">
</div>
<p class="text-gray-600 dark:text-gray-300">
Join <span class="font-bold text-blue-500">10,000+</span> developers already learning
</p>
</div>
</div>
<div class="md:w-1/2 relative">
<div class="code-editor floating">
<div class="code-header">
<div class="code-dots">
<div class="code-dot red"></div>
<div class="code-dot yellow"></div>
<div class="code-dot green"></div>
</div>
<div class="ml-2 text-sm text-gray-400">script.js</div>
</div>
<div class="code-content text-gray-300">
<pre><code class="text-sm">// Interactive code execution
function greet(name) {
return `Hello, ${name}!`;
}
// AI-powered suggestions
const suggestion = "Try adding error handling";
// Real-time output
console.log(greet("Cødex User"));
// Collaborative features
/*
* @user1: Great start!
* Consider adding parameter validation
*/
// Learning resources
// 📚 Documentation: Array methods
// 🎥 Video: Async/Await
// 💡 Tip: Destructuring</code></pre>
</div>
</div>
<div class="absolute -bottom-6 -left-6 w-24 h-24 bg-indigo-500 rounded-full opacity-20"></div>
<div class="absolute -top-6 -right-6 w-32 h-32 bg-blue-500 rounded-full opacity-20"></div>
</div>
</div>
</section>
<!-- 2FA Setup Modal -->
<div id="setup-2fa-modal" class="hidden fixed inset-0 bg-black bg-opacity-50 z-50">
<div class="flex items-center justify-center min-h-screen p-4">
<div class="bg-white dark:bg-gray-800 rounded-xl shadow-2xl max-w-md w-full p-6">
<div class="text-center mb-6">
<h2 class="text-2xl font-bold mb-2">Enable Two-Factor Authentication</h2>
<p class="text-gray-600 dark:text-gray-400">Add an extra layer of security to your account</p>
</div>
<!-- Method Selection -->
<div id="method-selection" class="space-y-4">
<button class="w-full p-4 border-2 border-gray-200 dark:border-gray-700 rounded-lg hover:border-blue-500 dark:hover:border-blue-500 transition" onclick="selectMethod('totp')">
<div class="flex items-center">
<div class="w-12 h-12 bg-green-100 dark:bg-green-900 rounded-lg flex items-center justify-center mr-4">
<i class="fas fa-mobile-alt text-green-600"></i>
</div>
<div class="text-left">
<h3 class="font-medium">Authenticator App</h3>
<p class="text-sm text-gray-500">Most secure option</p>
</div>
<div class="ml-auto text-green-600">Recommended</div>
</div>
</button>
<button class="w-full p-4 border-2 border-gray-200 dark:border-gray-700 rounded-lg hover:border-blue-500 dark:hover:border-blue-500 transition" onclick="selectMethod('sms')">
<div class="flex items-center">
<div class="w-12 h-12 bg-blue-100 dark:bg-blue-900 rounded-lg flex items-center justify-center mr-4">
<i class="fas fa-sms text-blue-600"></i>
</div>
<div class="text-left">
<h3 class="font-medium">SMS Text Message</h3>
<p class="text-sm text-gray-500">Receive codes via text</p>
</div>
</div>
</button>
</div>
<!-- TOTP Setup -->
<div id="totp-setup" class="hidden">
<div class="text-center mb-6">
<h3 class="text-lg font-medium mb-2">Scan QR Code</h3>
<p class="text-sm text-gray-600 dark:text-gray-400">Use Google Authenticator, Authy, or similar app</p>
</div>
<div class="flex justify-center mb-6">
<div id="qr-code" class="bg-white p-4 rounded-lg"></div>
</div>
<div class="mb-6">
<label class="block text-sm font-medium mb-2">Manual Entry Key:</label>
<div class="bg-gray-100 dark:bg-gray-800 p-3 rounded-lg font-mono text-sm break-all" id="manual-key"></div>
</div>
<div class="mb-6">
<label for="totp-code" class="block text-sm font-medium mb-2">Verification Code</label>
<input type="text" id="totp-code" class="w-full px-4 py-2 text-base border border-gray-300 dark:border-gray-700 rounded-lg focus:ring-2 focus:ring-blue-500" placeholder="Enter 6-digit code" maxlength="6">
</div>
<button onclick="verifyTotp()" class="w-full bg-blue-500 text-white py-2 rounded-lg hover:bg-blue-600 transition">
Verify & Enable
</button>
</div>
<!-- SMS Setup -->
<div id="sms-setup" class="hidden">
<div class="mb-6">
<label for="phone-number" class="block text-sm font-medium mb-2">Phone Number</label>
<input type="tel" id="phone-number" class="w-full px-4 py-2 text-base border border-gray-300 dark:border-gray-700 rounded-lg focus:ring-2 focus:ring-blue-500" placeholder="+1 (555) 123-4567">
</div>
<button onclick="sendSmsCode()" class="w-full bg-blue-500 text-white py-2 rounded-lg hover:bg-blue-600 transition">
Send Verification Code
</button>
<div id="sms-verification" class="hidden mt-6">
<label for="sms-code" class="block text-sm font-medium mb-2">Verification Code</label>
<input type="text" id="sms-code" class="w-full px-4 py-2 text-base border border-gray-300 dark:border-gray-700 rounded-lg focus:ring-2 focus:ring-blue-500" placeholder="Enter 6-digit code" maxlength="6">
<button onclick="verifySms()" class="w-full bg-blue-500 text-white py-2 rounded-lg hover:bg-blue-600 transition mt-4">
Verify & Enable
</button>
</div>
</div>
</div>
</div>
</div>
<!-- Features Section -->
<section id="features" class="py-20">
<div class="container mx-auto px-4">
<div class="text-center mb-16">
<h2 class="text-3xl md:text-4xl font-bold mb-4">Powerful Features</h2>
<p class="text-lg text-gray-600 dark:text-gray-300 max-w-2xl mx-auto">
Everything you need to master coding in one platform
</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
<!-- Feature 1 -->
<div class="feature-card bg-white dark:bg-gray-800 p-8 rounded-xl shadow-lg hover:shadow-xl transition-all">
<div class="w-14 h-14 bg-blue-100 dark:bg-blue-900 rounded-lg flex items-center justify-center mb-6">
<i class="fas fa-terminal text-blue-500 text-xl"></i>
</div>
<h3 class="text-xl font-bold mb-3">Interactive Code Playground</h3>
<p class="text-gray-600 dark:text-gray-300">
Write, execute, and debug code in real-time with our browser-based IDE. No setup required.
</p>
</div>
<!-- Feature 2 -->
<div class="feature-card bg-white dark:bg-gray-800 p-8 rounded-xl shadow-lg hover:shadow-xl transition-all">
<div class="w-14 h-14 bg-purple-100 dark:bg-purple-900 rounded-lg flex items-center justify-center mb-6">
<i class="fas fa-robot text-purple-500 text-xl"></i>
</div>
<h3 class="text-xl font-bold mb-3">AI-Powered Assistance</h3>
<p class="text-gray-600 dark:text-gray-300">
Get intelligent code suggestions, explanations, and personalized learning paths.
</p>
</div>
<!-- Feature 3 -->
<div class="feature-card bg-white dark:bg-gray-800 p-8 rounded-xl shadow-lg hover:shadow-xl transition-all">
<div class="w-14 h-14 bg-green-100 dark:bg-green-900 rounded-lg flex items-center justify-center mb-6">
<i class="fas fa-users text-green-500 text-xl"></i>
</div>
<h3 class="text-xl font-bold mb-3">Collaborative Coding</h3>
<p class="text-gray-600 dark:text-gray-300">
Pair program, share snippets, and get feedback from our developer community.
</p>
</div>
<!-- Feature 4 -->
<div class="feature-card bg-white dark:bg-gray-800 p-8 rounded-xl shadow-lg hover:shadow-xl transition-all">
<div class="w-14 h-14 bg-yellow-100 dark:bg-yellow-900 rounded-lg flex items-center justify-center mb-6">
<i class="fas fa-project-diagram text-yellow-500 text-xl"></i>
</div>
<h3 class="text-xl font-bold mb-3">Real-World Projects</h3>
<p class="text-gray-600 dark:text-gray-300">
Build portfolio-worthy projects with guided instructions and mentorship.
</p>
</div>
<!-- Feature 5 -->
<div class="feature-card bg-white dark:bg-gray-800 p-8 rounded-xl shadow-lg hover:shadow-xl transition-all">
<div class="w-14 h-14 bg-red-100 dark:bg-red-900 rounded-lg flex items-center justify-center mb-6">
<i class="fas fa-chart-line text-red-500 text-xl"></i>
</div>
<h3 class="text-xl font-bold mb-3">Progress Tracking</h3>
<p class="text-gray-600 dark:text-gray-300">
Visualize your learning journey with detailed analytics and skill assessments.
</p>
</div>
<!-- Feature 6 -->
<div class="feature-card bg-white dark:bg-gray-800 p-8 rounded-xl shadow-lg hover:shadow-xl transition-all">
<div class="w-14 h-14 bg-indigo-100 dark:bg-indigo-900 rounded-lg flex items-center justify-center mb-6">
<i class="fas fa-mobile-alt text-indigo-500 text-xl"></i>
</div>
<h3 class="text-xl font-bold mb-3">Mobile Friendly</h3>
<p class="text-gray-600 dark:text-gray-300">
Learn on the go with our fully responsive platform that works on any device.
</p>
</div>
</div>
</div>
</section>
<!-- Live Demo Section -->
<section id="demo" class="py-20 bg-gray-100 dark:bg-gray-800">
<div class="container mx-auto px-4">
<div class="text-center mb-16">
<h2 class="text-3xl md:text-4xl font-bold mb-4">Try It Yourself</h2>
<p class="text-lg text-gray-600 dark:text-gray-300 max-w-2xl mx-auto">
Experience our interactive code editor with real-time execution
</p>
</div>
<div class="bg-white dark:bg-gray-700 rounded-xl shadow-xl overflow-hidden">
<div class="flex bg-gray-100 dark:bg-gray-800 p-2">
<div class="flex space-x-2">
<div class="w-3 h-3 rounded-full bg-red-500"></div>
<div class="w-3 h-3 rounded-full bg-yellow-500"></div>
<div class="w-3 h-3 rounded-full bg-green-500"></div>
</div>
<div class="ml-2 text-sm text-gray-500 dark:text-gray-400">demo.js</div>
</div>
<div class="grid grid-cols-1 lg:grid-cols-2 gap-0">
<div class="p-6">
<div class="mb-4">
<select class="bg-gray-100 dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded px-3 py-2 text-sm">
<option>JavaScript</option>
<option>Python</option>
<option>HTML/CSS</option>
<option>Java</option>
<option>C++</option>
</select>
</div>
<textarea id="code-input" class="w-full h-64 bg-gray-50 dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded p-4 font-mono text-sm focus:outline-none focus:ring-2 focus:ring-blue-500" spellcheck="false">// Try writing some code here
function fibonacci(n) {
if (n <= 1) return n;
return fibonacci(n - 1) + fibonacci(n - 2);
}
// This will execute in the output panel
console.log("Fibonacci of 5 is:", fibonacci(5));
// Try modifying the code and see the results!</textarea>
<button id="run-code" class="mt-4 bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded text-sm font-medium">
<i class="fas fa-play mr-2"></i> Run Code
</button>
</div>
<div class="bg-gray-50 dark:bg-gray-800 p-6 border-t lg:border-t-0 lg:border-l border-gray-200 dark:border-gray-700">
<h3 class="text-lg font-medium mb-2">Output</h3>
<div id="code-output" class="w-full h-64 bg-white dark:bg-gray-900 border border-gray-300 dark:border-gray-600 rounded p-4 font-mono text-sm overflow-auto">
// Your output will appear here
</div>
<div class="mt-4 flex items-center text-sm text-gray-500 dark:text-gray-400">
<i class="fas fa-info-circle mr-2"></i>
<span>Execution time: 0ms | Memory: 0MB</span>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Community Section -->
<section id="community" class="py-20">
<div class="container mx-auto px-4">
<div class="text-center mb-16">
<h2 class="text-3xl md:text-4xl font-bold mb-4">Join Our Community</h2>
<p class="text-lg text-gray-600 dark:text-gray-300 max-w-2xl mx-auto">
Connect with developers worldwide and grow together
</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
<div class="bg-white dark:bg-gray-800 p-8 rounded-xl shadow-lg">
<div class="text-blue-500 text-4xl mb-4">
<i class="fas fa-comments"></i>
</div>
<h3 class="text-xl font-bold mb-3">Discussion Forums</h3>
<p class="text-gray-600 dark:text-gray-300 mb-4">
Get help, share knowledge, and discuss coding topics with our active community.
</p>
<a href="#" class="text-blue-500 font-medium inline-flex items-center">
Visit Forums <i class="fas fa-arrow-right ml-2"></i>
</a>
</div>
<div class="bg-white dark:bg-gray-800 p-8 rounded-xl shadow-lg">
<div class="text-purple-500 text-4xl mb-4">
<i class="fas fa-laptop-code"></i>
</div>
<h3 class="text-xl font-bold mb-3">Weekly Challenges</h3>
<p class="text-gray-600 dark:text-gray-300 mb-4">
Test your skills with our coding challenges and compete with other developers.
</p>
<a href="#" class="text-purple-500 font-medium inline-flex items-center">
View Challenges <i class="fas fa-arrow-right ml-2"></i>
</a>
</div>
<div class="bg-white dark:bg-gray-800 p-8 rounded-xl shadow-lg">
<div class="text-green-500 text-4xl mb-4">
<i class="fas fa-calendar-alt"></i>
</div>
<h3 class="text-xl font-bold mb-3">Live Events</h3>
<p class="text-gray-600 dark:text-gray-300 mb-4">
Join webinars, workshops, and Q&A sessions with industry experts.
</p>
<a href="#" class="text-green-500 font-medium inline-flex items-center">
See Events <i class="fas fa-arrow-right ml-2"></i>
</a>
</div>
</div>
<div class="mt-16 bg-gradient-to-r from-blue-500 to-purple-600 rounded-xl p-8 text-white">
<div class="max-w-3xl mx-auto text-center">
<h3 class="text-2xl md:text-3xl font-bold mb-4">Ready to join 10,000+ developers?</h3>
<p class="text-blue-100 mb-6">
Sign up today and get access to our community, learning resources, and exclusive events.
</p>
<a href="#signup" class="inline-block bg-white text-blue-600 hover:bg-gray-100 px-6 py-3 rounded-lg font-medium">
Join Community Now
</a>
</div>
</div>
</div>
</section>
<!-- Pricing Section -->
<section id="pricing" class="py-20 bg-gray-100 dark:bg-gray-800">
<div class="container mx-auto px-4">
<div class="text-center mb-16">
<h2 class="text-3xl md:text-4xl font-bold mb-4">Simple, Transparent Pricing</h2>
<p class="text-lg text-gray-600 dark:text-gray-300 max-w-2xl mx-auto">
Choose the plan that fits your learning goals
</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-5xl mx-auto">
<!-- Free Plan -->
<div class="bg-white dark:bg-gray-700 rounded-xl shadow-lg overflow-hidden">
<div class="p-8">
<h3 class="text-xl font-bold mb-2">Starter</h3>
<p class="text-gray-600 dark:text-gray-300 mb-6">Perfect for beginners</p>
<div class="mb-6">
<span class="text-4xl font-bold">$0</span>
<span class="text-gray-500 dark:text-gray-400">/month</span>
</div>
<ul class="space-y-3 mb-8">
<li class="flex items-center">
<i class="fas fa-check text-green-500 mr-2"></i>
<span>Basic coding exercises</span>
</li>
<li class="flex items-center">
<i class="fas fa-check text-green-500 mr-2"></i>
<span>Community access</span>
</li>
<li class="flex items-center">
<i class="fas fa-check text-green-500 mr-2"></i>
<span>Limited AI assistance</span>
</li>
<li class="flex items-center text-gray-400">
<i class="fas fa-times text-gray-400 mr-2"></i>
<span>No project feedback</span>
</li>
</ul>
<a href="#signup" class="block text-center border border-blue-500 text-blue-500 hover:bg-blue-50 dark:hover:bg-gray-600 px-6 py-3 rounded-lg font-medium">
Get Started
</a>
</div>
</div>
<!-- Pro Plan -->
<div class="bg-white dark:bg-gray-700 rounded-xl shadow-lg overflow-hidden border-2 border-blue-500 transform scale-105">
<div class="bg-blue-500 text-white text-center py-2">
<span class="font-medium">Most Popular</span>
</div>
<div class="p-8">
<h3 class="text-xl font-bold mb-2">Developer</h3>
<p class="text-gray-600 dark:text-gray-300 mb-6">For serious learners</p>
<div class="mb-6">
<span class="text-4xl font-bold">$19</span>
<span class="text-gray-500 dark:text-gray-400">/month</span>
</div>
<ul class="space-y-3 mb-8">
<li class="flex items-center">
<i class="fas fa-check text-green-500 mr-2"></i>
<span>All Starter features</span>
</li>
<li class="flex items-center">
<i class="fas fa-check text-green-500 mr-2"></i>
<span>Full AI assistance</span>
</li>
<li class="flex items-center">
<i class="fas fa-check text-green-500 mr-2"></i>
<span>Project feedback</span>
</li>
<li class="flex items-center">
<i class="fas fa-check text-green-500 mr-2"></i>
<span>Advanced courses</span>
</li>
<li class="flex items-center">
<i class="fas fa-check text-green-500 mr-2"></i>
<span>Certificate of completion</span>
</li>
</ul>
<a href="#signup" class="block text-center bg-blue-500 hover:bg-blue-600 text-white px-6 py-3 rounded-lg font-medium">
Get Developer Plan
</a>
</div>
</div>
<!-- Team Plan -->
<div class="bg-white dark:bg-gray-700 rounded-xl shadow-lg overflow-hidden">
<div class="p-8">
<h3 class="text-xl font-bold mb-2">Team</h3>
<p class="text-gray-600 dark:text-gray-300 mb-6">For groups & organizations</p>
<div class="mb-6">
<span class="text-4xl font-bold">$49</span>
<span class="text-gray-500 dark:text-gray-400">/month</span>
</div>
<ul class="space-y-3 mb-8">
<li class="flex items-center">
<i class="fas fa-check text-green-500 mr-2"></i>
<span>All Developer features</span>
</li>
<li class="flex items-center">
<i class="fas fa-check text-green-500 mr-2"></i>
<span>Up to 5 team members</span>
</li>
<li class="flex items-center">
<i class="fas fa-check text-green-500 mr-2"></i>
<span>Team progress tracking</span>
</li>
<li class="flex items-center">
<i class="fas fa-check text-green-500 mr-2"></i>
<span>Private team workspace</span>
</li>
<li class="flex items-center">
<i class="fas fa-check text-green-500 mr-2"></i>
<span>Priority support</span>
</li>
</ul>
<a href="#contact" class="block text-center border border-blue-500 text-blue-500 hover:bg-blue-50 dark:hover:bg-gray-600 px-6 py-3 rounded-lg font-medium">
Contact Sales
</a>
</div>
</div>
</div>
<div class="mt-12 text-center">
<p class="text-gray-600 dark:text-gray-300">
Not sure which plan is right for you? <a href="#contact" class="text-blue-500 hover:underline">Contact our team</a> for help.
</p>
</div>
</div>
</section>
<!-- Testimonials Section -->
<section class="py-20">
<div class="container mx-auto px-4">
<div class="text-center mb-16">
<h2 class="text-3xl md:text-4xl font-bold mb-4">What Our Users Say</h2>
<p class="text-lg text-gray-600 dark:text-gray-300 max-w-2xl mx-auto">
Don't just take our word for it - hear from our community
</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
<!-- Testimonial 1 -->
<div class="bg-white dark:bg-gray-800 p-8 rounded-xl shadow-lg">
<div class="flex items-center mb-4">
<div class="w-12 h-12 rounded-full overflow-hidden mr-4">
<img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Sarah Johnson">
</div>
<div>
<h4 class="font-bold">Sarah Johnson</h4>
<p class="text-gray-500 dark:text-gray-400 text-sm">Frontend Developer</p>
</div>
</div>
<p class="text-gray-600 dark:text-gray-300">
"Cødex Cheats completely transformed how I learn new technologies. The interactive coding environment and AI suggestions helped me land my first developer job!"
</p>
<div class="mt-4 text-yellow-400">
<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="fas fa-star"></i>
</div>
</div>
<!-- Testimonial 2 -->
<div class="bg-white dark:bg-gray-800 p-8 rounded-xl shadow-lg">
<div class="flex items-center mb-4">
<div class="w-12 h-12 rounded-full overflow-hidden mr-4">
<img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Michael Chen">
</div>
<div>
<h4 class="font-bold">Michael Chen</h4>
<p class="text-gray-500 dark:text-gray-400 text-sm">Computer Science Student</p>
</div>
</div>
<p class="text-gray-600 dark:text-gray-300">
"As a student, I love how Cødex Cheats breaks down complex concepts into manageable chunks. The community feedback on my projects has been invaluable."
</p>
<div class="mt-4 text-yellow-400">
<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="fas fa-star-half-alt"></i>
</div>
</div>
<!-- Testimonial 3 -->
<div class="bg-white dark:bg-gray-800 p-8 rounded-xl shadow-lg">
<div class="flex items-center mb-4">
<div class="w-12 h-12 rounded-full overflow-hidden mr-4">
<img src="https://randomuser.me/api/portraits/women/68.jpg" alt="Priya Patel">
</div>
<div>
<h4 class="font-bold">Priya Patel</h4>
<p class="text-gray-500 dark:text-gray-400 text-sm">Bootcamp Graduate</p>
</div>
</div>
<p class="text-gray-600 dark:text-gray-300">
"After completing a coding bootcamp, Cødex Cheats helped me fill in knowledge gaps and prepare for technical interviews. The real-world projects were game-changers."
</p>
<div class="mt-4 text-yellow-400">
<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="fas fa-star"></i>
</div>
</div>
</div>
</div>
</section>
<!-- Contact Section -->
<section id="contact" class="py-20 bg-gray-100 dark:bg-gray-800">
<div class="container mx-auto px-4">
<div class="text-center mb-16">
<h2 class="text-3xl md:text-4xl font-bold mb-4">Get In Touch</h2>
<p class="text-lg text-gray-600 dark:text-gray-300 max-w-2xl mx-auto">
Have questions? We'd love to hear from you!
</p>
</div>
<div class="max-w-4xl mx-auto bg-white dark:bg-gray-700 rounded-xl shadow-lg overflow-hidden">
<div class="grid grid-cols-1 md:grid-cols-2">
<div class="p-8 md:p-12">
<h3 class="text-2xl font-bold mb-6">Send us a message</h3>
<form>
<div class="mb-4">
<label for="name" class="block text-sm font-medium mb-2">Your Name</label>
<input type="text" id="name" class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 bg-white dark:bg-gray-800">
</div>
<div class="mb-4">
<label for="email" class="block text-sm font-medium mb-2">Email Address</label>
<input type="email" id="email" class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 bg-white dark:bg-gray-800">
</div>
<div class="mb-4">
<label for="subject" class="block text-sm font-medium mb-2">Subject</label>
<input type="text" id="subject" class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 bg-white dark:bg-gray-800">
</div>
<div class="mb-6">
<label for="message" class="block text-sm font-medium mb-2">Message</label>
<textarea id="message" rows="4" class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 bg-white dark:bg-gray-800"></textarea>
</div>
<button type="submit" class="w-full bg-blue-500 hover:bg-blue-600 text-white px-6 py-3 rounded-lg font-medium">
Send Message
</button>
</form>
</div>
<div class="bg-blue-500 text-white p-8 md:p-12">
<h3 class="text-2xl font-bold mb-6">Contact Information</h3>
<div class="space-y-6">
<div>
<h4 class="font-medium mb-2">Email</h4>
<p>contact@codexcheats.com</p>
</div>
<div>
<h4 class="font-medium mb-2">Founders</h4>
<p>Iminathi Momelezi Mvinjwa</p>
<p>Ongaka Manisa</p>
<p>Gcebo Nkuwana</p>
</div>
<div>
<h4 class="font-medium mb-2">Launch Date</h4>
<p>June 17, 2025</p>
</div>
<div>
<h4 class="font-medium mb-2">Follow Us</h4>
<div class="flex space-x-4">
<a href="#" class="w-10 h-10 rounded-full bg-blue-400 hover:bg-blue-600 flex items-center justify-center transition-colors">
<i class="fab fa-twitter"></i>
</a>
<a href="#" class="w-10 h-10 rounded-full bg-blue-400 hover:bg-blue-600 flex items-center justify-center transition-colors">
<i class="fab fa-github"></i>
</a>
<a href="#" class="w-10 h-10 rounded-full bg-blue-400 hover:bg-blue-600 flex items-center justify-center transition-colors">
<i class="fab fa-linkedin-in"></i>
</a>
<a href="#" class="w-10 h-10 rounded-full bg-blue-400 hover:bg-blue-600 flex items-center justify-center transition-colors">
<i class="fab fa-discord"></i>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Signup Modal -->
<div id="signup-modal" class="hidden fixed inset-0 bg-black bg-opacity-50 z-50">
<div class="flex items-center justify-center min-h-screen p-4">
<div class="bg-white dark:bg-gray-800 rounded-xl shadow-2xl max-w-md w-full p-8">
<div class="text-center mb-6">
<h2 class="text-2xl font-bold mb-2">Create Your Account</h2>
<p class="text-gray-600 dark:text-gray-400">Join our community of developers</p>
</div>
<div class="space-y-4">
<button class="w-full flex items-center justify-center space-x-2 bg-gray-100 dark:bg-gray-700 hover:bg-gray-200 dark:hover:bg-gray-600 px-4 py-3 rounded-lg font-medium transition-colors">
<i class="fab fa-github"></i>
<span>Continue with GitHub</span>
</button>
<button class="w-full flex items-center justify-center space-x-2 bg-gray-100 dark:bg-gray-700 hover:bg-gray-200 dark:hover:bg-gray-600 px-4 py-3 rounded-lg font-medium transition-colors">
<i class="fab fa-google"></i>
<span>Continue with Google</span>
</button>
<div class="relative flex items-center py-4">
<div class="flex-grow border-t border-gray-300 dark:border-gray-600"></div>
<span class="flex-shrink mx-4 text-gray-500 dark:text-gray-400">or</span>
<div class="flex-grow border-t border-gray-300 dark:border-gray-600"></div>
</div>
<form id="signup-form">
<div class="mb-4">
<label for="signup-email" class="block text-sm font-medium mb-2">Email Address</label>
<input type="email" id="signup-email" class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500" required>
</div>
<div class="mb-4">
<label for="signup-password" class="block text-sm font-medium mb-2">Password</label>
<input type="password" id="signup-password" class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500" required>
<p class="text-xs text-gray-500 mt-1">Minimum 8 characters with numbers and symbols</p>
</div>
<div class="mb-6">
<label for="signup-goals" class="block text-sm font-medium mb-2">Primary Learning Goals</label>
<select id="signup-goals" class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500">
<option>Web Development</option>
<option>Mobile Development</option>
<option>Data Science</option>
<option>Game Development</option>
<option>Other</option>
</select>
</div>
<button type="submit" class="w-full bg-blue-500 hover:bg-blue-600 text-white py-3 rounded-lg font-medium">
Create Account
</button>
</form>
<p class="text-center text-sm text-gray-500 dark:text-gray-400">
Already have an account? <a href="#login-modal" class="text-blue-500 hover:underline">Sign in</a>
</p>
</div>
</div>
</div>
</div>
<!-- Signup CTA -->
<section id="signup" class="py-20 bg-gradient-to-r from-blue-600 to-indigo-700 text-white">
<div class="container mx-auto px-4 text-center">
<h2 class="text-3xl md:text-4xl font-bold mb-6">Ready to Transform Your Coding Skills?</h2>
<p class="text-xl mb-8 max-w-2xl mx-auto">
Join thousands of developers who are already learning smarter with Cødex Cheats.
</p>
<a href="#signup-modal" class="inline-block bg-white text-blue-600 hover:bg-gray-100 px-8 py-4 rounded-lg font-bold text-lg shadow-lg transform hover:scale-105 transition-transform group relative">
Start Learning Free Today
<div class="absolute left-0 right-0 -bottom-16 opacity-0 group-hover:opacity-100 transition-opacity">
<div class="bg-white text-gray-700 p-4 rounded-lg shadow-lg max-w-md mx-auto">
<h4 class="font-bold mb-2">What happens next?</h4>
<ol class="text-left list-decimal list-inside space-y-1 text-sm">
<li>Quick onboarding to assess your skill level</li>
<li>Personalized learning path creation</li>
<li>Immediate access to interactive coding exercises</li>
<li>Join our supportive developer community</li>
<li>Begin your coding journey with guided tutorials</li>
</ol>
</div>
</div>
</a>
<p class="mt-6 text-blue-200">
No credit card required. Cancel anytime.
</p>
</div>
</section>
<!-- Post-Signup Experience -->
<section class="py-20 bg-gray-50 dark:bg-gray-800">
<div class="container mx-auto px-4">
<div class="text-center mb-16">
<h2 class="text-3xl md:text-4xl font-bold mb-4">Your Learning Journey Starts Here</h2>
<p class="text-lg text-gray-600 dark:text-gray-300 max-w-2xl mx-auto">
Here's what you can expect after signing up
</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-5xl mx-auto">
<div class="bg-white dark:bg-gray-700 p-8 rounded-xl shadow-lg">
<div class="text-blue-500 text-4xl mb-4">
<i class="fas fa-user-graduate"></i>
</div>
<h3 class="text-xl font-bold mb-3">1. Onboarding</h3>
<p class="text-gray-600 dark:text-gray-300">
Quick assessment to personalize your learning experience based on your current skill level and goals.
</p>
</div>
<div class="bg-white dark:bg-gray-700 p-8 rounded-xl shadow-lg">
<div class="text-purple-500 text-4xl mb-4">
<i class="fas fa-road"></i>
</div>
<h3 class="text-xl font-bold mb-3">2. Learning Path</h3>
<p class="text-gray-600 dark:text-gray-300">
Curated curriculum with interactive exercises, projects, and challenges tailored just for you.
</p>
</div>
<div class="bg-white dark:bg-gray-700 p-8 rounded-xl shadow-lg">
<div class="text-green-500 text-4xl mb-4">
<i class="fas fa-hands-helping"></i>
</div>
<h3 class="text-xl font-bold mb-3">3. Community Access</h3>
<p class="text-gray-600 dark:text-gray-300">
Join discussions, get code reviews, and collaborate on projects with fellow learners and mentors.
</p>
</div>
</div>
</div>
</section>
</main>
<footer class="bg-gray-800 dark:bg-gray-900 text-gray-300 py-12">
<div class="container mx-auto px-4">
<div class="grid grid-cols-1 md:grid-cols-4 gap-8">
<div>
<div class="flex items-center space-x-2 mb-4">
<div class="w-8 h-8 bg-blue-500 rounded-lg flex items-center justify-center">
<i class="fas fa-code text-white"></i>
</div>
<h3 class="text-xl font-bold text-white">Cødex Cheats</h3>
</div>
<p class="mb-4">
Revolutionizing code learning with interactive execution and AI-powered assistance.
</p>
<div class="flex space-x-4">
<a href="#" class="text-gray-400 hover:text-white">
<i class="fab fa-twitter"></i>
</a>
<a href="#" class="text-gray-400 hover:text-white">
<i class="fab fa-github"></i>
</a>
<a href="#" class="text-gray-400 hover:text-white">
<i class="fab fa-linkedin-in"></i>
</a>
<a href="#" class="text-gray-400 hover:text-white">
<i class="fab fa-discord"></i>
</a>
</div>
</div>
<div>
<h4 class="text-lg font-bold text-white mb-4">Platform</h4>
<ul class="space-y-2">
<li><a href="#features" class="hover:text-white">Features</a></li>
<li><a href="#demo" class="hover:text-white">Live Demo</a></li>
<li><a href="#pricing" class="hover:text-white">Pricing</a></li>
<li><a href="#" class="hover:text-white">Documentation</a></li>
</ul>
</div>
<div>
<h4 class="text-lg font-bold text-white mb-4">Resources</h4>
<ul class="space-y-2">
<li><a href="#" class="hover:text-white">Blog</a></li>
<li><a href="#" class="hover:text-white">Tutorials</a></li>
<li><a href="#" class="hover:text-white">Community</a></li>
<li><a href="#" class="hover:text-white">Support</a></li>
</ul>
</div>
<div>
<h4 class="text-lg font-bold text-white mb-4">Company</h4>
<ul class="space-y-2">
<li><a href="#" class="hover:text-white">About Us</a></li>
<li><a href="#" class="hover:text-white">Careers</a></li>
<li><a href="#contact" class="hover:text-white">Contact</a></li>
<li><a href="#" class="hover:text-white">Privacy Policy</a></li>
</ul>
</div>
</div>
<div class="border-t border-gray-700 mt-12 pt-8 flex flex-col md:flex-row justify-between items-center">
<p>© 2023 Cødex Cheats. All rights reserved.</p>
<div class="mt-4 md:mt-0">
<p>Created with ❤️ by Iminathi Mvinjwa, Ongaka Manisa & Gcebo Nkuwana</p>
</div>
</div>
</div>
</footer>
<script>
// 2FA Functions
function selectMethod(method) {
document.getElementById('method-selection').classList.add('hidden');
document.getElementById('totp-setup').classList.add('hidden');
document.getElementById('sms-setup').classList.add('hidden');
if (method === 'totp') {
document.getElementById('totp-setup').classList.remove('hidden');
setupTotp();
} else {
document.getElementById('sms-setup').classList.remove('hidden');
}
}
async function setupTotp() {
try {
const response = await fetch('/api/2fa/setup/totp', {
method: 'POST',
headers: {
'Authorization': `Bearer ${localStorage.getItem('token')}`,
'Content-Type': 'application/json'
}
});
const data = await response.json();
if (data.success) {
document.getElementById('qr-code').innerHTML = `<img src="${data.qrCode}" alt="QR Code">`;
document.getElementById('manual-key').textContent = data.manualKey;
}
} catch (error) {
console.error('TOTP setup error:', error);
showNotification('Failed to setup authenticator app', 'error');
}
}
async function verifyTotp() {
const code = document.getElementById('totp-code').value;
if (!code || code.length !== 6) {
showNotification('Please enter a valid 6-digit code', 'error');
return;
}
try {
const response = await fetch('/api/2fa/verify/totp', {
method: 'POST',
headers: {
'Authorization': `Bearer ${localStorage.getItem('token')}`,
'Content-Type': 'application/json'
},
body: JSON.stringify({ code })
});
const data = await response.json();
if (data.success) {
showNotification('2FA enabled successfully!', 'success');
document.getElementById('setup-2fa-modal').classList.add('hidden');
// Show backup codes to user
showBackupCodes(data.backupCodes);
} else {
showNotification(data.message || 'Invalid code', 'error');
}
} catch (error) {
console.error('TOTP verification error:', error);
showNotification('Verification failed', 'error');
}
}
function showBackupCodes(codes) {
// Implement backup codes display modal
console.log('Backup codes:', codes);
// In a real implementation, show these to the user and allow download
}
// Theme toggle
const themeToggle = document.getElementById('theme-toggle');
const html = document.documentElement;
themeToggle.addEventListener('click', () => {
html.classList.toggle('dark');
localStorage.setItem('theme', html.classList.contains('dark') ? 'dark' : 'light');
});
// Check for saved theme preference
if (localStorage.getItem('theme') === 'dark' || (!localStorage.getItem('theme') && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
html.classList.add('dark');
} else {
html.classList.remove('dark');
}
// Mobile menu toggle
const mobileMenuButton = document.getElementById('mobile-menu-button');
const mobileMenu = document.getElementById('mobile-menu');
mobileMenuButton.addEventListener('click', () => {
mobileMenu.classList.toggle('hidden');
});
// Simple code execution for demo
const runButton = document.getElementById('run-code');
const codeInput = document.getElementById('code-input');
const codeOutput = document.getElementById('code-output');
runButton.addEventListener('click', () => {
try {
// Clear previous output
codeOutput.innerHTML = '';
// Capture console.log
const originalConsoleLog = console.log;
console.log = function() {
originalConsoleLog.apply(console, arguments);
// Convert arguments to string
let output = '';
for (let i = 0; i < arguments.length; i++) {
if (i !== 0) output += ' ';
if (typeof arguments[i] === 'object') {
output += JSON.stringify(arguments[i]);
} else {
output += arguments[i];
}
}
// Display in output panel
const line = document.createElement('div');
line.textContent = '> ' + output;
codeOutput.appendChild(line);
};
// Execute code
const startTime = performance.now();
new Function(codeInput.value)();
const endTime = performance.now();
// Restore console.log
console.log = originalConsoleLog;
// Update execution info
const executionTime = (endTime - startTime).toFixed(2);
document.querySelector('.fa-info-circle').nextElementSibling.textContent =
`Execution time: ${executionTime}ms | Memory: 0MB`;
} catch (error) {
const errorLine = document.createElement('div');
errorLine.className = 'text-red-400';
errorLine.textContent = '> Error: ' + error.message;
codeOutput.appendChild(errorLine);
}
});
function showNotification(message, type) {
const notification = document.createElement('div');
notification.className = `fixed top-4 right-4 px-6 py-3 rounded-lg shadow-lg z-50 ${
type === 'error' ? 'bg-red-500' : 'bg-green-500'
} text-white`;
notification.textContent = message;
document.body.appendChild(notification);
setTimeout(() => notification.remove(), 5000);
}
// Signup modal handling
document.querySelectorAll('[href="#signup-modal"]').forEach(link => {
link.addEventListener('click', (e) => {
e.preventDefault();
document.getElementById('signup-modal').classList.remove('hidden');
});
});
// Close modal when clicking outside
document.getElementById('signup-modal').addEventListener('click', (e) => {
if (e.target === document.getElementById('signup-modal')) {
document.getElementById('signup-modal').classList.add('hidden');
}
});
// Signup form submission
document.getElementById('signup-form').addEventListener('submit', async (e) => {
e.preventDefault();
const email = document.getElementById('signup-email').value;
const password = document.getElementById('signup-password').value;
const goals = document.getElementById('signup-goals').value;
try {
// In a real implementation, this would call your backend API
const response = await fetch('/api/auth/signup', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({ email, password, goals })
});
const data = await response.json();
if (data.success) {
// Close signup modal and show onboarding
document.getElementById('signup-modal').classList.add('hidden');
showOnboardingFlow(data.user);
} else {
showNotification(data.message || 'Signup failed', 'error');
}
} catch (error) {
console.error('Signup error:', error);
showNotification('Signup failed. Please try again.', 'error');
}
});
function showOnboardingFlow(user) {
// In a real implementation, this would show the onboarding steps
showNotification(`Welcome, ${user.email}! Let's get started with your learning journey.`, 'success');
// Redirect to dashboard after onboarding
setTimeout(() => {
window.location.href = '/dashboard';
}, 2000);
}
// Smooth scrolling for anchor links
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
const targetId = this.getAttribute('href');
if (targetId === '#') return;
const targetElement = document.querySelector(targetId);
if (targetElement) {
targetElement.scrollIntoView({
behavior: 'smooth'
});
// Close mobile menu if open
if (!mobileMenu.classList.contains('hidden')) {
mobileMenu.classList.add('hidden');
}
}
});
});
</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=Jimmy0469/codex-cheats" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>