mirror of
https://github.com/ayabusa/Rusty-slicer.git
synced 2024-11-25 04:13:24 +00:00
added about menu
This commit is contained in:
parent
0df3a293b5
commit
9f29e6d64c
@ -2,9 +2,8 @@
|
|||||||
#![cfg_attr(not(debug_assertions), windows_subsystem = "windows")]
|
#![cfg_attr(not(debug_assertions), windows_subsystem = "windows")]
|
||||||
|
|
||||||
use native_dialog::FileDialog;
|
use native_dialog::FileDialog;
|
||||||
use tauri::Manager;
|
use tauri::{Manager, PhysicalSize, Size};
|
||||||
use core::time;
|
use std::{io::{Error, ErrorKind}, path::PathBuf, sync::Mutex};
|
||||||
use std::{fmt::format, fs, io::{Error, ErrorKind}, path::{Path, PathBuf}, sync::Mutex, ffi::OsString};
|
|
||||||
|
|
||||||
#[macro_use]
|
#[macro_use]
|
||||||
extern crate lazy_static;
|
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]
|
#[tauri::command]
|
||||||
fn debug_call(message: &str){
|
fn debug_call(message: &str){
|
||||||
println!("[DBG] {}", message);
|
println!("[DBG] {}", message);
|
||||||
@ -148,7 +158,7 @@ fn launch_ffmpeg(app: tauri::AppHandle, args: Vec<String>) {
|
|||||||
fn main() {
|
fn main() {
|
||||||
// generate the tauri app
|
// generate the tauri app
|
||||||
tauri::Builder::default()
|
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!())
|
.run(tauri::generate_context!())
|
||||||
.expect("error while running tauri application");
|
.expect("error while running tauri application");
|
||||||
}
|
}
|
||||||
|
|||||||
35
src/about.html
Normal file
35
src/about.html
Normal file
@ -0,0 +1,35 @@
|
|||||||
|
<!doctype html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<link rel="stylesheet" href="styles.css" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<title>About Rusty slicer</title>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<div class="about_main">
|
||||||
|
<h1> Rusty Slicer V0.0.1 </h1>
|
||||||
|
<h2 class="credit"> Credit </h2>
|
||||||
|
<p class="credit">
|
||||||
|
<b>
|
||||||
|
<a href="https://tauri.app/" target="_blank">Tauri</a> <br> for all the UI (Super duper cool project) <br>
|
||||||
|
<a href="https://ffmpeg.org/" target="_blank">Ffmpeg</a> <br> to actually process the audio file (So powerfull) <br>
|
||||||
|
<a href="https://crates.io/crates/native-dialog" target="_blank">Native Dialog crate</a> <br> to open file select dialog (Really easy to use) <br>
|
||||||
|
<a href="https://crates.io/crates/lazy_static" target="_blank">Lazy static crate</a> <br> to create global variables more easly <br>
|
||||||
|
<a href="https://codepen.io/algcifaldi" target="_blank">Amanda Cifaldi</a> <br> For the animated background template <br>
|
||||||
|
|
||||||
|
</b>
|
||||||
|
</p>
|
||||||
|
<h2 class="credit"> About Me </h2>
|
||||||
|
<p class="credit">
|
||||||
|
Howdy I'm Ayabusa and I created this little soft !<br>
|
||||||
|
If you like my work, consider checking out my website and social :D <br>
|
||||||
|
<b>
|
||||||
|
<a href="https://www.ayabusa.dev" target="_blank">Ayabusa.dev</a> my website <br>
|
||||||
|
<a href="https://blog.ayabusa.dev" target="_blank">My blog</a> where I post all kind of stuff <br>
|
||||||
|
<a href="https://github.com/ayabusa" target="_blank">My github</a> where I post my projects <br>
|
||||||
|
</b>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
@ -14,7 +14,8 @@
|
|||||||
|
|
||||||
<body>
|
<body>
|
||||||
<div class="main-container">
|
<div class="main-container">
|
||||||
<h3>Welcome to the Rusty slicer! <img src="assets/cat-vibe-vibe-cat.gif"></h1>
|
<div>
|
||||||
|
<h3>Welcome to the Rusty slicer! <img src="assets/cat-vibe-vibe-cat.gif"></h1>
|
||||||
<div class="select-file">
|
<div class="select-file">
|
||||||
<div>
|
<div>
|
||||||
<p><b> Input file </b></p>
|
<p><b> Input file </b></p>
|
||||||
@ -46,10 +47,21 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<button class="slice-button" id="sliceButton"> Slice 🔪</button>
|
<button class="slice-button" id="sliceButton"> Slice 🔪</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
<footer>
|
<footer>
|
||||||
<br>
|
<br>
|
||||||
made by ayabusa ;D</footer>
|
<div class="select-file">
|
||||||
|
<div>
|
||||||
|
made by <a target="_blank" href="https://www.ayabusa.dev">
|
||||||
|
ayabusa
|
||||||
|
</a> ;D
|
||||||
|
</div>
|
||||||
|
<span style="float : right;">
|
||||||
|
<button id="aboutButton"> About 🤔 </button>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
</div>
|
</div>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
@ -14,6 +14,11 @@ function slice_button_pressed(){
|
|||||||
invoke("slice_button", {chapter: document.getElementById("chapterList").value})
|
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("folderButton").addEventListener("click", select_folder_button_pressed);
|
||||||
document.getElementById("fileButton").addEventListener("click", select_file_button_pressed);
|
document.getElementById("fileButton").addEventListener("click", select_file_button_pressed);
|
||||||
document.getElementById("sliceButton").addEventListener("click", slice_button_pressed);
|
document.getElementById("sliceButton").addEventListener("click", slice_button_pressed);
|
||||||
|
document.getElementById("aboutButton").addEventListener("click", about_button_pressed);
|
||||||
147
src/stars.scss
Normal file
147
src/stars.scss
Normal file
@ -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;}
|
||||||
|
}
|
||||||
@ -29,6 +29,14 @@ img{
|
|||||||
row-gap: 0;
|
row-gap: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.main-container {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: normal;
|
||||||
|
height: 97vh;
|
||||||
|
}
|
||||||
|
|
||||||
::-moz-selection { /* Code for Firefox */
|
::-moz-selection { /* Code for Firefox */
|
||||||
color: #ffffff;
|
color: #ffffff;
|
||||||
background: #d88939;
|
background: #d88939;
|
||||||
@ -39,7 +47,13 @@ img{
|
|||||||
background: #d88939;
|
background: #d88939;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
color: #d88939;
|
||||||
|
}
|
||||||
|
|
||||||
|
.credit {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
.row {
|
.row {
|
||||||
display: flex;
|
display: flex;
|
||||||
@ -104,3 +118,25 @@ button {
|
|||||||
#greet-input {
|
#greet-input {
|
||||||
margin-right: 5px;
|
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; }
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue
Block a user