1<!DOCTYPE html> 2<html lang="ar" dir="rtl"> 3<head> 4 <title>تسجÙ٠اÙدخÙÙ ÙÙتطبÙÙ</title> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta name="theme-color" content="#07080a"> 7 <link rel="stylesheet" href="global-font.css"> 8 <style> 9 html, body { background-color: #07080a; } 10 </style> 11 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> 12 <style> 13 /* Fonts */ 14 @import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;700&display=swap'); 15 @import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@400;500;700&display=swap'); 16 17 :root { 18 --bg-color: #111317; 19 --card-bg: transparent; 20 --accent-green: #4CAF50; 21 --accent-blue: #007bff; 22 --text-main: #e0e7ee; 23 --text-muted: #a0a8b4; 24 --glass-bg: transparent; 25 --glass-border: rgba(255, 255, 255, 0.08); 26 --glass-shadow: 0 10px 30px rgba(0, 0, 0, 0.7); 27 --primary-gradient: linear-gradient(90deg, var(--accent-green), #5cb85c); 28 --error-color: #e74c3c; 29 --success-color: var(--accent-green); 30 --input-bg: rgba(42, 53, 71, 0.4); 31 --input-border: rgba(255, 255, 255, 0.1); 32 --font-en: 'Outfit', sans-serif; 33 --font-ar: 'Tajawal', sans-serif; 34 } 35 36 html[lang="ar"] { --font-family: var(--font-ar); } 37 html[lang="en"] { --font-family: var(--font-en); } 38 39 * { 40 box-sizing: border-box; 41 transition: all 0.3s ease; 42 } 43 44 body { 45 font-family: var(--font-family, sans-serif); 46 margin: 0; 47 /* Ø®ÙÙÙØ© ثابتة Ø®ÙÙÙØ© ÙÙ Ùاسبة ÙÙأجÙزة اÙضعÙÙØ© */ 48 background-color: #050608; 49 background: radial-gradient(circle at center, #111318 0%, #050608 100%); 50 color: var(--text-main); 51 display: flex; 52 justify-content: center; 53 align-items: center; 54 min-height: 100vh; 55 padding: 20px; 56 overflow-x: hidden; 57 position: relative; 58 } 59 body::before, 60 body::after { 61 content: ''; 62 position: fixed; 63 inset: 0; 64 pointer-events: none; 65 z-index: 0; 66 } 67 body::before { 68 background: 69 radial-gradient(55% 45% at 18% 18%, rgba(76, 175, 80, 0.12), transparent 70%), 70 radial-gradient(50% 40% at 82% 20%, rgba(0, 123, 255, 0.09), transparent 72%), 71 radial-gradient(60% 50% at 50% 100%, rgba(255, 255, 255, 0.05), transparent 75%); 72 } 73 body::after { 74 background-image: linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px); 75 background-size: 36px 36px; 76 opacity: 0.22; 77 } 78 79 .login-container { 80 width: 100%; 81 max-width: 420px; 82 z-index: 2; /* ÙÙ٠اÙØ®ÙÙÙØ© */ 83 padding: 20px; 84 animation: slideUp 0.8s cubic-bezier(0.2, 0.8, 0.2, 1); 85 } 86 87 .login-card { 88 background: rgba(17, 19, 23, 0.6); /* Ø´ÙاÙÙØ© Ø£Ùثر */ 89 backdrop-filter: blur(20px); /* ت٠ÙÙ٠أÙÙÙ ÙÙØ®ÙÙÙØ© */ 90 -webkit-backdrop-filter: blur(20px); 91 border: 1px solid var(--glass-border); 92 border-radius: 15px; 93 padding: 35px; 94 box-shadow: var(--glass-shadow); 95 position: relative; 96 overflow: hidden; 97 } 98 99 /* Glowing top border */ 100 .login-card::before { 101 content: ''; 102 position: absolute; 103 top: 0; left: 0; right: 0; 104 height: 1px; 105 background: linear-gradient(90deg, transparent, rgba(76, 175, 80, 0.5), transparent); 106 opacity: 0.8; 107 } 108 109 .login-header { text-align: center; margin-bottom: 35px; } 110 111 .vitik-logo { 112 font-size: 3.8em; 113 font-weight: 800; 114 letter-spacing: -0.02em; 115 color: var(--text-main); 116 margin-bottom: 10px; 117 display: inline-block; 118 text-shadow: 0 0 20px rgba(0,0,0,0.5); 119 } 120 .vitik-logo span { color: var(--accent-green); } 121 122 .brand-links { 123 margin-top: 14px; 124 padding: 7px; 125 border: 1px solid rgba(76, 175, 80, 0.22); 126 border-radius: 10px; 127 background: linear-gradient(145deg, rgba(76, 175, 80, 0.09), rgba(0, 123, 255, 0.04)); 128 display: grid; 129 gap: 6px; 130 text-align: start; 131 } 132 .brand-link-item { 133 display: flex; 134 align-items: center; 135 gap: 8px; 136 background: rgba(255, 255, 255, 0.03); 137 border: 1px solid rgba(255, 255, 255, 0.08); 138 border-radius: 8px; 139 padding: 6px 8px; 140 font-size: 0.78em; 141 color: var(--text-muted); 142 } 143 a.brand-link-item { 144 text-decoration: none; 145 cursor: pointer; 146 } 147 a.brand-link-item:hover { 148 border-color: rgba(76, 175, 80, 0.45); 149 background: rgba(76, 175, 80, 0.08); 150 transform: translateY(-1px); 151 } 152 .brand-link-item i {
153 width: 20px; 154 height: 20px; 155 border-radius: 6px; 156 display: inline-flex; 157 align-items: center; 158 justify-content: center; 159 color: #fff; 160 background: rgba(76, 175, 80, 0.6); 161 flex-shrink: 0; 162 font-size: 0.78em; 163 } 164 .brand-link-item.telegram i { background: rgba(0, 123, 255, 0.7); } 165 .brand-link-item span { 166 color: var(--text-main); 167 font-weight: 600; 168 } 169 .brand-link-item:hover span { 170 color: var(--accent-green); 171 } 172 .brand-links-actions { 173 display: flex; 174 justify-content: center; 175 margin-top: 4px; 176 } 177 .playstore-icon-link { 178 width: 34px; 179 height: 34px; 180 border-radius: 10px; 181 border: 1px solid rgba(76, 175, 80, 0.35); 182 background: rgba(0, 0, 0, 0.22); 183 display: inline-flex; 184 align-items: center; 185 justify-content: center; 186 text-decoration: none; 187 box-shadow: 0 6px 14px rgba(0, 0, 0, 0.25); 188 } 189 .playstore-icon-link i { 190 background: linear-gradient(140deg, #00d26a 0%, #00a1ff 35%, #ffd54a 65%, #ff4b4b 100%); 191 -webkit-background-clip: text; 192 background-clip: text; 193 color: transparent; 194 -webkit-text-fill-color: transparent; 195 } 196 .playstore-icon-link:hover { 197 color: #ffffff; 198 background: rgba(76, 175, 80, 0.28); 199 border-color: rgba(76, 175, 80, 0.7); 200 transform: translateY(-1px); 201 } 202 .playstore-icon-link:hover i { 203 background: none; 204 color: #ffffff; 205 -webkit-text-fill-color: #ffffff; 206 } 207 208 .language-switcher { 209 display: flex; 210 justify-content: center; 211 gap: 15px; 212 margin-bottom: 25px; 213 } 214 .language-switcher a { 215 color: var(--text-muted); 216 text-decoration: none; 217 font-size: 0.9em; 218 padding: 5px 12px; 219 border-radius: 20px; 220 } 221 .language-switcher a.active { 222 color: var(--accent-green); 223 background: rgba(255, 255, 255, 0.05); 224 } 225 .language-switcher a:hover { color: var(--text-main); } 226 227 .input-group { margin-bottom: 20px; } 228 .input-group label { display: block; margin-bottom: 8px; color: var(--text-muted); font-size: 0.9em; } 229 .input-wrapper { position: relative; } 230 231 .input-field { 232 width: 100%; 233 background: var(--input-bg); 234 border: 1px solid var(--input-border); 235 color: var(--text-main); 236 padding: 14px 45px 14px 15px; 237 border-radius: 8px; 238 font-size: 1em; 239 } 240 html[dir="rtl"] .input-field { padding: 14px 15px 14px 45px; } 241 242 .input-field:focus { 243 outline: none; 244 border-color: var(--accent-blue); 245 background: rgba(42, 53, 71, 0.8); 246 box-shadow: 0 0 0 4px rgba(0, 123, 255, 0.15); 247 } 248 249 .input-icon { 250 position: absolute; 251 top: 50%; 252 transform: translateY(-50%); 253 color: var(--text-muted); 254 } 255 html[dir="ltr"] .input-icon { right: 15px; } 256 html[dir="rtl"] .input-icon { left: 15px; } 257 .input-field:focus + .input-icon { color: var(--accent-blue); } 258 259 .remember-me-group { margin-bottom: 30px; } 260 .checkbox-container { 261 position: relative; cursor: pointer; padding-left: 30px; color: var(--text-muted); font-size: 0.95em; 262 } 263 html[dir="rtl"] .checkbox-container { padding-left: 0; padding-right: 30px; } 264 .checkbox-container input { position: absolute; opacity: 0; } 265 .checkmark { 266 position: absolute; top: 0; left: 0; height: 20px;
266 width: 20px; 267 background-color: var(--input-bg); border: 1px solid var(--input-border); border-radius: 6px; 268 } 269 html[dir="rtl"] .checkmark { left: auto; right: 0; } 270 .checkbox-container:hover input ~ .checkmark { border-color: var(--accent-green); } 271 .checkbox-container input:checked ~ .checkmark { background-color: var(--accent-green); border-color: var(--accent-green); } 272 .checkmark:after { content: ""; position: absolute; display: none; left: 7px; top: 3px; width: 5px; height: 10px; border: solid white; border-width: 0 2px 2px 0; transform: rotate(45deg); } 273 .checkbox-container input:checked ~ .checkmark:after { display: block; } 274 275 .login-button { 276 width: 100%; padding: 14px; background: var(--primary-gradient); color: white; border: none; border-radius: 8px; font-size: 1.1em; font-weight: 700; cursor: pointer; box-shadow: 0 4px 15px rgba(76, 175, 80, 0.3); 277 } 278 .login-button:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(76, 175, 80, 0.5); } 279 .register-link { text-align: center; margin-top: 25px; font-size: 0.95em; color: var(--text-muted); } 280 .register-link a { color: var(--accent-green); text-decoration: none; font-weight: 700; } 281 .register-link a:hover { text-decoration: underline; } 282 283 /* Toast */ 284 #toast-container { position: fixed; top: 20px; left: 50%; transform: translateX(-50%); z-index: 9999; width: 90%; max-width: 400px; } 285 .toast { background: rgba(20, 20, 20, 0.95); backdrop-filter: blur(10px); color: var(--text-main); padding: 16px 20px; border-radius: 10px; border: 1px solid var(--glass-border); margin-bottom: 10px; display: flex; align-items: center; gap: 12px; animation: toastIn 0.4s forwards; } 286 .toast.error { border-left: 4px solid var(--error-color); } 287 .toast.success { border-left: 4px solid var(--success-color); } 288 html[dir="rtl"] .toast.error { border-right: 4px solid var(--error-color); border-left: none; } 289 html[dir="rtl"] .toast.success { border-right: 4px solid var(--success-color); border-left: none; } 290 291 /* Footer */ 292 .copyright-footer { 293 text-align: center; 294 margin-top: 2px; 295 color: var(--text-muted); 296 font-size: 0.82em; 297 z-index: 2; 298 position: relative; 299 padding-top: 8px; 300 border-top: 1px solid rgba(255, 255, 255, 0.08); 301 } 302 .copyright-footer p { margin: 0 0 8px; } 303 .footer-social-links a { color: var(--text-muted); font-size: 1.3em; margin: 0 12px; transition: 0.3s; } 304 .footer-social-links a:hover { color: var(--accent-green); transform: scale(1.2); } 305 306 @keyframes slideUp { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: translateY(0); } } 307 @keyframes toastIn { from { opacity: 0; transform: translateY(-20px); } to { opacity: 1; transform: translateY(0); } } 308 309 @media (max-width: 480px) { 310 body { padding: 12px; overflow-y: auto; } 311 .login-container { max-width: 100%; padding: 10px 0; } 312 .login-card { padding: 24px 16px; border-radius: 12px; } 313 .vitik-logo { font-size: 2.9em; } 314 .language-switcher { gap: 8px; margin-bottom: 16px; flex-wrap: wrap; } 315 .language-switcher a { font-size: 0.85em; padding: 5px 10px; } 316 .input-field { font-size: 0.95em; } 317 .login-button { font-size: 1em; padding: 12px; } 318 .copyright-footer { margin-top: 0; font-size: 0.76em; padding-top: 7px; } 319 .brand-links { margin-top: 8px; padding: 6px; gap: 5px; } 320 .brand-link-item { font-size: 0.74em; gap: 6px; padding: 6px 7px; } 321 .brand-link-item i { width: 18px; height: 18px; } 322 .playstore-icon-link { width: 30px; height: 30px; border-radius: 9px; } 323 .footer-social-links a { font-size: 1.15em; margin: 0 8px; } 324 #toast-container { top: 12px; width: calc(100% - 20px); } 325 } 326 </style> 327 328 <link rel='stylesheet' href='assets/tg-animations.css'> 329</head> 330<body> 331 <div id="toast-container"></div> 332 333 <div class="login-container"> 334 335 <div class="language-switcher"> 336 <a href="?lang=ar" class="active">اÙعربÙØ©</a> 337 <a href="?lang=en" class="">English</a> 338 </div> 339 340 <div class="login-card"> 341 <div class="login-header"> 342 <div class="vitik-logo">Vi<span>Tik</span></div> 343 </div> 344 345 <form action="index.php" method="post"> 346 <div class="input-group"> 347 <label for="username">ÙÙزر اÙ٠دÙر</label> 348 <div class="input-wrapper"> 349 <input type="text" name="username" id="username" class="input-field" placeholder="ÙÙزر اÙ٠دÙر" value="" required autocomplete="username"> 350 <i class="fas fa-user input-icon"></i> 351 </div> 352 </div> 353 354 <div class="input-group"> 355 <label for="password">ÙÙÙ Ø© اÙ٠رÙر</label> 356 <div class="input-wrapper"> 357 <input type="password" name="password" id="password" class="input-field" required autocomplete="current-password"> 358 <i class="fas fa-lock input-icon"></i> 359 </div> 360 </div> 361 362 <div class="remember-me-group"> 363 <label class="checkbox-container"> 364 تذÙرÙÙ <input type="checkbox" id="remember_me" name="remember_me" >
365 <span class="checkmark"></span> 366 </label> 367 </div> 368 369 <button type="submit" class="login-button"> 370 دخÙÙ <i class="fas fa-arrow-right"></i> 371 </button> 372 </form> 373 374 <div class="register-link"> 375 ÙÙس ÙدÙÙ ØØ³Ø§Ø¨Ø <a href="register.php">سج٠ÙÙا.</a> 376 </div> 377 </div> 378 <div class="brand-links"> 379 <a href="https://iq-viral.com/" class="brand-link-item" target="_blank" rel="noopener noreferrer" title="اÙÙ ÙÙع اÙرس٠Ù"> 380 <i class="fas fa-globe"></i> 381 <span>اÙÙ ÙÙع: iq-viral.com</span> 382 </a> 383 <a href="https://t.me/a4ali8" class="brand-link-item telegram" target="_blank" rel="noopener noreferrer" title="اÙدع٠عبر تÙÙÙجرا٠"> 384 <i class="fab fa-telegram-plane"></i> 385 <span>اÙدع٠: @a4ali8</span> 386 </a> 387 <div class="brand-links-actions"> 388 <a href="https://play.google.com/store/apps/details?id=com.vitik.app&hl=en_IE" class="playstore-icon-link" target="_blank" rel="noopener noreferrer" title="Google Play" aria-label="Download from Google Play"> 389 <i class="fab fa-google-play"></i> 390 </a> 391 </div> 392 <div class="copyright-footer"> 393 <p>© 2026 ViTik. All Rights Reserved.</p> 394 <div class="footer-social-links"> 395 <a href="/cdn-cgi/l/email-protection#2e4f4247484f4a4b4200475f1f6e49434f4742004d4143" target="_blank" title="Email"><i class="fas fa-envelope"></i></a> 396 <a href="https://www.facebook.com/97ali972" target="_blank" title="Facebook"><i class="fab fa-facebook"></i></a> 397 </div> 398 </div> 399 </div> 400 </div>
vendor: 116 bytes, lines 400-402
400 401 402 <script data-cfasync="false" src="/cdn-cgi/scripts/5c5dd728/cloudflare-static/email-decode.min.js"></script>
402<script> 403 // --- Toast Notifications Logic --- 404 function showToast(msg, type) { 405 const container = document.getElementById('toast-container'); 406 const toast = document.createElement('div'); 407 toast.className = `toast ${type}`; 408 409 let icon = type === 'success' ? 'fa-check-circle' : 'fa-exclamation-circle'; 410 411 toast.innerHTML = `<i class="fas ${icon}"></i> <span>${msg}</span>`; 412 container.appendChild(toast); 413 414 setTimeout(() => { 415 toast.style.opacity = '0'; 416 toast.style.transform = 'translateY(-20px)'; 417 setTimeout(() => toast.remove(), 300); 418 }, 4000); 419 } 420 421 document.addEventListener('DOMContentLoaded', function() { 422 const message = ""; 423 const messageType = ""; 424 425 if (message && message.length > 0) { 426 showToast(message, messageType); 427 } 428 }); 429 </script>
429 430 431
431<script src='assets/tg-animations.js'></script>
vendor: 2 bytes, line 431
431
432<script type="module" src="https://static.cloudflareinsights.com/beacon.min.js/v31edd6df95cf4e85bb4c19e7a9bdbcba1788362987495" integrity="sha512-iIg7k2xntmwu6/uSb5tpc/hySgZc4eoL31yB29W6tJFo2akwjPWcEqnCEdJvGexCL0KEQwVYv5BlowfhVz26hg==" data-cf-beacon='{"version":"2024.11.0","token":"3ca66a2819bc4bb693817b2d19d3f913","r":1,"spa":2}' crossorigin="anonymous"></script>
432 433</body> 434</html>
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.