Ana Sayfa Keşfet Yardım
Giriş Yap
u23-27moroz
/
PWA_FIREALARM
1
0
Çatalla 0
Dosyalar Sorunlar 0 Değişiklik İstekleri 0 Wiki
Dal: master
Dallar Biçim İmleri
PWA_FIREALARM
/
style.css

style.css 14 KB
Kalıcı Bağlantı Geçmiş Ham

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177 
  1. :root{--bg:#0b1020;--bg2:#121a33;--card:rgba(255,255,255,.055);--line:rgba(255,255,255,.12);--txt:#e8eefc;--mut:#98a6c8;--acc:#ff7a3d;--acc2:#ffd166;--cy:#5ec8ff;--ok:#42d392;--bad:#ff5470;--r:18px}
    2. 

  2. *{box-sizing:border-box}
    3. 

  3. html,body{margin:0;height:100%;background:var(--bg);color:var(--txt);font:16px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
    4. 

  4. body{background:radial-gradient(1200px 700px at 85% -10%,#2a1d3f 0,transparent 60%),radial-gradient(900px 600px at -10% 110%,#10325a 0,transparent 55%),var(--bg);background-attachment:fixed}
    5. 

  5. .app{max-width:1100px;margin:0 auto;min-height:100%;display:flex;flex-direction:column;padding:0 16px}
    6. 

  6. .top{display:flex;align-items:center;gap:12px;padding:14px 0;position:sticky;top:0;z-index:5;backdrop-filter:blur(10px)}
    7. 

  7. .brand{display:flex;gap:8px;align-items:center;white-space:nowrap;font-size:15px}.logo{font-size:22px}
    8. 

  8. .dots{flex:1;display:flex;gap:6px;justify-content:center}
    9. 

  9. .dot{width:100%;max-width:44px;height:6px;border-radius:6px;background:var(--line);transition:.3s}
    10. 

  10. .dot.done{background:var(--ok)}.dot.cur{background:linear-gradient(90deg,var(--acc),var(--acc2));box-shadow:0 0 12px var(--acc)}
    11. 

  11. .icon-btn{background:var(--card);border:1px solid var(--line);color:var(--txt);width:40px;height:40px;border-radius:50%;font-size:18px;cursor:pointer}
    12. 

  12. .stage{flex:1;padding:8px 0 20px;animation:in .45s ease}
    13. 

  13. @keyframes in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
    14. 

  14. h1{font-size:clamp(30px,6vw,56px);line-height:1.05;margin:.2em 0}
    15. 

  15. h2{font-size:clamp(22px,3.6vw,32px);margin:.2em 0}
    16. 

  16. h3{margin:.2em 0 .4em}
    17. 

  17. .lead{color:var(--mut);max-width:70ch;margin:.3em 0 1em}
    18. 

  18. .grad{background:linear-gradient(90deg,var(--acc),var(--acc2));-webkit-background-clip:text;background-clip:text;color:transparent}
    19. 

  19. .card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:16px;backdrop-filter:blur(6px)}
    20. 

  20. .grid2{display:grid;grid-template-columns:1.3fr 1fr;gap:16px}
    21. 

  21. .grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
    22. 

  22. @media(max-width:820px){.grid2,.grid3{grid-template-columns:1fr}.brand b{display:none}}
    23. 

  23. .btn{font:inherit;border:1px solid var(--line);background:var(--card);color:var(--txt);padding:10px 18px;border-radius:999px;cursor:pointer;transition:.2s}
    24. 

  24. .btn:hover:not(:disabled){transform:translateY(-1px);border-color:var(--cy)}
    25. 

  25. .btn:disabled{opacity:.4;cursor:not-allowed}
    26. 

  26. .btn.primary{background:linear-gradient(135deg,var(--acc),#ff4d6d);border:0;font-weight:600;box-shadow:0 6px 22px rgba(255,90,60,.35)}
    27. 

  27. .btn.big{font-size:20px;padding:16px 34px}
    28. 

  28. .btn.ghost{background:transparent}
    29. 

  29. .btn.sm{padding:6px 12px;font-size:14px}
    30. 

  30. .btn.on{border-color:var(--acc);background:rgba(255,122,61,.18)}
    31. 

  31. .row{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
    32. 

  32. .bottom{display:flex;align-items:center;gap:12px;padding:12px 0 18px;position:sticky;bottom:0;backdrop-filter:blur(10px)}
    33. 

  33. .hint{flex:1;text-align:center;color:var(--mut);font-size:14px}.hint.ok{color:var(--ok)}
    34. 

  34. .hero{display:grid;place-items:center;text-align:center;padding:30px 0}
    35. 

  35. .hero canvas{width:100%;max-width:560px;border-radius:var(--r);border:1px solid var(--line);margin-bottom:16px}
    36. 

  36. .pill{display:inline-block;padding:3px 10px;border-radius:99px;background:rgba(94,200,255,.14);color:var(--cy);font-size:13px}
    37. 

  37. canvas.cv{width:100%;border-radius:14px;border:1px solid var(--line);background:#0b0f1a;display:block}
    38. 

  38. .svg{width:100%;height:auto;display:block}
    39. 

  39. .svg text{fill:#9fb0d0;font-size:12px;font-family:inherit}
    40. 

  40. input[type=range]{width:100%;accent-color:var(--acc);height:28px}
    41. 

  41. .lamp{display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border-radius:12px;background:rgba(0,0,0,.25);border:1px solid var(--line);font-size:14px}
    42. 

  42. .lamp i{width:12px;height:12px;border-radius:50%;background:#394260;display:inline-block;transition:.2s}
    43. 

  43. .lamp.on i{background:var(--bad);box-shadow:0 0 12px var(--bad)}
    44. 

  44. .lamp.on{border-color:var(--bad)}
    45. 

  45. .lamp.green.on i{background:var(--ok);box-shadow:0 0 12px var(--ok)}
    46. 

  46. .bar{height:14px;border-radius:8px;background:rgba(255,255,255,.1);position:relative;overflow:hidden}
    47. 

  47. .bar>div{height:100%;background:linear-gradient(90deg,var(--cy),var(--acc2));width:0}
    48. 

  48. .bar .thr{position:absolute;top:0;bottom:0;width:2px;background:var(--bad)}
    49. 

  49. .msg{padding:10px 14px;border-radius:12px;background:rgba(255,255,255,.06);border-left:4px solid var(--cy);margin:10px 0;min-height:24px}
    50. 

  50. .msg.good{border-color:var(--ok)}.msg.bad{border-color:var(--bad)}
    51. 

  51. .quiz{margin-top:14px}
    52. 

  52. .opt{display:block;width:100%;text-align:left;margin:6px 0;padding:11px 14px;border-radius:12px;border:1px solid var(--line);background:rgba(255,255,255,.04);color:var(--txt);font:inherit;cursor:pointer;transition:.15s}
    53. 

  53. .opt:hover:not(:disabled){border-color:var(--cy);background:rgba(94,200,255,.08)}
    54. 

  54. .opt.right{background:rgba(66,211,146,.2);border-color:var(--ok)}
    55. 

  55. .opt.wrong{background:rgba(255,84,112,.2);border-color:var(--bad);animation:shake .35s}
    56. 

  56. @keyframes shake{25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
    57. 

  57. .room{position:relative;overflow:hidden;min-height:130px;text-align:left}
    58. 

  58. .room h4{margin:0}.room small{color:var(--mut)}
    59. 

  59. .room .flame{position:absolute;right:14px;bottom:8px;font-size:46px;opacity:0;transform:scale(.2);transition:.4s;filter:drop-shadow(0 0 14px #ff6a2d)}
    60. 

  60. .room.burn .flame{opacity:1;transform:scale(1);animation:flick .5s infinite alternate}
    61. 

  61. .room.burn{border-color:var(--acc)}
    62. 

  62. .room.alarm{box-shadow:0 0 0 2px var(--bad),0 0 24px rgba(255,84,112,.5)}
    63. 

  63. @keyframes flick{to{transform:scale(1.12) rotate(4deg)}}
    64. 

  64. .panel{background:#060912;border:2px solid #2a3558;border-radius:16px;padding:14px;font-family:ui-monospace,Menlo,Consolas,monospace}
    65. 

  65. .lcd{background:#0d2a1c;color:#6dffb0;border-radius:8px;padding:10px;min-height:68px;text-shadow:0 0 6px #2f9;white-space:pre-line}
    66. 

  66. .lcd.alert{background:#2a0d12;color:#ff8da0;text-shadow:0 0 6px #f45;animation:blink 1s infinite}
    67. 

  67. @keyframes blink{50%{opacity:.65}}
    68. 

  68. .log{max-height:130px;overflow:auto;font-size:13px;color:var(--mut);margin-top:10px}
    69. 

  69. .log div{padding:2px 0;border-bottom:1px dashed var(--line)}
    70. 

  70. .chips{display:flex;flex-wrap:wrap;gap:8px;min-height:46px;padding:10px;border:1px dashed var(--line);border-radius:12px;margin:8px 0}
    71. 

  71. .chip{padding:8px 12px;border-radius:12px;background:rgba(255,255,255,.07);border:1px solid var(--line);color:var(--txt);font:inherit;cursor:pointer;text-align:left}
    72. 

  72. .chip.ok{background:rgba(66,211,146,.18);border-color:var(--ok);cursor:default}
    73. 

  73. .chip.no{animation:shake .35s;border-color:var(--bad)}
    74. 

  74. .steps li{margin:6px 0}
    75. 

  75. .score{font-size:64px;font-weight:800}
    76. 

  76. .prog{height:8px;background:var(--line);border-radius:8px;overflow:hidden;margin:6px 0 14px}.prog>div{height:100%;background:linear-gradient(90deg,var(--acc),var(--acc2));transition:.4s}
    77. 

  77. .rev{border-left:4px solid var(--bad);padding:6px 12px;margin:8px 0;background:rgba(255,255,255,.04);border-radius:8px}
    78. 

  78. .rev.g{border-color:var(--ok)}
    79. 

  79. .hero canvas{max-width:400px}
    80. 

  80. .bottom{background:linear-gradient(transparent,var(--bg) 40%)}
    81. 

  81. .stage{padding-bottom:60px}
    82. 

  82. .app.first .bottom{display:none}
    83. 

  83. 

  84. /* ===== Редизайн интерфейса v2 ===== */
    85. 

  85. :root{--glass:rgba(20,28,56,.55);--shadow:0 10px 40px rgba(0,0,0,.35)}
    86. 

  86. html,body{font-family:"Inter","Segoe UI",system-ui,-apple-system,Roboto,sans-serif;letter-spacing:.005em}
    87. 

  87. body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background:
    88. 

  88.  radial-gradient(500px 500px at 15% 20%,rgba(255,122,61,.12),transparent 70%),
    89. 

  89.  radial-gradient(600px 600px at 85% 75%,rgba(94,200,255,.12),transparent 70%);animation:drift 18s ease-in-out infinite alternate}
    90. 

  90. @keyframes drift{to{transform:translate(30px,-20px) scale(1.08)}}
    91. 

  91. .top{background:linear-gradient(var(--bg) 55%,transparent);padding:12px 0 16px}
    92. 

  92. .brand{gap:10px}.logo{border-radius:10px;box-shadow:0 0 18px rgba(255,122,61,.45)}
    93. 

  93. .bt{display:flex;flex-direction:column;line-height:1.15}.bt b{font-size:16px}.bt small{color:var(--mut);font-size:12px}
    94. 

  94. .dots{gap:8px}
    95. 

  95. .dot{border:0;padding:0;height:8px;cursor:default;opacity:.9}
    96. 

  96. .dot:not(:disabled){cursor:pointer}.dot:not(:disabled):hover{transform:scaleY(1.7)}
    97. 

  97. .dot.cur{width:140%;max-width:64px}
    98. 

  98. .card{background:var(--glass);box-shadow:var(--shadow);border-color:rgba(255,255,255,.1);transition:border-color .25s,transform .25s}
    99. 

  99. .grid3>.card:hover{border-color:rgba(94,200,255,.45);transform:translateY(-2px)}
    100. 

  100. h2{display:flex;align-items:center;gap:12px}
    101. 

  101. h2::before{content:"";width:6px;height:1.1em;border-radius:4px;background:linear-gradient(var(--acc2),var(--acc));flex:none}
    102. 

  102. .hero h2::before,.card h2::before{display:none}
    103. 

  103. .btn{font-weight:500;min-height:42px}
    104. 

  104. .btn.primary{background:linear-gradient(135deg,#ff8a3d,#ff4d6d);position:relative;overflow:hidden}
    105. 

  105. .btn.primary:hover:not(:disabled){box-shadow:0 8px 30px rgba(255,90,60,.55);transform:translateY(-2px)}
    106. 

  106. .btn.big{animation:pulse 2.4s infinite}
    107. 

  107. @keyframes pulse{50%{box-shadow:0 6px 40px rgba(255,90,60,.65)}}
    108. 

  108. .icon-btn{transition:.2s}.icon-btn:hover{border-color:var(--cy);transform:rotate(-8deg) scale(1.06)}
    109. 

  109. :focus-visible{outline:2px solid var(--cy);outline-offset:2px}
    110. 

  110. .msg{background:rgba(255,255,255,.05);border-radius:12px;animation:in .3s}
    111. 

  111. .opt{border-radius:14px;padding:13px 16px}
    112. 

  112. input[type=range]{-webkit-appearance:none;appearance:none;background:transparent;height:30px}
    113. 

  113. input[type=range]::-webkit-slider-runnable-track{height:8px;border-radius:8px;background:linear-gradient(90deg,#2a3a66,var(--acc))}
    114. 

  114. input[type=range]::-moz-range-track{height:8px;border-radius:8px;background:linear-gradient(90deg,#2a3a66,var(--acc))}
    115. 

  115. input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:24px;height:24px;margin-top:-8px;border-radius:50%;background:#fff;border:4px solid var(--acc);box-shadow:0 0 14px rgba(255,122,61,.7)}
    116. 

  116. input[type=range]::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:#fff;border:4px solid var(--acc)}
    117. 

  117. .bottom{padding:14px 0 18px}
    118. 

  118. .hint{font-size:13px}
    119. 

  119. .hero{padding:8px 0 20px;gap:4px}
    120. 

  120. .hero canvas{box-shadow:0 0 60px rgba(255,100,40,.25)}
    121. 

  121. .hero h1{margin:.3em 0}
    122. 

  122. .panel{box-shadow:var(--shadow),inset 0 0 40px rgba(0,255,150,.04)}
    123. 

  123. .lamp{background:rgba(0,0,0,.3)}
    124. 

  124. @media(max-width:820px){
    125. 

  125.  .app{padding:0 12px}.dot.cur{width:100%}.bt small{display:none}.bt b{font-size:15px}.brand b{display:inline}
    126. 

  126.  .btn.big{width:100%}.hero h1{font-size:30px}.bottom .btn{padding:10px 14px}
    127. 

  127. }
    128. 

  128. @media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
    129. 

  129. @media(max-width:820px){.top{flex-wrap:wrap;gap:8px 10px}.brand{flex:1}.dots{order:3;flex:1 1 100%}.dot{max-width:none}}
    130. 

  130. 

  131. /* ===== Дизайн v3: панель инструментов, меню, тосты, конфетти ===== */
    132. 

  132. .tools{display:flex;gap:6px}
    133. 

  133. .icon-btn{width:38px;height:38px;font-size:16px;display:grid;place-items:center;padding:0}
    134. 

  134. .icon-btn:hover{background:rgba(94,200,255,.12)}
    135. 

  135. #reset:hover{transform:rotate(-200deg)}
    136. 

  136. .kicker{display:inline-block;font-size:12px;letter-spacing:.14em;font-weight:700;color:var(--acc2);margin:2px 0 4px;padding:4px 12px;border-radius:99px;border:1px solid rgba(255,209,102,.35);background:rgba(255,209,102,.08)}
    137. 

  137. .toast{position:fixed;left:50%;bottom:86px;transform:translate(-50%,30px);background:rgba(20,32,60,.96);border:1px solid var(--ok);color:var(--txt);padding:10px 18px;border-radius:99px;box-shadow:0 10px 40px rgba(0,0,0,.5);opacity:0;pointer-events:none;transition:.35s;z-index:30;white-space:nowrap;max-width:92vw;overflow:hidden;text-overflow:ellipsis}
    138. 

  138. .toast.show{opacity:1;transform:translate(-50%,0)}
    139. 

  139. .modal{position:fixed;inset:0;z-index:40;background:rgba(4,7,16,.7);backdrop-filter:blur(6px);display:grid;place-items:center;padding:16px;animation:in .25s}
    140. 

  140. .modal[hidden]{display:none}
    141. 

  141. .sheet{width:min(520px,100%);background:#10172e;max-height:90vh;overflow:auto}
    142. 

  142. .sheet-h{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
    143. 

  143. .menu-list{display:grid;gap:8px}
    144. 

  144. .menu-item{display:flex;align-items:center;gap:12px;padding:10px 14px;border-radius:14px;border:1px solid var(--line);background:rgba(255,255,255,.04);color:var(--txt);font:inherit;text-align:left;cursor:pointer;transition:.15s}
    145. 

  145. .menu-item:hover:not(:disabled){border-color:var(--cy);background:rgba(94,200,255,.08)}
    146. 

  146. .menu-item:disabled{opacity:.4;cursor:not-allowed}
    147. 

  147. .menu-item.cur{border-color:var(--acc);background:rgba(255,122,61,.14)}
    148. 

  148. .menu-item .num{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.1);font-size:13px;font-weight:700;flex:none}
    149. 

  149. .menu-item:has(.num:where(:not(:empty))){}
    150. 

  150. #confetti{position:fixed;inset:0;pointer-events:none;z-index:50;display:none}
    151. 

  151. .card h4{font-size:17px}
    152. 

  152. .room{transition:.3s}.room:hover{transform:translateY(-2px)}
    153. 

  153. .btn.sm:active,.btn:active{transform:scale(.97)}
    154. 

  154. @media(max-width:820px){.tools{gap:4px}.icon-btn{width:34px;height:34px}.brand{min-width:0}.bt b{font-size:14px}}
    155. 

  155. @media(max-width:420px){#full{display:none}}
    156. 

  156. 

  157. /* ===== Дизайн v4: центрирование интерфейса ===== */
    158. 

  158. .app{max-width:1000px}
    159. 

  159. .stage{display:flex;flex-direction:column;justify-content:center;align-items:stretch;min-height:calc(100vh - 170px)}
    160. 

  160. .stage>.kicker,.stage>.pill{align-self:center}
    161. 

  161. .stage>h2{justify-content:center;text-align:center}
    162. 

  162. .stage>h2::before{content:"";width:34px;height:4px;background:linear-gradient(90deg,transparent,var(--acc))}
    163. 

  163. .stage>h2::after{content:"";width:34px;height:4px;border-radius:4px;background:linear-gradient(90deg,var(--acc),transparent);flex:none}
    164. 

  164. .stage>h3{text-align:center}
    165. 

  165. .stage>.lead{margin-left:auto;margin-right:auto;text-align:center}
    166. 

  166. .stage>.row{justify-content:center}
    167. 

  167. .stage>.chips{justify-content:center}
    168. 

  168. .stage>.msg{text-align:center}
    169. 

  169. .card .lead{text-align:left;margin-left:0}
    170. 

  170. .card h3,.card .msg,.panel{text-align:left}
    171. 

  171. .quiz{width:100%;max-width:760px;align-self:center}
    172. 

  172. .hero{width:100%}
    173. 

  173. .stage>.grid2,.stage>.grid3{width:100%;margin-inline:auto}
    174. 

  174. .stage>.rev,.stage>div>.rev{max-width:760px;margin-inline:auto}
    175. 

  175. .bottom{justify-content:center}
    176. 

  176. .top{justify-content:space-between}
    177. 

  177. @media(max-width:820px){.stage{min-height:0;justify-content:flex-start}.stage>h2{font-size:22px}.stage>h2::before,.stage>h2::after{width:16px}}
    178.