feat: rebuild pet app and backend around core care flows
This commit is contained in:
+333
-30
@@ -1,37 +1,340 @@
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
@layer base {
|
||||
:root {
|
||||
--background: 40 33% 98%;
|
||||
--foreground: 24 10% 15%;
|
||||
--card: 0 0% 100%;
|
||||
--card-foreground: 24 10% 15%;
|
||||
--primary: 33 90% 62%;
|
||||
--primary-foreground: 0 0% 100%;
|
||||
--secondary: 40 30% 94%;
|
||||
--secondary-foreground: 24 10% 25%;
|
||||
--muted: 40 20% 94%;
|
||||
--muted-foreground: 25 8% 45%;
|
||||
--accent: 40 40% 92%;
|
||||
--accent-foreground: 24 10% 20%;
|
||||
--destructive: 5 78% 57%;
|
||||
--destructive-foreground: 0 0% 100%;
|
||||
--border: 33 25% 88%;
|
||||
--input: 33 25% 88%;
|
||||
--ring: 33 90% 62%;
|
||||
--radius: 0.6rem;
|
||||
:root {
|
||||
--background: 150 18% 97%;
|
||||
--foreground: 166 48% 18%;
|
||||
--card: 0 0% 100%;
|
||||
--card-foreground: 166 48% 18%;
|
||||
--primary: 166 58% 21%;
|
||||
--primary-foreground: 0 0% 100%;
|
||||
--secondary: 145 22% 92%;
|
||||
--secondary-foreground: 166 48% 18%;
|
||||
--muted: 145 12% 94%;
|
||||
--muted-foreground: 150 9% 51%;
|
||||
--accent: 145 22% 92%;
|
||||
--accent-foreground: 166 48% 18%;
|
||||
--destructive: 5 70% 56%;
|
||||
--destructive-foreground: 0 0% 100%;
|
||||
--border: 145 16% 86%;
|
||||
--input: 145 16% 86%;
|
||||
--ring: 166 58% 21%;
|
||||
--radius: 0.8rem;
|
||||
}
|
||||
* {
|
||||
border-color: hsl(var(--border));
|
||||
}
|
||||
body {
|
||||
margin: 0;
|
||||
background: #f6f8f5;
|
||||
color: #193f37;
|
||||
font-family:
|
||||
-apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei",
|
||||
sans-serif;
|
||||
}
|
||||
.app-shell {
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
}
|
||||
.sidebar {
|
||||
width: 242px;
|
||||
flex: none;
|
||||
background: #194d41;
|
||||
color: #fff;
|
||||
padding: 30px 18px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.brand {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
align-items: center;
|
||||
padding: 5px 12px 38px;
|
||||
}
|
||||
.brand > span {
|
||||
font-size: 28px;
|
||||
background: #e9aa6d;
|
||||
border-radius: 16px;
|
||||
padding: 8px;
|
||||
}
|
||||
.brand strong {
|
||||
display: block;
|
||||
font-size: 19px;
|
||||
}
|
||||
.brand small {
|
||||
display: block;
|
||||
font-size: 10px;
|
||||
letter-spacing: 0.22em;
|
||||
opacity: 0.56;
|
||||
margin-top: 2px;
|
||||
}
|
||||
.side-caption {
|
||||
font-size: 11px;
|
||||
color: #9abcb0;
|
||||
padding: 0 14px;
|
||||
letter-spacing: 0.2em;
|
||||
}
|
||||
.sidebar nav {
|
||||
display: grid;
|
||||
gap: 7px;
|
||||
}
|
||||
.nav-item {
|
||||
border: 0;
|
||||
background: transparent;
|
||||
color: #c2d9cf;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 13px;
|
||||
text-align: left;
|
||||
padding: 13px 15px;
|
||||
border-radius: 13px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.nav-item:hover,
|
||||
.nav-item.active {
|
||||
background: #336a5c;
|
||||
color: #fff;
|
||||
}
|
||||
.side-bottom {
|
||||
margin-top: auto;
|
||||
color: #8ab5a4;
|
||||
font-size: 12px;
|
||||
padding: 12px;
|
||||
}
|
||||
.side-bottom button {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
border: 0;
|
||||
background: transparent;
|
||||
color: #d4e6dc;
|
||||
margin-top: 18px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.content {
|
||||
width: 100%;
|
||||
max-width: 1500px;
|
||||
padding: 40px 48px;
|
||||
}
|
||||
.topbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 28px;
|
||||
}
|
||||
.eyebrow {
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.18em;
|
||||
color: #74a28b;
|
||||
margin: 0 0 8px;
|
||||
}
|
||||
.topbar h1 {
|
||||
font-size: 30px;
|
||||
margin: 0;
|
||||
}
|
||||
.hero {
|
||||
background: #194d41;
|
||||
border-radius: 27px;
|
||||
color: white;
|
||||
min-height: 196px;
|
||||
padding: 34px 40px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
overflow: hidden;
|
||||
}
|
||||
.hero p {
|
||||
color: #a9d7bc;
|
||||
margin: 0 0 10px;
|
||||
}
|
||||
.hero h2 {
|
||||
font-size: 27px;
|
||||
margin: 0 0 12px;
|
||||
}
|
||||
.hero span {
|
||||
color: #c9e0d3;
|
||||
}
|
||||
.hero-paw {
|
||||
font-size: 90px;
|
||||
background: #edbe8b;
|
||||
border-radius: 50%;
|
||||
width: 152px;
|
||||
height: 152px;
|
||||
text-align: center;
|
||||
line-height: 152px;
|
||||
transform: rotate(-9deg);
|
||||
}
|
||||
.stat-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: 16px;
|
||||
margin-top: 22px;
|
||||
}
|
||||
.stat-card,
|
||||
.table-card {
|
||||
background: #fff;
|
||||
border: 1px solid #e7ede7;
|
||||
box-shadow: 0 12px 40px #214d3f0a;
|
||||
border-radius: 23px;
|
||||
}
|
||||
.stat-card {
|
||||
padding: 23px;
|
||||
}
|
||||
.stat-icon {
|
||||
font-size: 27px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
.stat-card span {
|
||||
display: block;
|
||||
color: #82988e;
|
||||
font-size: 13px;
|
||||
}
|
||||
.stat-card strong {
|
||||
font-size: 34px;
|
||||
}
|
||||
.table-head {
|
||||
padding: 26px 28px 16px;
|
||||
}
|
||||
.table-head h2 {
|
||||
margin: 0;
|
||||
font-size: 20px;
|
||||
}
|
||||
.table-head p {
|
||||
color: #87998f;
|
||||
font-size: 13px;
|
||||
}
|
||||
.table-scroll {
|
||||
overflow: auto;
|
||||
}
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
width: 100%;
|
||||
min-width: 800px;
|
||||
}
|
||||
th,
|
||||
td {
|
||||
text-align: left;
|
||||
padding: 16px 24px;
|
||||
border-top: 1px solid #edf0ec;
|
||||
white-space: nowrap;
|
||||
font-size: 13px;
|
||||
}
|
||||
th {
|
||||
color: #81978b;
|
||||
font-weight: 600;
|
||||
background: #fbfcfa;
|
||||
}
|
||||
td b {
|
||||
display: block;
|
||||
}
|
||||
td small {
|
||||
display: block;
|
||||
color: #9aada2;
|
||||
font-size: 11px;
|
||||
margin-top: 3px;
|
||||
}
|
||||
.mono {
|
||||
font-size: 11px;
|
||||
color: #71877d;
|
||||
}
|
||||
.pill {
|
||||
padding: 5px 9px;
|
||||
border-radius: 99px;
|
||||
font-size: 11px;
|
||||
}
|
||||
.pill.green {
|
||||
background: #e8f5ec;
|
||||
color: #258052;
|
||||
}
|
||||
.pill.red {
|
||||
background: #fff0eb;
|
||||
color: #ba6b51;
|
||||
}
|
||||
.empty {
|
||||
text-align: center;
|
||||
padding: 55px;
|
||||
color: #91a397;
|
||||
}
|
||||
.error-banner,
|
||||
.error {
|
||||
color: #a64d37;
|
||||
background: #fff0eb;
|
||||
border-radius: 12px;
|
||||
padding: 11px;
|
||||
}
|
||||
.login-page {
|
||||
min-height: 100vh;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
background:
|
||||
radial-gradient(circle at 75% 10%, #e9f1e7, transparent 35%), #f6f8f5;
|
||||
}
|
||||
.login-card {
|
||||
width: min(420px, calc(100% - 40px));
|
||||
background: white;
|
||||
border-radius: 28px;
|
||||
padding: 40px;
|
||||
box-shadow: 0 25px 70px #204a3a18;
|
||||
}
|
||||
.login-mark {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
background: #e9aa6d;
|
||||
border-radius: 19px;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
font-size: 30px;
|
||||
margin-bottom: 22px;
|
||||
}
|
||||
.login-card h1 {
|
||||
font-size: 30px;
|
||||
margin: 0;
|
||||
}
|
||||
.muted {
|
||||
color: #90a198;
|
||||
margin: 8px 0 30px;
|
||||
}
|
||||
.login-card label {
|
||||
display: grid;
|
||||
gap: 7px;
|
||||
margin-bottom: 18px;
|
||||
color: #456a5b;
|
||||
font-size: 13px;
|
||||
}
|
||||
.login-card input {
|
||||
margin-top: 2px;
|
||||
}
|
||||
.login-card button {
|
||||
margin-top: 8px;
|
||||
}
|
||||
@media (max-width: 800px) {
|
||||
.sidebar {
|
||||
width: 70px;
|
||||
padding: 20px 8px;
|
||||
}
|
||||
|
||||
* {
|
||||
border-color: hsl(var(--border));
|
||||
.brand div,
|
||||
.side-caption,
|
||||
.nav-item:not(.active),
|
||||
.nav-item.active {
|
||||
font-size: 0;
|
||||
}
|
||||
body {
|
||||
margin: 0;
|
||||
background: hsl(var(--background));
|
||||
color: hsl(var(--foreground));
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC',
|
||||
'Microsoft YaHei', sans-serif;
|
||||
.brand {
|
||||
padding: 5px 5px 30px;
|
||||
}
|
||||
.nav-item {
|
||||
justify-content: center;
|
||||
}
|
||||
.side-bottom {
|
||||
display: none;
|
||||
}
|
||||
.content {
|
||||
padding: 28px 18px;
|
||||
}
|
||||
.stat-grid {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
.hero-paw {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user