Nice login

Dioxus.toml

@@ -3,7 +3,7 @@
 [web.app]
 
 # HTML title tag content
-title = "sentryx"
+title = "Sentryx"
 
 # include `assets` in web platform
 [web.resource]

README.md

@@ -1,34 +0,0 @@
-# Development
-
-Your new bare-bones project includes minimal organization with a single `main.rs` file and a few assets.
-
-```
-project/
-├─ assets/ # Any assets that are used by the app should be placed here
-├─ src/
-│  ├─ main.rs # main.rs is the entry point to your application and currently contains all components for the app
-├─ Cargo.toml # The Cargo.toml file defines the dependencies and feature flags for your project
-```
-
-### Tailwind
-1. Install npm: https://docs.npmjs.com/downloading-and-installing-node-js-and-npm
-2. Install the Tailwind CSS CLI: https://tailwindcss.com/docs/installation
-3. Run the following command in the root of the project to start the Tailwind CSS compiler:
-
-```bash
-npx tailwindcss -i ./tailwind.css -o ./assets/tailwind.css --watch
-```
-
-### Serving Your App
-
-Run the following command in the root of your project to start developing with the default platform:
-
-```bash
-dx serve --platform web
-```
-
-To run for a different platform, use the `--platform platform` flag. E.g.
-```bash
-dx serve --platform desktop
-```
-

assets/background.svg

@@ -0,0 +1 @@
+<svg class="border shadow-md dark:border-slate-700" viewBox="0 0 1382.968888888889 777.92" style="width: 1382.97px; height: 777.92px;" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none"><rect class="bg" id="bg" x="0" y="0" width="1382.968888888889" height="777.92" fill="#000000"/><g transform="rotate(45 691.4844444444445 388.96)"><path d="M -691.48 607.92 S -355.74 500.92&#xA;            0.00 607.92 204.48 497.92&#xA;            691.48 607.92 1027.23 592.92&#xA;            1382.97 607.92 1718.71 547.92&#xA;            2074.45 607.92 h 110 V 1377.92 H -691.48 Z" fill="#e92560"/><path d="M -691.48 195.00 S -355.74 107.50&#xA;            0.00 195.00 69.48 107.50&#xA;            691.48 195.00 1027.23 40.00&#xA;            1382.97 195.00 1718.71 107.50&#xA;            2074.45 195.00 h 110 V -600 H -691.48 Z" fill="#681a92"/></g></svg>

assets/font.css

@@ -0,0 +1,79 @@
+@font-face {
+    font-family: 'Roboto';
+    src: url('assets/font/Roboto-Regular.ttf') format('truetype');
+    font-weight: normal;
+    font-style: normal;
+}
+@font-face {
+    font-family: 'Roboto';
+    src: url('assets/font/Roboto-Bold.ttf') format('truetype');
+    font-weight: bold;
+    font-style: normal;
+}
+@font-face {
+    font-family: 'Roboto';
+    src: url('assets/font/Roboto-Italic.ttf') format('truetype');
+    font-weight: normal;
+    font-style: italic;
+}
+@font-face {
+    font-family: 'Roboto';
+    src: url('assets/font/Roboto-BoldItalic.ttf') format('truetype');
+    font-weight: bold;
+    font-style: italic;
+}
+@font-face {
+    font-family: 'Roboto Condensed';
+    src: url('assets/font/Roboto_Condensed-ExtraLight.ttf') format('truetype');
+    font-weight: 200;
+    font-style: normal;
+}
+@font-face {
+    font-family: 'Roboto Condensed';
+    src: url('assets/font/Roboto_Condensed-ExtraLightItalic.ttf') format('truetype');
+    font-weight: 200;
+    font-style: italic;
+}
+@font-face {
+    font-family: 'Roboto';
+    src: url('assets/font/Roboto-Medium.ttf') format('truetype');
+    font-weight: 500;
+    font-style: normal;
+}
+@font-face {
+    font-family: 'Roboto';
+    src: url('assets/font/Roboto-MediumItalic.ttf') format('truetype');
+    font-weight: 500;
+    font-style: italic;
+}
+@font-face {
+    font-family: 'Roboto';
+    src: url('assets/font/Roboto-SemiBold.ttf') format('truetype');
+    font-weight: 600;
+    font-style: normal;
+}
+@font-face {
+    font-family: 'Roboto';
+    src: url('assets/font/Roboto-SemiBoldItalic.ttf') format('truetype');
+    font-weight: 600;
+    font-style: italic;
+}
+@font-face {
+    font-family: 'Roboto';
+    src: url('assets/font/Roboto-ExtraBold.ttf') format('truetype');
+    font-weight: 800;
+    font-style: normal;
+}
+@font-face {
+    font-family: 'Roboto';
+    src: url('assets/font/Roboto-ExtraBoldItalic.ttf') format('truetype');
+    font-weight: 800;
+    font-style: italic;
+}
+
+body {
+    font-family: 'Roboto', 'Roboto Condensed', sans-serif;
+    font-weight: normal;
+    font-style: normal;
+    color: #ffffff;
+}

assets/main.css

@@ -1,107 +1,68 @@
-/* App-wide styling */
+#login_wrapper {
-body {
+    position: relative;
-    background-color: #0f1116;
+    height: 100vh;
-    color: #ffffff;
+    width: 100vw;
-    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-    margin: 20px;
-}
-
-#hero {
-    margin: 0;
     display: flex;
-    flex-direction: column;
     justify-content: center;
     align-items: center;
+    overflow: hidden;
 }
 
-#links {
+#background_img {
-    width: 400px;
+    position: absolute;
-    text-align: left;
+    top: 0;
-    font-size: x-large;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    z-index: -1;
+}
+
+#login_container {
+    background-color: rgba(138, 138, 138, 0.143);
+    border-radius: 20px;
+    backdrop-filter: blur(20px);
+    padding: 38px;
+    margin: auto;
+    width: max-content;
+    height: max-content;
+    z-index: 1;
+}
+
+.field {
+    background-color: rgba(138, 138, 138, 0.353);
+    border: none;
+    border-radius: 10px;
+    height: 40px;
+    width: 350px;
     color: white;
-    display: flex;
+    padding-left: 10px;
-    flex-direction: column;
+    padding-right: 10px;
 }
 
-#links a {
+.field:focus {
-    color: white;
+    border: none;
-    text-decoration: none;
+    outline: 1px solid white;
-    margin-top: 20px;
-    margin: 10px 0px;
-    border: white 1px solid;
-    border-radius: 5px;
-    padding: 10px;
 }
 
-#links a:hover {
+body {
-    background-color: #1f1f1f;
+    margin: 0;
-    cursor: pointer;
+    padding: 0;
 }
 
-#header {
+h1 {
-    max-width: 1200px;
+    width: max-content;
-}
-
-/* Navbar */
-#navbar {
-    display: flex;
-    flex-direction: row;
-  }
-  
-#navbar a {
-    color: #ffffff;
-    margin-right: 20px;
-    text-decoration: none;
-    transition: color 0.2s ease;
-}
-
-#navbar a:hover {
-    cursor: pointer;
-    color: #91a4d2;
-}
-
-/* Blog page */
-#blog {
-    margin-top: 50px;
-  }
-  
-#blog a {
-    color: #ffffff;
-    margin-top: 50px;
-}
-
-/* Echo */
-#echo {
-    width: 360px;
     margin-left: auto;
     margin-right: auto;
-    margin-top: 50px;
-    background-color: #1e222d;
-    padding: 20px;
-    border-radius: 10px;
 }
 
-#echo>h4 {
+button {
-    margin: 0px 0px 15px 0px;
-}
-
-
-#echo>input {
-    border: none;
-    border-bottom: 1px white solid;
-    background-color: transparent;
-    color: #ffffff;
-    transition: border-bottom-color 0.2s ease;
-    outline: none;
     display: block;
-    padding: 0px 0px 5px 0px;
+    margin-top: 20px;
-    width: 100%;
+    margin-left: auto;
-}
+    margin-right: auto;
-
+    width: max-content;
-#echo>input:focus {
+    padding: 8px;
-    border-bottom-color: #6d85c6;
+    padding-left: 18px;
-}
+    padding-right: 18px;
-
-#echo>p {
-    margin: 20px 0px 0px auto;
 }

src/backend/mod.rs

@@ -0,0 +1 @@
+// use dioxus::prelude::*;

src/login.rs

@@ -0,0 +1,31 @@
+use dioxus::prelude::*;
+
+#[component]
+pub fn Login() -> Element {
+    rsx! {
+        div {
+            id: "login_wrapper",
+
+            img {
+                id: "background_img",
+                src: asset!("assets/background.svg")
+            }
+
+            div {
+                id: "login_container",
+                h1 { "Login" }
+
+                div {
+                    p { "Username" }
+                    input { class: "field" }
+                }
+                div{
+                    p { "Password" }
+                    input { class: "field" }
+                }
+
+                button { "Login" }
+            }
+        }
+    }
+}

src/main.rs

@@ -1,17 +1,20 @@
+mod backend;
+mod login;
+
 use dioxus::prelude::*;
 
+use login::Login;
+
 #[derive(Debug, Clone, Routable, PartialEq)]
 #[rustfmt::skip]
 enum Route {
-    #[layout(Navbar)]
     #[route("/")]
-    Home {},
+    Login {},
 }
 
 const FAVICON: Asset = asset!("/assets/favicon.ico");
 const MAIN_CSS: Asset = asset!("/assets/main.css");
-const HEADER_SVG: Asset = asset!("/assets/header.svg");
+const FONT_CSS: Asset = asset!("/assets/font.css");
-const TAILWIND_CSS: Asset = asset!("/assets/tailwind.css");
 
 fn main() {
     dioxus::launch(App);
@@ -21,83 +24,8 @@ fn main() {
 fn App() -> Element {
     rsx! {
         document::Link { rel: "icon", href: FAVICON }
-        document::Link { rel: "stylesheet", href: MAIN_CSS } document::Link { rel: "stylesheet", href: TAILWIND_CSS }
+        document::Link { rel: "stylesheet", href: MAIN_CSS }
+        document::Link { rel: "stylesheet", href: FONT_CSS }
         Router::<Route> {}
     }
 }
-
-#[component]
-pub fn Hero() -> Element {
-    rsx! {
-        div {
-            id: "hero",
-            img { src: HEADER_SVG, id: "header" }
-            div { id: "links",
-                a { href: "https://dioxuslabs.com/learn/0.6/", "📚 Learn Dioxus" }
-                a { href: "https://dioxuslabs.com/awesome", "🚀 Awesome Dioxus" }
-                a { href: "https://github.com/dioxus-community/", "📡 Community Libraries" }
-                a { href: "https://github.com/DioxusLabs/sdk", "⚙️ Dioxus Development Kit" }
-                a { href: "https://marketplace.visualstudio.com/items?itemName=DioxusLabs.dioxus", "💫 VSCode Extension" }
-                a { href: "https://discord.gg/XgGxMSkvUM", "👋 Community Discord" }
-            }
-        }
-    }
-}
-
-/// Home page
-#[component]
-fn Home() -> Element {
-    rsx! {
-        Hero {}
-        Echo {}
-    }
-}
-
-/// Shared navbar component.
-#[component]
-fn Navbar() -> Element {
-    rsx! {
-        div {
-            id: "navbar",
-            Link {
-                to: Route::Home {},
-                "Home"
-            }
-        }
-
-        Outlet::<Route> {}
-    }
-}
-
-/// Echo component that demonstrates fullstack server functions.
-#[component]
-fn Echo() -> Element {
-    let mut response = use_signal(|| String::new());
-
-    rsx! {
-        div {
-            id: "echo",
-            h4 { "ServerFn Echo" }
-            input {
-                placeholder: "Type here to echo...",
-                oninput:  move |event| async move {
-                    let data = echo_server(event.value()).await.unwrap();
-                    response.set(data);
-                },
-            }
-
-            if !response().is_empty() {
-                p {
-                    "Server echoed: "
-                    i { "{response}" }
-                }
-            }
-        }
-    }
-}
-
-/// Echo the user input on the server.
-#[server]
-async fn echo_server(input: String) -> Result<String, ServerFnError> {
-    Ok(input)
-}

tailwind.config.js

@@ -1,9 +0,0 @@
-/** @type {import('tailwindcss').Config} */
-module.exports = {
-  mode: "all",
-  content: ["./src/**/*.{rs,html,css}", "./dist/**/*.html"],
-  theme: {
-    extend: {},
-  },
-  plugins: [],
-};

tailwind.css

@@ -1,3 +0,0 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;