EDUrocks/EDUrocks-3.0-frontend-source-code
07
1<!DOCTYPE html>2<html lang="en">3<head>4 <meta charset="UTF-8">5 <meta name="viewport" content="width=device-width, initial-scale=1.0">6 <title>Login - EDUrocks 3.0</title>7 <link rel="icon" href="filestorage/photos/favicon.ico" type="image/x-icon">8 <link href="https://fonts.googleapis.com/css2?family=Pacifico&family=Inter:wght@400;500;600;700;800;900&display=swap" rel="stylesheet">9 <script src="https://js.hcaptcha.com/1/api.js" async defer></script>10 <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>11 <script src="./assets/js/aws-detection.js"></script>12 <script src="./assets/js/ip-restriction.js"></script>13 <style type="text/tailwindcss">14 @theme {15 --color-edu-dark: #011627;16 --color-edu-dark-secondary: #3C1642;17 --color-edu-dark-accent: #58355E;18 --color-edu-text: #e8d5e0;19 --color-edu-text-secondary: #c4a5b8;20 --color-edu-pink: #F4154D;21 --color-edu-pink-light: #FA0F71;22 --color-edu-rose: #FF1F84;23 24 --font-pacifico: 'Pacifico', cursive;25 --font-inter: 'Inter', sans-serif;26 27 --animate-gradient: gradient 6s ease infinite;28 --animate-fade-in: fadeIn 0.5s ease-in-out;29 --animate-slide-down: slideDown 0.4s ease-out;30 --animate-slide-up: slideUp 0.3s ease-out;31 32 @keyframes gradient {33 0%, 100% { background-position: 0% 50% }34 50% { background-position: 100% 50% }35 }36 @keyframes fadeIn {37 0% { opacity: 0; transform: translateY(10px) }38 100% { opacity: 1; transform: translateY(0) }39 }40 @keyframes slideDown {41 0% { opacity: 0; transform: translateY(-20px) }42 100% { opacity: 1; transform: translateY(0) }43 }44 @keyframes slideUp {45 0% { opacity: 0; transform: translateY(20px) }46 100% { opacity: 1; transform: translateY(0) }47 }48 }49 </style>50 <style>51 body {52 font-family: 'Inter', sans-serif;53 }54 .gradient-text {55 background: linear-gradient(45deg, #F4154D, #FA0F71, #e8d5e0, #FA0F71, #F4154D);56 background-size: 200% 200%;57 -webkit-background-clip: text;58 background-clip: text;59 -webkit-text-fill-color: transparent;60 animation: gradient 6s ease infinite;61 }62 .card-hover {63 transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);64 }65 .card-hover:hover {66 transform: translateY(-8px) scale(1.02);67 }68 /* Quote hyperlink styling */69 #quote-text a {70 color: #FA0F71;71 text-decoration: underline;72 transition: color 0.3s ease;73 }74 #quote-text a:hover {75 color: #e8d5e0;76 }77 </style>78</head>79<body class="bg-edu-dark text-edu-text min-h-screen font-inter flex items-center justify-center p-4">80 81 <nav class="bg-edu-dark-accent border-b-2 border-edu-pink/20 fixed top-0 left-0 right-0 z-40">82 <div class="max-w-7xl mx-auto px-4 py-4">83 <div class="flex flex-col md:flex-row items-center justify-between gap-4">84 <a href="index.html" class="font-pacifico text-2xl md:text-3xl gradient-text">EDUrocks 3.0</a>85 <div class="flex flex-wrap gap-2">86 <a href="index.html" class="px-4 py-2 rounded-full text-edu-text-secondary hover:bg-edu-pink hover:text-edu-text transition-all">Home</a>87 <a href="page1.html" class="px-4 py-2 rounded-full text-edu-text-secondary hover:bg-edu-pink hover:text-edu-text transition-all">Gxmes</a>88 <a href="edum/index.html" class="px-4 py-2 rounded-full text-edu-text-secondary hover:bg-edu-pink hover:text-edu-text transition-all">Movies & TV</a>89 <a href="#" id="pr0xy-link" class="px-4 py-2 rounded-full text-edu-text-secondary hover:bg-edu-pink hover:text-edu-text transition-all">Site Unblocker</a>90 <a href="#" id="ai-chat-link" class="px-4 py-2 rounded-full text-edu-text-secondary hover:bg-edu-pink hover:text-edu-text transition-all">AI Chat</a>91 <a href="page2.html" class="px-4 py-2 rounded-full text-edu-text-secondary hover:bg-edu-pink hover:text-edu-text transition-all">Request</a>92 <a href="page4.html" class="px-4 py-2 rounded-full text-edu-text-secondary hover:bg-edu-pink hover:text-edu-text transition-all">Updates</a>93 <a href="page7.html" class="px-4 py-2 rounded-full text-edu-text-secondary hover:bg-edu-pink hover:text-edu-text transition-all">Apps</a>94 <a href="page6.html" class="px-4 py-2 rounded-full text-edu-text-secondary hover:bg-edu-pink hover:text-edu-text transition-all">Links</a>95 </div>96 </div>97 </div>98 </nav>99 100 101 <div class="w-full max-w-md mt-20">102 <div class="bg-edu-dark-accent border border-edu-pink/20 rounded-2xl p-8 shadow-2xl">103 104 <div class="text-center mb-8">105 <h1 class="font-pacifico text-4xl gradient-text mb-2">EDUrocks 3.0</h1>106 <p class="text-edu-text-secondary text-sm">Sign in to use Cloud Game Saves</p>107 </div>108 109 110 <div class="flex gap-2 mb-6 bg-edu-dark rounded-full p-1">111 <button id="loginTab" onclick="showLogin()" class="flex-1 px-4 py-2 rounded-full bg-gradient-to-r from-edu-pink to-edu-pink-light text-edu-text font-medium transition-all">112 Login113 </button>114 <button id="signupTab" onclick="showSignup()" class="flex-1 px-4 py-2 rounded-full text-edu-text-secondary hover:text-edu-text font-medium transition-all">115 Sign Up116 </button>117 </div>118 119 120 <form id="loginForm" class="space-y-4">121 <div>122 <label class="block text-edu-text text-sm font-medium mb-2">Username</label>123 <input type="text"124 class="w-full bg-edu-dark text-edu-text border border-edu-pink/20 rounded-lg px-4 py-3 focus:outline-none focus:border-edu-pink transition-all placeholder-edu-text-secondary/50"125 placeholder="Enter your username">126 </div>127 128 <div>129 <label class="block text-edu-text text-sm font-medium mb-2">Password</label>130 <input type="password"131 class="w-full bg-edu-dark text-edu-text border border-edu-pink/20 rounded-lg px-4 py-3 focus:outline-none focus:border-edu-pink transition-all placeholder-edu-text-secondary/50"132 placeholder="Enter your password">133 </div>134 135 <div class="flex items-center text-sm">136 <label class="flex items-center text-edu-text-secondary cursor-pointer">137 <input type="checkbox" class="mr-2 rounded border-edu-pink/20 text-edu-pink focus:ring-edu-pink">138 Remember me139 </label>140 </div>141 142 <div class="h-captcha" data-sitekey="fdfe3526-83c8-4a12-b386-3164a3eebc64" data-theme="dark"></div>143 144 <button type="submit"145 onclick="attemptLogin(event)"146 class="w-full bg-gradient-to-r from-edu-pink to-edu-pink-light text-edu-text font-semibold py-3 rounded-lg hover:shadow-xl transition-all transform hover:scale-105">147 Login148 </button>149 </form>150 151 152 <form id="signupForm" class="space-y-4 hidden">153 <div>154 <label class="block text-edu-text text-sm font-medium mb-2">Username</label>155 <input type="text"156 class="w-full bg-edu-dark text-edu-text border border-edu-pink/20 rounded-lg px-4 py-3 focus:outline-none focus:border-edu-pink transition-all placeholder-edu-text-secondary/50"157 placeholder="Choose a username">158 </div>159 160 <div>161 <label class="block text-edu-text text-sm font-medium mb-2">Password</label>162 <input type="password"163 class="w-full bg-edu-dark text-edu-text border border-edu-pink/20 rounded-lg px-4 py-3 focus:outline-none focus:border-edu-pink transition-all placeholder-edu-text-secondary/50"164 placeholder="Create a password">165 </div>166 167 <div class="h-captcha" data-sitekey="fdfe3526-83c8-4a12-b386-3164a3eebc64" data-theme="dark"></div>168 169 <button type="submit"170 onclick="attemptSignup(event)"171 class="w-full bg-gradient-to-r from-edu-pink to-edu-pink-light text-edu-text font-semibold py-3 rounded-lg hover:shadow-xl transition-all transform hover:scale-105">172 Create Account173 </button>174 </form>175 176 177 <div class="mt-6 p-4 bg-edu-dark/50 border border-edu-pink/10 rounded-lg">178 <p class="text-edu-text-secondary text-xs text-center">179 <span class="font-semibold text-edu-text">Your data is encrypted and stored in our American Data Center.180 </p>181 </div>182 </div>183 </div>184 185 186 <div id="toast" class="fixed bottom-8 right-8 bg-edu-dark-accent border border-edu-pink/20 rounded-lg px-6 py-4 shadow-2xl transform translate-y-32 transition-transform duration-300 max-w-sm">187 <div class="flex items-center gap-3">188 <div class="w-2 h-2 rounded-full bg-edu-pink animate-pulse"></div>189 <p id="toastMessage" class="text-edu-text"></p>190 </div>191 </div>192 193 <script type="module">194 import { initNavigationHandlers } from './assets/js/navigation.js';195 import { initChromeOSDetection } from './assets/js/chromeos-detect.js';196 import { Auth } from './assets/js/auth.js';197 import { getCurrentDomain } from './assets/js/domain-utils.js';198 199 // Make Auth globally available200 window.Auth = Auth;201 window.getCurrentDomain = getCurrentDomain;202 203 // Check if already logged in204 document.addEventListener('DOMContentLoaded', async () => {205 if (await Auth.verifySession()) {206 // Redirect to home if already logged in207 window.location.href = 'index.html';208 }209 });210 211 document.getElementById('pr0xy-link').addEventListener('click', function(e) {212 e.preventDefault();213 if (window.openP-r0xyInBypass) {214 window.openP-r0xyInBypass(window.getP-r0xyURL());215 } else {216 window.open(window.getP-r0xyURL(), '_blank');217 }218 });219 220 document.getElementById('ai-chat-link').addEventListener('click', function(e) {221 e.preventDefault();222 window.location.href = 'aichat/index.html';223 });224 </script>225 226 <script>227 function showLogin() {228 document.getElementById('loginForm').classList.remove('hidden');229 document.getElementById('signupForm').classList.add('hidden');230 document.getElementById('loginTab').classList.add('bg-gradient-to-r', 'from-edu-pink', 'to-edu-pink-light');231 document.getElementById('loginTab').classList.remove('text-edu-text-secondary');232 document.getElementById('signupTab').classList.remove('bg-gradient-to-r', 'from-edu-pink', 'to-edu-pink-light');233 document.getElementById('signupTab').classList.add('text-edu-text-secondary');234 }235 236 function showSignup() {237 document.getElementById('loginForm').classList.add('hidden');238 document.getElementById('signupForm').classList.remove('hidden');239 document.getElementById('signupTab').classList.add('bg-gradient-to-r', 'from-edu-pink', 'to-edu-pink-light');240 document.getElementById('signupTab').classList.remove('text-edu-text-secondary');241 document.getElementById('loginTab').classList.remove('bg-gradient-to-r', 'from-edu-pink', 'to-edu-pink-light');242 document.getElementById('loginTab').classList.add('text-edu-text-secondary');243 }244 245 function showToast(message) {246 const toast = document.getElementById('toast');247 const toastMessage = document.getElementById('toastMessage');248 toastMessage.textContent = message;249 toast.classList.remove('translate-y-32');250 toast.classList.add('translate-y-0');251 252 setTimeout(() => {253 toast.classList.remove('translate-y-0');254 toast.classList.add('translate-y-32');255 }, 3000);256 }257 258 async function attemptLogin(event) {259 event.preventDefault();260 261 const form = document.getElementById('loginForm');262 const username = form.querySelector('input[type="text"]').value.trim();263 const password = form.querySelector('input[type="password"]').value;264 265 if (!username || !password) {266 showToast('⚠️ Please enter username and password');267 return false;268 }269 270 // Get hCaptcha token271 const hcaptchaResponse = form.querySelector('.h-captcha textarea')?.value;272 if (!hcaptchaResponse) {273 showToast('⚠️ Please complete the captcha');274 return false;275 }276 277 try {278 const button = form.querySelector('button[type="submit"]');279 button.disabled = true;280 button.textContent = 'Logging in...';281 282 await Auth.login(username, password, hcaptchaResponse);283 284 showToast('✅ Login successful! Redirecting...');285 286 setTimeout(() => {287 window.location.href = 'index.html';288 }, 1000);289 290 } catch (error) {291 showToast('❌ ' + error.message);292 const button = form.querySelector('button[type="submit"]');293 button.disabled = false;294 button.textContent = 'Login';295 // Reset hCaptcha296 if (window.hcaptcha) {297 window.hcaptcha.reset();298 }299 }300 301 return false;302 }303 304 async function attemptSignup(event) {305 event.preventDefault();306 307 const form = document.getElementById('signupForm');308 const username = form.querySelectorAll('input[type="text"]')[0].value.trim();309 const password = form.querySelector('input[type="password"]').value;310 311 if (!username || !password) {312 showToast('⚠️ Please enter username and password');313 return false;314 }315 316 if (username.length < 3 || username.length > 20) {317 showToast('⚠️ Username must be 3-20 characters');318 return false;319 }320 321 if (password.length < 6) {322 showToast('⚠️ Password must be at least 6 characters');323 return false;324 }325 326 if (!/^[a-zA-Z0-9_]+$/.test(username)) {327 showToast('⚠️ Username can only contain letters, numbers, and underscores');328 return false;329 }330 331 // Get hCaptcha token332 const hcaptchaResponse = form.querySelector('.h-captcha textarea')?.value;333 if (!hcaptchaResponse) {334 showToast('⚠️ Please complete the captcha');335 return false;336 }337 338 try {339 const button = form.querySelector('button[type="submit"]');340 button.disabled = true;341 button.textContent = 'Creating Account...';342 343 await Auth.register(username, password, hcaptchaResponse);344 345 showToast('✅ Account created! Please login');346 347 // Switch to login form348 setTimeout(() => {349 showLogin();350 form.querySelector('input[type="text"]').value = '';351 form.querySelector('input[type="password"]').value = '';352 // Reset hCaptcha353 if (window.hcaptcha) {354 window.hcaptcha.reset();355 }356 }, 1500);357 358 } catch (error) {359 showToast('❌ ' + error.message);360 // Reset hCaptcha361 if (window.hcaptcha) {362 window.hcaptcha.reset();363 }364 } finally {365 const button = form.querySelector('button[type="submit"]');366 button.disabled = false;367 button.textContent = 'Create Account';368 }369 370 return false;371 }372 </script>373</body>374</html>375