1133 lines
38 KiB
PHP
1133 lines
38 KiB
PHP
<x-app-layout>
|
|
<!-- Header Halaman -->
|
|
<x-slot name="header">
|
|
<div class="header-container-css">
|
|
<span class="icon-pulse-css">💙</span>
|
|
<h2 class="title-grad-css">Pusat Pembelajaran & Dashboard Isyarat</h2>
|
|
</div>
|
|
</x-slot>
|
|
|
|
<!-- STYLE LEMBARAN CSS UTUH (MURNI CUSTOM CSS - BEBAS DEPENDENSI TAILWIND) -->
|
|
<style>
|
|
/* 1. VARIABEL WARNA & TEMA PREMIUM */
|
|
:root {
|
|
--primary-blue: #0052cc;
|
|
--primary-glow: rgba(0, 82, 204, 0.15);
|
|
--neon-sky: #00b3ff;
|
|
--light-ice: #f2f7ff;
|
|
--clean-white: #ffffff;
|
|
--text-main: #1e293b;
|
|
--text-muted: #64748b;
|
|
--border-soft: #e2e8f0;
|
|
--card-shadow: 0 10px 30px rgba(0, 0, 0, 0.03);
|
|
--grad-banner: linear-gradient(135deg, #0f172a 0%, #1e3a8a 50%, #0052cc 100%);
|
|
--grad-accent: linear-gradient(135deg, #0052cc 0%, #00b3ff 100%);
|
|
}
|
|
|
|
/* 2. BASE CONTAINER & GRID LATAR BELAKANG */
|
|
.db-wrapper-css {
|
|
font-family: 'Inter', system-ui, -apple-system, sans-serif;
|
|
background-color: #f8fafc;
|
|
min-height: 100vh;
|
|
padding: 40px 20px;
|
|
position: relative;
|
|
overflow: hidden;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.db-container-css {
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 40px;
|
|
position: relative;
|
|
z-index: 10;
|
|
}
|
|
|
|
/* 3. GELEMBUNG LATAR BELAKANG MELAYANG (FLOATING BLOBS) */
|
|
.blob-css {
|
|
position: absolute;
|
|
border-radius: 50%;
|
|
filter: blur(80px);
|
|
pointer-events: none;
|
|
z-index: 1;
|
|
opacity: 0.25;
|
|
}
|
|
.blob-1 {
|
|
width: 400px;
|
|
height: 400px;
|
|
background-color: #93c5fd;
|
|
top: 5%;
|
|
left: -10%;
|
|
animation: float-slow 8s infinite ease-in-out;
|
|
}
|
|
.blob-2 {
|
|
width: 500px;
|
|
height: 500px;
|
|
background-color: #bae6fd;
|
|
bottom: 5%;
|
|
right: -10%;
|
|
animation: float-slow-rev 10s infinite ease-in-out;
|
|
}
|
|
|
|
/* 4. BANNER UTAMA (HERO SECTION) */
|
|
.hero-banner-css {
|
|
background: var(--grad-banner);
|
|
border-radius: 32px;
|
|
padding: 50px;
|
|
color: var(--clean-white);
|
|
position: relative;
|
|
overflow: hidden;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 40px;
|
|
border: 1px solid rgba(255, 255, 255, 0.08);
|
|
box-shadow: 0 20px 40px rgba(15, 23, 42, 0.15);
|
|
}
|
|
|
|
.hero-content-css {
|
|
max-width: 650px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
gap: 20px;
|
|
z-index: 5;
|
|
}
|
|
|
|
.badge-inklusif-css {
|
|
background: rgba(255, 255, 255, 0.12);
|
|
border: 1px solid rgba(255, 255, 255, 0.2);
|
|
padding: 8px 16px;
|
|
border-radius: 100px;
|
|
font-size: 11px;
|
|
font-weight: 800;
|
|
text-transform: uppercase;
|
|
letter-spacing: 1.5px;
|
|
color: #93c5fd;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
}
|
|
|
|
.badge-dot-css {
|
|
width: 8px;
|
|
height: 8px;
|
|
border-radius: 50%;
|
|
background-color: #38bdf8;
|
|
box-shadow: 0 0 10px #38bdf8;
|
|
animation: ping-pulse 1.5s infinite;
|
|
}
|
|
|
|
.hero-title-css {
|
|
font-size: 38px;
|
|
font-weight: 900;
|
|
line-height: 1.2;
|
|
margin: 0;
|
|
letter-spacing: -1px;
|
|
}
|
|
|
|
.hero-title-css span {
|
|
background: linear-gradient(to right, #93c5fd, #38bdf8, #ffffff);
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
}
|
|
|
|
.hero-desc-css {
|
|
font-size: 14px;
|
|
line-height: 1.6;
|
|
color: #cbd5e1;
|
|
margin: 0;
|
|
}
|
|
|
|
/* TOMBOL KANAN SEBAGAI PENGGANTI LOGO TANGAN */
|
|
.hero-right-btn-css {
|
|
background: var(--grad-accent);
|
|
color: var(--clean-white);
|
|
padding: 24px 32px;
|
|
border-radius: 24px;
|
|
text-decoration: none;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 24px;
|
|
width: 320px;
|
|
height: 140px;
|
|
box-sizing: border-box;
|
|
box-shadow: 0 15px 35px rgba(0, 82, 204, 0.25);
|
|
transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
|
|
z-index: 5;
|
|
cursor: pointer;
|
|
border: 1px solid rgba(255, 255, 255, 0.15);
|
|
}
|
|
|
|
.hero-right-btn-css:hover {
|
|
transform: translateY(-5px) scale(1.02);
|
|
box-shadow: 0 25px 45px rgba(0, 179, 255, 0.45);
|
|
border-color: rgba(255, 255, 255, 0.3);
|
|
}
|
|
|
|
.hero-btn-text-block {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 4px;
|
|
text-align: left;
|
|
}
|
|
|
|
.hero-btn-primary-text {
|
|
font-size: 16px;
|
|
font-weight: 900;
|
|
line-height: 1.25;
|
|
letter-spacing: -0.5px;
|
|
}
|
|
|
|
.hero-btn-sub-text {
|
|
font-size: 11px;
|
|
font-weight: 700;
|
|
opacity: 0.8;
|
|
letter-spacing: 0.5px;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.hero-btn-arrow {
|
|
font-size: 36px;
|
|
font-weight: 950;
|
|
line-height: 1;
|
|
transition: transform 0.3s ease;
|
|
}
|
|
|
|
.hero-right-btn-css:hover .hero-btn-arrow {
|
|
transform: translateX(8px);
|
|
}
|
|
|
|
/* 5. PAPAN QUEST HARIAN (GAMIFIED QUEST BOARD) */
|
|
.quest-board-css {
|
|
background: var(--clean-white);
|
|
border: 1px solid var(--border-soft);
|
|
border-radius: 32px;
|
|
padding: 30px;
|
|
box-shadow: var(--card-shadow);
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 24px;
|
|
}
|
|
|
|
.quest-header-css {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
flex-wrap: wrap;
|
|
gap: 16px;
|
|
border-bottom: 1px solid var(--light-ice);
|
|
padding-bottom: 20px;
|
|
}
|
|
|
|
.quest-title-block {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
}
|
|
|
|
.quest-title-block span {
|
|
font-size: 28px;
|
|
animation: bounce-slow 2s infinite ease-in-out;
|
|
}
|
|
|
|
.quest-title-block h4 {
|
|
font-size: 18px;
|
|
font-weight: 900;
|
|
margin: 0;
|
|
color: var(--text-main);
|
|
}
|
|
|
|
.quest-title-block p {
|
|
font-size: 11px;
|
|
color: var(--text-muted);
|
|
margin: 4px 0 0 0;
|
|
}
|
|
|
|
.quest-progress-css {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
background: var(--light-ice);
|
|
padding: 10px 20px;
|
|
border-radius: 16px;
|
|
border: 1px solid rgba(0, 82, 204, 0.08);
|
|
}
|
|
|
|
.quest-progress-label {
|
|
font-size: 11px;
|
|
font-weight: 800;
|
|
color: var(--primary-blue);
|
|
}
|
|
|
|
.progress-bar-bg {
|
|
width: 120px;
|
|
height: 10px;
|
|
background: #e2e8f0;
|
|
border-radius: 100px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.progress-bar-fill {
|
|
height: 100%;
|
|
background: var(--grad-accent);
|
|
border-radius: 100px;
|
|
width: 50%;
|
|
}
|
|
|
|
.progress-percent {
|
|
font-size: 11px;
|
|
font-weight: 900;
|
|
color: var(--primary-blue);
|
|
}
|
|
|
|
.quest-grid-css {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 16px;
|
|
}
|
|
|
|
.quest-card-css {
|
|
background: var(--light-ice);
|
|
border: 1px solid rgba(0, 82, 204, 0.04);
|
|
border-radius: 20px;
|
|
padding: 20px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.quest-card-css.active {
|
|
text-decoration: none;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.quest-card-css.active:hover {
|
|
border-color: var(--primary-blue);
|
|
background: var(--clean-white);
|
|
box-shadow: 0 10px 20px rgba(0, 82, 204, 0.05);
|
|
transform: translateY(-2px);
|
|
}
|
|
|
|
.quest-info-block {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 16px;
|
|
}
|
|
|
|
.quest-num-icon {
|
|
width: 38px;
|
|
height: 38px;
|
|
border-radius: 12px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 14px;
|
|
font-weight: 900;
|
|
}
|
|
|
|
.quest-num-icon.success {
|
|
background-color: #d1fae5;
|
|
color: #059669;
|
|
}
|
|
|
|
.quest-num-icon.pending {
|
|
background-color: #dbeafe;
|
|
color: var(--primary-blue);
|
|
}
|
|
|
|
.quest-text h5 {
|
|
font-size: 13px;
|
|
font-weight: 800;
|
|
margin: 0;
|
|
color: var(--text-main);
|
|
}
|
|
|
|
.quest-text p {
|
|
font-size: 10px;
|
|
color: var(--text-muted);
|
|
margin: 4px 0 0 0;
|
|
}
|
|
|
|
.quest-status-badge {
|
|
font-size: 9px;
|
|
font-weight: 900;
|
|
padding: 6px 12px;
|
|
border-radius: 8px;
|
|
letter-spacing: 0.5px;
|
|
}
|
|
|
|
.quest-status-badge.success {
|
|
background-color: #e6fbf1;
|
|
color: #059669;
|
|
}
|
|
|
|
.quest-status-badge.pending {
|
|
background: var(--primary-blue);
|
|
color: var(--clean-white);
|
|
box-shadow: 0 4px 10px rgba(0, 82, 204, 0.2);
|
|
}
|
|
|
|
/* 6. KELAS UTAMA PENGENALAN BISINDO */
|
|
.edu-section-title-css {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
.edu-section-title-css h4 {
|
|
font-size: 18px;
|
|
font-weight: 900;
|
|
margin: 0;
|
|
color: var(--text-main);
|
|
}
|
|
|
|
.edu-section-title-css p {
|
|
font-size: 11px;
|
|
color: var(--text-muted);
|
|
margin: 4px 0 0 0;
|
|
}
|
|
|
|
.edu-card-css {
|
|
display: block;
|
|
text-decoration: none;
|
|
background: var(--clean-white);
|
|
border: 1px solid var(--border-soft);
|
|
border-radius: 35px;
|
|
padding: 40px;
|
|
position: relative;
|
|
overflow: hidden;
|
|
transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
|
|
box-shadow: 0 15px 35px rgba(0, 82, 204, 0.05);
|
|
}
|
|
|
|
.edu-card-css:hover {
|
|
border-color: var(--primary-blue);
|
|
transform: translateY(-8px);
|
|
box-shadow: 0 35px 70px -15px rgba(0, 82, 204, 0.18);
|
|
}
|
|
|
|
.edu-card-layout {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 30px;
|
|
position: relative;
|
|
z-index: 5;
|
|
}
|
|
|
|
.edu-left-block {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 24px;
|
|
}
|
|
|
|
.edu-wave-icon-css {
|
|
width: 80px;
|
|
height: 80px;
|
|
background: var(--light-ice);
|
|
color: var(--primary-blue);
|
|
border-radius: 24px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 40px;
|
|
box-shadow: inset 0 -4px 10px rgba(0, 82, 204, 0.05);
|
|
transition: all 0.4s ease;
|
|
}
|
|
|
|
.edu-card-css:hover .edu-wave-icon-css {
|
|
background: var(--grad-accent);
|
|
color: var(--clean-white);
|
|
transform: scale(1.05);
|
|
}
|
|
|
|
.edu-text-block {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 8px;
|
|
}
|
|
|
|
.edu-tag-group-css {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
}
|
|
|
|
.edu-card-title {
|
|
font-size: 22px;
|
|
font-weight: 900;
|
|
color: var(--text-main);
|
|
margin: 0;
|
|
transition: color 0.3s ease;
|
|
}
|
|
|
|
.edu-card-css:hover .edu-card-title {
|
|
color: var(--primary-blue);
|
|
}
|
|
|
|
.edu-tag-badge {
|
|
font-size: 9px;
|
|
font-weight: 900;
|
|
text-transform: uppercase;
|
|
padding: 4px 10px;
|
|
background-color: var(--light-ice);
|
|
color: var(--primary-blue);
|
|
border-radius: 100px;
|
|
border: 1px solid rgba(0, 82, 204, 0.1);
|
|
}
|
|
|
|
.edu-card-css:hover .edu-tag-badge {
|
|
background-color: var(--primary-blue);
|
|
color: var(--clean-white);
|
|
border-color: var(--primary-blue);
|
|
}
|
|
|
|
.edu-desc-css {
|
|
font-size: 13px;
|
|
line-height: 1.6;
|
|
color: var(--text-muted);
|
|
margin: 0;
|
|
max-width: 600px;
|
|
}
|
|
|
|
.edu-features-css {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 20px;
|
|
font-size: 11px;
|
|
font-weight: 800;
|
|
color: #94a3b8;
|
|
}
|
|
|
|
.edu-features-css span span {
|
|
color: #10b981;
|
|
margin-right: 4px;
|
|
}
|
|
|
|
.edu-trigger-btn-css {
|
|
background: var(--light-ice);
|
|
border: 1px solid rgba(0, 82, 204, 0.1);
|
|
color: var(--primary-blue);
|
|
font-weight: 900;
|
|
font-size: 11px;
|
|
padding: 16px 28px;
|
|
border-radius: 18px;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.edu-card-css:hover .edu-trigger-btn-css {
|
|
background: var(--grad-accent);
|
|
color: var(--clean-white);
|
|
border-color: var(--primary-blue);
|
|
box-shadow: 0 10px 20px rgba(0, 179, 255, 0.25);
|
|
}
|
|
|
|
.edu-trigger-btn-css svg {
|
|
width: 14px;
|
|
height: 14px;
|
|
transition: transform 0.3s ease;
|
|
}
|
|
|
|
.edu-card-css:hover .edu-trigger-btn-css svg {
|
|
transform: translateX(3px);
|
|
}
|
|
|
|
/* 7. ROW KOMUNITAS & MEDIA PEMBELAJARAN (GRID 2 COLUMN) */
|
|
.row-grid-css {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 30px;
|
|
}
|
|
|
|
.col-card-css {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 20px;
|
|
}
|
|
|
|
.section-header-row-css {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
}
|
|
|
|
.section-header-row-css h4 {
|
|
font-size: 16px;
|
|
font-weight: 900;
|
|
color: var(--text-main);
|
|
margin: 0;
|
|
}
|
|
|
|
.section-header-row-css p {
|
|
font-size: 11px;
|
|
color: var(--text-muted);
|
|
margin: 4px 0 0 0;
|
|
}
|
|
|
|
.com-card-css {
|
|
background: var(--clean-white);
|
|
border: 1px solid var(--border-soft);
|
|
border-radius: 28px;
|
|
padding: 24px;
|
|
display: flex;
|
|
gap: 20px;
|
|
box-shadow: var(--card-shadow);
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.com-card-css.indigo-border {
|
|
border-left: 8px solid var(--primary-blue);
|
|
}
|
|
|
|
.com-card-css.emerald-border {
|
|
border-left: 8px solid #10b981;
|
|
}
|
|
|
|
.com-card-css:hover {
|
|
transform: translateY(-4px);
|
|
box-shadow: 0 15px 30px rgba(0, 82, 204, 0.08);
|
|
}
|
|
|
|
.com-icon-css {
|
|
width: 56px;
|
|
height: 56px;
|
|
border-radius: 16px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 24px;
|
|
transition: transform 0.3s ease;
|
|
}
|
|
|
|
.com-card-css:hover .com-icon-css {
|
|
transform: scale(1.1);
|
|
}
|
|
|
|
.com-icon-css.blue-bg {
|
|
background-color: #eff6ff;
|
|
color: #2563eb;
|
|
}
|
|
|
|
.com-icon-css.green-bg {
|
|
background-color: #ecfdf5;
|
|
color: #10b981;
|
|
}
|
|
|
|
.com-info h5 {
|
|
font-size: 15px;
|
|
font-weight: 900;
|
|
color: var(--text-main);
|
|
margin: 0;
|
|
}
|
|
|
|
.com-info span {
|
|
font-size: 10px;
|
|
font-weight: 800;
|
|
text-transform: uppercase;
|
|
color: var(--primary-blue);
|
|
margin-top: 4px;
|
|
display: inline-block;
|
|
}
|
|
|
|
.com-info span.green-txt {
|
|
color: #10b981;
|
|
}
|
|
|
|
.com-info p {
|
|
font-size: 12px;
|
|
line-height: 1.6;
|
|
color: var(--text-muted);
|
|
margin: 10px 0 0 0;
|
|
}
|
|
|
|
/* 8. BADGE LIST MEDIA SOSIAL */
|
|
.social-list-css {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 14px;
|
|
}
|
|
|
|
.social-link-card-css {
|
|
display: block;
|
|
text-decoration: none;
|
|
background: var(--clean-white);
|
|
border: 1px solid var(--border-soft);
|
|
border-radius: 20px;
|
|
padding: 16px 20px;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.social-link-card-css:hover {
|
|
border-color: #bfdbfe;
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 10px 20px rgba(0, 82, 204, 0.04);
|
|
}
|
|
|
|
.social-layout {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.social-left {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 16px;
|
|
}
|
|
|
|
.social-icon-box {
|
|
width: 44px;
|
|
height: 44px;
|
|
border-radius: 12px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 20px;
|
|
transition: transform 0.3s ease;
|
|
}
|
|
|
|
.social-link-card-css:hover .social-icon-box {
|
|
transform: scale(1.1);
|
|
}
|
|
|
|
.social-icon-box.rose-bg { background-color: #fff1f2; color: #f43f5e; }
|
|
.social-icon-box.blue-bg { background-color: #eff6ff; color: #2563eb; }
|
|
.social-icon-box.red-bg { background-color: #fef2f2; color: #ef4444; }
|
|
|
|
.social-text h5 {
|
|
font-size: 13px;
|
|
font-weight: 800;
|
|
color: var(--text-main);
|
|
margin: 0;
|
|
transition: color 0.3s ease;
|
|
}
|
|
|
|
.social-link-card-css:hover .social-text h5 {
|
|
color: var(--primary-blue);
|
|
}
|
|
|
|
.social-text p {
|
|
font-size: 10px;
|
|
color: var(--text-muted);
|
|
margin: 2px 0 0 0;
|
|
}
|
|
|
|
.social-arrow-link {
|
|
font-size: 11px;
|
|
font-weight: 800;
|
|
color: #cbd5e1;
|
|
transition: color 0.3s ease;
|
|
}
|
|
|
|
.social-link-card-css:hover .social-arrow-link {
|
|
color: var(--primary-blue);
|
|
}
|
|
|
|
/* 9. GELEMBUNG TRIVIA BUDAYA TULI */
|
|
.trivia-bubble-css {
|
|
background: linear-gradient(135deg, rgba(0, 82, 204, 0.04) 0%, rgba(0, 179, 255, 0.04) 100%);
|
|
border: 1px solid rgba(0, 82, 204, 0.1);
|
|
border-radius: 24px;
|
|
padding: 24px;
|
|
box-shadow: inset 0 2px 4px rgba(255, 255, 255, 0.5);
|
|
}
|
|
|
|
.trivia-title-css {
|
|
font-size: 13px;
|
|
font-weight: 900;
|
|
color: #0f172a;
|
|
margin: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
}
|
|
|
|
.trivia-title-css span {
|
|
font-size: 18px;
|
|
}
|
|
|
|
.trivia-desc-css {
|
|
font-size: 11px;
|
|
line-height: 1.6;
|
|
color: #475569;
|
|
margin: 10px 0 0 0;
|
|
}
|
|
|
|
/* 10. ANIMASI KEYFRAMES */
|
|
@keyframes float-slow {
|
|
0%, 100% { transform: translateY(0) scale(1); }
|
|
50% { transform: translateY(-20px) scale(1.05); }
|
|
}
|
|
@keyframes float-slow-rev {
|
|
0%, 100% { transform: translateY(0) scale(1); }
|
|
50% { transform: translateY(20px) scale(0.95); }
|
|
}
|
|
@keyframes bounce-slow {
|
|
0%, 100% { transform: translateY(0); }
|
|
50% { transform: translateY(-6px); }
|
|
}
|
|
@keyframes ping-pulse {
|
|
0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(56, 189, 248, 0.7); }
|
|
70% { transform: scale(1); box-shadow: 0 0 0 10px rgba(56, 189, 248, 0); }
|
|
100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(56, 189, 248, 0); }
|
|
}
|
|
|
|
/* 11. MEDIA QUERIES (RESPONSIF HP) */
|
|
@media (max-width: 1024px) {
|
|
.hero-banner-css { padding: 40px; }
|
|
.hero-title-css { font-size: 32px; }
|
|
.row-grid-css { grid-template-columns: 1fr; gap: 40px; }
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.db-wrapper-css { padding: 20px 10px; }
|
|
.hero-banner-css { padding: 30px 20px; flex-direction: column; text-align: center; justify-content: center; gap: 30px; }
|
|
.hero-content-css { align-items: center; text-align: center; }
|
|
.hero-title-css { font-size: 26px; }
|
|
.hero-right-btn-css { width: 100%; justify-content: center; height: auto; padding: 20px; }
|
|
.quest-grid-css { grid-template-columns: 1fr; }
|
|
.edu-card-css { padding: 24px; }
|
|
.edu-card-layout { flex-direction: column; text-align: center; }
|
|
.edu-left-block { flex-direction: column; }
|
|
.edu-wave-icon-css { width: 70px; height: 70px; font-size: 32px; }
|
|
.edu-trigger-btn-css { width: 100%; justify-content: center; }
|
|
.com-card-css { flex-direction: column; text-align: center; align-items: center; }
|
|
}
|
|
|
|
/* Override Header Laragon */
|
|
.header-container-css {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
}
|
|
.icon-pulse-css {
|
|
font-size: 24px;
|
|
animation: bounce-slow 2s infinite ease-in-out;
|
|
}
|
|
.title-grad-css {
|
|
font-size: 20px;
|
|
font-weight: 900;
|
|
background: linear-gradient(to right, var(--primary-blue), var(--neon-sky));
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
margin: 0;
|
|
letter-spacing: -0.5px;
|
|
}
|
|
</style>
|
|
|
|
<!-- WRAPPER UTAMA DENGAN GELEMBUNG LATAR BELAKANG CSS -->
|
|
<div class="db-wrapper-css">
|
|
<!-- Blobs Background -->
|
|
<div class="blob-css blob-1"></div>
|
|
<div class="blob-css blob-2"></div>
|
|
|
|
<div class="db-container-css">
|
|
|
|
<!-- 1. HERO BANNER (ROYAL BLUE NEON WELCOME DENGAN TOMBOL DI KANAN SESUAI image_597e3d.jpg) -->
|
|
<div class="hero-banner-css">
|
|
<div class="hero-content-css">
|
|
<span class="badge-inklusif-css">
|
|
<span class="badge-dot-css"></span>
|
|
Ruang Inklusif Teman Tuli
|
|
</span>
|
|
<h3 class="hero-title-css">
|
|
Selamat Datang, <br>
|
|
<span>{{ auth()->user()->name }}</span>!
|
|
</h3>
|
|
<p class="hero-desc-css font-medium">
|
|
<p class="hero-desc-css font-medium">
|
|
Mari asah kemampuan bahasa isyaratmu melalui katalog interaktif dan hubungkan dirimu dengan komunitas inklusif di seluruh Indonesia.
|
|
</p>
|
|
|
|
<p class="hero-desc-css font-medium mt-2">
|
|
<em>Informasi Sistem: Saat ini deteksi huruf 'J' masih menggunakan gambar statis dan belum mendukung gerakan tangan yang dinamis. Mohon maaf jika masih ada kekurangan atau kesalahan dalam hasil prediksi maupun aspek lain dari website ini.</em>
|
|
</p>
|
|
</div>
|
|
|
|
<!-- TOMBOL CAPSLOCK BOLA NEON DI KANAN SEBAGAI PENGGANTI LOGO TANGAN -->
|
|
<a href="{{ route('translate.index') }}" class="hero-right-btn-css">
|
|
<div class="hero-btn-text-block">
|
|
<span class="hero-btn-primary-text">Coba Kamera<br>Belajar Isyarat</span>
|
|
<span class="hero-btn-sub-text">Mulai Deteksi ➔</span>
|
|
</div>
|
|
<span class="hero-btn-arrow">➔</span>
|
|
</a>
|
|
</div>
|
|
|
|
{{--
|
|
@if(auth()->user()->role !== 'admin')
|
|
<div class="quest-board-css">
|
|
<div class="quest-header-css">
|
|
<div class="quest-title-block">
|
|
<span>🏆</span>
|
|
<div>
|
|
<h4>Misi Harian Belajar Isyarat</h4>
|
|
<p>Selesaikan petualangan belajarmu hari ini.</p>
|
|
</div>
|
|
</div>
|
|
<div class="quest-progress-css">
|
|
<span class="quest-progress-label">Progress:</span>
|
|
<div class="progress-bar-bg">
|
|
<div class="progress-bar-fill" id="progress-fill-bar" style="width: 50%;"></div>
|
|
</div>
|
|
<span class="progress-percent" id="quest-progress-percent">50%</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="quest-grid-css">
|
|
<!-- Quest 1 (Selesai) -->
|
|
<div class="quest-card-css">
|
|
<div class="quest-info-block">
|
|
<div class="quest-num-icon success">✓</div>
|
|
<div class="quest-text">
|
|
<h5>Masuk Dashboard</h5>
|
|
<p class="font-medium">Gerbang inklusif terbuka</p>
|
|
</div>
|
|
</div>
|
|
<span class="quest-status-badge success">Selesai</span>
|
|
</div>
|
|
|
|
<!-- Quest 2 (Belum) -->
|
|
<a href="{{ route('translate.index') }}" id="quest-2-card" class="quest-card-css active" style="text-decoration: none;">
|
|
<div class="quest-info-block">
|
|
<div id="quest-2-icon" class="quest-num-icon pending">2</div>
|
|
<div class="quest-text">
|
|
<h5>Coba 1x Deteksi Kamera</h5>
|
|
<p class="font-medium">Nyalakan kamera penerjemah</p>
|
|
</div>
|
|
</div>
|
|
<span id="quest-2-badge" class="quest-status-badge pending">Mulai ➔</span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
@endif
|
|
--}}
|
|
|
|
<!-- 3. PENGENALAN & EDUKASI UTAMA (PREMIUM BLUE CARD) -->
|
|
<div class="col-card-css">
|
|
<div class="edu-section-title-css">
|
|
<span class="icon-pulse-css">✨</span>
|
|
<div>
|
|
<h4>Pengenalan & Edukasi Bahasa Isyarat</h4>
|
|
<p>Kenali bahasa isyarat visual (BISINDO) sebagai jembatan komunikasi inklusif yang penuh ekspresi.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<a href="{{ route('gesture.index') }}" class="edu-card-css glow-blue">
|
|
<div class="edu-card-layout">
|
|
<div class="edu-left-block">
|
|
<div class="edu-wave-icon-css">
|
|
<span class="animate-wave">🖐️</span>
|
|
</div>
|
|
<div class="edu-text-block">
|
|
<div class="edu-tag-group-css">
|
|
<h5 class="edu-card-title">Belajar Dasar Isyarat BISINDO</h5>
|
|
<span class="edu-tag-badge">Terpopuler</span>
|
|
</div>
|
|
<p class="edu-desc-css font-medium">
|
|
Bahasa Isyarat Indonesia (BISINDO) adalah bahasa alami yang digunakan oleh komunitas Tuli di Indonesia. Mulailah petualangan belajarmu dengan memahami visualisasi abjad isyarat A sampai Z di sini.
|
|
</p>
|
|
<div class="edu-features-css">
|
|
<span><span>✔</span> Praktis & Visual</span>
|
|
<span><span>✔</span> Standar Komunitas Indonesia</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<span class="edu-trigger-btn-css">
|
|
<span>Mulai Belajar</span>
|
|
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M14 5l7 7m0 0l-7 7m7-7H3"></path>
|
|
</svg>
|
|
</span>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
|
|
<!-- GELEMBUNG TRIVIA BUDAYA TULI (MEMANJANG KESAMPING SECARA PREMIUM) -->
|
|
<div class="trivia-bubble-css">
|
|
<h5 class="trivia-title-css">
|
|
<span class="animate-shake">💡</span> Budaya Tuli: Tuli vs Tunarungu?
|
|
</h5>
|
|
<p class="trivia-desc-css font-medium">
|
|
Komunitas Tuli lebih menyukai identitas panggilan <strong>"Tuli"</strong> karena dianggap sebagai jati diri budaya dan kebanggaan bahasa sendiri, dibanding istilah medis "Tunarungu" yang mengesankan suatu kekurangan fisik.
|
|
</p>
|
|
</div>
|
|
|
|
<!-- 4. KOMUNITAS & MEDIA PEMBELAJARAN (ROW GRID) -->
|
|
<div class="row-grid-css">
|
|
<!-- Sisi Kiri: Komunitas Resmi -->
|
|
<div class="col-card-css">
|
|
<div class="section-header-row-css">
|
|
<span class="text-xl">🌐</span>
|
|
<div>
|
|
<h4>Komunitas Edukasi & Inklusi</h4>
|
|
<p>Asosiasi resmi yang memperjuangkan kesetaraan Teman Tuli.</p>
|
|
</div>
|
|
@if(auth()->user()->role === 'admin')
|
|
<button type="button" onclick="openModal('{{ route('admin.community.store') }}', 'community')"
|
|
style="margin-left: auto; background: var(--primary-blue); color: white; padding: 5px 10px; border-radius: 5px; font-size: 12px; border:none; cursor:pointer;">
|
|
+ Tambah
|
|
</button>
|
|
@endif
|
|
</div>
|
|
|
|
<!-- LOOPING DATA DARI DATABASE -->
|
|
@foreach($communities as $comm)
|
|
<div class="com-card-css {{ $loop->iteration % 2 == 0 ? 'emerald-border' : 'indigo-border' }}">
|
|
<div class="com-icon-css {{ $loop->iteration % 2 == 0 ? 'green-bg' : 'blue-bg' }}">🏛️</div>
|
|
<div class="com-info">
|
|
<h5>{{ $comm->name }}</h5>
|
|
<span class="{{ $loop->iteration % 2 == 0 ? 'green-txt' : '' }}">{{ $comm->sub_judul }}</span>
|
|
<p class="font-medium">{{ $comm->deskripsi }}</p>
|
|
</div>
|
|
</div>
|
|
@endforeach
|
|
</div>
|
|
|
|
<!-- Sisi Kanan: Media Pembelajaran -->
|
|
<div class="col-card-css">
|
|
<div class="section-header-row-css">
|
|
<span class="text-xl">📱</span>
|
|
<div>
|
|
<h4>Media Sosial & Belajar Online</h4>
|
|
<p>Platform digital populer untuk belajar bahasa isyarat.</p>
|
|
</div>
|
|
@if(auth()->user()->role === 'admin')
|
|
<button type="button" onclick="openModal('{{ route('admin.social.store') }}', 'social')"
|
|
style="margin-left: auto; background: var(--primary-blue); color: white; padding: 5px 10px; border-radius: 5px; font-size: 12px; border:none; cursor:pointer;">
|
|
+ Tambah
|
|
</button>
|
|
@endif
|
|
</div>
|
|
|
|
<div class="social-list-css">
|
|
@foreach($socials as $soc)
|
|
<a href="{{ $soc->link }}" target="_blank" class="social-link-card-css">
|
|
<div class="social-layout">
|
|
<div class="social-left">
|
|
<!-- Logika Ikon Otomatis -->
|
|
<div class="social-icon-box {{ str_contains(strtolower($soc->platform), 'instagram') ? 'rose-bg' : 'blue-bg' }}">
|
|
{{ str_contains(strtolower($soc->platform), 'instagram') ? '📸' : '🔗' }}
|
|
</div>
|
|
|
|
<div class="social-text">
|
|
<h5>{{ $soc->platform }}</h5>
|
|
<p>{{ $soc->deskripsi }}</p>
|
|
</div>
|
|
</div>
|
|
<span class="social-arrow-link">Buka ↗</span>
|
|
</div>
|
|
</a>
|
|
@endforeach
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Modal Template -->
|
|
<div id="addModal" style="display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.5); z-index:9999; justify-content:center; align-items:center;">
|
|
<div style="background:white; padding:30px; border-radius:15px; width:400px; box-shadow:0 10px 25px rgba(0,0,0,0.2);">
|
|
<h3 id="modalTitle" style="margin-bottom:20px; color:#1e293b;">Tambah Data</h3>
|
|
<form id="modalForm" action="" method="POST">
|
|
@csrf
|
|
<input type="text" id="inputJudul" name="name" placeholder="Nama" required style="width:100%; padding:10px; margin-bottom:10px; border:1px solid #ddd; border-radius:8px;">
|
|
<input type="text" id="inputSubJudul" name="sub_judul" placeholder="Sub Judul" required style="width:100%; padding:10px; margin-bottom:10px; border:1px solid #ddd; border-radius:8px;">
|
|
<textarea id="inputDeskripsi" name="deskripsi" placeholder="Deskripsi" required style="width:100%; padding:10px; margin-bottom:10px; border:1px solid #ddd; border-radius:8px;"></textarea>
|
|
<input type="url" id="inputLink" name="link" placeholder="Link URL" required style="width:100%; padding:10px; margin-bottom:20px; border:1px solid #ddd; border-radius:8px;">
|
|
<div style="display:flex; gap:10px;">
|
|
<button type="submit" style="flex:1; padding:10px; background:#2563eb; color:white; border:none; border-radius:8px; cursor:pointer;">Simpan</button>
|
|
<button type="button" onclick="closeModal()" style="flex:1; padding:10px; background:#e2e8f0; color:#475569; border:none; border-radius:8px; cursor:pointer;">Batal</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
window.addEventListener('DOMContentLoaded', () => {
|
|
const savedDate = localStorage.getItem('mission_date');
|
|
const today = new Date().toDateString();
|
|
|
|
// Jika sudah berganti hari, reset penyimpanan
|
|
if (savedDate !== today) {
|
|
localStorage.removeItem('mission_detected_done');
|
|
localStorage.setItem('mission_date', today);
|
|
}
|
|
// Jika di hari yang sama dan misi sudah sukses dideteksi sebelumnya
|
|
else if (localStorage.getItem('mission_detected_done') === 'true') {
|
|
// 1. Ubah ikon nomor 2 jadi centang hijau
|
|
const iconEl = document.getElementById('quest-2-icon');
|
|
if (iconEl) {
|
|
iconEl.className = "quest-num-icon success";
|
|
iconEl.innerHTML = "✓";
|
|
}
|
|
|
|
// 2. Ubah badge jadi Selesai
|
|
const badgeEl = document.getElementById('quest-2-badge');
|
|
if (badgeEl) {
|
|
badgeEl.className = "quest-status-badge success";
|
|
badgeEl.innerHTML = "Selesai";
|
|
}
|
|
|
|
// 3. Ubah card jadi tidak aktif
|
|
const cardEl = document.getElementById('quest-2-card');
|
|
if (cardEl) {
|
|
cardEl.classList.remove('active');
|
|
}
|
|
|
|
// 4. Ubah teks persen jadi 100%
|
|
const progressText = document.getElementById('quest-progress-percent');
|
|
if (progressText) {
|
|
progressText.innerHTML = "100%";
|
|
}
|
|
|
|
// 5. Ubah lebar progress bar jadi penuh (100%)
|
|
const progressBarFill = document.getElementById('progress-fill-bar');
|
|
if (progressBarFill) {
|
|
progressBarFill.style.width = "100%";
|
|
progressBarFill.style.backgroundColor = "#22c55e";
|
|
}
|
|
}
|
|
});
|
|
|
|
function openModal(route, type) {
|
|
document.getElementById('modalForm').reset();
|
|
document.getElementById('modalForm').action = route;
|
|
document.getElementById('addModal').style.display = 'flex';
|
|
|
|
// Di dalam if(type === 'social') pada bagian script openModal:
|
|
if(type === 'social') {
|
|
modalTitle.innerText = "Tambah Media Sosial";
|
|
document.getElementById('inputJudul').placeholder = "Nama Platform";
|
|
|
|
// Tampilkan deskripsi untuk sosmed
|
|
document.getElementById('inputSubJudul').style.display = 'none';
|
|
document.getElementById('inputSubJudul').disabled = true;
|
|
|
|
document.getElementById('inputDeskripsi').style.display = 'block';
|
|
document.getElementById('inputDeskripsi').disabled = false;
|
|
|
|
document.getElementById('inputLink').style.display = 'block';
|
|
document.getElementById('inputLink').disabled = false;
|
|
} else {
|
|
document.getElementById('modalTitle').innerText = "Tambah Komunitas";
|
|
document.getElementById('inputJudul').placeholder = "Nama Komunitas";
|
|
document.getElementById('inputSubJudul').style.display = 'block'; document.getElementById('inputSubJudul').disabled = false;
|
|
document.getElementById('inputDeskripsi').style.display = 'block'; document.getElementById('inputDeskripsi').disabled = false;
|
|
document.getElementById('inputLink').style.display = 'none'; document.getElementById('inputLink').disabled = true;
|
|
}
|
|
}
|
|
|
|
function closeModal() {
|
|
document.getElementById('addModal').style.display = 'none';
|
|
}
|
|
</script>
|
|
</x-app-layout> |