crewos 0.1.0

package/app/src/index.css

@@ -0,0 +1,268 @@
+@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@400;500;600;700&display=swap');
+@import 'tailwindcss';
+
+:root {
+  --font-sans: 'Barlow Condensed', sans-serif;
+
+  --space-1: 0.25rem;
+  --space-2: 0.5rem;
+  --space-3: 0.75rem;
+  --space-4: 1rem;
+  --space-5: 1.25rem;
+  --space-6: 1.5rem;
+  --space-8: 2rem;
+  --space-10: 2.5rem;
+
+  --radius-sm: 0;
+  --radius-md: 0;
+  --radius-lg: 0;
+  --radius-xl: 0;
+
+  --color-bg: #050a07;
+  --color-surface: #0b130f;
+  --color-surface-soft: #111b15;
+  --color-surface-strong: #16231b;
+  --color-text: #eef7f0;
+  --color-muted: #94a79a;
+  --color-border: rgba(181, 243, 106, 0.14);
+  --color-primary: #8fdc4f;
+  --color-primary-hover: #a8eb69;
+  --color-primary-contrast: #08110c;
+  --color-accent: #42d662;
+  --color-danger: #ff6f7d;
+
+  --shadow-card: 0 24px 60px -34px rgba(0, 0, 0, 0.75);
+  --shadow-soft: 0 14px 34px -24px rgba(0, 0, 0, 0.7);
+}
+
+* {
+  box-sizing: border-box;
+}
+
+html,
+body,
+#app {
+  min-height: 100%;
+}
+
+body {
+  margin: 0;
+  font-family: var(--font-sans);
+  color: var(--color-text);
+  background:
+    radial-gradient(circle at 12% 12%, rgba(143, 220, 79, 0.14), transparent 34%),
+    radial-gradient(circle at 85% 6%, rgba(66, 214, 98, 0.12), transparent 30%),
+    linear-gradient(180deg, rgba(15, 25, 19, 0.92) 0%, rgba(5, 10, 7, 1) 42%),
+    var(--color-bg);
+  background-attachment: fixed;
+}
+
+button,
+input,
+textarea,
+select {
+  font: inherit;
+}
+
+.ui-page {
+  min-height: 100vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.ui-card {
+  background: color-mix(in oklab, var(--color-surface) 96%, black 4%);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-xl);
+  box-shadow: var(--shadow-card);
+  backdrop-filter: blur(14px);
+}
+
+.ui-panel {
+  background: var(--color-surface-soft);
+  border: 1px solid color-mix(in oklab, var(--color-border) 92%, transparent 8%);
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow-soft);
+}
+
+.ui-label {
+  font-size: 0.7rem;
+  text-transform: uppercase;
+  letter-spacing: 0.18em;
+  color: var(--color-muted);
+  font-weight: 600;
+}
+
+.ui-value {
+  margin-top: var(--space-2);
+  color: var(--color-text);
+  font-size: 1.03rem;
+  font-weight: 600;
+  line-height: 1.35;
+}
+
+.ui-button-primary {
+  border: 0;
+  border-radius: var(--radius-md);
+  padding: var(--space-3) var(--space-5);
+  background: linear-gradient(
+    135deg,
+    var(--color-primary) 0%,
+    color-mix(in oklab, var(--color-primary) 78%, #d8ff8a 22%) 100%
+  );
+  color: var(--color-primary-contrast);
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-3);
+  font-weight: 600;
+  line-height: 1;
+  cursor: pointer;
+  box-shadow: 0 18px 34px -22px rgba(143, 220, 79, 0.58);
+  transition: transform 180ms ease, filter 180ms ease, box-shadow 180ms ease;
+}
+
+.ui-button-primary:hover:not(:disabled) {
+  transform: translateY(-1px);
+  filter: saturate(1.08);
+  box-shadow: 0 22px 42px -22px rgba(143, 220, 79, 0.68);
+}
+
+.ui-button-primary:disabled {
+  opacity: 0.66;
+  cursor: not-allowed;
+}
+
+.ui-button-secondary {
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-md);
+  padding: var(--space-3) var(--space-5);
+  background: color-mix(in oklab, var(--color-surface) 86%, #142019 14%);
+  color: var(--color-text);
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-3);
+  font-weight: 600;
+  cursor: pointer;
+  transition: transform 180ms ease, border-color 180ms ease;
+}
+
+.ui-button-secondary:hover {
+  transform: translateY(-1px);
+  border-color: color-mix(in oklab, var(--color-primary) 50%, var(--color-border) 50%);
+}
+
+.ui-pill-button {
+  border: 1px solid var(--color-border);
+  border-radius: 999px;
+  padding: 0.4rem 0.8rem;
+  background: color-mix(in oklab, var(--color-surface-soft) 88%, black 12%);
+  color: var(--color-text);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 0.72rem;
+  font-weight: 600;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+  cursor: pointer;
+  transition: transform 180ms ease, border-color 180ms ease, color 180ms ease;
+}
+
+.ui-pill-button:hover {
+  transform: translateY(-1px);
+  border-color: color-mix(in oklab, var(--color-primary) 50%, var(--color-border) 50%);
+  color: var(--color-primary);
+}
+
+.ui-button-danger {
+  border-color: color-mix(in oklab, var(--color-danger) 50%, var(--color-border) 50%);
+  background: color-mix(in oklab, var(--color-danger) 11%, var(--color-surface) 89%);
+  color: color-mix(in oklab, var(--color-danger) 88%, white 12%);
+}
+
+.ui-button-danger:hover {
+  border-color: color-mix(in oklab, var(--color-danger) 70%, var(--color-border) 30%);
+  background: color-mix(in oklab, var(--color-danger) 13%, var(--color-surface) 87%);
+}
+
+.ui-icon-button {
+  width: 2.2rem;
+  height: 2.2rem;
+  border-radius: var(--radius-md);
+  border: 1px solid var(--color-border);
+  background: color-mix(in oklab, var(--color-surface) 88%, #142019 12%);
+  color: var(--color-text);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  transition:
+    transform 160ms ease,
+    border-color 160ms ease,
+    box-shadow 160ms ease,
+    background-color 160ms ease,
+    color 160ms ease;
+}
+
+.ui-icon-button:hover {
+  transform: translateY(-1px);
+  border-color: color-mix(in oklab, var(--color-primary) 40%, var(--color-border) 60%);
+  box-shadow: var(--shadow-soft);
+}
+
+.ui-icon-button:active {
+  transform: translateY(0);
+}
+
+.ui-icon-button-danger {
+  color: color-mix(in oklab, var(--color-danger) 86%, #4b1010 14%);
+  border-color: color-mix(in oklab, var(--color-danger) 45%, var(--color-border) 55%);
+  background: color-mix(in oklab, var(--color-danger) 9%, var(--color-surface) 91%);
+}
+
+.ui-icon-button-danger:hover {
+  border-color: color-mix(in oklab, var(--color-danger) 68%, var(--color-border) 32%);
+}
+
+.ui-icon-button-success {
+  color: var(--color-primary);
+  border-color: color-mix(in oklab, var(--color-primary) 58%, var(--color-border) 42%);
+  background: color-mix(in oklab, var(--color-primary) 12%, var(--color-surface) 88%);
+}
+
+.ui-number-input {
+  -moz-appearance: textfield;
+}
+
+.ui-number-input::-webkit-outer-spin-button,
+.ui-number-input::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+
+.ui-fade-in {
+  animation: ui-fade-in 280ms ease-out;
+}
+
+@keyframes ui-fade-in {
+  from {
+    opacity: 0;
+    transform: translateY(6px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes flow-pulse {
+  0%, 100% { opacity: 1; transform: scale(1); }
+  50% { opacity: 0.5; transform: scale(0.6); }
+}
+
+@keyframes dash-march {
+  to {
+    stroke-dashoffset: -20;
+  }
+}

package/app/src/main.jsx

@@ -0,0 +1,5 @@
+import { render } from 'preact';
+import './index.css';
+import App from './app.jsx';
+
+render(<App />, document.getElementById('app'));

package/app/src/navigations/AuthRoutes.jsx

@@ -0,0 +1,15 @@
+import { Router, Route } from 'preact-iso';
+
+import Login from '../pages/Login';
+import RedirectRoute from '../components/RedirectRoute';
+
+const AuthRoutes = () => {
+  return (
+    <Router>
+      <Route path="/login" component={Login} />
+      <Route default component={() => <RedirectRoute to="/login" />} />
+    </Router>
+  );
+};
+
+export default AuthRoutes;

package/app/src/navigations/MainRoutes.jsx

@@ -0,0 +1,15 @@
+import { Router, Route } from 'preact-iso';
+
+import Home from '../pages/Home';
+import RedirectRoute from '../components/RedirectRoute';
+
+const MainRoutes = () => {
+  return (
+    <Router>
+      <Route path="/" component={Home} />
+      <Route default component={() => <RedirectRoute to="/" />} />
+    </Router>
+  );
+};
+
+export default MainRoutes;

package/app/src/navigations/OnboardingRoutes.jsx

@@ -0,0 +1,15 @@
+import { Router, Route } from 'preact-iso';
+
+import Onboarding from '../pages/Onboarding';
+import RedirectRoute from '../components/RedirectRoute';
+
+const OnboardingRoutes = () => {
+  return (
+    <Router>
+      <Route path="/onboarding" component={Onboarding} />
+      <Route default component={() => <RedirectRoute to="/onboarding" />} />
+    </Router>
+  );
+};
+
+export default OnboardingRoutes;

package/app/src/navigations/index.jsx

@@ -0,0 +1,37 @@
+import { LocationProvider } from 'preact-iso';
+import MainRoutes from './MainRoutes';
+import AuthRoutes from './AuthRoutes';
+import OnboardingRoutes from './OnboardingRoutes';
+import SplashScreen from '../components/SplashScreen';
+import { useAuth } from '../hooks/useAuth';
+import { auth } from '../stores/auth.store';
+
+const NavigationContent = () => {
+  useAuth();
+
+  const { initialized, user, onboardingCompleted } = auth.value;
+
+  if (!initialized) {
+    return <SplashScreen />;
+  }
+
+  if (!user) {
+    return <AuthRoutes />;
+  }
+
+  if (!onboardingCompleted) {
+    return <OnboardingRoutes />;
+  }
+
+  return <MainRoutes />;
+};
+
+const Navigations = () => {
+  return (
+    <LocationProvider>
+      <NavigationContent />
+    </LocationProvider>
+  );
+};
+
+export default Navigations;