From c87ecf0428d5a8d4cd74ff452eb965caad78442e Mon Sep 17 00:00:00 2001 From: fabolous005 Date: Tue, 12 Nov 2024 23:54:57 +0100 Subject: [PATCH] add navbar + background + fading text --- src/main.rs | 8 ++- static/css/style.css | 108 ++++++++++++++++++++++++++++++++++++++ static/js/index.js | 57 ++++++++++++++++++++ templates/index.html.tera | 27 ++++++---- 4 files changed, 185 insertions(+), 15 deletions(-) create mode 100644 static/css/style.css create mode 100644 static/js/index.js diff --git a/src/main.rs b/src/main.rs index fd36fae..8100949 100644 --- a/src/main.rs +++ b/src/main.rs @@ -1,8 +1,8 @@ #[macro_use] extern crate rocket; use rocket::form::Form; -use rocket::form::FromForm; use rocket_dyn_templates::{Template, context}; +use rocket::fs::FileServer; #[derive(FromForm)] struct LoginData { @@ -16,10 +16,7 @@ fn login(login_data: Form) -> Template { let correct_password = "password"; let message = if login_data.username == correct_username && login_data.password == correct_password { - // On successful login, you can perform actions here like creating directories. - println!("Login successful: performing server-side actions."); - - "Login successful! Directories have been created." + "Login successful!" } else { "Invalid username or password." }; @@ -36,6 +33,7 @@ fn index() -> Template { fn rocket() -> _ { rocket::build() .mount("/", routes![index, login]) + .mount("/static", FileServer::from("static")) // Serves files in the `static` directory .attach(Template::fairing()) } diff --git a/static/css/style.css b/static/css/style.css new file mode 100644 index 0000000..03efe73 --- /dev/null +++ b/static/css/style.css @@ -0,0 +1,108 @@ +html, +body { + height: 100%; /* Makes html and body elements cover the full viewport height */ + margin: 0; + padding: 0; + font-family: Arial, sans-serif; +} + +.image { + background-image: url("https://i.pinimg.com/originals/74/51/5a/74515a5a0b625529e9dd0635ecc8bfcf.jpg"); /* Set your image path here */ + background-size: cover; /* Cover the entire container */ + background-position: center; /* Center the image */ + width: 100vw; /* Full width of the viewport */ + height: 100vh; /* Full height of the viewport */ + margin-top: 8%; + position: absolute; + text-align: left; +} + +#navbar { + overflow: hidden; + background-color: #f1f1f1; + padding: 90px 10px; /* Large padding which will shrink on scroll (using JS) */ + transition: 0.4s; /* Adds a transition effect when the padding is decreased */ + position: fixed; /* Sticky/fixed navbar */ + width: 100%; + top: 0; /* At the top */ + z-index: 99; +} + +/* Style the navbar links */ +#navbar a { + float: left; + color: black; + text-align: center; + padding: 12px; + text-decoration: none; + font-size: 18px; + line-height: 25px; + border-radius: 4px; +} + +/* Style the logo */ +#navbar #logo { + font-size: 35px; + font-weight: bold; + transition: 0.4s; +} + +#navbar a.submenu { + font-size: 2rem; + margin: 0 10px; + transition: 0.4s; +} + +/* Links on mouse-over */ +#navbar a:hover { + background-color: #ddd; + color: black; +} + +/* Display some links to the right */ +#navbar-right { + float: right; + margin-right: 3%; +} + +/* Add responsiveness - on screens less than 580px wide, display the navbar vertically instead of horizontally */ +@media screen and (max-width: 580px) { + #navbar { + padding: 20px 10px !important; /* Use !important to make sure that JavaScript doesn't override the padding on small screens */ + } + #navbar a { + float: none; + display: block; + text-align: left; + } + #navbar-right { + float: none; + } +} + +/* .typing-message { */ +/* text-shadow: 4px 4px 3px rgba(0, 0, 0, 0.1); */ +/* color: #fff; */ +/* text-align: left; */ +/* font-size: 7em; */ +/* font-weight: bold; */ +/* text-align: center; */ +/* margin-top: 40%; */ +/* margin-left: -20rem; */ +/* /* margin-left: 10px; */ +/* } */ + +.text-container { + position: absolute; + font-family: "Cookie"; + font-size: 8rem; + bottom: 30%; /* Adjust vertical position */ + left: 20%; /* Adjust horizontal position */ + /* transform: translateX(-50%); /* Center horizontally */ */ + /* font-size: 2em; */ + color: ffffff; + white-space: nowrap; + /* font-family: "Courier New", Courier, monospace; /* Handwritten-like font */ */ + /* font-weight: bold; */ + /* opacity: 1; /* Start with text hidden */ */ +} diff --git a/static/js/index.js b/static/js/index.js new file mode 100644 index 0000000..411ffaa --- /dev/null +++ b/static/js/index.js @@ -0,0 +1,57 @@ +window.onscroll = function () { + scrollFunction(); +}; + +function scrollFunction() { + if (document.body.scrollTop > 80 || document.documentElement.scrollTop > 80) { + document.getElementById("navbar").style.padding = "30px 10px"; + document.getElementById("logo").style.fontSize = "25px"; + document.getElementById("submenu0").style.fontSize = "1.6rem"; + document.getElementById("submenu1").style.fontSize = "1.6rem"; + document.getElementById("submenu2").style.fontSize = "1.6rem"; + } else { + document.getElementById("navbar").style.padding = "70px 10px"; + document.getElementById("logo").style.fontSize = "35px"; + document.getElementById("submenu0").style.fontSize = "2rem"; + document.getElementById("submenu1").style.fontSize = "2rem"; + document.getElementById("submenu2").style.fontSize = "2rem"; + } +} + +document.addEventListener("DOMContentLoaded", function () { + // The text to display + const text = "Welcome to our site!"; + const container = document.getElementById("text-container"); + + // Function to simulate typing effect + function typeText(element, text, delay = 100) { + let index = 0; + + function typeNextChar() { + if (index < text.length) { + // Append the next character + element.innerHTML += text[index]; + index++; + // Call the function recursively with a delay + setTimeout(typeNextChar, delay); + } + } + + // Start typing + typeNextChar(); + element.style.color = "white"; + + // Fade in the text container after the typing effect starts + setTimeout(() => { + element.style.opacity = 1; // Make the text visible + }, delay * index); + } + + // Start typing the text into the container + typeText(container, text, 150); // Adjust delay (in ms) for typing speed + setInterval(() => { + container.innerHTML = ""; // Clear the previous text + container.style.opacity = 0; // Hide the text container + typeText(container, text, 150); // Re-run the typing effect + }, 10000); // 10000ms = 10 seconds +}); diff --git a/templates/index.html.tera b/templates/index.html.tera index 4b549ee..a003c7f 100644 --- a/templates/index.html.tera +++ b/templates/index.html.tera @@ -1,20 +1,27 @@ + Login + -

Login

-
- - -
- - -
- -
+ + + +
+
+
+ +