<!
DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Karena Kita Semua Berharga</title>
<link rel="stylesheet"
href="[Link]
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
:root {
--primary-pink: #ffb6c1;
--soft-pink: #ffe4e9;
--dark-pink: #ff69b4;
--purple: #9370db;
--light-blue: #b3e0ff;
--white: #ffffff;
--text-dark: #333333;
--shadow: 0 8px 20px rgba(255, 105, 180, 0.15);
--gradient: linear-gradient(135deg, #ffb6c1, #b3e0ff, #9370db);
}
body {
background: linear-gradient(135deg, var(--soft-pink), var(--light-blue));
color: var(--text-dark);
min-height: 100vh;
padding-bottom: 60px;
.container {
max-width: 1200px;
margin: 0 auto;
padding: 20px;
/* Header & Navigation */
.header {
text-align: center;
padding: 40px 20px;
background: rgba(255, 255, 255, 0.9);
border-radius: 30px;
margin-bottom: 30px;
box-shadow: var(--shadow);
border: 3px solid var(--primary-pink);
position: relative;
overflow: hidden;
.header::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 5px;
background: var(--gradient);
.main-title {
font-size: 3rem;
color: var(--dark-pink);
margin-bottom: 10px;
text-shadow: 2px 2px 4px rgba(0,0,0,0.1);
letter-spacing: 2px;
.tagline {
font-size: 1.5rem;
color: var(--purple);
margin-bottom: 25px;
font-weight: 300;
.start-btn {
background: var(--gradient);
color: white;
border: none;
padding: 18px 40px;
font-size: 1.3rem;
border-radius: 50px;
cursor: pointer;
font-weight: bold;
transition: transform 0.3s, box-shadow 0.3s;
box-shadow: 0 6px 15px rgba(147, 112, 219, 0.4);
.start-btn:hover {
transform: translateY(-5px);
box-shadow: 0 10px 25px rgba(147, 112, 219, 0.6);
/* Navigation */
.nav-menu {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 20px;
margin-top: 30px;
.nav-btn {
background: white;
border: 2px solid var(--primary-pink);
border-radius: 20px;
padding: 12px 25px;
font-size: 1rem;
cursor: pointer;
transition: all 0.3s;
color: var(--dark-pink);
font-weight: 600;
.nav-btn:hover {
background: var(--primary-pink);
color: white;
transform: scale(1.05);
/* Content Sections */
.section {
background: rgba(255, 255, 255, 0.95);
border-radius: 25px;
padding: 30px;
margin-bottom: 30px;
box-shadow: var(--shadow);
border: 2px solid var(--light-blue);
display: none;
.[Link] {
display: block;
animation: fadeIn 0.5s ease;
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
.section-title {
color: var(--dark-pink);
font-size: 2.2rem;
margin-bottom: 25px;
text-align: center;
padding-bottom: 15px;
border-bottom: 3px dashed var(--primary-pink);
/* Avatar Section */
.avatar-container {
text-align: center;
.avatar-choices {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 20px;
margin: 30px 0;
.avatar-option {
background: white;
border-radius: 20px;
padding: 20px;
width: 180px;
cursor: pointer;
transition: all 0.3s;
border: 3px solid transparent;
text-align: center;
.avatar-option:hover {
border-color: var(--dark-pink);
transform: translateY(-10px);
box-shadow: 0 15px 25px rgba(255, 105, 180, 0.2);
.avatar-icon {
font-size: 4rem;
color: var(--purple);
margin-bottom: 15px;
.outfit-options {
display: flex;
flex-wrap: wrap;
gap: 15px;
justify-content: center;
margin: 20px 0;
}
.outfit {
background: var(--soft-pink);
padding: 10px 20px;
border-radius: 50px;
cursor: pointer;
transition: all 0.3s;
.outfit:hover {
background: var(--dark-pink);
color: white;
.complete-btn {
background: var(--purple);
color: white;
border: none;
padding: 15px 40px;
font-size: 1.2rem;
border-radius: 50px;
cursor: pointer;
margin-top: 30px;
transition: all 0.3s;
.complete-btn:hover {
background: var(--dark-pink);
transform: scale(1.05);
/* Laboratory Section */
.lab-input {
width: 100%;
height: 200px;
padding: 20px;
border: 3px solid var(--light-blue);
border-radius: 20px;
font-size: 1.1rem;
margin: 20px 0;
resize: vertical;
background: var(--soft-pink);
.myth-types {
display: flex;
gap: 20px;
flex-wrap: wrap;
justify-content: center;
margin: 30px 0;
.myth-card {
background: white;
border: 2px solid var(--primary-pink);
border-radius: 15px;
padding: 20px;
width: 250px;
text-align: center;
transition: all 0.3s;
.myth-card:hover {
transform: translateY(-10px);
box-shadow: 0 10px 20px rgba(255, 105, 180, 0.2);
/* Digital Flower Section */
.flower-container {
display: flex;
flex-wrap: wrap;
gap: 30px;
align-items: center;
margin: 30px 0;
.flower-input {
flex: 1;
min-width: 300px;
.flower-input textarea {
width: 100%;
height: 150px;
padding: 15px;
border: 3px solid var(--primary-pink);
border-radius: 20px;
font-size: 1.1rem;
background: var(--soft-pink);
.daily-message {
flex: 1;
min-width: 300px;
background: var(--soft-pink);
padding: 25px;
border-radius: 20px;
border: 3px dashed var(--dark-pink);
/* Bridge Section */
.discussion-list {
max-width: 800px;
margin: 0 auto;
.discussion-item {
background: white;
border-radius: 15px;
padding: 20px;
margin-bottom: 20px;
border-left: 5px solid var(--purple);
box-shadow: 0 5px 15px rgba(0,0,0,0.05);
.user-info {
display: flex;
justify-content: space-between;
margin-bottom: 10px;
color: var(--dark-pink);
font-weight: bold;
.empathy-symbols {
display: flex;
gap: 15px;
margin-top: 15px;
.empathy-btn {
background: var(--soft-pink);
border: none;
padding: 8px 15px;
border-radius: 20px;
cursor: pointer;
transition: all 0.3s;
color: var(--text-dark);
}
.empathy-btn:hover {
background: var(--dark-pink);
color: white;
/* Voice Wall Section */
.voice-recorder {
text-align: center;
background: var(--soft-pink);
padding: 30px;
border-radius: 20px;
margin: 30px 0;
.record-btn {
background: var(--dark-pink);
color: white;
border: none;
width: 70px;
height: 70px;
border-radius: 50%;
font-size: 1.5rem;
cursor: pointer;
margin: 20px;
transition: all 0.3s;
.record-btn:hover {
transform: scale(1.1);
box-shadow: 0 0 20px rgba(255, 105, 180, 0.7);
.voice-item {
background: white;
border-radius: 15px;
padding: 15px;
margin-bottom: 15px;
display: flex;
align-items: center;
gap: 15px;
.voice-play {
background: var(--light-blue);
border: none;
width: 40px;
height: 40px;
border-radius: 50%;
cursor: pointer;
/* Mirror Room Section */
.affirmation-container {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
gap: 20px;
margin: 30px 0;
.affirmation-card {
background: white;
border-radius: 15px;
padding: 25px;
text-align: center;
border: 2px solid var(--primary-pink);
transition: all 0.3s;
cursor: pointer;
.affirmation-card:hover {
transform: translateY(-10px);
box-shadow: 0 15px 25px rgba(255, 105, 180, 0.2);
background: var(--soft-pink);
.coin-badge {
background: gold;
color: #333;
padding: 5px 10px;
border-radius: 15px;
font-weight: bold;
margin-top: 10px;
display: inline-block;
}
/* Contact Section */
.contact-info {
display: flex;
flex-wrap: wrap;
gap: 30px;
justify-content: center;
margin-top: 30px;
.contact-card {
background: white;
border-radius: 20px;
padding: 25px;
width: 300px;
text-align: center;
border: 2px solid var(--light-blue);
.social-icons {
display: flex;
justify-content: center;
gap: 20px;
margin-top: 20px;
font-size: 2rem;
color: var(--dark-pink);
}
/* Footer */
.footer {
text-align: center;
margin-top: 50px;
color: var(--purple);
font-size: 0.9rem;
.feature-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 20px;
margin: 30px 0;
.feature-item {
background: white;
padding: 20px;
border-radius: 15px;
text-align: center;
border: 2px solid var(--light-blue);
transition: all 0.3s;
cursor: pointer;
.feature-item:hover {
transform: translateY(-5px);
border-color: var(--dark-pink);
}
/* Responsive */
@media (max-width: 768px) {
.main-title { font-size: 2.2rem; }
.tagline { font-size: 1.2rem; }
.section-title { font-size: 1.8rem; }
.nav-menu { gap: 10px; }
.nav-btn { padding: 10px 15px; font-size: 0.9rem; }
.avatar-option { width: 150px; }
.feature-grid { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 480px) {
.main-title { font-size: 1.8rem; }
.section { padding: 20px; }
.feature-grid { grid-template-columns: 1fr; }
.flower-container { flex-direction: column; }
</style>
</head>
<body>
<div class="container">
<!-- Header -->
<header class="header" id="home">
<h1 class="main-title">KARENA KITA SEMUA BERHARGA</h1>
<p class="tagline">Jemukan Suaramu, Tulis Petikanmu</p>
<button class="start-btn" onclick="showSection('avatar')">Mulai
Petualangan</button>
<div class="nav-menu">
<button class="nav-btn" onclick="showSection('home')"><i class="fas
fa-home"></i> Home</button>
<button class="nav-btn" onclick="showSection('avatar')"><i class="fas fa-user-
circle"></i> Avatar</button>
<button class="nav-btn" onclick="showSection('mirror')"><i class="fas fa-
mirror"></i> Cermin Diri</button>
<button class="nav-btn" onclick="showSection('voice')"><i class="fas fa-
microphone"></i> Dinding Suara</button>
<button class="nav-btn" onclick="showSection('flower')"><i class="fas fa-
flower"></i> Bunga Digital</button>
<button class="nav-btn" onclick="showSection('lab')"><i class="fas fa-flask"></i>
Lab Mitos</button>
<button class="nav-btn" onclick="showSection('bridge')"><i class="fas fa-
bridge"></i> Jembatan</button>
<button class="nav-btn" onclick="showSection('contact')"><i class="fas fa-
phone"></i> Kontak</button>
</div>
</header>
<!-- Features Grid -->
<div class="section active" id="features">
<h2 class="section-title">Innovation Interactive Emphati World For Girls</h2>
<div class="feature-grid">
<div class="feature-item" onclick="showSection('mirror')">
<i class="fas fa-mirror fa-2x"></i>
<h3>Ruang Cermin Diri</h3>
</div>
<div class="feature-item" onclick="showSection('voice')">
<i class="fas fa-microphone fa-2x"></i>
<h3>Dinding Suara</h3>
</div>
<div class="feature-item" onclick="showSection('flower')">
<i class="fas fa-flower fa-2x"></i>
<h3>Bunga Digital</h3>
</div>
<div class="feature-item" onclick="showSection('lab')">
<i class="fas fa-flask fa-2x"></i>
<h3>Laboratorium Mitos</h3>
</div>
<div class="feature-item" onclick="showSection('bridge')">
<i class="fas fa-bridge fa-2x"></i>
<h3>Jembatan Persaudaraan</h3>
</div>
<div class="feature-item">
<i class="fas fa-robot fa-2x"></i>
<h3>AI KKB Mentor</h3>
</div>
<div class="feature-item">
<i class="fas fa-book-open fa-2x"></i>
<h3>Story Mode</h3>
</div>
<div class="feature-item">
<i class="fas fa-store fa-2x"></i>
<h3>Store</h3>
</div>
</div>
</div>
<!-- Avatar Selection -->
<div class="section" id="avatar">
<h2 class="section-title">PILIH AVATAR MU</h2>
<div class="avatar-container">
<div class="avatar-choices">
<div class="avatar-option" onclick="selectAvatar('protect')">
<div class="avatar-icon"><i class="fas fa-shield-alt"></i></div>
<h3>Child Protection</h3>
<p>Avatar Pelindung</p>
</div>
<div class="avatar-option" onclick="selectAvatar('brave')">
<div class="avatar-icon"><i class="fas fa-fist-raised"></i></div>
<h3>PROTECT</h3>
<p>Avatar Pemberani</p>
</div>
<div class="avatar-option" onclick="selectAvatar('creative')">
<div class="avatar-icon"><i class="fas fa-palette"></i></div>
<h3>Outfit Avatarmu</h3>
<p>Avatar Kreatif</p>
</div>
</div>
<h3>Pilih Outfit Avatarmu</h3>
<div class="outfit-options">
<div class="outfit" onclick="selectOutfit('casual')">Casual</div>
<div class="outfit" onclick="selectOutfit('formal')">Formal</div>
<div class="outfit" onclick="selectOutfit('sporty')">Sporty</div>
<div class="outfit" onclick="selectOutfit('creative')">Kreatif</div>
<div class="outfit" onclick="selectOutfit('elegant')">Elegan</div>
</div>
<button class="complete-btn" onclick="completeAvatar()">
<i class="fas fa-check-circle"></i> Selesai dan Masuk Dunia!
</button>
</div>
</div>
<!-- Mirror Room -->
<div class="section" id="mirror">
<h2 class="section-title">RUANG CERMIN DIRI</h2>
<div style="text-align: center; margin-bottom: 30px;">
<textarea placeholder="Tuliskan aku kuat, aku cantik, atau apapun disini..."
rows="4" style="width: 80%; padding: 20px; border-radius: 20px; border: 3px solid var(--
primary-pink); font-size: 1.2rem;"></textarea>
<p style="margin-top: 20px; color: var(--purple);"><i class="fas fa-share-alt"></i>
Silahkan bagikan avatarmu!</p>
<h3 style="color: var(--dark-pink); margin: 20px 0;">Saksikan dirimu Disini</h3>
</div>
<div class="affirmation-container">
<div class="affirmation-card" onclick="addAffirmation('Aku kuat !')">
<h3>Aku kuat !</h3>
<div class="coin-badge">+50 coin</div>
</div>
<div class="affirmation-card" onclick="addAffirmation('Aku pasti Bisa')">
<h3>Aku pasti Bisa</h3>
<div class="coin-badge">+50 coin</div>
</div>
<div class="affirmation-card" onclick="addAffirmation('Aku cantik')">
<h3>Aku cantik</h3>
<div class="coin-badge">+50 coin</div>
</div>
<div class="affirmation-card" onclick="addAffirmation('Aku BERANI')">
<h3>Aku BERANI</h3>
<div class="coin-badge">+50 coin</div>
</div>
<div class="affirmation-card" onclick="addAffirmation('Aku berharga')">
<h3>Aku berharga</h3>
<div class="coin-badge">+50 coin</div>
</div>
</div>
<div style="text-align: center; margin-top: 30px;">
<button class="nav-btn" style="background: var(--purple); color: white;">
<i class="fas fa-share"></i> Bagikan Cermin Ke Orang Lain
</button>
</div>
</div>
<!-- Voice Wall -->
<div class="section" id="voice">
<h2 class="section-title">DINDING SUARA</h2>
<p style="text-align: center; margin-bottom: 30px; font-size: 1.2rem;">
Tempat pengguna mengekspresikan suara hati dan mendengarkan cerita orang lain
</p>
<div class="voice-recorder">
<h3><i class="fas fa-microphone-alt"></i> Voice Note Sharing</h3>
<p>Kirim rekaman suara (Anonim/Nama Asli)</p>
<button class="record-btn" onclick="startRecording()">
<i class="fas fa-microphone"></i>
</button>
<p>Mulai Rekam Suara Anda</p>
<div style="margin-top: 20px;">
<label><input type="checkbox"> Dengarkan yang lain</label>
</div>
</div>
<div style="display: flex; justify-content: space-around; flex-wrap: wrap; margin: 30px
0;">
<div style="text-align: center;">
<h3 style="color: var(--dark-pink);">Aku merasakanmu (12)</h3>
</div>
<div style="text-align: center;">
<h3 style="color: var(--purple);">Terimakasih sudah berbagai (06)</h3>
</div>
<div style="text-align: center;">
<h3 style="color: var(--text-dark);">Reaksi</h3>
</div>
</div>
<div class="voice-item">
<button class="voice-play"><i class="fas fa-play"></i></button>
<div>
<h4>Pengguna anonim</h4>
<p>0:45</p>
</div>
</div>
<div class="voice-item">
<button class="voice-play"><i class="fas fa-play"></i></button>
<div>
<h4>Pengguna anonim</h4>
<p>Pengungkap 1:10</p>
</div>
</div>
</div>
{/* Voice Wall */}
<section className="max-w-4xl mx-auto mt-8 p-6 rounded-lg shadow-md bg-gradient-to-b
from-[#efe8ff] to-[#e8f6ff]">
<h2 className="text-xl text-center font-semibold">DINDING SUARA</h2>
<p className="text-center text-sm">Tempat pengguna mengekspresikan suara hati dan
mendengarkan cerita orang lain</p>
<div className="mt-4 p-4 rounded-lg bg-white">
<div className="flex gap-3 items-center">
<button className={`px-4 py-2 rounded-md ${recording? 'bg-red-500 text-white' : 'bg-
[#2f4661] text-white'}`} onClick={()=> recording? stopRecording() :
startRecording()}>{recording? 'Berhenti Rekam' : 'Mulai Rekam Suara Anda'}</button>
<button className="px-4 py-2 rounded-md bg-gray-200" onClick={()=>{const els =
[Link]('.audio-clip'); [Link](e=> [Link]&&[Link]())}}>Dengarkan
yang lain</button>
</div>
<div className="mt-6 grid grid-cols-3 gap-4">
{[Link](a=> (
<div key={[Link]} className="p-3 bg-[#f3eef9] rounded-md">
<div className="text-sm">Pengguna anonim</div>
<audio controls className="w-full audio-clip" src={[Link]}></audio>
<div className="flex justify-between mt-2"><button onClick={()=>playAudio([Link])}
className="text-sm text-[#2f4661]">Play</button><button onClick={()=>deleteAudio([Link])}
className="text-sm text-red-500">Hapus</button></div>
</div>
))}
{[Link]===0 && <div className="col-span-3 text-center text-gray-500">Belum
ada rekaman suara.</div>}
</div>
</div>
</section>
<!-- Digital Flower -->
<div class="section" id="flower">
<h2 class="section-title">BUNGA DIGITAL</h2>
<div class="flower-container">
<div class="flower-input">
<h3>Deskripsikan Bungamu Disini</h3>
<textarea placeholder="Tambahkan bunga... Bisa diberikan ke orang
lain?"></textarea>
<button class="nav-btn" style="background: var(--dark-pink); color: white;
margin-top: 15px;">
<i class="fas fa-paper-plane"></i> Kirim Bunga
</button>
</div>
<div class="daily-message">
<h3 style="color: var(--dark-pink);">Pesan Harian - Bloom of the Day</h3>
<div style="background: white; padding: 20px; border-radius: 15px; margin-top:
15px;">
<h4>Chuka Protectar</h4>
<p><strong>Nama pengguna</strong></p>
<p><strong>Bloom of the day</strong></p>
<p>Kamu luar biasa</p>
<p>kamu harus lebih berani</p>
<p>lagi untuk berbicara</p>
<p>karna ku tidak pernah</p>
<p>benar benar sendiri</p>
<p style="color: var(--purple); margin-top: 10px; text-align: right;">31 oktober
2025</p>
</div>
<button class="nav-btn" style="margin-top: 15px;">Lihat pesan lain</button>
</div>
</div>
</div>
<!-- Myth Laboratory -->
<div class="section" id="lab">
<h2 class="section-title">LABORATORIUM MITOS</h2>
<p style="text-align: center; margin-bottom: 20px; font-size: 1.2rem;">
Fitur menulis mitos versi pribadi (tentang diri, mimpi, atau nilai hidup)
</p>
<textarea class="lab-input" placeholder="Ketik cerita mitos mu sendiri
disini......"></textarea>
<div style="text-align: center; margin: 20px 0;">
<button class="nav-btn" style="background: var(--purple); color: white;">
<i class="fas fa-share"></i> Share ceritamu
</button>
</div>
<div class="myth-types">
<div class="myth-card">
<h3 style="color: var(--dark-pink);">Mitos Kekuatan</h3>
<p>Tuliskan sesuatu disini...</p>
</div>
<div class="myth-card">
<h3 style="color: var(--purple);">Mitos Kebijakan</h3>
<p>Tuliskan sesuatu disini...</p>
</div>
</div>
<div style="text-align: center; margin-top: 30px;">
<button class="complete-btn">
<i class="fas fa-save"></i> Simpan dan Bagikan Mitosmu
</button>
</div>
</div>
<!-- Sisterhood Bridge -->
<div class="section" id="bridge">
<h2 class="section-title">JEMBATAN PERSAUDARIAN</h3>
<p style="text-align: center; margin-bottom: 30px;">Diskusi dengan teman</p>
<div class="discussion-list">
<div class="discussion-item">
<div class="user-info">
<span>dewi_harapan01</span>
<span>Hari ini</span>
</div>
<p>Hari ini aku semakin percaya diri</p>
<div class="empathy-symbols">
<button class="empathy-btn">Simbol Empati 15 ▲</button>
<button class="empathy-btn">8 ▼</button>
<button class="empathy-btn">3 💬</button>
</div>
</div>
<div class="discussion-item">
<div class="user-info">
<span>teman_penenang</span>
<span>Kemarin</span>
</div>
<p>Kamu cukup dan kamu pantas</p>
<div class="empathy-symbols">
<button class="empathy-btn">Simbol Empati 15 ▲</button>
<button class="empathy-btn">8 ▼</button>
<button class="empathy-btn">3 💬</button>
</div>
</div>
<div class="discussion-item">
<div class="user-info">
<span>penyemangatmu</span>
<span>2 hari lalu</span>
</div>
<p>kamu bisa lebih dari kemarin</p>
<div class="empathy-symbols">
<button class="empathy-btn">Simbol Empati 15 ▲</button>
<button class="empathy-btn">8 ▼</button>
<button class="empathy-btn">3 💬</button>
</div>
</div>
</div>
<div style="text-align: center; margin-top: 30px;">
<textarea placeholder="Tulis pesan dukungan untuk temanmu..." rows="3"
style="width: 80%; padding: 15px; border-radius: 15px; border: 2px solid var(--primary-
pink);"></textarea>
<button class="nav-btn" style="margin-top: 15px; background: var(--dark-pink);
color: white;">
<i class="fas fa-paper-plane"></i> Kirim Dukungan
</button>
</div>
</div>
<!-- Contact -->
<div class="section" id="contact">
<h2 class="section-title">Karena kita berharga</h2>
<div class="contact-info">
<div class="contact-card">
<h3 style="color: var(--dark-pink);">Reservations Office</h3>
<p><strong>SMA NEGERI 1 LAQUBOTI</strong></p>
<p><i class="fas fa-phone"></i> 1123-456-7890</p>
<p><i class="fas fa-globe"></i> Karena kita [Link]</p>
</div>
<div class="contact-card">
<h3 style="color: var(--purple);">U can contact us</h3>
<p><strong>Monday to Friday</strong></p>
<p>9:00 am to 6:00 pm</p>
<p><strong>Saturday</strong></p>
<p>9:00 am to 12:00 noon</p>
</div>
<div class="contact-card">
<h3 style="color: var(--dark-pink);">Get Social</h3>
<p><em>Tag us in your photos!</em></p>
<div class="social-icons">
<i class="fab fa-instagram"></i>
<i class="fab fa-tiktok"></i>
<i class="fab fa-twitter"></i>
<i class="fab fa-youtube"></i>
</div>
</div>
</div>
</div>
<footer class="footer">
<p>© 2025 Karena Kita Semua Berharga. All rights reserved.</p>
<p>Empathy Zones • AI KKB Mentor • Story Mode • Store • Hybrid Program •
Komunitas</p>
</footer>
</div>
<script>
// Navigation function
function showSection(sectionId) {
// Hide all sections
[Link]('.section').forEach(section => {
[Link]('active');
});
// Show selected section
[Link](sectionId).[Link]('active');
// Special handling for home
if (sectionId === 'home') {
[Link]('features').[Link]('active');
// Scroll to top
[Link]({top: 0, behavior: 'smooth'});
}
// Avatar selection
let selectedAvatar = '';
let selectedOutfit = '';
function selectAvatar(type) {
selectedAvatar = type;
[Link]('.avatar-option').forEach(opt => {
[Link] = 'transparent';
});
[Link] = 'var(--dark-pink)';
// Show outfit selection
[Link]('.outfit-options').[Link] = 'flex';
function selectOutfit(type) {
selectedOutfit = type;
[Link]('.outfit').forEach(outfit => {
[Link] = 'var(--soft-pink)';
[Link] = 'var(--text-dark)';
});
[Link] = 'var(--dark-pink)';
[Link] = 'white';
function completeAvatar() {
if (!selectedAvatar || !selectedOutfit) {
alert('Pilih avatar dan outfit terlebih dahulu!');
return;
alert('Avatar berhasil dibuat! Selamat datang di dunia Karena Kita Semua Berharga!');
showSection('features');
// Mirror room affirmations
function addAffirmation(text) {
const coinBadge = [Link]('.coin-badge');
[Link] = '✓ 50 coin ditambahkan!';
[Link] = 'green';
[Link] = 'white';
// Update textarea
const textarea = [Link]('#mirror textarea');
[Link] = [Link] ? [Link] + '\n' + text : text;
// Animation
[Link] = 'scale(1.05)';
setTimeout(() => {
[Link] = 'scale(1)';
}, 300);
// Voice recording simulation
function startRecording() {
const btn = [Link];
[Link] = '<i class="fas fa-stop"></i>';
[Link] = 'red';
setTimeout(() => {
[Link] = '<i class="fas fa-microphone"></i>';
[Link] = 'var(--dark-pink)';
alert('Rekaman suara berhasil disimpan!');
}, 3000);
// Empathy button clicks
[Link]('.empathy-btn').forEach(btn => {
[Link]('click', function() {
const text = [Link];
const parts = [Link](' ');
if ([Link] > 1) {
const count = parseInt(parts[[Link] - 2]) || parseInt(parts[[Link] - 1]);
if (!isNaN(count)) {
[Link] = [Link](count, count + 1);
// Animation
[Link] = 'scale(1.1)';
setTimeout(() => {
[Link] = 'scale(1)';
}, 200);
});
});
// Initialize
[Link]('DOMContentLoaded', function() {
// Set current year in footer if needed
// Add any initialization code here
});
</script>
</body>
</html>