diff --git a/Dioxus.toml b/Dioxus.toml index e563ec5..71cde08 100644 --- a/Dioxus.toml +++ b/Dioxus.toml @@ -3,7 +3,7 @@ [web.app] # HTML title tag content -title = "sentryx" +title = "Sentryx" # include `assets` in web platform [web.resource] diff --git a/README.md b/README.md index e4adc70..e69de29 100644 --- a/README.md +++ b/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 -``` - diff --git a/assets/background.svg b/assets/background.svg new file mode 100644 index 0000000..30454c7 --- /dev/null +++ b/assets/background.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/favicon.ico b/assets/favicon.ico index eed0c09..9f25e5b 100644 Binary files a/assets/favicon.ico and b/assets/favicon.ico differ diff --git a/assets/font.css b/assets/font.css new file mode 100644 index 0000000..4727f57 --- /dev/null +++ b/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; +} diff --git a/assets/font/Roboto-Bold.ttf b/assets/font/Roboto-Bold.ttf new file mode 100644 index 0000000..9d7cf22 Binary files /dev/null and b/assets/font/Roboto-Bold.ttf differ diff --git a/assets/font/Roboto-BoldItalic.ttf b/assets/font/Roboto-BoldItalic.ttf new file mode 100644 index 0000000..f73d681 Binary files /dev/null and b/assets/font/Roboto-BoldItalic.ttf differ diff --git a/assets/font/Roboto-ExtraBold.ttf b/assets/font/Roboto-ExtraBold.ttf new file mode 100644 index 0000000..7092a88 Binary files /dev/null and b/assets/font/Roboto-ExtraBold.ttf differ diff --git a/assets/font/Roboto-ExtraBoldItalic.ttf b/assets/font/Roboto-ExtraBoldItalic.ttf new file mode 100644 index 0000000..a5536f5 Binary files /dev/null and b/assets/font/Roboto-ExtraBoldItalic.ttf differ diff --git a/assets/font/Roboto-Italic.ttf b/assets/font/Roboto-Italic.ttf new file mode 100644 index 0000000..c3abaef Binary files /dev/null and b/assets/font/Roboto-Italic.ttf differ diff --git a/assets/font/Roboto-Medium.ttf b/assets/font/Roboto-Medium.ttf new file mode 100644 index 0000000..d629e98 Binary files /dev/null and b/assets/font/Roboto-Medium.ttf differ diff --git a/assets/font/Roboto-MediumItalic.ttf b/assets/font/Roboto-MediumItalic.ttf new file mode 100644 index 0000000..ef9ed1b Binary files /dev/null and b/assets/font/Roboto-MediumItalic.ttf differ diff --git a/assets/font/Roboto-Regular.ttf b/assets/font/Roboto-Regular.ttf new file mode 100644 index 0000000..7e3bb2f Binary files /dev/null and b/assets/font/Roboto-Regular.ttf differ diff --git a/assets/font/Roboto-SemiBold.ttf b/assets/font/Roboto-SemiBold.ttf new file mode 100644 index 0000000..3f34834 Binary files /dev/null and b/assets/font/Roboto-SemiBold.ttf differ diff --git a/assets/font/Roboto-SemiBoldItalic.ttf b/assets/font/Roboto-SemiBoldItalic.ttf new file mode 100644 index 0000000..132cca1 Binary files /dev/null and b/assets/font/Roboto-SemiBoldItalic.ttf differ diff --git a/assets/font/Roboto_Condensed-ExtraLight.ttf b/assets/font/Roboto_Condensed-ExtraLight.ttf new file mode 100644 index 0000000..16a1560 Binary files /dev/null and b/assets/font/Roboto_Condensed-ExtraLight.ttf differ diff --git a/assets/font/Roboto_Condensed-ExtraLightItalic.ttf b/assets/font/Roboto_Condensed-ExtraLightItalic.ttf new file mode 100644 index 0000000..0f6fe70 Binary files /dev/null and b/assets/font/Roboto_Condensed-ExtraLightItalic.ttf differ diff --git a/assets/header.svg b/assets/header.svg deleted file mode 100644 index 59c96f2..0000000 --- a/assets/header.svg +++ /dev/null @@ -1,20 +0,0 @@ - \ No newline at end of file diff --git a/assets/main.css b/assets/main.css index 4314613..8dd39f6 100644 --- a/assets/main.css +++ b/assets/main.css @@ -1,107 +1,68 @@ -/* App-wide styling */ -body { - background-color: #0f1116; - color: #ffffff; - font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; - margin: 20px; -} - -#hero { - margin: 0; +#login_wrapper { + position: relative; + height: 100vh; + width: 100vw; display: flex; - flex-direction: column; justify-content: center; align-items: center; + overflow: hidden; } -#links { - width: 400px; - text-align: left; - font-size: x-large; +#background_img { + position: absolute; + top: 0; + 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; - flex-direction: column; + padding-left: 10px; + padding-right: 10px; } -#links a { - color: white; - text-decoration: none; - margin-top: 20px; - margin: 10px 0px; - border: white 1px solid; - border-radius: 5px; - padding: 10px; +.field:focus { + border: none; + outline: 1px solid white; } -#links a:hover { - background-color: #1f1f1f; - cursor: pointer; +body { + margin: 0; + padding: 0; } -#header { - max-width: 1200px; -} - -/* 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; +h1 { + width: max-content; margin-left: auto; margin-right: auto; - margin-top: 50px; - background-color: #1e222d; - padding: 20px; - border-radius: 10px; } -#echo>h4 { - 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; +button { display: block; - padding: 0px 0px 5px 0px; - width: 100%; -} - -#echo>input:focus { - border-bottom-color: #6d85c6; -} - -#echo>p { - margin: 20px 0px 0px auto; + margin-top: 20px; + margin-left: auto; + margin-right: auto; + width: max-content; + padding: 8px; + padding-left: 18px; + padding-right: 18px; } \ No newline at end of file diff --git a/assets/tailwind.css b/assets/tailwind.css deleted file mode 100644 index e69de29..0000000 diff --git a/src/backend/mod.rs b/src/backend/mod.rs new file mode 100644 index 0000000..1640adf --- /dev/null +++ b/src/backend/mod.rs @@ -0,0 +1 @@ +// use dioxus::prelude::*; diff --git a/src/login.rs b/src/login.rs new file mode 100644 index 0000000..18790fb --- /dev/null +++ b/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" } + } + } + } +} diff --git a/src/main.rs b/src/main.rs index fbf4aa3..80ff715 100644 --- a/src/main.rs +++ b/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 TAILWIND_CSS: Asset = asset!("/assets/tailwind.css"); +const FONT_CSS: Asset = asset!("/assets/font.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:: {} } } - -#[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:: {} - } -} - -/// 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 { - Ok(input) -} diff --git a/tailwind.config.js b/tailwind.config.js deleted file mode 100644 index 2a69d58..0000000 --- a/tailwind.config.js +++ /dev/null @@ -1,9 +0,0 @@ -/** @type {import('tailwindcss').Config} */ -module.exports = { - mode: "all", - content: ["./src/**/*.{rs,html,css}", "./dist/**/*.html"], - theme: { - extend: {}, - }, - plugins: [], -}; diff --git a/tailwind.css b/tailwind.css deleted file mode 100644 index bd6213e..0000000 --- a/tailwind.css +++ /dev/null @@ -1,3 +0,0 @@ -@tailwind base; -@tailwind components; -@tailwind utilities; \ No newline at end of file