| <!DOCTYPE html>
|
| <html lang="ar" dir="rtl">
|
| <head>
|
| <meta charset="UTF-8">
|
| <meta name="viewport" content="width=device-width, initial-scale=1.0">
|
| <title>التحقق عبر تيليجرام - Claymorphism</title>
|
| <link rel="preconnect" href="https://fonts.googleapis.com">
|
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
| <link href="https://fonts.googleapis.com/css2?family=Cairo:wght@700;800;900&family=Tajawal:wght@400;500;700&family=Ubuntu+Mono:wght@500&display=swap" rel="stylesheet">
|
| <style>
|
| |
| |
|
|
| #loader-overlay {
|
| position: fixed;
|
| top: 0; left: 0; width: 100%; height: 100%;
|
|
|
| background-color: #F4F1FA;
|
| z-index: 9999;
|
| display: flex;
|
| justify-content: center;
|
| align-items: center;
|
| transition: opacity 0.5s ease;
|
| }
|
|
|
| .loading-content {
|
| position: relative;
|
| width: 180px;
|
| height: 180px;
|
| animation: rotate 4s ease-in-out infinite;
|
| filter: url("#gooey");
|
| }
|
|
|
| .svg {
|
| width: 0;
|
| height: 0;
|
| position: absolute;
|
| }
|
|
|
| @keyframes rotate {
|
| 0% { transform: rotate(360deg); }
|
| 50% { transform: rotate(360deg); }
|
| 100% { transform: rotate(0deg); }
|
| }
|
|
|
| .loading-content .liquid {
|
| position: absolute;
|
| top: 50%;
|
| left: 50%;
|
| transform: translate(-50%, -50%);
|
| background: linear-gradient(90deg, rgba(0, 30, 250, 1) 0%, rgba(177, 70, 252, 1) 100%);
|
| width: 50px;
|
| height: 50px;
|
| border-radius: 50%;
|
| --ani_dur: 4s;
|
| }
|
|
|
| .loading-content .liquid:nth-child(1) { top: 0; animation: animate1 var(--ani_dur) ease-in-out infinite; }
|
| .loading-content .liquid:nth-child(2) { left: 0; animation: animate2 var(--ani_dur) ease-in-out infinite; }
|
| .loading-content .liquid:nth-child(3) { left: 100%; animation: animate3 var(--ani_dur) ease-in-out infinite; }
|
| .loading-content .liquid:nth-child(4) { top: 100%; animation: animate4 var(--ani_dur) ease-in-out infinite; }
|
|
|
| @keyframes animate1 { 0% { top: 0; } 50% { top: 100%; } 100% { top: 100%; } }
|
| @keyframes animate2 { 0% { left: 0; } 50% { left: 100%; } 100% { left: 100%; } }
|
| @keyframes animate3 { 0% { left: 100%; } 50% { left: 0; } 100% { left: 0; } }
|
| @keyframes animate4 { 0% { top: 100%; } 50% { top: 0; } 100% { top: 0; } }
|
|
|
| |
| |
|
|
| :root { --clay-canvas: #F4F1FA; --clay-foreground: #332F3A; --clay-muted: #635F69; --clay-primary: #7C3AED; --clay-primary-light: #A78BFA; --clay-accent-pink: #DB2777; --clay-accent-blue: #0EA5E9; --clay-success: #10B981; --clay-error: #EF4444; --clay-input-bg: #EFEBF5; --shadow-clay-card: 16px 16px 32px rgba(160, 150, 180, 0.2), -10px -10px 24px rgba(255, 255, 255, 0.9), inset 6px 6px 12px rgba(139, 92, 246, 0.03), inset -6px -6px 12px rgba(255, 255, 255, 1); --shadow-clay-btn: 12px 12px 24px rgba(139, 92, 246, 0.3), -8px -8px 16px rgba(255, 255, 255, 0.4), inset 4px 4px 8px rgba(255, 255, 255, 0.4), inset -4px -4px 8px rgba(0, 0, 0, 0.1); --shadow-clay-btn-hover: 16px 16px 32px rgba(139, 92, 246, 0.4), -12px -12px 24px rgba(255, 255, 255, 0.6), inset 4px 4px 8px rgba(255, 255, 255, 0.5), inset -4px -4px 8px rgba(0, 0, 0, 0.1); --shadow-clay-pressed: inset 10px 10px 20px #d9d4e3, inset -10px -10px 20px #ffffff; --radius-card: 32px; --radius-btn: 20px; --radius-input: 16px; --radius-badge: 50px; --font-heading: 'Cairo', sans-serif; --font-body: 'Tajawal', sans-serif; --font-mono: 'Ubuntu Mono', monospace; }
|
| * { margin: 0; padding: 0; box-sizing: border-box; }
|
| body { font-family: var(--font-body); background-color: var(--clay-canvas); color: var(--clay-foreground); min-height: 100vh; display: flex; justify-content: center; align-items: center; padding: 20px; overflow-x: hidden; position: relative; }
|
| h1, h2, h3, .brand-font { font-family: var(--font-heading); }
|
| .background-blobs { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; overflow: hidden; }
|
| .blob { position: absolute; border-radius: 50%; filter: blur(80px); opacity: 0.6; animation: float 10s infinite ease-in-out; }
|
| .blob-1 { width: 60vh; height: 60vh; background: var(--clay-primary); top: -10%; right: -10%; opacity: 0.15; animation-delay: 0s; }
|
| .blob-2 { width: 50vh; height: 50vh; background: var(--clay-accent-pink); bottom: -10%; left: -10%; opacity: 0.15; animation-delay: 2s; }
|
| .blob-3 { width: 40vh; height: 40vh; background: var(--clay-accent-blue); top: 40%; right: 40%; opacity: 0.1; animation-delay: 4s; }
|
| @keyframes float { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-30px) rotate(5deg); } }
|
| .clay-card { background: rgba(255, 255, 255, 0.65); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); padding: 40px; border-radius: var(--radius-card); box-shadow: var(--shadow-clay-card); width: 100%; max-width: 480px; position: relative; z-index: 10; border: 1px solid rgba(255, 255, 255, 0.4); transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); text-align: right; }
|
| .clay-card:hover { transform: translateY(-5px); }
|
| .clay-icon-orb { width: 90px; height: 90px; border-radius: 50%; background: linear-gradient(145deg, #E0F2FE 0%, #7DD3FC 50%, #0EA5E9 100%); box-shadow: 12px 12px 24px rgba(14, 165, 233, 0.3), inset 8px 8px 16px rgba(255, 255, 255, 0.8), inset -8px -8px 16px rgba(2, 132, 199, 0.2); display: flex; justify-content: center; align-items: center; margin: 0 auto 25px auto; position: relative; transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); cursor: default; }
|
| .clay-icon-orb:hover { transform: scale(1.08) rotate(-5deg); }
|
| .clay-icon-orb span { font-size: 44px; filter: drop-shadow(2px 4px 6px rgba(0,0,0,0.15)); transform: rotate(-15deg); transition: transform 0.4s; display: block; line-height: 1; }
|
| .clay-icon-orb:hover span { transform: rotate(0deg) scale(1.1); }
|
| h1 { text-align: center; color: var(--clay-foreground); margin-bottom: 25px; font-size: 28px; font-weight: 900; letter-spacing: -0.02em; }
|
| .instructions { background: var(--clay-input-bg); padding: 24px; border-radius: var(--radius-input); margin-bottom: 30px; box-shadow: var(--shadow-clay-pressed); border: 1px solid rgba(255,255,255,0.2); }
|
| .instructions h3 { color: var(--clay-accent-blue); margin-bottom: 15px; font-size: 18px; font-weight: 800; display: flex; align-items: center; gap: 8px; }
|
| .instructions ol { margin-right: 20px; color: var(--clay-muted); line-height: 1.8; font-size: 15px; }
|
| .instructions li { margin-bottom: 12px; padding-right: 5px; }
|
|
|
|
|
| .bot-username {
|
| background: linear-gradient(135deg, #0EA5E9 0%, #0284C7 100%);
|
| color: white;
|
| padding: 6px 16px;
|
| border-radius: var(--radius-badge);
|
| display: inline-flex;
|
| align-items: center;
|
| font-weight: 700;
|
| font-family: var(--font-mono);
|
| margin: 5px 0;
|
| font-size: 15px;
|
| box-shadow: 4px 4px 8px rgba(14, 165, 233, 0.3), -2px -2px 6px rgba(255, 255, 255, 0.5);
|
| cursor: pointer;
|
| transition: transform 0.2s, box-shadow 0.2s;
|
| text-decoration: none;
|
| position: relative;
|
| }
|
| .bot-username:hover {
|
| transform: scale(1.05);
|
| box-shadow: 6px 6px 12px rgba(14, 165, 233, 0.4), -3px -3px 8px rgba(255, 255, 255, 0.6);
|
| }
|
| .bot-username:active {
|
| transform: scale(0.95);
|
| }
|
|
|
| .form-group { margin-bottom: 25px; position: relative; }
|
| label { display: block; margin-bottom: 10px; color: var(--clay-foreground); font-weight: 700; font-size: 15px; margin-right: 4px; }
|
| input[type="text"] { width: 100%; padding: 18px; border: none; border-radius: var(--radius-input); font-size: 24px; font-family: var(--font-mono); color: var(--clay-foreground); background-color: var(--clay-input-bg); box-shadow: var(--shadow-clay-pressed); transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); outline: none; text-align: center; letter-spacing: 0.5em; direction: ltr; }
|
| input::placeholder { color: #cbd5e1; font-weight: 500; letter-spacing: 0.2em; }
|
| input:focus { background-color: #ffffff; transform: translateY(-2px); box-shadow: 8px 8px 16px rgba(160, 150, 180, 0.15), -6px -6px 12px rgba(255, 255, 255, 0.9); border: 1px solid rgba(139, 92, 246, 0.1); }
|
| button { width: 100%; padding: 18px; background: linear-gradient(135deg, var(--clay-primary-light) 0%, var(--clay-primary) 100%); color: white; border: none; border-radius: var(--radius-btn); font-size: 18px; font-weight: 800; font-family: var(--font-heading); cursor: pointer; box-shadow: var(--shadow-clay-btn); transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1); position: relative; overflow: hidden; display: flex; justify-content: center; align-items: center; gap: 10px; }
|
| button:hover:not(:disabled) { transform: translateY(-3px) scale(1.01); box-shadow: var(--shadow-clay-btn-hover); }
|
| button:active:not(:disabled) { transform: scale(0.94) translateY(1px); box-shadow: var(--shadow-clay-pressed); transition: transform 0.1s; }
|
| button:disabled { opacity: 0.7; cursor: not-allowed; filter: grayscale(0.2); }
|
| .spinner { width: 20px; height: 20px; border: 3px solid rgba(255, 255, 255, 0.3); border-radius: 50%; border-top-color: white; animation: spin 0.8s linear infinite; display: none; }
|
| @keyframes spin { to { transform: rotate(360deg); } }
|
| .flash-container { margin-bottom: 20px; }
|
| .flash { padding: 12px 16px; border-radius: var(--radius-input); margin-bottom: 10px; font-size: 14px; display: flex; align-items: center; gap: 8px; }
|
| .flash.error { background: rgba(239, 68, 68, 0.1); color: #b91c1c; border: 1px solid rgba(239, 68, 68, 0.2); }
|
| .flash.success { background: rgba(16, 185, 129, 0.1); color: #047857; border: 1px solid rgba(16, 185, 129, 0.2); }
|
| @media (max-width: 480px) { .clay-card { padding: 30px 20px; } h1 { font-size: 24px; } .instructions { padding: 20px; } }
|
| </style>
|
| </head>
|
| <body>
|
|
|
| |
| |
|
|
| <div id="loader-overlay">
|
| <div class="loading-content">
|
| <div class="liquid"></div>
|
| <div class="liquid"></div>
|
| <div class="liquid"></div>
|
| <div class="liquid"></div>
|
| </div>
|
| <svg class="svg">
|
| <filter id="gooey">
|
| <feGaussianBlur stdDeviation="10" in="SourceGraphic"></feGaussianBlur>
|
| <feColorMatrix values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 20 -10"></feColorMatrix>
|
| </filter>
|
| </svg>
|
| </div>
|
|
|
| |
| |
|
|
| <div class="background-blobs"><div class="blob blob-1"></div><div class="blob blob-2"></div><div class="blob blob-3"></div></div>
|
| <main class="clay-card">
|
| <div class="clay-icon-orb"><span>✈️</span></div>
|
| <h1>التحقق عبر تيليجرام</h1>
|
| <div id="flash-container" class="flash-container">
|
| {% with messages = get_flashed_messages(with_categories=true) %}
|
| {% if messages %}
|
| {% for category, message in messages %}
|
| <div class="flash {{ category }}">
|
| <span>{% if category == 'error' %}⚠️{% else %}✅{% endif %}</span>
|
| <span>{{ message }}</span>
|
| </div>
|
| {% endfor %}
|
| {% endif %}
|
| {% endwith %}
|
| </div>
|
| <div class="instructions">
|
| <h3>📱 اتبع هذه الخطوات:</h3>
|
| <ol>
|
| <li>افتح تطبيق تيليجرام</li>
|
|
|
| <li>اضغط هنا لفتح البوت: <a href="https://t.me/classvrf_bot" target="_blank" class="bot-username">@classvrf_bot</a></li>
|
| <li>أرسل الأمر <strong>/start</strong></li>
|
| <li>انسخ الرمز (6 أرقام)</li>
|
| <li>ألصقه هنا</li>
|
| </ol>
|
| </div>
|
| <form method="POST" action="{{ url_for('verification') }}" id="verifyForm">
|
| <div class="form-group"><label for="code">أدخل رمز التحقق</label><input type="text" id="code" name="code" maxlength="6" placeholder="000000" required autocomplete="one-time-code"></div>
|
| <button type="submit" id="verifyBtn"><span class="btn-text">تحقق وأكمل التسجيل</span><div class="spinner"></div></button>
|
| </form>
|
| </main>
|
| <script>
|
| const verifyForm = document.getElementById('verifyForm'); const verifyBtn = document.getElementById('verifyBtn'); const btnText = verifyBtn.querySelector('.btn-text'); const spinner = verifyBtn.querySelector('.spinner'); const codeInput = document.getElementById('code');
|
|
|
|
|
|
|
|
|
| codeInput.addEventListener('input', function(e) { this.value = this.value.replace(/[^0-9]/g, '').slice(0, 6); });
|
| verifyForm.addEventListener('submit', function() { verifyBtn.disabled = true; btnText.textContent = 'جاري التحقق...'; spinner.style.display = 'block'; });
|
| const s = document.createElement("style"); s.innerText = `@keyframes shake { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-5px)} 75%{transform:translateX(5px)} }`; document.head.appendChild(s);
|
|
|
|
|
|
|
|
|
| window.addEventListener('load', function() {
|
| const loader = document.getElementById('loader-overlay');
|
|
|
|
|
| setTimeout(function() {
|
| loader.style.opacity = '0';
|
|
|
| setTimeout(function() {
|
| loader.style.display = 'none';
|
| }, 500);
|
| }, 2000);
|
| });
|
| </script>
|
| </body>
|
| </html> |
