From 9f29e6d64c3eab02c993379cff9f1a4fa7a8442f Mon Sep 17 00:00:00 2001 From: ayabusa Date: Sat, 2 Mar 2024 13:49:41 +0100 Subject: [PATCH] added about menu --- src-tauri/src/main.rs | 18 ++++-- src/about.html | 35 ++++++++++ src/index.html | 18 +++++- src/main.js | 7 +- src/stars.scss | 147 ++++++++++++++++++++++++++++++++++++++++++ src/styles.css | 36 +++++++++++ 6 files changed, 253 insertions(+), 8 deletions(-) create mode 100644 src/about.html create mode 100644 src/stars.scss diff --git a/src-tauri/src/main.rs b/src-tauri/src/main.rs index 0325cd3..9e960bf 100644 --- a/src-tauri/src/main.rs +++ b/src-tauri/src/main.rs @@ -2,9 +2,8 @@ #![cfg_attr(not(debug_assertions), windows_subsystem = "windows")] use native_dialog::FileDialog; -use tauri::Manager; -use core::time; -use std::{fmt::format, fs, io::{Error, ErrorKind}, path::{Path, PathBuf}, sync::Mutex, ffi::OsString}; +use tauri::{Manager, PhysicalSize, Size}; +use std::{io::{Error, ErrorKind}, path::PathBuf, sync::Mutex}; #[macro_use] extern crate lazy_static; @@ -77,6 +76,17 @@ fn slice_button(app: tauri::AppHandle, chapter: &str){ } } +#[tauri::command] +async fn about_button(handle: tauri::AppHandle) { + let _about_window = tauri::WindowBuilder::new( + &handle, + "about", /* the unique window label */ + tauri::WindowUrl::App("about.html".into()) + ).build().expect("failed to create about window"); + _about_window.set_title("About Rusty Slicer").unwrap(); + _about_window.set_size(Size::Physical(PhysicalSize { width: 400, height: 600 })).unwrap(); +} + #[tauri::command] fn debug_call(message: &str){ println!("[DBG] {}", message); @@ -148,7 +158,7 @@ fn launch_ffmpeg(app: tauri::AppHandle, args: Vec) { fn main() { // generate the tauri app tauri::Builder::default() - .invoke_handler(tauri::generate_handler![select_file_button, select_folder_button, debug_call, slice_button]) + .invoke_handler(tauri::generate_handler![select_file_button, select_folder_button, debug_call, slice_button, about_button]) .run(tauri::generate_context!()) .expect("error while running tauri application"); } diff --git a/src/about.html b/src/about.html new file mode 100644 index 0000000..67d727d --- /dev/null +++ b/src/about.html @@ -0,0 +1,35 @@ + + + + + + + About Rusty slicer + + + +
+

Rusty Slicer V0.0.1

+

Credit

+

+ + Tauri
for all the UI (Super duper cool project)
+ Ffmpeg
to actually process the audio file (So powerfull)
+ Native Dialog crate
to open file select dialog (Really easy to use)
+ Lazy static crate
to create global variables more easly
+ Amanda Cifaldi
For the animated background template
+ + +

+

About Me

+

+ Howdy I'm Ayabusa and I created this little soft !
+ If you like my work, consider checking out my website and social :D
+ + Ayabusa.dev my website
+ My blog where I post all kind of stuff
+ My github where I post my projects
+ +

+
+ \ No newline at end of file diff --git a/src/index.html b/src/index.html index e61988d..bbf3237 100644 --- a/src/index.html +++ b/src/index.html @@ -14,7 +14,8 @@
-

Welcome to the Rusty slicer!

+
+

Welcome to the Rusty slicer!

Input file

@@ -46,10 +47,21 @@
- +
+

- made by ayabusa ;D
+
+
+ made by + ayabusa + ;D +
+ + + +
+
diff --git a/src/main.js b/src/main.js index 6ca19ee..6264076 100644 --- a/src/main.js +++ b/src/main.js @@ -14,6 +14,11 @@ function slice_button_pressed(){ invoke("slice_button", {chapter: document.getElementById("chapterList").value}) } +function about_button_pressed(){ + invoke("about_button") +} + document.getElementById("folderButton").addEventListener("click", select_folder_button_pressed); document.getElementById("fileButton").addEventListener("click", select_file_button_pressed); -document.getElementById("sliceButton").addEventListener("click", slice_button_pressed); \ No newline at end of file +document.getElementById("sliceButton").addEventListener("click", slice_button_pressed); +document.getElementById("aboutButton").addEventListener("click", about_button_pressed); \ No newline at end of file diff --git a/src/stars.scss b/src/stars.scss new file mode 100644 index 0000000..3b4dc91 --- /dev/null +++ b/src/stars.scss @@ -0,0 +1,147 @@ +@mixin translate50 +{ + -webkit-transform: translate(-50, -50%); + -ms-transform: translate(-50, -50%); + -o-transform: translate(-50, -50%); + transform: translate(-50, -50%); +} + +@mixin roundedCorners +{ + -webkit-border-radius: 50%; + -moz-border-radius: 50%; + border-radius: 50%; +} + +@mixin rotateBase +{ + -webkit-transform: rotate3d(-1, 1, 0, 0deg); + -ms-transform: rotate3d(-1, 1, 0, 0deg); + -o-transform: rotate3d(-1, 1, 0, 0deg); + transform: rotate3d(-1, 1, 0, 0deg); +} + +@mixin rotateRight +{ + -webkit-transform: rotate3d(-1, 1, 0, 30deg); + -ms-transform: rotate3d(-1, 1, 0, 30deg); + -o-transform: rotate3d(-1, 1, 0, 30deg); + transform: rotate3d(-1, 1, 0, 30deg); +} + +@mixin rotateLeft +{ + -webkit-transform: rotate3d(-1, 1, 0, -30deg); + -ms-transform: rotate3d(-1, 1, 0, -30deg); + -o-transform: rotate3d(-1, 1, 0, -30deg); + transform: rotate3d(-1, 1, 0, -30deg); +} + +// n is number of stars generated +@function generateStars ($n) +{ + $value: '#{0} #{random(2000)}px #{random(2000)}px #FFF'; + + @for $i from 2 through $n + { + $value: '#{$value} , #{random(2000)}px #{random(2000)}px #FFF'; + } + + @return unquote($value); +} + +$stars-small: generateStars(700); +$stars-medium: generateStars(200); +$stars-big: generateStars(100); + +body +{ + overflow: hidden; +} + +#stars-container +{ + height: 200vh; + width: 200%; + background: radial-gradient(ellipse at bottom, #1B2735 0%, #191F24 100%); + overflow: hidden; + @include translate50; +} + +#stars +{ + width: 1px; + height: 1px; + background: transparent; + box-shadow: $stars-small; + animation : animateStars 28.5s ease-in-out infinite; + @include roundedCorners; + + &::after + { + content: " "; + position: absolute; + margin: auto; + top: 0; left: 0; right: 0; bottom: 0; + width: 1px; + height: 1px; + background: transparent; + box-shadow: $stars-small; + @include roundedCorners; + } +} + +#stars2 +{ + width: 2px; + height: 2px; + background: transparent; + box-shadow: $stars-medium; + animation : animateStars 30s ease-in-out infinite; + @include roundedCorners; + + &::after + { + content: " "; + position: absolute; + margin: auto; + top: 0; left: 0; right: 0; bottom: 0; + width: 2px; + height: 2px; + background: transparent; + box-shadow: $stars-medium; + @include roundedCorners; + } +} + +#stars3 +{ + width: 3px; + height: 3px; + background: transparent; + box-shadow: $stars-big; + animation : animateStars 31.5s ease-in-out infinite; + @include roundedCorners; + + &:after + { + content: " "; + position: absolute; + margin: auto; + top: 0; left: 0; right: 0; bottom: 0; + width: 3px; + height: 3px; + background: transparent; + box-shadow: $stars-big; + @include roundedCorners; + } +} + +@keyframes animateStars +{ + 0%{@include rotateBase;} + 25%{@include rotateRight;} + 50%{@include rotateBase;} + 75%{@include rotateLeft;} + 100%{@include rotateBase;} +} \ No newline at end of file diff --git a/src/styles.css b/src/styles.css index 4b8185f..909445b 100644 --- a/src/styles.css +++ b/src/styles.css @@ -29,6 +29,14 @@ img{ row-gap: 0; } +.main-container { + display: flex; + flex-direction: column; + justify-content: space-between; + align-items: normal; + height: 97vh; +} + ::-moz-selection { /* Code for Firefox */ color: #ffffff; background: #d88939; @@ -39,7 +47,13 @@ img{ background: #d88939; } +a { + color: #d88939; +} +.credit { + text-align: center; +} .row { display: flex; @@ -104,3 +118,25 @@ button { #greet-input { margin-right: 5px; } + +.about_main { + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + + background-color: #52796F; + background-image: + linear-gradient(45deg, #354F52 25%, transparent 25%, transparent 75%, #354F52 75%, #354F52), + linear-gradient(45deg, #354F52 25%, transparent 25%, transparent 75%, #354F52 75%, #354F52), + linear-gradient(45deg, transparent, transparent 50%, #2F3E46 50%, #2F3E46); + background-size: 100px 100px; + background-position: 0 0, 50px 50px, 50px 0px; + -webkit-animation: scroll 5s linear infinite; +} + +@-webkit-keyframes scroll { + from { background-position: 0 0, 50px 50px, 50px 0; } + to { background-position: -100px -100px, -50px -50px, -50px -100px; } +} \ No newline at end of file