Initial dashboard organization setup

2026-03-25 10:26:33 +09:00
commit d9023abed6
22 changed files with 5340 additions and 0 deletions
--- a/frontend/public/styles.css
+++ b/frontend/public/styles.css
@@ -0,0 +1,210 @@
+:root {
+  --bg: #eef4f1;
+  --panel: rgba(255, 255, 255, 0.86);
+  --line: rgba(15, 23, 42, 0.08);
+  --text: #173028;
+  --muted: #5f746d;
+  --accent: #0f766e;
+  --accent-soft: #d7f3ee;
+  --shadow: 0 24px 60px rgba(14, 48, 41, 0.12);
+}
+
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  min-height: 100vh;
+  font-family: "SUIT", sans-serif;
+  color: var(--text);
+  background:
+    radial-gradient(circle at top left, rgba(15, 118, 110, 0.22), transparent 28%),
+    radial-gradient(circle at bottom right, rgba(20, 184, 166, 0.18), transparent 24%),
+    linear-gradient(135deg, #f5fbf7 0%, #e9f0fb 100%);
+}
+
+.app-shell {
+  max-width: 1240px;
+  margin: 0 auto;
+  padding: 48px 20px 56px;
+}
+
+.panel {
+  background: var(--panel);
+  border: 1px solid var(--line);
+  border-radius: 28px;
+  box-shadow: var(--shadow);
+  backdrop-filter: blur(12px);
+}
+
+.hero {
+  display: grid;
+  gap: 28px;
+  grid-template-columns: 1.2fr 0.8fr;
+  padding: 36px;
+}
+
+.eyebrow {
+  margin: 0 0 10px;
+  color: var(--accent);
+  font-size: 12px;
+  font-weight: 800;
+  letter-spacing: 0.14em;
+  text-transform: uppercase;
+}
+
+.hero h1,
+.topbar h2,
+.card h3 {
+  margin: 0;
+}
+
+.hero h1 {
+  font-size: clamp(2.3rem, 5vw, 4.5rem);
+  line-height: 0.95;
+}
+
+.hero-text,
+.card p,
+.helper-text,
+.roadmap {
+  color: var(--muted);
+  line-height: 1.6;
+}
+
+.login-card {
+  display: grid;
+  gap: 16px;
+  padding: 24px;
+  border-radius: 24px;
+  background: rgba(255, 255, 255, 0.92);
+  border: 1px solid rgba(15, 23, 42, 0.06);
+}
+
+.login-card label,
+.topbar {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+input,
+button,
+.anchor-button,
+.primary-link {
+  font: inherit;
+}
+
+input {
+  border: 1px solid rgba(15, 23, 42, 0.12);
+  border-radius: 14px;
+  padding: 14px 16px;
+  background: #fff;
+}
+
+button,
+.primary-link,
+.anchor-button {
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  gap: 8px;
+  min-height: 48px;
+  border-radius: 14px;
+  border: none;
+  cursor: pointer;
+  font-weight: 800;
+  text-decoration: none;
+}
+
+button,
+.primary-link {
+  background: var(--accent);
+  color: #fff;
+}
+
+.secondary,
+.anchor-button {
+  background: var(--accent-soft);
+  color: var(--accent);
+}
+
+.hidden {
+  display: none !important;
+}
+
+.topbar {
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 24px;
+}
+
+.topbar.compact {
+  max-width: 1240px;
+  margin: 0 auto;
+  padding: 28px 20px 0;
+}
+
+.topbar-actions {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.badge {
+  padding: 10px 14px;
+  border-radius: 999px;
+  background: rgba(15, 118, 110, 0.12);
+  color: var(--accent);
+  font-weight: 700;
+}
+
+.grid {
+  display: grid;
+  gap: 20px;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+}
+
+.card {
+  padding: 24px;
+}
+
+.roadmap {
+  padding-left: 18px;
+  margin: 0;
+}
+
+.iframe-wrap {
+  max-width: 1240px;
+  margin: 0 auto;
+  padding: 20px;
+}
+
+.iframe-wrap iframe {
+  width: 100%;
+  min-height: calc(100vh - 130px);
+  border: 1px solid var(--line);
+  border-radius: 24px;
+  background: #fff;
+  box-shadow: var(--shadow);
+}
+
+.subpage-body {
+  padding-bottom: 20px;
+}
+
+@media (max-width: 920px) {
+  .hero,
+  .grid {
+    grid-template-columns: 1fr;
+  }
+
+  .topbar,
+  .topbar-actions {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+}
+