.nav { padding: 15px 40px; display: flex; justify-content: space-between; align-items: center; background: rgba(0, 20, 0, 0.9); backdrop-filter: blur(10px); position: relative; z-index: 10; border-bottom: 2px solid #00ff00; box-shadow: 0 0 20px rgba(0, 255, 0, 0.3); } .logo { display: flex; align-items: center; gap: 12px; } .logo-icon { width: 40px; height: 40px; background: #001100; border: 2px solid #00ff00; border-radius: 4px; display: flex; align-items: center; justify-content: center; font-weight: 900; font-size: 20px; color: #00ff00; animation: digital-glow 3s ease-in-out infinite; font-family: 'Courier New', monospace; text-shadow: 0 0 10px #00ff00; } .logo-text { font-size: 18px; font-weight: 700; color: #00ff00; text-shadow: 0 0 10px #00ff00; font-family: 'Courier New', monospace; letter-spacing: 2px; } .logo-text::before { content: '> '; color: #00ff00; } .nav-link { color: #00ff00; text-decoration: none; font-size: 14px; transition: all 0.3s; display: flex; align-items: center; gap: 6px; border: 1px solid #00ff00; padding: 8px 16px; background: rgba(0, 255, 0, 0.05); font-family: 'Courier New', monospace; } .nav-link:hover { background: rgba(0, 255, 0, 0.2); box-shadow: 0 0 15px rgba(0, 255, 0, 0.5); text-shadow: 0 0 10px #00ff00; } .main { flex: 1; display: flex; align-items: center; justify-content: center; padding: 40px 20px; position: relative; z-index: 5; } .card { background: rgba(0, 20, 0, 0.95); border: 3px solid #00ff00; border-radius: 0; padding: 50px 60px; text-align: center; max-width: 500px; width: 100%; backdrop-filter: blur(20px); box-shadow: 0 0 30px rgba(0, 255, 0, 0.5), inset 0 0 30px rgba(0, 255, 0, 0.1); position: relative; animation: terminal-flicker 0.15s infinite alternate; } @keyframes terminal-flicker { 0% { opacity: 0.98; } 100% { opacity: 1; } } .card::before { content: ''; position: absolute; top: 10px; left: 10px; right: 10px; bottom: 10px; border: 1px solid rgba(0, 255, 0, 0.3); pointer-events: none; } .card::after { content: 'SECURE CONNECTION ESTABLISHED'; position: absolute; top: -12px; left: 50%; transform: translateX(-50%); background: #000000; color: #00ff00; font-size: 10px; padding: 2px 12px; font-family: 'Courier New', monospace; letter-spacing: 1px; } .card-logo { width: 80px; height: 80px; background: #000000; border: 3px solid #00ff00; border-radius: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; font-weight: 900; font-size: 28px; color: #00ff00; margin: 0 auto 28px; animation: digital-glow 3s ease-in-out infinite; position: relative; overflow: hidden; } .card-logo::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(0, 255, 0, 0.3), transparent); animation: scan-line 2s linear infinite; } @keyframes scan-line { 0% { left: -100%; } 100% { left: 100%; } } .db-text { font-size: 10px; color: #00ff00; margin-top: 4px; letter-spacing: 2px; } .card-title { font-size: 24px; font-weight: 700; color: #00ff00; margin-bottom: 10px; line-height: 1.3; text-shadow: 0 0 15px #00ff00; font-family: 'Courier New', monospace; letter-spacing: 2px; text-transform: uppercase; } .card-title::before { content: '[ '; color: #00ff00; } .card-title::after { content: ' ]'; color: #00ff00; } .card-subtitle { font-size: 12px; font-weight: 500; color: #00ff00; margin-bottom: 32px; text-shadow: 0 0 10px #00ff00; letter-spacing: 3px; opacity: 0.7; font-family: 'Courier New', monospace; } .system-status { display: flex; justify-content: space-between; margin-bottom: 24px; font-size: 11px; color: #00ff00; font-family: 'Courier New', monospace; opacity: 0.8; } .status-item { display: flex; align-items: center; gap: 4px; } .status-dot { width: 6px; height: 6px; background: #00ff00; border-radius: 50%; animation: pulse-dot 2s ease-in-out infinite; } @keyframes pulse-dot { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } } .input-group { margin-bottom: 20px; text-align: left; } .input-label { display: block; color: #00ff00; font-size: 11px; font-weight: 700; margin-bottom: 8px; text-transform: uppercase; letter-spacing: 2px; font-family: 'Courier New', monospace; } .input-label::before { content: '> '; } .input-field { width: 100%; background: #000000; border: 2px solid #00ff00; padding: 12px 16px; border-radius: 0; color: #00ff00; font-size: 14px; outline: none; transition: all 0.3s; font-family: 'Courier New', monospace; box-shadow: inset 0 0 10px rgba(0, 255, 0, 0.2); } .input-field:focus { box-shadow: 0 0 20px rgba(0, 255, 0, 0.5), inset 0 0 10px rgba(0, 255, 0, 0.3); background: rgba(0, 255, 0, 0.05); } .input-field::placeholder { color: rgba(0, 255, 0, 0.4); font-family: 'Courier New', monospace; } .btn { background: #000000; color: #00ff00; padding: 14px 48px; border-radius: 0; font-weight: 700; font-size: 14px; text-decoration: none; display: inline-block; transition: all 0.3s; border: 2px solid #00ff00; cursor: pointer; width: 100%; margin-top: 12px; font-family: 'Courier New', monospace; letter-spacing: 2px; text-transform: uppercase; position: relative; overflow: hidden; } .btn::before { content: '>> '; } .btn::after { content: ' <<'; } .btn:hover { background: #00ff00; color: #000000; box-shadow: 0 0 30px rgba(0, 255, 0, 0.8); text-shadow: none; } .divider { margin: 32px 0; border-top: 1px solid #00ff00; position: relative; opacity: 0.3; } .divider-text { position: absolute; top: -10px; left: 50%; transform: translateX(-50%); background: rgba(0, 20, 0, 0.95); color: #00ff00; font-size: 10px; padding: 0 12px; font-family: 'Courier New', monospace; letter-spacing: 2px; font-weight: 600; } .link-text { color: #00ff00; text-decoration: none; font-weight: 600; transition: all 0.3s; display: inline-block; font-family: 'Courier New', monospace; font-size: 13px; border: 1px solid #00ff00; padding: 8px 16px; background: rgba(0, 255, 0, 0.05); } .link-text::before { content: '[ '; } .link-text::after { content: ' ]'; } .link-text:hover { background: rgba(0, 255, 0, 0.2); box-shadow: 0 0 15px rgba(0, 255, 0, 0.5); text-shadow: 0 0 10px #00ff00; } .error-message { background: rgba(255, 0, 0, 0.1); border: 2px solid #ff0000; color: #ff0000; padding: 12px; border-radius: 0; font-size: 12px; margin-bottom: 20px; text-align: center; font-family: 'Courier New', monospace; animation: error-blink 0.5s ease-in-out 3; } @keyframes error-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } } .error-message::before { content: '⚠ ERROR: '; font-weight: 700; } .success-message { background: rgba(0, 255, 0, 0.1); border: 2px solid #00ff00; color: #00ff00; padding: 12px; border-radius: 0; font-size: 12px; margin-bottom: 20px; text-align: center; font-family: 'Courier New', monospace; } .success-message::before { content: '✓ SUCCESS: '; font-weight: 700; } .footer { padding: 20px; text-align: center; color: #00ff00; font-size: 11px; position: relative; z-index: 10; background: rgba(0, 20, 0, 0.9); border-top: 2px solid #00ff00; text-shadow: 0 0 10px #00ff00; font-family: 'Courier New', monospace; letter-spacing: 1px; } .footer::before { content: '[ '; } .footer::after { content: ' ]'; } /* Admin Panel Styles */ .admin-container { padding: 40px 20px; max-width: 1400px; margin: 0 auto; position: relative; z-index: 5; } .admin-header { background: rgba(0, 20, 0, 0.95); border: 3px solid #00ff00; border-radius: 0; padding: 30px 40px; margin-bottom: 40px; backdrop-filter: blur(20px); display: flex; justify-content: space-between; align-items: center; box-shadow: 0 0 30px rgba(0, 255, 0, 0.5); } .admin-title { font-size: 24px; font-weight: 700; color: #00ff00; text-shadow: 0 0 20px #00ff00; font-family: 'Courier New', monospace; letter-spacing: 3px; } .admin-title::before { content: '>> '; } .admin-user { color: #00ff00; font-size: 11px; font-family: 'Courier New', monospace; opacity: 0.8; margin-top: 8px; } .admin-user::before { content: 'USER: '; font-weight: 700; } .btn-secondary { background: #000000; border: 2px solid #00ff00; color: #00ff00; padding: 10px 20px; border-radius: 0; font-size: 12px; text-decoration: none; transition: all 0.3s; display: inline-block; font-family: 'Courier New', monospace; letter-spacing: 1px; } .btn-secondary:hover { background: #00ff00; color: #000000; box-shadow: 0 0 20px rgba(0, 255, 0, 0.8); } .upload-card { background: rgba(0, 20, 0, 0.95); border: 3px solid #00ff00; border-radius: 0; padding: 40px; margin-bottom: 40px; backdrop-filter: blur(20px); box-shadow: 0 0 30px rgba(0, 255, 0, 0.5); } .upload-title { font-size: 18px; font-weight: 700; color: #00ff00; margin-bottom: 24px; text-align: center; text-shadow: 0 0 15px #00ff00; font-family: 'Courier New', monospace; letter-spacing: 2px; text-transform: uppercase; } .upload-title::before { content: '< '; } .upload-title::after { content: ' >'; } .file-input { width: 100%; padding: 12px; background: #000000; border: 2px solid #00ff00; border-radius: 0; color: #00ff00; font-size: 13px; cursor: pointer; font-family: 'Courier New', monospace; } .file-input::file-selector-button { background: #000000; color: #00ff00; border: 1px solid #00ff00; padding: 8px 16px; border-radius: 0; font-weight: 600; cursor: pointer; margin-right: 10px; font-family: 'Courier New', monospace; transition: all 0.3s; } .file-input::file-selector-button:hover { background: #00ff00; color: #000000; } .meme-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 24px; } .meme-card { background: rgba(0, 20, 0, 0.95); border: 2px solid #00ff00; border-radius: 0; padding: 16px; backdrop-filter: blur(20px); transition: all 0.3s; box-shadow: 0 0 10px rgba(0, 255, 0, 0.3); } .meme-card:hover { border-color: #00ff00; transform: translateY(-5px); box-shadow: 0 0 30px rgba(0, 255, 0, 0.6); } .meme-preview { width: 100%; height: 200px; background: #000; border: 1px solid #00ff00; border-radius: 0; overflow: hidden; margin-bottom: 12px; display: flex; align-items: center; justify-content: center; } .meme-preview img { width: 100%; height: 100%; object-fit: cover; } .video-indicator { color: #00ff00; font-size: 12px; font-weight: 700; font-family: 'Courier New', monospace; animation: pulse-dot 2s ease-in-out infinite; } .meme-name { color: #00ff00; font-size: 11px; font-weight: 600; margin-bottom: 10px; text-align: center; word-break: break-all; font-family: 'Courier New', monospace; } .embed-link { width: 100%; background: #000000; border: 1px solid #00ff00; padding: 8px; border-radius: 0; color: #00ff00; font-size: 9px; text-align: center; margin-bottom: 10px; cursor: pointer; font-family: 'Courier New', monospace; } .btn-delete { width: 100%; background: #000000; border: 2px solid #ff0000; color: #ff0000; padding: 8px; border-radius: 0; font-size: 11px; font-weight: 600; cursor: pointer; transition: all 0.3s; font-family: 'Courier New', monospace; letter-spacing: 1px; } .btn-delete:hover { background: #ff0000; color: #000000; box-shadow: 0 0 20px rgba(255, 0, 0, 0.8); } .btn-delete::before { content: '[ '; } .btn-delete::after { content: ' ]'; }

Access Control

DATABASE AUTHENTICATION REQUIRED

SYSTEM ONLINE
SECURE
NEW USER
Register Account