fix: убрать Tailwind CDN, полный свой CSS, обработчик ошибок
This commit is contained in:
ashirova_gulnur
parent
a94526f5c0
commit
9b48e8ca22
23
index.html
23
index.html
@ -4,24 +4,13 @@
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||||
<title>Семейные задачи</title>
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<script>
|
||||
tailwind.config = {
|
||||
theme: {
|
||||
extend: {
|
||||
colors: {
|
||||
ink: '#0F1218',
|
||||
accent: '#00E5FF',
|
||||
'accent-50': '#E8FCFF',
|
||||
muted: '#5B6573',
|
||||
line: '#F2F4F7',
|
||||
},
|
||||
fontFamily: {
|
||||
sans: ['-apple-system','BlinkMacSystemFont','Segoe UI','Inter','system-ui','sans-serif'],
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
window.addEventListener('error',function(e){
|
||||
var d=document.createElement('div');
|
||||
d.style.cssText='position:fixed;top:0;left:0;right:0;background:#b91c1c;color:#fff;padding:12px;font:14px sans-serif;z-index:9999;white-space:pre-wrap';
|
||||
d.textContent='Ошибка JS: '+(e&&e.message||e)+' — обновите страницу; если не поможет, сообщите этот текст.';
|
||||
document.body.appendChild(d);
|
||||
});
|
||||
</script>
|
||||
<link rel="stylesheet" href="style.css">
|
||||
</head>
|
||||
|
||||
141
style.css
141
style.css
@ -1,25 +1,37 @@
|
||||
:root{--ink:#0F1218;--accent:#00E5FF;--accent-50:#E8FCFF;--muted:#5B6573;--line:#F2F4F7}
|
||||
/* ===== Семейный таск-менеджер — стили (без Tailwind CDN) ===== */
|
||||
:root{
|
||||
--ink:#0F1218; --accent:#00E5FF; --accent-50:#E8FCFF;
|
||||
--muted:#5B6573; --line:#F2F4F7; --white:#fff;
|
||||
--amber-50:#fffbeb; --amber-100:#fef3c7; --amber-600:#d97706; --amber-700:#b45309;
|
||||
--emerald-100:#d1fae5; --emerald-600:#059669; --emerald-700:#047857;
|
||||
--sky-100:#e0f2fe; --sky-700:#0369a1;
|
||||
--gray-100:#f3f4f6; --gray-200:#e5e7eb; --gray-300:#d1d5db; --gray-600:#4b5563;
|
||||
--red-50:#fef2f2; --red-100:#fee2e2; --red-600:#dc2626; --red-700:#b91c1c;
|
||||
}
|
||||
|
||||
*{box-sizing:border-box}
|
||||
*{box-sizing:border-box;margin:0;padding:0}
|
||||
body{font:15px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI",Inter,system-ui,sans-serif;color:var(--ink);background:var(--line)}
|
||||
|
||||
/* ---------- компоненты ---------- */
|
||||
.field{width:100%;border:2px solid var(--line);border-radius:8px;padding:10px 12px;font-size:15px;font-family:inherit;background:#fff;color:var(--ink);outline:none;transition:border .15s}
|
||||
.field:focus{border-color:var(--accent)}
|
||||
textarea.field{resize:vertical}
|
||||
|
||||
.btn-primary{background:var(--accent);color:var(--ink);padding:11px 20px;border-radius:8px;font-weight:700;transition:filter .15s}
|
||||
.btn-primary:hover{filter:brightness(1.05)}
|
||||
.btn-primary:active{filter:brightness(.95)}
|
||||
.btn-ghost{background:transparent;color:var(--ink);border:2px solid var(--line);padding:9px 18px;border-radius:8px;font-weight:600}
|
||||
.btn-primary{background:var(--accent);color:var(--ink);padding:11px 20px;border-radius:8px;font-weight:700;border:none;cursor:pointer;transition:filter .15s;display:inline-block;text-align:center}
|
||||
.btn-primary:hover{filter:brightness(1.06)}
|
||||
.btn-primary:active{filter:brightness(.94)}
|
||||
.btn-primary:disabled{opacity:.5;cursor:not-allowed}
|
||||
.btn-ghost{background:transparent;color:var(--ink);border:2px solid var(--line);padding:9px 18px;border-radius:8px;font-weight:600;cursor:pointer}
|
||||
.btn-ghost:hover{background:var(--line)}
|
||||
.btn-danger{background:#fee2e2;color:#b91c1c;padding:11px 18px;border-radius:8px;font-weight:700}
|
||||
.btn-danger{background:#fee2e2;color:#b91c1c;padding:11px 18px;border-radius:8px;font-weight:700;border:none;cursor:pointer}
|
||||
.btn-danger:hover{background:#fecaca}
|
||||
|
||||
.navtab{white-space:nowrap;padding:10px 14px;font-size:14px;font-weight:600;color:#ffffff80;border-bottom:3px solid transparent;transition:.15s}
|
||||
.navtab{white-space:nowrap;padding:10px 14px;font-size:14px;font-weight:600;color:rgba(255,255,255,.5);border:none;background:none;border-bottom:3px solid transparent;cursor:pointer;transition:.15s;font-family:inherit}
|
||||
.navtab:hover{color:#fff}
|
||||
.navtab.active{color:var(--accent);border-bottom-color:var(--accent)}
|
||||
|
||||
.avatar{display:inline-flex;align-items:center;justify-content:center;border-radius:999px;font-weight:800;color:#fff;user-select:none;flex-shrink:0}
|
||||
.avatar{display:inline-flex;align-items:center;justify-content:center;border-radius:999px;font-weight:800;color:#fff;user-select:none;flex-shrink:0;line-height:1}
|
||||
|
||||
/* карточка задачи */
|
||||
.task{background:#fff;border:1px solid var(--line);border-radius:14px;padding:14px 16px;transition:box-shadow .15s,border-color .15s}
|
||||
.task:hover{box-shadow:0 6px 20px rgba(15,18,24,.07)}
|
||||
.task.done{opacity:.6}
|
||||
@ -29,13 +41,13 @@ textarea.field{resize:vertical}
|
||||
.task.overdue:not(.done):not(.cancelled){border-color:#fca5a5;box-shadow:0 0 0 1px #fca5a5 inset}
|
||||
|
||||
.chip{display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:600;padding:2px 8px;border-radius:999px}
|
||||
.badge{font-size:11px;font-weight:700;padding:2px 8px;border-radius:6px;text-transform:uppercase;letter-spacing:.02em}
|
||||
.badge{font-size:11px;font-weight:700;padding:2px 8px;border-radius:6px;text-transform:uppercase;letter-spacing:.02em;display:inline-block}
|
||||
|
||||
.iconbtn{width:34px;height:34px;display:inline-flex;align-items:center;justify-content:center;border-radius:8px;border:1px solid var(--line);background:#fff;font-size:16px;transition:.15s}
|
||||
.iconbtn{width:34px;height:34px;display:inline-flex;align-items:center;justify-content:center;border-radius:8px;border:1px solid var(--line);background:#fff;font-size:15px;cursor:pointer;transition:.15s;font-family:inherit;color:var(--ink)}
|
||||
.iconbtn:hover{background:var(--line)}
|
||||
.iconbtn.primary{background:var(--accent);border-color:var(--accent)}
|
||||
.iconbtn:disabled{opacity:.5;cursor:not-allowed}
|
||||
|
||||
/* календарь */
|
||||
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
|
||||
.cal-dow{text-align:center;font-size:12px;font-weight:700;color:var(--muted);padding:6px 0}
|
||||
.cal-day{min-height:96px;background:#fff;border:1px solid var(--line);border-radius:10px;padding:6px;overflow:hidden}
|
||||
@ -55,3 +67,106 @@ textarea.field{resize:vertical}
|
||||
|
||||
::-webkit-scrollbar{width:10px;height:10px}
|
||||
::-webkit-scrollbar-thumb{background:#d6dbe2;border-radius:10px}
|
||||
|
||||
/* ---------- утилиты (вместо Tailwind) ---------- */
|
||||
.hidden{display:none!important}
|
||||
.block{display:block}
|
||||
.flex{display:flex}
|
||||
.inline-flex{display:inline-flex}
|
||||
.grid{display:grid}
|
||||
.flex-1{flex:1 1 0%}
|
||||
.flex-col{flex-direction:column}
|
||||
.flex-wrap{flex-wrap:wrap}
|
||||
.items-center{align-items:center}
|
||||
.items-start{align-items:flex-start}
|
||||
.items-end{align-items:flex-end}
|
||||
.justify-center{justify-content:center}
|
||||
.justify-between{justify-content:space-between}
|
||||
.gap-1{gap:.25rem}.gap-2{gap:.5rem}.gap-3{gap:.75rem}.gap-4{gap:1rem}
|
||||
.grid-cols-2{grid-template-columns:repeat(2,1fr)}
|
||||
.grid-cols-3{grid-template-columns:repeat(3,1fr)}
|
||||
.space-y-1>*+*{margin-top:.25rem}
|
||||
.space-y-2>*+*{margin-top:.5rem}
|
||||
.space-y-3>*+*{margin-top:.75rem}
|
||||
.space-y-4>*+*{margin-top:1rem}
|
||||
.min-h-screen{min-height:100vh}
|
||||
.min-w-0{min-width:0}
|
||||
.w-full{width:100%}.w-60{width:15rem}.w-8{width:2rem}.w-9{width:2.25rem}
|
||||
.h-8{height:2rem}.h-9{height:2.25rem}
|
||||
.max-w-6xl{max-width:72rem}.max-w-lg{max-width:32rem}.max-w-xs{max-width:20rem}
|
||||
.max-w-\[90px\]{max-width:90px}
|
||||
.max-h-72{max-height:18rem}.max-h-\[92vh\]{max-height:92vh}
|
||||
.mx-auto{margin-left:auto;margin-right:auto}
|
||||
.ml-auto{margin-left:auto}
|
||||
.mb-1{margin-bottom:.25rem}.mb-3{margin-bottom:.75rem}.mb-4{margin-bottom:1rem}.mb-5{margin-bottom:1.25rem}.mb-6{margin-bottom:1.5rem}
|
||||
.mt-1{margin-top:.25rem}.mt-2{margin-top:.5rem}.mt-3{margin-top:.75rem}.mt-4{margin-top:1rem}.mt-5{margin-top:1.25rem}
|
||||
.p-0{padding:0}.p-2{padding:.5rem}.p-3{padding:.75rem}.p-4{padding:1rem}.p-5{padding:1.25rem}.p-7{padding:1.75rem}
|
||||
.px-2{padding-left:.5rem;padding-right:.5rem}
|
||||
.px-3{padding-left:.75rem;padding-right:.75rem}
|
||||
.px-4{padding-left:1rem;padding-right:1rem}
|
||||
.px-5{padding-left:1.25rem;padding-right:1.25rem}
|
||||
.py-1{padding-top:.25rem;padding-bottom:.25rem}
|
||||
.py-2{padding-top:.5rem;padding-bottom:.5rem}
|
||||
.py-3{padding-top:.75rem;padding-bottom:.75rem}
|
||||
.py-5{padding-top:1.25rem;padding-bottom:1.25rem}
|
||||
.py-6{padding-top:1.5rem;padding-bottom:1.5rem}
|
||||
.pt-1{padding-top:.25rem}.pt-3{padding-top:.75rem}
|
||||
.pl-1{padding-left:.25rem}.pr-3{padding-right:.75rem}
|
||||
.relative{position:relative}.absolute{position:absolute}.fixed{position:fixed}.sticky{position:sticky}
|
||||
.top-0{top:0}.bottom-0{bottom:0}.bottom-5{bottom:1.25rem}.right-0{right:0}.left-1\/2{left:50%}
|
||||
.inset-0{top:0;right:0;bottom:0;left:0}
|
||||
.-translate-x-1\/2{transform:translateX(-50%)}
|
||||
.z-20{z-index:20}.z-30{z-index:30}.z-40{z-index:40}.z-50{z-index:50}
|
||||
.overflow-auto{overflow:auto}.overflow-x-auto{overflow-x:auto}
|
||||
.rounded-lg{border-radius:8px}.rounded-xl{border-radius:12px}.rounded-2xl{border-radius:16px}
|
||||
.rounded-t-2xl{border-radius:16px 16px 0 0}.rounded-full{border-radius:9999px}
|
||||
.shadow-xl{box-shadow:0 10px 30px rgba(15,18,24,.12)}
|
||||
.shadow-2xl{box-shadow:0 20px 50px rgba(15,18,24,.25)}
|
||||
.border{border:1px solid var(--line)}.border-t{border-top:1px solid var(--line)}.border-b{border-bottom:1px solid var(--line)}.border-line{border-color:var(--line)}
|
||||
.text-2xl{font-size:24px}.text-5xl{font-size:48px}.text-xl{font-size:20px}.text-lg{font-size:18px}
|
||||
.text-base{font-size:16px}.text-sm{font-size:14px}.text-xs{font-size:12px}.text-\[11px\]{font-size:11px}
|
||||
.font-sans{font-family:inherit}
|
||||
.font-semibold{font-weight:600}.font-bold{font-weight:700}.font-extrabold{font-weight:800}
|
||||
.leading-tight{line-height:1.1}.leading-none{line-height:1}
|
||||
.text-center{text-align:center}.text-left{text-align:left}
|
||||
.capitalize{text-transform:capitalize}
|
||||
.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
|
||||
.underline{text-decoration:underline}
|
||||
.opacity-60{opacity:.6}
|
||||
.transition{transition:.15s}
|
||||
|
||||
/* цвета текста */
|
||||
.text-ink{color:var(--ink)}.text-muted{color:var(--muted)}.text-white{color:#fff}
|
||||
.text-amber-600{color:var(--amber-600)}.text-emerald-600{color:var(--emerald-600)}
|
||||
.text-red-600{color:var(--red-600)}.text-gray-300{color:var(--gray-300)}.text-gray-600{color:var(--gray-600)}
|
||||
.text-amber-700{color:var(--amber-700)}.text-emerald-700{color:var(--emerald-700)}.text-sky-700{color:var(--sky-700)}.text-red-700{color:var(--red-700)}
|
||||
.text-white\/50{color:rgba(255,255,255,.5)}.text-white\/60{color:rgba(255,255,255,.6)}.text-white\/80{color:rgba(255,255,255,.8)}
|
||||
|
||||
/* цвета фона */
|
||||
.bg-ink{background:var(--ink)}.bg-white{background:#fff}.bg-line{background:var(--line)}.bg-accent-50{background:var(--accent-50)}
|
||||
.bg-black\/50{background:rgba(0,0,0,.5)}.bg-white\/10{background:rgba(255,255,255,.1)}.bg-white\/20{background:rgba(255,255,255,.2)}
|
||||
.bg-amber-50{background:var(--amber-50)}.bg-amber-100{background:var(--amber-100)}
|
||||
.bg-emerald-100{background:var(--emerald-100)}.bg-sky-100{background:var(--sky-100)}
|
||||
.bg-gray-100{background:var(--gray-100)}.bg-gray-200{background:var(--gray-200)}
|
||||
.bg-red-50{background:var(--red-50)}.bg-red-100{background:var(--red-100)}
|
||||
|
||||
/* hover */
|
||||
.hover\:bg-line:hover{background:var(--line)}
|
||||
.hover\:bg-white\/20:hover{background:rgba(255,255,255,.2)}
|
||||
.hover\:text-ink:hover{color:var(--ink)}
|
||||
|
||||
/* important-override */
|
||||
.\!w-auto{width:auto!important}
|
||||
.\!py-2{padding-top:.5rem!important;padding-bottom:.5rem!important}
|
||||
.\!px-3{padding-left:.75rem!important;padding-right:.75rem!important}
|
||||
|
||||
/* адаптив (sm: 640px+) */
|
||||
@media(min-width:640px){
|
||||
.sm\:grid-cols-2{grid-template-columns:repeat(2,1fr)}
|
||||
.sm\:hidden{display:none!important}
|
||||
.sm\:inline-flex{display:inline-flex}
|
||||
.sm\:items-center{align-items:center}
|
||||
.sm\:max-w-lg{max-width:32rem}
|
||||
.sm\:p-4{padding:1rem}
|
||||
.sm\:rounded-2xl{border-radius:16px}
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user