New style/layout for the app

Kiln-AI · Sep 30, 2024 · 2ddf293 · 2ddf293
1 parent eacd024
commit 2ddf293
Show file tree

Hide file tree

Showing 7 changed files with 68 additions and 134 deletions.
diff --git a/app/web_ui/package.json b/app/web_ui/package.json
@@ -1,6 +1,6 @@
 {
-  "name": "cmsassstarter",
-  "version": "0.0.1",
+  "name": "kiln-web-ui",
+  "version": "0.0.2",
   "private": true,
   "scripts": {
     "dev": "vite dev",

diff --git a/app/web_ui/src/app.html b/app/web_ui/src/app.html
@@ -9,6 +9,7 @@
   <body
     data-sveltekit-preload-data="hover"
     style="min-height: 100vh; display: flex; flex-direction: column"
+    class="bg-base-200"
   >
     <div style="display: contents">%sveltekit.body%</div>
   </body>

diff --git a/app/web_ui/src/routes/(app)/+layout.svelte b/app/web_ui/src/routes/(app)/+layout.svelte
@@ -2,77 +2,44 @@
   import "../../app.css"
 </script>
 
-<div class="navbar bg-base-100 container mx-auto">
-  <div class="flex-1">
-    <a class="btn btn-ghost normal-case text-xl" href="/">Kiln Studio</a>
-  </div>
-  <div class="flex-none">
-    <ul class="menu menu-horizontal px-1 hidden sm:flex font-bold text-lg">
-      <li class="md:mx-2"><a href="/">Home</a></li>
-      <li class="md:mx-2"><a href="/">Also Home</a></li>
-    </ul>
-    <div class="dropdown dropdown-end sm:hidden">
-      <!-- svelte-ignore a11y-label-has-associated-control -->
-      <!-- svelte-ignore a11y-no-noninteractive-tabindex -->
-      <label tabindex="0" class="btn btn-ghost btn-circle">
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          class="h-5 w-5"
-          fill="none"
-          viewBox="0 0 24 24"
-          stroke="currentColor"
-          ><path
-            stroke-linecap="round"
-            stroke-linejoin="round"
-            stroke-width="2"
-            d="M4 6h16M4 12h16M4 18h7"
-          /></svg
-        >
-      </label>
-      <!-- svelte-ignore a11y-no-noninteractive-tabindex -->
-      <ul
-        tabindex="0"
-        class="menu menu-lg dropdown-content mt-3 z-[1] p-2 shadow bg-base-100 rounded-box w-52 font-bold"
-      >
-        <li><a href="/">Home</a></li>
-        <li><a href="/">Also Home</a></li>
-      </ul>
+<div class="drawer lg:drawer-open">
+  <input id="main-drawer" type="checkbox" class="drawer-toggle" />
+  <div class="drawer-content flex flex-col lg:mx-4 min-h-screen">
+    <div class="flex-none h-12">
+      <div class="flex flex-row h-full items-center">
+        <label for="main-drawer" class="drawer-button lg:hidden">
+          <svg
+            class="size-6 mx-3"
+            viewBox="0 0 20 20"
+            xmlns="http://www.w3.org/2000/svg"
+            fill="none"
+          >
+            <path
+              fill="currentColor"
+              fill-rule="evenodd"
+              d="M19 4a1 1 0 01-1 1H2a1 1 0 010-2h16a1 1 0 011 1zm0 6a1 1 0 01-1 1H2a1 1 0 110-2h16a1 1 0 011 1zm-1 7a1 1 0 100-2H2a1 1 0 100 2h16z"
+            />
+          </svg>
+        </label>
+        <div class="flex-grow">Home</div>
+      </div>
     </div>
-  </div>
-</div>
 
-<div class="">
-  <slot />
-</div>
+    <div class="flex-grow rounded-t-lg bg-base-100 shadow-lg">
+      <slot />
+    </div>
+  </div>
+  <div class="drawer-side">
+    <label for="my-drawer-2" aria-label="close sidebar" class="drawer-overlay"
+    ></label>
 
-<!-- Spacer grows so the footer can be at bottom on short pages -->
-<div class="flex-grow"></div>
-<div class="">
-  <div class="border-t max-w-[1000px] mx-auto"></div>
-  <footer
-    class="footer p-10 gap-x-48 lg:gap-x-64 xl:gap-x-96 place-content-center text-base"
-  >
-    <nav>
-      <span class="footer-title opacity-80">Explore</span>
-      <a class="link link-hover mb-1" href="/">Home</a>
-      <a class="link link-hover mb-1" href="/">Home Again</a>
-      <a class="link link-hover my-1" href="https://github.com/kiln-ai"
-        >Github</a
-      >
-    </nav>
-    <aside>
-      <span class="footer-title opacity-80">Sponsor</span>
-      <a
-        class="link link-hover max-w-[260px]"
-        href="https://criticalmoments.io"
-      >
-        <img
-          alt="Critical Moments Logo"
-          src="/images/cm_logo.svg"
-          class="w-[180px] mb-3 aspect-[420/154]"
-        />
-        Make mobile apps? Improve conversion rates and ratings with Critical Moments.
-      </a>
-    </aside>
-  </footer>
+    <div class="flex flex-row items-center mx-6 my-3 hidden lg:flex">
+      <img src="/logo.svg" alt="logo" class="w-8 h-8" />
+      <div class="text-lg font-bold ml-1">Kiln AI</div>
+    </div>
+    <ul class="menu bg-base-200 text-base-content min-h-full w-60 p-4">
+      <li><a>Sidebar Item 1</a></li>
+      <li><a>Sidebar Item 2</a></li>
+    </ul>
+  </div>
 </div>
diff --git a/app/web_ui/src/routes/(app)/+page.svelte b/app/web_ui/src/routes/(app)/+page.svelte
@@ -1,53 +1,7 @@
 <script lang="ts">
-  import {
-    WebsiteName,
-    WebsiteBaseUrl,
-    WebsiteDescription,
-  } from "./../../config"
-
-  const ldJson = {
-    "@context": "https://schema.org",
-    "@type": "WebSite",
-    name: WebsiteName,
-    url: WebsiteBaseUrl,
-  }
-  const jsonldScript = `<script type="application/ld+json">${
-    JSON.stringify(ldJson) + "<"
-  }/script>`
 </script>
 
 <svelte:head>
-  <title>{WebsiteName}</title>
-  <meta name="description" content={WebsiteDescription} />
-  <!-- eslint-disable-next-line svelte/no-at-html-tags -->
-  {@html jsonldScript}
+  <title>Kiln Studio</title>
+  <meta name="description" content="The open source ML product platform" />
 </svelte:head>
-
-<div class="hero min-h-[60vh]">
-  <div class="hero-content text-center py-12">
-    <div class="max-w-xl">
-      <div
-        class="text-xl md:text-3xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-primary to-accent mb-4 md:mb-8"
-      >
-        Kiln Studio
-      </div>
-
-      <div
-        class="text-4xl md:text-6xl font-bold px-2"
-        style="line-height: 1.2;"
-      >
-        The
-        <span
-          class="underline decoration-secondary decoration-4 md:decoration-[6px]"
-          >open source</span
-        >
-        <span> ML product platform</span>
-      </div>
-      <div class="mt-16 md:mt-6">
-        <a href="https://github.com/kiln-ai">
-          <button class="btn btn-primary px-6">★ US ON GITHUB</button>
-        </a>
-      </div>
-    </div>
-  </div>
-</div>
diff --git a/app/web_ui/src/routes/(app)/+page.ts b/app/web_ui/src/routes/(app)/+page.ts
diff --git a/app/web_ui/static/logo.svg b/app/web_ui/static/logo.svg
diff --git a/app/web_ui/tailwind.config.js b/app/web_ui/tailwind.config.js
@@ -8,19 +8,27 @@ export default {
   daisyui: {
     themes: [
       {
-        saasstartertheme: {
-          primary: "#180042",
-          "primary-content": "#fefbf6",
-          secondary: "#c7b9f8",
-          neutral: "#180042",
-          "neutral-content": "#fefbf6",
-          accent: "#db2777",
-          "accent-content": "#180042",
-          "base-content": "#180042",
-          "base-100": "#fefbf6",
-          "base-200": "#faedd6",
-          success: "#37d399",
-          error: "#f77272",
+        kilntheme: {
+          "primary": "#ffffff",
+          "primary-content": "#161616",
+          "secondary": "#ffffff",
+          "secondary-content": "#161616",
+          "accent": "#ffffff",
+          "accent-content": "#161616",
+          "neutral": "#000000",
+          "neutral-content": "#bebebe",
+          "base-100": "#ffffff",
+          "base-200": "#F5F5F5",
+          "base-300": "#bebebe",
+          "base-content": "#161616",
+          "info": "#a6ffff",
+          "info-content": "#0a1616",
+          "success": "#8effe4",
+          "success-content": "#071612",
+          "warning": "#fff590",
+          "warning-content": "#161507",
+          "error": "#ffd7c5",
+          "error-content": "#16110e",
         },
       },
     ],