File size: 5,343 Bytes
3f47554 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 | :root {
--bg: #f8fafc;
--text: #0f172a;
--muted: #64748b;
--line: rgba(15, 23, 42, .08);
--glass: rgba(255,255,255,.72);
--shadow: 0 24px 70px rgba(15, 23, 42, .10);
--radius: 24px;
}
* { box-sizing: border-box; }
html { min-height: 100%; background: var(--bg); }
body {
margin: 0;
min-height: 100vh;
color: var(--text);
font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
background:
radial-gradient(circle at 8% 0%, rgba(59,130,246,.20), transparent 28rem),
radial-gradient(circle at 90% 12%, rgba(16,185,129,.18), transparent 30rem),
linear-gradient(180deg, #ffffff 0%, #f8fafc 60%);
}
button, textarea, input { font: inherit; }
button { border: 0; cursor: pointer; }
.shell { width: min(1500px, calc(100% - 28px)); margin: 0 auto; padding: 28px 0 48px; }
.hero {
display: grid;
grid-template-columns: 1fr auto;
gap: 18px;
align-items: end;
margin-bottom: 18px;
}
.eyebrow {
display: inline-flex;
margin: 0 0 10px;
padding: 7px 12px;
border-radius: 999px;
background: rgba(15,23,42,.08);
color: #334155;
font-weight: 800;
font-size: 12px;
letter-spacing: .08em;
text-transform: uppercase;
}
h1 { margin: 0; font-size: clamp(30px, 5vw, 64px); letter-spacing: -.05em; line-height: .94; }
h1 span { color: #2563eb; }
.sub { max-width: 820px; color: var(--muted); font-size: 16px; line-height: 1.7; margin: 14px 0 0; }
.statusBoard {
min-width: 320px;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
background: rgba(255,255,255,.72);
border: 1px solid var(--line);
border-radius: 22px;
padding: 10px;
box-shadow: var(--shadow);
backdrop-filter: blur(14px);
}
.statusBoard div { background: rgba(248,250,252,.9); border-radius: 16px; padding: 12px; }
.statusBoard b { display: block; font-size: 15px; white-space: nowrap; }
.statusBoard small { color: var(--muted); font-size: 11px; font-weight: 700; text-transform: uppercase; }
.toolbar {
display: flex;
gap: 10px;
align-items: center;
flex-wrap: wrap;
margin: 18px 0;
}
.toolbar button, .toggle {
display: inline-flex;
align-items: center;
gap: 8px;
height: 42px;
border: 1px solid var(--line);
background: var(--glass);
color: #1e293b;
border-radius: 999px;
padding: 0 16px;
font-weight: 800;
box-shadow: 0 8px 30px rgba(15,23,42,.06);
}
.toolbar button:hover { background: #fff; transform: translateY(-1px); }
.grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.card {
position: relative;
min-height: 316px;
display: flex;
flex-direction: column;
overflow: hidden;
border: 1px solid var(--line);
border-radius: var(--radius);
box-shadow: 0 16px 50px rgba(15, 23, 42, .08);
}
.card::before { content: ""; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(255,255,255,.72), rgba(255,255,255,.22)); pointer-events: none; }
.cardInner { position: relative; z-index: 1; display: flex; flex-direction: column; flex: 1; padding: 16px; }
.cardTop { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 10px; }
.name { margin: 0; font-size: 16px; letter-spacing: -.02em; }
.badge { display: inline-flex; align-items: center; min-height: 25px; border-radius: 999px; padding: 4px 9px; background: rgba(255,255,255,.58); color: #475569; font-size: 11px; font-weight: 900; text-transform: uppercase; }
.badge.loading { color: #9a3412; background: rgba(254,215,170,.8); }
.badge.error { color: #991b1b; background: rgba(254,202,202,.9); }
.badge.done { color: #166534; background: rgba(187,247,208,.8); }
textarea {
position: relative;
z-index: 1;
flex: 1;
width: 100%;
min-height: 210px;
resize: vertical;
border: 1px solid rgba(255,255,255,.44);
border-radius: 18px;
padding: 14px;
color: #0f172a;
background: rgba(255,255,255,.42);
outline: none;
line-height: 1.62;
font-size: 16px;
}
textarea:focus { background: rgba(255,255,255,.88); border-color: rgba(37,99,235,.24); box-shadow: 0 0 0 4px rgba(37,99,235,.08); }
.cardFoot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 12px; }
.small { color: #475569; font-size: 12px; font-weight: 800; }
.actions { display: flex; gap: 8px; }
.copy {
border-radius: 12px;
background: rgba(255,255,255,.64);
color: #1e293b;
padding: 7px 10px;
font-size: 12px;
font-weight: 900;
}
.copy:hover { background: #fff; }
.toast {
position: fixed;
left: 50%;
bottom: 22px;
transform: translate(-50%, 18px);
opacity: 0;
pointer-events: none;
background: #0f172a;
color: #fff;
border-radius: 999px;
padding: 11px 18px;
font-weight: 800;
font-size: 13px;
box-shadow: var(--shadow);
transition: .18s ease;
z-index: 20;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }
@media (max-width: 1140px) {
.hero { grid-template-columns: 1fr; }
.statusBoard { min-width: 0; width: 100%; }
.grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
.shell { width: min(100% - 18px, 1500px); padding-top: 18px; }
.grid { grid-template-columns: 1fr; }
.statusBoard { grid-template-columns: 1fr; }
.toolbar { align-items: stretch; }
.toolbar button, .toggle { flex: 1; justify-content: center; }
}
|