0% found this document useful (0 votes)

3 views113 pages

Doctype HTML

The document is an HTML template for a website titled 'SDIT Al Fatih Kota Tangerang'. It includes extensive CSS styles for layout, typography, colors, borders, shadows, and transitions, aimed at creating a responsive and visually appealing design. The styles are organized into utility classes for easy application throughout the webpage.

Uploaded by

muaz jamaludin

We take content rights seriously. If you suspect this is your content, claim it here.

Available Formats

Download as DOCX, PDF, TXT or read online on Scribd

0% found this document useful (0 votes)

3 views113 pages

Doctype HTML

Uploaded by

muaz jamaludin

We take content rights seriously. If you suspect this is your content, claim it here.

Available Formats

Download as DOCX, PDF, TXT or read online on Scribd

<!

doctype html>

<head>

<meta name="viewport" content="width=device-width, initial-

scale=1.0">

<title>SDIT Al Fatih Kota Tangerang</title>

<style>

/* Reset & Base Styles */

margin: 0;

padding: 0;

box-sizing: border-box;

body {

font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI',

Roboto, 'Helvetica Neue', Arial, sans-serif;

line-height: 1.6;

color: #1f2937;

box-sizing: border-box;

/* Utility Classes */

.container {

width: 100%;

max-width: 1280px;

margin-left: auto;

margin-right: auto;

padding-left: 1rem;
padding-right: 1rem;

.flex { display: flex; }

.inline-flex { display: inline-flex; }

.inline-block { display: inline-block; }

.block { display: block; }

.hidden { display: none; }

.grid { display: grid; }

.flex-col { flex-direction: column; }

.flex-wrap { flex-wrap: wrap; }

.items-center { align-items: center; }

.items-start { align-items: flex-start; }

.justify-center { justify-content: center; }

.justify-between { justify-content: space-between; }

.flex-1 { flex: 1; }

.flex-shrink-0 { flex-shrink: 0; }

.grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }

.grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.gap-1 { gap: 0.25rem; }

.gap-2 { gap: 0.5rem; }

.gap-3 { gap: 0.75rem; }

.gap-4 { gap: 1rem; }

.gap-6 { gap: 1.5rem; }

.gap-8 { gap: 2rem; }

.space-x-1 > * + * { margin-left: 0.25rem; }

.space-x-2 > * + * { margin-left: 0.5rem; }

.space-x-3 > * + * { margin-left: 0.75rem; }

.space-x-4 > * + * { margin-left: 1rem; }

.space-y-1 > * + * { margin-top: 0.25rem; }

.space-y-2 > * + * { margin-top: 0.5rem; }

.space-y-3 > * + * { margin-top: 0.75rem; }

.space-y-4 > * + * { margin-top: 1rem; }

/* Spacing */

.p-1 { padding: 0.25rem; }

.p-2 { padding: 0.5rem; }

.p-3 { padding: 0.75rem; }

.p-4 { padding: 1rem; }

.p-6 { padding: 1.5rem; }

.p-8 { padding: 2rem; }

.px-1 { padding-left: 0.25rem; padding-right: 0.25rem; }

.px-2 { padding-left: 0.5rem; padding-right: 0.5rem; }

.px-3 { padding-left: 0.75rem; padding-right: 0.75rem; }

.px-4 { padding-left: 1rem; padding-right: 1rem; }

.px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }

.py-1 { padding-top: 0.25rem; padding-bottom: 0.25rem; }

.py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; }

.py-3 { padding-top: 0.75rem; padding-bottom: 0.75rem; }

.py-4 { padding-top: 1rem; padding-bottom: 1rem; }

.py-12 { padding-top: 3rem; padding-bottom: 3rem; }

.py-20 { padding-top: 5rem; padding-bottom: 5rem; }

.m-0 { margin: 0; }

.mx-auto { margin-left: auto; margin-right: auto; }

.mb-1 { margin-bottom: 0.25rem; }

.mb-2 { margin-bottom: 0.5rem; }

.mb-3 { margin-bottom: 0.75rem; }

.mb-4 { margin-bottom: 1rem; }

.mb-6 { margin-bottom: 1.5rem; }

.mb-8 { margin-bottom: 2rem; }

.mb-12 { margin-bottom: 3rem; }

.mb-16 { margin-bottom: 4rem; }

.mt-1 { margin-top: 0.25rem; }

.mt-2 { margin-top: 0.5rem; }

.mt-4 { margin-top: 1rem; }

.mt-6 { margin-top: 1.5rem; }

.mr-2 { margin-right: 0.5rem; }

.mr-3 { margin-right: 0.75rem; }

.mr-4 { margin-right: 1rem; }

.mr-6 { margin-right: 1.5rem; }

.ml-2 { margin-left: 0.5rem; }

/* Width & Height */

.w-2 { width: 0.5rem; }

.w-4 { width: 1rem; }

.w-5 { width: 1.25rem; }

.w-6 { width: 1.5rem; }

.w-8 { width: 2rem; }

.w-10 { width: 2.5rem; }

.w-12 { width: 3rem; }

.w-16 { width: 4rem; }

.w-20 { width: 5rem; }

.w-24 { width: 6rem; }

.w-32 { width: 8rem; }

.w-full { width: 100%; }

.h-2 { height: 0.5rem; }

.h-4 { height: 1rem; }

.h-5 { height: 1.25rem; }

.h-6 { height: 1.5rem; }

.h-8 { height: 2rem; }

.h-10 { height: 2.5rem; }

.h-12 { height: 3rem; }

.h-16 { height: 4rem; }

.h-20 { height: 5rem; }

.h-24 { height: 6rem; }

.h-32 { height: 8rem; }

.h-40 { height: 10rem; }

.h-48 { height: 12rem; }

.h-64 { height: 16rem; }

.h-full { height: 100%; }

.min-h-full { min-height: 100%; }

.min-h-screen { min-height: 100vh; }

.max-w-md { max-width: 28rem; }

.max-w-4xl { max-width: 56rem; }

.max-w-6xl { max-width: 72rem; }

.max-w-7xl { max-width: 80rem; }

.max-w-none { max-width: none; }

/* Typography */

.text-xs { font-size: 0.75rem; line-height: 1rem; }

.text-sm { font-size: 0.875rem; line-height: 1.25rem; }

.text-base { font-size: 1rem; line-height: 1.5rem; }

.text-lg { font-size: 1.125rem; line-height: 1.75rem; }

.text-xl { font-size: 1.25rem; line-height: 1.75rem; }

.text-2xl { font-size: 1.5rem; line-height: 2rem; }

.text-3xl { font-size: 1.875rem; line-height: 2.25rem; }

.text-4xl { font-size: 2.25rem; line-height: 2.5rem; }

.text-5xl { font-size: 3rem; line-height: 1; }

.text-6xl { font-size: 3.75rem; line-height: 1; }

.font-medium { font-weight: 500; }

.font-semibold { font-weight: 600; }

.font-bold { font-weight: 700; }

.text-left { text-align: left; }

.text-center { text-align: center; }

.text-right { text-align: right; }

.leading-tight { line-height: 1.25; }

.leading-relaxed { line-height: 1.625; }

/* Colors */

.text-white { color: #ffffff; }

.text-gray-500 { color: #6b7280; }

.text-gray-600 { color: #4b5563; }

.text-gray-700 { color: #374151; }

.text-gray-800 { color: #1f2937; }

.text-blue-100 { color: #dbeafe; }

.text-blue-200 { color: #bfdbfe; }

.text-blue-500 { color: #3b82f6; }

.text-blue-600 { color: #2563eb; }

.text-blue-700 { color: #1d4ed8; }

.text-blue-800 { color: #1e40af; }

.text-green-500 { color: #10b981; }

.text-green-600 { color: #059669; }

.text-green-700 { color: #047857; }

.text-green-800 { color: #065f46; }

.text-red-500 { color: #ef4444; }

.text-red-600 { color: #dc2626; }

.text-red-800 { color: #991b1b; }

.text-yellow-300 { color: #fcd34d; }

.text-yellow-600 { color: #ca8a04; }

.text-yellow-700 { color: #a16207; }

.text-yellow-800 { color: #854d0e; }

.text-purple-600 { color: #9333ea; }

.text-purple-800 { color: #6b21a8; }

.text-pink-600 { color: #db2777; }

.text-pink-800 { color: #9f1239; }

.text-orange-500 { color: #f97316; }

.bg-white { background-color: #ffffff; }

.bg-gray-50 { background-color: #f9fafb; }

.bg-gray-100 { background-color: #f3f4f6; }

.bg-gray-200 { background-color: #e5e7eb; }

.bg-blue-50 { background-color: #eff6ff; }

.bg-blue-100 { background-color: #dbeafe; }

.bg-blue-200 { background-color: #bfdbfe; }

.bg-blue-500 { background-color: #3b82f6; }

.bg-blue-600 { background-color: #2563eb; }

.bg-green-50 { background-color: #f0fdf4; }

.bg-green-100 { background-color: #dcfce7; }

.bg-green-200 { background-color: #bbf7d0; }

.bg-green-500 { background-color: #10b981; }

.bg-green-600 { background-color: #059669; }

.bg-red-50 { background-color: #fef2f2; }

.bg-red-100 { background-color: #fee2e2; }

.bg-red-200 { background-color: #fecaca; }

.bg-red-500 { background-color: #ef4444; }

.bg-yellow-50 { background-color: #fefce8; }

.bg-yellow-100 { background-color: #fef9c3; }

.bg-yellow-500 { background-color: #eab308; }

.bg-purple-50 { background-color: #faf5ff; }

.bg-purple-100 { background-color: #f3e8ff; }

.bg-purple-500 { background-color: #a855f7; }

.bg-pink-500 { background-color: #ec4899; }

.bg-orange-500 { background-color: #f97316; }

/* Borders */

.border { border-width: 1px; }

.border-2 { border-width: 2px; }

.border-4 { border-width: 4px; }

.border-l-4 { border-left-width: 4px; }

.border-b { border-bottom-width: 1px; }

.border-b-2 { border-bottom-width: 2px; }

.border-gray-200 { border-color: #e5e7eb; }

.border-gray-300 { border-color: #d1d5db; }

.border-blue-200 { border-color: #bfdbfe; }

.border-blue-500 { border-color: #3b82f6; }

.border-green-100 { border-color: #dcfce7; }

.border-green-200 { border-color: #bbf7d0; }

.border-green-500 { border-color: #10b981; }

.border-red-200 { border-color: #fecaca; }

.border-red-500 { border-color: #ef4444; }

.border-yellow-200 { border-color: #fef08a; }

.border-yellow-300 { border-color: #fde047; }

.border-yellow-400 { border-color: #facc15; }

.border-orange-500 { border-color: #f97316; }

.border-pink-500 { border-color: #ec4899; }

.rounded { border-radius: 0.25rem; }

.rounded-lg { border-radius: 0.5rem; }

.rounded-xl { border-radius: 0.75rem; }

.rounded-2xl { border-radius: 1rem; }

.rounded-3xl { border-radius: 1.5rem; }

.rounded-full { border-radius: 9999px; }

.rounded-tl-lg { border-top-left-radius: 0.5rem; }

.rounded-tr-lg { border-top-right-radius: 0.5rem; }

.rounded-bl-lg { border-bottom-left-radius: 0.5rem; }

.rounded-br-lg { border-bottom-right-radius: 0.5rem; }

/* Shadows */

.shadow-lg { box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px

6px -2px rgba(0, 0, 0, 0.05); }

.shadow-2xl { box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); }

/* Position */

.fixed { position: fixed; }

.absolute { position: absolute; }

.relative { position: relative; }

.top-0 { top: 0; }

.right-0 { right: 0; }

.bottom-0 { bottom: 0; }

.left-0 { left: 0; }

.inset-0 { top: 0; right: 0; bottom: 0; left: 0; }

.z-10 { z-index: 10; }

.z-50 { z-index: 50; }

.z-999 { z-index: 999; }

.z-1000 { z-index: 1000; }

/* Overflow */

.overflow-hidden { overflow: hidden; }

.overflow-y-auto { overflow-y: auto; }

.overflow-x-auto { overflow-x: auto; }

/* Transform */

.transform { transform: translateX(0) translateY(0) rotate(0)

skewX(0) skewY(0) scaleX(1) scaleY(1); }

.translate-x-full { transform: translateX(100%); }

.-translate-x-1\/2 { transform: translateX(-50%); }

.translateY$-2px$ { transform: translateY(-2px); }

.translateY$-3px$ { transform: translateY(-3px); }

/* Transitions */

.transition-all { transition-property: all; transition-timing-function:

cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; }

.transition-colors { transition-property: color, background-color,

border-color; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms; }

.transition-transform { transition-property: transform; transition-

timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 300ms; }

.duration-300 { transition-duration: 300ms; }

/* Animations */

.animate-spin {

animation: spin 1s linear infinite;

.animate-pulse {

animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;

@keyframes spin {

from { transform: rotate(0deg); }

to { transform: rotate(360deg); }

@keyframes pulse {

0%, 100% { opacity: 1; }

50% { opacity: .5; }

}
/* Opacity */

.opacity-10 { opacity: 0.1; }

.opacity-90 { opacity: 0.9; }

/* Cursor */

.cursor-pointer { cursor: pointer; }

/* Object Fit */

.object-cover { object-fit: cover; }

.object-contain { object-fit: contain; }

.object-top { object-position: top; }

/* Hover States */

button:hover, a:hover { opacity: 0.9; }

.page {

min-height: 100vh;

width: 100%;

display: none;

padding-top: 70px;

.[Link] {

display: block;

.arabic-text {

font-family: 'Amiri', 'Times New Roman', serif;

font-size: 2rem;
font-weight: bold;

.hero-bg {

background: linear-gradient(135deg, #1e40af 0%, #3b82f6 50%,

#60a5fa 100%);

.card-shadow {

box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);

transition: transform 0.3s ease, box-shadow 0.3s ease;

.card-shadow:hover {

transform: translateY(-3px);

box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);

.btn-primary {

background: linear-gradient(45deg, #059669, #10b981);

transition: all 0.3s ease;

.btn-primary:hover {

background: linear-gradient(45deg, #047857, #059669);

transform: translateY(-2px);

.section-bg {
background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);

.profile-img {

border: 4px solid #ffffff;

box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);

.icon-bg {

background: linear-gradient(135deg, #3b82f6, #1d4ed8);

.achievement-card {

background: linear-gradient(135deg, #fbbf24, #f59e0b);

/* Navigation Styles */

.nav-container {

background: linear-gradient(135deg, #1e40af 0%, #3b82f6

100%);

box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);

backdrop-filter: blur(10px);

.nav-item {

transition: all 0.3s ease;

position: relative;

padding: 0.75rem 1rem;

border-radius: 0.5rem;
cursor: pointer;

.nav-item:hover {

background-color: rgba(255, 255, 255, 0.1);

.[Link] {

background-color: rgba(255, 255, 255, 0.2);

.dropdown {

position: absolute;

top: 100%;

left: 0;

background: white;

min-width: 220px;

box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);

border-radius: 0.75rem;

opacity: 0;

visibility: hidden;

transform: translateY(-10px);

transition: all 0.3s ease;

z-index: 1000;

overflow: hidden;

.nav-item:hover .dropdown {

opacity: 1;
visibility: visible;

transform: translateY(0);

.dropdown button {

display: block;

padding: 0.875rem 1.25rem;

color: #374151;

text-decoration: none;

transition: background-color 0.3s ease;

background: transparent;

border: none;

cursor: pointer;

width: 100%;

text-align: left;

font-size: 0.9rem;

.dropdown button:hover {

background-color: #f3f4f6;

/* Mobile Navigation */

.mobile-nav-toggle {

display: none;

.mobile-menu {

display: none;
position: absolute;

top: 100%;

left: 0;

right: 0;

background: rgba(30, 64, 175, 0.95);

backdrop-filter: blur(10px);

border-radius: 0 0 1rem 1rem;

box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);

z-index: 999;

.[Link] {

display: block;

.mobile-menu-item {

padding: 0.875rem 1.25rem;

color: white;

border: none;

background: transparent;

cursor: pointer;

width: 100%;

text-align: left;

font-size: 0.9rem;

transition: all 0.3s ease;

border-bottom: 1px solid rgba(255, 255, 255, 0.1);

.mobile-menu-item:hover {
background-color: rgba(255, 255, 255, 0.1);

padding-left: 1.75rem;

.mobile-submenu {

background-color: rgba(0, 0, 0, 0.1);

padding-left: 1.5rem;

.mobile-submenu-item {

padding: 0.625rem 1.25rem;

color: rgba(255, 255, 255, 0.9);

font-size: 0.8rem;

/* Responsive Design */

@media (max-width: 1279px) {

.desktop-nav {

display: none;

.mobile-nav-toggle {

display: flex;

@media (max-width: 768px) {

.page {

padding-top: 80px;
}

.arabic-text {

font-size: 1.5rem;

.hero-bg h1 {

font-size: 2rem !important;

.hero-bg h2 {

font-size: 1.25rem !important;

.text-4xl {

font-size: 1.875rem !important;

.text-3xl {

font-size: 1.5rem !important;

.text-2xl {

font-size: 1.25rem !important;

.py-20 {

padding-top: 2rem !important;

padding-bottom: 2rem !important;

}

.mb-16 {

margin-bottom: 2rem !important;

.card-shadow {

padding: 1.25rem !important;

margin-bottom: 1rem;

.profile-img {

width: 100px !important;

height: 100px !important;

.grid {

gap: 1rem !important;

.management-grid {

grid-template-columns: repeat(2, 1fr) !important;

.management-grid .profile-img {

width: 80px !important;

height: 80px !important;

}
.management-grid h4 {

font-size: 0.875rem !important;

.management-grid p {

font-size: 0.75rem !important;

@media (max-width: 480px) {

.hero-bg h1 {

font-size: 1.75rem !important;

.hero-bg h2 {

font-size: 1.125rem !important;

.text-4xl {

font-size: 1.5rem !important;

.container {

padding-left: 0.75rem !important;

padding-right: 0.75rem !important;

.management-grid {

grid-template-columns: 1fr !important;

}

.mobile-menu-item {

font-size: 0.85rem;

padding: 0.75rem 1rem;

.mobile-submenu-item {

font-size: 0.75rem;

padding: 0.5rem 1rem;

nav .container {

padding-left: 0.5rem !important;

padding-right: 0.5rem !important;

.nav-container {

min-height: 60px;

button, a, .nav-item, .mobile-menu-item {

min-height: 44px;

display: flex;

align-items: center;

justify-content: center;

}
.nav-item, .mobile-menu-item {

justify-content: flex-start;

/* News specific styles */

.news-item {

transition: transform 0.3s ease, box-shadow 0.3s ease;

.news-item:hover {

transform: translateY(-2px);

box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);

.line-clamp-2 {

display: -webkit-box;

-webkit-line-clamp: 2;

-webkit-box-orient: vertical;

overflow: hidden;

.line-clamp-3 {

display: -webkit-box;

-webkit-line-clamp: 3;

-webkit-box-orient: vertical;

overflow: hidden;

.[Link] {
transform: translateY(-1px);

box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);

.prose {

line-height: 1.7;

.prose p {

margin-bottom: 1rem;

/* Scrolling Text Animation */

.scrolling-text {

display: flex;

animation: scroll-left 30s linear infinite;

white-space: nowrap;

.scrolling-text span {

padding-right: 100px;

@keyframes scroll-left {

0% {

transform: translateX(100%);

100% {

transform: translateX(-100%);
}

.scrolling-text:hover {

animation-play-state: paused;

.video-container {

position: relative;

width: 100%;

height: 0;

padding-bottom: 56.25%;

.video-container iframe {

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

/* Floating Social Media Buttons */

.floating-social {

position: fixed;

right: 20px;

bottom: 20px;

z-index: 1000;

display: flex;
flex-direction: column;

gap: 12px;

.floating-btn {

width: 56px;

height: 56px;

border-radius: 50%;

display: flex;

align-items: center;

justify-content: center;

box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);

transition: all 0.3s ease;

cursor: pointer;

border: none;

text-decoration: none;

.floating-btn:hover {

transform: translateY(-2px);

box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);

.floating-whatsapp {

background: linear-gradient(135deg, #25D366, #128C7E);

color: white;

.floating-instagram {
background: linear-gradient(135deg, #E4405F, #833AB4,
#F77737);

color: white;

@media (max-width: 768px) {

.floating-social {

right: 15px;

bottom: 15px;

.floating-btn {

width: 50px;

height: 50px;

/* Modal Styles */

.modal {

display: none;

position: fixed;

z-index: 1000;

left: 0;

top: 0;

width: 100%;

height: 100%;

overflow: auto;

background-color: rgba(0, 0, 0, 0.5);

}
.[Link] {

display: flex;

align-items: center;

justify-content: center;

.modal-content {

background-color: white;

margin: auto;

padding: 2rem;

border-radius: 1rem;

max-width: 800px;

width: 90%;

max-height: 90vh;

overflow-y: auto;

position: relative;

.modal-close {

position: absolute;

top: 1rem;

right: 1rem;

font-size: 2rem;

font-weight: bold;

color: #6b7280;

cursor: pointer;

background: none;

border: none;
width: 40px;

height: 40px;

display: flex;

align-items: center;

justify-content: center;

border-radius: 50%;

transition: all 0.3s ease;

.modal-close:hover {

background-color: #f3f4f6;

color: #1f2937;

/* Table Styles */

.table-container {

overflow-x: auto;

margin: 1.5rem 0;

table {

width: 100%;

border-collapse: collapse;

background: white;

border-radius: 0.5rem;

overflow: hidden;

th, td {
padding: 1rem;

text-align: left;

border-bottom: 1px solid #e5e7eb;

th {

background: linear-gradient(135deg, #3b82f6, #2563eb);

color: white;

font-weight: 600;

tr:hover {

background-color: #f9fafb;

tr:last-child td {

border-bottom: none;

.table-number {

width: 60px;

text-align: center;

font-weight: 600;

color: #6b7280;

.table-total {

background-color: #f0fdf4 !important;

font-weight: 700;
color: #065f46;

.table-discount {

background-color: #fef3c7 !important;

font-weight: 700;

color: #92400e;

.table-final {

background-color: #dbeafe !important;

font-weight: 700;

color: #1e40af;

font-size: 1.1rem;

@media (max-width: 768px) {

th, td {

padding: 0.75rem 0.5rem;

font-size: 0.875rem;

.table-number {

width: 40px;

</style>

<style>@view-transition { navigation: auto; }</style>

<script src="/_sdk/data_sdk.js" type="text/javascript"></script>

</head>

<body class="font-sans">

<nav class="fixed top-0 w-full nav-container z-50">

<div class="container mx-auto px-3 md:px-4">

<div class="flex justify-between items-center py-2 md:py-3">

<div class="flex items-center space-x-3 md:space-x-4 min-w-0 flex-1

mr-4">

<div class="w-10 h-10 md:w-12 md:h-12 lg:w-14 lg:h-14 bg-white

rounded-full flex items-center justify-center p-2 flex-shrink-0 shadow-
lg"><img src="[Link] alt="Logo SDIT Al Fatih"
class="w-full h-full object-contain" onerror="[Link]='none';
[Link]='block';"> <span class="text-blue-
600 font-bold text-sm md:text-base lg:text-xl hidden">AF</span>

</div>

<div class="min-w-0 flex-1">

<h1 class="text-sm md:text-lg lg:text-xl xl:text-2xl font-bold text-

white leading-tight"><span class="block">SDIT Al Fatih</span></h1>

<p class="text-sm md:text-base lg:text-lg text-blue-100 leading-tight

font-medium opacity-90">Kota Tangerang</p>

</div>

<div class="desktop-nav hidden xl:flex space-x-2 flex-shrink-

0"><button class="nav-item text-white text-base font-medium px-4 py-3"
onclick="showPage('beranda')">Home</button>

<div class="nav-item text-white text-base font-medium px-4 py-3

relative">

Tentang

<div class="dropdown"><button onclick="showPage('sambutan');

[Link]();">Sambutan</button> <button
onclick="showPage('profil'); [Link]();">Profil
Sekolah</button>
</div>

</div>

<div class="nav-item text-white text-base font-medium px-4 py-3

relative">

Program

<div class="dropdown"><button onclick="showPage('kurikulum');

[Link]();">Kurikulum</button> <button
onclick="showPage('fasilitas');
[Link]();">Fasilitas</button> <button
onclick="showPage('ekstrakurikuler');
[Link]();">Ekstrakurikuler</button> <button
onclick="showPage('unggulan'); [Link]();">Program
Unggulan</button> <button onclick="showPage('kualifikasi');
[Link]();">Kualifikasi Lulusan</button> <button
onclick="showPage('prestasi');
[Link]();">Prestasi</button>

</div>

</div><button class="bg-gradient-to-r from-yellow-400 to-orange-

500 text-white text-base font-bold px-6 py-3 rounded-lg shadow-lg
hover:from-yellow-500 hover:to-orange-600 transform hover:scale-105
transition-all duration-300 flex items-center gap-2"
onclick="showPage('news')"> <span class="text-xl">📰</span> News
<span class="animate-pulse">🔥</span> </button> <button class="nav-
item text-white text-base font-medium px-4 py-3"
onclick="showPage('video')">Video</button> <button class="nav-item
text-white text-base font-medium px-4 py-3" onclick="showPage('haji-
umroh')">Haji</button> <button class="nav-item text-white text-base
font-medium px-4 py-3"
onclick="showPage('pendaftaran')">Daftar</button> <button
class="nav-item text-white text-base font-medium px-4 py-3"
onclick="showPage('kontak')">Kontak</button> <button class="nav-item
text-white text-base font-medium px-4 py-3"
onclick="showAdminLogin()">Admin</button>

</div>

<div class="desktop-nav hidden lg:flex xl:hidden space-x-1 flex-shrink-

0"><button class="nav-item text-white text-sm font-medium px-3 py-2"
onclick="showPage('beranda')">Home</button>

<div class="nav-item text-white text-sm font-medium px-3 py-2

relative">
Tentang

<div class="dropdown"><button onclick="showPage('sambutan');

[Link]();">Sambutan</button> <button
onclick="showPage('profil'); [Link]();">Profil
Sekolah</button>

</div>

<div class="nav-item text-white text-sm font-medium px-3 py-2

relative">

Program

<div class="dropdown"><button onclick="showPage('kurikulum');

</div>

</div><button class="bg-gradient-to-r from-yellow-400 to-orange-

500 text-white text-sm font-bold px-4 py-2 rounded-lg shadow-lg
hover:from-yellow-500 hover:to-orange-600 transform hover:scale-105
transition-all duration-300 flex items-center gap-1"
onclick="showPage('news')"> <span>📰</span> News <span
class="animate-pulse">🔥</span> </button> <button class="nav-item
text-white text-sm font-medium px-3 py-2"
onclick="showPage('video')">Video</button> <button class="nav-item
text-white text-sm font-medium px-3 py-2" onclick="showPage('haji-
umroh')">Haji</button> <button class="nav-item text-white text-sm
font-medium px-3 py-2"
onclick="showPage('pendaftaran')">Daftar</button> <button
class="nav-item text-white text-sm font-medium px-3 py-2"
onclick="showPage('kontak')">Kontak</button> <button class="nav-item
text-white text-sm font-medium px-3 py-2"
onclick="showAdminLogin()">Admin</button>
</div><button class="mobile-nav-toggle xl:hidden text-white p-2
rounded-lg bg-white/10 hover:bg-white/20 transition-colors flex-shrink-0"
onclick="toggleMobileMenu()">

<svg class="w-5 h-5 md:w-6 md:h-6" fill="none"

stroke="currentColor" viewbox="0 0 24 24"><path stroke-
linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4
12h16M4 18h16" />

</svg></button>

</div>

<div id="mobileMenu" class="mobile-menu"><button class="mobile-

menu-item" onclick="showPage('beranda'); closeMobileMenu();">🏠
Beranda</button>

<div class="mobile-menu-item font-semibold text-blue-200">

📋 Tentang

</div><button class="mobile-submenu-item"
onclick="showPage('sambutan'); closeMobileMenu();">•
Sambutan</button> <button class="mobile-submenu-item"
onclick="showPage('profil'); closeMobileMenu();">• Profil
Sekolah</button>

</div>

<div class="mobile-menu-item font-semibold text-blue-200">

🎓 Program

</div><button class="mobile-submenu-item"
onclick="showPage('kurikulum'); closeMobileMenu();">•
Kurikulum</button> <button class="mobile-submenu-item"
onclick="showPage('fasilitas'); closeMobileMenu();">• Fasilitas</button>
<button class="mobile-submenu-item"
onclick="showPage('ekstrakurikuler'); closeMobileMenu();">•
Ekstrakurikuler</button> <button class="mobile-submenu-item"
onclick="showPage('unggulan'); closeMobileMenu();">• Program
Unggulan</button> <button class="mobile-submenu-item"
onclick="showPage('kualifikasi'); closeMobileMenu();">• Kualifikasi
Lulusan</button> <button class="mobile-submenu-item"
onclick="showPage('prestasi'); closeMobileMenu();">• Prestasi</button>
</div><button class="mobile-menu-item bg-gradient-to-r from-yellow-
400 to-orange-500 text-white font-bold" style="background: linear-
gradient(to right, #fbbf24, #f97316) !important;"
onclick="showPage('news'); closeMobileMenu();"> 📰 News 🔥 </button>
<button class="mobile-menu-item" onclick="showPage('video');
closeMobileMenu();">🎬 Video Profil</button> <button class="mobile-
menu-item" onclick="showPage('haji-umroh'); closeMobileMenu();">🕌 Haji
& Umroh</button> <button class="mobile-menu-item"
onclick="showPage('pendaftaran'); closeMobileMenu();">📝
Pendaftaran</button> <button class="mobile-menu-item"
onclick="showPage('kontak'); closeMobileMenu();">📞 Kontak</button>
<button class="mobile-menu-item" onclick="showAdminLogin();
closeMobileMenu();">🔐 Admin</button>

</div>

</nav>

<div class="floating-social"><a href="[Link]

text=Halo,%20saya%20ingin%20bertanya%20tentang%20SDIT%20Al
%20Fatih" target="_blank" rel="noopener noreferrer" class="floating-btn
floating-whatsapp" title="WhatsApp">

<svg width="24" height="24" viewbox="0 0 24 24"

fill="currentColor"><path d="M17.472 14.382c-.297-.149-1.758-.867-
2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94
1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-
1.475-.883-.788-1.48-1.761-1.653-
2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.19
8-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-
2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198
0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875
1.213 [Link] 2.096 3.2 5.077 [Link] 1.262.489
[Link].227 1.36.195 [Link]-.085 1.758-.719 2.006-
1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-
5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-[Link]-
3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-
9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003
5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05
0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057
24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-
5.335 11.893-11.893A11.821 11.821 0 0020.051 3.488z" />
</svg></a> <a
href="[Link]
target="_blank" rel="noopener noreferrer" class="floating-btn floating-
instagram" title="Instagram">

<svg width="24" height="24" viewbox="0 0 24 24"

fill="currentColor"><path d="M12 2.163c3.204 0 3.584.012 4.85.07
3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0
3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-
1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-
4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-
3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069
4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-
6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072
4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259
0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-
1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-
6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162
2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-
3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209
1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-
1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-
1.44s-.644-1.44-1.439-1.44z" />

</svg></a>

</div>

<div id="newsModal" class="modal">

<div class="modal-content"><button class="modal-close"

onclick="closeNewsModal()">×</button>

</div>

</div>

<div id="adminLoginModal" class="modal">

<div class="modal-content" style="max-width: 500px;"><button

class="modal-close" onclick="closeAdminLogin()">×</button>

<div class="text-center mb-6">

<div class="text-6xl mb-4">

🔐
</div>

<h2 class="text-3xl font-bold text-gray-800 mb-2">Admin Login</h2>

<p class="text-gray-600">Masuk untuk mengelola berita</p>

</div>

<form id="adminLoginForm" onsubmit="handleAdminLogin(event)">

<div class="mb-4"><label for="adminUsername" class="block text-

gray-700 font-semibold mb-2">Username</label> <input type="text"
id="adminUsername" class="w-full px-4 py-3 border-2 border-gray-300
rounded-lg focus:border-blue-500 focus:outline-none"
placeholder="Masukkan username" required>

</div>

<div class="mb-6"><label for="adminPassword" class="block text-

gray-700 font-semibold mb-2">Password</label> <input
type="password" id="adminPassword" class="w-full px-4 py-3 border-2
border-gray-300 rounded-lg focus:border-blue-500 focus:outline-none"
placeholder="Masukkan password" required>

</div>

<div id="loginError" class="hidden mb-4 p-3 bg-red-100 border border-

red-400 text-red-700 rounded-lg text-center">

Username atau password salah!

</div><button type="submit" class="w-full bg-gradient-to-r from-

blue-600 to-blue-700 hover:from-blue-700 hover:to-blue-800 text-white
font-bold py-3 px-6 rounded-lg transition-all transform hover:scale-105">
Login </button>

</form>

</div>

</div>

<div id="adminPanelModal" class="modal">

<div class="modal-content" style="max-width: 600px;"><button

class="modal-close" onclick="closeAdminPanel()">×</button>

<div class="text-center mb-6">

<div class="text-6xl mb-4">

⚙️
</div>

<h2 class="text-3xl font-bold text-gray-800 mb-2">Admin Panel</h2>

<p class="text-gray-600">Kelola berita website</p>

</div>

<div class="space-y-4"> <a

href="[Link]
pPUgncAvc6o2U1Imc8p6Nfc/edit?usp=sharing" target="_blank"
rel="noopener noreferrer" class="block w-full bg-gradient-to-r from-green-
500 to-green-600 hover:from-green-600 hover:to-green-700 text-white
font-bold py-4 px-6 rounded-lg text-center transition-all transform
hover:scale-105 shadow-lg"> <span class="text-2xl mr-2">📊</span>
Buka Google Sheets </a>  <button
onclick="updateNewsData()" class="w-full bg-gradient-to-r from-blue-500
to-blue-600 hover:from-blue-600 hover:to-blue-700 text-white font-bold
py-4 px-6 rounded-lg transition-all transform hover:scale-105 shadow-lg">
<span class="text-2xl mr-2">🔄</span> Update Berita </button>  <button onclick="refreshNewsData()" class="w-
full bg-gradient-to-r from-purple-500 to-purple-600 hover:from-purple-600
hover:to-purple-700 text-white font-bold py-4 px-6 rounded-lg transition-
all transform hover:scale-105 shadow-lg"> <span class="text-2xl mr-
2">♻️</span> Refresh Berita </button>  <button
onclick="adminLogout()" class="w-full bg-gradient-to-r from-red-500 to-
red-600 hover:from-red-600 hover:to-red-700 text-white font-bold py-4 px-
6 rounded-lg transition-all transform hover:scale-105 shadow-lg"> <span
class="text-2xl mr-2">🚪</span> Logout </button>

</div>

<div id="adminStatusMessage" class="hidden mt-4 p-3 rounded-lg

text-center font-semibold"></div>

</div>

</div>

<div class="page active" id="beranda">

<div class="hero-bg flex flex-col min-h-screen" id="heroSection">

<div class="flex-1 flex items-center justify-center">

<div class="container mx-auto px-4 text-center text-white">

</div>

<h1 class="text-3xl md:text-5xl lg:text-6xl font-bold mb-4">SDIT Al

Fatih</h1>

<p class="text-lg md:text-xl mb-6">Kota Tangerang</p>

<div class="arabic-text text-yellow-300 mb-6">

‫َأْهاًل َوَسْهاًل‬

</div>

<h2 class="text-lg md:text-2xl lg:text-3xl font-semibold mb-4

leading-relaxed px-4">SDIT PENCETAK GENERASI QUR'ANI,<br>

BERKARAKTER DAN BERPRESTASI</h2>

<p class="text-base md:text-lg lg:text-xl text-blue-100 font-medium

px-4 leading-relaxed">Sekolah Islam Terpadu Berbasis Bahasa Arab,<br>

Al Quran dan As Sunnah</p>

</div>

<div class="max-w-7xl mx-auto">

<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4

md:gap-6 mb-4 md:mb-6"><button onclick="showPage('profil')"
class="btn-primary text-white px-4 py-3 md:px-6 md:py-4 rounded-lg font-
semibold shadow-lg text-sm md:text-base"> 📚 Profil Sekolah </button>
<button onclick="showPage('pendaftaran')" class="btn-primary text-white
px-4 py-3 md:px-6 md:py-4 rounded-lg font-semibold shadow-lg text-sm
md:text-base"> 📝 Pendaftaran SPMB 2026/2027 </button> <button
onclick="showPage('ekstrakurikuler')" class="btn-primary text-white px-4
py-3 md:px-6 md:py-4 rounded-lg font-semibold shadow-lg text-sm
md:text-base"> 📸 Foto Kegiatan </button> <a
href="[Link]
QiF/view?usp=sharing" target="_blank" rel="noopener noreferrer"
class="btn-primary text-white px-4 py-3 md:px-6 md:py-4 rounded-lg font-
semibold shadow-lg inline-block text-sm md:text-base"> 📄 Download
Brosur SPMB </a>

</div>

<div class="grid grid-cols-1 sm:grid-cols-3 gap-4 md:gap-6 max-w-4xl

mx-auto"><a href="[Link]
target="_blank" rel="noopener noreferrer" class="bg-gradient-to-r from-
purple-500 to-purple-600 hover:from-purple-600 hover:to-purple-700 text-
white px-4 py-3 md:px-6 md:py-4 rounded-lg font-semibold shadow-lg
inline-block text-sm md:text-base transition-all transform hover:scale-
105"> 🎓 Cek Kelulusan SPMB 26/27 </a> <a
href="[Link] target="_blank"
rel="noopener noreferrer" class="bg-gradient-to-r from-orange-500 to-
orange-600 hover:from-orange-600 hover:to-orange-700 text-white px-4
py-3 md:px-6 md:py-4 rounded-lg font-semibold shadow-lg inline-block
text-sm md:text-base transition-all transform hover:scale-105"> 📊 System
Absensi Guru </a> <a href="[Link]
target="_blank" rel="noopener noreferrer" class="bg-gradient-to-r from-
red-500 to-red-600 hover:from-red-600 hover:to-red-700 text-white px-4
py-3 md:px-6 md:py-4 rounded-lg font-semibold shadow-lg inline-block
text-sm md:text-base transition-all transform hover:scale-105"> 💳
Pembayaran SPP </a>

</div>

<div class="bg-white/10 backdrop-blur-sm py-4 overflow-hidden">

<div class="scrolling-text"><span class="text-white text-lg md:text-xl

font-semibold"> Selamat Datang di website SDIT Al Fatih | ‫| َأْهاًل َوَسْهاًل َوَمْر َحًبا‬
Welcome to SDIT Al Fatih Kota Tangerang | </span>

</div>

</div>

<div class="page" id="news">

<div class="bg-gradient-to-br from-blue-600 via-blue-700 to-purple-800

py-16 mb-12">
<div class="container mx-auto px-4 text-center">

<div class="text-6xl md:text-7xl mb-6 animate-pulse">

</div>

<h2 class="text-4xl md:text-5xl lg:text-6xl font-bold text-white mb-

4">Berita & Pengumuman</h2>

<p class="text-xl md:text-2xl text-blue-100 mb-6">Informasi Terkini

dari SDIT Al Fatih</p>

<div class="inline-block bg-white/20 backdrop-blur-sm rounded-full px-

6 py-3">

<p class="text-white font-semibold">🔥 Update Setiap Hari</p>

</div>

<div class="container mx-auto px-4 pb-20">

<div class="flex flex-wrap justify-center gap-4 mb-12"><button

onclick="filterNews('all')" class="news-filter-btn active px-8 py-4 rounded-
2xl bg-gradient-to-r from-blue-600 to-blue-700 text-white font-bold text-lg
shadow-lg transition-all transform hover:scale-105"> <span class="mr-
2">📋</span> Semua Berita </button> <button
onclick="filterNews('berita')" class="news-filter-btn px-8 py-4 rounded-2xl
bg-white text-gray-700 font-bold text-lg shadow-lg border-2 border-gray-
200 transition-all transform hover:scale-105"> <span class="mr-
2">📰</span> Berita </button> <button onclick="filterNews('artikel')"
class="news-filter-btn px-8 py-4 rounded-2xl bg-white text-gray-700 font-
bold text-lg shadow-lg border-2 border-gray-200 transition-all transform
hover:scale-105"> <span class="mr-2">📝</span> Artikel </button>
<button onclick="filterNews('informasi')" class="news-filter-btn px-8 py-4
rounded-2xl bg-white text-gray-700 font-bold text-lg shadow-lg border-2
border-gray-200 transition-all transform hover:scale-105"> <span
class="mr-2">ℹ️</span> Informasi </button>

</div>

<div id="newsLoading" class="text-center py-16">

<div class="inline-block animate-spin rounded-full h-16 w-16 border-b-

4 border-blue-600 mb-4"></div>
<p class="text-xl text-gray-600 font-semibold">Memuat berita
terbaru...</p>

</div>

<div id="newsGrid" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3

gap-8"></div>

<div id="newsEmpty" class="hidden text-center py-16">

<div class="text-6xl mb-4">

</div>

<p class="text-gray-600 text-2xl font-semibold">Belum ada berita

tersedia</p>

<p class="text-gray-500 mt-2">Silakan cek kembali nanti</p>

</div>

</div>

<div class="page" id="sambutan">

<div class="container mx-auto px-4 py-20">

<h2 class="text-4xl font-bold text-center text-blue-800 mb-

4">Sambutan Pimpinan</h2>

<p class="text-center text-gray-600 mb-12">Kata Sambutan dari

Pimpinan SDIT Al Fatih</p>

<div class="max-w-7xl mx-auto mb-16">

<div class="grid grid-cols-1 lg:grid-cols-2 gap-8"><!-- Pembina

Yayasan -->

<div class="bg-white rounded-2xl shadow-lg p-8 card-shadow">

<div class="flex flex-col items-center text-center mb-6">

<div class="w-32 h-32 rounded-full overflow-hidden flex-shrink-0

profile-img mb-4"><img src="[Link] alt="KH.
Jamaludin, LC, MA" class="w-full h-full object-cover"
onerror="[Link]='none'; [Link]='<div
class=\'w-full h-full bg-gradient-to-br from-blue-400 to-blue-600 flex
items-center justify-center text-white text-4xl font-bold\'>KJ</div>';">
</div>

<h3 class="text-2xl font-bold text-blue-800 mb-2">KH. Jamaludin,

LC, MA</h3>

<p class="text-lg text-green-600 font-semibold mb-4">Pembina

Yayasan</p>

</div>

<div class="bg-blue-50 rounded-lg p-6 text-left">

<p class="text-gray-700 mb-4 leading-relaxed"><span class="font-

semibold text-blue-800">Assalamu'alaikum warahmatullahi
wabarakatuh</span></p>

<p class="text-gray-700 mb-4 leading-relaxed">Alhamdulillahi rabbil

alamiin, puji syukur kita panjatkan kepada Allah SWT yang telah
memberikan rahmat dan hidayah-Nya sehingga SDIT Al Fatih dapat terus
berkembang dalam mencetak generasi Qur'ani yang berkarakter dan
berprestasi.</p>

<p class="text-gray-700 leading-relaxed">Semoga Allah SWT

senantiasa memberkahi perjalanan pendidikan kita dalam membentuk
insan yang bertaqwa dan berakhlak mulia.</p>

</div>

</div>

<div class="bg-white rounded-2xl shadow-lg p-8 card-shadow">

<div class="flex flex-col items-center text-center mb-6">

<div class="w-32 h-32 rounded-full overflow-hidden flex-shrink-0

profile-img mb-4"><img src="[Link] alt="H.
Mamduh Jamaludin, [Link]" class="w-full h-full object-cover"
onerror="[Link]='none'; [Link]='<div
class=\'w-full h-full bg-gradient-to-br from-green-400 to-green-600 flex
items-center justify-center text-white text-4xl font-bold\'>MJ</div>';">

</div>

<h3 class="text-2xl font-bold text-blue-800 mb-2">H. Mamduh

Jamaludin, [Link]</h3>

<p class="text-lg text-green-600 font-semibold mb-4">Kepala

Sekolah</p>

</div>

<div class="bg-green-50 rounded-lg p-6 text-left">

<p class="text-gray-700 mb-4 leading-relaxed font-semibold text-
lg">Selamat datang di SDIT Al Fatih Kota Tangerang</p>

<p class="text-gray-700 mb-4 leading-relaxed">Kami berkomitmen

untuk memberikan pendidikan terbaik yang mengintegrasikan nilai-nilai
Islam dengan kurikulum nasional. Melalui pendekatan pembelajaran yang
holistik, kami berusaha mencetak generasi yang tidak hanya cerdas
secara akademik, tetapi juga memiliki akhlak yang mulia.</p>

<p class="text-gray-700 leading-relaxed">Mari bersama-sama

membangun masa depan yang gemilang untuk putra-putri kita.</p>

</div>

</div>

<div class="max-w-7xl mx-auto">

<h3 class="text-3xl font-bold text-center text-blue-800 mb-8">Tim

Manajemen SDIT Al Fatih</h3>

<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6"><!--

Wakil Kepala Sekolah Bid. Kurikulum -->

<div class="bg-white rounded-xl shadow-lg p-6 card-shadow">

<div class="flex flex-col items-center text-center">

<div class="w-24 h-24 rounded-full overflow-hidden mb-4 profile-

img"><img src="[Link] alt="Ustaz H. Ahmad Jiyad,
[Link]" class="w-full h-full object-cover" onerror="[Link]='none';
[Link]='<div class=\'w-full h-full bg-gradient-to-br
from-purple-400 to-purple-600 flex items-center justify-center text-white
text-2xl font-bold\'>AJ</div>';">

</div>

<h4 class="text-lg font-bold text-blue-800 mb-2">Ustaz H. Ahmad

Jiyad, [Link]</h4>

<p class="text-sm text-green-600 font-semibold">Wakil Kepala

Sekolah Bid. Kurikulum</p>

</div>

</div>

<div class="bg-white rounded-xl shadow-lg p-6 card-shadow">

<div class="w-24 h-24 rounded-full overflow-hidden mb-4 profile-

img"><img src="[Link] alt="Ustadzah Hilyah
Jamaludin, S.E" class="w-full h-full object-cover"
onerror="[Link]='none'; [Link]='<div
class=\'w-full h-full bg-gradient-to-br from-pink-400 to-pink-600 flex items-
center justify-center text-white text-2xl font-bold\'>HJ</div>';">

</div>

<h4 class="text-lg font-bold text-blue-800 mb-2">Ustadzah Hilyah

Jamaludin, S.E</h4>

<p class="text-sm text-green-600 font-semibold mb-1">Koord. Al

Quran SDIT Al Fatih</p>

<p class="text-xs text-gray-600">Metode Ummi</p>

</div>

</div>

<div class="bg-white rounded-xl shadow-lg p-6 card-shadow">

<div class="flex flex-col items-center text-center">

<div class="w-24 h-24 rounded-full overflow-hidden mb-4 profile-

img"><img src="[Link] alt="Ustadz Ridho Oktavia
Pernando, [Link]" class="w-full h-full object-cover"
onerror="[Link]='none'; [Link]='<div
class=\'w-full h-full bg-gradient-to-br from-yellow-400 to-yellow-600 flex
items-center justify-center text-white text-2xl font-bold\'>RP</div>';">

</div>

<h4 class="text-lg font-bold text-blue-800 mb-2">Ustadz Ridho

Oktavia Pernando, [Link]</h4>

<p class="text-sm text-green-600 font-semibold">Wakil Kepala

Sekolah Bid. Humas</p>

</div>

</div>

<div class="bg-white rounded-xl shadow-lg p-6 card-shadow">

<div class="flex flex-col items-center text-center">

<div class="w-24 h-24 rounded-full overflow-hidden mb-4 profile-

img"><img src="[Link] alt="Ustadz Mohamad
Shamil Bhashayev, [Link]" class="w-full h-full object-cover"
onerror="[Link]='none'; [Link]='<div
class=\'w-full h-full bg-gradient-to-br from-red-400 to-red-600 flex items-
center justify-center text-white text-2xl font-bold\'>SB</div>';">

</div>

<h4 class="text-lg font-bold text-blue-800 mb-2">Ustadz Mohamad

Shamil Bhashayev, [Link]</h4>

<p class="text-sm text-green-600 font-semibold">Wakil Kepala

Sekolah Bid. Kesiswaan</p>

</div>

<div class="page" id="profil">

<div class="container mx-auto px-4 py-20">

<h2 class="text-4xl font-bold text-center text-blue-800 mb-4">Profil

Sekolah</h2>

<p class="text-center text-gray-600 mb-12">SDIT Al Fatih Kota

Tangerang</p>

<div class="max-w-4xl mx-auto mb-16">

<div class="grid grid-cols-1 md:grid-cols-2 gap-6">

<div class="bg-gradient-to-br from-yellow-400 to-yellow-600 rounded-

2xl shadow-lg p-8 text-center text-white card-shadow">

<div class="text-6xl mb-4">

</div>

<h3 class="text-2xl font-bold mb-2">TERAKREDITASI</h3>

<p class="text-lg">Standar Pendidikan Nasional</p>

</div>
<div class="bg-gradient-to-br from-green-500 to-green-700 rounded-
2xl shadow-lg p-8 text-center text-white card-shadow">

<div class="text-6xl mb-4">

</div>

<h3 class="text-2xl font-bold mb-2">ANGGOTA JSIT</h3>

<p class="text-lg">Jaringan Sekolah Islam Terpadu</p>

</div>

</div>

<div class="max-w-7xl mx-auto mb-16">

<h3 class="text-3xl font-bold text-center text-blue-800 mb-8">Tim

Manajemen SDIT Al Fatih</h3>

<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-5

gap-6">

<div class="bg-white rounded-xl shadow-lg p-6 card-shadow">

<div class="flex flex-col items-center text-center">

<div class="w-24 h-24 rounded-full overflow-hidden mb-4 profile-

img"><img src="[Link] alt="H. Mamduh Jamaludin,
[Link]" class="w-full h-full object-cover" onerror="[Link]='none';
[Link]='<div class=\'w-full h-full bg-gradient-to-br
from-green-400 to-green-600 flex items-center justify-center text-white
text-2xl font-bold\'>MJ</div>';">

</div>

<h4 class="text-base font-bold text-blue-800 mb-2">H. Mamduh

Jamaludin, [Link]</h4>

<p class="text-sm text-green-600 font-semibold">Kepala

Sekolah</p>

</div>

</div>

<div class="bg-white rounded-xl shadow-lg p-6 card-shadow">

<div class="flex flex-col items-center text-center">

</div>

<h4 class="text-base font-bold text-blue-800 mb-2">Ustaz H.

Ahmad Jiyad, [Link]</h4>

<p class="text-sm text-green-600 font-semibold">Wakil Kepala

Sekolah Bid. Kurikulum</p>

</div>

</div>

<div class="bg-white rounded-xl shadow-lg p-6 card-shadow">

<div class="flex flex-col items-center text-center">

<div class="w-24 h-24 rounded-full overflow-hidden mb-4 profile-

</div>

<h4 class="text-base font-bold text-blue-800 mb-2">Ustadzah

Hilyah Jamaludin, S.E</h4>

<p class="text-sm text-green-600 font-semibold mb-1">Koord. Al

Quran SDIT Al Fatih</p>

<p class="text-xs text-gray-600">Metode Ummi</p>

</div>

</div>

<div class="bg-white rounded-xl shadow-lg p-6 card-shadow">

<div class="flex flex-col items-center text-center">

<div class="w-24 h-24 rounded-full overflow-hidden mb-4 profile-

</div>

<h4 class="text-base font-bold text-blue-800 mb-2">Ustadz Ridho

Oktavia Pernando, [Link]</h4>

<p class="text-sm text-green-600 font-semibold">Wakil Kepala

Sekolah Bid. Humas</p>

</div>

</div>

<div class="bg-white rounded-xl shadow-lg p-6 card-shadow">

<div class="flex flex-col items-center text-center">

<div class="w-24 h-24 rounded-full overflow-hidden mb-4 profile-

</div>

<h4 class="text-base font-bold text-blue-800 mb-2">Ustadz

Mohamad Shamil Bhashayev, [Link]</h4>

<p class="text-sm text-green-600 font-semibold">Wakil Kepala

Sekolah Bid. Kesiswaan</p>

</div>

</div>

<div class="max-w-4xl mx-auto mb-12">

<div class="bg-gradient-to-br from-blue-500 to-blue-700 rounded-2xl

shadow-lg p-8 text-white card-shadow">

<h3 class="text-3xl font-bold text-center mb-6">VISI</h3>

<p class="text-lg text-center leading-relaxed">"Terwujudnya sekolah

islam terbaik dalam pembelajaran dan menjaga kelestarian lingkungan,
bergotong royong, mandiri untuk keberkahan dunia akhirat."</p>
</div>

</div>

<div class="max-w-6xl mx-auto">

<h3 class="text-3xl font-bold text-center text-blue-800

mb-8">MISI</h3>

<div class="grid grid-cols-1 md:grid-cols-2 gap-6">

<div class="bg-white rounded-xl shadow-lg p-6 card-shadow border-l-

4 border-green-500">

<div class="flex items-start gap-4">

<div class="w-12 h-12 bg-green-500 rounded-full flex items-center

justify-center text-white font-bold text-xl flex-shrink-0">

</div>

<p class="text-gray-700 leading-relaxed">Terwujudnya islam

sebagai dasar dan identitas dengan merujuk kepada Al-Quran dan As-
sunnah.</p>

</div>

</div>

<div class="bg-white rounded-xl shadow-lg p-6 card-shadow border-l-

4 border-blue-500">

<div class="flex items-start gap-4">

<div class="w-12 h-12 bg-blue-500 rounded-full flex items-center

justify-center text-white font-bold text-xl flex-shrink-0">

</div>

<p class="text-gray-700 leading-relaxed">Terbangunnya

pribadi/insan yang beriman dan bertaqwa kepada Allah SWT.</p>

</div>

</div>

<div class="bg-white rounded-xl shadow-lg p-6 card-shadow border-l-

4 border-purple-500">

<div class="flex items-start gap-4">

</div>

<p class="text-gray-700 leading-relaxed">Terwujudnya siswa-siswi

yang memiliki kecakapan intelektual, emosional dan sosial.</p>

</div>

</div>

<div class="bg-white rounded-xl shadow-lg p-6 card-shadow border-l-

4 border-yellow-500">

<div class="flex items-start gap-4">

<div class="w-12 h-12 bg-yellow-500 rounded-full flex items-center

justify-center text-white font-bold text-xl flex-shrink-0">

</div>

<p class="text-gray-700 leading-relaxed">Terciptanya pembelajaran

yang menyenangkan dengan tetap memperhatikan nilai-nilai
keislaman.</p>

</div>

</div>

<div class="bg-white rounded-xl shadow-lg p-6 card-shadow border-l-

4 border-green-500">

<div class="flex items-start gap-4">

<div class="w-12 h-12 bg-green-500 rounded-full flex items-center

justify-center text-white font-bold text-xl flex-shrink-0">

</div>

<p class="text-gray-700 leading-relaxed">Turut serta dan aktif di

dalam menjaga kelestarian lingkungan alam.</p>

</div>

</div>

<div class="flex items-start gap-4">

<div class="w-12 h-12 bg-red-500 rounded-full flex items-center

justify-center text-white font-bold text-xl flex-shrink-0">

</div>

<p class="text-gray-700 leading-relaxed">Terciptanya jiwa

kepemimpinan dan kewirausahaan yang kuat kepada seluruh warga
sekolah.</p>

</div>

</div>

<div class="bg-white rounded-xl shadow-lg p-6 card-shadow border-l-

4 border-blue-500">

<div class="flex items-start gap-4">

<div class="w-12 h-12 bg-blue-500 rounded-full flex items-center

justify-center text-white font-bold text-xl flex-shrink-0">

</div>

<p class="text-gray-700 leading-relaxed">Terciptanya pelayanan

yang berkualitas bagi setiap pelanggan sekolah.</p>

</div>

</div>

<div class="bg-white rounded-xl shadow-lg p-6 card-shadow border-l-

4 border-purple-500">

<div class="flex items-start gap-4">

<div class="w-12 h-12 bg-purple-500 rounded-full flex items-center

justify-center text-white font-bold text-xl flex-shrink-0">

</div>

<p class="text-gray-700 leading-relaxed">Terciptanya sekolah

dengan wawasan keislaman, kebangsaan dan global sesuai tuntutan
zaman.</p>
</div>

</div>

<div class="bg-white rounded-xl shadow-lg p-6 card-shadow border-l-

4 border-pink-500">

<div class="flex items-start gap-4">

<div class="w-12 h-12 bg-pink-500 rounded-full flex items-center

justify-center text-white font-bold text-xl flex-shrink-0">

</div>

<p class="text-gray-700 leading-relaxed">Tanggap terhadap setiap

perubahan yang terjadi untuk kelancaran proses pembelajaran.</p>

</div>

</div>

<div class="bg-white rounded-xl shadow-lg p-6 card-shadow border-l-

4 border-orange-500">

<div class="flex items-start gap-4">

<div class="w-12 h-12 bg-orange-500 rounded-full flex items-center

justify-center text-white font-bold text-xl flex-shrink-0">

</div>

<p class="text-gray-700 leading-relaxed">Bersaing secara etis

dengan institusi lain tingkat Kota Tangerang demi kemajuan dan
keunggulan sekolah.</p>

</div>

<div class="page" id="kurikulum">

<div class="container mx-auto px-4 py-20">

<h2 class="text-4xl font-bold text-center text-blue-800 mb-
4">Kurikulum</h2>

<p class="text-center text-gray-600 mb-12">Sistem Pembelajaran

SDIT Al Fatih</p>

<div class="max-w-6xl mx-auto mb-16">

<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"><!--

Kurikulum Merdeka -->

<div class="bg-white rounded-2xl shadow-lg p-8 card-shadow text-

center">

<div class="text-6xl mb-4">

</div>

<h3 class="text-2xl font-bold text-blue-800 mb-3">Kurikulum

Merdeka</h3>

<p class="text-gray-700 leading-relaxed">Mengimplementasikan

Kurikulum Dinas Pendidikan dengan Kurikulum SDIT Al-Fatih Kurikulum
Merdeka (Kelas 1-6)</p>

</div>

<div class="bg-white rounded-2xl shadow-lg p-8 card-shadow text-

center">

<div class="text-6xl mb-4">

</div>

<h3 class="text-2xl font-bold text-blue-800 mb-3">Standar

JSIT</h3>

<p class="text-gray-700 leading-relaxed">Standar mutu Sekolah

Islam Terpadu (Kelas 1-6)</p>

</div>

<div class="bg-white rounded-2xl shadow-lg p-8 card-shadow text-

center">

<div class="text-6xl mb-4">

</div>
<h3 class="text-2xl font-bold text-blue-800 mb-3">Pembelajaran
Projek</h3>

<p class="text-gray-700 leading-relaxed">PBL & PJBL : Kelas 4-

6</p>

</div>

</div>

<div class="max-w-4xl mx-auto">

<div class="bg-gradient-to-br from-green-500 to-green-700 rounded-

2xl shadow-lg p-8 card-shadow text-white">

<div class="text-center mb-8">

<div class="text-6xl mb-4">

</div>

<h3 class="text-3xl font-bold mb-3">Kurikulum Ke-Islaman</h3>

<p class="text-lg text-green-100">Kurikulum Ke-Islaman Khas SDIT

Al-Fatih dengan rincian:</p>

</div>

<div class="grid grid-cols-1 md:grid-cols-2 gap-4">

<div class="bg-white/10 backdrop-blur-sm rounded-lg p-4 flex items-

center gap-3">

</div><span class="text-lg font-semibold">Bahasa Arab</span>

</div>

<div class="bg-white/10 backdrop-blur-sm rounded-lg p-4 flex items-

center gap-3">

</div><span class="text-lg font-semibold">Al Quran</span>

</div>
<div class="bg-white/10 backdrop-blur-sm rounded-lg p-4 flex items-
center gap-3">

</div><span class="text-lg font-semibold">Hadist Pilihan</span>

</div>

<div class="bg-white/10 backdrop-blur-sm rounded-lg p-4 flex items-

center gap-3">

</div><span class="text-lg font-semibold">Kurikulum Do'a

Harian</span>

</div>

<div class="bg-white/10 backdrop-blur-sm rounded-lg p-4 flex items-

center gap-3 md:col-span-2">

</div><span class="text-lg font-semibold">Muhadastah</span>

</div>

<div class="page" id="fasilitas">

<div class="container mx-auto px-4 py-20">

<h2 class="text-4xl font-bold text-center text-blue-800 mb-4">Fasilitas

Sekolah</h2>

<p class="text-center text-gray-600 mb-12">Sarana dan Prasarana

SDIT Al Fatih</p>

<div class="max-w-6xl mx-auto">

<div class="bg-white rounded-2xl shadow-lg p-8 card-shadow text-

center hover:scale-105 transition-transform">

<div class="text-6xl mb-4">

</div>

<h3 class="text-2xl font-bold text-blue-800 mb-3">Ruang

Kelas</h3>

<p class="text-gray-700 leading-relaxed">Ruang kelas yang nyaman

dan dilengkapi AC untuk pembelajaran optimal</p>

</div>

<div class="bg-white rounded-2xl shadow-lg p-8 card-shadow text-

center hover:scale-105 transition-transform">

<div class="text-6xl mb-4">

</div>

<h3 class="text-2xl font-bold text-blue-800 mb-3">Masjid</h3>

<p class="text-gray-700 leading-relaxed">Masjid untuk kegiatan

ibadah dan pembelajaran agama</p>

</div>

<div class="bg-white rounded-2xl shadow-lg p-8 card-shadow text-

center hover:scale-105 transition-transform">

<div class="text-6xl mb-4">

</div>

<h3 class="text-2xl font-bold text-blue-800

mb-3">Perpustakaan</h3>

<p class="text-gray-700 leading-relaxed">Perpustakaan dengan

koleksi buku yang lengkap</p>

</div>

<div class="text-6xl mb-4">

</div>

<h3 class="text-2xl font-bold text-blue-800 mb-3">Lab

Komputer</h3>

<p class="text-gray-700 leading-relaxed">Laboratorium komputer

untuk pembelajaran teknologi</p>

</div>

<div class="bg-white rounded-2xl shadow-lg p-8 card-shadow text-

center hover:scale-105 transition-transform">

<div class="text-6xl mb-4">

</div>

<h3 class="text-2xl font-bold text-blue-800 mb-3">Lapangan

Olahraga</h3>

<p class="text-gray-700 leading-relaxed">Lapangan untuk berbagai

kegiatan olahraga</p>

</div>

<div class="bg-white rounded-2xl shadow-lg p-8 card-shadow text-

center hover:scale-105 transition-transform">

<div class="text-6xl mb-4">

</div>

<h3 class="text-2xl font-bold text-blue-800 mb-3">Kantin</h3>

<p class="text-gray-700 leading-relaxed">Kantin dengan makanan

sehat dan halal</p>

</div>

</div>
</div>

<div class="page" id="ekstrakurikuler">

<div class="container mx-auto px-4 py-20">

<h2 class="text-4xl font-bold text-center text-blue-800 mb-

4">Ekstrakurikuler & Galeri Foto</h2>

<p class="text-center text-gray-600 mb-12">Program Pengembangan

Minat dan Bakat Siswa</p>

<div class="max-w-6xl mx-auto mb-16">

<h3 class="text-3xl font-bold text-center text-blue-800 mb-

8">Program Ekstrakurikuler</h3>

<div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4"><!--

Memanah -->

<div class="bg-gradient-to-br from-blue-500 to-blue-700 rounded-xl

shadow-lg p-6 card-shadow text-center text-white">

<div class="text-4xl mb-3">

</div>

<h4 class="text-lg font-bold mb-2">Memanah</h4>

<p class="text-sm text-blue-100">Olahraga tradisional yang melatih

fokus dan ketepatan</p>

</div>

<div class="bg-gradient-to-br from-cyan-500 to-cyan-700 rounded-xl

shadow-lg p-6 card-shadow text-center text-white">

<div class="text-4xl mb-3">

</div>

<h4 class="text-lg font-bold mb-2">Renang</h4>

<p class="text-sm text-cyan-100">Olahraga air yang menyehatkan

seluruh tubuh</p>

</div>

<div class="bg-gradient-to-br from-green-500 to-green-700 rounded-

xl shadow-lg p-6 card-shadow text-center text-white">
<div class="text-4xl mb-3">

</div>

<h4 class="text-lg font-bold mb-2">Pramuka</h4>

<p class="text-sm text-green-100">Kegiatan kepanduan yang

membangun karakter</p>

</div>

<div class="bg-gradient-to-br from-yellow-500 to-yellow-700 rounded-

xl shadow-lg p-6 card-shadow text-center text-white">

<div class="text-4xl mb-3">

</div>

<h4 class="text-lg font-bold mb-2">Badminton</h4>

<p class="text-sm text-yellow-100">Olahraga raket yang melatih

kelincahan</p>

</div>

<div class="bg-gradient-to-br from-red-500 to-red-700 rounded-xl

shadow-lg p-6 card-shadow text-center text-white">

<div class="text-4xl mb-3">

</div>

<h4 class="text-lg font-bold mb-2">Karate</h4>

<p class="text-sm text-red-100">Seni bela diri yang melatih disiplin

dan mental</p>

</div>

<div class="bg-gradient-to-br from-purple-500 to-purple-700 rounded-

xl shadow-lg p-6 card-shadow text-center text-white">

<div class="text-4xl mb-3">

</div>

<h4 class="text-lg font-bold mb-2">Futsal</h4>

<p class="text-sm text-purple-100">Sepak bola dalam ruangan yang
seru</p>

</div>

<div class="bg-gradient-to-br from-pink-500 to-pink-700 rounded-xl

shadow-lg p-6 card-shadow text-center text-white">

<div class="text-4xl mb-3">

</div>

<h4 class="text-lg font-bold mb-2">Tenis Meja</h4>

<p class="text-sm text-pink-100">Olahraga yang melatih refleks dan

koordinasi</p>

</div>

<div class="bg-gradient-to-br from-orange-500 to-orange-700

rounded-xl shadow-lg p-6 card-shadow text-center text-white">

<div class="text-4xl mb-3">

</div>

<h4 class="text-lg font-bold mb-2">Marawis</h4>

<p class="text-sm text-orange-100">Seni musik tradisional Islam

yang indah</p>

</div>

</div>

<div class="max-w-6xl mx-auto">

<h3 class="text-3xl font-bold text-center text-blue-800 mb-8">Galeri

Foto Kegiatan</h3>

<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"><!--

Kegiatan Pembelajaran -->

<div class="bg-white rounded-xl shadow-lg overflow-hidden card-

shadow">

<div class="h-48 bg-gradient-to-br from-blue-400 to-blue-600 flex

items-center justify-center"><span class="text-6xl">📖</span>
</div>

<h4 class="text-xl font-bold text-blue-800 mb-2">Kegiatan

Pembelajaran</h4>

<p class="text-gray-700">Suasana belajar yang kondusif dan

menyenangkan</p>

</div>

</div>

<div class="bg-white rounded-xl shadow-lg overflow-hidden card-

shadow">

<div class="h-48 bg-gradient-to-br from-green-400 to-green-600 flex

items-center justify-center"><span class="text-6xl">⚽</span>

</div>

<h4 class="text-xl font-bold text-blue-800 mb-2">Kegiatan

Olahraga</h4>

<p class="text-gray-700">Aktivitas fisik yang menyehatkan

tubuh</p>

</div>

</div>

<div class="bg-white rounded-xl shadow-lg overflow-hidden card-

shadow">

<div class="h-48 bg-gradient-to-br from-purple-400 to-purple-600

flex items-center justify-center"><span class="text-6xl">🕌</span>

</div>

<h4 class="text-xl font-bold text-blue-800 mb-2">Kegiatan

Keagamaan</h4>

<p class="text-gray-700">Pembinaan spiritual dan akhlak

mulia</p>

</div>

</div>

<div class="h-48 bg-gradient-to-br from-pink-400 to-pink-600 flex

items-center justify-center"><span class="text-6xl">🎨</span>

</div>

<h4 class="text-xl font-bold text-blue-800 mb-2">Kegiatan

Seni</h4>

<p class="text-gray-700">Pengembangan bakat dan kreativitas

siswa</p>

</div>

</div>

<div class="bg-white rounded-xl shadow-lg overflow-hidden card-

shadow">

<div class="h-48 bg-gradient-to-br from-yellow-400 to-yellow-600

flex items-center justify-center"><span class="text-6xl">🏆</span>

</div>

<h4 class="text-xl font-bold text-blue-800 mb-2">Kegiatan

Ekstrakurikuler</h4>

<p class="text-gray-700">Beragam aktivitas pengembangan minat

bakat</p>

</div>

</div>

<div class="bg-white rounded-xl shadow-lg overflow-hidden card-

shadow">

<div class="h-48 bg-gradient-to-br from-red-400 to-red-600 flex

items-center justify-center"><span class="text-6xl">🎓</span>

</div>

<h4 class="text-xl font-bold text-blue-800 mb-2">Kegiatan

Sekolah</h4>

<p class="text-gray-700">Berbagai program unggulan sekolah</p>

</div>

<div class="page" id="unggulan">

<div class="container mx-auto px-4 py-20">

<h2 class="text-4xl font-bold text-center text-blue-800 mb-4">Program

Unggulan</h2>

<p class="text-center text-gray-600 mb-12">Keunggulan SDIT Al Fatih

dalam Pendidikan</p>

<div class="max-w-6xl mx-auto">

<div class="grid grid-cols-1 lg:grid-cols-3 gap-8"><!-- Program Bahasa

-->

<div class="bg-white rounded-2xl shadow-lg overflow-hidden card-

shadow">

<div class="bg-gradient-to-br from-blue-500 to-blue-700 p-8 text-

center text-white">

<div class="text-6xl mb-4">

</div>

<h3 class="text-2xl font-bold">Program Bahasa</h3>

</div>

<p class="text-gray-700 leading-relaxed">Memiliki Skill Berbahasa

Arab guna untuk memudahkan dalam memahami al-Qur'an & as-
Sunnah dengan baik. Siswa dilatih dan dibiasakan Berbicara, Menulis,
Membaca dan Mendengar dengan menggunakan Bahasa Arab setiap
hari.</p>

</div>

</div>

<div class="bg-gradient-to-br from-green-500 to-green-700 p-8 text-

center text-white">

<div class="text-6xl mb-4">

</div>

<h3 class="text-2xl font-bold">Program Tahfidz</h3>

</div>

<p class="text-gray-700 leading-relaxed mb-4">Siswa ditargetkan

Memiliki Hafalan Qur'an yang cukup tinggi (3 Juz Al-qur'an: Juz 28, 29
& 30). Dengan Metode Talaqqi : Kelas 1-3 dan Mustaqilli : Kelas 4-
6.</p>

<p class="text-gray-700 leading-relaxed">Juga terdapat Takhassus

Al-Qur'an untuk dapat menghafal diatas target minimal.</p>

</div>

</div>

<div class="bg-white rounded-2xl shadow-lg overflow-hidden card-

shadow">

<div class="bg-gradient-to-br from-purple-500 to-purple-700 p-8 text-

center text-white">

<div class="text-6xl mb-4">

</div>

<h3 class="text-2xl font-bold">Program Tahsin Metode Ummi</h3>

</div>

<p class="text-gray-700 leading-relaxed">Menggunakan Metode

Ummi dalam (Kelas 1-6). Membaguskan Membaca Al-Qur'an dengan
teknik yang tepat dan benar.</p>

</div>
</div>

</div>

<div class="page" id="kualifikasi">

<div class="container mx-auto px-4 py-20">

<h2 class="text-4xl font-bold text-center text-blue-800 mb-

4">Kualifikasi Lulusan</h2>

<p class="text-center text-gray-600 mb-12">Kompetensi yang Dimiliki

Lulusan SDIT Al Fatih</p>

<div class="max-w-6xl mx-auto">

<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6"><!--

Mahir Berbahasa -->

<div class="bg-gradient-to-br from-blue-500 to-blue-700 rounded-xl

shadow-lg p-6 card-shadow text-center text-white">

<div class="text-5xl mb-4">

</div>

<h3 class="text-xl font-bold mb-3">Mahir Berbahasa</h3>

<p class="text-sm text-blue-100">Mahir berbahasa Arab dan

English</p>

</div>

<div class="bg-gradient-to-br from-purple-500 to-purple-700 rounded-

xl shadow-lg p-6 card-shadow text-center text-white">

<div class="text-5xl mb-4">

</div>

<h3 class="text-xl font-bold mb-3">Komputer</h3>

<p class="text-sm text-purple-100">Mampu mengoperasikan Ms.

Word, Excel, Power Point & Canva</p>
</div>

<div class="bg-gradient-to-br from-green-500 to-green-700 rounded-

xl shadow-lg p-6 card-shadow text-center text-white">

<div class="text-5xl mb-4">

</div>

<h3 class="text-xl font-bold mb-3">Baca Al-Quran</h3>

<p class="text-sm text-green-100">Dapat membaca Al-Quran

dengan Tajwid, Makhraj & sifat Huruf yang baik</p>

</div>

<div class="bg-gradient-to-br from-teal-500 to-teal-700 rounded-xl

shadow-lg p-6 card-shadow text-center text-white">

<div class="text-5xl mb-4">

</div>

<h3 class="text-xl font-bold mb-3">Hafalan Al-Quran</h3>

<p class="text-sm text-teal-100">Hafal Minimal 3 Juz Al-Quran (30,

29 & 28)</p>

</div>

<div class="bg-gradient-to-br from-yellow-500 to-yellow-700 rounded-

xl shadow-lg p-6 card-shadow text-center text-white">

<div class="text-5xl mb-4">

</div>

<h3 class="text-xl font-bold mb-3">Hafalan Hadist</h3>

<p class="text-sm text-yellow-100">Hafal Hadist-hadist pilihan dan

Arbain</p>

</div>

<div class="bg-gradient-to-br from-pink-500 to-pink-700 rounded-xl

shadow-lg p-6 card-shadow text-center text-white">

<div class="text-5xl mb-4">

🤲

</div>

<h3 class="text-xl font-bold mb-3">Doa Harian</h3>

<p class="text-sm text-pink-100">Hafal Do'a-do'a Harian</p>

</div>

<div class="bg-gradient-to-br from-orange-500 to-orange-700

rounded-xl shadow-lg p-6 card-shadow text-center text-white">

<div class="text-5xl mb-4">

</div>

<h3 class="text-xl font-bold mb-3">Memiliki Skill</h3>

<p class="text-sm text-orange-100">Berbagai keterampilan

praktis</p>

</div>

<div class="bg-gradient-to-br from-red-500 to-red-700 rounded-xl

shadow-lg p-6 card-shadow text-center text-white">

<div class="text-5xl mb-4">

</div>

<h3 class="text-xl font-bold mb-3">Akhlaqul Karimah</h3>

<p class="text-sm text-red-100">Berakhlaqul Karimah dan

Berkarakter Islam</p>

</div>

<div class="page" id="prestasi">

<div class="container mx-auto px-4 py-20">

<h2 class="text-4xl font-bold text-center text-blue-800 mb-4">Prestasi

Sekolah</h2>
<p class="text-center text-gray-600 mb-12">Pencapaian dan
Penghargaan SDIT Al Fatih</p>

<div class="max-w-5xl mx-auto">

<div class="grid grid-cols-1 md:grid-cols-3 gap-8"><!-- Raport

Pendidikan Terbaik -->

<div class="bg-white rounded-2xl shadow-lg overflow-hidden card-

shadow">

<div class="bg-gradient-to-br from-yellow-400 to-yellow-600 p-8 text-

center">

<div class="text-6xl mb-4">

</div>

<div class="p-6 text-center">

<h3 class="text-xl font-bold text-blue-800 mb-3">Raport Pendidikan

Terbaik</h3>

<p class="text-gray-700 leading-relaxed">Sekolah dengan Raport

Pendidikan Terbaik dari Kemendikbud Tahun 2023 dan 2024 berturut-
turut</p>

</div>

</div>

<div class="bg-white rounded-2xl shadow-lg overflow-hidden card-

shadow">

<div class="bg-gradient-to-br from-green-500 to-green-700 p-8 text-

center">

<div class="text-6xl mb-4">

</div>

<div class="p-6 text-center">

<h3 class="text-xl font-bold text-blue-800 mb-3">Terakreditasi

B</h3>
<p class="text-gray-700 leading-relaxed">Ter-Akreditasi oleh BAN
S/M dengan Nilai B (89)</p>

</div>

</div>

<div class="bg-white rounded-2xl shadow-lg overflow-hidden card-

shadow">

<div class="bg-gradient-to-br from-blue-500 to-blue-700 p-8 text-

center">

<div class="text-6xl mb-4">

</div>

<div class="p-6 text-center">

<h3 class="text-xl font-bold text-blue-800 mb-3">Anggota

JSIT</h3>

<p class="text-gray-700 leading-relaxed">Ter-Daftar sebagai

Anggota BLSIT-JSIT (Jaringan Sekolah Islam Terpadu) Indonesia</p>

</div>

<div class="page" id="video">

<div class="container mx-auto px-4 py-20">

<h2 class="text-4xl font-bold text-center text-blue-800 mb-4">Video

Profil</h2>

<p class="text-center text-gray-600 mb-12">Mengenal Lebih Dekat

SDIT Al Fatih Kota Tangerang</p>

<div class="max-w-4xl mx-auto">

<div class="bg-white rounded-2xl shadow-lg p-6 card-shadow">

</div>

<div class="mt-6 text-center">

<h3 class="text-xl font-bold text-blue-800 mb-2">Video Profil SDIT Al

Fatih</h3>

<p class="text-gray-600">Mengenal lebih dekat program dan

kegiatan di SDIT Al Fatih Kota Tangerang</p>

</div>

<div class="page" id="haji-umroh">

<div class="container mx-auto px-4 py-20">

<div class="text-center mb-12">

<h2 class="text-4xl font-bold text-blue-800 mb-4">Layanan Haji

& Umroh</h2>

<div class="arabic-text text-green-600 mb-4">

‫َّل‬
‫ِبْس ِم ال ِه الَّر ْح َمِن الَّر ِح يِم‬
</div>

<h3 class="text-2xl font-semibold text-gray-800 mb-3">Wujudkan

Impian Ibadah Haji & Umroh Anda</h3>

<p class="text-lg text-gray-600">Melayani perjalanan spiritual menuju

Tanah Suci dengan pelayanan terbaik dan amanah</p>

</div>

<div class="max-w-6xl mx-auto mb-16">

<div class="bg-gradient-to-br from-green-500 to-green-700 rounded-

2xl shadow-lg p-8 text-white card-shadow">
<div class="text-center mb-8">

<div class="text-6xl mb-4">

</div>

<h3 class="text-3xl font-bold mb-2">Info Haji Reguler</h3>

</div>

<div class="grid grid-cols-1 lg:grid-cols-2 gap-8">

<div class="bg-white/10 backdrop-blur-sm rounded-xl p-6">

<h4 class="text-xl font-bold mb-4">Persyaratan Haji Reguler:</h4>

<div class="flex items-start gap-3"><span class="text-yellow-300

text-xl flex-shrink-0">✓</span> <span>WNI yang beragama
Islam</span>

</div>

<div class="flex items-start gap-3"><span class="text-yellow-300

text-xl flex-shrink-0">✓</span> <span>Berusia minimal 12
tahun</span>

</div>

<div class="flex items-start gap-3"><span class="text-yellow-300

text-xl flex-shrink-0">✓</span> <span>Sehat jasmani dan
rohani</span>

</div>

<div class="flex items-start gap-3"><span class="text-yellow-300

text-xl flex-shrink-0">✓</span> <span>Mampu secara finansial</span>

</div>

<div class="flex items-start gap-3"><span class="text-yellow-300

text-xl flex-shrink-0">✓</span> <span>Wanita harus dengan
mahram</span>

</div>

</div>

<div class="bg-white/10 backdrop-blur-sm rounded-xl p-6">

<h4 class="text-xl font-bold mb-4">Dokumen yang
Diperlukan:</h4>

<div class="flex items-start gap-3"><span class="text-yellow-300

text-xl flex-shrink-0">📄</span> <span>KTP & Kartu
Keluarga</span>

</div>

<div class="flex items-start gap-3"><span class="text-yellow-300

text-xl flex-shrink-0">📄</span> <span>Akta Kelahiran</span>

</div>

<div class="flex items-start gap-3"><span class="text-yellow-300

text-xl flex-shrink-0">📄</span> <span>Paspor (minimal 6 bulan)</span>

</div>

<div class="flex items-start gap-3"><span class="text-yellow-300

text-xl flex-shrink-0">📄</span> <span>Surat Keterangan Sehat</span>

</div>

<div class="flex items-start gap-3"><span class="text-yellow-300

text-xl flex-shrink-0">📄</span> <span>Pas Foto 4x6 & 3x4</span>

</div>

</div>

<div class="mt-8 text-center bg-white/20 backdrop-blur-sm rounded-

xl p-6">

<h4 class="text-2xl font-bold mb-3">Biaya Haji Reguler 2024</h4>

<p class="text-3xl font-bold text-yellow-300 mb-2">Rp 35.000.000 -

Rp 40.000.000</p>

<p class="text-sm text-green-100">*Biaya dapat berubah sesuai

kebijakan pemerintah</p>

</div>

</div>

<div class="text-center mb-8">

<div class="text-6xl mb-4">

✈️

</div>

<h3 class="text-3xl font-bold text-blue-800 mb-2">Paket

Umroh</h3>

</div>

<div class="grid grid-cols-1 md:grid-cols-3 gap-6"><!-- Paket Ekonomi

-->

<div class="bg-white rounded-2xl shadow-lg overflow-hidden card-

shadow">

<div class="bg-gradient-to-br from-blue-500 to-blue-700 p-6 text-

center text-white">

<div class="text-5xl mb-3">

</div>

<h4 class="text-2xl font-bold mb-2">Paket Ekonomi</h4>

<p class="text-3xl font-bold mb-1">Rp 25.000.000</p>

<p class="text-blue-100">9 Hari</p>

</div>

<div class="flex items-start gap-3"><span class="text-green-500

text-xl flex-shrink-0">✓</span> <span class="text-gray-700">Hotel 3-4
Star</span>

</div>

<div class="flex items-start gap-3"><span class="text-green-500

text-xl flex-shrink-0">✓</span> <span class="text-gray-700">Pesawat
Reguler</span>

</div>
<div class="flex items-start gap-3"><span class="text-green-500
text-xl flex-shrink-0">✓</span> <span class="text-gray-700">Makan 3x
sehari</span>

</div>

<div class="flex items-start gap-3"><span class="text-green-500

text-xl flex-shrink-0">✓</span> <span class="text-gray-700">Transport
AC</span>

</div>

<div class="flex items-start gap-3"><span class="text-green-500

text-xl flex-shrink-0">✓</span> <span class="text-gray-
700">Perlengkapan Umroh</span>

</div>

<div class="flex items-start gap-3"><span class="text-green-500

text-xl flex-shrink-0">✓</span> <span class="text-gray-700">Bimbingan
Manasik</span>

</div>

</div>

<div class="bg-white rounded-2xl shadow-lg overflow-hidden card-

shadow relative">

<div class="absolute top-4 right-4 bg-yellow-400 text-yellow-900 px-

3 py-1 rounded-full text-xs font-bold z-10">

POPULER

</div>

<div class="bg-gradient-to-br from-purple-500 to-purple-700 p-6 text-

center text-white">

<div class="text-5xl mb-3">

</div>

<h4 class="text-2xl font-bold mb-2">Paket Silver</h4>

<p class="text-3xl font-bold mb-1">Rp 32.000.000</p>

<p class="text-purple-100">12 Hari</p>

</div>

<div class="flex items-start gap-3"><span class="text-green-500

text-xl flex-shrink-0">✓</span> <span class="text-gray-700">Hotel 4
Star</span>

</div>

<div class="flex items-start gap-3"><span class="text-green-500

text-xl flex-shrink-0">✓</span> <span class="text-gray-700">Pesawat
Langsung</span>

</div>

<div class="flex items-start gap-3"><span class="text-green-500

text-xl flex-shrink-0">✓</span> <span class="text-gray-700">Makan 3x
+ Snack</span>

</div>

<div class="flex items-start gap-3"><span class="text-green-500

text-xl flex-shrink-0">✓</span> <span class="text-gray-700">Transport
VIP</span>

</div>

<div class="flex items-start gap-3"><span class="text-green-500

text-xl flex-shrink-0">✓</span> <span class="text-gray-
700">Perlengkapan Premium</span>

</div>

<div class="flex items-start gap-3"><span class="text-green-500

text-xl flex-shrink-0">✓</span> <span class="text-gray-700">City Tour
Madinah</span>

</div>

</div>

<div class="bg-white rounded-2xl shadow-lg overflow-hidden card-

shadow">

<div class="bg-gradient-to-br from-yellow-500 to-yellow-700 p-6 text-

center text-white">
<div class="text-5xl mb-3">

</div>

<h4 class="text-2xl font-bold mb-2">Paket Gold</h4>

<p class="text-3xl font-bold mb-1">Rp 45.000.000</p>

<p class="text-yellow-100">15 Hari</p>

</div>

<div class="flex items-start gap-3"><span class="text-green-500

text-xl flex-shrink-0">✓</span> <span class="text-gray-700">Hotel 5
Star</span>

</div>

<div class="flex items-start gap-3"><span class="text-green-500

text-xl flex-shrink-0">✓</span> <span class="text-gray-700">First Class
Flight</span>

</div>

<div class="flex items-start gap-3"><span class="text-green-500

text-xl flex-shrink-0">✓</span> <span class="text-gray-700">All Meals
Premium</span>

</div>

<div class="flex items-start gap-3"><span class="text-green-500

text-xl flex-shrink-0">✓</span> <span class="text-gray-700">Private
Transport</span>

</div>

<div class="flex items-start gap-3"><span class="text-green-500

text-xl flex-shrink-0">✓</span> <span class="text-gray-700">Luxury
Amenities</span>

</div>

<div class="flex items-start gap-3"><span class="text-green-500

text-xl flex-shrink-0">✓</span> <span class="text-gray-700">Extended
Tours</span>

</div>
</div>

</div>

</div>

<div class="max-w-4xl mx-auto mb-12">

<div class="bg-gradient-to-r from-green-500 to-green-600 rounded-xl

shadow-lg p-8">

<div class="text-6xl mb-4">

</div>

<h3 class="text-3xl font-bold text-white mb-3">Hubungi Kami</h3>

<p class="text-lg text-green-100 mb-6">Tim profesional kami siap

membantu mewujudkan impian ibadah Anda</p><a
href="[Link]
%20ingin%20konsultasi%20tentang%20layanan%20Haji%20dan
%20Umroh" target="_blank" rel="noopener noreferrer" class="bg-white
text-green-600 px-8 py-4 rounded-lg font-bold text-lg inline-flex items-
center gap-3 hover:bg-green-50 transition-all"> <span class="text-3xl">📱
</span> Chat WhatsApp </a>

</div>

<div class="page" id="pendaftaran">

<div class="container mx-auto px-4 py-20">

<h2 class="text-4xl font-bold text-center text-blue-800 mb-

4">Pendaftaran SPMB 2026/2027</h2>

<p class="text-center text-gray-600 mb-12">Informasi Lengkap

Pendaftaran Siswa Baru</p>
<div class="max-w-6xl mx-auto mb-16">

<h3 class="text-3xl font-bold text-center text-blue-800 mb-8">Alur

Pendaftaran</h3>

<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6"><!--

Step 1 -->

<div class="bg-white rounded-xl shadow-lg p-6 card-shadow text-

center">

<div class="w-16 h-16 bg-blue-500 rounded-full flex items-center

justify-center text-white text-2xl font-bold mx-auto mb-4">

</div>

<h4 class="text-xl font-bold text-blue-800 mb-3">Daftar

Online</h4>

<p class="text-gray-700">Isi formulir pendaftaran online melalui link

yang tersedia</p>

</div>

<div class="bg-white rounded-xl shadow-lg p-6 card-shadow text-

center">

<div class="w-16 h-16 bg-green-500 rounded-full flex items-center

justify-center text-white text-2xl font-bold mx-auto mb-4">

</div>

<h4 class="text-xl font-bold text-blue-800 mb-3">Bayar Biaya</h4>

<p class="text-gray-700">Transfer biaya pendaftaran Rp

350.000</p>

</div>

<div class="bg-white rounded-xl shadow-lg p-6 card-shadow text-

center">

<div class="w-16 h-16 bg-purple-500 rounded-full flex items-center

justify-center text-white text-2xl font-bold mx-auto mb-4">

</div>

<h4 class="text-xl font-bold text-blue-800 mb-3">Tes Masuk</h4>

<p class="text-gray-700">Mengikuti tes masuk sesuai jadwal yang
ditentukan</p>

</div>

<div class="bg-white rounded-xl shadow-lg p-6 card-shadow text-

center">

<div class="w-16 h-16 bg-yellow-500 rounded-full flex items-center

justify-center text-white text-2xl font-bold mx-auto mb-4">

</div>

<h4 class="text-xl font-bold text-blue-800 mb-3">Daftar Ulang</h4>

<p class="text-gray-700">Melakukan daftar ulang jika dinyatakan

lulus</p>

</div>

</div>

<div class="max-w-4xl mx-auto mb-16">

<div class="bg-gradient-to-br from-blue-500 to-blue-700 rounded-2xl

shadow-lg p-8 text-white card-shadow">

<h3 class="text-3xl font-bold text-center mb-6">Persyaratan</h3>

<div class="flex items-start gap-4"><span class="text-yellow-300

text-2xl flex-shrink-0">✓</span> <span class="text-lg">Usia minimal 6
tahun pada 1 Juli 2026</span>

</div>

<div class="flex items-start gap-4"><span class="text-yellow-300

text-2xl flex-shrink-0">✓</span> <span class="text-lg">Fotokopi Akta
Kelahiran</span>

</div>

<div class="flex items-start gap-4"><span class="text-yellow-300

text-2xl flex-shrink-0">✓</span> <span class="text-lg">Fotokopi Kartu
Keluarga</span>

</div>
<div class="flex items-start gap-4"><span class="text-yellow-300
text-2xl flex-shrink-0">✓</span> <span class="text-lg">Pas foto 3x4 (3
lembar)</span>

</div>

<div class="flex items-start gap-4"><span class="text-yellow-300

text-2xl flex-shrink-0">✓</span> <span class="text-lg">Surat
keterangan sehat dari dokter</span>

</div>

</div>

<div class="max-w-4xl mx-auto mb-16">

<div class="bg-white rounded-2xl shadow-lg p-8 card-shadow text-

center">

<div class="text-6xl mb-4">

</div>

<h3 class="text-3xl font-bold text-blue-800 mb-4">Biaya

Pendaftaran</h3>

<p class="text-lg text-gray-700 mb-4">Biaya Pendaftaran SPMB

2026/2027</p>

<p class="text-4xl font-bold text-green-600 mb-2">Rp 350.000</p>

<p class="text-gray-600">Biaya formulir, tes masuk &

administrasi</p>

</div>

</div>

<div class="max-w-6xl mx-auto mb-16">

<h3 class="text-3xl font-bold text-center text-blue-800 mb-8">Jadwal

Pendaftaran SPMB 2026/2027</h3>

<div class="grid grid-cols-1 md:grid-cols-2 gap-6"><!-- Gelombang 1

-->

<div class="bg-gradient-to-br from-green-500 to-green-700 rounded-

2xl shadow-lg p-8 text-white card-shadow">
<div class="w-16 h-16 bg-white rounded-full flex items-center justify-
center text-green-600 text-2xl font-bold mx-auto mb-4">

</div>

<h4 class="text-2xl font-bold text-center mb-4">Gelombang 1</h4>

<p class="text-xl text-center mb-4 font-semibold">11 Agustus 2025 -

09 Januari 2026</p>

<div class="bg-white/20 backdrop-blur-sm rounded-lg p-4 text-

center">

<p class="font-semibold mb-2">Periode Pendaftaran Pertama</p>

<p class="text-sm">Dapatkan kesempatan terbaik untuk

mendaftar</p>

</div>

</div>

<div class="bg-gradient-to-br from-blue-500 to-blue-700 rounded-2xl

shadow-lg p-8 text-white card-shadow">

<div class="w-16 h-16 bg-white rounded-full flex items-center justify-

center text-blue-600 text-2xl font-bold mx-auto mb-4">

</div>

<h4 class="text-2xl font-bold text-center mb-4">Gelombang 2</h4>

<p class="text-xl text-center mb-4 font-semibold">11 Januari 2026 -

10 April 2026</p>

<div class="bg-white/20 backdrop-blur-sm rounded-lg p-4 text-

center">

<p class="font-semibold mb-2">Periode Pendaftaran Kedua</p>

<p class="text-sm">Kesempatan terakhir untuk bergabung</p>

</div>

</div>

<div class="max-w-6xl mx-auto mb-16">

<h3 class="text-3xl font-bold text-center text-blue-800 mb-8">Rincian
Biaya SPMB 2026/2027</h3>

<div class="bg-white rounded-xl shadow-lg p-6 card-shadow">

<div class="flex items-center gap-4 mb-6">

</div>

<h4 class="text-2xl font-bold text-blue-800">Rincian Biaya Daftar

Ulang (Jika Lulus)</h4>

</div>

<table>

<thead>

<tr>

<th>Uraian Biaya</th>

<th style="text-align: right;">Jumlah (Rp)</th>

</tr>

</thead>

<tbody>

<tr>

<td><strong>Pengembangan Pendidikan</strong><br><span
class="text-sm text-gray-600">(Satu kali pembayaran)</span></td>

<td style="text-align: right; font-weight: 600;">4.500.000</td>

</tr>

<tr>

<td><strong>Prasarana Pendidikan</strong><br><span
class="text-sm text-gray-600">(Satu kali pembayaran)</span></td>
<td style="text-align: right; font-weight: 600;">3.750.000</td>

</tr>

<tr>

<td><strong>Seragam</strong><br><span class="text-sm text-

gray-600">(4 Pcs Seragam)</span></td>

<td style="text-align: right; font-weight: 600;">1.150.000</td>

</tr>

<tr>

<td><strong>Buku</strong><br><span class="text-sm text-gray-

600">(Buku paket satu tahun, raport dan agenda siswa)</span></td>

<td style="text-align: right; font-weight: 600;">1.300.000</td>

</tr>

<tr>

<td><strong>Kegiatan Siswa</strong><br><span class="text-sm

text-gray-600">(Satu tahun)</span></td>

<td style="text-align: right; font-weight: 600;">2.000.000</td>

</tr>

<tr>

<td><strong>SPP</strong><br><span class="text-sm text-gray-

600">(Per bulan)</span></td>

<td style="text-align: right; font-weight: 600;">600.000</td>

</tr>

<tr>

<td><strong>Komite</strong><br><span class="text-sm text-

gray-600">(Per bulan)</span></td>

<td style="text-align: right; font-weight: 600;">30.000</td>

</tr>

<td colspan="2" style="text-align: right; padding-right:

1rem;"><strong>SUBTOTAL BIAYA DAFTAR ULANG</strong><br><span
class="text-sm">(Sebelum diskon)</span></td>

<td style="text-align: right; font-size: 1.2rem;">13.330.000</td>

</tr>

<td colspan="2" style="text-align: right; padding-right:

1rem;"><strong>DISKON GELOMBANG 1</strong><br><span
class="text-sm">(11 Agustus 2025 - 09 Januari 2026)</span></td>

<td style="text-align: right; font-size: 1.2rem;">- 2.000.000</td>

</tr>

<td colspan="2" style="text-align: right; padding-right:

1rem;"><strong>TOTAL BIAYA GELOMBANG 1</strong><br><span
class="text-sm">(Belum termasuk SPP & Komite
bulanan)</span></td>

<td style="text-align: right; font-size: 1.2rem;">11.330.000</td>

</tr>

<td colspan="2" style="text-align: right; padding-right:

1rem;"><strong>DISKON GELOMBANG 2</strong><br><span
class="text-sm">(11 Januari 2026 - 10 April 2026)</span></td>

<td style="text-align: right; font-size: 1.2rem;">- 1.000.000</td>

</tr>

<td colspan="2" style="text-align: right; padding-right:

1rem;"><strong>TOTAL BIAYA GELOMBANG 2</strong><br><span
class="text-sm">(Belum termasuk SPP & Komite
bulanan)</span></td>

<td style="text-align: right; font-size: 1.2rem;">12.330.000</td>

</tr>
</tbody>

</table>

</div>

</div>

<div class="max-w-6xl mx-auto mb-16">

<div class="bg-white rounded-xl shadow-lg p-6 card-shadow">

<div class="flex items-center gap-4 mb-6">

</div>

<h4 class="text-2xl font-bold text-blue-800">Biaya Bulanan</h4>

</div>

<div class="grid grid-cols-1 md:grid-cols-3 gap-6">

<div class="bg-blue-50 rounded-lg p-6 text-center border-2 border-

blue-200">

<p class="text-gray-700 mb-2 font-semibold">SPP Bulanan</p>

<p class="text-3xl font-bold text-blue-600">Rp 600.000</p>

</div>

<div class="bg-green-50 rounded-lg p-6 text-center border-2 border-

green-200">

<p class="text-gray-700 mb-2 font-semibold">Komite Bulanan</p>

<p class="text-3xl font-bold text-green-600">Rp 30.000</p>

</div>

<div class="bg-purple-50 rounded-lg p-6 text-center border-2 border-

purple-200">

<p class="text-gray-700 mb-2 font-semibold">Total Per Bulan</p>

<p class="text-3xl font-bold text-purple-600">Rp 630.000</p>

</div>

</div>
</div>

</div>

<div class="max-w-6xl mx-auto mb-16">

<div class="bg-gradient-to-br from-red-500 to-red-700 rounded-2xl

shadow-lg p-8 text-white card-shadow">

<div class="flex items-center gap-4 mb-6">

⚠️

</div>

<h3 class="text-3xl font-bold">Ketentuan Pembayaran</h3>

</div>

<div class="bg-white/10 backdrop-blur-sm rounded-lg p-6">

<h4 class="text-xl font-bold mb-3">1. Pembayaran Biaya Daftar

Ulang</h4>

<p class="text-lg leading-relaxed">Pembayaran biaya daftar ulang

sebesar <strong>30% dari total biaya masuk</strong>, selambat-
lambatnya dibayarkan <strong>satu bulan setelah calon siswa
dinyatakan lulus</strong>.</p>

</div>

<div class="bg-white/10 backdrop-blur-sm rounded-lg p-6">

<h4 class="text-xl font-bold mb-3">2. Konsekuensi

Keterlambatan</h4>

<p class="text-lg leading-relaxed">Jika pembayaran lewat dari 1

bulan tanpa konfirmasi setelah dinyatakan lulus, calon siswa/i dianggap
telah mengundurkan diri dan akan digantikan dengan calon siswa/i yang
berada pada daftar waitinglist.</p>

</div>

<div class="bg-white/10 backdrop-blur-sm rounded-lg p-6">

<h4 class="text-xl font-bold mb-3">3. Program Cicilan</h4>

<p class="text-lg leading-relaxed">Cicilan biaya masuk bisa melalui

proses angsuran. <strong>Maksimal 6 bulan</strong> terhitung dari awal
masuk siswa.</p>
</div>

</div>

</div>

<div class="max-w-6xl mx-auto mb-16">

<div class="bg-yellow-50 border-2 border-yellow-400 rounded-2xl

shadow-lg p-8">

<h3 class="text-2xl font-bold text-yellow-800 mb-6 text-

center">Keterangan Penting</h3>

<div class="flex items-start gap-3"><span class="text-yellow-600

text-xl flex-shrink-0">•</span>

<p class="text-gray-800 leading-relaxed">Biaya pendaftaran Rp

350.000 <strong>tidak dapat dikembalikan dalam kondisi
apapun</strong></p>

</div>

<div class="flex items-start gap-3"><span class="text-yellow-600

text-xl flex-shrink-0">•</span>

<p class="text-gray-800 leading-relaxed"><strong>Diskon

Gelombang 1:</strong> Rp 2.000.000 (Total: Rp 11.330.000)</p>

</div>

<div class="flex items-start gap-3"><span class="text-yellow-600

text-xl flex-shrink-0">•</span>

<p class="text-gray-800 leading-relaxed"><strong>Diskon

Gelombang 2:</strong> Rp 1.000.000 (Total: Rp 12.330.000)</p>

</div>

<div class="flex items-start gap-3"><span class="text-yellow-600

text-xl flex-shrink-0">•</span>

<p class="text-gray-800 leading-relaxed">SPP dan Komite Rp

630.000/bulan dibayar setiap <strong>tanggal 1-10 setiap
bulannya</strong></p>

</div>
<div class="flex items-start gap-3"><span class="text-yellow-600
text-xl flex-shrink-0">•</span>

<p class="text-gray-800 leading-relaxed">Tersedia

<strong>program beasiswa</strong> untuk siswa berprestasi dan kurang
mampu</p>

</div>

<div class="flex items-start gap-3"><span class="text-yellow-600

text-xl flex-shrink-0">•</span>

<p class="text-gray-800 leading-relaxed">Biaya dapat berubah

sewaktu-waktu sesuai kebijakan sekolah</p>

</div>

<div class="flex items-start gap-3"><span class="text-yellow-600

text-xl flex-shrink-0">•</span>

<p class="text-gray-800 leading-relaxed">Untuk informasi program

cicilan, silakan hubungi bagian keuangan sekolah</p>

</div>

</div>

<div class="max-w-4xl mx-auto text-center">

<div class="bg-gradient-to-br from-green-500 to-green-700 rounded-

2xl shadow-lg p-8 card-shadow">

<h3 class="text-3xl font-bold text-white mb-6">Siap

Mendaftar?</h3>

<p class="text-lg text-green-100 mb-8">Hubungi kami untuk

informasi lebih lanjut dan proses pendaftaran</p>

<div class="flex flex-col sm:flex-row gap-4 justify-center"><a

href="[Link]
dzGegM-e0n7fhqn0NFOIN4XW2YIXasQ/viewform?usp=send_form"
target="_blank" rel="noopener noreferrer" class="bg-white text-green-
600 px-8 py-4 rounded-lg font-bold text-lg inline-flex items-center justify-
center gap-3 hover:bg-green-50 transition-all"> <span class="text-2xl">📝
</span> Daftar Sekarang </a> <a href="[Link]
text=Halo,%20saya%20ingin%20bertanya%20tentang%20pendaftaran
%20SDIT%20Al%20Fatih" target="_blank" rel="noopener noreferrer"
class="bg-white text-green-600 px-8 py-4 rounded-lg font-bold text-lg
inline-flex items-center justify-center gap-3 hover:bg-green-50 transition-
all"> <span class="text-2xl">📱</span> WhatsApp Call Center </a>

</div>

<div class="page" id="kontak">

<div class="container mx-auto px-4 py-20">

<div class="text-center mb-16">

<h2 class="text-5xl font-bold text-blue-800 mb-4">Hubungi

Kami</h2>

<p class="text-xl text-gray-600">Kami siap membantu Anda</p>

</div>

<div class="max-w-7xl mx-auto">

<div class="grid grid-cols-1 lg:grid-cols-2 gap-8"><!-- Left Column -

Contact Information -->

<div class="bg-gradient-to-br from-blue-600 via-blue-700 to-blue-800

rounded-3xl shadow-2xl p-10 text-white">

<h3 class="text-3xl font-bold mb-2">Informasi Kontak</h3>

<p class="text-blue-100">Jangan ragu untuk menghubungi

kami</p>

</div>

<div class="space-y-8">

<div class="flex items-start gap-4 group">

<div class="w-14 h-14 bg-white/10 backdrop-blur-sm rounded-2xl

flex items-center justify-center flex-shrink-0 group-hover:bg-white/20
transition-all"><span class="text-3xl">📍</span>

</div>

<div>
<h4 class="text-lg font-semibold mb-2">Alamat</h4>

<p class="text-blue-100 leading-relaxed">Jl. Sekretaris,

RT.002/RW.003<br>

Cipete, Kec. Pinang<br>

Kota Tangerang, Banten 15142</p>

</div>

</div>

<div class="flex items-start gap-4 group">

<div class="w-14 h-14 bg-white/10 backdrop-blur-sm rounded-2xl

flex items-center justify-center flex-shrink-0 group-hover:bg-white/20
transition-all"><span class="text-3xl">💬</span>

</div>

<div>

<h4 class="text-lg font-semibold mb-2">WhatsApp</h4><a

href="[Link] target="_blank" rel="noopener
noreferrer" class="text-xl font-bold text-white hover:text-yellow-300
transition-colors"> 0822-2230-0300 </a>

</div>

</div>

<div class="flex items-start gap-4 group">

<div class="w-14 h-14 bg-white/10 backdrop-blur-sm rounded-2xl

flex items-center justify-center flex-shrink-0 group-hover:bg-white/20
transition-all"><span class="text-3xl">📧</span>

</div>

<div>

<h4 class="text-lg font-semibold mb-2">Email</h4><a

href="[Link] class="text-blue-100 hover:text-
white transition-colors break-all"> sditalfatihdoc@[Link] </a>

</div>

</div>

<div class="flex items-start gap-4 group">

</div>

<div>

<h4 class="text-lg font-semibold mb-2">Instagram</h4><a

href="[Link]
target="_blank" rel="noopener noreferrer" class="text-blue-100
hover:text-white transition-colors"> @sditalfatihtangerang </a>

</div>

</div>

<div class="mt-10 pt-8 border-t border-white/20">

<div class="flex gap-4"><a href="[Link]

text=Halo,%20saya%20ingin%20bertanya%20tentang%20SDIT%20Al
%20Fatih" target="_blank" rel="noopener noreferrer" class="flex-1 bg-
white/10 backdrop-blur-sm hover:bg-white/20 rounded-xl py-3 px-4 text-
center font-semibold transition-all transform hover:scale-105"> 💬 Chat
</a> <a href="[Link]
target="_blank" rel="noopener noreferrer" class="flex-1 bg-white/10
backdrop-blur-sm hover:bg-white/20 rounded-xl py-3 px-4 text-center font-
semibold transition-all transform hover:scale-105"> 📷 Follow </a>

</div>

</div>

<div class="space-y-8">

<div class="bg-white rounded-3xl shadow-2xl p-10">

<div class="flex items-center gap-4 mb-8">

<div class="w-16 h-16 bg-gradient-to-br from-blue-500 to-blue-700

rounded-2xl flex items-center justify-center"><span class="text-4xl">🕐
</span>

</div>

<div>
<h3 class="text-2xl font-bold text-gray-800">Jam
Operasional</h3>

<p class="text-gray-600">Waktu layanan kami</p>

</div>

<div class="flex items-center justify-between p-5 bg-gradient-to-r

from-blue-50 to-blue-100 rounded-2xl border-l-4 border-blue-500">

<div>

<p class="font-semibold text-gray-800">Senin - Jumat</p>

<p class="text-sm text-gray-600">Hari Kerja</p>

</div><span class="font-bold text-blue-700 text-lg">07:00 -

16:00</span>

</div>

<div class="flex items-center justify-between p-5 bg-gradient-to-r

from-green-50 to-green-100 rounded-2xl border-l-4 border-green-500">

<div>

<p class="font-semibold text-gray-800">Sabtu</p>

<p class="text-sm text-gray-600">Hari Kerja</p>

</div><span class="font-bold text-green-700 text-lg">07:00 -

12:00</span>

</div>

<div class="flex items-center justify-between p-5 bg-gradient-to-r

from-red-50 to-red-100 rounded-2xl border-l-4 border-red-500">

<div>

<p class="font-semibold text-gray-800">Minggu</p>

<p class="text-sm text-gray-600">Hari Libur</p>

</div><span class="font-bold text-red-700

text-lg">TUTUP</span>

</div>

</div>
</div>

<div class="bg-white rounded-3xl shadow-2xl p-10">

<div class="flex items-center gap-4 mb-6">

<div class="w-16 h-16 bg-gradient-to-br from-green-500 to-green-

700 rounded-2xl flex items-center justify-center"><span class="text-
4xl"></span>

</div>

<div>

<h3 class="text-2xl font-bold text-gray-800">Lokasi Kami</h3>

<p class="text-gray-600">Temukan kami di peta</p>

</div>

<p class="text-gray-700 mb-6 leading-relaxed">Jl. Sekretaris,

RT.002/RW.003<br>

Cipete, Kec. Pinang<br>

Kota Tangerang, Banten 15142</p><a

href="[Link]
+Sekretaris+RT.002+RW.003+Cipete+Pinang+Tangerang+Banten+15142
" target="_blank" rel="noopener noreferrer" class="block w-full bg-
gradient-to-r from-green-500 to-green-600 hover:from-green-600
hover:to-green-700 text-white font-bold py-4 px-6 rounded-2xl text-center
transition-all transform hover:scale-105 shadow-lg"> <span class="text-xl
mr-2">📍</span> Buka di Google Maps </a>

</div>

// Page Navigation

function showPage(pageId) {
const pages = [Link]('.page');

[Link](page => [Link]('active'));

const targetPage = [Link](pageId);

if (targetPage) {

[Link]('active');

[Link]({ top: 0, behavior: 'smooth' });

// Update active nav item

const navItems = [Link]('.nav-item');

[Link](item => [Link]('active'));

// Mobile Menu Toggle

function toggleMobileMenu() {

const mobileMenu = [Link]('mobileMenu');

[Link]('active');

function closeMobileMenu() {

const mobileMenu = [Link]('mobileMenu');

[Link]('active');

// News functionality - Connected to Google Sheets

let newsData = [];

//
============================================

// PANDUAN KONEKSI GOOGLE SHEETS

//
============================================

// LANGKAH 1: BUAT GOOGLE SPREADSHEET

// ----------------------------------

// 1. Buka Google Sheets ([Link])

// 2. Buat spreadsheet baru dengan nama "SDIT Al Fatih - News

Database"

// 3. Buat sheet dengan nama "News" (atau nama lain sesuai

keinginan)

// 4. Buat kolom header di baris pertama dengan urutan berikut:

// A1: id

// B1: kategori

// C1: judul

// D1: ringkasan

// E1: konten

// F1: tanggal

// G1: gambar

// LANGKAH 2: ISI DATA CONTOH

// --------------------------

// Isi baris ke-2 dan seterusnya dengan data berita, contoh:

// A2: 1

// B2: pengumuman

// C2: Pendaftaran SPMB 2026/2027 Dibuka

// D2: Pendaftaran siswa baru tahun ajaran 2026/2027 telah dibuka

// E2: Kami mengumumkan bahwa pendaftaran siswa baru untuk

tahun ajaran 2026/2027 telah resmi dibuka...
// F2: 15 Januari 2025

// G2: 📢 (atau URL gambar seperti [Link]

// Kategori yang valid: berita, artikel, informasi

// LANGKAH 3: BUAT GOOGLE APPS SCRIPT

// ----------------------------------

// 1. Di Google Sheets, klik menu "Extensions" > "Apps Script"

// 2. Hapus kode default dan paste kode berikut:

// function doGet(e) {

// var sheet =
[Link]().getSheetByName('News');

// var data = [Link]().getValues();

// var headers = data[0];

// var jsonData = [];

// for (var i = 1; i < [Link]; i++) {

// var row = {};

// for (var j = 0; j < [Link]; j++) {

// row[headers[j]] = data[i][j];

// }

// [Link](row);

// }

// return [Link]([Link](jsonData))

// .setMimeType([Link]);

// }

//
// 3. Klik "Save" (ikon disket)

// 4. Beri nama project: "SDIT News API"

// LANGKAH 4: DEPLOY APPS SCRIPT

// -----------------------------

// 1. Klik "Deploy" > "New deployment"

// 2. Klik ikon gear (⚙️) di sebelah "Select type"

// 3. Pilih "Web app"

// 4. Isi konfigurasi:

// - Description: "SDIT News API"

// - Execute as: "Me"

// - Who has access: "Anyone"

// 5. Klik "Deploy"

// 6. Klik "Authorize access"

// 7. Pilih akun Google Anda

// 8. Klik "Advanced" > "Go to [project name] (unsafe)"

// 9. Klik "Allow"

// 10. Copy "Web app URL" yang muncul (contoh:

[Link]

// LANGKAH 5: PASTE URL KE KODE

// ----------------------------

// Ganti URL di bawah ini dengan URL yang Anda copy dari langkah 4:

const APPS_SCRIPT_URL =
'[Link]
UWI7o3EQjvyE9Q1zDhtFzPbZc2Jlx08CsRS5Wbfw/exec';

// LANGKAH 6: TEST KONEKSI

// -----------------------
// 1. Simpan file HTML ini

// 2. Buka halaman News di website

// 3. Buka Console browser (F12 > Console)

// 4. Lihat apakah ada pesan "Data received" dengan data berita

// 5. Jika berhasil, berita akan muncul di halaman

// TROUBLESHOOTING:

// ---------------

// - Jika tidak ada data: Pastikan sheet name "News" sesuai dengan
kode Apps Script

// - Jika error CORS: Pastikan "Who has access" di Apps Script adalah
"Anyone"

// - Jika error 404: Pastikan URL Apps Script sudah benar dan
deployment aktif

// - Untuk update data: Edit Google Sheets langsung, data akan

otomatis terupdate di website

//
============================================

// Fetch news from Google Sheets via Apps Script

async function fetchNewsData() {

try {

[Link]('Fetching news from Google Sheets...');

const response = await fetch(APPS_SCRIPT_URL);

if (![Link]) {

throw new Error(`HTTP error! status: ${[Link]}`);

const data = await [Link]();

[Link]('Data received:', data);

if (data && [Link](data) && [Link] > 0) {

newsData = [Link](item => {

// Format date to d/m/y

let formattedDate = '';

if ([Link]) {

try {

const date = new Date([Link]);

const day = [Link]();

const month = [Link]() + 1;

const year = [Link]();

formattedDate = `${day}/${month}/${year}`;

} catch (e) {

formattedDate = [Link];

} else {

const today = new Date();

formattedDate = `${[Link]()}/$
{[Link]() + 1}/${[Link]()}`;

return {

id: [Link] || [Link]().toString(),

category: [Link] ? [Link]() :

'berita',

title: [Link] || 'Judul Berita',

excerpt: [Link] || '',

content: [Link] || '',

date: formattedDate,
image: [Link] || '📰'

};

});

[Link]('News data processed:', [Link],

'items');

return true;

} else {

[Link]('No data received from Google Sheets');

return false;

} catch (error) {

[Link]('Error fetching news:', error);

return false;

function renderNews(filter = 'all') {

const newsGrid = [Link]('newsGrid');

const newsLoading = [Link]('newsLoading');

const newsEmpty = [Link]('newsEmpty');

[Link] = 'block';

[Link] = '';

setTimeout(() => {

[Link] = 'none';
const filteredNews = filter === 'all' ? newsData :
[Link](news => [Link] === filter);

if ([Link] === 0) {

[Link]('hidden');

return;

[Link]('hidden');

[Link](news => {

const newsCard = [Link]('div');

[Link] = 'bg-white rounded-2xl shadow-2xl

overflow-hidden news-item cursor-pointer transform transition-all
duration-300 hover:scale-105 hover:shadow-3xl border-2 border-
transparent hover:border-blue-400';

[Link] = () => openNewsModal(news);

// Check if image is URL or emoji

const isImageUrl = [Link] &&

([Link]('[Link] || [Link]('[Link]

// Category colors

const categoryColors = {

'berita': 'from-blue-500 to-blue-700',

'artikel': 'from-green-500 to-green-700',

'informasi': 'from-purple-500 to-purple-700'

};

const gradientColor = categoryColors[[Link]] ||

'from-blue-400 to-blue-600';
// Category badges

const categoryBadges = {

'berita': '<span class="bg-blue-500 text-white px-4 py-1

rounded-full text-sm font-bold">📰 BERITA</span>',

'artikel': '<span class="bg-green-500 text-white px-4 py-1

rounded-full text-sm font-bold">📝 ARTIKEL</span>',

'informasi': '<span class="bg-purple-500 text-white px-4

py-1 rounded-full text-sm font-bold">ℹ️INFORMASI</span>'

};

const categoryBadge = categoryBadges[[Link]] ||

'<span class="bg-blue-500 text-white px-4 py-1 rounded-full text-sm font-
bold">📰 BERITA</span>';

[Link] = `

<div class="h-56 bg-gradient-to-br ${gradientColor}

flex items-center justify-center overflow-hidden">

${isImageUrl

? `<img src="${[Link]}" alt="${[Link]}"

class="w-full h-full object-cover" onerror="[Link]='none';
[Link]='<span class=\\'text-7xl\\'>📰</span>';">`

: `<span class="text-7xl">${[Link] ||
'📰'}</span>`

</div>

<div class="absolute top-4 left-4">

${categoryBadge}

</div>

<h3 class="text-2xl font-bold text-gray-800 mb-3 line-

clamp-2 hover:text-blue-600 transition-colors">${[Link]}</h3>
<p class="text-gray-600 mb-4 line-clamp-3 leading-
relaxed">${[Link]}</p>

<div class="pt-4 border-t border-gray-200">

<div class="flex items-center gap-2 mb-4">

<span class="text-sm text-gray-500 font-

medium">${[Link]}</span>

</div>

<button class="w-full bg-gradient-to-r from-blue-600

to-blue-700 hover:from-blue-700 hover:to-blue-800 text-white font-bold
py-3 px-6 rounded-lg flex items-center justify-center gap-2 group
transition-all transform hover:scale-105 shadow-lg">

Baca Selengkapnya

<span class="transform group-hover:translate-x-1

transition-transform">→</span>

</button>

</div>

[Link](newsCard);

});

}, 300);

function filterNews(category) {

const filterButtons = [Link]('.news-filter-btn');

[Link](btn => {

[Link]('active', 'bg-gradient-to-r', 'from-blue-600',

'to-blue-700', 'text-white');

[Link]('bg-white', 'text-gray-700', 'border-2', 'border-

gray-200');
});

[Link]('bg-white', 'text-gray-700', 'border-

2', 'border-gray-200');

[Link]('active', 'bg-gradient-to-r', 'from-blue-

600', 'to-blue-700', 'text-white');

renderNews(category);

function openNewsModal(news) {

const modal = [Link]('newsModal');

const modalContent =
[Link]('modalNewsContent');

// Check if image is URL or emoji

const isImageUrl = [Link] &&

([Link]('[Link] || [Link]('[Link]

[Link] = `

<div class="text-center mb-6">

${isImageUrl

? `<div class="mb-4"><img src="${[Link]}" alt="$

{[Link]}" class="max-w-full h-auto rounded-lg mx-auto" style="max-
height: 300px;" onerror="[Link]='none';
[Link]='<div class=\\'text-6xl mb-
4\\'>📰</div>';"></div>`

: `<div class="text-6xl mb-4">${[Link] ||

'📰'}</div>`

<div class="text-sm text-blue-600 font-semibold mb-2">$

{[Link]()}</div>
<h2 class="text-3xl font-bold text-gray-800 mb-2">$
{[Link]}</h2>

</div>

<div class="prose max-w-none">

${[Link] ? `<p class="text-gray-700 leading-relaxed

mb-4 font-semibold">${[Link]}</p>` : ''}

${[Link] ? `<div class="text-gray-700 leading-relaxed

whitespace-pre-line">${[Link]}</div>` : ''}

</div>

[Link]('active');

function closeNewsModal() {

const modal = [Link]('newsModal');

[Link]('active');

// Close modal when clicking outside

[Link]('newsModal').addEventListener('click',
function(e) {

if ([Link] === this) {

closeNewsModal();

});

// Initialize news on page load

[Link]('DOMContentLoaded', async function() {

// Fetch news data from Google Sheets

const success = await fetchNewsData();

if (success && [Link] > 0) {

renderNews();

} else {

// Show empty state if no data

[Link]('newsLoading').[Link] =
'none';

[Link]('newsEmpty').[Link]('hidden');

});

// Admin Login Functions

let isAdminLoggedIn = false;

function showAdminLogin() {

const modal = [Link]('adminLoginModal');

[Link]('active');

[Link]('loginError').[Link]('hidden');

[Link]('adminUsername').value = '';

[Link]('adminPassword').value = '';

function closeAdminLogin() {

const modal = [Link]('adminLoginModal');

[Link]('active');

}
function handleAdminLogin(event) {

[Link]();

const username =
[Link]('adminUsername').value;

const password =
[Link]('adminPassword').value;

const loginError = [Link]('loginError');

// Check credentials

if (username === 'sdit74' && password === 'sdityes') {

isAdminLoggedIn = true;

closeAdminLogin();

showAdminPanel();

} else {

[Link]('hidden');

setTimeout(() => {

[Link]('hidden');

}, 3000);

function showAdminPanel() {

const modal = [Link]('adminPanelModal');

[Link]('active');

function closeAdminPanel() {

const modal = [Link]('adminPanelModal');

[Link]('active');
}

function adminLogout() {

isAdminLoggedIn = false;

closeAdminPanel();

showStatusMessage('Berhasil logout!', 'success');

async function updateNewsData() {

showStatusMessage('Mengupdate berita...', 'info');

const success = await fetchNewsData();

if (success && [Link] > 0) {

renderNews();

showStatusMessage('✅ Berita berhasil diupdate! Total: ' +

[Link] + ' berita', 'success');

} else {

showStatusMessage('❌ Gagal mengupdate berita. Coba lagi.',

'error');

async function refreshNewsData() {

showStatusMessage('Merefresh berita...', 'info');

// Clear cache and fetch fresh data

newsData = [];

const success = await fetchNewsData();

if (success && [Link] > 0) {

renderNews();

showStatusMessage('✅ Berita berhasil direfresh! Total: ' +

[Link] + ' berita', 'success');

} else {

showStatusMessage('❌ Gagal merefresh berita. Coba lagi.',

'error');

function showStatusMessage(message, type) {

const statusDiv =
[Link]('adminStatusMessage');

[Link]('hidden', 'bg-blue-100', 'text-blue-700',

'bg-green-100', 'text-green-700', 'bg-red-100', 'text-red-700');

if (type === 'success') {

[Link]('bg-green-100', 'text-green-700');

} else if (type === 'error') {

[Link]('bg-red-100', 'text-red-700');

} else {

[Link]('bg-blue-100', 'text-blue-700');

[Link] = message;

[Link]('hidden');

if (type !== 'info') {

setTimeout(() => {

[Link]('hidden');
}, 5000);

// Close modals when clicking outside

[Link]('adminLoginModal').addEventListener('click',
function(e) {

if ([Link] === this) {

closeAdminLogin();

});

[Link]('adminPanelModal').addEventListener('click',
function(e) {

if ([Link] === this) {

closeAdminPanel();

});

</script>

<script>(function(){function c(){var b=[Link]||

[Link];if(b){var
d=[Link]('script');[Link]="window.__CF$cv$params={r:'9
9ccfdec64ac6d44',t:'MTc2Mjg1NTc0My4wMDAwMDA='};var
a=[Link]('script');[Link]='';[Link]='/cdn-cgi/challenge-
platform/scripts/jsd/[Link]';[Link]('head')
[0].appendChild(a);";[Link]('head')
[0].appendChild(d)}}if([Link]){var
a=[Link]('iframe');[Link]=1;[Link]=1;[Link]
n='absolute';[Link]=0;[Link]=0;[Link]='none';[Link]
bility='hidden';[Link](a);if('loading'!
==[Link])c();else
if([Link])[Link]('DOMContentLoa
ded',c);else{var e=[Link]||function()
{};[Link]=function(b){e(b);'loading'!
==[Link]&&([Link]=e,c())}}}})
();</script></body>

</html>

Animal Farm Portfolio Overview
No ratings yet
Animal Farm Portfolio Overview
52 pages
Card Picker Interface Overview
No ratings yet
Card Picker Interface Overview
4 pages
Skeleton CSS
No ratings yet
Skeleton CSS
8 pages
Upholstery HTML
No ratings yet
Upholstery HTML
33 pages
API for PDF Document Conversion
No ratings yet
API for PDF Document Conversion
23 pages
Job Scheduling for July 2024
No ratings yet
Job Scheduling for July 2024
1 page
Frontend Notes
No ratings yet
Frontend Notes
7 pages
HTML Editor Template and Styles
No ratings yet
HTML Editor Template and Styles
13 pages
Master Auditing With Structured Excellence
No ratings yet
Master Auditing With Structured Excellence
124 pages
Mobile-Friendly Email Template Design
No ratings yet
Mobile-Friendly Email Template Design
1,093 pages
Css Foundation
No ratings yet
Css Foundation
5 pages
Tailwind CSS v4.1.11 Properties and Theme
No ratings yet
Tailwind CSS v4.1.11 Properties and Theme
118 pages
Custom Font Styles and Layout CSS
No ratings yet
Custom Font Styles and Layout CSS
15 pages
!doctype HTML
No ratings yet
!doctype HTML
2 pages
Khaos Editable
No ratings yet
Khaos Editable
30 pages
My Webcrumbs Plugin Overview
No ratings yet
My Webcrumbs Plugin Overview
54 pages
Professional Web Designer Portfolio
No ratings yet
Professional Web Designer Portfolio
13 pages
CSS Styling and Variables Overview
No ratings yet
CSS Styling and Variables Overview
5 pages
5e24 PHB Style CSS Theme
No ratings yet
5e24 PHB Style CSS Theme
36 pages
RPP Generator Tool Overview
No ratings yet
RPP Generator Tool Overview
67 pages
Virtual World Game Server Guide
No ratings yet
Virtual World Game Server Guide
18 pages
CSS CheatSheets
No ratings yet
CSS CheatSheets
4 pages
Doctype
No ratings yet
Doctype
43 pages
HTML Document Structure and Styles
No ratings yet
HTML Document Structure and Styles
31 pages
CoolAdmin Master Stylesheet Guide
No ratings yet
CoolAdmin Master Stylesheet Guide
249 pages
UEM Bloco D67 Overview
No ratings yet
UEM Bloco D67 Overview
45 pages
CSS Color Reference Methods
No ratings yet
CSS Color Reference Methods
6 pages
Asokore Mampong Assembly Hub
No ratings yet
Asokore Mampong Assembly Hub
20 pages
AirPods 3: Som Cristalino e Ruído
No ratings yet
AirPods 3: Som Cristalino e Ruído
13 pages
Belajar CSS dan HTML untuk Desain Web
No ratings yet
Belajar CSS dan HTML untuk Desain Web
33 pages
Progamacion Atlas
No ratings yet
Progamacion Atlas
15 pages
5e24 PHB Style Custom Theme
No ratings yet
5e24 PHB Style Custom Theme
36 pages
Tailwind CSS Utility Classes Guide
0% (1)
Tailwind CSS Utility Classes Guide
2 pages
FOG - Invitation - HTML
No ratings yet
FOG - Invitation - HTML
57 pages
Oxidation State Studio Interface
No ratings yet
Oxidation State Studio Interface
10 pages
MARTHENUS CSS Variables Guide
No ratings yet
MARTHENUS CSS Variables Guide
4 pages
Установка Stylelint Order
No ratings yet
Установка Stylelint Order
10 pages
Custom CSS for Japanese Fonts
No ratings yet
Custom CSS for Japanese Fonts
6 pages
Tailwind CSS Utility Classes Guide
No ratings yet
Tailwind CSS Utility Classes Guide
12 pages
Css Practice Problems Solutions
No ratings yet
Css Practice Problems Solutions
12 pages
Css Practice Problems-Solutions
No ratings yet
Css Practice Problems-Solutions
12 pages
Revista Digital - Cultura Digital
No ratings yet
Revista Digital - Cultura Digital
25 pages
YKS 2026 Hazırlık Platformu
No ratings yet
YKS 2026 Hazırlık Platformu
51 pages
Sistema de Alertas RADAR GHT
No ratings yet
Sistema de Alertas RADAR GHT
68 pages
Asignment 1
No ratings yet
Asignment 1
33 pages
Style Css
No ratings yet
Style Css
19 pages
CA 58381253 Document Overview
No ratings yet
CA 58381253 Document Overview
9 pages
HTML Document Structure and Styles
No ratings yet
HTML Document Structure and Styles
45 pages
HTML CSS Performance Task Overview
No ratings yet
HTML CSS Performance Task Overview
9 pages
Simulateur de Matchs de Football
No ratings yet
Simulateur de Matchs de Football
115 pages
Panel Principal
No ratings yet
Panel Principal
117 pages
Personal Finance Management Tool
No ratings yet
Personal Finance Management Tool
48 pages
Explore Incredible India Now
No ratings yet
Explore Incredible India Now
23 pages
E-commerce Webpage Design Example
No ratings yet
E-commerce Webpage Design Example
12 pages
5e24 PHB Style Theme Guide
No ratings yet
5e24 PHB Style Theme Guide
36 pages
Incredible India Travel Guide
No ratings yet
Incredible India Travel Guide
38 pages
Design Tokens for Theming
No ratings yet
Design Tokens for Theming
7 pages
Grade 6 Science Lesson: Solar System
No ratings yet
Grade 6 Science Lesson: Solar System
7 pages
Quantifiers Exercises for Class 5
100% (1)
Quantifiers Exercises for Class 5
4 pages
Advising Slip for BS in Electronics Engineering
No ratings yet
Advising Slip for BS in Electronics Engineering
2 pages
Fish and Brewis
No ratings yet
Fish and Brewis
2 pages
Methods of Philosophizing and Truth
No ratings yet
Methods of Philosophizing and Truth
4 pages
Elizabeth City Utility Bill
No ratings yet
Elizabeth City Utility Bill
1 page
Faculty Performance Assessment Rubric
No ratings yet
Faculty Performance Assessment Rubric
4 pages
Evolution of Teenage Gangs in Bangladesh
No ratings yet
Evolution of Teenage Gangs in Bangladesh
20 pages
PROTEK ETL: Epoxy Coating for Tanks
No ratings yet
PROTEK ETL: Epoxy Coating for Tanks
1 page
Number Series and Problem Solving
No ratings yet
Number Series and Problem Solving
3 pages
TLE 223 - Entrepreneurship: Ms. Edelyn O. Cubio LPT
No ratings yet
TLE 223 - Entrepreneurship: Ms. Edelyn O. Cubio LPT
30 pages
MP and CHH LIST
No ratings yet
MP and CHH LIST
3 pages
Challenges in Philippine Nursing Law
No ratings yet
Challenges in Philippine Nursing Law
1 page
Basic TEMA Construction of Heat Exchangers
No ratings yet
Basic TEMA Construction of Heat Exchangers
8 pages
CA Intermediate Management Test MCQs
No ratings yet
CA Intermediate Management Test MCQs
6 pages
SN 54163
No ratings yet
SN 54163
25 pages
Induction and Environmental Impacts
No ratings yet
Induction and Environmental Impacts
2 pages
Afrikaans
No ratings yet
Afrikaans
6 pages
Fixing Common Programming Errors
No ratings yet
Fixing Common Programming Errors
3 pages
Deputy CFO Job Description
No ratings yet
Deputy CFO Job Description
2 pages
Outdoor Safety Practices and First Aid
No ratings yet
Outdoor Safety Practices and First Aid
20 pages
ECGD Performance and Future Recommendations
No ratings yet
ECGD Performance and Future Recommendations
37 pages
Iqbal's Concept of Ego Explained
No ratings yet
Iqbal's Concept of Ego Explained
14 pages
ASEAN Youth Cultural Events in Vietnam
No ratings yet
ASEAN Youth Cultural Events in Vietnam
4 pages
Grade 7 MYP Final Exam Portions 2024-2025
No ratings yet
Grade 7 MYP Final Exam Portions 2024-2025
5 pages
Tranexamic Acid for Melasma Treatment
No ratings yet
Tranexamic Acid for Melasma Treatment
10 pages
BDM Forecast: Vaseline & Dove Products
No ratings yet
BDM Forecast: Vaseline & Dove Products
455 pages
Microteaching: Techniques and Guidelines
No ratings yet
Microteaching: Techniques and Guidelines
12 pages
IELTS Academic Writing Task 1 Guide
No ratings yet
IELTS Academic Writing Task 1 Guide
89 pages