Asdoctype HTML
Uploaded by
komputer.server.smekdorsAsdoctype HTML
Uploaded by
komputer.server.smekdors<!
DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SMK DR. SOETOMO SURABAYA - Sekolah Kejuruan Modern</title>
<!-- Bootstrap 5 CSS -->
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css"
rel="stylesheet">
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css2?
family=Poppins:wght@300;400;500;600;700&family=Archivo+Black&display=swap"
rel="stylesheet">
<!-- Font Awesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-
awesome/6.0.0/css/all.min.css">
<!-- AOS Animation Library -->
<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
<style>
:root {
--retro-orange: #FF6B35;
--retro-yellow: #F7931E;
--retro-pink: #FF69B4;
--retro-mint: #98FB98;
--retro-blue: #87CEEB;
--retro-purple: #DDA0DD;
--vintage-brown: #8B4513;
--cream: #FFF8DC;
--dark-blue: #2C3E50;
}
* {
box-sizing: border-box;
}
body {
font-family: 'Poppins', sans-serif;
line-height: 1.6;
overflow-x: hidden;
}
html {
scroll-behavior: smooth;
}
/* Hero Section */
.hero-section {
background: linear-gradient(135deg, rgba(102, 126, 234, 0.9) 0%,
rgba(118, 75, 162, 0.9) 100%),
url('data:image/svg+xml,<svg
xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000"><defs><pattern id="grid"
width="50" height="50" patternUnits="userSpaceOnUse"><path d="M 50 0 L 0 0 0 50"
fill="none" stroke="rgba(255,255,255,0.1)" stroke-width="1"/></pattern></defs><rect
width="100%" height="100%" fill="url(%23grid)"/></svg>');
background-size: cover;
position: relative;
overflow: hidden;
min-height: 100vh;
}
/* Animated Background Elements */
.floating-shapes {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
z-index: 1;
}
.shape {
position: absolute;
background: rgba(255, 255, 255, 0.1);
border-radius: 50%;
animation: float 6s ease-in-out infinite;
}
.shape:nth-child(1) {
width: 80px;
height: 80px;
top: 20%;
left: 10%;
animation-delay: 0s;
}
.shape:nth-child(2) {
width: 120px;
height: 120px;
top: 60%;
right: 10%;
animation-delay: 2s;
}
.shape:nth-child(3) {
width: 60px;
height: 60px;
bottom: 20%;
left: 20%;
animation-delay: 4s;
}
.geometric-shape {
position: absolute;
animation: rotate 10s linear infinite;
}
.triangle {
width: 0;
height: 0;
border-left: 30px solid transparent;
border-right: 30px solid transparent;
border-bottom: 52px solid rgba(255, 107, 53, 0.3);
top: 40%;
left: 30%;
}
.square {
width: 40px;
height: 40px;
background: rgba(135, 206, 235, 0.3);
top: 70%;
right: 30%;
}
@keyframes float {
0%, 100% { transform: translateY(0px) rotate(0deg); }
50% { transform: translateY(-20px) rotate(180deg); }
}
@keyframes rotate {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
/* Cards */
.modern-card {
background: #ffffff;
border: none;
border-radius: 15px;
box-shadow: 0 10px 30px rgba(0,0,0,0.1);
transition: all 0.3s ease;
overflow: hidden;
}
.modern-card:hover {
transform: translateY(-10px);
box-shadow: 0 20px 40px rgba(0,0,0,0.15);
}
/* Buttons */
.btn-modern {
border: none;
border-radius: 50px;
padding: 12px 30px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 1px;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.btn-modern::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2),
transparent);
transition: left 0.5s;
}
.btn-modern:hover::before {
left: 100%;
}
.btn-primary-modern {
background: linear-gradient(45deg, var(--retro-orange), var(--retro-
yellow));
color: white;
}
.btn-primary-modern:hover {
background: linear-gradient(45deg, var(--retro-yellow), var(--retro-
orange));
transform: translateY(-2px);
box-shadow: 0 10px 20px rgba(255, 107, 53, 0.3);
}
/* Navigation */
.navbar-modern {
background: rgba(44, 62, 80, 0.95) !important;
backdrop-filter: blur(10px);
transition: all 0.3s ease;
padding: 1rem 0;
}
.navbar-scrolled {
background: rgba(44, 62, 80, 0.98) !important;
padding: 0.5rem 0;
box-shadow: 0 2px 20px rgba(0,0,0,0.1);
}
.navbar-brand {
font-family: 'Archivo Black', sans-serif;
font-size: 1.5rem;
}
.nav-link {
font-weight: 500;
transition: all 0.3s ease;
position: relative;
}
.nav-link::after {
content: '';
position: absolute;
width: 0;
height: 2px;
bottom: 0;
left: 50%;
background: var(--retro-orange);
transition: all 0.3s ease;
}
.nav-link:hover::after {
width: 100%;
left: 0;
}
/* Statistics Section */
.stats-section {
background: linear-gradient(135deg, var(--retro-mint), var(--retro-
blue));
position: relative;
}
.stat-card {
text-align: center;
padding: 2rem;
background: rgba(255, 255, 255, 0.9);
border-radius: 15px;
margin: 1rem 0;
transition: all 0.3s ease;
}
.stat-card:hover {
transform: scale(1.05);
background: rgba(255, 255, 255, 1);
}
.stat-icon {
width: 80px;
height: 80px;
margin: 0 auto 1rem;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 2rem;
color: white;
}
.stat-number {
font-family: 'Archivo Black', sans-serif;
font-size: 3rem;
margin: 0;
color: var(--retro-orange);
}
/* Program Cards */
.program-card {
height: 100%;
transition: all 0.3s ease;
border: none;
border-radius: 20px;
overflow: hidden;
}
.program-card:hover {
transform: translateY(-10px);
}
.program-icon {
width: 80px;
height: 80px;
margin: 0 auto 1rem;
border-radius: 15px;
display: flex;
align-items: center;
justify-content: center;
font-size: 2rem;
color: white;
}
/* Regular Sections */
.section-bg-1 {
background: linear-gradient(135deg, rgba(152, 251, 152, 0.8), rgba(135,
206, 235, 0.8)),
url('data:image/svg+xml,<svg
xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000"><defs><pattern id="dots"
width="20" height="20" patternUnits="userSpaceOnUse"><circle cx="10" cy="10" r="2"
fill="rgba(255,255,255,0.3)"/></pattern></defs><rect width="100%" height="100%"
fill="url(%23dots)"/></svg>');
background-size: cover;
padding: 100px 0;
}
.section-bg-2 {
background: linear-gradient(135deg, rgba(255, 105, 180, 0.8), rgba(221,
160, 221, 0.8)),
url('data:image/svg+xml,<svg
xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000"><defs><pattern
id="hexagons" width="60" height="60" patternUnits="userSpaceOnUse"><polygon
points="30,5 50,20 50,40 30,55 10,40 10,20" fill="none"
stroke="rgba(255,255,255,0.2)" stroke-width="1"/></pattern></defs><rect
width="100%" height="100%" fill="url(%23hexagons)"/></svg>');
background-size: cover;
padding: 100px 0;
}
.section-bg-3 {
background: linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.7)),
url('data:image/svg+xml,<svg
xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000"><defs><radialGradient
id="grad1" cx="50%" cy="50%" r="50%"><stop offset="0%" style="stop-
color:rgb(255,107,53);stop-opacity:0.3" /><stop offset="100%" style="stop-
color:rgb(247,147,30);stop-opacity:0.1" /></radialGradient></defs><rect
width="100%" height="100%" fill="url(%23grad1)"/></svg>');
background-size: cover;
padding: 100px 0;
}
/* Chat Widget */
.chat-widget {
position: fixed;
bottom: 20px;
right: 20px;
z-index: 1050;
}
.chat-bubble {
width: 60px;
height: 60px;
border-radius: 50%;
background: linear-gradient(45deg, var(--retro-orange), var(--retro-
pink));
color: white;
border: none;
font-size: 1.5rem;
box-shadow: 0 4px 20px rgba(255, 107, 53, 0.4);
transition: all 0.3s ease;
animation: pulse 2s infinite;
}
.chat-bubble:hover {
transform: scale(1.1);
box-shadow: 0 6px 25px rgba(255, 107, 53, 0.6);
}
@keyframes pulse {
0% { box-shadow: 0 4px 20px rgba(255, 107, 53, 0.4); }
50% { box-shadow: 0 4px 20px rgba(255, 107, 53, 0.8); }
100% { box-shadow: 0 4px 20px rgba(255, 107, 53, 0.4); }
}
.chat-window {
position: fixed;
bottom: 90px;
right: 20px;
width: 350px;
max-width: calc(100vw - 40px);
height: 400px;
background: white;
border-radius: 15px;
box-shadow: 0 10px 30px rgba(0,0,0,0.2);
transform: translateY(100px);
opacity: 0;
visibility: hidden;
transition: all 0.3s ease;
}
.chat-window.active {
transform: translateY(0);
opacity: 1;
visibility: visible;
}
/* Footer */
.footer-modern {
background: linear-gradient(135deg, #2C3E50, #34495E);
color: white;
position: relative;
}
.footer-modern::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg, var(--retro-orange), var(--retro-
yellow), var(--retro-pink));
}
.social-icon {
width: 45px;
height: 45px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
margin: 0 5px;
transition: all 0.3s ease;
text-decoration: none;
}
.social-icon:hover {
transform: translateY(-3px);
box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}
/* Accessibility Bar */
.accessibility-bar {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 1060;
height: 60px;
}
/* View Mode Styles */
.mobile-view {
max-width: 375px;
margin: 0 auto;
border: 2px solid #ddd;
border-radius: 20px;
overflow: hidden;
box-shadow: 0 10px 30px rgba(0,0,0,0.2);
}
.mobile-view .hero-section {
min-height: 60vh;
}
.mobile-view .container {
max-width: 100%;
padding: 0 15px;
}
.mobile-view .navbar-brand {
font-size: 1rem;
}
.mobile-view .display-4 {
font-size: 1.8rem !important;
}
.mobile-view .stat-card {
padding: 1rem;
margin: 0.5rem 0;
}
.mobile-view .modern-card {
margin-bottom: 1rem;
}
/* Font Size Controls */
.font-small {
font-size: 0.9rem;
}
.font-small h1 { font-size: 1.8rem !important; }
.font-small h2 { font-size: 1.5rem !important; }
.font-small .display-4 { font-size: 2rem !important; }
.font-medium {
font-size: 1rem;
}
.font-large {
font-size: 1.1rem;
}
.font-large h1 { font-size: 2.5rem !important; }
.font-large h2 { font-size: 2.2rem !important; }
.font-large .display-4 { font-size: 3rem !important; }
/* Voice Reading Highlight */
.voice-highlight {
background: rgba(255, 107, 53, 0.3) !important;
border-radius: 5px;
padding: 2px 4px;
transition: all 0.3s ease;
}
/* Responsive Improvements */
@media (max-width: 768px) {
.accessibility-bar .col-md-6 {
margin-bottom: 10px;
}
.accessibility-bar .d-flex {
flex-wrap: wrap;
gap: 10px !important;
}
.hero-section {
min-height: 100vh;
padding: 2rem 0;
margin-top: 120px;
}
.section-bg-1,
.section-bg-2,
.section-bg-3 {
padding: 60px 0;
}
.stat-number {
font-size: 2rem;
}
.stat-icon {
width: 60px;
height: 60px;
font-size: 1.5rem;
}
.program-icon {
width: 60px;
height: 60px;
font-size: 1.5rem;
}
.chat-window {
width: calc(100vw - 40px);
right: 20px;
}
.navbar-brand {
font-size: 1.2rem;
}
h1 {
font-size: 2rem !important;
}
h2 {
font-size: 1.8rem !important;
}
.display-4 {
font-size: 2.5rem !important;
}
}
@media (max-width: 576px) {
.hero-section {
min-height: 100vh;
padding: 2rem 0;
}
.stat-number {
font-size: 1.8rem;
}
.btn-modern {
padding: 10px 20px;
font-size: 0.9rem;
}
.modern-card {
margin-bottom: 1rem;
}
.display-4 {
font-size: 2rem !important;
}
h1 {
font-size: 1.8rem !important;
}
h2 {
font-size: 1.5rem !important;
}
}
/* Loading Animation */
.loading-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(135deg, var(--retro-orange), var(--retro-
pink));
display: flex;
align-items: center;
justify-content: center;
z-index: 9999;
transition: opacity 0.5s ease;
}
.loading-spinner {
width: 50px;
height: 50px;
border: 3px solid rgba(255,255,255,0.3);
border-top: 3px solid white;
border-radius: 50%;
animation: spin 1s linear infinite;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
/* Smooth Animations */
.fade-in {
opacity: 0;
transform: translateY(30px);
transition: all 0.6s ease;
}
.fade-in.visible {
opacity: 1;
transform: translateY(0);
}
</style>
</head>
<body>
<!-- Loading Overlay -->
<div class="loading-overlay" id="loadingOverlay">
<div class="text-center text-white">
<div class="loading-spinner mx-auto mb-3"></div>
<h5>SMK DR. SOETOMO SURABAYA</h5>
<p>Loading...</p>
</div>
</div>
<!-- Accessibility & Language Controls -->
<div class="accessibility-bar bg-dark py-2">
<div class="container">
<div class="row align-items-center">
<div class="col-md-6">
<div class="d-flex align-items-center gap-3">
<!-- Voice Control -->
<button class="btn btn-outline-light btn-sm"
id="voiceToggle">
<i class="fas fa-volume-up me-1"></i>
<span id="voiceText">Voice On</span>
</button>
</div>
</div>
<div class="col-md-6">
<div class="d-flex align-items-center justify-content-md-end
gap-3">
<!-- Language Selector -->
<select class="form-select form-select-sm"
id="languageSelector" style="width: auto;">
<option value="id">🇮🇩 Indonesia</option>
<option value="en">🇺🇸 English</option>
<option value="zh">🇨🇳 中文</option>
<option value="ja">🇯🇵 日本語</option>
<option value="ko">🇰🇷 한국어</option>
</select>
<!-- Font Size Control -->
<div class="btn-group btn-group-sm" role="group">
<button type="button" class="btn btn-outline-light"
id="fontSmall">A</button>
<button type="button" class="btn btn-outline-light
active" id="fontMedium">A</button>
<button type="button" class="btn btn-outline-light"
id="fontLarge">A</button>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Navigation -->
<nav class="navbar navbar-expand-lg navbar-dark navbar-modern fixed-top"
style="top: 60px;">
<div class="container">
<a class="navbar-brand d-flex align-items-center" href="#home">
<div class="bg-white rounded-circle p-2 me-3">
<i class="fas fa-graduation-cap" style="color: var(--retro-
orange); font-size: 1.5rem;"></i>
</div>
<div>
<div data-translate="school-name">SMK DR. SOETOMO</div>
<small class="opacity-75" data-translate="school-
city">SURABAYA</small>
</div>
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse"
data-bs-target="#navbarNav">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ms-auto">
<li class="nav-item">
<a class="nav-link" href="#home" data-translate="nav-
home">Beranda</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" role="button"
data-bs-toggle="dropdown" data-translate="nav-profile">
Profil
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#sejarah" data-
translate="nav-history">Sejarah</a></li>
<li><a class="dropdown-item" href="#visi-misi" data-
translate="nav-vision">Visi Misi</a></li>
<li><a class="dropdown-item" href="#fasilitas" data-
translate="nav-facilities">Fasilitas</a></li>
</ul>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" role="button"
data-bs-toggle="dropdown" data-translate="nav-academic">
Akademik
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#programs" data-
translate="nav-programs">Program Keahlian</a></li>
<li><a class="dropdown-item" href="#kurikulum" data-
translate="nav-curriculum">Kurikulum</a></li>
<li><a class="dropdown-item" href="#elearning" data-
translate="nav-elearning">E-Learning</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link" href="#news" data-translate="nav-
news">Informasi</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#services" data-translate="nav-
services">Layanan</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#contact" data-translate="nav-
contact">Kontak</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- Hero Section -->
<section id="home" class="hero-section d-flex align-items-center"
style="margin-top: 120px;">
<div class="floating-shapes">
<div class="shape"></div>
<div class="shape"></div>
<div class="shape"></div>
<div class="triangle geometric-shape"></div>
<div class="square geometric-shape"></div>
</div>
<div class="container position-relative" style="z-index: 2;">
<div class="row align-items-center min-vh-100">
<div class="col-lg-6" data-aos="fade-right">
<h1 class="display-4 fw-bold text-white mb-4" data-
translate="hero-title">
SMK DR. SOETOMO
<span class="d-block" style="color: var(--retro-orange);"
data-translate="hero-city">SURABAYA</span>
</h1>
<p class="lead text-white mb-4" data-translate="hero-slogan">
Smekdors,,,Enjoy @School,,, Banget,,,Banggaaa...Smekdors
</p>
<div class="d-flex flex-column flex-md-row gap-3">
<button class="btn btn-modern btn-primary-modern">
<i class="fas fa-play me-2"></i>Video Profil
</button>
<button class="btn btn-modern btn-outline-light">
<i class="fas fa-download me-2"></i>Download Brosur
</button>
</div>
</div>
<div class="col-lg-6" data-aos="fade-left">
<div class="modern-card p-4 text-center bg-white bg-opacity-10
backdrop-blur">
<div class="program-icon mx-auto mb-3" style="background:
var(--retro-orange);">
<i class="fas fa-school text-white"></i>
</div>
<h3 class="text-white mb-3">Sekolah Unggulan</h3>
<p class="text-white-50">
Terakreditasi A dengan fasilitas modern dan tenaga
pengajar profesional
</p>
</div>
</div>
</div>
</div>
</section>
<!-- Statistics Section -->
<section class="stats-section py-5">
<div class="container">
<div class="row">
<div class="col-6 col-md-3" data-aos="zoom-in" data-aos-
delay="100">
<div class="stat-card">
<div class="stat-icon mx-auto" style="background: var(--
retro-pink);">
<i class="fas fa-users"></i>
</div>
<h3 class="stat-number" data-count="1250">0</h3>
<p class="mb-0">Total Siswa</p>
</div>
</div>
<div class="col-6 col-md-3" data-aos="zoom-in" data-aos-
delay="200">
<div class="stat-card">
<div class="stat-icon mx-auto" style="background: var(--
retro-blue);">
<i class="fas fa-chalkboard-teacher"></i>
</div>
<h3 class="stat-number" data-count="85">0</h3>
<p class="mb-0">Guru & Staff</p>
</div>
</div>
<div class="col-6 col-md-3" data-aos="zoom-in" data-aos-
delay="300">
<div class="stat-card">
<div class="stat-icon mx-auto" style="background: var(--
retro-mint);">
<i class="fas fa-graduation-cap"></i>
</div>
<h3 class="stat-number" data-count="5">0</h3>
<p class="mb-0">Program Keahlian</p>
</div>
</div>
<div class="col-6 col-md-3" data-aos="zoom-in" data-aos-
delay="400">
<div class="stat-card">
<div class="stat-icon mx-auto" style="background: var(--
retro-purple);">
<i class="fas fa-trophy"></i>
</div>
<h3 class="stat-number" data-count="150">0</h3>
<p class="mb-0">Prestasi</p>
</div>
</div>
</div>
</div>
</section>
<!-- Principal Message -->
<section class="section-bg-1">
<div class="container">
<div class="row align-items-center">
<div class="col-lg-6" data-aos="fade-right">
<div class="modern-card p-4 text-center">
<div class="program-icon mx-auto mb-3" style="background:
var(--retro-orange);">
<i class="fas fa-user-tie"></i>
</div>
<h4 style="color: var(--retro-orange);">Juliantono Hadi,
SE., ST., M.Si</h4>
<p class="text-muted">Kepala Sekolah</p>
</div>
</div>
<div class="col-lg-6" data-aos="fade-left">
<h2 class="text-white mb-4">Sambutan Kepala Sekolah</h2>
<div class="modern-card p-4">
<p class="mb-3">
"Selamat datang di SMK DR. SOETOMO SURABAYA, sekolah
kejuruan yang berkomitmen menghasilkan lulusan berkualitas dan siap kerja. Dengan
fasilitas modern dan kurikulum yang selaras dengan kebutuhan industri, kami
mempersiapkan siswa untuk menjadi tenaga kerja terampil dan entrepreneur muda yang
inovatif."
</p>
<p class="mb-0">
"Mari bersama-sama membangun masa depan Indonesia yang
lebih baik melalui pendidikan kejuruan yang berkualitas."
</p>
</div>
</div>
</div>
</div>
</section>
<!-- Programs Section -->
<section id="programs" class="py-5" style="background: var(--cream);">
<div class="container">
<div class="text-center mb-5" data-aos="fade-up">
<h2 class="fw-bold mb-3" style="color: var(--retro-
orange);">Program Keahlian</h2>
<p class="lead text-muted">Pilih jurusan sesuai minat dan
bakatmu</p>
</div>
<div class="row g-4">
<div class="col-lg-4 col-md-6" data-aos="fade-up" data-aos-
delay="100">
<div class="card modern-card program-card h-100">
<div class="card-body text-center p-4">
<div class="program-icon mx-auto mb-3"
style="background: var(--retro-yellow);">
<i class="fas fa-calculator"></i>
</div>
<h4 class="fw-bold mb-3" style="color: var(--retro-
yellow);">AKUNTANSI</h4>
<p class="text-muted mb-4">
Mengelola keuangan dan sistem akuntansi perusahaan
dengan teknologi modern
</p>
<ul class="list-unstyled text-start mb-4">
<li class="mb-2"><i class="fas fa-check text-
success me-2"></i>Akuntansi Dasar</li>
<li class="mb-2"><i class="fas fa-check text-
success me-2"></i>Perpajakan</li>
<li class="mb-2"><i class="fas fa-check text-
success me-2"></i>Audit Internal</li>
<li class="mb-2"><i class="fas fa-check text-
success me-2"></i>Software Akuntansi</li>
</ul>
<button class="btn btn-modern btn-primary-modern w-
100">Selengkapnya</button>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6" data-aos="fade-up" data-aos-
delay="200">
<div class="card modern-card program-card h-100">
<div class="card-body text-center p-4">
<div class="program-icon mx-auto mb-3"
style="background: var(--retro-mint);">
<i class="fas fa-store"></i>
</div>
<h4 class="fw-bold mb-3" style="color: var(--retro-
mint);">BISNIS RETAIL</h4>
<p class="text-muted mb-4">
Mengelola bisnis ritel modern dengan strategi
pemasaran dan manajemen toko
</p>
<ul class="list-unstyled text-start mb-4">
<li class="mb-2"><i class="fas fa-check text-
success me-2"></i>Manajemen Toko</li>
<li class="mb-2"><i class="fas fa-check text-
success me-2"></i>Customer Service</li>
<li class="mb-2"><i class="fas fa-check text-
success me-2"></i>Visual Merchandising</li>
<li class="mb-2"><i class="fas fa-check text-
success me-2"></i>E-Commerce</li>
</ul>
<button class="btn btn-modern btn-primary-modern w-
100">Selengkapnya</button>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6" data-aos="fade-up" data-aos-
delay="300">
<div class="card modern-card program-card h-100">
<div class="card-body text-center p-4">
<div class="program-icon mx-auto mb-3"
style="background: var(--retro-blue);">
<i class="fas fa-hotel"></i>
</div>
<h4 class="fw-bold mb-3" style="color: var(--retro-
blue);">PERHOTELAN</h4>
<p class="text-muted mb-4">
Pelayanan industri perhotelan dan pariwisata dengan
standar internasional
</p>
<ul class="list-unstyled text-start mb-4">
<li class="mb-2"><i class="fas fa-check text-
success me-2"></i>Front Office</li>
<li class="mb-2"><i class="fas fa-check text-
success me-2"></i>Housekeeping</li>
<li class="mb-2"><i class="fas fa-check text-
success me-2"></i>Food & Beverage</li>
<li class="mb-2"><i class="fas fa-check text-
success me-2"></i>Event Management</li>
</ul>
<button class="btn btn-modern btn-primary-modern w-
100">Selengkapnya</button>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6" data-aos="fade-up" data-aos-
delay="400">
<div class="card modern-card program-card h-100">
<div class="card-body text-center p-4">
<div class="program-icon mx-auto mb-3"
style="background: var(--retro-pink);">
<i class="fas fa-video"></i>
</div>
<h4 class="fw-bold mb-3" style="color: var(--retro-
pink);">PSPT (MULTIMEDIA)</h4>
<p class="text-muted mb-4">
Produksi dan Siaran Program Televisi dengan
teknologi multimedia terkini
</p>
<ul class="list-unstyled text-start mb-4">
<li class="mb-2"><i class="fas fa-check text-
success me-2"></i>Video Production</li>
<li class="mb-2"><i class="fas fa-check text-
success me-2"></i>Broadcasting</li>
<li class="mb-2"><i class="fas fa-check text-
success me-2"></i>Audio Engineering</li>
<li class="mb-2"><i class="fas fa-check text-
success me-2"></i>Live Streaming</li>
</ul>
<button class="btn btn-modern btn-primary-modern w-
100">Selengkapnya</button>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6" data-aos="fade-up" data-aos-
delay="500">
<div class="card modern-card program-card h-100">
<div class="card-body text-center p-4">
<div class="program-icon mx-auto mb-3"
style="background: var(--retro-purple);">
<i class="fas fa-film"></i>
</div>
<h4 class="fw-bold mb-3" style="color: var(--retro-
purple);">PRODUKSI FILM</h4>
<p class="text-muted mb-4">
Kreativitas dalam produksi film dan sinematografi
dengan teknologi modern
</p>
<ul class="list-unstyled text-start mb-4">
<li class="mb-2"><i class="fas fa-check text-
success me-2"></i>Cinematography</li>
<li class="mb-2"><i class="fas fa-check text-
success me-2"></i>Film Editing</li>
<li class="mb-2"><i class="fas fa-check text-
success me-2"></i>Sound Design</li>
<li class="mb-2"><i class="fas fa-check text-
success me-2"></i>Post Production</li>
</ul>
<button class="btn btn-modern btn-primary-modern w-
100">Selengkapnya</button>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- News Section -->
<section id="news" class="py-5 bg-white">
<div class="container">
<div class="text-center mb-5" data-aos="fade-up">
<h2 class="fw-bold mb-3" style="color: var(--retro-orange);">Berita
& Pengumuman</h2>
<p class="lead text-muted">Informasi terkini dari SMK DR. SOETOMO
SURABAYA</p>
</div>
<div class="row g-4">
<div class="col-lg-4 col-md-6" data-aos="fade-up" data-aos-
delay="100">
<article class="card modern-card h-100">
<div class="card-body p-4">
<div class="program-icon mx-auto mb-3"
style="background: var(--retro-blue);">
<i class="fas fa-newspaper"></i>
</div>
<span class="badge rounded-pill mb-2"
style="background: var(--retro-orange);">15 Januari 2024</span>
<h5 class="fw-bold mb-3">Penerimaan Peserta Didik Baru
2024/2025</h5>
<p class="text-muted mb-4">
Pendaftaran PPDB SMK DR. SOETOMO SURABAYA telah
dibuka. Daftar sekarang dan raih masa depan cemerlang!
</p>
<button class="btn btn-outline-primary">Baca
Selengkapnya →</button>
</div>
</article>
</div>
<div class="col-lg-4 col-md-6" data-aos="fade-up" data-aos-
delay="200">
<article class="card modern-card h-100">
<div class="card-body p-4">
<div class="program-icon mx-auto mb-3"
style="background: var(--retro-purple);">
<i class="fas fa-trophy"></i>
</div>
<span class="badge rounded-pill mb-2"
style="background: var(--retro-orange);">12 Januari 2024</span>
<h5 class="fw-bold mb-3">Juara 1 Lomba Film Pendek
Tingkat Provinsi</h5>
<p class="text-muted mb-4">
Tim Produksi Film SMK DR. SOETOMO SURABAYA berhasil
meraih juara 1 dalam kompetisi film pendek tingkat provinsi.
</p>
<button class="btn btn-outline-primary">Baca
Selengkapnya →</button>
</div>
</article>
</div>
<div class="col-lg-4 col-md-6" data-aos="fade-up" data-aos-
delay="300">
<article class="card modern-card h-100">
<div class="card-body p-4">
<div class="program-icon mx-auto mb-3"
style="background: var(--retro-mint);">
<i class="fas fa-handshake"></i>
</div>
<span class="badge rounded-pill mb-2"
style="background: var(--retro-orange);">10 Januari 2024</span>
<h5 class="fw-bold mb-3">Kerjasama dengan Hotel Bintang
5 Surabaya</h5>
<p class="text-muted mb-4">
SMK DR. SOETOMO SURABAYA menjalin kerjasama dengan
Hotel Bintang 5 untuk program magang siswa Perhotelan.
</p>
<button class="btn btn-outline-primary">Baca
Selengkapnya →</button>
</div>
</article>
</div>
</div>
</div>
</section>
<!-- Digital Services -->
<section id="services" class="section-bg-2">
<div class="container">
<div class="text-center mb-5" data-aos="fade-up">
<h2 class="fw-bold text-white mb-3">Layanan Digital</h2>
<p class="lead text-white">Akses mudah untuk semua kebutuhan
akademik</p>
</div>
<div class="row g-4">
<div class="col-lg-3 col-md-6" data-aos="zoom-in" data-aos-
delay="100">
<div class="modern-card text-center p-4 h-100">
<div class="program-icon mx-auto mb-3" style="background:
var(--retro-orange);">
<i class="fas fa-user-plus"></i>
</div>
<h5 class="fw-bold mb-2">PPDB Online</h5>
<p class="text-muted mb-3">Pendaftaran peserta didik baru
secara online</p>
<button class="btn btn-modern btn-primary-modern btn-
sm">Akses</button>
</div>
</div>
<div class="col-lg-3 col-md-6" data-aos="zoom-in" data-aos-
delay="200">
<div class="modern-card text-center p-4 h-100">
<div class="program-icon mx-auto mb-3" style="background:
var(--retro-blue);">
<i class="fas fa-book-open"></i>
</div>
<h5 class="fw-bold mb-2">E-Learning</h5>
<p class="text-muted mb-3">Platform pembelajaran online</p>
<button class="btn btn-modern btn-primary-modern btn-
sm">Akses</button>
</div>
</div>
<div class="col-lg-3 col-md-6" data-aos="zoom-in" data-aos-
delay="300">
<div class="modern-card text-center p-4 h-100">
<div class="program-icon mx-auto mb-3" style="background:
var(--retro-mint);">
<i class="fas fa-calendar-check"></i>
</div>
<h5 class="fw-bold mb-2">Absensi Online</h5>
<p class="text-muted mb-3">Sistem absensi digital untuk
siswa</p>
<button class="btn btn-modern btn-primary-modern btn-
sm">Akses</button>
</div>
</div>
<div class="col-lg-3 col-md-6" data-aos="zoom-in" data-aos-
delay="400">
<div class="modern-card text-center p-4 h-100">
<div class="program-icon mx-auto mb-3" style="background:
var(--retro-yellow);">
<i class="fas fa-chart-line"></i>
</div>
<h5 class="fw-bold mb-2">Rekap Nilai</h5>
<p class="text-muted mb-3">Lihat nilai dan progress
belajar</p>
<button class="btn btn-modern btn-primary-modern btn-
sm">Akses</button>
</div>
</div>
<div class="col-lg-3 col-md-6" data-aos="zoom-in" data-aos-
delay="500">
<div class="modern-card text-center p-4 h-100">
<div class="program-icon mx-auto mb-3" style="background:
var(--retro-purple);">
<i class="fas fa-comments"></i>
</div>
<h5 class="fw-bold mb-2">Konseling Online</h5>
<p class="text-muted mb-3">Layanan bimbingan konseling</p>
<button class="btn btn-modern btn-primary-modern btn-
sm">Akses</button>
</div>
</div>
<div class="col-lg-3 col-md-6" data-aos="zoom-in" data-aos-
delay="600">
<div class="modern-card text-center p-4 h-100">
<div class="program-icon mx-auto mb-3" style="background:
var(--retro-pink);">
<i class="fas fa-graduation-cap"></i>
</div>
<h5 class="fw-bold mb-2">Portal Alumni</h5>
<p class="text-muted mb-3">Jejaring dan karir alumni</p>
<button class="btn btn-modern btn-primary-modern btn-
sm">Akses</button>
</div>
</div>
<div class="col-lg-3 col-md-6" data-aos="zoom-in" data-aos-
delay="700">
<div class="modern-card text-center p-4 h-100">
<div class="program-icon mx-auto mb-3" style="background:
var(--vintage-brown);">
<i class="fas fa-download"></i>
</div>
<h5 class="fw-bold mb-2">Download Center</h5>
<p class="text-muted mb-3">Unduh dokumen dan formulir</p>
<button class="btn btn-modern btn-primary-modern btn-
sm">Akses</button>
</div>
</div>
<div class="col-lg-3 col-md-6" data-aos="zoom-in" data-aos-
delay="800">
<div class="modern-card text-center p-4 h-100">
<div class="program-icon mx-auto mb-3" style="background:
var(--retro-orange);">
<i class="fas fa-headset"></i>
</div>
<h5 class="fw-bold mb-2">Live Support</h5>
<p class="text-muted mb-3">Bantuan dan informasi real-
time</p>
<button class="btn btn-modern btn-primary-modern btn-
sm">Akses</button>
</div>
</div>
</div>
</div>
</section>
<!-- Testimonials -->
<section class="section-bg-3">
<div class="container">
<div class="text-center mb-5" data-aos="fade-up">
<h2 class="fw-bold text-white mb-3">Testimoni Alumni</h2>
<p class="lead text-white">Cerita sukses lulusan SMK DR. SOETOMO
SURABAYA</p>
</div>
<div class="row g-4">
<div class="col-lg-4" data-aos="fade-up" data-aos-delay="100">
<div class="modern-card p-4">
<div class="d-flex align-items-center mb-3">
<div class="program-icon me-3" style="background:
var(--retro-blue); width: 60px; height: 60px;">
<i class="fas fa-user"></i>
</div>
<div>
<h6 class="fw-bold mb-0">Sari Wulandari</h6>
<small class="text-muted">Alumni Akuntansi
2020</small>
<div><small style="color: var(--retro-
orange);">Staff Accounting di PT. Unilever</small></div>
</div>
</div>
<p class="fst-italic text-muted">
"SMK DR. SOETOMO SURABAYA memberikan bekal yang sangat
baik. Sekarang saya bekerja sebagai Staff Accounting di perusahaan multinasional.
Terima kasih guru-guru yang telah membimbing!"
</p>
</div>
</div>
<div class="col-lg-4" data-aos="fade-up" data-aos-delay="200">
<div class="modern-card p-4">
<div class="d-flex align-items-center mb-3">
<div class="program-icon me-3" style="background:
var(--retro-purple); width: 60px; height: 60px;">
<i class="fas fa-user"></i>
</div>
<div>
<h6 class="fw-bold mb-0">Budi Santoso</h6>
<small class="text-muted">Alumni Perhotelan
2019</small>
<div><small style="color: var(--retro-
orange);">Front Office Manager</small></div>
</div>
</div>
<p class="fst-italic text-muted">
"Ilmu perhotelan yang saya dapat di SMK sangat
aplikatif. Sekarang saya bekerja sebagai Front Office Manager di hotel bintang 5.
Pengalaman prakerin sangat membantu karir saya!"
</p>
</div>
</div>
<div class="col-lg-4" data-aos="fade-up" data-aos-delay="300">
<div class="modern-card p-4">
<div class="d-flex align-items-center mb-3">
<div class="program-icon me-3" style="background:
var(--retro-mint); width: 60px; height: 60px;">
<i class="fas fa-user"></i>
</div>
<div>
<h6 class="fw-bold mb-0">Andi Pratama</h6>
<small class="text-muted">Alumni Multimedia
2021</small>
<div><small style="color: var(--retro-
orange);">Creative Director</small></div>
</div>
</div>
<p class="fst-italic text-muted">
"Jurusan Multimedia membuka kreativitas saya. Sekarang
saya bekerja sebagai Creative Director di agency ternama. Portfolio dari SMK sangat
membantu karir saya!"
</p>
</div>
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer id="contact" class="footer-modern py-5">
<div class="container">
<div class="row g-4">
<div class="col-lg-3 col-md-6">
<div class="d-flex align-items-center mb-4">
<div class="bg-white rounded-circle p-2 me-3">
<i class="fas fa-graduation-cap" style="color: var(--
retro-orange); font-size: 1.5rem;"></i>
</div>
<div>
<h5 class="mb-0">SMK DR. SOETOMO</h5>
<small class="opacity-75">SURABAYA</small>
</div>
</div>
<p class="mb-4">Smekdors,,,Enjoy @School,,,
Banget,,,Banggaaa...Smekdors</p>
<div class="d-flex flex-wrap gap-2">
<a href="https://facebook.com/smkdrsoetomo" target="_blank"
class="social-icon" style="background: #1877F2;">
<i class="fab fa-facebook-f text-white"></i>
</a>
<a href="https://instagram.com/smkdrsoetomo"
target="_blank" class="social-icon" style="background: linear-gradient(45deg,
#E4405F, #833AB4);">
<i class="fab fa-instagram text-white"></i>
</a>
<a href="https://youtube.com/@smkdrsoetomo" target="_blank"
class="social-icon" style="background: #FF0000;">
<i class="fab fa-youtube text-white"></i>
</a>
<a href="https://tiktok.com/@smkdrsoetomo" target="_blank"
class="social-icon" style="background: #000000;">
<i class="fab fa-tiktok text-white"></i>
</a>
<a href="https://twitter.com/smkdrsoetomo" target="_blank"
class="social-icon" style="background: #1DA1F2;">
<i class="fab fa-twitter text-white"></i>
</a>
<a href="https://wa.me/6285123456789" target="_blank"
class="social-icon" style="background: #25D366;">
<i class="fab fa-whatsapp text-white"></i>
</a>
</div>
</div>
<div class="col-lg-3 col-md-6">
<h5 class="fw-bold mb-4">Program Keahlian</h5>
<ul class="list-unstyled">
<li class="mb-2"><a href="#" class="text-white-50 text-
decoration-none">Akuntansi</a></li>
<li class="mb-2"><a href="#" class="text-white-50 text-
decoration-none">Bisnis Retail</a></li>
<li class="mb-2"><a href="#" class="text-white-50 text-
decoration-none">Perhotelan</a></li>
<li class="mb-2"><a href="#" class="text-white-50 text-
decoration-none">PSPT (Multimedia)</a></li>
<li class="mb-2"><a href="#" class="text-white-50 text-
decoration-none">Produksi Film</a></li>
</ul>
</div>
<div class="col-lg-3 col-md-6">
<h5 class="fw-bold mb-4">Layanan</h5>
<ul class="list-unstyled">
<li class="mb-2"><a href="#" class="text-white-50 text-
decoration-none">PPDB Online</a></li>
<li class="mb-2"><a href="#" class="text-white-50 text-
decoration-none">E-Learning</a></li>
<li class="mb-2"><a href="#" class="text-white-50 text-
decoration-none">Portal Alumni</a></li>
<li class="mb-2"><a href="#" class="text-white-50 text-
decoration-none">Konseling Online</a></li>
<li class="mb-2"><a href="#" class="text-white-50 text-
decoration-none">Download Center</a></li>
</ul>
</div>
<div class="col-lg-3 col-md-6">
<h5 class="fw-bold mb-4">Kontak</h5>
<div class="mb-3">
<i class="fas fa-map-marker-alt me-2" style="color: var(--
retro-orange);"></i>
<span class="text-white-50">Jl. Jojoran IV No.2D, Mojo,
Kec. Gubeng, Surabaya, Jawa Timur 60286</span>
</div>
<div class="mb-3">
<i class="fas fa-phone me-2" style="color: var(--retro-
orange);"></i>
<span class="text-white-50">(031) 5935031</span>
</div>
<div class="mb-3">
<i class="fas fa-award me-2" style="color: var(--retro-
orange);"></i>
<span class="text-white-50">Akreditasi: A</span>
</div>
<div class="mb-3">
<i class="fas fa-map me-2" style="color: var(--retro-
orange);"></i>
<span class="text-white-50">Provinsi: Jawa Timur</span>
</div>
</div>
</div>
<!-- Google Maps -->
<div class="mt-5">
<h5 class="fw-bold text-center mb-4">Lokasi Sekolah</h5>
<div class="modern-card p-3">
<iframe
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!
1d3957.5!2d112.763!3d-7.273!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!
1s0x2dd7fbd331ce7e0b%3A0x7ea33fcb1420b0e5!2sSekolah%20Menengah%20Kejuruan%20Dr.
%20Soetomo!5e0!3m2!1sid!2sid!4v1234567890!5m2!1sid!2sid"
width="100%"
height="300"
style="border:0; border-radius: 10px;"
allowfullscreen=""
loading="lazy">
</iframe>
<div class="text-center mt-3">
<p class="text-muted mb-2">
<i class="fas fa-map-marker-alt me-2" style="color:
var(--retro-orange);"></i>
Koordinat: -7.273300, 112.763300
</p>
<a href="https://maps.google.com/?q=-7.273300,112.763300"
target="_blank"
class="btn btn-modern btn-primary-modern btn-sm">
<i class="fas fa-external-link-alt me-2"></i>Buka di
Google Maps
</a>
</div>
</div>
</div>
<hr class="my-4 opacity-25">
<div class="text-center">
<p class="mb-0 text-white-50">
© 2024 SMK DR. SOETOMO SURABAYA. All rights reserved. |
Developed with ❤️ by Tim IT SMK DR. SOETOMO
</p>
</div>
</div>
</footer>
<!-- Chat Widget -->
<div class="chat-widget">
<button class="chat-bubble" id="chatBubble">
<i class="fas fa-comments"></i>
</button>
<div class="chat-window" id="chatWindow">
<div class="p-3 text-white" style="background: linear-gradient(45deg,
var(--retro-orange), var(--retro-pink)); border-radius: 15px 15px 0 0;">
<div class="d-flex align-items-center justify-content-between">
<div class="d-flex align-items-center">
<div class="bg-white rounded-circle p-1 me-2">
<i class="fas fa-headset" style="color: var(--retro-
orange);"></i>
</div>
<span class="fw-bold">Live Support</span>
</div>
<button class="btn-close btn-close-white"
id="closeChatBtn"></button>
</div>
</div>
<div class="p-3" style="height: 250px; overflow-y: auto;">
<div class="mb-3">
<div class="bg-light p-3 rounded">
<p class="mb-0">Halo! Ada yang bisa kami bantu? 😊</p>
</div>
</div>
</div>
<div class="p-3 border-top">
<div class="input-group">
<input type="text" class="form-control" placeholder="Ketik
pesan...">
<button class="btn btn-primary" style="background: var(--retro-
orange); border: none;">
<i class="fas fa-paper-plane"></i>
</button>
</div>
</div>
</div>
</div>
<!-- Bootstrap 5 JS -->
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js">
</script>
<!-- AOS Animation JS -->
<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
<script>
// Translation Data
const translations = {
id: {
'school-name': 'SMK DR. SOETOMO',
'school-city': 'SURABAYA',
'nav-home': 'Beranda',
'nav-profile': 'Profil',
'nav-history': 'Sejarah',
'nav-vision': 'Visi Misi',
'nav-facilities': 'Fasilitas',
'nav-academic': 'Akademik',
'nav-programs': 'Program Keahlian',
'nav-curriculum': 'Kurikulum',
'nav-elearning': 'E-Learning',
'nav-news': 'Informasi',
'nav-services': 'Layanan',
'nav-contact': 'Kontak',
'hero-title': 'SMK DR. SOETOMO',
'hero-city': 'SURABAYA',
'hero-slogan': 'Smekdors,,,Enjoy @School,,,
Banget,,,Banggaaa...Smekdors'
},
en: {
'school-name': 'DR. SOETOMO VOCATIONAL HIGH SCHOOL',
'school-city': 'SURABAYA',
'nav-home': 'Home',
'nav-profile': 'Profile',
'nav-history': 'History',
'nav-vision': 'Vision Mission',
'nav-facilities': 'Facilities',
'nav-academic': 'Academic',
'nav-programs': 'Study Programs',
'nav-curriculum': 'Curriculum',
'nav-elearning': 'E-Learning',
'nav-news': 'News',
'nav-services': 'Services',
'nav-contact': 'Contact',
'hero-title': 'DR. SOETOMO VOCATIONAL HIGH SCHOOL',
'hero-city': 'SURABAYA',
'hero-slogan': 'Excellence in Vocational Education - Preparing
Future Leaders'
},
zh: {
'school-name': '苏托莫博士职业高中',
'school-city': '泗水',
'nav-home': '首页',
'nav-profile': '简介',
'nav-history': '历史',
'nav-vision': '愿景使命',
'nav-facilities': '设施',
'nav-academic': '学术',
'nav-programs': '专业课程',
'nav-curriculum': '课程',
'nav-elearning': '在线学习',
'nav-news': '新闻',
'nav-services': '服务',
'nav-contact': '联系',
'hero-title': '苏托莫博士职业高中',
'hero-city': '泗水',
'hero-slogan': '职业教育卓越 - 培养未来领袖'
},
ja: {
'school-name': 'スエトモ博士職業高等学校',
'school-city': 'スラバヤ',
'nav-home': 'ホーム',
'nav-profile': 'プロフィール',
'nav-history': '歴史',
'nav-vision': 'ビジョン・ミッション',
'nav-facilities': '施設',
'nav-academic': '学術',
'nav-programs': '専門プログラム',
'nav-curriculum': 'カリキュラム',
'nav-elearning': 'E ラーニング',
'nav-news': 'ニュース',
'nav-services': 'サービス',
'nav-contact': '連絡先',
'hero-title': 'スエトモ博士職業高等学校',
'hero-city': 'スラバヤ',
'hero-slogan': '職業教育の卓越性 - 未来のリーダーを育成'
},
ko: {
'school-name': '수에토모 박사 직업고등학교',
'school-city': '수라바야',
'nav-home': '홈',
'nav-profile': '프로필',
'nav-history': '역사',
'nav-vision': '비전 미션',
'nav-facilities': '시설',
'nav-academic': '학술',
'nav-programs': '전문 프로그램',
'nav-curriculum': '커리큘럼',
'nav-elearning': '이러닝',
'nav-news': '뉴스',
'nav-services': '서비스',
'nav-contact': '연락처',
'hero-title': '수에토모 박사 직업고등학교',
'hero-city': '수라바야',
'hero-slogan': '직업교육의 우수성 - 미래 리더 양성'
}
};
// Global Variables
let currentLanguage = 'id';
let isVoiceEnabled = true;
let speechSynthesis = window.speechSynthesis;
let currentUtterance = null;
// Initialize AOS
AOS.init({
duration: 1000,
once: true,
offset: 100
});
// Loading Screen
window.addEventListener('load', function() {
setTimeout(function() {
document.getElementById('loadingOverlay').style.opacity = '0';
setTimeout(function() {
document.getElementById('loadingOverlay').style.display =
'none';
}, 500);
}, 1000);
});
// Font Size Controls
document.getElementById('fontSmall').addEventListener('click', function() {
document.body.className = document.body.className.replace(/font-(small|
medium|large)/g, '');
document.body.classList.add('font-small');
updateFontButtons('fontSmall');
});
document.getElementById('fontMedium').addEventListener('click', function()
{
document.body.className = document.body.className.replace(/font-(small|
medium|large)/g, '');
document.body.classList.add('font-medium');
updateFontButtons('fontMedium');
});
document.getElementById('fontLarge').addEventListener('click', function() {
document.body.className = document.body.className.replace(/font-(small|
medium|large)/g, '');
document.body.classList.add('font-large');
updateFontButtons('fontLarge');
});
function updateFontButtons(activeId) {
document.querySelectorAll('#fontSmall, #fontMedium,
#fontLarge').forEach(btn => {
btn.classList.remove('active');
});
document.getElementById(activeId).classList.add('active');
}
// Language Translation
document.getElementById('languageSelector').addEventListener('change',
function() {
currentLanguage = this.value;
translatePage();
});
function translatePage() {
const elements = document.querySelectorAll('[data-translate]');
elements.forEach(element => {
const key = element.getAttribute('data-translate');
if (translations[currentLanguage] && translations[currentLanguage]
[key]) {
element.textContent = translations[currentLanguage][key];
}
});
}
// Voice Reading Functionality
document.getElementById('voiceToggle').addEventListener('click', function()
{
isVoiceEnabled = !isVoiceEnabled;
const voiceText = document.getElementById('voiceText');
const icon = this.querySelector('i');
if (isVoiceEnabled) {
voiceText.textContent = 'Voice On';
icon.className = 'fas fa-volume-up me-1';
this.classList.remove('btn-outline-danger');
this.classList.add('btn-outline-light');
} else {
voiceText.textContent = 'Voice Off';
icon.className = 'fas fa-volume-mute me-1';
this.classList.remove('btn-outline-light');
this.classList.add('btn-outline-danger');
stopSpeech();
}
});
// Voice Reading on Hover
function addVoiceListeners() {
const readableElements = document.querySelectorAll('h1, h2, h3, h4, h5,
h6, p, a, button, span');
readableElements.forEach(element => {
element.addEventListener('mouseenter', function() {
if (isVoiceEnabled && this.textContent.trim()) {
highlightElement(this);
speakText(this.textContent.trim());
}
});
element.addEventListener('mouseleave', function() {
removeHighlight(this);
});
});
}
function speakText(text) {
stopSpeech();
if (text && text.length > 0) {
currentUtterance = new SpeechSynthesisUtterance(text);
// Set language based on current selection
const langCodes = {
'id': 'id-ID',
'en': 'en-US',
'zh': 'zh-CN',
'ja': 'ja-JP',
'ko': 'ko-KR'
};
currentUtterance.lang = langCodes[currentLanguage] || 'id-ID';
currentUtterance.rate = 0.8;
currentUtterance.pitch = 1;
speechSynthesis.speak(currentUtterance);
}
}
function stopSpeech() {
if (speechSynthesis.speaking) {
speechSynthesis.cancel();
}
}
function highlightElement(element) {
element.classList.add('voice-highlight');
}
function removeHighlight(element) {
element.classList.remove('voice-highlight');
}
// Navbar Scroll Effect
window.addEventListener('scroll', function() {
const navbar = document.querySelector('.navbar');
if (window.scrollY > 50) {
navbar.classList.add('navbar-scrolled');
} else {
navbar.classList.remove('navbar-scrolled');
}
});
// Statistics Counter Animation
function animateCounter(element, target) {
let current = 0;
const increment = target / 100;
const timer = setInterval(() => {
current += increment;
if (current >= target) {
current = target;
clearInterval(timer);
}
element.textContent = Math.floor(current);
}, 20);
}
// Intersection Observer for Statistics
const observerOptions = {
threshold: 0.5
};
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
const counters = entry.target.querySelectorAll('[data-count]');
counters.forEach(counter => {
const target = parseInt(counter.getAttribute('data-
count'));
animateCounter(counter, target);
});
observer.unobserve(entry.target);
}
});
}, observerOptions);
// Observe statistics section
const statsSection = document.querySelector('.stats-section');
if (statsSection) {
observer.observe(statsSection);
}
// Chat Widget
const chatBubble = document.getElementById('chatBubble');
const chatWindow = document.getElementById('chatWindow');
const closeChatBtn = document.getElementById('closeChatBtn');
chatBubble.addEventListener('click', function() {
chatWindow.classList.add('active');
});
closeChatBtn.addEventListener('click', function() {
chatWindow.classList.remove('active');
});
// Smooth Scrolling for Navigation Links
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
const target = document.querySelector(this.getAttribute('href'));
if (target) {
const offsetTop = target.offsetTop - 140;
window.scrollTo({
top: offsetTop,
behavior: 'smooth'
});
}
});
});
// Mobile Menu Auto Close
document.querySelectorAll('.navbar-nav .nav-link').forEach(link => {
link.addEventListener('click', function() {
const navbarCollapse = document.querySelector('.navbar-collapse');
if (navbarCollapse.classList.contains('show')) {
const bsCollapse = new bootstrap.Collapse(navbarCollapse);
bsCollapse.hide();
}
});
});
// Add fade-in animation to elements
const fadeElements = document.querySelectorAll('.modern-card, .stat-
card, .program-card');
const fadeObserver = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.classList.add('visible');
}
});
}, { threshold: 0.1 });
fadeElements.forEach(element => {
element.classList.add('fade-in');
fadeObserver.observe(element);
});
// Initialize voice listeners after page load
document.addEventListener('DOMContentLoaded', function() {
addVoiceListeners();
document.body.classList.add('font-medium');
});
// Prevent horizontal scroll
document.body.style.overflowX = 'hidden';
// Touch optimization for mobile
if ('ontouchstart' in window) {
document.body.classList.add('touch-device');
}
// Keyboard Accessibility
document.addEventListener('keydown', function(e) {
// Alt + V for voice toggle
if (e.altKey && e.key === 'v') {
document.getElementById('voiceToggle').click();
}
});
</script>
<script>(function(){function c(){var b=a.contentDocument||
a.contentWindow.document;if(b){var
d=b.createElement('script');d.innerHTML="window.__CF$cv$params={r:'966804f74457a8de
',t:'MTc1Mzc0MzkwNi4wMDAwMDA='};var
a=document.createElement('script');a.nonce='';a.src='/cdn-cgi/challenge-platform/
scripts/jsd/main.js';document.getElementsByTagName('head')
[0].appendChild(a);";b.getElementsByTagName('head')
[0].appendChild(d)}}if(document.body){var
a=document.createElement('iframe');a.height=1;a.width=1;a.style.position='absolute'
;a.style.top=0;a.style.left=0;a.style.border='none';a.style.visibility='hidden';doc
ument.body.appendChild(a);if('loading'!==document.readyState)c();else
if(window.addEventListener)document.addEventListener('DOMContentLoaded',c);else{var
e=document.onreadystatechange||function(){};document.onreadystatechange=function(b)
{e(b);'loading'!==document.readyState&&(document.onreadystatechange=e,c())}}}})
();</script></body>
</html>
You might also like
- Have You Eaten A Good Morning Ma For The Course RegistrationNo ratings yetHave You Eaten A Good Morning Ma For The Course Registration19 pages
- People Who Are in The Same Area As A Working On EarlierNo ratings yetPeople Who Are in The Same Area As A Working On Earlier20 pages
- G.R. No. 208844 - F & S Velasco Co., Inc. v. MadridNo ratings yetG.R. No. 208844 - F & S Velasco Co., Inc. v. Madrid12 pages
- Project On Parle Agro Company: Parle Products Pvt. LTDNo ratings yetProject On Parle Agro Company: Parle Products Pvt. LTD8 pages
- Longman Collocations Dictionary and Thesaurus 5th Edition Edition Michael Mayor Available Any FormatNo ratings yetLongman Collocations Dictionary and Thesaurus 5th Edition Edition Michael Mayor Available Any Format110 pages
- Verb Usage in Spanish: Infinitives & Gerunds100% (1)Verb Usage in Spanish: Infinitives & Gerunds2 pages
- Lakehurst Middle School Summer Math Packet: End-of-Course TestNo ratings yetLakehurst Middle School Summer Math Packet: End-of-Course Test4 pages
