Selamat Datang

Masuk ke Panel Buku Induk

Contoh: admin_buku_induk atau nama pengguna yang diberikan
Lupa kata sandi?
Belum punya akun? Hubungi Administrator
📖

Sistem Buku Induk

Kelola data induk siswa dan dokumentasi administratif sekolah dengan aman

.form-section { width: 50%; padding: 60px 50px; display: flex; flex-direction: column; justify-content: center; position: relative; } .form-section::before { content: ''; position: absolute; right: 0; top: 0; bottom: 0; width: 1px; background: linear-gradient(to bottom, transparent, var(--border-color), transparent); } .toggle-section { width: 50%; background: linear-gradient(135deg, var(--primary) 0%, var(--primary-darker) 100%); color: #fff; padding: 60px 50px; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; position: relative; overflow: hidden; } .toggle-section::before { content: ''; position: absolute; top: -50%; right: -50%; width: 300px; height: 300px; background: rgba(255, 255, 255, 0.05); border-radius: 50%; animation: float 6s ease-in-out infinite; } @keyframes float { 0%, 100% { transform: translateY(0px) translateX(0px); } 50% { transform: translateY(20px) translateX(20px); } } .form-header { margin-bottom: 35px; } .form-title { font-size: 32px; font-weight: 700; color: var(--text-dark); margin-bottom: 8px; letter-spacing: -0.5px; } .form-subtitle { font-size: 13px; color: var(--text-light); font-weight: 500; } .toggle-emoji { font-size: 70px; margin-bottom: 25px; display: inline-block; animation: bounce 2s ease-in-out infinite; } @keyframes bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } } .toggle-title { font-size: 28px; font-weight: 700; margin-bottom: 15px; line-height: 1.3; letter-spacing: -0.5px; } .toggle-subtitle { font-size: 13px; margin-bottom: 35px; opacity: 0.95; line-height: 1.6; font-weight: 400; } .toggle-btn { background: rgba(255, 255, 255, 0.2); border: 2px solid #fff; color: #fff; padding: 12px 50px; border-radius: 10px; font-size: 12px; font-weight: 700; cursor: pointer; transition: all 0.3s ease; text-transform: uppercase; letter-spacing: 1px; position: relative; z-index: 1; } .toggle-btn:hover { background: rgba(255, 255, 255, 0.3); transform: translateY(-2px); box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2); } .form-group { margin-bottom: 20px; animation: fadeIn 0.5s ease-out forwards; opacity: 0; } .form-group:nth-child(2) { animation-delay: 0.1s; } .form-group:nth-child(3) { animation-delay: 0.2s; } @keyframes fadeIn { to { opacity: 1; } } label { display: block; margin-bottom: 10px; color: var(--text-dark); font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; } .input-group { position: relative; display: flex; align-items: center; } .input-icon { position: absolute; left: 15px; color: var(--text-light); pointer-events: none; font-size: 16px; } input { width: 100%; padding: 13px 15px 13px 45px; border: 2px solid var(--border-color); border-radius: 10px; font-size: 14px; font-weight: 500; color: var(--text-dark); background: var(--bg-light); transition: all 0.3s ease; font-family: 'Poppins', sans-serif; } input::placeholder { color: #bbb; } input:focus { outline: none; border-color: var(--primary); background: #fff; box-shadow: 0 0 0 4px rgba(231, 76, 60, 0.1); } .error-msg { background: #fff5f5; color: #d32f2f; padding: 13px 16px; border-radius: 10px; margin-bottom: 25px; display: none; border: 1px solid #ffebee; font-size: 13px; font-weight: 500; animation: slideDown 0.3s ease-out; } @keyframes slideDown { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } } .error-msg.show { display: block; } .login-btn { width: 100%; padding: 14px 16px; background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%); color: #fff; border: none; border-radius: 10px; font-size: 14px; font-weight: 700; cursor: pointer; transition: all 0.3s ease; text-transform: uppercase; letter-spacing: 1px; margin-top: 25px; position: relative; overflow: hidden; box-shadow: 0 4px 15px rgba(231, 76, 60, 0.3); } .login-btn::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: rgba(255, 255, 255, 0.1); transition: left 0.3s ease; } .login-btn:hover::before { left: 100%; } .login-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(231, 76, 60, 0.4); } .login-btn:active { transform: translateY(0); } .forgot-password { text-align: center; margin-top: 18px; } .forgot-password a { color: var(--primary); text-decoration: none; font-size: 12px; font-weight: 600; transition: color 0.3s ease; } .forgot-password a:hover { color: var(--primary-dark); text-decoration: underline; } .info-msg { background: #f0f7ff; color: #1565c0; padding: 13px 16px; border-radius: 10px; margin-top: 20px; border: 1px solid #bbdefb; font-size: 12px; font-weight: 500; text-align: center; line-height: 1.5; } @media (max-width: 900px) { .form-section { padding: 50px 40px; } .toggle-section { padding: 50px 40px; } } @media (max-width: 768px) { .container { flex-direction: column; max-height: 100%; border-radius: 15px; } .form-section, .toggle-section { width: 100%; padding: 40px 30px; } .form-section::before { display: none; } .toggle-section { order: 2; padding: 30px; } .form-section { order: 1; } .form-title { font-size: 26px; } .toggle-title { font-size: 22px; } .toggle-emoji { font-size: 50px; } }

Selamat Datang

Masuk ke Panel Buku Induk

Lupa kata sandi?
Belum punya akun? Hubungi Administrator
📖

Sistem Buku Induk

Kelola data induk siswa dan dokumentasi administratif sekolah dengan aman