WIP: 3d prototyping

llama_forge_rs/src/app/mod.rs

@@ -16,6 +16,33 @@ use self::{
 #[derive(Clone, Debug, PartialEq)]
 pub struct RefreshGen(pub i64);
 
+#[component]
+pub fn TestPage() -> impl IntoView {
+    view! {
+        <div class="dev-body">
+        <div class="s3d">
+            <div class="flex">
+                <div class="flex">
+                    // <button class="s3d mx-2">
+                    //     <span>+</span>
+                    // </button>
+                </div>
+                <div class="flex">
+                    <a class="s3d mx-2">
+                        <span>"TEST !"</span>
+                    </a>
+                </div>
+                <div class="flex">
+                    <a class="s3d mx-2">
+                        <span>-</span>
+                    </a>
+                </div>
+            </div>
+        </div>
+        </div>
+    }
+}
+
 #[island]
 pub fn App() -> impl IntoView {
     let span = tracing::info_span!("app");
@@ -41,6 +68,7 @@ pub fn App() -> impl IntoView {
                 <Routes>
                     <Route path="" view=MainPage>
                         <Route path="/chat" view=ChatPage />
+                        <Route path="/test" view=TestPage />
                     // TODO make settings page for proxy-man
                     // <SettingsRoutes/>
                     </Route>

llama_forge_rs/src/app/pages/main.rs

@@ -23,6 +23,9 @@ fn Navbar() -> impl IntoView {
                         <li>
                             <a href="/settings/backend">"Settings"</a>
                         </li>
+                        <li>
+                            <a href="/test">"Test"</a>
+                        </li>
                     </ul>
                 </div>
             </div>

llama_forge_rs/style/main.scss

@@ -5,3 +5,103 @@
     @apply bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded;
   }
 }
+
+@layer utilities {
+  .dev-body {
+    width: 100%;
+    height: 100%;
+    margin: 0;
+    padding: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 3rem;
+    background-color: rgb(225, 225, 225);
+    font-family: "Inter", sans-serif;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    overflow: hidden;
+  }
+
+  .s3d {
+    --shadow-color: rgba(5, 5, 5, 0.25);
+    --lt-shadow-color: rgba(5, 5, 5, 0.1);
+    --highlight-color: rgba(255, 255, 255, 0.25);
+    --btn-raw-color: 230, 230, 230;
+    --light-angle: 135deg;
+    --radius: 999vw;
+    // --radius: 5em;
+
+
+    border-radius: var(--radius);
+
+    // all: unset;
+    position: relative;
+    padding: 1em 1.5em;
+    background-color: rgba(0, 0, 0, 0.75); // tiny gap
+    box-shadow:
+      -0.15em -0.15em 0.15em -0.075em var(--shadow-color),  // tl
+      0.15em -0.15em 0.15em -0.075em var(--shadow-color),   // tr
+      -0.15em 0.15em 0.15em -0.075em var(--shadow-color),   // bl
+      0.0375em 0.0375em 0.0675em 0 var(--lt-shadow-color);  // br // why different ? (improves perspective shadow feel?)
+
+    &::before, &::after {
+      content: "";
+      border-radius: var(--radius);
+      position: absolute;
+      // border-radius: inherit;
+      transition: all 250ms ease;
+    }
+
+    &::before {
+      z-index: 1;
+      inset: 0.025em;
+      box-shadow: 0.15em 0.3em 0.1em -0.01em var(--shadow-color);
+    }
+
+    &::after {
+      z-index: 2;
+      inset: 0.0125em;
+      // main button color
+      // TODO var it & use darken etc
+      background-image: linear-gradient(
+        var(--light-angle),
+        rgb(var(--btn-raw-color)),
+        rgba(var(--btn-raw-color), 0.7),
+      );
+      clip-path: inset(0 round var(--radius));
+      // inline shadows
+      box-shadow:
+        // inline-perspective shadow
+        0 0 0 0 inset var(--shadow-color),
+        // Rounding of the button itself
+        -0.05em -0.05em 0.05em 0 inset var(--shadow-color), // button bottom
+        0 0 0.05em 0.2em inset var(--highlight-color), // button top
+        -0.075em -0.25em 0.25em 0.1em inset var(--shadow-color); // side
+    }
+
+    span {
+      --text-gradient: linear-gradient(135deg, rgb(25, 25, 25), rgb(75, 75, 75));
+
+      position: relative;
+      z-index: 3;
+      font-family: inherit;
+      letter-spacing: -0.05em;
+      font-weight: 500;
+      color: transparent;
+      background-image: var(--text-gradient);
+      background-clip: text;
+      transition: transform 250ms ease;
+      display: block;
+      text-shadow: rgba(0, 0, 0, 0.1) 0 0 0.1em;
+    }
+
+    // &:hover span {
+    //   transform: scale(0.975);
+    // }
+
+    // &:active span {
+    //   transform: scale(0.95);
+    // }
+  }
+}