@import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@500;600;700&family=Barlow:ital,wght@0,300;0,400;0,500;0,600;0,700;0,900;1,400&family=Share+Tech+Mono&display=swap'); :root { --red: #D91919; --red2: #FF2D2D; --orange: #E8600A; --yellow: #F5A623; --bg: #0D0D0D; --bg2: #141414; --bg3: #1A1A1A; --card: #1E1E1E; --card2: #242424; --line: #2C2C2C; --line2: #353535; --t1: #F0F0F0; --t2: #A0A0A0; --t3: #555; --green: #1DB954; --blue: #2979FF; --fire: linear-gradient(135deg,#D91919 0%,#E8600A 60%,#F5A623 100%); --shadow: 0 8px 32px rgba(0,0,0,.7); --r: 16px; --rb: 24px; } * { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; } html, body { width: 100%; height: 100%; background: #080808; display: flex; align-items: center; justify-content: center; font-family: 'Barlow', sans-serif; overflow: hidden; } /* ─── PHONE SHELL ─────────────────────────────── */ .phone-shell { width: 390px; height: 844px; background: #111; border-radius: 50px; border: 2px solid #2A2A2A; box-shadow: 0 0 0 6px #0A0A0A, 0 0 0 8px #1E1E1E, 0 40px 120px rgba(0,0,0,.9), inset 0 0 0 1px rgba(255,255,255,.04); position: relative; overflow: hidden; display: flex; flex-direction: column; } /* notch */ .phone-shell::before { content:''; position:absolute; top:0; left:50%; transform:translateX(-50%); width:120px; height:32px; background:#111; border-radius:0 0 20px 20px; z-index:999; box-shadow: inset 0 -2px 6px rgba(0,0,0,.6); } /* Dynamic island camera */ .phone-shell::after { content:''; position:absolute; top:10px; left:50%; transform:translateX(-50%); width:90px; height:20px; background:#000; border-radius:12px; z-index:1000; } /* ─── STATUS BAR ──────────────────────────────── */ .statusbar { height: 44px; display: flex; align-items: flex-end; justify-content: space-between; padding: 0 28px 6px; background: var(--bg); position: relative; z-index: 100; flex-shrink: 0; } .statusbar .time { font-size: 13px; font-weight: 700; color: var(--t1); font-family: 'Barlow', sans-serif; letter-spacing: -.2px; } .statusbar .icons { display: flex; align-items: center; gap: 5px; font-size: 12px; color: var(--t1); } /* ─── SCREEN AREA ─────────────────────────────── */ .screen { flex: 1; background: var(--bg); overflow: hidden; position: relative; display: flex; flex-direction: column; } /* ─── ALL SCREENS ────────────────────────────── */ .sc { position: absolute; inset: 0; display: flex; flex-direction: column; overflow: hidden; opacity: 0; pointer-events: none; transform: translateX(20px); transition: opacity .28s cubic-bezier(.4,0,.2,1), transform .28s cubic-bezier(.4,0,.2,1); } .sc.active { opacity: 1; pointer-events: all; transform: translateX(0); } .sc.back-exit { transform: translateX(-20px); opacity: 0; } /* ─── SCROLLABLE BODY ─────────────────────────── */ .sc-body { flex: 1; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; padding-bottom: 80px; } .sc-body::-webkit-scrollbar { display: none; } /* ─── NAV BAR ─────────────────────────────────── */ .navbar { position: absolute; bottom: 0; left: 0; right: 0; height: 78px; background: rgba(18,18,18,.96); backdrop-filter: blur(20px); border-top: 1px solid var(--line); display: flex; align-items: flex-start; justify-content: space-around; padding-top: 10px; z-index: 200; } .nav-tab { display: flex; flex-direction: column; align-items: center; gap: 3px; cursor: pointer; padding: 4px 12px; border-radius: 12px; transition: all .2s; position: relative; } .nav-tab .nt-icon { font-size: 22px; transition: transform .2s; filter: grayscale(1) opacity(.5); } .nav-tab .nt-label { font-size: 10px; color: var(--t3); font-weight: 600; letter-spacing: .3px; transition: color .2s; } .nav-tab.active .nt-icon { filter: none; transform: scale(1.1); } .nav-tab.active .nt-label { color: var(--red); } .nav-tab .nt-dot { position: absolute; top: 2px; right: 10px; width: 8px; height: 8px; background: var(--red); border-radius: 50%; border: 2px solid var(--bg2); } /* ─── TOP BAR ─────────────────────────────────── */ .topbar { display: flex; align-items: center; justify-content: space-between; padding: 14px 20px 10px; background: var(--bg); flex-shrink: 0; position: relative; z-index: 10; } .topbar h1 { font-family: 'Rajdhani', sans-serif; font-size: 22px; font-weight: 700; color: var(--t1); letter-spacing: .3px; } .topbar .back-btn { width: 36px; height: 36px; background: var(--card2); border-radius: 10px; display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 18px; color: var(--t2); transition: background .2s; } .topbar .back-btn:active { background: var(--line2); } .topbar-actions { display: flex; gap: 8px; } .icon-pill { height: 36px; background: var(--card2); border-radius: 10px; display: flex; align-items: center; justify-content: center; padding: 0 10px; cursor: pointer; font-size: 18px; position: relative; gap: 5px; } .icon-pill .badge { background: var(--red); color: #fff; font-size: 9px; font-weight: 800; width: 16px; height: 16px; border-radius: 50%; display: flex; align-items: center; justify-content: center; position: absolute; top: -4px; right: -4px; border: 2px solid var(--bg); } /* ─── FIRE GRADIENT HEADER ────────────────────── */ .fire-header { background: var(--fire); padding: 20px 20px 24px; position: relative; overflow: hidden; flex-shrink: 0; } .fire-header::before { content: '🔥'; position: absolute; right: -10px; bottom: -20px; font-size: 100px; opacity: .08; } .fire-header .fh-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.5px; color: rgba(255,255,255,.7); margin-bottom: 4px; } .fire-header h2 { font-family: 'Rajdhani', sans-serif; font-size: 26px; font-weight: 700; color: #fff; line-height: 1.1; } .fire-header p { font-size: 13px; color: rgba(255,255,255,.8); margin-top: 4px; } /* ─── CARDS & TILES ───────────────────────────── */ .px { padding: 0 16px; } .py { padding-top: 12px; } .section-title { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.2px; color: var(--t3); padding: 14px 20px 8px; } .card { background: var(--card); border-radius: var(--r); overflow: hidden; margin: 0 16px 12px; border: 1px solid var(--line); } .card.glow { border-color: rgba(217,25,25,.3); box-shadow: 0 0 20px rgba(217,25,25,.1); } .card-row { display: flex; align-items: center; padding: 14px 16px; gap: 12px; border-bottom: 1px solid var(--line); cursor: pointer; transition: background .15s; position: relative; } .card-row:last-child { border-bottom: none; } .card-row:active { background: rgba(255,255,255,.03); } .row-icon { width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 20px; flex-shrink: 0; } .ri-fire { background: rgba(217,25,25,.15); } .ri-blue { background: rgba(41,121,255,.15); } .ri-green { background: rgba(29,185,84,.15); } .ri-orange{ background: rgba(232,96,10,.15); } .ri-yellow{ background: rgba(245,166,35,.15); } .ri-gray { background: rgba(255,255,255,.06); } .row-info { flex: 1; min-width: 0; } .row-info .ri-title { font-size: 14px; font-weight: 600; color: var(--t1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .row-info .ri-sub { font-size: 12px; color: var(--t2); margin-top: 1px; } .row-right { display: flex; align-items: center; gap: 6px; flex-shrink: 0; } .chevron { color: var(--t3); font-size: 14px; } /* ─── STAT CHIPS ──────────────────────────────── */ .stats-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 0 16px; margin-bottom: 12px; } .stat-chip { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 14px; position: relative; overflow: hidden; } .stat-chip::after { content:''; position:absolute; top:0; left:0; right:0; height:2px; background: var(--fire); } .sc-val { font-family: 'Rajdhani', sans-serif; font-size: 28px; font-weight: 700; color: var(--t1); line-height: 1; } .sc-lbl { font-size: 11px; color: var(--t2); margin-top: 3px; text-transform: uppercase; letter-spacing: .5px; } /* ─── TAGS ────────────────────────────────────── */ .tag { display: inline-flex; align-items: center; padding: 3px 8px; border-radius: 6px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; } .tag-red { background:rgba(217,25,25,.15); color:#FF5555; border:1px solid rgba(217,25,25,.25); } .tag-orange { background:rgba(232,96,10,.15); color:var(--orange); border:1px solid rgba(232,96,10,.25); } .tag-green { background:rgba(29,185,84,.12); color:var(--green); border:1px solid rgba(29,185,84,.2); } .tag-blue { background:rgba(41,121,255,.12); color:var(--blue); border:1px solid rgba(41,121,255,.2); } .tag-gray { background:rgba(255,255,255,.06);color:var(--t2); border:1px solid var(--line); } /* ─── PROGRESS ────────────────────────────────── */ .prog-item { padding: 0 20px 14px; } .prog-head { display:flex; justify-content:space-between; margin-bottom:5px; } .prog-name { font-size:13px; font-weight:500; color:var(--t1); } .prog-pct { font-size:12px; font-weight:700; color:var(--orange); font-family:'Share Tech Mono',monospace; } .prog-bar { height:5px; background:var(--line2); border-radius:3px; overflow:hidden; } .prog-fill { height:100%; border-radius:3px; background:var(--fire); } /* ─── FORM ────────────────────────────────────── */ .form-group { padding: 0 16px; margin-bottom: 12px; } .form-label { display:block; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.8px; color:var(--t3); margin-bottom:6px; } .form-input, .form-select, .form-ta { width:100%; background:var(--card2); border:1px solid var(--line2); border-radius:12px; padding:13px 14px; font-size:14px; color:var(--t1); font-family:'Barlow',sans-serif; outline:none; transition:border-color .2s; -webkit-appearance:none; } .form-input:focus, .form-select:focus, .form-ta:focus { border-color:var(--orange); } .form-ta { resize:none; height:90px; } .form-select option { background:var(--card2); } /* ─── BUTTON ──────────────────────────────────── */ .btn { width: calc(100% - 32px); margin: 0 16px; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 15px; border-radius: 14px; font-size: 15px; font-weight: 700; cursor: pointer; border: none; font-family: 'Barlow', sans-serif; text-transform: uppercase; letter-spacing: .5px; transition: all .2s; -webkit-appearance: none; } .btn:active { transform: scale(.97); } .btn-fire { background: var(--fire); color: #fff; box-shadow: 0 4px 20px rgba(217,25,25,.4); } .btn-dark { background: var(--card2); color: var(--t1); border: 1px solid var(--line2); } .btn-outline-red { background: rgba(217,25,25,.1); color: var(--red2); border: 1px solid rgba(217,25,25,.3); } .btn-sm { width: auto; margin: 0; padding: 8px 14px; font-size: 12px; border-radius: 10px; } .btn-alarm { background: var(--red); color: #fff; box-shadow: 0 0 30px rgba(217,25,25,.5); animation: alarmPulse 2s infinite; font-size: 17px; padding: 18px; border-radius: 18px; } @keyframes alarmPulse { 0%,100% { box-shadow:0 0 20px rgba(217,25,25,.5); } 50% { box-shadow:0 0 50px rgba(217,25,25,.8), 0 0 80px rgba(232,96,10,.3); } } /* ─── PILL SEGMENT ────────────────────────────── */ .seg { display: flex; background: var(--card2); border-radius: 12px; padding: 3px; margin: 0 16px 14px; } .seg-btn { flex: 1; padding: 8px; border-radius: 10px; font-size: 12px; font-weight: 600; color: var(--t3); cursor: pointer; text-align: center; transition: all .2s; } .seg-btn.active { background: var(--red); color: #fff; } /* ─── QUIZ ────────────────────────────────────── */ .quiz-wrap { padding: 16px; } .quiz-bar-outer { height:3px; background:var(--line2); border-radius:2px; margin-bottom:20px; } .quiz-bar-inner { height:100%; background:var(--fire); border-radius:2px; transition:width .4s; } .quiz-q { font-size: 18px; font-weight: 600; color: var(--t1); line-height: 1.45; margin-bottom: 20px; } .quiz-opt { display: flex; align-items: center; gap: 12px; padding: 14px; background: var(--card2); border-radius: 12px; margin-bottom: 10px; cursor: pointer; border: 1.5px solid transparent; transition: all .15s; } .quiz-opt:active { transform: scale(.98); } .quiz-opt .opt-letter { width: 28px; height: 28px; background: var(--line2); border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; color: var(--t2); flex-shrink: 0; font-family: 'Rajdhani', sans-serif; } .quiz-opt .opt-text { font-size: 14px; color: var(--t1); flex:1; } .quiz-opt.correct { border-color:var(--green); background:rgba(29,185,84,.1); } .quiz-opt.wrong { border-color:var(--red); background:rgba(217,25,25,.1); } .quiz-opt.correct .opt-letter { background:var(--green); color:#fff; } .quiz-opt.wrong .opt-letter { background:var(--red); color:#fff; } /* ─── FLASHCARD ───────────────────────────────── */ .fc-wrap { padding: 16px; perspective: 800px; } .fc { width: 100%; height: 200px; position: relative; transform-style: preserve-3d; transition: transform .55s cubic-bezier(.4,0,.2,1); cursor: pointer; margin-bottom: 16px; } .fc.flip { transform: rotateY(180deg); } .fc-face { position: absolute; inset: 0; border-radius: 18px; backface-visibility: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 24px; text-align: center; } .fc-front { background:var(--card); border:1.5px solid var(--line2); } .fc-back { background:linear-gradient(145deg,rgba(217,25,25,.12),rgba(232,96,10,.06)); border:1.5px solid rgba(217,25,25,.25); transform:rotateY(180deg); } .fc-q { font-size:17px; font-weight:600; color:var(--t1); line-height:1.4; } .fc-a { font-size:14px; color:var(--t2); line-height:1.5; } .fc-hint { font-size:11px; color:var(--t3); margin-top:10px; } .fc-actions { display:flex; gap:10px; } .fc-btn { flex:1; padding:12px; border-radius:12px; font-size:13px; font-weight:700; cursor:pointer; border:none; text-align:center; font-family:'Barlow',sans-serif; transition:all .15s; } .fc-btn:active { transform:scale(.96); } .fc-again { background:rgba(217,25,25,.12); color:var(--red2); border:1.5px solid rgba(217,25,25,.2); } .fc-ok { background:rgba(255,255,255,.06); color:var(--t2); border:1.5px solid var(--line2); } .fc-good { background:rgba(29,185,84,.12); color:var(--green); border:1.5px solid rgba(29,185,84,.2); } /* ─── PAGER ───────────────────────────────────── */ .pager-body { padding: 16px; } .pager-device { background: linear-gradient(170deg,#2C2C2C,#1A1A1A); border: 2px solid #3A3A3A; border-radius: 20px; padding: 16px; margin-bottom: 16px; box-shadow: 0 12px 40px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.04); position: relative; } .pager-btns { display: flex; gap: 6px; margin-bottom: 10px; } .pager-btn { height: 10px; background: #3A3A3A; border-radius: 3px; flex: 1; box-shadow: inset 0 2px 3px rgba(0,0,0,.4); } .pager-btn:first-child { max-width: 22px; } .pager-screen { background: #1A2A1A; border: 2px solid #0D1A0D; border-radius: 10px; padding: 12px; min-height: 110px; font-family: 'Share Tech Mono', monospace; box-shadow: inset 0 3px 8px rgba(0,0,0,.5); position: relative; overflow: hidden; } .pager-screen.alarming { animation: screenFlash .4s infinite; } @keyframes screenFlash { 0%,100%{background:#1A2A1A} 50%{background:#251A1A} } .pager-dt { font-size:10px; color:#7AAA7A; display:flex; justify-content:space-between; margin-bottom:8px; } .pager-msg { font-size:15px; color:#AACCAA; line-height:1.5; letter-spacing:.5px; text-transform:uppercase; white-space:pre-line; } .pager-msg.fire-msg { color:#FFD700; text-shadow:0 0 12px rgba(255,215,0,.4); animation:msgGlow 1s infinite; } @keyframes msgGlow { 0%,100%{color:#FFD700;text-shadow:0 0 8px rgba(255,215,0,.4);} 50%{color:#FFF;text-shadow:0 0 20px rgba(255,255,255,.7);} } .pager-brand { font-size:9px; color:#444; text-align:center; margin-top:8px; letter-spacing:2px; } /* ─── ALARM PANEL ─────────────────────────────── */ .alarm-form { padding: 0 0 8px; } .alarm-title { display: flex; align-items: center; gap: 10px; padding: 16px 20px; font-family: 'Rajdhani', sans-serif; font-size: 18px; font-weight: 700; color: var(--red2); text-transform: uppercase; letter-spacing: 1px; border-bottom: 1px solid var(--line); } /* ─── LEXIKON ─────────────────────────────────── */ .alpha-scroll { display: flex; gap: 4px; padding: 10px 16px; overflow-x: auto; scrollbar-width: none; flex-shrink: 0; } .alpha-scroll::-webkit-scrollbar { display:none; } .alpha-chip { min-width: 28px; height: 28px; background: var(--card2); border: 1px solid var(--line2); border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; cursor: pointer; color: var(--t2); font-family: 'Rajdhani', sans-serif; flex-shrink: 0; transition: all .15s; } .alpha-chip.active { background:var(--red); color:#fff; border-color:var(--red); } .lex-entry { padding: 14px 20px; border-bottom: 1px solid var(--line); } .lex-term { font-family:'Rajdhani',sans-serif; font-size:17px; font-weight:700; color:var(--t1); margin-bottom:3px; } .lex-def { font-size:13px; color:var(--t2); line-height:1.55; } /* ─── SUPPORT ─────────────────────────────────── */ .ticket-item { margin: 0 16px 10px; background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 14px; cursor: pointer; transition: border-color .15s; } .ticket-item:active { border-color: var(--line2); } .ticket-item .t-top { display:flex; align-items:center; gap:8px; margin-bottom:6px; } .ticket-item .t-id { font-family:'Share Tech Mono',monospace; font-size:11px; color:var(--orange); } .ticket-item .t-title { font-size:14px; font-weight:600; color:var(--t1); flex:1; } .ticket-item .t-meta { font-size:11px; color:var(--t3); } /* ─── ADMIN ────────────────────────────────────── */ .admin-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 0 16px; margin-bottom: 16px; } .admin-tile { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 16px; cursor: pointer; transition: all .15s; text-align: center; } .admin-tile:active { background:var(--card2); transform:scale(.97); } .admin-tile .at-icon { font-size:28px; margin-bottom:8px; display:block; } .admin-tile .at-name { font-size:12px; font-weight:600; color:var(--t1); } .admin-tile .at-sub { font-size:10px; color:var(--t3); margin-top:2px; } /* ─── TOGGLE ──────────────────────────────────── */ .toggle-row { display: flex; align-items: center; justify-content: space-between; padding: 13px 0; border-bottom: 1px solid rgba(255,255,255,.04); } .toggle-row:last-child { border:none; } .toggle-info .tg-name { font-size:14px; font-weight:500; color:var(--t1); } .toggle-info .tg-sub { font-size:11px; color:var(--t3); margin-top:1px; } .tgl { position:relative; width:46px; height:26px; cursor:pointer; flex-shrink:0; } .tgl input { opacity:0; width:0; height:0; } .tgl-sl { position:absolute; inset:0; background:var(--line2); border-radius:13px; transition:.3s; border:1px solid var(--line); } .tgl-sl::before { content:''; position:absolute; width:20px; height:20px; left:2px; top:2px; background:var(--t3); border-radius:50%; transition:.3s; } .tgl input:checked + .tgl-sl { background:rgba(217,25,25,.3); border-color:var(--red); } .tgl input:checked + .tgl-sl::before { transform:translateX(20px); background:var(--red); } /* ─── USER ROW ────────────────────────────────── */ .user-row { display: flex; align-items: center; padding: 12px 20px; gap: 12px; border-bottom: 1px solid var(--line); cursor: pointer; } .user-row:active { background:rgba(255,255,255,.02); } .u-av { width:38px; height:38px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:14px; font-weight:700; color:#fff; flex-shrink:0; } .u-info .u-name { font-size:14px; font-weight:600; color:var(--t1); } .u-info .u-sub { font-size:11px; color:var(--t2); margin-top:1px; } .u-right { margin-left:auto; display:flex; align-items:center; gap:6px; } /* ─── LOG ─────────────────────────────────────── */ .log-row { display: flex; gap: 10px; padding: 10px 20px; border-bottom: 1px solid rgba(255,255,255,.03); } .log-t { font-size:10px; color:var(--t3); font-family:'Share Tech Mono',monospace; flex-shrink:0; width:42px; } .log-txt{ font-size:12px; color:var(--t2); line-height:1.5; } .log-txt strong { color:var(--orange); } /* ─── CALENDAR ────────────────────────────────── */ .cal-grid { display: grid; grid-template-columns: repeat(7,1fr); gap: 3px; padding: 0 16px 8px; } .cal-head { text-align:center; font-size:10px; color:var(--t3); padding:4px; font-weight:700; text-transform:uppercase; } .cal-day { background:var(--card2); border-radius:8px; padding:6px 2px; text-align:center; font-size:12px; color:var(--t2); cursor:pointer; min-height:44px; position:relative; transition:all .15s; display:flex; flex-direction:column; align-items:center; gap:2px; } .cal-day:active { background:var(--line2); } .cal-day.today { background:rgba(217,25,25,.15); color:var(--red2); font-weight:700; border:1px solid rgba(217,25,25,.25); } .cal-day.event::after { content:''; width:5px; height:5px; background:var(--orange); border-radius:50%; } .cal-day.empty { background:transparent; } /* ─── TOAST ───────────────────────────────────── */ .toast-wrap { position: absolute; top: 0; left: 0; right: 0; z-index: 999; pointer-events: none; padding: 10px 14px 0; display: flex; flex-direction: column; gap: 6px; } .toast { background: rgba(28,28,28,.96); backdrop-filter: blur(20px); border-radius: 14px; padding: 12px 14px; display: flex; align-items: flex-start; gap: 10px; border: 1px solid var(--line2); box-shadow: 0 8px 32px rgba(0,0,0,.5); animation: toastIn .3s cubic-bezier(.4,0,.2,1); pointer-events: all; } @keyframes toastIn { from{transform:translateY(-100%) scale(.9);opacity:0} to{transform:translateY(0) scale(1);opacity:1} } .toast.alarm { border-left:3px solid var(--red); } .toast.success{ border-left:3px solid var(--green); } .toast.info { border-left:3px solid var(--blue); } .t-ico { font-size:18px; margin-top:1px; flex-shrink:0; } .t-title { font-size:13px; font-weight:700; color:var(--t1); } .t-msg { font-size:12px; color:var(--t2); margin-top:1px; } /* ─── ACTIVITY DOT ────────────────────────────── */ .act-row { display:flex; align-items:flex-start; gap:10px; padding:10px 20px; border-bottom:1px solid rgba(255,255,255,.03); } .act-dot { width:7px; height:7px; border-radius:50%; margin-top:5px; flex-shrink:0; } .ad-r{background:var(--red)} .ad-g{background:var(--green)} .ad-o{background:var(--orange)} .ad-b{background:var(--blue)} .act-txt { flex:1; font-size:13px; color:var(--t2); line-height:1.5; } .act-txt strong { color:var(--t1); } .act-time{ font-size:10px; color:var(--t3); font-family:'Share Tech Mono',monospace; flex-shrink:0; margin-top:2px; } /* ─── DIENSTPLAN ──────────────────────────────── */ .dienst-item { display:flex; align-items:center; gap:12px; padding:14px 20px; border-bottom:1px solid var(--line); } .dienst-icon { font-size:22px; } .dienst-info .di-title { font-size:14px; font-weight:600; color:var(--t1); } .dienst-info .di-sub { font-size:11px; color:var(--t2); margin-top:1px; } /* ─── LOGIN ───────────────────────────────────── */ #sc-login { background: var(--bg); justify-content: flex-end; } .login-top { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 0 32px; gap: 6px; } .login-fire { font-size: 64px; margin-bottom: 8px; filter: drop-shadow(0 0 30px rgba(217,25,25,.5)); animation: fireFloat 3s ease-in-out infinite; } @keyframes fireFloat { 0%,100%{transform:translateY(0) scale(1)} 50%{transform:translateY(-8px) scale(1.03)} } .login-name { font-family: 'Rajdhani', sans-serif; font-size: 26px; font-weight: 700; color: var(--t1); text-align: center; line-height: 1.1; } .login-sub { font-size:12px; color:var(--t3); letter-spacing:1.5px; text-transform:uppercase; } .login-bottom { background: var(--bg2); border-radius: 28px 28px 0 0; padding: 24px 20px 32px; border-top: 1px solid var(--line); flex-shrink: 0; } .login-demo { margin: 12px 0 0; padding: 10px 14px; background: rgba(255,255,255,.04); border-radius: 10px; font-size: 11px; color: var(--t3); text-align: center; } .login-demo strong { color: var(--orange); } /* ─── REGISTER ────────────────────────────────── */ .reg-scroll { padding-bottom: 24px; } /* ─── ADMIN PERM PANEL ─────────────────────────── */ #permPanel { border-top: 1px solid var(--line); margin-top: 8px; } /* ─── DIVIDER ─────────────────────────────────── */ .divider { height: 1px; background: var(--line); margin: 4px 20px; } /* ─── PILL ────────────────────────────────────── */ .pill { display:inline-flex; align-items:center; padding:4px 10px; border-radius:20px; font-size:11px; font-weight:700; } .pill-green { background:rgba(29,185,84,.12); color:var(--green); } .pill-red { background:rgba(217,25,25,.12); color:var(--red2); } .pill-warn { background:rgba(245,166,35,.12); color:var(--yellow); } /* ─── MAINTENANCE BANNER ──────────────────────── */ .warn-banner { margin: 10px 16px; padding: 10px 14px; background: rgba(245,166,35,.08); border: 1px solid rgba(245,166,35,.2); border-radius: 12px; font-size: 12px; color: var(--yellow); display: flex; align-items: flex-start; gap: 8px; } /* ─── SCROLL AREA INSET ───────────────────────── */ .inset { padding: 0 20px; } /* ─── SMOOTH GLOW LINE ────────────────────────── */ .glow-line { height: 2px; background: var(--fire); margin: 0; box-shadow: 0 0 10px rgba(217,25,25,.5); } /* ─── RESPONSIVE (tablet preview) ─────────────── */ @media (max-width: 430px) { .phone-shell { width: 100%; height: 100dvh; border-radius: 0; border: none; box-shadow: none; } html, body { overflow: auto; align-items: flex-start; } }
14:35
●●● WiFi 🔋
←

Registrierung

Willkommen zurück

Max Mustermann

Administrator · FF Musterstadt

⚠️
Wartung geplant: Modul „Truppführer" – 28.06. 02:00–04:00 Uhr
247
Aktive User
68%
Ø Fortschritt
1842
Quiz Antworten
2
Alarme heute
Lernfortschritt
QS1 Einsatzfähig92%
QS2 Truppmann76%
QS3 Truppführer54%
Jugendfeuerwehr81%
Letzte Aktivitäten
🚨 ALARM – Brand Industriegebiet Nord
14:32
J. Schmidt Quiz Truppmann 94% ✓
13:55
Admin Lerngruppe FF freigeschaltet
12:18
Ticket #0042 von T. Braun eingegangen
11:44

Lernen

Mein Level
❓
Quiz
QS2 Truppmann · 67% Fortschritt
QS2›
🃏
Karteikarten
68% gelernt · 32% wiederholen
›
Referenz
📚
Lexikon A–Z
Fachbegriffe & Erklärungen
›
📋
Vorschriften
FwDV, DIN, UVV · PDF-Download
›
Jugendfeuerwehr
🧩
JF Quiz
Speziell für Jugendfeuerwehr
›
📅
Dienstplan
Übungen & Termine
›
←

Quiz

▶
Alle Level
QS2
QS3
Verfügbare Module
🎯
Truppmann Grundlagen
20 Fragen · QS2
›
🧯
Brandbekämpfung
15 Fragen · QS2
›
🔧
Technische Hilfe
18 Fragen · QS3
Gesperrt›
←

Karteikarten

+
68%
Gelernt
32%
Wiederholen
Was bedeutet FwDV 3?
Antippen zum Umdrehen
FwDV 3 – Feuerwehr-Dienstvorschrift 3: Einheiten im Löscheinsatz. Regelt Truppstärken und Aufgabenverteilung.
Lerngruppen
👥
FF Musterstadt
42 Karten · Freigegeben
›
🧑‍🚒
Jugendfeuerwehr
28 Karten · Freigegeben
›
←

Neue Karte

←

Lexikon

ABC-Einsatz
Einsatz bei Gefahren durch atomare, biologische oder chemische Stoffe. Erfordert Spezialausrüstung (CSA).
Atemschutzgeräteträger
Feuerwehrangehöriger mit Ausbildung zum Tragen von Atemschutzgeräten. Mindestalter 18 Jahre.
Brandschutz
Gesamtheit aller Maßnahmen zur Verhütung und Bekämpfung von Bränden sowie Rettung von Personen.
FwDV 3
Feuerwehr-Dienstvorschrift 3: Einheiten im Löscheinsatz. Regelt taktische Gliederung und Aufgaben.
Gruppenführer
Führungskraft einer Gruppe (1+8). Verantwortlich für Führung, Einsatzdurchführung und Sicherheit.
Hohlstrahlrohr
Mehrzweck-Strahlrohr mit einstellbarer Strahlform. Standard-Löschgerät bei modernen Feuerwehren.
MANV
Massenanfall von Verletzten. Besondere Einsatzlage mit vielen verletzten Personen gleichzeitig.
←

Vorschriften

FwDV – Dienstvorschriften
📄
FwDV 1
Grundtätigkeiten
PDF›
📄
FwDV 2
Ausbildung der FF
PDF›
📄
FwDV 3
Einheiten im Löscheinsatz
PDF›
📄
FwDV 100
Führung und Leitung
PDF›
Normen & Richtlinien
📋
DIN 14 011
Begriffe aus dem Feuerwehrwesen
PDF›
📋
UVV Feuerwehr
Unfallverhütungsvorschriften
PDF›
←

JF Quiz

+
Jugendfeuerwehr Module
🧯
Brandschutz Grundlagen JF
20 Fragen · Ausbilder M. Weber
›
🪣
Löschmittelkunde
15 Fragen · Admin
›
🚒
Fahrzeugkunde
12 Fragen · Ausbilder K. Maier
›
←

Dienstplan

Juni 2025
‹
›
Kommende Dienste
🚒
Übungsabend JF
Fr. 28.06. · 18:00 Uhr · Gerätehaus
Pflicht
🎓
Ausbildung Truppmann
Sa. 29.06. · 09:00 Uhr · Übungsplatz
Freiwillig
🏅
JF-Leistungsabzeichen
Sa. 06.07. · 10:00 Uhr · Kreisebene
Wichtig

🚨 Alarm

📜
22.06.2025 14:35 Adr.1
BEREIT FEUERWEHR CAMPUS SYSTEM ONLINE
SWISSPHONE s.QUAD X15
🚨 Alarm Pendel
←

Alarm-Historie

B2 – BRAND GEBÄUDE 22.06. 11:23
📍 Industriestraße 44 · Stichwort: B2

Support

+
Offen
In Bearbeitung
Gelöst
#0042Quiz Frage falsch bewertetOffen
👤 T. Braun · 21.06.2025 · 15:22
#0041Passwort zurücksetzenBearbeitung
👤 S. Hoffmann · 20.06.2025 · 09:14
#0040Dienstplan nicht sichtbarGelöst
👤 A. Müller · 19.06.2025 · 17:44
←

Neues Ticket

←

Ticket #0042

Offen
Quiz Frage falsch bewertet
👤 T. Braun · 21.06.2025 · 15:22 · Technisches Problem
Beim Quiz „Truppmann Grundlagen" Frage 4 wird meine korrekte Antwort als falsch markiert. Die Antwort B müsste laut FwDV 3 richtig sein.
Antwort (Moderator)

Admin Panel

👥
Benutzer
247 aktiv
🔑
Berechtigungen
Rollen verwalten
🔧
Bereiche
Freischalten / Sperren
❓
Quiz-Verwaltung
Fragen & Module
📩
Einladung
E-Mail / WhatsApp
📜
System Logs
Audit-Protokoll
📟
Alarm-Rechte
Wer darf auslösen
🏢
Gruppen
Erstellen & verwalten
Bereiche-Status
📝
Quiz – QS1
Zuletzt: 20.06.2025
● Online
🃏
Karteikarten Truppführer
Zuletzt: 18.06.2025
⚠ Wartung
📟
Pager / Alarm (JF)
Zuletzt: 22.06.2025
● Online
←

Benutzer

+
MM
Max Mustermann
Gruppenführer · FF Musterstadt
Admin›
JB
Jana Braun
QS3 Truppführer · FF Musterhausen
Mod›
TH
Tim Hofmann
Neu Einsteiger · JF Musterstadt
User›
LK
Lisa König
QS2 Truppmann · BF Hamburg
User›
←

Berechtigungen

MM
Max Mustermann
Gruppenführer · FF Musterstadt
Zugang & Funktionen
Quiz bearbeiten
Fragen erstellen und bearbeiten
Karteikarten erstellen
🚨 Alarm auslösen
Pager-Alarm aktivieren
Einladungslink senden
Support antworten
Moderator-Funktion
Lexikon bearbeiten
Feuerwehr-Typ Zugang
Jugendfeuerwehr
Freiwillige Feuerwehr
Bundeswehr Feuerwehr
Mil. Brandschutz
Berufsfeuerwehr
←

System Logs

14:35
🚨 ALARM von admin – B2 Industriestraße 44
13:55
✅ Quiz: J. Schmidt – QS2 94%
12:18
🔓 Lerngruppe FF Musterstadt freigeschaltet
11:44
🎫 Ticket #0042 von T. Braun
10:30
👤 3 neue User über Einladungslink
09:00
🔄 System-Update v2.1.4
Gst.
⚙️ Bereich Truppführer in Wartung

Profil

✏️
MM
Max Mustermann
Administrator
FF Musterstadt Gruppenführer
Mein Fortschritt
QS2 Truppmann76%
Karteikarten68%
Konto
🔒
Passwort ändern
›
📍
Bundesland: Bayern
›
🚪
Abmelden
›