API FAQ ARCHIVE

challenge14-webdev

public
tiara Mar 16, 2026 Never 680
Clone
CSS challenge14-webdev-css
HTML challenge14-webdev-html
JavaScript challenge14-webdev-js
JavaScript challenge14-webdev-chatbot
CSS challenge14-webdev-css 104 lines (92 loc) | 9.05 KB
Raw 
1
:root { --navy:#0B1F3A; --gold:#C9A84C; --gold-light:#F0D080; --cream:#FAF7F0; }
2
html { scroll-behavior:smooth; }
3
body { font-family:'DM Sans',sans-serif; background:var(--cream); color:var(--navy); overflow-x:hidden; }
4
.font-serif { font-family:'Playfair Display',serif; }
5
.text-gold { color:var(--gold)!important; }
6
.bg-navy { background-color:var(--navy)!important; }
7
.bg-cream { background-color:var(--cream)!important; }
8
 
9
/* NAV */
10
#mainNav { background:rgba(11,31,58,0.97); backdrop-filter:blur(12px); border-bottom:2px solid var(--gold); }
11
.logo-emblem { width:42px;height:42px;background:var(--gold);border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:'Playfair Display',serif;font-size:18px;font-weight:900;color:var(--navy); }
12
.nav-link { color:rgba(255,255,255,.75)!important;font-size:12.5px;letter-spacing:1px;text-transform:uppercase;transition:color .2s; }
13
.nav-link:hover { color:var(--gold)!important; }
14
.navbar-toggler { border-color:rgba(255,255,255,.3); }
15
.navbar-toggler-icon { filter:invert(1); }
16
 
17
/* HERO */
18
.hero { min-height:100vh;background:radial-gradient(circle at 20% 50%,rgba(201,168,76,.15) 0%,transparent 50%),radial-gradient(circle at 80% 20%,rgba(201,168,76,.10) 0%,transparent 40%),linear-gradient(135deg,#0B1F3A 0%,#0e2845 50%,#0B1F3A 100%); }
19
.hero-grid { position:absolute;inset:0;background-image:linear-gradient(rgba(201,168,76,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(201,168,76,.05) 1px,transparent 1px);background-size:60px 60px; }
20
.hero-badge { display:inline-flex;align-items:center;gap:8px;background:rgba(201,168,76,.15);border:1px solid rgba(201,168,76,.4);color:var(--gold);font-size:11px;letter-spacing:2.5px;text-transform:uppercase;padding:7px 18px;border-radius:30px; }
21
.hero-badge::before { content:'';width:6px;height:6px;background:var(--gold);border-radius:50%; }
22
.hero-stat .num { font-family:'Playfair Display',serif;font-size:40px;font-weight:900;color:var(--gold);display:block; }
23
.hero-stat .lbl { font-size:11px;color:rgba(255,255,255,.5);letter-spacing:1.5px;text-transform:uppercase; }
24
.section-divider { width:60px;height:3px;background:var(--gold);margin:14px auto 0; }
25
.section-tag { font-size:11px;letter-spacing:3px;text-transform:uppercase;color:var(--gold);font-weight:600; }
26
 
27
/* BUTTONS */
28
.btn-gold { background:var(--gold);color:var(--navy);font-weight:600;transition:all .3s; }
29
.btn-gold:hover { background:var(--gold-light);transform:translateY(-2px);box-shadow:0 10px 30px rgba(201,168,76,.3);color:var(--navy); }
30
 
31
/* ABOUT */
32
.about-img { height:420px;background:linear-gradient(135deg,#1a3a5c,#0B1F3A);border-radius:10px;display:flex;align-items:center;justify-content:center; }
33
.about-badge { background:var(--gold);color:var(--navy);padding:18px 24px;border-radius:8px;box-shadow:0 20px 40px rgba(0,0,0,.2); }
34
.pillar { padding:16px 18px;background:var(--cream);border-left:3px solid var(--gold);border-radius:0 6px 6px 0; }
35
 
36
/* CAROUSEL */
37
.carousel-slide-inner { height:460px;border-radius:12px;overflow:hidden;display:flex;align-items:flex-end;position:relative; }
38
.slide-bg { position:absolute;inset:0;display:flex;align-items:center;justify-content:center; }
39
.slide-overlay { position:absolute;inset:0;background:linear-gradient(to top,rgba(11,31,58,.95) 0%,rgba(11,31,58,.3) 60%,transparent 100%); }
40
.slide-content { position:relative;z-index:2;padding:36px;width:100%; }
41
.slide-tag { display:inline-block;background:var(--gold);color:var(--navy);font-size:11px;letter-spacing:2px;text-transform:uppercase;padding:4px 14px;border-radius:20px;font-weight:700;margin-bottom:10px; }
42
.carousel-control-prev,.carousel-control-next { width:46px;height:46px;background:rgba(201,168,76,.15);border:2px solid rgba(201,168,76,.4);border-radius:50%;top:50%;transform:translateY(-50%);transition:all .3s;opacity:1; }
43
.carousel-control-prev { left:-22px; }
44
.carousel-control-next { right:-22px; }
45
.carousel-control-prev:hover,.carousel-control-next:hover { background:var(--gold); }
46
.carousel-indicators [data-bs-target] { width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.4);border:none; }
47
.carousel-indicators .active { background:var(--gold);width:24px;border-radius:4px; }
48
 
49
/* NEWS */
50
.news-card { border-radius:10px;overflow:hidden;box-shadow:0 4px 20px rgba(0,0,0,.06);transition:all .3s;border:none; }
51
.news-card:hover { transform:translateY(-6px);box-shadow:0 20px 50px rgba(0,0,0,.12); }
52
.news-img { height:190px;display:flex;align-items:center;justify-content:center;position:relative; }
53
.news-cat { position:absolute;top:14px;left:14px;background:var(--navy);color:var(--gold);font-size:10px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;padding:4px 12px;border-radius:20px; }
54
 
55
/* TEACHERS */
56
.teacher-card { text-align:center;padding:32px 20px;background:var(--cream);border-radius:12px;border:2px solid transparent;position:relative;overflow:hidden;transition:all .3s; }
57
.teacher-card::before { content:'';position:absolute;inset:0;background:var(--navy);transform:scaleY(0);transform-origin:bottom;transition:transform .4s ease;z-index:0; }
58
.teacher-card:hover::before { transform:scaleY(1); }
59
.teacher-card:hover { border-color:var(--gold); }
60
.teacher-card > * { position:relative;z-index:1; }
61
.teacher-avatar { width:88px;height:88px;border-radius:50%;margin:0 auto 14px;display:flex;align-items:center;justify-content:center;border:3px solid var(--gold); }
62
.teacher-card:hover .tc-name { color:#fff!important; }
63
.teacher-card:hover .tc-bio { color:rgba(255,255,255,.6)!important; }
64
.soc-btn { width:32px;height:32px;background:rgba(201,168,76,.15);border-radius:50%;display:flex;align-items:center;justify-content:center;padding:0;border:none;transition:all .3s; }
65
.soc-btn:hover { background:var(--gold); }
66
 
67
/* STUDENT ORGS */
68
.sorg-card { border-radius:14px;overflow:hidden;background:rgba(255,255,255,.04);border:1px solid rgba(201,168,76,.2);transition:all .35s; }
69
.sorg-card:hover { transform:translateY(-8px);border-color:rgba(201,168,76,.6);box-shadow:0 24px 60px rgba(0,0,0,.4); }
70
.sorg-banner { height:140px;position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;overflow:hidden; }
71
.sorg-grid { position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);background-size:20px 20px; }
72
.sorg-abbr { position:relative;z-index:2;font-family:'Playfair Display',serif;font-size:12px;font-weight:900;color:rgba(255,255,255,.9);letter-spacing:3px;background:rgba(0,0,0,.25);padding:3px 14px;border-radius:20px;border:1px solid rgba(255,255,255,.2); }
73
.sorg-icon { position:relative;z-index:2;width:50px;height:50px;filter:drop-shadow(0 4px 12px rgba(0,0,0,.4)); }
74
.sorg-tag { font-size:10px;font-weight:600;letter-spacing:1px;text-transform:uppercase;color:var(--gold);background:rgba(201,168,76,.1);border:1px solid rgba(201,168,76,.25);padding:2px 10px;border-radius:20px; }
75
 
76
  /* ACHIEVEMENTS */
77
.achievement-card { border-radius:12px;background:#fff;border-top:4px solid var(--gold);box-shadow:0 4px 20px rgba(0,0,0,.06);transition:all .3s;padding:28px; }
78
.achievement-card:hover { transform:translateY(-4px);box-shadow:0 16px 40px rgba(0,0,0,.1); }
79
 
80
  /* CONTACT */
81
.contact-icon-box { width:46px;height:46px;flex-shrink:0;background:rgba(201,168,76,.15);border:1px solid rgba(201,168,76,.3);border-radius:10px;display:flex;align-items:center;justify-content:center; }
82
.contact-form-wrap { background:rgba(255,255,255,.04);border:1px solid rgba(201,168,76,.2);border-radius:16px;padding:36px; }
83
.form-control-dark { background:rgba(255,255,255,.06)!important;border:1px solid rgba(255,255,255,.15)!important;color:#fff!important;border-radius:8px; }
84
.form-control-dark::placeholder { color:rgba(255,255,255,.3); }
85
.form-control-dark:focus { border-color:var(--gold)!important;box-shadow:none!important; }
86
 
87
  /* FOOTER */
88
footer { background:#060f1c;border-top:2px solid rgba(201,168,76,.2); }
89
.footer-link { color:rgba(255,255,255,.5);text-decoration:none;font-size:14px;transition:color .2s; }
90
.footer-link:hover { color:var(--gold); }
91
.fsoc a { width:36px;height:36px;border:1px solid rgba(255,255,255,.15);border-radius:8px;display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.5);text-decoration:none;font-size:13px;transition:all .3s; }
92
.fsoc a:hover { border-color:var(--gold);color:var(--gold); }
93
 
94
  /* ANIMATIONS */
95
.fade-up { opacity:0;transform:translateY(30px);transition:opacity .7s ease,transform .7s ease; }
96
.fade-up.visible { opacity:1;transform:translateY(0); }
97
@keyframes fadeInDown { from{opacity:0;transform:translateY(-20px)} to{opacity:1;transform:translateY(0)} }
98
@keyframes fadeInUp   { from{opacity:0;transform:translateY(30px)}  to{opacity:1;transform:translateY(0)} }
99
@keyframes fadeInRight{ from{opacity:0;transform:translateX(40px)}  to{opacity:1;transform:translateX(0)} }
100
.a1{animation:fadeInDown .8s ease both}
101
.a2{animation:fadeInUp .9s .2s ease both}
102
.a3{animation:fadeInUp .9s .4s ease both}
103
.a4{animation:fadeInUp .9s .6s ease both}
104
.a5{animation:fadeInRight 1s .8s ease both}
HTML challenge14-webdev-html 297 lines (286 loc) | 43.43 KB
Raw 
1
<!DOCTYPE html>
2
<html lang="id">
3
<head>
4
<meta charset="UTF-8">
5
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6
<title>Gadjah Mada High School — Excellence in Education</title>
7
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
8
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,700;0,900;1,400&family=DM+Sans:wght@300;400;500;600&display=swap" rel="stylesheet">
9
<link rel="stylesheet" href="style.css">
10
</head>
11
<body>
12
 
13
<!-- NAVBAR -->
14
<nav class="navbar navbar-expand-lg fixed-top" id="mainNav">
15
  <div class="container-fluid px-4">
16
    <a class="navbar-brand d-flex align-items-center gap-3 text-decoration-none" href="#">
17
      <div class="logo-emblem">G</div>
18
      <div>
19
        <div class="text-white font-serif fw-bold" style="font-size:16px;">Gadjah Mada High School</div>
20
        <div class="text-gold" style="font-size:10px;letter-spacing:2px;">EST. 1985 · EXCELLENCE</div>
21
      </div>
22
    </a>
23
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navMenu"><span class="navbar-toggler-icon"></span></button>
24
    <div class="collapse navbar-collapse justify-content-end" id="navMenu">
25
      <ul class="navbar-nav gap-1 align-items-lg-center">
26
        <li class="nav-item"><a class="nav-link px-3" href="#about">About</a></li>
27
        <li class="nav-item"><a class="nav-link px-3" href="#activities">Activities</a></li>
28
        <li class="nav-item"><a class="nav-link px-3" href="#news">News</a></li>
29
        <li class="nav-item"><a class="nav-link px-3" href="#teachers">Faculty</a></li>
30
        <li class="nav-item"><a class="nav-link px-3" href="#organization">Organization</a></li>
31
        <li class="nav-item"><a class="nav-link px-3" href="#achievements">Awards</a></li>
32
        <li class="nav-item ms-2"><a class="nav-link btn-gold px-4 rounded" href="#contact">Contact</a></li>
33
      </ul>
34
    </div>
35
  </div>
36
</nav>
37
 
38
<!-- HERO -->
39
<section class="hero d-flex align-items-center position-relative" style="padding-top:72px;">
40
  <div class="hero-grid"></div>
41
  <div class="container-fluid px-5 py-5 position-relative" style="z-index:2;">
42
    <div class="row min-vh-100 align-items-center">
43
      <div class="col-lg-7">
44
        <div class="hero-badge mb-4 a1">Accredited · Award-Winning · 2025</div>
45
        <h1 class="font-serif text-white a2 mb-4" style="font-size:clamp(44px,7vw,78px);line-height:1.1;font-weight:900;">Shaping <em class="text-gold">Futures,</em><br>Building Excellence</h1>
46
        <p class="a3 mb-5" style="font-size:18px;color:rgba(255,255,255,.7);max-width:540px;line-height:1.8;">Gadjah Mada High School has been nurturing curious minds and developing principled leaders for four decades.</p>
47
        <div class="d-flex gap-3 flex-wrap a4">
48
          <a href="#about" class="btn btn-gold px-4 py-3">Discover Our School</a>
49
          <a href="#contact" class="btn btn-outline-light px-4 py-3">Apply Now →</a>
50
        </div>
51
      </div>
52
      <div class="col-lg-5 d-none d-lg-flex justify-content-end a5">
53
        <div class="d-flex gap-5">
54
          <div class="hero-stat text-center"><span class="num">98%</span><span class="lbl">University Rate</span></div>
55
          <div class="hero-stat text-center"><span class="num">40+</span><span class="lbl">Years of Excellence</span></div>
56
          <div class="hero-stat text-center"><span class="num">120</span><span class="lbl">Expert Faculty</span></div>
57
        </div>
58
      </div>
59
    </div>
60
  </div>
61
</section>
62
 
63
<!-- ABOUT -->
64
<section id="about" class="py-5 bg-white">
65
  <div class="container py-4">
66
    <div class="row g-5 align-items-center">
67
      <div class="col-lg-5 fade-up">
68
        <div class="about-img position-relative" style="background:url('images/profile.jpg') center/cover no-repeat;width:400px;height:400px;opacity:.8;">
69
          <div class="about-badge text-center position-absolute" style="bottom:-20px;right:-20px;">
70
            <span class="font-serif d-block" style="font-size:34px;font-weight:900;">4.9</span>
71
            <small class="fw-semibold"><img src="https://api.iconify.design/noto/star.svg" alt="" style="width:13px;"> School Rating</small>
72
          </div>
73
        </div>
74
      </div>
75
      <div class="col-lg-7 fade-up">
76
        <div class="section-tag mb-2">Our Story</div>
77
        <h2 class="font-serif mb-3" style="font-size:36px;font-weight:700;">A Tradition of Academic <em class="text-gold">Excellence</em> Since 1985</h2>
78
        <p class="text-secondary mb-3" style="line-height:1.9;">Founded in 1985, Gadjah Mada High School was built on the belief that every child deserves access to world-class education in a nurturing, safe, and inspiring environment.</p>
79
        <p class="text-secondary mb-4" style="line-height:1.9;">Our holistic approach fosters critical thinking, leadership, and compassion — qualities that define our alumni wherever they go in the world.</p>
80
        <div class="row g-3">
81
          <div class="col-6"><div class="pillar"><h6 class="fw-bold mb-1"><img src="https://api.iconify.design/noto/graduation-cap.svg" alt="" style="width:15px;"> Academic Rigor</h6><p class="text-secondary mb-0" style="font-size:13px;">STEM & Humanities advanced tracks</p></div></div>
82
          <div class="col-6"><div class="pillar"><h6 class="fw-bold mb-1"><img src="https://api.iconify.design/noto/seedling.svg" alt="" style="width:15px;"> Character First</h6><p class="text-secondary mb-0" style="font-size:13px;">Ethics, leadership, civic responsibility</p></div></div>
83
          <div class="col-6"><div class="pillar"><h6 class="fw-bold mb-1"><img src="https://api.iconify.design/noto/artist-palette.svg" alt="" style="width:15px;"> Creative Arts</h6><p class="text-secondary mb-0" style="font-size:13px;">Music, drama, visual arts</p></div></div>
84
          <div class="col-6"><div class="pillar"><h6 class="fw-bold mb-1"><img src="https://api.iconify.design/noto/globe-showing-americas.svg" alt="" style="width:15px;"> Global Ready</h6><p class="text-secondary mb-0" style="font-size:13px;">Exchange programs in 18 countries</p></div></div>
85
        </div>
86
      </div>
87
    </div>
88
  </div>
89
</section>
90
 
91
<!-- CAROUSEL -->
92
<section id="activities" class="py-5 bg-navy">
93
  <div class="container py-4">
94
    <div class="text-center mb-5 fade-up">
95
      <div class="section-tag">Campus Life</div>
96
      <h2 class="font-serif text-white mt-2" style="font-size:clamp(30px,4vw,46px);">Student <em class="text-gold">Activities</em></h2>
97
      <div class="section-divider"></div>
98
    </div>
99
    <div id="activityCarousel" class="carousel slide px-4 fade-up" data-bs-ride="carousel">
100
      <div class="carousel-indicators">
101
        <button type="button" data-bs-target="#activityCarousel" data-bs-slide-to="0" class="active"></button>
102
        <button type="button" data-bs-target="#activityCarousel" data-bs-slide-to="1"></button>
103
        <button type="button" data-bs-target="#activityCarousel" data-bs-slide-to="2"></button>
104
        <button type="button" data-bs-target="#activityCarousel" data-bs-slide-to="3"></button>
105
        <button type="button" data-bs-target="#activityCarousel" data-bs-slide-to="4"></button>
106
      </div>
107
      <div class="carousel-inner rounded-3">
108
        <div class="carousel-item active">
109
          <div class="carousel-slide-inner" style="background:linear-gradient(135deg,#1a4a2e,#0B1F3A);">
110
            <div class="slide-bg" style="background:url('images/carousel1.webp') center/cover no-repeat;opacity:.5;"></div>
111
            <div class="slide-overlay"></div>
112
            <div class="slide-content"><span class="slide-tag">Science & Tech</span><h3 class="font-serif text-white mb-2" style="font-size:30px;">Annual Science Olympiad</h3><p style="color:rgba(255,255,255,.75);max-width:500px;">Competing regionally and nationally in robotics, chemistry, biology — consistently in the top 5% nationwide.</p></div>
113
          </div>
114
        </div>
115
        <div class="carousel-item">
116
          <div class="carousel-slide-inner" style="background:linear-gradient(135deg,#3a1a1a,#1a0B0B);">
117
            <div class="slide-bg" style="background:url('images/carousel2.jpg') center/cover no-repeat;opacity:.5;"></div>
118
            <div class="slide-overlay"></div>
119
            <div class="slide-content"><span class="slide-tag">Sports</span><h3 class="font-serif text-white mb-2" style="font-size:30px;">Championship Athletics</h3><p style="color:rgba(255,255,255,.75);max-width:500px;">Award-winning sports program developing teamwork and resilience across 25+ disciplines.</p></div>
120
          </div>
121
        </div>
122
        <div class="carousel-item">
123
          <div class="carousel-slide-inner" style="background:linear-gradient(135deg,#2a1a4a,#0B0B2A);">
124
            <div class="slide-bg" style="background:url('images/carousel3.jpg') center/cover no-repeat;opacity:.5;"></div>
125
            <div class="slide-overlay"></div>
126
            <div class="slide-content"><span class="slide-tag">Arts & Culture</span><h3 class="font-serif text-white mb-2" style="font-size:30px;">Performing Arts Festival</h3><p style="color:rgba(255,255,255,.75);max-width:500px;">Annual festival of theater, music, dance, and visual arts — recognized at state level.</p></div>
127
          </div>
128
        </div>
129
        <div class="carousel-item">
130
          <div class="carousel-slide-inner" style="background:linear-gradient(135deg,#1a3a4a,#0B1a2A);">
131
            <div class="slide-bg" style="background:url('images/carousel4.jpeg') center/cover no-repeat;opacity:.5;"></div>
132
            <div class="slide-overlay"></div>
133
            <div class="slide-content"><span class="slide-tag">Community</span><h3 class="font-serif text-white mb-2" style="font-size:30px;">Environmental & Social Clubs</h3><p style="color:rgba(255,255,255,.75);max-width:500px;">Students lead change through Green Campus initiative, debate club, and 40+ active clubs.</p></div>
134
          </div>
135
        </div>
136
        <div class="carousel-item">
137
          <div class="carousel-slide-inner" style="background:linear-gradient(135deg,#3a2a1a,#2A1a0B);">
138
            <div class="slide-bg" style="background:url('images/carousel5.jpg') center/cover no-repeat;opacity:.5;"></div>
139
            <div class="slide-overlay"></div>
140
            <div class="slide-content"><span class="slide-tag">Academic</span><h3 class="font-serif text-white mb-2" style="font-size:30px;">Model UN & Debate League</h3><p style="color:rgba(255,255,255,.75);max-width:500px;">Students represent schools across three continents, honing diplomacy and public speaking.</p></div>
141
          </div>
142
        </div>
143
      </div>
144
      <button class="carousel-control-prev" type="button" data-bs-target="#activityCarousel" data-bs-slide="prev"><span class="carousel-control-prev-icon"></span></button>
145
      <button class="carousel-control-next" type="button" data-bs-target="#activityCarousel" data-bs-slide="next"><span class="carousel-control-next-icon"></span></button>
146
    </div>
147
  </div>
148
</section>
149
 
150
<!-- NEWS -->
151
<section id="news" class="py-5 bg-cream">
152
  <div class="container py-4">
153
    <div class="text-center mb-5 fade-up">
154
      <div class="section-tag">Latest Updates</div>
155
      <h2 class="font-serif mt-2" style="font-size:clamp(30px,4vw,46px);">School <em class="text-gold">News</em> & Events</h2>
156
      <div class="section-divider"></div>
157
    </div>
158
    <div class="row g-4">
159
      <div class="col-md-6 col-lg-4 fade-up"><div class="news-card bg-white h-100"><div class="news-img" style="background:url('images/news1.webp') center/cover no-repeat;"><span class="news-cat">Achievement</span></div><div class="p-4"><div class="d-flex align-items-center gap-2 text-secondary mb-2" style="font-size:12px;"><img src="https://api.iconify.design/noto/calendar.svg" alt="" style="width:13px;"> March 1, 2025</div><h5 class="font-serif fw-bold mb-2">Gadjah Mada Wins National Robotics Championship</h5><p class="text-secondary mb-3" style="font-size:14px;">Team Apex clinched the national title at the 2025 National Robotics Invitational, defeating 142 schools.</p><a href="#" class="text-gold fw-semibold text-decoration-none" style="font-size:13px;">Read Full Story →</a></div></div></div>
160
      <div class="col-md-6 col-lg-4 fade-up"><div class="news-card bg-white h-100"><div class="news-img" style="background:url('images/news2.jpeg') center/cover no-repeat;"><span class="news-cat">Admission</span></div><div class="p-4"><div class="d-flex align-items-center gap-2 text-secondary mb-2" style="font-size:12px;"><img src="https://api.iconify.design/noto/calendar.svg" alt="" style="width:13px;"> February 20, 2025</div><h5 class="font-serif fw-bold mb-2">Applications Open for 2025–2026 Academic Year</h5><p class="text-secondary mb-3" style="font-size:14px;">Accepting applications for Grades 7–12. Enrollment is limited — secure your place early.</p><a href="#" class="text-gold fw-semibold text-decoration-none" style="font-size:13px;">Apply Now →</a></div></div></div>
161
      <div class="col-md-6 col-lg-4 fade-up"><div class="news-card bg-white h-100"><div class="news-img" style="background:url('images/news3.jpg') center/cover no-repeat;"><span class="news-cat">Event</span></div><div class="p-4"><div class="d-flex align-items-center gap-2 text-secondary mb-2" style="font-size:12px;"><img src="https://api.iconify.design/noto/calendar.svg" alt="" style="width:13px;"> February 10, 2025</div><h5 class="font-serif fw-bold mb-2">International Culture Fair Returns This April</h5><p class="text-secondary mb-3" style="font-size:14px;">Students from 28 countries presenting cultural heritage — food, art, music, and stories.</p><a href="#" class="text-gold fw-semibold text-decoration-none" style="font-size:13px;">Learn More →</a></div></div></div>
162
      <div class="col-md-6 col-lg-4 fade-up"><div class="news-card bg-white h-100"><div class="news-img" style="background:url('images/news4.webp') center/cover no-repeat;"><span class="news-cat">Academic</span></div><div class="p-4"><div class="d-flex align-items-center gap-2 text-secondary mb-2" style="font-size:12px;"><img src="https://api.iconify.design/noto/calendar.svg" alt="" style="width:13px;"> January 28, 2025</div><h5 class="font-serif fw-bold mb-2">New Advanced STEM Curriculum Launches</h5><p class="text-secondary mb-3" style="font-size:14px;">New AI & Data Science track developed with leading universities, available for Grade 11–12.</p><a href="#" class="text-gold fw-semibold text-decoration-none" style="font-size:13px;">Explore →</a></div></div></div>
163
      <div class="col-md-6 col-lg-4 fade-up"><div class="news-card bg-white h-100"><div class="news-img" style="background:url('images/news5.jpg') center/cover no-repeat;"><span class="news-cat">Arts</span></div><div class="p-4"><div class="d-flex align-items-center gap-2 text-secondary mb-2" style="font-size:12px;"><img src="https://api.iconify.design/noto/calendar.svg" alt="" style="width:13px;"> January 15, 2025</div><h5 class="font-serif fw-bold mb-2">Student Art Exhibition Opens at City Gallery</h5><p class="text-secondary mb-3" style="font-size:14px;">Works by 36 students on display at City Contemporary Gallery until April.</p><a href="#" class="text-gold fw-semibold text-decoration-none" style="font-size:13px;">View Exhibition →</a></div></div></div>
164
      <div class="col-md-6 col-lg-4 fade-up"><div class="news-card bg-white h-100"><div class="news-img" style="background:url('images/news6.jpg') center/cover no-repeat;"><span class="news-cat">Community</span></div><div class="p-4"><div class="d-flex align-items-center gap-2 text-secondary mb-2" style="font-size:12px;"><img src="https://api.iconify.design/noto/calendar.svg" alt="" style="width:13px;"> January 5, 2025</div><h5 class="font-serif fw-bold mb-2">New Alumni Mentorship Programme Launches</h5><p class="text-secondary mb-3" style="font-size:14px;">Connects students with 200+ Gadjah Mada graduates across medicine, law, and entrepreneurship.</p><a href="#" class="text-gold fw-semibold text-decoration-none" style="font-size:13px;">Get Involved →</a></div></div></div>
165
    </div>
166
  </div>
167
</section>
168
 
169
<!-- TEACHERS -->
170
<section id="teachers" class="py-5 bg-white">
171
  <div class="container py-4">
172
    <div class="text-center mb-5 fade-up">
173
      <div class="section-tag">Our People</div>
174
      <h2 class="font-serif mt-2" style="font-size:clamp(30px,4vw,46px);">Meet Our <em class="text-gold">Faculty</em></h2>
175
      <div class="section-divider"></div>
176
    </div>
177
    <div class="row g-4">
178
      <div class="col-6 col-md-4 col-lg-3 fade-up"><div class="teacher-card h-100"><div class="teacher-avatar" style="background:url('images/teacher1.jpeg') center/cover no-repeat;background-color:#f0e8d0;"></div><h5 class="font-serif fw-bold tc-name mb-1" style="font-size:16px;">Dr. Robert Chen</h5><div class="text-gold mb-2" style="font-size:13px;font-weight:600;">Mathematics & Physics</div><p class="tc-bio text-secondary mb-3" style="font-size:13px;line-height:1.6;">PhD from MIT. 18 years in education, making advanced math accessible for every learner.</p><div class="d-flex justify-content-center gap-2"><button class="soc-btn"><img src="https://api.iconify.design/noto/envelope.svg" alt="" style="width:15px;"></button><button class="soc-btn"><img src="https://api.iconify.design/noto/link.svg" alt="" style="width:15px;"></button></div></div></div>
179
      <div class="col-6 col-md-4 col-lg-3 fade-up"><div class="teacher-card h-100"><div class="teacher-avatar" style="background:url('images/teacher2.jpg') center/cover no-repeat;background-color:#d0e8f0;"></div><h5 class="font-serif fw-bold tc-name mb-1" style="font-size:16px;">Ms. Sarah Okoye</h5><div class="text-gold mb-2" style="font-size:13px;font-weight:600;">English Literature</div><p class="tc-bio text-secondary mb-3" style="font-size:13px;line-height:1.6;">Published author and former Oxford lecturer bringing literature to life with theatrical methods.</p><div class="d-flex justify-content-center gap-2"><button class="soc-btn"><img src="https://api.iconify.design/noto/envelope.svg" alt="" style="width:15px;"></button><button class="soc-btn"><img src="https://api.iconify.design/noto/link.svg" alt="" style="width:15px;"></button></div></div></div>
180
      <div class="col-6 col-md-4 col-lg-3 fade-up"><div class="teacher-card h-100"><div class="teacher-avatar" style="background:url('images/teacher3.jpg') center/cover no-repeat;background-color:#d0f0e0;"></div><h5 class="font-serif fw-bold tc-name mb-1" style="font-size:16px;">Mr. James Patel</h5><div class="text-gold mb-2" style="font-size:13px;font-weight:600;">Chemistry & Biology</div><p class="tc-bio text-secondary mb-3" style="font-size:13px;line-height:1.6;">Former biotech researcher. Hands-on lab sessions turn students into budding scientists.</p><div class="d-flex justify-content-center gap-2"><button class="soc-btn"><img src="https://api.iconify.design/noto/envelope.svg" alt="" style="width:15px;"></button><button class="soc-btn"><img src="https://api.iconify.design/noto/link.svg" alt="" style="width:15px;"></button></div></div></div>
181
      <div class="col-6 col-md-4 col-lg-3 fade-up"><div class="teacher-card h-100"><div class="teacher-avatar" style="background:url('images/teacher4.jpg') center/cover no-repeat;background-color:#f0d0d0;"></div><h5 class="font-serif fw-bold tc-name mb-1" style="font-size:16px;">Ms. Elena Marcos</h5><div class="text-gold mb-2" style="font-size:13px;font-weight:600;">Visual Arts & Design</div><p class="tc-bio text-secondary mb-3" style="font-size:13px;line-height:1.6;">Award-winning illustrator with exhibitions across Europe. Students win national competitions.</p><div class="d-flex justify-content-center gap-2"><button class="soc-btn"><img src="https://api.iconify.design/noto/envelope.svg" alt="" style="width:15px;"></button><button class="soc-btn"><img src="https://api.iconify.design/noto/link.svg" alt="" style="width:15px;"></button></div></div></div>
182
      <div class="col-6 col-md-4 col-lg-3 fade-up"><div class="teacher-card h-100"><div class="teacher-avatar" style="background:url('images/teacher5.jpeg') center/cover no-repeat;background-color:#e0d0f0;"></div><h5 class="font-serif fw-bold tc-name mb-1" style="font-size:16px;">Mr. Daniel Torres</h5><div class="text-gold mb-2" style="font-size:13px;font-weight:600;">Computer Science & AI</div><p class="tc-bio text-secondary mb-3" style="font-size:13px;line-height:1.6;">Former Google engineer inspiring the next generation. Leads the AI curriculum and robotics.</p><div class="d-flex justify-content-center gap-2"><button class="soc-btn"><img src="https://api.iconify.design/noto/envelope.svg" alt="" style="width:15px;"></button><button class="soc-btn"><img src="https://api.iconify.design/noto/link.svg" alt="" style="width:15px;"></button></div></div></div>
183
      <div class="col-6 col-md-4 col-lg-3 fade-up"><div class="teacher-card h-100"><div class="teacher-avatar" style="background:url('images/teacher6.jpg') center/cover no-repeat;background-color:#f0f0d0;"></div><h5 class="font-serif fw-bold tc-name mb-1" style="font-size:16px;">Ms. Aisha Kamara</h5><div class="text-gold mb-2" style="font-size:13px;font-weight:600;">Physical Education</div><p class="tc-bio text-secondary mb-3" style="font-size:13px;line-height:1.6;">Former Olympic athlete and certified sports psychologist. Leads championship athletics.</p><div class="d-flex justify-content-center gap-2"><button class="soc-btn"><img src="https://api.iconify.design/noto/envelope.svg" alt="" style="width:15px;"></button><button class="soc-btn"><img src="https://api.iconify.design/noto/link.svg" alt="" style="width:15px;"></button></div></div></div>
184
      <div class="col-6 col-md-4 col-lg-3 fade-up"><div class="teacher-card h-100"><div class="teacher-avatar" style="background:url('images/teacher7.jpg') center/cover no-repeat;background-color:#d0e8d0;"></div><h5 class="font-serif fw-bold tc-name mb-1" style="font-size:16px;">Mr. François Dubois</h5><div class="text-gold mb-2" style="font-size:13px;font-weight:600;">History & Social Studies</div><p class="tc-bio text-secondary mb-3" style="font-size:13px;line-height:1.6;">Historian and documentarian connecting past events to present-day realities.</p><div class="d-flex justify-content-center gap-2"><button class="soc-btn"><img src="https://api.iconify.design/noto/envelope.svg" alt="" style="width:15px;"></button><button class="soc-btn"><img src="https://api.iconify.design/noto/link.svg" alt="" style="width:15px;"></button></div></div></div>
185
      <div class="col-6 col-md-4 col-lg-3 fade-up"><div class="teacher-card h-100"><div class="teacher-avatar" style="background:url('images/teacher8.jpg') center/cover no-repeat;background-color:#f0d8e8;"></div><h5 class="font-serif fw-bold tc-name mb-1" style="font-size:16px;">Ms. Lily Nakamura</h5><div class="text-gold mb-2" style="font-size:13px;font-weight:600;">Music & Performing Arts</div><p class="tc-bio text-secondary mb-3" style="font-size:13px;line-height:1.6;">Classical pianist and theater director. Students perform at international festivals.</p><div class="d-flex justify-content-center gap-2"><button class="soc-btn"><img src="https://api.iconify.design/noto/envelope.svg" alt="" style="width:15px;"></button><button class="soc-btn"><img src="https://api.iconify.design/noto/link.svg" alt="" style="width:15px;"></button></div></div></div>
186
    </div>
187
  </div>
188
</section>
189
 
190
<!-- STUDENT ORGANIZATIONS -->
191
<section id="organization" class="py-5 bg-navy">
192
  <div class="container py-4">
193
    <div class="text-center mb-5 fade-up">
194
      <div class="section-tag">Organization & Activities</div>
195
      <h2 class="font-serif text-white mt-2" style="font-size:clamp(30px,4vw,46px);">Student <em class="text-gold">Organizations</em></h2>
196
      <div class="section-divider"></div>
197
      <p class="mt-3 mx-auto text-white-50" style="max-width:580px;font-size:15px;line-height:1.8;">Gadjah Mada High School supports various student organizations that build character, leadership, and a spirit of togetherness.</p>
198
    </div>
199
    <div class="row g-4 fade-up">
200
      <!-- OSIS -->
201
      <div class="col-md-6 col-lg-4"><div class="sorg-card h-100"><div class="sorg-banner" style="background:linear-gradient(135deg,#1a3a6e,#0B1F3A);"><div class="sorg-grid"></div><img src="https://api.iconify.design/noto/star.svg" alt="" class="sorg-icon"><div class="sorg-abbr">OSIS</div></div><div class="p-4"><h5 class="font-serif text-white fw-bold mb-2">Organisasi Siswa Intra Sekolah</h5><p style="color:rgba(255,255,255,.55);font-size:13px;line-height:1.75;">Official forum for student leadership that organizes school activities and serves as a bridge between students and school administration.</p><div class="d-flex flex-wrap gap-2 mb-3"><span class="sorg-tag">Leadership</span><span class="sorg-tag">Organization</span><span class="sorg-tag">Activities</span></div><div class="border-top pt-3" style="border-color:rgba(255,255,255,.08)!important;"><div class="d-flex align-items-center gap-2 mb-1" style="font-size:12px;color:rgba(255,255,255,.45);"><img src="https://api.iconify.design/noto/busts-in-silhouette.svg" alt="" style="width:14px;"> 45 Members</div><div class="d-flex align-items-center gap-2" style="font-size:12px;color:rgba(255,255,255,.45);"><img src="https://api.iconify.design/noto/person.svg" alt="" style="width:14px;"> Leader: Rafi Ananda</div></div></div></div></div>
202
      <!-- MPK -->
203
      <div class="col-md-6 col-lg-4"><div class="sorg-card h-100"><div class="sorg-banner" style="background:linear-gradient(135deg,#6e1a1a,#3a0B0B);"><div class="sorg-grid"></div><img src="https://api.iconify.design/noto/balance-scale.svg" alt="" class="sorg-icon"><div class="sorg-abbr">MPK</div></div><div class="p-4"><h5 class="font-serif text-white fw-bold mb-2">Majelis Permusyawaratan Kelas</h5><p style="color:rgba(255,255,255,.55);font-size:13px;line-height:1.75;">Student legislative body that supervises and evaluates OSIS for democratic and transparent school activities.</p><div class="d-flex flex-wrap gap-2 mb-3"><span class="sorg-tag">Legislative</span><span class="sorg-tag">Democracy</span><span class="sorg-tag">Supervision</span></div><div class="border-top pt-3" style="border-color:rgba(255,255,255,.08)!important;"><div class="d-flex align-items-center gap-2 mb-1" style="font-size:12px;color:rgba(255,255,255,.45);"><img src="https://api.iconify.design/noto/busts-in-silhouette.svg" alt="" style="width:14px;"> 30 Members</div><div class="d-flex align-items-center gap-2" style="font-size:12px;color:rgba(255,255,255,.45);"><img src="https://api.iconify.design/noto/person.svg" alt="" style="width:14px;"> Leader: Siti Rahayu</div></div></div></div></div>
204
      <!-- PRAMUKA -->
205
      <div class="col-md-6 col-lg-4"><div class="sorg-card h-100"><div class="sorg-banner" style="background:linear-gradient(135deg,#2a5e1a,#143a0B);"><div class="sorg-grid"></div><img src="https://api.iconify.design/noto/camping.svg" alt="" class="sorg-icon"><div class="sorg-abbr">PRAMUKA</div></div><div class="p-4"><h5 class="font-serif text-white fw-bold mb-2">Praja Muda Karana</h5><p style="color:rgba(255,255,255,.55);font-size:13px;line-height:1.75;">A scouting movement that develops independence, environmental care, and social spirit through camping and community service.</p><div class="d-flex flex-wrap gap-2 mb-3"><span class="sorg-tag">Scouting</span><span class="sorg-tag">Nature</span><span class="sorg-tag">Social</span></div><div class="border-top pt-3" style="border-color:rgba(255,255,255,.08)!important;"><div class="d-flex align-items-center gap-2 mb-1" style="font-size:12px;color:rgba(255,255,255,.45);"><img src="https://api.iconify.design/noto/busts-in-silhouette.svg" alt="" style="width:14px;"> 80 Members</div><div class="d-flex align-items-center gap-2" style="font-size:12px;color:rgba(255,255,255,.45);"><img src="https://api.iconify.design/noto/person.svg" alt="" style="width:14px;"> Leader: Budi Santoso</div></div></div></div></div>
206
      <!-- PASKIBRA -->
207
      <div class="col-md-6 col-lg-4"><div class="sorg-card h-100"><div class="sorg-banner" style="background:linear-gradient(135deg,#8B0000,#4a0000);"><div class="sorg-grid"></div><img src="https://api.iconify.design/mdi/flag.svg" alt="" class="sorg-icon"><div class="sorg-abbr">PASKIBRA</div></div><div class="p-4"><h5 class="font-serif text-white fw-bold mb-2">Pasukan Kibar Bendera</h5><p style="color:rgba(255,255,255,.55);font-size:13px;line-height:1.75;">Flag raising unit for official ceremonies. Develops discipline, precision in formations, and strong nationalism.</p><div class="d-flex flex-wrap gap-2 mb-3"><span class="sorg-tag">Nasionalism</span><span class="sorg-tag">Discipline</span><span class="sorg-tag">Ceremony</span></div><div class="border-top pt-3" style="border-color:rgba(255,255,255,.08)!important;"><div class="d-flex align-items-center gap-2 mb-1" style="font-size:12px;color:rgba(255,255,255,.45);"><img src="https://api.iconify.design/noto/busts-in-silhouette.svg" alt="" style="width:14px;"> 35 Members</div><div class="d-flex align-items-center gap-2" style="font-size:12px;color:rgba(255,255,255,.45);"><img src="https://api.iconify.design/noto/person.svg" alt="" style="width:14px;"> Leader: Dian Pratama</div></div></div></div></div>
208
      <!-- PMR -->
209
      <div class="col-md-6 col-lg-4"><div class="sorg-card h-100"><div class="sorg-banner" style="background:linear-gradient(135deg,#c0392b,#7a1515);"><div class="sorg-grid"></div><img src="https://api.iconify.design/noto/red-heart.svg" alt="" class="sorg-icon"><div class="sorg-abbr">PMR</div></div><div class="p-4"><h5 class="font-serif text-white fw-bold mb-2">Palang Merah Remaja</h5><p style="color:rgba(255,255,255,.55);font-size:13px;line-height:1.75;">Works in health and humanitarian sectors: first aid, blood donation, and community health education.</p><div class="d-flex flex-wrap gap-2 mb-3"><span class="sorg-tag">Health</span><span class="sorg-tag">Humanity</span><span class="sorg-tag">First Aid</span></div><div class="border-top pt-3" style="border-color:rgba(255,255,255,.08)!important;"><div class="d-flex align-items-center gap-2 mb-1" style="font-size:12px;color:rgba(255,255,255,.45);"><img src="https://api.iconify.design/noto/busts-in-silhouette.svg" alt="" style="width:14px;"> 55 Members</div><div class="d-flex align-items-center gap-2" style="font-size:12px;color:rgba(255,255,255,.45);"><img src="https://api.iconify.design/noto/person.svg" alt="" style="width:14px;"> Leader: Annisa Putri</div></div></div></div></div>
210
      <!-- PADUAN SUARA -->
211
      <div class="col-md-6 col-lg-4"><div class="sorg-card h-100"><div class="sorg-banner" style="background:linear-gradient(135deg,#4a1a6e,#210B3a);"><div class="sorg-grid"></div><img src="https://api.iconify.design/noto/musical-notes.svg" alt="" class="sorg-icon"><div class="sorg-abbr">PADUAN SUARA</div></div><div class="p-4"><h5 class="font-serif text-white fw-bold mb-2">Paduan Suara Sekolah</h5><p style="color:rgba(255,255,255,.55);font-size:13px;line-height:1.75;">Vocal group that performs at official events, inter-school competitions, and regional and national cultural performances.</p><div class="d-flex flex-wrap gap-2 mb-3"><span class="sorg-tag">Music</span><span class="sorg-tag">Vocal</span><span class="sorg-tag">Art</span></div><div class="border-top pt-3" style="border-color:rgba(255,255,255,.08)!important;"><div class="d-flex align-items-center gap-2 mb-1" style="font-size:12px;color:rgba(255,255,255,.45);"><img src="https://api.iconify.design/noto/busts-in-silhouette.svg" alt="" style="width:14px;"> 40 Members</div><div class="d-flex align-items-center gap-2" style="font-size:12px;color:rgba(255,255,255,.45);"><img src="https://api.iconify.design/noto/person.svg" alt="" style="width:14px;"> Leader: Melody Ayu</div></div></div></div></div>
212
    </div>
213
  </div>
214
</section>
215
 
216
<!-- ACHIEVEMENTS -->
217
<section id="achievements" class="py-5 bg-cream">
218
  <div class="container py-4">
219
    <div class="text-center mb-5 fade-up">
220
      <div class="section-tag">Pride & Honor</div>
221
      <h2 class="font-serif mt-2" style="font-size:clamp(30px,4vw,46px);">Our <em class="text-gold">Achievements</em></h2>
222
      <div class="section-divider"></div>
223
    </div>
224
    <div class="row g-4">
225
      <div class="col-md-6 col-lg-4 fade-up"><div class="achievement-card h-100"><img src="https://api.iconify.design/noto/trophy.svg" alt="" style="width:42px;height:42px;" class="mb-3"><h5 class="font-serif fw-bold mb-2">National Academic Excellence Award</h5><p class="text-secondary mb-3" style="font-size:14px;line-height:1.7;">Awarded by Ministry of Education for outstanding academic performance over five consecutive years.</p><span class="text-gold fw-bold" style="font-size:12px;letter-spacing:1.5px;text-transform:uppercase;">2020–2025 · National Level</span></div></div>
226
      <div class="col-md-6 col-lg-4 fade-up"><div class="achievement-card h-100"><img src="https://api.iconify.design/noto/robot.svg" alt="" style="width:42px;height:42px;" class="mb-3"><h5 class="font-serif fw-bold mb-2">National Robotics Champions</h5><p class="text-secondary mb-3" style="font-size:14px;line-height:1.7;">Team Apex claimed the national robotics title in 2025, building on a decade of STEM excellence.</p><span class="text-gold fw-bold" style="font-size:12px;letter-spacing:1.5px;text-transform:uppercase;">2025 · National Championship</span></div></div>
227
      <div class="col-md-6 col-lg-4 fade-up"><div class="achievement-card h-100"><img src="https://api.iconify.design/noto/globe-showing-americas.svg" alt="" style="width:42px;height:42px;" class="mb-3"><h5 class="font-serif fw-bold mb-2">UNESCO School of the Year — APAC</h5><p class="text-secondary mb-3" style="font-size:14px;line-height:1.7;">Recognized for exemplary international exchange programs and multicultural curriculum.</p><span class="text-gold fw-bold" style="font-size:12px;letter-spacing:1.5px;text-transform:uppercase;">2023 · Asia-Pacific Region</span></div></div>
228
      <div class="col-md-6 col-lg-4 fade-up"><div class="achievement-card h-100"><img src="https://api.iconify.design/noto/performing-arts.svg" alt="" style="width:42px;height:42px;" class="mb-3"><h5 class="font-serif fw-bold mb-2">Best Performing Arts Program</h5><p class="text-secondary mb-3" style="font-size:14px;line-height:1.7;">Named Best Performing Arts at State Education Awards, with 3 musicals winning regional acclaim.</p><span class="text-gold fw-bold" style="font-size:12px;letter-spacing:1.5px;text-transform:uppercase;">2024 · State Level</span></div></div>
229
      <div class="col-md-6 col-lg-4 fade-up"><div class="achievement-card h-100"><img src="https://api.iconify.design/noto/soccer-ball.svg" alt="" style="width:42px;height:42px;" class="mb-3"><h5 class="font-serif fw-bold mb-2">State Multi-Sport Champions</h5><p class="text-secondary mb-3" style="font-size:14px;line-height:1.7;">Won state titles in football, swimming, and athletics — the first triple crown in 30 years.</p><span class="text-gold fw-bold" style="font-size:12px;letter-spacing:1.5px;text-transform:uppercase;">2024 · State Championships</span></div></div>
230
      <div class="col-md-6 col-lg-4 fade-up"><div class="achievement-card h-100"><img src="https://api.iconify.design/noto/seedling.svg" alt="" style="width:42px;height:42px;" class="mb-3"><h5 class="font-serif fw-bold mb-2">Green School Platinum Certification</h5><p class="text-secondary mb-3" style="font-size:14px;line-height:1.7;">Platinum sustainability certification for our zero-waste campus and solar energy transition.</p><span class="text-gold fw-bold" style="font-size:12px;letter-spacing:1.5px;text-transform:uppercase;">2023 · Environmental Excellence</span></div></div>
231
    </div>
232
    <!-- Stats -->
233
    <div class="row g-0 bg-navy rounded-4 p-5 mt-4 mx-0 fade-up" id="statsBanner">
234
      <div class="col-6 col-md-3 text-center py-2"><span class="font-serif d-block text-gold stat-num" data-target="98" style="font-size:50px;font-weight:900;line-height:1;">0</span><p class="text-white-50 mt-2 mb-0" style="font-size:13px;">% University Admission Rate</p></div>
235
      <div class="col-6 col-md-3 text-center py-2"><span class="font-serif d-block text-gold stat-num" data-target="2800" style="font-size:50px;font-weight:900;line-height:1;">0</span><p class="text-white-50 mt-2 mb-0" style="font-size:13px;">Students Enrolled</p></div>
236
      <div class="col-6 col-md-3 text-center py-2"><span class="font-serif d-block text-gold stat-num" data-target="120" style="font-size:50px;font-weight:900;line-height:1;">0</span><p class="text-white-50 mt-2 mb-0" style="font-size:13px;">Expert Faculty</p></div>
237
      <div class="col-6 col-md-3 text-center py-2"><span class="font-serif d-block text-gold stat-num" data-target="85" style="font-size:50px;font-weight:900;line-height:1;">0</span><p class="text-white-50 mt-2 mb-0" style="font-size:13px;">Awards & Recognitions</p></div>
238
    </div>
239
  </div>
240
</section>
241
 
242
<!-- CONTACT -->
243
<section id="contact" class="py-5 bg-navy">
244
  <div class="container py-4">
245
    <div class="text-center mb-5 fade-up">
246
      <div class="section-tag">Get In Touch</div>
247
      <h2 class="font-serif text-white mt-2" style="font-size:clamp(30px,4vw,46px);">Contact <em class="text-gold">Us</em></h2>
248
      <div class="section-divider"></div>
249
    </div>
250
    <div class="row g-5 fade-up">
251
      <div class="col-lg-5">
252
        <h4 class="font-serif text-white mb-3">We'd Love to Hear From You</h4>
253
        <p class="mb-4 text-white-50" style="line-height:1.8;">Whether you're a prospective family, current student, or community partner — our doors are always open.</p>
254
        <div class="d-flex gap-3 mb-4"><div class="contact-icon-box"><img src="https://api.iconify.design/noto/round-pushpin.svg" alt="" style="width:22px;height:22px;"></div><div><h6 class="text-gold mb-1" style="font-size:12px;letter-spacing:1px;text-transform:uppercase;">Address</h6><p class="text-white-50 mb-0">Jendral Soedirman 12, West Jakarta<br>City, State 10001</p></div></div>
255
        <div class="d-flex gap-3 mb-4"><div class="contact-icon-box"><img src="https://api.iconify.design/noto/telephone-receiver.svg" alt="" style="width:22px;height:22px;"></div><div><h6 class="text-gold mb-1" style="font-size:12px;letter-spacing:1px;text-transform:uppercase;">Phone</h6><p class="text-white-50 mb-0">(+62)812-3100-3000<br>Mon–Fri, 7:30 AM – 5:00 PM</p></div></div>
256
        <div class="d-flex gap-3 mb-4"><div class="contact-icon-box"><img src="https://api.iconify.design/noto/envelope.svg" alt="" style="width:22px;height:22px;"></div><div><h6 class="text-gold mb-1" style="font-size:12px;letter-spacing:1px;text-transform:uppercase;">Email</h6><p class="text-white-50 mb-0">[email protected]<br>[email protected]</p></div></div>
257
        <div class="d-flex gap-3"><div class="contact-icon-box"><img src="https://api.iconify.design/noto/ten-oclock.svg" alt="" style="width:22px;height:22px;"></div><div><h6 class="text-gold mb-1" style="font-size:12px;letter-spacing:1px;text-transform:uppercase;">School Hours</h6><p class="text-white-50 mb-0">Mon–Fri: 7:00 AM – 4:30 PM<br>Office: 7:30 AM – 5:00 PM</p></div></div>
258
      </div>
259
      <div class="col-lg-7">
260
        <div class="contact-form-wrap">
261
          <h4 class="font-serif text-white mb-4">Send Us a Message</h4>
262
          <div class="row g-3">
263
            <div class="col-6"><label class="text-white-50 mb-1 d-block" style="font-size:11px;letter-spacing:1px;text-transform:uppercase;">First Name</label><input type="text" class="form-control form-control-dark" placeholder="Rehan"></div>
264
            <div class="col-6"><label class="text-white-50 mb-1 d-block" style="font-size:11px;letter-spacing:1px;text-transform:uppercase;">Last Name</label><input type="text" class="form-control form-control-dark" placeholder="Santoso"></div>
265
            <div class="col-12"><label class="text-white-50 mb-1 d-block" style="font-size:11px;letter-spacing:1px;text-transform:uppercase;">Email</label><input type="email" class="form-control form-control-dark" placeholder="[email protected]"></div>
266
            <div class="col-12"><label class="text-white-50 mb-1 d-block" style="font-size:11px;letter-spacing:1px;text-transform:uppercase;">Inquiry Type</label><select class="form-control form-control-dark"><option value="">Select a topic...</option><option>Admissions Inquiry</option><option>Academic Programs</option><option>Tuition & Fees</option><option>Student Life</option><option>Partnership</option></select></div>
267
            <div class="col-12"><label class="text-white-50 mb-1 d-block" style="font-size:11px;letter-spacing:1px;text-transform:uppercase;">Message</label><textarea class="form-control form-control-dark" rows="4" placeholder="Tell us how we can help you..."></textarea></div>
268
            <div class="col-12"><button class="btn btn-gold w-100 py-3 fw-bold" onclick="handleSubmit(this)">Send Message</button></div>
269
          </div>
270
        </div>
271
      </div>
272
    </div>
273
  </div>
274
</section>
275
 
276
<!-- FOOTER -->
277
<footer class="py-5">
278
  <div class="container">
279
    <div class="row g-4 pb-4 border-bottom" style="border-color:rgba(255,255,255,.08)!important;">
280
      <div class="col-lg-4">
281
        <div class="d-flex align-items-center gap-3 mb-3"><div class="logo-emblem" style="width:40px;height:40px;font-size:16px;">W</div><div><div class="text-white font-serif fw-bold" style="font-size:15px;">Gadjah Mada High School</div><div class="text-gold" style="font-size:10px;letter-spacing:2px;">EST. 1985 · EXCELLENCE</div></div></div>
282
        <p style="color:rgba(255,255,255,.5);font-size:14px;line-height:1.8;">Shaping futures and building character since 1985. Where every student is known, valued, and inspired to achieve their full potential.</p>
283
        <div class="fsoc d-flex gap-2 mt-3"><a href="#">f</a><a href="#">in</a><a href="#">tw</a><a href="#">yt</a></div>
284
      </div>
285
      <div class="col-6 col-lg-2 offset-lg-1"><h6 class="text-white fw-bold mb-3" style="letter-spacing:1px;text-transform:uppercase;font-size:13px;">Quick Links</h6><ul class="list-unstyled"><li class="mb-2"><a href="#about" class="footer-link">About Us</a></li><li class="mb-2"><a href="#activities" class="footer-link">Activities</a></li><li class="mb-2"><a href="#news" class="footer-link">News & Events</a></li><li class="mb-2"><a href="#teachers" class="footer-link">Faculty</a></li><li class="mb-2"><a href="#achievements" class="footer-link">Awards</a></li></ul></div>
286
      <div class="col-6 col-lg-2"><h6 class="text-white fw-bold mb-3" style="letter-spacing:1px;text-transform:uppercase;font-size:13px;">Academics</h6><ul class="list-unstyled"><li class="mb-2"><a href="#" class="footer-link">STEM Programs</a></li><li class="mb-2"><a href="#" class="footer-link">Humanities</a></li><li class="mb-2"><a href="#" class="footer-link">Arts & Music</a></li><li class="mb-2"><a href="#" class="footer-link">Sports</a></li><li class="mb-2"><a href="#" class="footer-link">University Prep</a></li></ul></div>
287
      <div class="col-6 col-lg-2"><h6 class="text-white fw-bold mb-3" style="letter-spacing:1px;text-transform:uppercase;font-size:13px;">Admissions</h6><ul class="list-unstyled"><li class="mb-2"><a href="#" class="footer-link">How to Apply</a></li><li class="mb-2"><a href="#" class="footer-link">Tuition & Fees</a></li><li class="mb-2"><a href="#" class="footer-link">Scholarships</a></li><li class="mb-2"><a href="#" class="footer-link">Open Days</a></li><li class="mb-2"><a href="#" class="footer-link">FAQs</a></li></ul></div>
288
    </div>
289
    <div class="d-flex justify-content-between align-items-center pt-4" style="color:rgba(255,255,255,.3);font-size:13px;"><span>© 2025 Gadjah Mada High School. All rights reserved.</span><span>Privacy Policy · Terms of Use</span></div>
290
  </div>
291
</footer>
292
 
293
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
294
<script src="script.js"></script>
295
<script src="chatbot.js"></script>
296
</body>
297
</html>
JavaScript challenge14-webdev-js 17 lines (14 loc) | 1.26 KB
Raw 
1
// Scroll animations
2
const obs = new IntersectionObserver(e => e.forEach(x => { if(x.isIntersecting) x.target.classList.add('visible'); }), {threshold:.1});
3
document.querySelectorAll('.fade-up').forEach(el => obs.observe(el));
4
 
5
// Counter animation
6
function animateCounter(el, target) {
7
    let cur = 0, step = target / (2000/16);
8
    const t = setInterval(() => { cur = Math.min(cur+step,target); el.textContent = Math.floor(cur).toLocaleString(); if(cur>=target) clearInterval(t); }, 16);
9
}
10
const statsObs = new IntersectionObserver(e => e.forEach(x => { if(x.isIntersecting){ x.target.querySelectorAll('.stat-num[data-target]').forEach(el => { animateCounter(el,+el.dataset.target); el.removeAttribute('data-target'); }); statsObs.unobserve(x.target); } }), {threshold:.3});
11
document.querySelectorAll('#statsBanner').forEach(el => statsObs.observe(el));
12
 
13
// Navbar shadow on scroll
14
window.addEventListener('scroll', () => { document.getElementById('mainNav').style.boxShadow = scrollY>50 ? '0 4px 30px rgba(0,0,0,.3)' : 'none'; });
15
 
16
// Form submit
17
function handleSubmit(btn) { btn.textContent='✓ Message Sent!'; btn.style.background='#2D6A4F'; btn.style.color='#fff'; setTimeout(()=>{ btn.textContent='Send Message'; btn.style.background=''; btn.style.color=''; }, 3000); }
JavaScript challenge14-webdev-chatbot 417 lines (351 loc) | 20 KB
Raw 
1
// ============================================================
2
//  Gadjah Mada High School — AI Assistant Widget
3
//  Powered by Claude (Anthropic API via claude.ai proxy)
4
// ============================================================
5
 
6
(function () {
7
    /* ---- School context given to the AI ---- */
8
    const SYSTEM_PROMPT = `You are the official AI assistant for Gadjah Mada High School (SMA Gadjah Mada), an elite high school established in 1985 in West Jakarta, Indonesia.
9
 
10
    You help visitors, prospective students, parents, and community members with questions about the school.
11
 
12
    Key facts about the school:
13
    - Founded: 1985 | Location: Jendral Soedirman 12, West Jakarta
14
    - Phone: (+62)812-3100-3000 | Office hours: Mon–Fri, 7:30 AM – 5:00 PM
15
    - School hours: Mon–Fri 7:00 AM – 4:30 PM
16
    - 98% university admission rate | 2,800+ students | 120+ expert faculty | 85+ awards
17
    - Accredited and award-winning (2025)
18
    - Programs: STEM, Humanities, Arts & Music, Sports, University Prep
19
    - Student orgs: Student Council (OSIS), Science Club, Arts Collective, Sports Federation, Debate Society, Robotics Club
20
    - Notable achievements: National Academic Excellence Award (2020–2025), National Robotics Champions (2025), UNESCO School of the Year APAC (2023), Best Performing Arts (2024), State Multi-Sport Champions (2024), Green School Platinum Certification (2023)
21
 
22
    Admissions:
23
    - Open Days are scheduled — direct inquiries to [email protected]
24
    - Scholarships available — contact the admissions office
25
    - For tuition, fees, and applications, direct visitors to the Contact section or call the office
26
 
27
    Tone: warm, professional, proud of the school. Always respond in English only, regardless of the language the user writes in. Keep answers concise but helpful. If you don't know something specific, kindly direct them to contact the school directly.`;
28
 
29
    /* ---- Inject CSS ---- */
30
    const style = document.createElement('style');
31
    style.textContent = `
32
        :root {
33
        --cb-navy: #0B1F3A;
34
        --cb-gold: #C9A84C;
35
        --cb-gold-light: #F0D080;
36
        --cb-cream: #FAF7F0;
37
        }
38
        #gm-chat-fab {
39
        position: fixed; bottom: 28px; right: 28px; z-index: 9999;
40
        width: 60px; height: 60px; border-radius: 50%;
41
        background: var(--cb-gold); border: none; cursor: pointer;
42
        box-shadow: 0 8px 32px rgba(201,168,76,.45), 0 2px 8px rgba(0,0,0,.2);
43
        display: flex; align-items: center; justify-content: center;
44
        transition: transform .25s, box-shadow .25s;
45
        }
46
        #gm-chat-fab:hover { transform: scale(1.08) translateY(-2px); box-shadow: 0 16px 48px rgba(201,168,76,.5), 0 4px 12px rgba(0,0,0,.25); }
47
        #gm-chat-fab svg { pointer-events: none; }
48
        
49
        #gm-chat-badge {
50
        position: absolute; top: -3px; right: -3px;
51
        width: 18px; height: 18px; background: #e63946; border-radius: 50%;
52
        border: 2px solid #fff; display: flex; align-items: center; justify-content: center;
53
        font-size: 10px; color: #fff; font-weight: 700; font-family: 'DM Sans', sans-serif;
54
        animation: gm-pulse 2s infinite;
55
        }
56
        @keyframes gm-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.15); } }
57
        
58
        #gm-chat-window {
59
        position: fixed; bottom: 100px; right: 28px; z-index: 9998;
60
        width: 380px; max-width: calc(100vw - 40px);
61
        height: 560px; max-height: calc(100vh - 130px);
62
        background: var(--cb-navy); border-radius: 18px;
63
        border: 1.5px solid rgba(201,168,76,.35);
64
        box-shadow: 0 32px 80px rgba(0,0,0,.5), 0 0 0 1px rgba(201,168,76,.1);
65
        display: flex; flex-direction: column; overflow: hidden;
66
        font-family: 'DM Sans', sans-serif; transform-origin: bottom right;
67
        transition: transform .3s cubic-bezier(.34,1.56,.64,1), opacity .3s;
68
        }
69
        #gm-chat-window.gm-hidden { transform: scale(.85) translateY(20px); opacity: 0; pointer-events: none; }
70
        
71
        .gm-chat-header {
72
        background: linear-gradient(135deg, #0e2845 0%, #0B1F3A 100%);
73
        border-bottom: 1.5px solid rgba(201,168,76,.3); padding: 16px 18px;
74
        display: flex; align-items: center; gap: 12px; flex-shrink: 0;
75
        }
76
        .gm-header-avatar {
77
        width: 40px; height: 40px; border-radius: 50%;
78
        background: var(--cb-gold); display: flex; align-items: center; justify-content: center;
79
        font-family: 'Playfair Display', serif; font-weight: 900; font-size: 17px;
80
        color: var(--cb-navy); flex-shrink: 0; position: relative;
81
        }
82
        .gm-header-avatar::after {
83
        content: ''; position: absolute; bottom: 1px; right: 1px;
84
        width: 10px; height: 10px; background: #2dc653; border-radius: 50%;
85
        border: 2px solid var(--cb-navy);
86
        }
87
        .gm-header-info { flex: 1; min-width: 0; }
88
        .gm-header-name { color: #fff; font-weight: 600; font-size: 14px; letter-spacing: .3px; }
89
        .gm-header-status { color: rgba(255,255,255,.45); font-size: 11px; letter-spacing: .5px; }
90
        .gm-close-btn {
91
        background: rgba(255,255,255,.07); border: none; width: 30px; height: 30px;
92
        border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center;
93
        color: rgba(255,255,255,.5); transition: background .2s, color .2s; flex-shrink: 0;
94
        }
95
        .gm-close-btn:hover { background: rgba(255,255,255,.14); color: #fff; }
96
        
97
        .gm-messages {
98
        flex: 1; overflow-y: auto; padding: 18px 16px;
99
        display: flex; flex-direction: column; gap: 12px;
100
        scrollbar-width: thin; scrollbar-color: rgba(201,168,76,.3) transparent;
101
        }
102
        .gm-messages::-webkit-scrollbar { width: 4px; }
103
        .gm-messages::-webkit-scrollbar-thumb { background: rgba(201,168,76,.3); border-radius: 4px; }
104
        
105
        .gm-msg { display: flex; flex-direction: column; max-width: 88%; animation: gm-msg-in .3s ease both; }
106
        @keyframes gm-msg-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
107
        .gm-msg.gm-user { align-self: flex-end; align-items: flex-end; }
108
        .gm-msg.gm-bot { align-self: flex-start; align-items: flex-start; }
109
        
110
        .gm-bubble { padding: 11px 14px; border-radius: 14px; font-size: 13.5px; line-height: 1.6; word-break: break-word; }
111
        .gm-user .gm-bubble { background: var(--cb-gold); color: var(--cb-navy); font-weight: 500; border-bottom-right-radius: 4px; }
112
        .gm-bot .gm-bubble { background: rgba(255,255,255,.07); color: rgba(255,255,255,.88); border: 1px solid rgba(255,255,255,.1); border-bottom-left-radius: 4px; }
113
        .gm-time { font-size: 10px; color: rgba(255,255,255,.25); margin-top: 4px; padding: 0 4px; }
114
        
115
        .gm-typing .gm-bubble { display: flex; align-items: center; gap: 4px; padding: 14px 16px; }
116
        .gm-dot { width: 7px; height: 7px; background: var(--cb-gold); border-radius: 50%; animation: gm-bounce 1.2s infinite ease-in-out; }
117
        .gm-dot:nth-child(2) { animation-delay: .15s; }
118
        .gm-dot:nth-child(3) { animation-delay: .3s; }
119
        @keyframes gm-bounce { 0%, 60%, 100% { transform: translateY(0); opacity: .5; } 30% { transform: translateY(-5px); opacity: 1; } }
120
        
121
        .gm-suggestions { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 16px 12px; flex-shrink: 0; }
122
        .gm-chip {
123
        background: rgba(201,168,76,.12); border: 1px solid rgba(201,168,76,.3);
124
        color: var(--cb-gold); font-size: 11px; padding: 5px 12px; border-radius: 20px;
125
        cursor: pointer; font-family: 'DM Sans', sans-serif; letter-spacing: .3px;
126
        transition: background .2s, border-color .2s; white-space: nowrap;
127
        }
128
        .gm-chip:hover { background: rgba(201,168,76,.25); border-color: rgba(201,168,76,.6); }
129
        
130
        .gm-input-row { display: flex; align-items: center; gap: 8px; padding: 12px 14px; border-top: 1px solid rgba(255,255,255,.08); background: rgba(0,0,0,.2); flex-shrink: 0; }
131
        .gm-input {
132
        flex: 1; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12);
133
        border-radius: 24px; padding: 9px 16px; color: #fff; font-size: 13.5px;
134
        font-family: 'DM Sans', sans-serif; outline: none; transition: border-color .2s;
135
        resize: none; line-height: 1.4; max-height: 90px; overflow-y: auto;
136
        }
137
        .gm-input::placeholder { color: rgba(255,255,255,.28); }
138
        .gm-input:focus { border-color: rgba(201,168,76,.5); }
139
        .gm-send-btn {
140
        width: 38px; height: 38px; border-radius: 50%;
141
        background: var(--cb-gold); border: none; cursor: pointer;
142
        display: flex; align-items: center; justify-content: center;
143
        transition: background .2s, transform .15s; flex-shrink: 0;
144
        }
145
        .gm-send-btn:hover:not(:disabled) { background: var(--cb-gold-light); transform: scale(1.07); }
146
        .gm-send-btn:disabled { opacity: .45; cursor: not-allowed; transform: none; }
147
        .gm-send-btn svg { pointer-events: none; }
148
    `;
149
    document.head.appendChild(style);
150
 
151
    /* ---- Build HTML ---- */
152
    const wrapper = document.createElement('div');
153
    wrapper.innerHTML = `
154
        <!-- FAB Button -->
155
        <button id="gm-chat-fab" aria-label="Open AI Assistant">
156
        <span id="gm-chat-badge">1</span>
157
        <svg width="26" height="26" viewBox="0 0 24 24" fill="none">
158
            <path d="M12 2C6.48 2 2 6.48 2 12c0 1.85.5 3.58 1.37 5.07L2 22l4.93-1.37C8.42 21.5 10.15 22 12 22c5.52 0 10-4.48 10-10S17.52 2 12 2z" fill="#0B1F3A"/>
159
            <circle cx="8.5" cy="12" r="1.2" fill="#C9A84C"/>
160
            <circle cx="12" cy="12" r="1.2" fill="#C9A84C"/>
161
            <circle cx="15.5" cy="12" r="1.2" fill="#C9A84C"/>
162
        </svg>
163
        </button>
164
 
165
        <!-- Chat Window -->
166
        <div id="gm-chat-window" class="gm-hidden" role="dialog" aria-label="School AI Assistant">
167
        <div class="gm-chat-header">
168
            <div class="gm-header-avatar">G</div>
169
            <div class="gm-header-info">
170
            <div class="gm-header-name">Gadjah Mada Assistant</div>
171
            <div class="gm-header-status">Powered by AI · Always here to help</div>
172
            </div>
173
            <button class="gm-close-btn" id="gm-close-btn" aria-label="Close chat">
174
            <svg width="14" height="14" viewBox="0 0 14 14" fill="currentColor">
175
                <path d="M13 1L1 13M1 1l12 12" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
176
            </svg>
177
            </button>
178
        </div>
179
 
180
        <div class="gm-messages" id="gm-messages"></div>
181
 
182
        <div class="gm-suggestions" id="gm-suggestions">
183
            <button class="gm-chip">📋 Admissions info</button>
184
            <button class="gm-chip">🏆 Achievements</button>
185
            <button class="gm-chip">📚 Programs offered</button>
186
            <button class="gm-chip">📞 Contact & hours</button>
187
        </div>
188
 
189
        <div class="gm-input-row">
190
            <textarea class="gm-input" id="gm-input" placeholder="Ask anything about our school…" rows="1"></textarea>
191
            <button class="gm-send-btn" id="gm-send-btn" aria-label="Send message" disabled>
192
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none">
193
                <path d="M22 2L11 13M22 2L15 22l-4-9-9-4 20-7z" stroke="#0B1F3A" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
194
            </svg>
195
            </button>
196
        </div>
197
        </div>
198
    `;
199
    document.body.appendChild(wrapper);
200
 
201
    /* ---- State ---- */
202
    const state = {
203
        open: false,
204
        loading: false,
205
        history: [], // { role, content }
206
    };
207
 
208
    /* ---- Elements ---- */
209
    const fab       = document.getElementById('gm-chat-fab');
210
    const badge     = document.getElementById('gm-chat-badge');
211
    const win       = document.getElementById('gm-chat-window');
212
    const closeBtn  = document.getElementById('gm-close-btn');
213
    const messages  = document.getElementById('gm-messages');
214
    const input     = document.getElementById('gm-input');
215
    const sendBtn   = document.getElementById('gm-send-btn');
216
    const chips     = document.querySelectorAll('.gm-chip');
217
 
218
    /* ---- Toggle ---- */
219
    function toggleChat() {
220
        state.open = !state.open;
221
        win.classList.toggle('gm-hidden', !state.open);
222
        if (state.open) {
223
        badge.style.display = 'none';
224
        if (messages.children.length === 0) addWelcome();
225
        input.focus();
226
        }
227
    }
228
    fab.addEventListener('click', toggleChat);
229
    closeBtn.addEventListener('click', toggleChat);
230
 
231
    /* ---- Welcome ---- */
232
    function addWelcome() {
233
        addMessage('bot',
234
        '👋 Hello! I\'m the official AI assistant for <strong>Gadjah Mada High School</strong>.\n\nI can help you with admissions, academic programs, activities, faculty, and any other questions about our school.\n\n<em>Feel free to ask me anything!</em>'
235
        );
236
    }
237
 
238
    /* ---- Add message to UI ---- */
239
    function addMessage(role, text) {
240
        const now = new Date().toLocaleTimeString('id-ID', { hour: '2-digit', minute: '2-digit' });
241
        const div = document.createElement('div');
242
        div.className = `gm-msg gm-${role}`;
243
        div.innerHTML = `
244
        <div class="gm-bubble">${text.replace(/\n/g, '<br>')}</div>
245
        <span class="gm-time">${now}</span>
246
        `;
247
        messages.appendChild(div);
248
        messages.scrollTop = messages.scrollHeight;
249
        return div;
250
    }
251
 
252
    /* ---- Typing indicator ---- */
253
    function showTyping() {
254
        const div = document.createElement('div');
255
        div.className = 'gm-msg gm-bot gm-typing';
256
        div.id = 'gm-typing';
257
        div.innerHTML = `<div class="gm-bubble"><span class="gm-dot"></span><span class="gm-dot"></span><span class="gm-dot"></span></div>`;
258
        messages.appendChild(div);
259
        messages.scrollTop = messages.scrollHeight;
260
    }
261
    function hideTyping() {
262
        const t = document.getElementById('gm-typing');
263
        if (t) t.remove();
264
    }
265
 
266
    /* ---- Send message ---- */
267
    async function sendMessage(text) {
268
 
269
        // Remove extra spaces at the beginning and end of the message
270
        text = text.trim();
271
 
272
        // Check two conditions:
273
        // 1. If the message is empty
274
        // 2. If the chatbot is currently waiting for a response (state.loading is true)
275
        // If either condition happens, stop the function using return
276
 
277
        // Hide the suggestion chips that appear before the user sends the first message
278
        // Use getElementById to select "gm-suggestions"
279
        // Change its display style so it is no longer visible
280
 
281
        // Set the chatbot loading state to true
282
        // This prevents users from sending multiple messages while waiting for a reply
283
 
284
        // Disable the send button while the chatbot is processing the request
285
 
286
        // Clear the text inside the input field after the user sends the message
287
 
288
        // Reset the height of the input field back to automatic
289
        // This ensures the textarea shrinks back after sending
290
 
291
        // Display the user's message inside the chat interface
292
        // Use addMessage() with the role "user"
293
        // Make sure the text is passed through escapeHtml() to prevent HTML injection
294
 
295
        // Save the user's message into the conversation history
296
        // The history should store:
297
        // role: "user"
298
        // content: the message text
299
 
300
        // Show the typing indicator so the user knows the bot is generating a reply
301
 
302
        try {
303
 
304
            // Create a constant variable that stores the Gemini API Key
305
            const GEMINI_API_KEY = "YOUR_API_KEY_HERE";
306
 
307
            // Create the Gemini API endpoint URL using the API key above
308
            const GEMINI_URL = `https://generativelanguage.googleapis.com/v1beta/models/gemini-2.5-flash:generateContent?key=${GEMINI_API_KEY}`;
309
 
310
            // Convert the conversation history into the format required by the Gemini API
311
            // Each message should contain:
312
            // role: either "user" or "model"
313
            // parts: an array containing the text message
314
 
315
            // Send a POST request to the Gemini API using fetch()
316
            const response = await fetch(GEMINI_URL, {
317
 
318
                // Set the HTTP method to POST
319
 
320
                // Add headers specifying that the content type is JSON
321
 
322
                // The body of the request should be converted into JSON using JSON.stringify()
323
                // The request body should contain:
324
                // - system_instruction (using SYSTEM_PROMPT)
325
                // - contents (the conversation history)
326
                // - generationConfig (for example maxOutputTokens)
327
 
328
            });
329
 
330
            // Check if the API response is not successful
331
            // If response.ok is false, throw a new error with the API status code
332
 
333
            // Convert the API response into JSON format
334
            const data = 
335
 
336
            // Extract the chatbot reply from the returned JSON object
337
            // The reply text is usually found inside:
338
            // data.candidates[0].content.parts[0].text
339
            // If that value does not exist, provide a fallback message like:
340
            // "Sorry, I could not answer that right now."
341
            const reply = 
342
 
343
            // Save the chatbot reply into the conversation history
344
            // role should be "assistant"
345
 
346
            // Hide the typing indicator because the response is ready
347
 
348
            // Display the chatbot reply in the chat interface
349
            // Use addMessage() with role "bot"
350
            // Format the reply using formatReply()
351
 
352
        } catch (err) {
353
 
354
            // If an error occurs, print the error message in the browser console
355
            console.error('Chatbot error:', err);
356
 
357
            // Hide the typing indicator so it does not stay on the screen
358
 
359
            // Display an error message inside the chat window
360
            // Inform the user that something went wrong
361
            // Optionally include a contact number for support
362
 
363
        } finally {
364
 
365
            // Set the loading state back to false
366
            // This allows the chatbot to accept new messages
367
 
368
            // Re-enable the send button
369
            // The button should only be enabled if the input field contains text
370
        }
371
    }
372
 
373
    /* ---- Format reply (basic markdown-ish) ---- */
374
    function formatReply(text) {
375
        return escapeHtml(text)
376
        .replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>')
377
        .replace(/\*(.*?)\*/g, '<em>$1</em>')
378
        .replace(/\n/g, '<br>');
379
    }
380
 
381
    function escapeHtml(str) {
382
        return str.replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;');
383
    }
384
 
385
    /* ---- Input events ---- */
386
    input.addEventListener('input', () => {
387
        sendBtn.disabled = !input.value.trim() || state.loading;
388
        // Auto-grow textarea
389
        input.style.height = 'auto';
390
        input.style.height = Math.min(input.scrollHeight, 90) + 'px';
391
    });
392
 
393
    input.addEventListener('keydown', (e) => {
394
        if (e.key === 'Enter' && !e.shiftKey) {
395
        e.preventDefault();
396
        if (!sendBtn.disabled) sendMessage(input.value);
397
        }
398
    });
399
 
400
    sendBtn.addEventListener('click', () => sendMessage(input.value));
401
 
402
    /* ---- Chips ---- */
403
    chips.forEach(chip => {
404
        chip.addEventListener('click', () => {
405
        const map = {
406
            '📋 Admissions info': 'How do I apply to Gadjah Mada High School? What are the requirements?',
407
            '🏆 Achievements': 'What are the school\'s latest awards and achievements?',
408
            '📚 Programs offered': 'What academic programs are available at this school?',
409
            '📞 Contact & hours': 'What are the school\'s contact details and office hours?',
410
        };
411
        const q = map[chip.textContent.trim()] || chip.textContent;
412
        input.value = q;
413
        sendMessage(q);
414
        });
415
    });
416
 
417
})();
API FAQ Privacy Terms Contact
System Status: Stable

By using PasteCode you agree to our cookies policy to enhance your experience

Site design by Brill © 2025 PasteCode