Spaces:
Paused
Paused
| <html lang="th" data-theme="light"> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> | |
| <meta name="description" content="TLC CareChurch OS — ระบบจัดการคริสตจักรอัจฉริยะ" /> | |
| <meta name="theme-color" content="#0A1628" media="(prefers-color-scheme: dark)" /> | |
| <meta name="theme-color" content="#ffffff" media="(prefers-color-scheme: light)" /> | |
| <link rel="preconnect" href="https://fonts.googleapis.com" /> | |
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin /> | |
| <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+Thai:wght@300;400;500;600;700;800;900&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap" rel="stylesheet" /> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" /> | |
| <title>TLC CareChurch OS</title> | |
| <style> | |
| :root { | |
| --primary: #00C853; | |
| --primary-light: #00E676; | |
| --primary-dark: #009624; | |
| --primary-glow: rgba(0,200,83,0.4); | |
| --accent: #00BFA5; | |
| --accent-light: #64FFDA; | |
| --danger: #FF1744; | |
| --warning: #FFAB00; | |
| --info: #2979FF; | |
| --bg: #F0F4F8; | |
| --bg-card: #FFFFFF; | |
| --bg-elevated: #FFFFFF; | |
| --bg-glass: rgba(255,255,255,0.72); | |
| --text-primary: #0A1628; | |
| --text-secondary: #4A5568; | |
| --text-tertiary: #718096; | |
| --text-inverse: #FFFFFF; | |
| --border: #E2E8F0; | |
| --border-light: #EDF2F7; | |
| --shadow-sm: 0 1px 3px rgba(0,0,0,0.06); | |
| --shadow-md: 0 4px 16px rgba(0,0,0,0.08); | |
| --shadow-lg: 0 12px 40px rgba(0,0,0,0.12); | |
| --shadow-glow: 0 0 40px rgba(0,200,83,0.25); | |
| --radius-sm: 10px; | |
| --radius-md: 16px; | |
| --radius-lg: 24px; | |
| --radius-xl: 32px; | |
| --font: "Noto Sans Thai", "Plus Jakarta Sans", system-ui, -apple-system, sans-serif; | |
| --font-display: "Plus Jakarta Sans", "Noto Sans Thai", system-ui, sans-serif; | |
| --transition-fast: 0.15s cubic-bezier(0.4,0,0.2,1); | |
| --transition-base: 0.3s cubic-bezier(0.4,0,0.2,1); | |
| --transition-slow: 0.5s cubic-bezier(0.4,0,0.2,1); | |
| } | |
| [data-theme="dark"] { | |
| --bg: #0A1628; | |
| --bg-card: rgba(16,30,55,0.6); | |
| --bg-elevated: rgba(24,45,80,0.8); | |
| --bg-glass: rgba(16,30,55,0.55); | |
| --text-primary: #F0F4F8; | |
| --text-secondary: #A0AEC0; | |
| --text-tertiary: #718096; | |
| --border: rgba(255,255,255,0.08); | |
| --border-light: rgba(255,255,255,0.04); | |
| --shadow-sm: 0 1px 3px rgba(0,0,0,0.3); | |
| --shadow-md: 0 4px 16px rgba(0,0,0,0.4); | |
| --shadow-lg: 0 12px 40px rgba(0,0,0,0.5); | |
| } | |
| *, *::before, *::after { | |
| box-sizing: border-box; | |
| -webkit-tap-highlight-color: transparent; | |
| } | |
| html, body { | |
| height: 100%; margin: 0; overflow: hidden; | |
| font-family: var(--font); | |
| background: var(--bg); | |
| color: var(--text-primary); | |
| transition: background var(--transition-base), color var(--transition-base); | |
| } | |
| body::before { | |
| content: ""; | |
| position: fixed; inset: 0; | |
| background: | |
| radial-gradient(ellipse at 20% 10%, rgba(0,200,83,0.08) 0%, transparent 50%), | |
| radial-gradient(ellipse at 80% 80%, rgba(0,191,165,0.06) 0%, transparent 50%); | |
| pointer-events: none; | |
| z-index: 0; | |
| transition: opacity var(--transition-base); | |
| } | |
| [data-theme="dark"] body::before { | |
| background: | |
| radial-gradient(ellipse at 20% 10%, rgba(0,200,83,0.12) 0%, transparent 40%), | |
| radial-gradient(ellipse at 80% 80%, rgba(0,191,165,0.08) 0%, transparent 40%); | |
| } | |
| #app-root { | |
| position: fixed; inset: 0; | |
| display: flex; justify-content: center; | |
| z-index: 1; | |
| } | |
| .phone-frame { | |
| width: 100%; max-width: 430px; | |
| height: 100%; | |
| display: flex; flex-direction: column; | |
| position: relative; | |
| background: var(--bg); | |
| overflow: hidden; | |
| transition: background var(--transition-base); | |
| } | |
| @media (min-width: 431px) { | |
| .phone-frame { | |
| height: calc(100% - 24px); | |
| max-height: 900px; | |
| margin-top: 12px; | |
| border-radius: var(--radius-xl); | |
| box-shadow: | |
| 0 0 0 1px var(--border), | |
| 0 25px 80px rgba(0,0,0,0.15), | |
| 0 0 0 8px var(--bg); | |
| } | |
| } | |
| .screen-container { | |
| flex: 1; | |
| overflow-y: auto; | |
| overflow-x: hidden; | |
| position: relative; | |
| scroll-behavior: smooth; | |
| } | |
| .screen-container::-webkit-scrollbar { display: none; } | |
| .screen-container { scrollbar-width: none; -ms-overflow-style: none; } | |
| /* === ANIMATIONS === */ | |
| @keyframes fadeInUp { | |
| from { opacity: 0; transform: translateY(24px); } | |
| to { opacity: 1; transform: translateY(0); } | |
| } | |
| @keyframes fadeIn { | |
| from { opacity: 0; } | |
| to { opacity: 1; } | |
| } | |
| @keyframes scaleIn { | |
| from { opacity: 0; transform: scale(0.92); } | |
| to { opacity: 1; transform: scale(1); } | |
| } | |
| @keyframes slideInRight { | |
| from { opacity: 0; transform: translateX(40px); } | |
| to { opacity: 1; transform: translateX(0); } | |
| } | |
| @keyframes pulse-glow { | |
| 0%, 100% { box-shadow: 0 0 0 0 var(--primary-glow); } | |
| 50% { box-shadow: 0 0 0 12px transparent; } | |
| } | |
| @keyframes shimmer { | |
| 0% { background-position: -200% 0; } | |
| 100% { background-position: 200% 0; } | |
| } | |
| @keyframes float { | |
| 0%, 100% { transform: translateY(0); } | |
| 50% { transform: translateY(-6px); } | |
| } | |
| @keyframes breathe { | |
| 0%, 100% { opacity: 0.6; } | |
| 50% { opacity: 1; } | |
| } | |
| @keyframes spin-slow { | |
| from { transform: rotate(0deg); } | |
| to { transform: rotate(360deg); } | |
| } | |
| .anim-fade-up { | |
| animation: fadeInUp 0.5s cubic-bezier(0.22,1,0.36,1) forwards; | |
| opacity: 0; | |
| } | |
| .anim-d1 { animation-delay: 0.05s; } | |
| .anim-d2 { animation-delay: 0.1s; } | |
| .anim-d3 { animation-delay: 0.15s; } | |
| .anim-d4 { animation-delay: 0.2s; } | |
| .anim-d5 { animation-delay: 0.25s; } | |
| .anim-d6 { animation-delay: 0.3s; } | |
| .anim-scale-in { | |
| animation: scaleIn 0.4s cubic-bezier(0.22,1,0.36,1) forwards; | |
| } | |
| .anim-slide-right { | |
| animation: slideInRight 0.4s cubic-bezier(0.22,1,0.36,1) forwards; | |
| } | |
| /* === GLASSMORPHISM === */ | |
| .glass { | |
| background: var(--bg-glass); | |
| backdrop-filter: blur(20px) saturate(1.8); | |
| -webkit-backdrop-filter: blur(20px) saturate(1.8); | |
| border: 1px solid rgba(255,255,255,0.15); | |
| } | |
| [data-theme="dark"] .glass { | |
| border: 1px solid rgba(255,255,255,0.08); | |
| } | |
| .glass-strong { | |
| background: var(--bg-glass); | |
| backdrop-filter: blur(40px) saturate(2); | |
| -webkit-backdrop-filter: blur(40px) saturate(2); | |
| border: 1px solid rgba(255,255,255,0.2); | |
| } | |
| /* === SCREEN MANAGEMENT === */ | |
| .screen { | |
| display: none; | |
| min-height: 100%; | |
| padding-bottom: 100px; | |
| } | |
| .screen.active { | |
| display: block; | |
| animation: fadeIn 0.25s ease; | |
| } | |
| /* === STATUS BAR === */ | |
| .status-bar { | |
| display: flex; align-items: center; justify-content: space-between; | |
| padding: 8px 20px 4px; | |
| font-size: 12px; font-weight: 600; | |
| color: var(--text-tertiary); | |
| z-index: 100; | |
| position: relative; | |
| } | |
| .status-time { font-variant-numeric: tabular-nums; } | |
| .status-icons { display: flex; gap: 4px; align-items: center; } | |
| .status-dot { | |
| width: 6px; height: 6px; border-radius: 50%; | |
| background: var(--primary); | |
| animation: pulse-glow 2s infinite; | |
| } | |
| /* === APP HEADER === */ | |
| .app-header { | |
| display: flex; align-items: flex-start; justify-content: space-between; | |
| padding: 16px 20px 12px; | |
| position: relative; | |
| z-index: 10; | |
| } | |
| .greeting-block { flex: 1; } | |
| .greeting-label { | |
| font-size: 12px; font-weight: 600; | |
| color: var(--primary); | |
| text-transform: uppercase; | |
| letter-spacing: 0.5px; | |
| margin-bottom: 4px; | |
| } | |
| .greeting-text { | |
| font-size: 24px; font-weight: 800; | |
| color: var(--text-primary); | |
| line-height: 1.2; | |
| margin: 0; | |
| } | |
| .greeting-sub { | |
| font-size: 13px; font-weight: 500; | |
| color: var(--text-secondary); | |
| margin-top: 4px; | |
| max-width: 220px; | |
| } | |
| .header-actions { | |
| display: flex; gap: 10px; align-items: center; | |
| } | |
| .icon-btn-round { | |
| width: 42px; height: 42px; border-radius: 14px; | |
| display: flex; align-items: center; justify-content: center; | |
| background: var(--bg-card); | |
| border: 1px solid var(--border); | |
| color: var(--text-secondary); | |
| transition: all var(--transition-fast); | |
| position: relative; | |
| } | |
| .icon-btn-round:hover, .icon-btn-round:active { | |
| background: var(--primary); | |
| color: #fff; | |
| border-color: var(--primary); | |
| transform: scale(1.05); | |
| } | |
| .icon-btn-round .badge { | |
| position: absolute; top: -2px; right: -2px; | |
| width: 16px; height: 16px; border-radius: 50%; | |
| background: var(--danger); | |
| color: #fff; font-size: 9px; font-weight: 800; | |
| display: flex; align-items: center; justify-content: center; | |
| border: 2px solid var(--bg-card); | |
| } | |
| /* === HERO CARD === */ | |
| .hero-card { | |
| margin: 0 20px 16px; | |
| border-radius: var(--radius-lg); | |
| padding: 24px; | |
| position: relative; | |
| overflow: hidden; | |
| background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary) 50%, var(--accent) 100%); | |
| box-shadow: var(--shadow-glow), var(--shadow-lg); | |
| transition: transform var(--transition-base), box-shadow var(--transition-base); | |
| } | |
| .hero-card:hover, .hero-card:active { | |
| transform: translateY(-2px); | |
| box-shadow: var(--shadow-glow), 0 20px 60px rgba(0,0,0,0.2); | |
| } | |
| .hero-card::before { | |
| content: ""; | |
| position: absolute; inset: 0; | |
| background: | |
| radial-gradient(circle at 70% 20%, rgba(255,255,255,0.15) 0%, transparent 50%), | |
| radial-gradient(circle at 20% 80%, rgba(255,255,255,0.08) 0%, transparent 40%); | |
| pointer-events: none; | |
| } | |
| .hero-content { position: relative; z-index: 1; } | |
| .hero-eyebrow { | |
| display: inline-flex; align-items: center; gap: 6px; | |
| font-size: 11px; font-weight: 700; | |
| color: rgba(255,255,255,0.85); | |
| text-transform: uppercase; | |
| letter-spacing: 1px; | |
| margin-bottom: 10px; | |
| padding: 4px 10px; | |
| background: rgba(255,255,255,0.15); | |
| border-radius: 999px; | |
| backdrop-filter: blur(8px); | |
| } | |
| .hero-title { | |
| font-size: 22px; font-weight: 800; | |
| color: #fff; line-height: 1.25; | |
| margin: 0 0 8px; | |
| } | |
| .hero-sub { | |
| font-size: 13px; font-weight: 500; | |
| color: rgba(255,255,255,0.8); | |
| margin: 0; | |
| } | |
| .hero-stats-row { | |
| display: flex; gap: 12px; margin-top: 16px; | |
| } | |
| .hero-stat-chip { | |
| display: flex; align-items: center; gap: 6px; | |
| padding: 6px 12px; | |
| background: rgba(255,255,255,0.15); | |
| border-radius: 12px; | |
| backdrop-filter: blur(8px); | |
| font-size: 12px; font-weight: 600; | |
| color: #fff; | |
| } | |
| .hero-stat-chip strong { font-size: 15px; font-weight: 800; } | |
| /* === CAROUSEL === */ | |
| .carousel-section { margin-bottom: 20px; } | |
| .carousel-header { | |
| display: flex; align-items: center; justify-content: space-between; | |
| padding: 0 20px; margin-bottom: 12px; | |
| } | |
| .section-label { | |
| font-size: 14px; font-weight: 700; | |
| color: var(--text-primary); | |
| display: flex; align-items: center; gap: 8px; | |
| } | |
| .section-label .dot { | |
| width: 6px; height: 6px; border-radius: 50%; | |
| background: var(--primary); | |
| } | |
| .see-all-btn { | |
| font-size: 12px; font-weight: 600; | |
| color: var(--primary); | |
| display: flex; align-items: center; gap: 2px; | |
| } | |
| .carousel-track { | |
| display: flex; gap: 12px; | |
| overflow-x: auto; scroll-snap-type: x mandatory; | |
| padding: 4px 20px 12px; | |
| scrollbar-width: none; | |
| } | |
| .carousel-track::-webkit-scrollbar { display: none; } | |
| .carousel-card { | |
| flex: 0 0 280px; | |
| min-height: 160px; | |
| border-radius: var(--radius-md); | |
| padding: 20px; | |
| scroll-snap-align: start; | |
| position: relative; | |
| overflow: hidden; | |
| cursor: pointer; | |
| transition: transform var(--transition-fast), box-shadow var(--transition-fast); | |
| background: var(--bg-elevated); | |
| border: 1px solid var(--border); | |
| box-shadow: var(--shadow-sm); | |
| } | |
| .carousel-card:hover, .carousel-card:active { | |
| transform: translateY(-4px) scale(1.01); | |
| box-shadow: var(--shadow-md); | |
| } | |
| .carousel-card .cc-img { | |
| position: absolute; inset: 0; | |
| background-size: cover; background-position: center; | |
| opacity: 0.15; | |
| transition: opacity var(--transition-base), transform 8s ease; | |
| } | |
| .carousel-card:hover .cc-img { | |
| opacity: 0.25; | |
| transform: scale(1.1); | |
| } | |
| .carousel-card .cc-content { | |
| position: relative; z-index: 1; | |
| } | |
| .cc-tag { | |
| display: inline-flex; align-items: center; gap: 4px; | |
| font-size: 10px; font-weight: 700; | |
| text-transform: uppercase; letter-spacing: 0.8px; | |
| padding: 4px 10px; border-radius: 8px; | |
| margin-bottom: 10px; | |
| backdrop-filter: blur(8px); | |
| } | |
| .cc-tag.live { | |
| background: rgba(255,23,68,0.9); | |
| color: #fff; | |
| } | |
| .cc-tag.event { | |
| background: rgba(0,191,165,0.15); | |
| color: var(--accent); | |
| border: 1px solid rgba(0,191,165,0.3); | |
| } | |
| .cc-tag.group { | |
| background: rgba(41,121,255,0.15); | |
| color: var(--info); | |
| border: 1px solid rgba(41,121,255,0.3); | |
| } | |
| .cc-title { | |
| font-size: 16px; font-weight: 700; | |
| color: var(--text-primary); | |
| margin: 0 0 6px; line-height: 1.3; | |
| } | |
| .cc-desc { | |
| font-size: 12px; font-weight: 500; | |
| color: var(--text-secondary); | |
| margin: 0; | |
| } | |
| .cc-footer { | |
| display: flex; align-items: center; justify-content: space-between; | |
| margin-top: 12px; padding-top: 10px; | |
| border-top: 1px solid var(--border-light); | |
| } | |
| .cc-meta { | |
| display: flex; align-items: center; gap: 6px; | |
| font-size: 11px; font-weight: 600; | |
| color: var(--text-tertiary); | |
| } | |
| .cc-avatars { | |
| display: flex; | |
| } | |
| .cc-avatar { | |
| width: 24px; height: 24px; border-radius: 50%; | |
| background: linear-gradient(135deg, var(--primary), var(--accent)); | |
| border: 2px solid var(--bg-card); | |
| margin-left: -6px; | |
| display: flex; align-items: center; justify-content: center; | |
| color: #fff; font-size: 9px; font-weight: 700; | |
| } | |
| .cc-avatar:first-child { margin-left: 0; } | |
| /* === QUICK ACTIONS === */ | |
| .quick-actions { | |
| padding: 0 20px; margin-bottom: 24px; | |
| } | |
| .quick-grid { | |
| display: grid; | |
| grid-template-columns: repeat(4, 1fr); | |
| gap: 10px; | |
| } | |
| .quick-item { | |
| display: flex; flex-direction: column; align-items: center; | |
| gap: 8px; padding: 14px 6px; | |
| border-radius: var(--radius-md); | |
| background: var(--bg-card); | |
| border: 1px solid var(--border); | |
| transition: all var(--transition-fast); | |
| position: relative; | |
| cursor: pointer; | |
| } | |
| .quick-item:hover, .quick-item:active { | |
| background: var(--primary); | |
| border-color: var(--primary); | |
| transform: translateY(-3px); | |
| box-shadow: 0 8px 24px rgba(0,200,83,0.3); | |
| } | |
| .quick-item:hover .quick-icon, | |
| .quick-item:active .quick-icon { | |
| color: #fff; | |
| } | |
| .quick-item:hover .quick-label, | |
| .quick-item:active .quick-label { | |
| color: #fff; | |
| } | |
| .quick-icon { | |
| width: 40px; height: 40px; border-radius: 14px; | |
| display: flex; align-items: center; justify-content: center; | |
| background: var(--bg); | |
| color: var(--primary); | |
| transition: all var(--transition-fast); | |
| } | |
| .quick-icon svg { width: 20px; height: 20px; } | |
| .quick-label { | |
| font-size: 11px; font-weight: 600; | |
| color: var(--text-secondary); | |
| text-align: center; | |
| line-height: 1.2; | |
| transition: color var(--transition-fast); | |
| } | |
| .quick-badge { | |
| position: absolute; top: 6px; right: 6px; | |
| width: 8px; height: 8px; border-radius: 50%; | |
| background: var(--danger); | |
| border: 2px solid var(--bg-card); | |
| } | |
| /* === EVENT LIST === */ | |
| .event-section { padding: 0 20px; margin-bottom: 24px; } | |
| .event-card { | |
| display: flex; gap: 14px; align-items: flex-start; | |
| padding: 14px 16px; | |
| background: var(--bg-card); | |
| border-radius: var(--radius-md); | |
| border: 1px solid var(--border); | |
| margin-bottom: 10px; | |
| transition: all var(--transition-fast); | |
| cursor: pointer; | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .event-card::before { | |
| content: ""; | |
| position: absolute; left: 0; top: 0; bottom: 0; width: 3px; | |
| background: linear-gradient(180deg, var(--primary), var(--accent)); | |
| opacity: 0; | |
| transition: opacity var(--transition-fast); | |
| } | |
| .event-card:hover, .event-card:active { | |
| transform: translateX(4px); | |
| box-shadow: var(--shadow-md); | |
| border-color: rgba(0,200,83,0.2); | |
| } | |
| .event-card:hover::before, .event-card:active::before { | |
| opacity: 1; | |
| } | |
| .event-date-block { | |
| display: flex; flex-direction: column; align-items: center; | |
| min-width: 52px; padding: 8px 0; | |
| background: var(--bg); | |
| border-radius: var(--radius-sm); | |
| } | |
| .event-date-day { | |
| font-size: 20px; font-weight: 800; | |
| color: var(--primary); line-height: 1; | |
| } | |
| .event-date-month { | |
| font-size: 10px; font-weight: 700; | |
| color: var(--text-tertiary); | |
| text-transform: uppercase; | |
| margin-top: 2px; | |
| } | |
| .event-body { flex: 1; min-width: 0; padding-top: 2px; } | |
| .event-title { | |
| font-size: 14px; font-weight: 700; | |
| color: var(--text-primary); | |
| margin: 0 0 4px; | |
| } | |
| .event-meta { | |
| display: flex; align-items: center; gap: 8px; | |
| font-size: 11px; font-weight: 500; | |
| color: var(--text-tertiary); | |
| } | |
| .event-tags { | |
| display: flex; gap: 4px; margin-top: 6px; | |
| } | |
| .event-tag { | |
| font-size: 10px; font-weight: 600; | |
| padding: 2px 8px; border-radius: 6px; | |
| } | |
| .event-tag.green { background: var(--green-soft); color: var(--green-dark); } | |
| .event-tag.blue { background: var(--blue-tag); color: var(--blue-ink); } | |
| .event-arrow { | |
| display: flex; align-items: center; | |
| color: var(--text-tertiary); | |
| transition: transform var(--transition-fast), color var(--transition-fast); | |
| } | |
| .event-card:hover .event-arrow, | |
| .event-card:active .event-arrow { | |
| transform: translateX(4px); | |
| color: var(--primary); | |
| } | |
| /* === DASHBOARD === */ | |
| .dash-section { padding: 0 20px; margin-bottom: 24px; } | |
| .dash-grid { | |
| display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; | |
| } | |
| .dash-card { | |
| padding: 16px; | |
| background: var(--bg-card); | |
| border-radius: var(--radius-md); | |
| border: 1px solid var(--border); | |
| transition: all var(--transition-fast); | |
| } | |
| .dash-card:hover { | |
| box-shadow: var(--shadow-md); | |
| transform: translateY(-2px); | |
| } | |
| .dash-icon { | |
| width: 36px; height: 36px; border-radius: 12px; | |
| display: flex; align-items: center; justify-content: center; | |
| margin-bottom: 10px; | |
| } | |
| .dash-icon svg { width: 18px; height: 18px; } | |
| .dash-num { | |
| font-size: 24px; font-weight: 800; | |
| color: var(--text-primary); line-height: 1; | |
| } | |
| .dash-label { | |
| font-size: 11px; font-weight: 600; | |
| color: var(--text-tertiary); | |
| margin-top: 4px; | |
| } | |
| .dash-trend { | |
| display: inline-flex; align-items: center; gap: 2px; | |
| font-size: 10px; font-weight: 700; | |
| margin-top: 6px; padding: 2px 6px; border-radius: 6px; | |
| } | |
| .dash-trend.up { | |
| background: rgba(0,200,83,0.1); | |
| color: var(--primary); | |
| } | |
| .dash-trend.down { | |
| background: rgba(255,23,68,0.1); | |
| color: var(--danger); | |
| } | |
| /* === ACTIVITY FEED === */ | |
| .activity-section { padding: 0 20px; margin-bottom: 24px; } | |
| .activity-card { | |
| padding: 14px 16px; | |
| background: var(--bg-card); | |
| border-radius: var(--radius-md); | |
| border: 1px solid var(--border); | |
| margin-bottom: 8px; | |
| transition: all var(--transition-fast); | |
| } | |
| .activity-card:hover { | |
| box-shadow: var(--shadow-sm); | |
| } | |
| .activity-row { | |
| display: flex; align-items: flex-start; gap: 10px; | |
| } | |
| .activity-avatar { | |
| width: 36px; height: 36px; border-radius: 12px; | |
| display: flex; align-items: center; justify-content: center; | |
| flex-shrink: 0; | |
| font-size: 14px; font-weight: 700; | |
| color: #fff; | |
| } | |
| .activity-content { flex: 1; min-width: 0; } | |
| .activity-text { | |
| font-size: 13px; font-weight: 500; | |
| color: var(--text-primary); | |
| line-height: 1.4; | |
| } | |
| .activity-text strong { font-weight: 700; } | |
| .activity-time { | |
| font-size: 11px; font-weight: 500; | |
| color: var(--text-tertiary); | |
| margin-top: 4px; | |
| } | |
| .activity-status { | |
| display: inline-flex; align-items: center; gap: 4px; | |
| font-size: 11px; font-weight: 600; | |
| padding: 2px 8px; border-radius: 6px; | |
| margin-top: 6px; | |
| } | |
| .activity-status.success { | |
| background: rgba(0,200,83,0.1); | |
| color: var(--primary); | |
| } | |
| /* === FORMS === */ | |
| .form-page { | |
| min-height: 100%; | |
| background: var(--bg); | |
| } | |
| .form-header { | |
| display: flex; align-items: center; gap: 12px; | |
| padding: 16px 20px; | |
| position: sticky; top: 0; | |
| background: var(--bg-glass); | |
| backdrop-filter: blur(20px); | |
| z-index: 50; | |
| border-bottom: 1px solid var(--border); | |
| } | |
| .form-back { | |
| width: 36px; height: 36px; border-radius: 12px; | |
| display: flex; align-items: center; justify-content: center; | |
| background: var(--bg-card); | |
| border: 1px solid var(--border); | |
| color: var(--text-secondary); | |
| transition: all var(--transition-fast); | |
| } | |
| .form-back:hover, .form-back:active { | |
| background: var(--primary); | |
| color: #fff; | |
| } | |
| .form-title { | |
| font-size: 16px; font-weight: 700; | |
| color: var(--text-primary); | |
| margin: 0; | |
| } | |
| .form-body { padding: 20px; } | |
| .form-group { margin-bottom: 20px; } | |
| .form-label { | |
| display: flex; align-items: center; gap: 6px; | |
| font-size: 12px; font-weight: 700; | |
| color: var(--text-secondary); | |
| text-transform: uppercase; | |
| letter-spacing: 0.5px; | |
| margin-bottom: 8px; | |
| } | |
| .form-input, .form-textarea, .form-select { | |
| width: 100%; | |
| padding: 14px 16px; | |
| border-radius: var(--radius-sm); | |
| border: 1.5px solid var(--border); | |
| background: var(--bg-card); | |
| color: var(--text-primary); | |
| font-size: 14px; font-weight: 500; | |
| outline: none; | |
| transition: all var(--transition-fast); | |
| } | |
| .form-input:focus, .form-textarea:focus, .form-select:focus { | |
| border-color: var(--primary); | |
| box-shadow: 0 0 0 3px var(--primary-glow); | |
| } | |
| .form-textarea { resize: vertical; min-height: 80px; } | |
| .form-select { | |
| appearance: none; | |
| -webkit-appearance: none; | |
| background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%234A5568' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); | |
| background-repeat: no-repeat; | |
| background-position: right 14px center; | |
| padding-right: 40px; | |
| } | |
| .form-submit { | |
| width: 100%; | |
| padding: 16px; | |
| border-radius: var(--radius-sm); | |
| background: linear-gradient(135deg, var(--primary), var(--accent)); | |
| color: #fff; font-size: 15px; font-weight: 700; | |
| border: none; | |
| cursor: pointer; | |
| transition: all var(--transition-fast); | |
| box-shadow: 0 4px 16px rgba(0,200,83,0.3); | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .form-submit::after { | |
| content: ""; | |
| position: absolute; inset: 0; | |
| background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent); | |
| transform: translateX(-100%); | |
| transition: transform 0.5s; | |
| } | |
| .form-submit:hover::after { | |
| transform: translateX(100%); | |
| } | |
| .form-submit:hover, .form-submit:active { | |
| box-shadow: 0 8px 32px rgba(0,200,83,0.4); | |
| transform: translateY(-1px); | |
| } | |
| /* === EMPTY STATE === */ | |
| .empty-state { | |
| display: flex; flex-direction: column; align-items: center; | |
| padding: 48px 20px; text-align: center; | |
| } | |
| .empty-icon { | |
| width: 72px; height: 72px; border-radius: 24px; | |
| display: flex; align-items: center; justify-content: center; | |
| background: var(--bg); | |
| margin-bottom: 16px; | |
| animation: float 3s ease-in-out infinite; | |
| } | |
| .empty-icon svg { width: 32px; height: 32px; color: var(--text-tertiary); } | |
| .empty-title { | |
| font-size: 15px; font-weight: 700; | |
| color: var(--text-primary); | |
| margin: 0 0 6px; | |
| } | |
| .empty-desc { | |
| font-size: 13px; font-weight: 500; | |
| color: var(--text-tertiary); | |
| margin: 0; | |
| } | |
| /* === MAP SCREEN === */ | |
| .map-stage { | |
| height: 320px; | |
| background: linear-gradient(135deg, #E3F2FD 0%, #E8F5E9 50%, #E0F7FA 100%); | |
| position: relative; | |
| display: flex; align-items: center; justify-content: center; | |
| overflow: hidden; | |
| } | |
| [data-theme="dark"] .map-stage { | |
| background: linear-gradient(135deg, #0D1B2A 0%, #0A2F1C 50%, #0A1F2A 100%); | |
| } | |
| .map-stage::before { | |
| content: ""; | |
| position: absolute; inset: 0; | |
| background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%2300C853' fill-opacity='0.04'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); | |
| } | |
| .map-pins { position: relative; z-index: 1; } | |
| .map-pin-item { | |
| position: absolute; | |
| display: flex; flex-direction: column; align-items: center; | |
| cursor: pointer; | |
| transition: transform var(--transition-fast); | |
| } | |
| .map-pin-item:hover { transform: scale(1.1); } | |
| .map-pin-dot { | |
| width: 40px; height: 40px; border-radius: 50%; | |
| background: var(--primary); | |
| display: flex; align-items: center; justify-content: center; | |
| color: #fff; font-size: 18px; font-weight: 800; | |
| box-shadow: 0 4px 16px rgba(0,200,83,0.4); | |
| animation: pulse-glow 2s infinite; | |
| } | |
| .map-pin-label { | |
| margin-top: 4px; | |
| padding: 4px 10px; | |
| background: var(--bg-card); | |
| border-radius: 8px; | |
| font-size: 11px; font-weight: 700; | |
| color: var(--text-primary); | |
| box-shadow: var(--shadow-sm); | |
| white-space: nowrap; | |
| } | |
| .map-fabs { | |
| position: absolute; bottom: 16px; right: 16px; | |
| display: flex; flex-direction: column; gap: 8px; | |
| z-index: 2; | |
| } | |
| .map-fab { | |
| width: 44px; height: 44px; border-radius: 14px; | |
| display: flex; align-items: center; justify-content: center; | |
| background: var(--bg-card); | |
| border: 1px solid var(--border); | |
| box-shadow: var(--shadow-md); | |
| color: var(--text-secondary); | |
| font-size: 18px; | |
| transition: all var(--transition-fast); | |
| cursor: pointer; | |
| } | |
| .map-fab:hover, .map-fab:active { | |
| background: var(--primary); | |
| color: #fff; | |
| border-color: var(--primary); | |
| } | |
| .map-sheet { | |
| padding: 20px; | |
| background: var(--bg-card); | |
| border-radius: var(--radius-lg) var(--radius-lg) 0 0; | |
| margin-top: -20px; | |
| position: relative; | |
| z-index: 2; | |
| box-shadow: 0 -4px 24px rgba(0,0,0,0.08); | |
| } | |
| .map-sheet-handle { | |
| width: 36px; height: 4px; border-radius: 2px; | |
| background: var(--border); | |
| margin: 0 auto 16px; | |
| } | |
| /* === GROUPS === */ | |
| .group-list { padding: 0 20px; } | |
| .group-card-enhanced { | |
| background: var(--bg-card); | |
| border-radius: var(--radius-md); | |
| border: 1px solid var(--border); | |
| overflow: hidden; | |
| margin-bottom: 12px; | |
| transition: all var(--transition-fast); | |
| cursor: pointer; | |
| } | |
| .group-card-enhanced:hover, .group-card-enhanced:active { | |
| box-shadow: var(--shadow-md); | |
| transform: translateY(-2px); | |
| } | |
| .group-cover { | |
| height: 120px; | |
| background: linear-gradient(135deg, var(--primary-dark), var(--accent)); | |
| position: relative; | |
| display: flex; align-items: flex-end; | |
| padding: 12px 16px; | |
| } | |
| .group-cover::before { | |
| content: ""; | |
| position: absolute; inset: 0; | |
| background: | |
| radial-gradient(circle at 30% 50%, rgba(255,255,255,0.1) 0%, transparent 50%); | |
| } | |
| .group-cover-tag { | |
| position: relative; | |
| padding: 4px 10px; | |
| background: rgba(255,255,255,0.2); | |
| border-radius: 8px; | |
| backdrop-filter: blur(8px); | |
| font-size: 10px; font-weight: 700; | |
| color: #fff; | |
| text-transform: uppercase; | |
| letter-spacing: 0.5px; | |
| } | |
| .group-body { padding: 14px 16px; } | |
| .group-title-row { | |
| display: flex; align-items: flex-start; justify-content: space-between; | |
| } | |
| .group-title { | |
| font-size: 15px; font-weight: 700; | |
| color: var(--text-primary); | |
| margin: 0 0 4px; | |
| } | |
| .group-meta { | |
| font-size: 12px; font-weight: 500; | |
| color: var(--text-tertiary); | |
| display: flex; align-items: center; gap: 8px; | |
| } | |
| .group-join-btn { | |
| padding: 8px 16px; | |
| border-radius: 10px; | |
| background: var(--primary); | |
| color: #fff; font-size: 12px; font-weight: 700; | |
| border: none; | |
| cursor: pointer; | |
| transition: all var(--transition-fast); | |
| flex-shrink: 0; | |
| } | |
| .group-join-btn:hover { | |
| background: var(--primary-dark); | |
| box-shadow: 0 4px 12px rgba(0,200,83,0.3); | |
| } | |
| .group-footer { | |
| display: flex; align-items: center; justify-content: space-between; | |
| margin-top: 10px; padding-top: 10px; | |
| border-top: 1px solid var(--border-light); | |
| } | |
| .group-members { | |
| display: flex; align-items: center; | |
| font-size: 12px; font-weight: 600; | |
| color: var(--text-secondary); | |
| } | |
| .group-progress { | |
| flex: 1; height: 6px; border-radius: 3px; | |
| background: var(--bg); | |
| overflow: hidden; | |
| margin: 0 12px; | |
| } | |
| .group-progress-bar { | |
| height: 100%; border-radius: 3px; | |
| background: linear-gradient(90deg, var(--primary), var(--accent)); | |
| transition: width var(--transition-slow); | |
| } | |
| /* === PROFILE === */ | |
| .profile-hero { | |
| padding: 20px; | |
| text-align: center; | |
| position: relative; | |
| } | |
| .profile-hero-bg { | |
| position: absolute; top: 0; left: 0; right: 0; height: 140px; | |
| background: linear-gradient(135deg, var(--primary-dark), var(--accent)); | |
| border-radius: 0 0 var(--radius-lg) var(--radius-lg); | |
| } | |
| .profile-avatar-wrap { | |
| position: relative; | |
| display: inline-block; | |
| margin-top: 60px; | |
| } | |
| .profile-avatar { | |
| width: 96px; height: 96px; border-radius: 50%; | |
| background: linear-gradient(135deg, var(--primary), var(--accent)); | |
| display: flex; align-items: center; justify-content: center; | |
| color: #fff; font-size: 36px; font-weight: 800; | |
| border: 4px solid var(--bg-card); | |
| box-shadow: var(--shadow-lg); | |
| position: relative; | |
| z-index: 1; | |
| } | |
| .profile-status-ring { | |
| position: absolute; inset: -6px; | |
| border-radius: 50%; | |
| border: 3px solid transparent; | |
| border-top-color: var(--primary); | |
| border-right-color: var(--accent); | |
| animation: spin-slow 8s linear infinite; | |
| } | |
| .profile-name { | |
| font-size: 20px; font-weight: 800; | |
| color: var(--text-primary); | |
| margin: 12px 0 4px; | |
| } | |
| .profile-role-badge { | |
| display: inline-flex; align-items: center; gap: 4px; | |
| padding: 4px 12px; border-radius: 999px; | |
| font-size: 12px; font-weight: 700; | |
| margin-bottom: 16px; | |
| } | |
| .profile-role-badge.admin { | |
| background: rgba(255,23,68,0.1); | |
| color: var(--danger); | |
| } | |
| .profile-role-badge.leader { | |
| background: rgba(0,191,165,0.1); | |
| color: var(--accent); | |
| } | |
| .profile-role-badge.member { | |
| background: rgba(0,200,83,0.1); | |
| color: var(--primary); | |
| } | |
| .profile-stats-row { | |
| display: flex; justify-content: center; gap: 24px; | |
| } | |
| .profile-stat { | |
| text-align: center; | |
| } | |
| .profile-stat-num { | |
| font-size: 22px; font-weight: 800; | |
| color: var(--text-primary); | |
| } | |
| .profile-stat-label { | |
| font-size: 11px; font-weight: 600; | |
| color: var(--text-tertiary); | |
| margin-top: 2px; | |
| } | |
| .role-selector { | |
| padding: 0 20px; margin-bottom: 16px; | |
| } | |
| .role-segment { | |
| display: flex; gap: 0; | |
| background: var(--bg); | |
| border-radius: var(--radius-sm); | |
| padding: 4px; | |
| border: 1px solid var(--border); | |
| } | |
| .role-segment-btn { | |
| flex: 1; | |
| padding: 10px; | |
| border-radius: 8px; | |
| font-size: 12px; font-weight: 700; | |
| color: var(--text-tertiary); | |
| border: none; background: transparent; | |
| cursor: pointer; | |
| transition: all var(--transition-fast); | |
| } | |
| .role-segment-btn.active { | |
| background: var(--bg-card); | |
| color: var(--primary); | |
| box-shadow: var(--shadow-sm); | |
| } | |
| .menu-section { | |
| padding: 0 20px; margin-bottom: 16px; | |
| } | |
| .menu-card { | |
| background: var(--bg-card); | |
| border-radius: var(--radius-md); | |
| border: 1px solid var(--border); | |
| overflow: hidden; | |
| } | |
| .menu-item { | |
| display: flex; align-items: center; gap: 12px; | |
| padding: 14px 16px; | |
| border-bottom: 1px solid var(--border-light); | |
| transition: background var(--transition-fast); | |
| cursor: pointer; | |
| } | |
| .menu-item:last-child { border-bottom: none; } | |
| .menu-item:hover, .menu-item:active { | |
| background: var(--bg); | |
| } | |
| .menu-icon-wrap { | |
| width: 36px; height: 36px; border-radius: 10px; | |
| display: flex; align-items: center; justify-content: center; | |
| flex-shrink: 0; | |
| } | |
| .menu-icon-wrap svg { width: 18px; height: 18px; } | |
| .menu-text { flex: 1; } | |
| .menu-text-title { | |
| font-size: 14px; font-weight: 600; | |
| color: var(--text-primary); | |
| margin: 0; | |
| } | |
| .menu-text-sub { | |
| font-size: 11px; font-weight: 500; | |
| color: var(--text-tertiary); | |
| margin: 2px 0 0; | |
| } | |
| .menu-chevron { | |
| color: var(--text-tertiary); | |
| transition: transform var(--transition-fast), color var(--transition-fast); | |
| } | |
| .menu-item:hover .menu-chevron { | |
| transform: translateX(4px); | |
| color: var(--primary); | |
| } | |
| /* === BOTTOM NAV === */ | |
| .bottom-nav { | |
| position: absolute; bottom: 0; left: 0; right: 0; | |
| display: grid; grid-template-columns: repeat(5, 1fr); | |
| background: var(--bg-glass); | |
| backdrop-filter: blur(24px) saturate(1.5); | |
| -webkit-backdrop-filter: blur(24px) saturate(1.5); | |
| border-top: 1px solid rgba(255,255,255,0.1); | |
| padding: 8px 0 20px; | |
| z-index: 100; | |
| transition: all var(--transition-base); | |
| } | |
| .bottom-nav.hidden { transform: translateY(100%); } | |
| .nav-item { | |
| display: flex; flex-direction: column; align-items: center; gap: 3px; | |
| padding: 4px; | |
| position: relative; | |
| cursor: pointer; | |
| border: none; background: none; | |
| transition: all var(--transition-fast); | |
| } | |
| .nav-item .nav-icon { | |
| width: 28px; height: 28px; | |
| display: flex; align-items: center; justify-content: center; | |
| border-radius: 10px; | |
| transition: all var(--transition-fast); | |
| } | |
| .nav-item .nav-icon svg { | |
| width: 22px; height: 22px; | |
| color: var(--text-tertiary); | |
| transition: all var(--transition-fast); | |
| } | |
| .nav-item .nav-label { | |
| font-size: 10px; font-weight: 600; | |
| color: var(--text-tertiary); | |
| transition: all var(--transition-fast); | |
| } | |
| .nav-item.active .nav-icon { | |
| background: var(--primary-glow); | |
| } | |
| .nav-item.active .nav-icon svg { | |
| color: var(--primary); | |
| stroke-width: 2.5; | |
| } | |
| .nav-item.active .nav-label { | |
| color: var(--primary); | |
| font-weight: 700; | |
| } | |
| .nav-indicator { | |
| position: absolute; top: -2px; left: 50%; transform: translateX(-50%); | |
| width: 16px; height: 3px; border-radius: 2px; | |
| background: var(--primary); | |
| opacity: 0; | |
| transition: opacity var(--transition-fast); | |
| } | |
| .nav-item.active .nav-indicator { opacity: 1; } | |
| /* === MORE GRID === */ | |
| .more-section { padding: 0 20px; } | |
| .more-grid { | |
| display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; | |
| } | |
| .more-item { | |
| display: flex; flex-direction: column; align-items: center; gap: 8px; | |
| padding: 16px 8px; | |
| background: var(--bg-card); | |
| border-radius: var(--radius-md); | |
| border: 1px solid var(--border); | |
| transition: all var(--transition-fast); | |
| cursor: pointer; | |
| } | |
| .more-item:hover, .more-item:active { | |
| background: var(--primary); | |
| border-color: var(--primary); | |
| transform: translateY(-2px); | |
| box-shadow: 0 8px 24px rgba(0,200,83,0.25); | |
| } | |
| .more-item:hover .more-icon, | |
| .more-item:active .more-icon { | |
| background: rgba(255,255,255,0.2); | |
| color: #fff; | |
| } | |
| .more-item:hover .more-label, | |
| .more-item:active .more-label { | |
| color: #fff; | |
| } | |
| .more-icon { | |
| width: 44px; height: 44px; border-radius: 14px; | |
| display: flex; align-items: center; justify-content: center; | |
| background: var(--bg); | |
| color: var(--primary); | |
| transition: all var(--transition-fast); | |
| } | |
| .more-icon svg { width: 22px; height: 22px; } | |
| .more-label { | |
| font-size: 11px; font-weight: 600; | |
| color: var(--text-secondary); | |
| text-align: center; | |
| transition: color var(--transition-fast); | |
| } | |
| /* === TOAST === */ | |
| .toast-container { | |
| position: fixed; top: 60px; left: 50%; transform: translateX(-50%); | |
| z-index: 1000; | |
| display: flex; flex-direction: column; gap: 8px; | |
| pointer-events: none; | |
| } | |
| .toast { | |
| padding: 12px 20px; | |
| border-radius: var(--radius-md); | |
| font-size: 13px; font-weight: 600; | |
| color: #fff; | |
| display: flex; align-items: center; gap: 8px; | |
| animation: fadeInUp 0.3s ease, fadeOut 0.3s ease 2.7s; | |
| box-shadow: var(--shadow-lg); | |
| backdrop-filter: blur(16px); | |
| pointer-events: auto; | |
| min-width: 200px; | |
| } | |
| .toast.success { background: rgba(0,200,83,0.9); } | |
| .toast.error { background: rgba(255,23,68,0.9); } | |
| .toast.info { background: rgba(41,121,255,0.9); } | |
| @keyframes fadeOut { | |
| from { opacity: 1; transform: translateY(0); } | |
| to { opacity: 0; transform: translateY(-10px); } | |
| } | |
| /* === LOADING SKELETON === */ | |
| .skeleton { | |
| background: linear-gradient(90deg, var(--border) 25%, var(--border-light) 50%, var(--border) 75%); | |
| background-size: 200% 100%; | |
| animation: shimmer 1.5s infinite; | |
| border-radius: var(--radius-sm); | |
| } | |
| /* === REPORTS LIST === */ | |
| .report-card { | |
| padding: 16px; | |
| background: var(--bg-card); | |
| border-radius: var(--radius-md); | |
| border: 1px solid var(--border); | |
| margin-bottom: 10px; | |
| transition: all var(--transition-fast); | |
| } | |
| .report-card:hover { | |
| box-shadow: var(--shadow-sm); | |
| border-color: rgba(0,200,83,0.2); | |
| } | |
| .report-header { | |
| display: flex; align-items: center; justify-content: space-between; | |
| margin-bottom: 10px; | |
| } | |
| .report-area { | |
| display: inline-flex; align-items: center; gap: 4px; | |
| padding: 4px 10px; border-radius: 8px; | |
| font-size: 11px; font-weight: 700; | |
| } | |
| .report-area.green { | |
| background: rgba(0,200,83,0.1); | |
| color: var(--primary); | |
| } | |
| .report-time { | |
| font-size: 11px; font-weight: 500; | |
| color: var(--text-tertiary); | |
| } | |
| .report-body { | |
| font-size: 13px; font-weight: 500; | |
| color: var(--text-primary); | |
| line-height: 1.5; | |
| } | |
| .report-footer { | |
| display: flex; align-items: center; justify-content: space-between; | |
| margin-top: 10px; padding-top: 10px; | |
| border-top: 1px solid var(--border-light); | |
| } | |
| .report-status { | |
| display: inline-flex; align-items: center; gap: 4px; | |
| font-size: 11px; font-weight: 700; | |
| padding: 3px 8px; border-radius: 6px; | |
| } | |
| .report-status.approved { | |
| background: rgba(0,200,83,0.1); | |
| color: var(--primary); | |
| } | |
| /* === SEARCH BAR === */ | |
| .search-bar { | |
| display: flex; align-items: center; gap: 10px; | |
| padding: 12px 16px; | |
| background: var(--bg-card); | |
| border-radius: var(--radius-sm); | |
| border: 1.5px solid var(--border); | |
| margin: 0 20px 16px; | |
| transition: all var(--transition-fast); | |
| } | |
| .search-bar:focus-within { | |
| border-color: var(--primary); | |
| box-shadow: 0 0 0 3px var(--primary-glow); | |
| } | |
| .search-bar input { | |
| flex: 1; | |
| border: none; background: none; | |
| font-size: 14px; font-weight: 500; | |
| color: var(--text-primary); | |
| outline: none; | |
| } | |
| .search-bar input::placeholder { | |
| color: var(--text-tertiary); | |
| } | |
| /* === SEGMENT CONTROL === */ | |
| .segment-control { | |
| display: flex; gap: 0; | |
| background: var(--bg); | |
| border-radius: var(--radius-sm); | |
| padding: 3px; | |
| border: 1px solid var(--border); | |
| margin: 0 20px 16px; | |
| } | |
| .segment-btn { | |
| flex: 1; | |
| padding: 8px; | |
| border-radius: 8px; | |
| font-size: 12px; font-weight: 700; | |
| color: var(--text-tertiary); | |
| border: none; background: transparent; | |
| cursor: pointer; | |
| transition: all var(--transition-fast); | |
| } | |
| .segment-btn.active { | |
| background: var(--bg-card); | |
| color: var(--primary); | |
| box-shadow: var(--shadow-sm); | |
| } | |
| /* === FAB === */ | |
| .fab { | |
| position: fixed; bottom: 88px; right: 20px; | |
| width: 52px; height: 52px; border-radius: 50%; | |
| background: linear-gradient(135deg, var(--primary), var(--accent)); | |
| color: #fff; font-size: 24px; font-weight: 300; | |
| display: flex; align-items: center; justify-content: center; | |
| border: none; | |
| box-shadow: 0 4px 20px rgba(0,200,83,0.4); | |
| cursor: pointer; | |
| z-index: 50; | |
| transition: all var(--transition-fast); | |
| } | |
| .fab:hover, .fab:active { | |
| transform: scale(1.08) translateY(-2px); | |
| box-shadow: 0 8px 32px rgba(0,200,83,0.5); | |
| } | |
| /* === CHIP === */ | |
| .chip-row { | |
| display: flex; gap: 6px; | |
| overflow-x: auto; | |
| padding: 0 20px 8px; | |
| scrollbar-width: none; | |
| } | |
| .chip-row::-webkit-scrollbar { display: none; } | |
| .chip { | |
| padding: 6px 14px; border-radius: 999px; | |
| font-size: 12px; font-weight: 600; | |
| border: 1.5px solid var(--border); | |
| background: var(--bg-card); | |
| color: var(--text-secondary); | |
| white-space: nowrap; | |
| cursor: pointer; | |
| transition: all var(--transition-fast); | |
| } | |
| .chip:hover { border-color: var(--primary); color: var(--primary); } | |
| .chip.active { | |
| background: var(--primary); | |
| color: #fff; | |
| border-color: var(--primary); | |
| box-shadow: 0 2px 8px rgba(0,200,83,0.3); | |
| } | |
| /* === DARK MODE TOGGLE === */ | |
| .theme-toggle { | |
| width: 42px; height: 24px; border-radius: 12px; | |
| background: var(--border); | |
| position: relative; | |
| cursor: pointer; | |
| transition: background var(--transition-fast); | |
| border: none; | |
| flex-shrink: 0; | |
| } | |
| .theme-toggle.on { | |
| background: var(--primary); | |
| } | |
| .theme-toggle-dot { | |
| position: absolute; top: 2px; left: 2px; | |
| width: 20px; height: 20px; border-radius: 50%; | |
| background: #fff; | |
| box-shadow: var(--shadow-sm); | |
| transition: transform var(--transition-fast); | |
| } | |
| .theme-toggle.on .theme-toggle-dot { | |
| transform: translateX(18px); | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div id="app-root"> | |
| <div class="phone-frame"> | |
| <div class="status-bar"> | |
| <span class="status-time" id="status-time">9:41</span> | |
| <div class="status-icons"> | |
| <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M18 10h-1.26A8 8 0 1 0 9 20h9a5 5 0 0 0 0-10z"/></svg> | |
| <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor"><path d="M17 8C8 10 5.9 16.17 3.82 21.34l1.89.66.95-2.3c.48.17.98.3 1.34.3C19 20 22 3 22 3c-1 2-8 2.25-13 3.25S2 11.5 2 13.5s1.75 3.75 1.75 3.75C7 8 17 8 17 8z"/></svg> | |
| <div style="display:flex;gap:1px;align-items:flex-end;height:10px"> | |
| <div style="width:2.5px;height:4px;border-radius:1px;background:currentColor;opacity:.3"></div> | |
| <div style="width:2.5px;height:6px;border-radius:1px;background:currentColor;opacity:.5"></div> | |
| <div style="width:2.5px;height:8px;border-radius:1px;background:currentColor;opacity:.7"></div> | |
| <div style="width:2.5px;height:10px;border-radius:1px;background:currentColor"></div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="screen-container" id="screen-container"> | |
| <!-- ===================== HOME SCREEN ===================== --> | |
| <div class="screen active" id="scr-home"> | |
| <div class="app-header"> | |
| <div class="greeting-block"> | |
| <div class="greeting-label" style="display:flex;align-items:center;gap:6px"> | |
| <span style="width:6px;height:6px;border-radius:50%;background:var(--primary);display:inline-block;animation:pulse-glow 2s infinite"></span> | |
| ยินดีต้อนรับ | |
| </div> | |
| <h1 class="greeting-text" id="greeting-text">สวัสดี</h1> | |
| <p class="greeting-sub" id="greeting-sub">ขอพระเจ้าอวยพระพรในวันนี้</p> | |
| </div> | |
| <div class="header-actions"> | |
| <button class="icon-btn-round" onclick="showToast('การแจ้งเตือน','info')"> | |
| <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.73 21a2 2 0 0 1-3.46 0"/></svg> | |
| <span class="badge">3</span> | |
| </button> | |
| <button class="icon-btn-round" onclick="switchTab('profile')"> | |
| <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="hero-card anim-fade-up"> | |
| <div class="hero-content"> | |
| <div class="hero-eyebrow"> | |
| <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><circle cx="12" cy="12" r="10"/><polygon points="10 8 16 12 10 16 10 8"/></svg> | |
| ถ่ายทอดสดวันนี้ | |
| </div> | |
| <h2 class="hero-title">ความเชื่อที่เดินได้</h2> | |
| <p class="hero-sub">ซีรีส์เทศน์ใหม่ · ทุกวันอาทิตย์ 10:00 น.</p> | |
| <div class="hero-stats-row"> | |
| <div class="hero-stat-chip"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg><strong>12</strong> กลุ่มเปิดรับ</div> | |
| <div class="hero-stat-chip"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg><strong>247</strong> คนกำลังดู</div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="carousel-section anim-fade-up anim-d1"> | |
| <div class="carousel-header"> | |
| <div class="section-label"><span class="dot"></span>ไฮไลต์</div> | |
| <button class="see-all-btn">ดูทั้งหมด <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="9 18 15 12 9 6"/></svg></button> | |
| </div> | |
| <div class="carousel-track"> | |
| <div class="carousel-card"> | |
| <div class="cc-img" style="background-image:url('https://images.unsplash.com/photo-1519494026892-80bbd2d6fd0d?w=400&h=300&fit=crop&q=80')"></div> | |
| <div class="cc-content"> | |
| <div class="cc-tag event">กิจกรรม</div> | |
| <h3 class="cc-title">ค่ายเยาวชนฤดูร้อน 2568</h3> | |
| <p class="cc-desc">ลงทะเบียนก่อน 30 พ.ค. · ศูนย์ฝึกอบรม TLC</p> | |
| <div class="cc-footer"> | |
| <div class="cc-meta"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg> 15-17 พ.ค.</div> | |
| <div class="cc-avatars"><div class="cc-avatar">A</div><div class="cc-avatar">B</div><div class="cc-avatar">+5</div></div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="carousel-card"> | |
| <div class="cc-img" style="background-image:url('https://images.unsplash.com/photo-1504052434569-70ad5836ab65?w=400&h=300&fit=crop&q=80')"></div> | |
| <div class="cc-content"> | |
| <div class="cc-tag live"> | |
| <span style="width:6px;height:6px;border-radius:50%;background:#fff;display:inline-block;animation:pulse-glow 1.5s infinite"></span> | |
| LIVE | |
| </div> | |
| <h3 class="cc-title">นมัสการรวมดวงวันอาทิตย์</h3> | |
| <p class="cc-desc">เริ่มในอีก 2 ชม. · ถ่ายทอดสดจากห้องหลัก</p> | |
| <div class="cc-footer"> | |
| <div class="cc-meta"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg> 89 คนกำลังรอ</div> | |
| <div class="cc-avatars"><div class="cc-avatar">C</div><div class="cc-avatar">D</div></div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="carousel-card"> | |
| <div class="cc-img" style="background-image:url('https://images.unsplash.com/photo-1529156069898-49953e39b3ac?w=400&h=300&fit=crop&q=80')"></div> | |
| <div class="cc-content"> | |
| <div class="cc-tag group">กลุ่มพันธกิจ</div> | |
| <h3 class="cc-title">เปิดรับสมาชิกใหม่</h3> | |
| <p class="cc-desc">กลุ่มสามัคคีศรัทธา · 1.2 กม. จากคุณ</p> | |
| <div class="cc-footer"> | |
| <div class="cc-meta"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/></svg> ห้องประชุมชั้น 2</div> | |
| <div class="cc-avatars"><div class="cc-avatar">E</div></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="quick-actions anim-fade-up anim-d2"> | |
| <div class="section-label" style="margin-bottom:12px;padding-left:0"><span class="dot"></span>เมนูด่วน</div> | |
| <div class="quick-grid"> | |
| <div class="quick-item" onclick="showToast('เปิดหน้าเทศน์ & สื่อ','success')"> | |
| <div class="quick-icon" style="background:linear-gradient(135deg,#00C853,#00BFA5)"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2.5" stroke-linecap="round"><polygon points="5 3 19 12 5 21 5 3"/></svg></div> | |
| <span class="quick-label">เทศน์ & สื่อ</span> | |
| </div> | |
| <div class="quick-item" onclick="showToast('เปิดหน้าศึกษาพระคัมภีร์','success')"> | |
| <div class="quick-icon" style="background:linear-gradient(135deg,#2979FF,#00BFA5)"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round"><path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z"/><path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z"/></svg></div> | |
| <span class="quick-label">พระคัมภีร์</span> | |
| </div> | |
| <div class="quick-item" onclick="switchTab('mission')"> | |
| <div class="quick-icon" style="background:linear-gradient(135deg,#FFAB00,#FF1744)"><span class="quick-badge"></span><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/></svg></div> | |
| <span class="quick-label">รายงาน</span> | |
| </div> | |
| <div class="quick-item" onclick="showToast('เปิดปฏิทิน','info')"> | |
| <div class="quick-icon" style="background:linear-gradient(135deg,#00BFA5,#2979FF)"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg></div> | |
| <span class="quick-label">ปฏิทิน</span> | |
| </div> | |
| <div class="quick-item" onclick="switchTab('groups')"> | |
| <div class="quick-icon" style="background:linear-gradient(135deg,#00C853,#2979FF)"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg></div> | |
| <span class="quick-label">กลุ่มพันธกิจ</span> | |
| </div> | |
| <div class="quick-item" onclick="showToast('ระบบถวายกำลังพัฒนา','info')"> | |
| <div class="quick-icon" style="background:linear-gradient(135deg,#FF1744,#FFAB00)"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round"><line x1="12" y1="1" x2="12" y2="23"/><path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"/></svg></div> | |
| <span class="quick-label">ถวาย</span> | |
| </div> | |
| <div class="quick-item" onclick="switchTab('map')"> | |
| <div class="quick-icon" style="background:linear-gradient(135deg,#2979FF,#00C853)"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round"><polygon points="1 6 1 22 8 18 16 22 21 18 21 2 16 6 8 2 1 6"/><line x1="8" y1="2" x2="8" y2="18"/><line x1="16" y1="6" x2="16" y2="22"/></svg></div> | |
| <span class="quick-label">แผนที่</span> | |
| </div> | |
| <div class="quick-item" onclick="showToast('เฝ้าเดี่ยวรอบนี้','info')"> | |
| <div class="quick-icon" style="background:linear-gradient(135deg,#00BFA5,#00C853)"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg></div> | |
| <span class="quick-label">เฝ้าเดี่ยว</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="event-section anim-fade-up anim-d3"> | |
| <div class="section-label" style="margin-bottom:12px"><span class="dot"></span>กิจกรรมใกล้เคียง</div> | |
| <div class="event-card" onclick="showToast('ดูรายละเอียดกิจกรรม','info')"> | |
| <div class="event-date-block"> | |
| <span class="event-date-day">15</span> | |
| <span class="event-date-month">พ.ค.</span> | |
| </div> | |
| <div class="event-body"> | |
| <h4 class="event-title">นมัสการวันอาทิตย์</h4> | |
| <div class="event-meta"> | |
| <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/></svg> ถนนมิตรภาพ กาฬสินธุ์ | |
| </div> | |
| <div class="event-tags"> | |
| <span class="event-tag green">หลัก</span> | |
| <span class="event-tag blue">ที่จอดรถ</span> | |
| <span class="event-tag blue">ถ่ายทอดสด</span> | |
| </div> | |
| </div> | |
| <div class="event-arrow"> | |
| <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="9 18 15 12 9 6"/></svg> | |
| </div> | |
| </div> | |
| <div class="event-card" onclick="showToast('ดูรายละเอียดกิจกรรม','info')"> | |
| <div class="event-date-block"> | |
| <span class="event-date-day" style="color:var(--accent)">20</span> | |
| <span class="event-date-month">พ.ค.</span> | |
| </div> | |
| <div class="event-body"> | |
| <h4 class="event-title">กลุ่มเยาวชน TLC Youth</h4> | |
| <div class="event-meta"> | |
| <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/></svg> ห้องชั้น 2 อาคารคริสตจักร | |
| </div> | |
| <div class="event-tags"> | |
| <span class="event-tag green">Youth</span> | |
| <span class="event-tag blue">ลงทะเบียน</span> | |
| </div> | |
| </div> | |
| <div class="event-arrow"> | |
| <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="9 18 15 12 9 6"/></svg> | |
| </div> | |
| </div> | |
| </div> | |
| <div id="admin-dash-home" class="dash-section" style="display:none"> | |
| <div class="section-label" style="margin-bottom:12px"><span class="dot" style="background:var(--danger)"></span>แดชบอร์ดผู้บริหาร</div> | |
| <div class="dash-grid"> | |
| <div class="dash-card anim-scale-in"> | |
| <div class="dash-icon" style="background:rgba(0,200,83,0.1)"> | |
| <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#00C853" stroke-width="2"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg> | |
| </div> | |
| <div class="dash-num" id="dash-groups-num">124</div> | |
| <div class="dash-label">กลุ่มพันธกิจ</div> | |
| <div class="dash-trend up"> | |
| <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="23 6 13.5 15.5 8.5 10.5 1 18"/><polyline points="17 6 23 6 23 12"/></svg> | |
| +12% | |
| </div> | |
| </div> | |
| <div class="dash-card anim-scale-in" style="animation-delay:.1s"> | |
| <div class="dash-icon" style="background:rgba(41,121,255,0.1)"> | |
| <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#2979FF" stroke-width="2"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg> | |
| </div> | |
| <div class="dash-num" id="dash-members-num">1,240</div> | |
| <div class="dash-label">สมาชิกทั้งหมด</div> | |
| <div class="dash-trend up"> | |
| <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="23 6 13.5 15.5 8.5 10.5 1 18"/><polyline points="17 6 23 6 23 12"/></svg> | |
| +5% | |
| </div> | |
| </div> | |
| <div class="dash-card anim-scale-in" style="animation-delay:.2s"> | |
| <div class="dash-icon" style="background:rgba(0,191,165,0.1)"> | |
| <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#00BFA5" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/></svg> | |
| </div> | |
| <div class="dash-num" id="dash-reports-num">48</div> | |
| <div class="dash-label">รายงานเดือนนี้</div> | |
| <div class="dash-trend up"> | |
| <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="23 6 13.5 15.5 8.5 10.5 1 18"/><polyline points="17 6 23 6 23 12"/></svg> | |
| +8 | |
| </div> | |
| </div> | |
| <div class="dash-card anim-scale-in" style="animation-delay:.3s"> | |
| <div class="dash-icon" style="background:rgba(255,23,68,0.1)"> | |
| <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#FF1744" stroke-width="2"><circle cx="12" cy="12" r="10"/><polygon points="12 6 12 12 16 14"/></svg> | |
| </div> | |
| <div class="dash-num">89%</div> | |
| <div class="dash-label">เข้าร่วมกิจกรรม</div> | |
| <div class="dash-trend up"> | |
| <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="23 6 13.5 15.5 8.5 10.5 1 18"/><polyline points="17 6 23 6 23 12"/></svg> | |
| +3% | |
| </div> | |
| </div> | |
| </div> | |
| <div class="activity-section" style="margin-top:16px"> | |
| <div class="activity-card"> | |
| <div class="activity-row"> | |
| <div class="activity-avatar" style="background:linear-gradient(135deg,#00C853,#00BFA5)">A</div> | |
| <div class="activity-content"> | |
| <div class="activity-text"><strong>กลุ่มโคกกลาง</strong> ส่งรายงานพันธกิจใหม่</div> | |
| <div class="activity-time">5 นาทีที่แล้ว</div> | |
| <div class="activity-status success"> | |
| <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="20 6 9 17 4 12"/></svg> | |
| ตรวจสอบแล้ว | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="activity-card"> | |
| <div class="activity-row"> | |
| <div class="activity-avatar" style="background:linear-gradient(135deg,#2979FF,#00BFA5)">B</div> | |
| <div class="activity-content"> | |
| <div class="activity-text"><strong>กลุ่มหนองบัว</strong> อัปเดตรายชื่อสมาชิก 3 คน</div> | |
| <div class="activity-time">15 นาทีที่แล้ว</div> | |
| <div class="activity-status success"> | |
| <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="20 6 9 17 4 12"/></svg> | |
| ตรวจสอบแล้ว | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="activity-card"> | |
| <div class="activity-row"> | |
| <div class="activity-avatar" style="background:linear-gradient(135deg,#FFAB00,#FF1744)">C</div> | |
| <div class="activity-content"> | |
| <div class="activity-text"><strong>หัวหน้าแคร์สมชาย</strong> บันทึกการเยี่ยมเยียน</div> | |
| <div class="activity-time">1 ชม. ที่แล้ว</div> | |
| <div class="activity-status success"> | |
| <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="20 6 9 17 4 12"/></svg> | |
| รอการตรวจสอบ | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- ===================== MAP SCREEN ===================== --> | |
| <div class="screen" id="scr-map"> | |
| <div class="form-header"> | |
| <div style="display:flex;align-items:center;gap:12px;flex:1"> | |
| <button class="form-back" onclick="switchTab('home')"> | |
| <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="15 18 9 12 15 6"/></svg> | |
| </button> | |
| <h1 class="form-title">แผนที่คริสตจักร</h1> | |
| </div> | |
| </div> | |
| <div class="search-bar"> | |
| <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg> | |
| <input placeholder="ค้นหาสถานที่คริสตจักร…" /> | |
| </div> | |
| <div class="map-stage"> | |
| <div class="map-pins"> | |
| <div class="map-pin-item" style="top:-40px;left:-30px"> | |
| <div class="map-pin-dot">1</div> | |
| <div class="map-pin-label">TLC กาฬสินธุ์</div> | |
| </div> | |
| <div class="map-pin-item" style="top:20px;left:40px"> | |
| <div class="map-pin-dot" style="background:var(--accent)">2</div> | |
| <div class="map-pin-label">กลุ่มโคกกลาง</div> | |
| </div> | |
| <div class="map-pin-item" style="top:-10px;left:-70px"> | |
| <div class="map-pin-dot" style="background:var(--info)">3</div> | |
| <div class="map-pin-label">กลุ่มหนองบัว</div> | |
| </div> | |
| </div> | |
| <div class="map-fabs"> | |
| <button class="map-fab" onclick="showToast('ตำแหน่งของคุณ','info')"> | |
| <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="3"/><path d="M12 2v4m0 12v4m-8-8H4m16 0h-4m-1.5-6.5L7 17"/></svg> | |
| </button> | |
| <button class="map-fab" onclick="showToast('เพิ่มสถานที่','info')"> | |
| <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="map-sheet"> | |
| <div class="map-sheet-handle"></div> | |
| <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:12px"> | |
| <div> | |
| <p class="sheet-title">สถานที่ใกล้คุณ</p> | |
| <p class="sheet-muted">พบ 3 สถานที่ในรัศมี 5 กม.</p> | |
| </div> | |
| <span class="nc-pill" style="background:var(--green-soft);color:var(--primary)">3 แห่ง</span> | |
| </div> | |
| <div class="event-card" style="margin:0 0 10px"> | |
| <div class="event-body" style="flex:1"> | |
| <h4 class="event-title">TLC กาฬสินธุ์</h4> | |
| <div class="event-meta">ถนนมิตรภาพ · 0.5 กม.</div> | |
| <div class="event-tags"><span class="event-tag green">หลัก</span></div> | |
| </div> | |
| <div class="event-arrow"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="9 18 15 12 9 6"/></svg></div> | |
| </div> | |
| <div class="event-card" style="margin:0 0 10px"> | |
| <div class="event-body" style="flex:1"> | |
| <h4 class="event-title">กลุ่มโคกกลาง</h4> | |
| <div class="event-meta">บ้านโคกกลาง · 2.1 กม.</div> | |
| <div class="event-tags"><span class="event-tag blue">กลุ่มพันธกิจ</span></div> | |
| </div> | |
| <div class="event-arrow"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="9 18 15 12 9 6"/></svg></div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- ===================== GROUPS SCREEN ===================== --> | |
| <div class="screen" id="scr-groups"> | |
| <div class="form-header"> | |
| <div style="display:flex;align-items:center;gap:12px;flex:1"> | |
| <button class="form-back" onclick="switchTab('home')"> | |
| <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="15 18 9 12 15 6"/></svg> | |
| </button> | |
| <h1 class="form-title">กลุ่มพันธกิจ</h1> | |
| </div> | |
| <button class="icon-btn-round"> | |
| <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg> | |
| </button> | |
| </div> | |
| <div class="segment-control"> | |
| <button class="segment-btn active">กลุ่มของฉัน</button> | |
| <button class="segment-btn">ใกล้ฉัน</button> | |
| <button class="segment-btn">ทั้งหมด</button> | |
| </div> | |
| <div class="chip-row"> | |
| <button class="chip active">ทั้งหมด</button> | |
| <button class="chip">เยาวชน</button> | |
| <button class="chip">ผู้ใหญ่</button> | |
| <button class="chip">สตรี</button> | |
| <button class="chip">เด็ก</button> | |
| </div> | |
| <div class="group-list"> | |
| <div class="group-card-enhanced"> | |
| <div class="group-cover"> | |
| <span class="group-cover-tag">กำลังเปิดรับ</span> | |
| </div> | |
| <div class="group-body"> | |
| <div class="group-title-row"> | |
| <div> | |
| <h3 class="group-title">กลุ่มสามัคคีศรัทธา</h3> | |
| <div class="group-meta"> | |
| <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/></svg> | |
| ห้องประชุมชั้น 2 · 1.2 กม. | |
| </div> | |
| </div> | |
| <button class="group-join-btn">เข้าร่วม</button> | |
| </div> | |
| <div class="group-footer"> | |
| <div class="group-members"> | |
| <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/></svg> | |
| 3/12 สมาชิก | |
| </div> | |
| <div class="group-progress"><div class="group-progress-bar" style="width:25%"></div></div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="group-card-enhanced"> | |
| <div class="group-cover" style="background:linear-gradient(135deg,#2979FF,#00BFA5)"> | |
| <span class="group-cover-tag">เต็มแล้ว</span> | |
| </div> | |
| <div class="group-body"> | |
| <div class="group-title-row"> | |
| <div> | |
| <h3 class="group-title">กลุ่มเยาวชน TLC Youth</h3> | |
| <div class="group-meta"> | |
| <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/></svg> | |
| ห้องชั้น 2 อาคารคริสตจักร · 0.5 กม. | |
| </div> | |
| </div> | |
| <button class="group-join-btn" style="background:var(--border);color:var(--text-tertiary)">เต็ม</button> | |
| </div> | |
| <div class="group-footer"> | |
| <div class="group-members"> | |
| <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/></svg> | |
| 15/15 สมาชิก | |
| </div> | |
| <div class="group-progress"><div class="group-progress-bar" style="width:100%"></div></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <button class="fab" onclick="showToast('สร้างกลุ่มใหม่','info')">+</button> | |
| </div> | |
| <!-- ===================== MISSION SCREEN ===================== --> | |
| <div class="screen" id="scr-mission"> | |
| <div id="mission-list-view"> | |
| <div class="form-header"> | |
| <div style="display:flex;align-items:center;gap:12px;flex:1"> | |
| <button class="form-back" onclick="switchTab('home')"> | |
| <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="15 18 9 12 15 6"/></svg> | |
| </button> | |
| <h1 class="form-title">รายงานพันธกิจ</h1> | |
| </div> | |
| <button class="fab-mini" onclick="missionCreate()" style="width:36px;height:36px;border-radius:12px;background:var(--primary);color:#fff;display:flex;align-items:center;justify-content:center;border:none"> | |
| <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2.5"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg> | |
| </button> | |
| </div> | |
| <div id="mission-stats-bar" class="dash-section" style="display:none"> | |
| <div class="dash-card" style="display:flex;align-items:center;gap:16px"> | |
| <div style="width:48px;height:48px;border-radius:14px;background:var(--green-soft);display:flex;align-items:center;justify-content:center"> | |
| <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="var(--primary)" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/></svg> | |
| </div> | |
| <div> | |
| <div style="font-size:24px;font-weight:800;color:var(--text-primary)" id="mission-stat-count">0</div> | |
| <div style="font-size:12px;font-weight:600;color:var(--text-tertiary)">รายงานทั้งหมดในคริสตจักร</div> | |
| </div> | |
| </div> | |
| </div> | |
| <div style="padding:0 20px"> | |
| <div class="empty-state" id="mission-empty"> | |
| <div class="empty-icon"> | |
| <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/></svg> | |
| </div> | |
| <h3 class="empty-title">ยังไม่มีรายงาน</h3> | |
| <p class="empty-desc">เริ่มต้นสร้างรายงานพันธกิจครั้งแรกของคุณ</p> | |
| </div> | |
| <div id="mission-cards-container"></div> | |
| </div> | |
| </div> | |
| <div id="mission-form-view" style="display:none"> | |
| <div class="form-page"> | |
| <div class="form-header"> | |
| <button class="form-back" onclick="missionBack()"> | |
| <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="15 18 9 12 15 6"/></svg> | |
| </button> | |
| <h1 class="form-title">สร้างรายงานพันธกิจ</h1> | |
| </div> | |
| <div class="form-body"> | |
| <div class="form-group"> | |
| <label class="form-label"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg> กลุ่ม/พื้นที่</label> | |
| <input class="form-input" id="m-area" placeholder="เช่น กลุ่มโคกกลาง" /> | |
| </div> | |
| <div class="form-group"> | |
| <label class="form-label"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg> วันเวลา</label> | |
| <input class="form-input" type="datetime-local" id="m-time" /> | |
| </div> | |
| <div class="form-group"> | |
| <label class="form-label"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg> ผู้เข้าร่วม</label> | |
| <input class="form-input" id="m-people" placeholder="ชื่อผู้เข้าร่วม" /> | |
| </div> | |
| <div class="form-group"> | |
| <label class="form-label"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z"/><path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z"/></svg> บทเรียน/พระคำ</label> | |
| <textarea class="form-textarea" id="m-lesson" rows="2" placeholder="พระคำที่ศึกษาในวันนี้"></textarea> | |
| </div> | |
| <div class="form-group"> | |
| <label class="form-label"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg> ประเด็นสำคัญ</label> | |
| <textarea class="form-textarea" id="m-key" rows="2" placeholder="ประเด็นสำคัญที่ได้รับ"></textarea> | |
| </div> | |
| <div class="form-group"> | |
| <label class="form-label"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><line x1="12" y1="16" x2="12" y2="12"/><line x1="12" y1="8" x2="12.01" y2="8"/></svg> สิ่งที่ได้รับ</label> | |
| <textarea class="form-textarea" id="m-recv" rows="2" placeholder="สิ่งที่พระเจ้าสอนผ่านพระคำ"></textarea> | |
| </div> | |
| <div class="form-group"> | |
| <label class="form-label"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/></svg> การนำไปใช้</label> | |
| <textarea class="form-textarea" id="m-apply" rows="2" placeholder="จะนำไปใช้ในชีวิตอย่างไร"></textarea> | |
| </div> | |
| <button class="form-submit" onclick="missionSubmit()">ส่งรายงานพันธกิจ</button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- ===================== EVENTS SCREEN ===================== --> | |
| <div class="screen" id="scr-events"> | |
| <div class="form-header"> | |
| <div style="display:flex;align-items:center;gap:12px;flex:1"> | |
| <button class="form-back" onclick="switchTab('home')"> | |
| <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="15 18 9 12 15 6"/></svg> | |
| </button> | |
| <h1 class="form-title">กิจกรรม & แข่งขัน</h1> | |
| </div> | |
| <button class="icon-btn-round"> | |
| <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg> | |
| </button> | |
| </div> | |
| <div class="chip-row"> | |
| <button class="chip active">ทั้งหมด</button> | |
| <button class="chip">เยาวชน</button> | |
| <button class="chip">ผู้ใหญ่</button> | |
| <button class="chip">ครอบครัว</button> | |
| <button class="chip">พิเศษ</button> | |
| </div> | |
| <div style="padding:0 20px"> | |
| <div class="event-card" onclick="showToast('ดูรายละเอียดกิจกรรม','info')"> | |
| <div class="event-date-block"> | |
| <span class="event-date-day">15</span> | |
| <span class="event-date-month">พ.ค.</span> | |
| </div> | |
| <div class="event-body"> | |
| <h4 class="event-title">ค่ายเยาวชนฤดูร้อน 2568</h4> | |
| <div class="event-meta"> | |
| <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/></svg> ศูนย์ฝึกอบรม TLC | |
| </div> | |
| <div class="event-tags"><span class="event-tag green">เยาวชน</span><span class="event-tag blue">ลงทะเบียน</span></div> | |
| </div> | |
| <div class="event-arrow"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="9 18 15 12 9 6"/></svg></div> | |
| </div> | |
| <div class="event-card" onclick="showToast('ดูรายละเอียดกิจกรรม','info')"> | |
| <div class="event-date-block"> | |
| <span class="event-date-day" style="color:var(--accent)">20</span> | |
| <span class="event-date-month">พ.ค.</span> | |
| </div> | |
| <div class="event-body"> | |
| <h4 class="event-title">สัมมนาผู้นำกลุ่มพันธกิจ</h4> | |
| <div class="event-meta"> | |
| <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/></svg> ห้องประชุมใหญ่ | |
| </div> | |
| <div class="event-tags"><span class="event-tag green">ผู้นำ</span><span class="event-tag blue">9:00-16:00 น.</span></div> | |
| </div> | |
| <div class="event-arrow"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="9 18 15 12 9 6"/></svg></div> | |
| </div> | |
| <div class="event-card" onclick="showToast('ดูรายละเอียดกิจกรรม','info')"> | |
| <div class="event-date-block"> | |
| <span class="event-date-day" style="color:var(--danger)">25</span> | |
| <span class="event-date-month">พ.ค.</span> | |
| </div> | |
| <div class="event-body"> | |
| <h4 class="event-title">กีฬาสีคริสตจักร</h4> | |
| <div class="event-meta"> | |
| <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/></svg> สนามกีฬาหลังคริสตจักร | |
| </div> | |
| <div class="event-tags"><span class="event-tag green">ครอบครัว</span><span class="event-tag blue">ทั้งวัน</span></div> | |
| </div> | |
| <div class="event-arrow"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="9 18 15 12 9 6"/></svg></div> | |
| </div> | |
| <div class="empty-state"> | |
| <div class="empty-icon"> | |
| <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg> | |
| </div> | |
| <h3 class="empty-title">ไม่มีกิจกรรมเพิ่มเติม</h3> | |
| <p class="empty-desc">กิจกรรมใหม่จะประกาศเร็วๆ นี้</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- ===================== NEWS SCREEN ===================== --> | |
| <div class="screen" id="scr-news"> | |
| <div id="news-list-view"> | |
| <div class="form-header"> | |
| <div style="display:flex;align-items:center;gap:12px;flex:1"> | |
| <button class="form-back" onclick="switchTab('home')"> | |
| <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="15 18 9 12 15 6"/></svg> | |
| </button> | |
| <h1 class="form-title">บทความ & ข่าว</h1> | |
| </div> | |
| <button class="fab-mini" onclick="newsCreate()" style="width:36px;height:36px;border-radius:12px;background:var(--primary);color:#fff;display:flex;align-items:center;justify-content:center;border:none"> | |
| <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2.5"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg> | |
| </button> | |
| </div> | |
| <div class="chip-row"> | |
| <button class="chip active">ทั้งหมด</button> | |
| <button class="chip">คำเบิก</button> | |
| <button class="chip">ข่าวคริสตจักร</button> | |
| <button class="chip">คำพยาน</button> | |
| <button class="chip">สรุปเทศน์</button> | |
| </div> | |
| <div class="empty-state"> | |
| <div class="empty-icon"> | |
| <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg> | |
| </div> | |
| <h3 class="empty-title">ยังไม่มีโพสต์</h3> | |
| <p class="empty-desc">เริ่มต้นแชร์ข่าวสารกับชุมชน</p> | |
| </div> | |
| </div> | |
| <div id="news-form-view" style="display:none"> | |
| <div class="form-page"> | |
| <div class="form-header"> | |
| <button class="form-back" onclick="newsBack()"> | |
| <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="15 18 9 12 15 6"/></svg> | |
| </button> | |
| <h1 class="form-title">สร้างโพสต์</h1> | |
| </div> | |
| <div class="form-body"> | |
| <div class="form-group"> | |
| <label class="form-label">หัวข้อ</label> | |
| <input class="form-input" placeholder="หัวข้อโพสต์" /> | |
| </div> | |
| <div class="form-group"> | |
| <label class="form-label">หมวดหมู่</label> | |
| <select class="form-select"> | |
| <option>คำเบิก</option> | |
| <option>ข่าวคริสตจักร</option> | |
| <option>คำพยาน</option> | |
| <option>สรุปเทศน์</option> | |
| <option>กิจกรรม</option> | |
| </select> | |
| </div> | |
| <div class="form-group"> | |
| <label class="form-label">เนื้อหา</label> | |
| <textarea class="form-textarea" rows="6" placeholder="เขียนเนื้อหาของคุณ..."></textarea> | |
| </div> | |
| <button class="form-submit" onclick="newsBack();showToast('โพสต์ถูกสร้างแล้ว','success')">เผยแพร่โพสต์</button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- ===================== MORE SCREEN ===================== --> | |
| <div class="screen" id="scr-more"> | |
| <div class="app-header"> | |
| <div class="greeting-block"> | |
| <div class="greeting-label">เมนูเพิ่มเติม</div> | |
| <h1 class="greeting-text" style="font-size:22px">ทุกฟีเจอร์</h1> | |
| </div> | |
| <button class="icon-btn-round" onclick="toggleTheme()"> | |
| <svg id="theme-icon" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="5"/><path d="M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42"/></svg> | |
| </button> | |
| </div> | |
| <div class="more-section"> | |
| <div class="section-label" style="margin-bottom:12px"><span class="dot"></span>หมวดหมู่หลัก</div> | |
| <div class="more-grid"> | |
| <div class="more-item" onclick="showToast('เปิดพระคัมภีร์','success')"> | |
| <div class="more-icon" style="background:linear-gradient(135deg,#2979FF,#00BFA5)"><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2"><path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z"/><path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z"/></svg></div> | |
| <span class="more-label">พระคัมภีร์</span> | |
| </div> | |
| <div class="more-item" onclick="showToast('เปิดคำอธิษฐาน','success')"> | |
| <div class="more-icon" style="background:linear-gradient(135deg,#00C853,#00BFA5)"><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2"><path d="M18 8h1a4 4 0 0 1 0 8h-1"/><path d="M2 8h16v9a4 4 0 0 1-4 4H6a4 4 0 0 1-4-4V8z"/><line x1="6" y1="1" x2="6" y2="4"/><line x1="10" y1="1" x2="10" y2="4"/><line x1="14" y1="1" x2="14" y2="4"/></svg></div> | |
| <span class="more-label">คำอธิษฐาน</span> | |
| </div> | |
| <div class="more-item" onclick="showToast('ระบบถวายกำลังพัฒนา','info')"> | |
| <div class="more-icon" style="background:linear-gradient(135deg,#FF1744,#FFAB00)"><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2"><line x1="12" y1="1" x2="12" y2="23"/><path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"/></svg></div> | |
| <span class="more-label">ถวาย</span> | |
| </div> | |
| <div class="more-item" onclick="showToast('เปิดปฏิทิน','info')"> | |
| <div class="more-icon" style="background:linear-gradient(135deg,#00BFA5,#2979FF)"><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg></div> | |
| <span class="more-label">ปฏิทิน</span> | |
| </div> | |
| <div class="more-item" onclick="showToast('เปิดประกาศ','info')"> | |
| <div class="more-icon" style="background:linear-gradient(135deg,#FFAB00,#FF1744)"><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.73 21a2 2 0 0 1-3.46 0"/></svg></div> | |
| <span class="more-label">ประกาศ</span> | |
| </div> | |
| <div class="more-item" onclick="showToast('เปิดสื่อ','info')"> | |
| <div class="more-icon" style="background:linear-gradient(135deg,#00C853,#2979FF)"><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2"><polygon points="5 3 19 12 5 21 5 3"/></svg></div> | |
| <span class="more-label">สื่อ</span> | |
| </div> | |
| <div class="more-item" onclick="showToast('เปิดเพลง','info')"> | |
| <div class="more-icon" style="background:linear-gradient(135deg,#2979FF,#00C853)"><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2"><path d="M9 18V5l12-2v13"/><circle cx="6" cy="18" r="3"/><circle cx="18" cy="16" r="3"/></svg></div> | |
| <span class="more-label">เพลง</span> | |
| </div> | |
| <div class="more-item" onclick="showToast('เปิดสถิติ','info')"> | |
| <div class="more-icon" style="background:linear-gradient(135deg,#00BFA5,#00C853)"><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2"><line x1="18" y1="20" x2="18" y2="10"/><line x1="12" y1="20" x2="12" y2="4"/><line x1="6" y1="20" x2="6" y2="14"/></svg></div> | |
| <span class="more-label">สถิติ</span> | |
| </div> | |
| <div class="more-item" onclick="switchTab('profile')"> | |
| <div class="more-icon" style="background:linear-gradient(135deg,#718096,#4A5568)"><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"/></svg></div> | |
| <span class="more-label">ตั้งค่า</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- ===================== PROFILE SCREEN ===================== --> | |
| <div class="screen" id="scr-profile"> | |
| <div class="profile-hero"> | |
| <div class="profile-hero-bg"></div> | |
| <div class="profile-avatar-wrap"> | |
| <div class="profile-status-ring"></div> | |
| <div class="profile-avatar">T</div> | |
| </div> | |
| <h2 class="profile-name">TLC Member</h2> | |
| <span class="profile-role-badge member" id="profile-role-badge">สมาชิก</span> | |
| <div class="profile-stats-row"> | |
| <div class="profile-stat"> | |
| <div class="profile-stat-num">12</div> | |
| <div class="profile-stat-label">กลุ่ม</div> | |
| </div> | |
| <div class="profile-stat"> | |
| <div class="profile-stat-num">48</div> | |
| <div class="profile-stat-label">รายงาน</div> | |
| </div> | |
| <div class="profile-stat"> | |
| <div class="profile-stat-num">156</div> | |
| <div class="profile-stat-label">วันเข้าร่วม</div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="role-selector"> | |
| <div class="section-label" style="margin-bottom:8px"><span class="dot"></span>บทบาท (Demo)</div> | |
| <div class="role-segment"> | |
| <button class="role-segment-btn active" id="role-member" onclick="setRole('member')">สมาชิก</button> | |
| <button class="role-segment-btn" id="role-leader" onclick="setRole('body_leader')">Body Leader</button> | |
| <button class="role-segment-btn" id="role-admin" onclick="setRole('admin')">แอดมิน</button> | |
| </div> | |
| </div> | |
| <div class="menu-section"> | |
| <div class="menu-card"> | |
| <div class="menu-item" onclick="showToast('ตั้งค่าบัญชี','info')"> | |
| <div class="menu-icon-wrap" style="background:rgba(41,121,255,0.1)"> | |
| <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#2979FF" stroke-width="2"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg> | |
| </div> | |
| <div class="menu-text"> | |
| <p class="menu-text-title">ตั้งค่าบัญชี</p> | |
| <p class="menu-text-sub">แก้ไขข้อมูลส่วนตัว</p> | |
| </div> | |
| <div class="menu-chevron"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="9 18 15 12 9 6"/></svg></div> | |
| </div> | |
| <div class="menu-item" onclick="toggleTheme()"> | |
| <div class="menu-icon-wrap" style="background:rgba(0,200,83,0.1)"> | |
| <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#00C853" stroke-width="2"><circle cx="12" cy="12" r="5"/><path d="M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42"/></svg> | |
| </div> | |
| <div class="menu-text"> | |
| <p class="menu-text-title">ธีม</p> | |
| <p class="menu-text-sub" id="theme-label">โหมดสว่าง</p> | |
| </div> | |
| <button class="theme-toggle" id="theme-toggle" onclick="event.stopPropagation();toggleTheme()"> | |
| <div class="theme-toggle-dot"></div> | |
| </button> | |
| </div> | |
| <div class="menu-item" onclick="showToast('ความช่วยเหลือ','info')"> | |
| <div class="menu-icon-wrap" style="background:rgba(255,171,0,0.1)"> | |
| <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#FFAB00" stroke-width="2"><circle cx="12" cy="12" r="10"/><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg> | |
| </div> | |
| <div class="menu-text"> | |
| <p class="menu-text-title">ความช่วยเหลือ</p> | |
| <p class="menu-text-sub">คำถามที่พบบ่อย</p> | |
| </div> | |
| <div class="menu-chevron"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="9 18 15 12 9 6"/></svg></div> | |
| </div> | |
| <div class="menu-item" onclick="showToast('ออกจากระบบแล้ว','success');setTimeout(()=>location.reload(),1500)" style="border-bottom:none"> | |
| <div class="menu-icon-wrap" style="background:rgba(255,23,68,0.1)"> | |
| <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#FF1744" stroke-width="2"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/><polyline points="16 17 21 12 16 7"/><line x1="21" y1="12" x2="9" y2="12"/></svg> | |
| </div> | |
| <div class="menu-text"> | |
| <p class="menu-text-title" style="color:var(--danger)">ออกจากระบบ</p> | |
| </div> | |
| <div class="menu-chevron"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="9 18 15 12 9 6"/></svg></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Bottom Navigation --> | |
| <nav class="bottom-nav" id="bottom-nav"> | |
| <button class="nav-item active" data-tab="home" onclick="switchTab('home')"> | |
| <div class="nav-indicator"></div> | |
| <div class="nav-icon"> | |
| <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg> | |
| </div> | |
| <span class="nav-label">หน้าหลัก</span> | |
| </button> | |
| <button class="nav-item" data-tab="map" onclick="switchTab('map')"> | |
| <div class="nav-indicator"></div> | |
| <div class="nav-icon"> | |
| <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="1 6 1 22 8 18 16 22 21 18 21 2 16 6 8 2 1 6"/><line x1="8" y1="2" x2="8" y2="18"/><line x1="16" y1="6" x2="16" y2="22"/></svg> | |
| </div> | |
| <span class="nav-label">แผนที่</span> | |
| </button> | |
| <button class="nav-item" data-tab="groups" onclick="switchTab('groups')"> | |
| <div class="nav-indicator"></div> | |
| <div class="nav-icon"> | |
| <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg> | |
| </div> | |
| <span class="nav-label">กลุ่ม</span> | |
| </button> | |
| <button class="nav-item" data-tab="mission" onclick="switchTab('mission')"> | |
| <div class="nav-indicator"></div> | |
| <div class="nav-icon"> | |
| <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/></svg> | |
| </div> | |
| <span class="nav-label">รายงาน</span> | |
| </button> | |
| <button class="nav-item" data-tab="more" onclick="switchTab('more')"> | |
| <div class="nav-indicator"></div> | |
| <div class="nav-icon"> | |
| <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="1"/><circle cx="12" cy="5" r="1"/><circle cx="12" cy="19" r="1"/></svg> | |
| </div> | |
| <span class="nav-label">อื่นๆ</span> | |
| </button> | |
| </nav> | |
| </div> | |
| </div> | |
| <!-- Toast Container --> | |
| <div class="toast-container" id="toast-container"></div> | |
| <script> | |
| let currentTab = 'home'; | |
| let role = 'member'; | |
| let reports = []; | |
| let darkMode = false; | |
| const TABS = { | |
| home: 'scr-home', map: 'scr-map', groups: 'scr-groups', | |
| mission: 'scr-mission', events: 'scr-events', news: 'scr-news', | |
| more: 'scr-more', profile: 'scr-profile' | |
| }; | |
| function updateTime() { | |
| const now = new Date(); | |
| const hours = String(now.getHours()).padStart(2, '0'); | |
| const mins = String(now.getMinutes()).padStart(2, '0'); | |
| const el = document.getElementById('status-time'); | |
| if (el) el.textContent = hours + ':' + mins; | |
| } | |
| setInterval(updateTime, 30000); | |
| updateTime(); | |
| function greetingLine() { | |
| const h = new Date().getHours(); | |
| if (h < 6) return 'ราตรีสวัสดิ์'; | |
| if (h < 12) return 'สวัสดีตอนเช้า'; | |
| if (h < 17) return 'สวัสดีตอนบ่าย'; | |
| return 'สวัสดีตอนเย็น'; | |
| } | |
| function showToast(msg, type) { | |
| type = type || 'info'; | |
| const container = document.getElementById('toast-container'); | |
| const toast = document.createElement('div'); | |
| toast.className = 'toast ' + type; | |
| const icons = { | |
| success: '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2.5"><polyline points="20 6 9 17 4 12"/></svg>', | |
| error: '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2.5"><circle cx="12" cy="12" r="10"/><line x1="15" y1="9" x2="9" y2="15"/><line x1="9" y1="9" x2="15" y2="15"/></svg>', | |
| info: '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2.5"><circle cx="12" cy="12" r="10"/><line x1="12" y1="16" x2="12" y2="12"/><line x1="12" y1="8" x2="12.01" y2="8"/></svg>' | |
| }; | |
| toast.innerHTML = (icons[type] || icons.info) + ' ' + msg; | |
| container.appendChild(toast); | |
| setTimeout(function() { | |
| if (toast.parentNode) toast.parentNode.removeChild(toast); | |
| }, 3000); | |
| } | |
| function switchTab(tab) { | |
| if (!TABS[tab]) return; | |
| Object.values(TABS).forEach(function(id) { | |
| var el = document.getElementById(id); | |
| if (el) el.classList.remove('active'); | |
| }); | |
| var target = document.getElementById(TABS[tab]); | |
| if (target) { | |
| target.classList.add('active'); | |
| target.scrollTop = 0; | |
| } | |
| document.querySelectorAll('.nav-item').forEach(function(el) { | |
| el.classList.toggle('on', el.dataset.tab === tab); | |
| el.classList.toggle('active', el.dataset.tab === tab); | |
| }); | |
| currentTab = tab; | |
| if (tab !== 'mission') missionBack(); | |
| if (tab !== 'news') newsBack(); | |
| var nav = document.getElementById('bottom-nav'); | |
| if (nav) { | |
| var mForm = document.getElementById('mission-form-view'); | |
| var nForm = document.getElementById('news-form-view'); | |
| var hide = (tab === 'mission' && mForm && mForm.style.display !== 'none') || | |
| (tab === 'news' && nForm && nForm.style.display !== 'none'); | |
| nav.style.display = hide ? 'none' : 'grid'; | |
| } | |
| } | |
| function toggleTheme() { | |
| darkMode = !darkMode; | |
| document.documentElement.setAttribute('data-theme', darkMode ? 'dark' : 'light'); | |
| var toggle = document.getElementById('theme-toggle'); | |
| if (toggle) toggle.classList.toggle('on', darkMode); | |
| var label = document.getElementById('theme-label'); | |
| if (label) label.textContent = darkMode ? 'โหมดมืด' : 'โหมดสว่าง'; | |
| var icon = document.getElementById('theme-icon'); | |
| if (icon) { | |
| if (darkMode) { | |
| icon.innerHTML = '<path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/>'; | |
| icon.setAttribute('fill', 'currentColor'); | |
| icon.setAttribute('stroke', 'none'); | |
| } else { | |
| icon.innerHTML = '<circle cx="12" cy="12" r="5"/><path d="M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42"/>'; | |
| icon.setAttribute('fill', 'none'); | |
| icon.setAttribute('stroke', 'currentColor'); | |
| } | |
| } | |
| showToast(darkMode ? 'เปิดโหมดมืดแล้ว' : 'เปิดโหมดสว่างแล้ว', 'success'); | |
| } | |
| function setRole(newRole) { | |
| role = newRole; | |
| document.getElementById('role-member').classList.toggle('active', newRole === 'member'); | |
| document.getElementById('role-leader').classList.toggle('active', newRole === 'body_leader'); | |
| document.getElementById('role-admin').classList.toggle('active', newRole === 'admin'); | |
| var sub = document.getElementById('greeting-sub'); | |
| var points = document.getElementById('home-points'); | |
| var badge = document.getElementById('profile-role-badge'); | |
| var dash = document.getElementById('admin-dash-home'); | |
| var gNum = document.getElementById('dash-groups-num'); | |
| var mNum = document.getElementById('dash-members-num'); | |
| var rNum = document.getElementById('dash-reports-num'); | |
| if (newRole === 'admin') { | |
| if (sub) sub.textContent = 'แอดมิน - ดูแลภาพรวมคริสตจักร'; | |
| if (badge) { badge.textContent = 'แอดมิน'; badge.className = 'profile-role-badge admin'; } | |
| if (dash) dash.style.display = 'block'; | |
| if (gNum) gNum.textContent = '124'; | |
| if (mNum) mNum.textContent = '1,240'; | |
| if (rNum) rNum.textContent = '48'; | |
| } else if (newRole === 'body_leader') { | |
| if (sub) sub.textContent = 'หัวหน้า Body - ขอให้พระเจ้าเสริมกำลังในพันธกิจ'; | |
| if (badge) { badge.textContent = 'หัวหน้า Body'; badge.className = 'profile-role-badge leader'; } | |
| if (dash) dash.style.display = 'block'; | |
| if (gNum) gNum.textContent = '18'; | |
| if (mNum) mNum.textContent = '142'; | |
| if (rNum) rNum.textContent = '12'; | |
| } else { | |
| if (sub) sub.textContent = 'ขอพระเจ้าอวยพระพรในวันนี้'; | |
| if (badge) { badge.textContent = 'สมาชิก'; badge.className = 'profile-role-badge member'; } | |
| if (dash) dash.style.display = 'none'; | |
| } | |
| updateMissionStats(); | |
| } | |
| function updateMissionStats() { | |
| var stats = document.getElementById('mission-stats-bar'); | |
| var count = document.getElementById('mission-stat-count'); | |
| if (!stats) return; | |
| if (role === 'admin' || role === 'body_leader') { | |
| stats.style.display = 'block'; | |
| if (count) count.textContent = reports.length; | |
| } else { | |
| stats.style.display = 'none'; | |
| } | |
| } | |
| function missionCreate() { | |
| var list = document.getElementById('mission-list-view'); | |
| var form = document.getElementById('mission-form-view'); | |
| if (list) list.style.display = 'none'; | |
| if (form) form.style.display = 'block'; | |
| var nav = document.getElementById('bottom-nav'); | |
| if (nav) nav.style.display = 'none'; | |
| } | |
| function missionBack() { | |
| var list = document.getElementById('mission-list-view'); | |
| var form = document.getElementById('mission-form-view'); | |
| if (list) list.style.display = 'block'; | |
| if (form) form.style.display = 'none'; | |
| var nav = document.getElementById('bottom-nav'); | |
| if (nav && currentTab !== 'mission') nav.style.display = 'grid'; | |
| } | |
| function missionSubmit() { | |
| var area = document.getElementById('m-area'); | |
| var time = document.getElementById('m-time'); | |
| var people = document.getElementById('m-people'); | |
| var lesson = document.getElementById('m-lesson'); | |
| if (!area || !time) return; | |
| if (!area.value || !time.value) { | |
| showToast('กรุณากรอกกลุ่ม/พื้นที่และวันเวลา', 'error'); | |
| return; | |
| } | |
| reports.unshift({ | |
| id: Date.now(), | |
| area: area.value, | |
| time: time.value, | |
| people: people ? people.value : '', | |
| lesson: lesson ? lesson.value : '' | |
| }); | |
| ['m-area','m-time','m-people','m-lesson','m-key','m-recv','m-apply','m-acts','m-notes','m-thanks'].forEach(function(id) { | |
| var el = document.getElementById(id); | |
| if (el) el.value = ''; | |
| }); | |
| renderReports(); | |
| missionBack(); | |
| showToast('ส่งรายงานพันธกิจสำเร็จ', 'success'); | |
| } | |
| function renderReports() { | |
| var empty = document.getElementById('mission-empty'); | |
| var container = document.getElementById('mission-cards-container'); | |
| if (!empty || !container) return; | |
| if (reports.length === 0) { | |
| empty.style.display = 'flex'; | |
| container.style.display = 'none'; | |
| } else { | |
| empty.style.display = 'none'; | |
| container.style.display = 'block'; | |
| container.innerHTML = reports.map(function(r) { | |
| var d = new Date(r.time); | |
| var dateStr = d.toLocaleDateString('th-TH', { day:'numeric', month:'short', year:'numeric' }); | |
| return '<div class="report-card anim-fade-up"><div class="report-header"><span class="report-area green">' + escapeHtml(r.area) + '</span><span class="report-time">' + dateStr + '</span></div><div class="report-body"><strong style="color:var(--primary)">ผู้เข้าร่วม:</strong> ' + escapeHtml(r.people || '-') + '<br><strong style="color:var(--primary)">บทเรียน:</strong> ' + escapeHtml(r.lesson || '-') + '</div><div class="report-footer"><span style="font-size:11px;color:var(--text-tertiary)">ทีมผู้ช่วย</span><span class="report-status approved"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="20 6 9 17 4 12"/></svg>ตรวจสอบแล้ว</span></div></div>'; | |
| }).join(''); | |
| } | |
| updateMissionStats(); | |
| } | |
| function escapeHtml(text) { | |
| var div = document.createElement('div'); | |
| div.textContent = text; | |
| return div.innerHTML; | |
| } | |
| function newsCreate() { | |
| var list = document.getElementById('news-list-view'); | |
| var form = document.getElementById('news-form-view'); | |
| if (list) list.style.display = 'none'; | |
| if (form) form.style.display = 'block'; | |
| var nav = document.getElementById('bottom-nav'); | |
| if (nav) nav.style.display = 'none'; | |
| } | |
| function newsBack() { | |
| var list = document.getElementById('news-list-view'); | |
| var form = document.getElementById('news-form-view'); | |
| if (list) list.style.display = 'block'; | |
| if (form) form.style.display = 'none'; | |
| var nav = document.getElementById('bottom-nav'); | |
| if (nav && currentTab !== 'news') nav.style.display = 'grid'; | |
| } | |
| // Init | |
| var greetEl = document.getElementById('greeting-text'); | |
| if (greetEl) greetEl.textContent = greetingLine(); | |
| setRole('member'); | |
| // Chip interactions | |
| document.querySelectorAll('.chip').forEach(function(chip) { | |
| chip.addEventListener('click', function() { | |
| var parent = this.parentElement; | |
| if (parent) { | |
| parent.querySelectorAll('.chip').forEach(function(c) { c.classList.remove('active'); }); | |
| } | |
| this.classList.add('active'); | |
| }); | |
| }); | |
| // Segment interactions | |
| document.querySelectorAll('.segment-control, .role-segment').forEach(function(seg) { | |
| seg.querySelectorAll('button').forEach(function(btn) { | |
| btn.addEventListener('click', function() { | |
| seg.querySelectorAll('button').forEach(function(b) { b.classList.remove('active'); }); | |
| this.classList.add('active'); | |
| }); | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html> | |