vault81/redvault-ai
4
0
Fork 0
Code Issues 1 Pull requests 1 Projects 1 Releases Packages Wiki Activity

WIP: 3d prototyping

Browse source
This commit is contained in:
Tristan D. 2025-02-13 18:10:13 +01:00
parent 691ccb8a1d
commit 481c2e6c15
Signed by: tristan
SSH key fingerprint: SHA256:9oFM1J63hYWJjCnLG6C0fxBS15rwNcWwdQNMOHYKJ/4
3 changed files with 131 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

28
llama_forge_rs/src/app/mod.rs
View file

@ -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>

3
llama_forge_rs/src/app/pages/main.rs
View file

@ -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>

100
llama_forge_rs/style/main.scss
View file

@ -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);
// }
}
}