changed main page layout and fixed some bugs

This commit is contained in:
2024-03-17 15:40:00 +01:00
parent 70169eaf67
commit 728b17288a
8 changed files with 85 additions and 42 deletions

View File

@ -9,7 +9,7 @@
<body>
<div class="about_main">
<h1> Rusty Slicer V0.0.1 </h1>
<h1> Rusty Slicer V1.0.0 </h1>
<h2 class="credit"> Credit </h2>
<p class="credit">
<b>

12
src/done.html Normal file
View File

@ -0,0 +1,12 @@
<!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>Rusty Slicer</title>
</head>
<body>
<p class="credit" id="progress_label"> Finished slicing :D </p>
</body>

View File

@ -16,47 +16,52 @@
<div class="main-container">
<div>
<h3>Welcome to the Rusty slicer! <img src="assets/cat-vibe-vibe-cat.gif"></h1>
<div class="select-file">
<div>
<h4><b> Input file </b></h4>
<p id="fileLocation"> no location choosen </p>
</div>
<button id="fileButton">choose file 📂</button>
</div>
<div>
<h4><b> Chapter list (timecode - song name) </b></h4>
<textarea id="chapterList" rows="30" cols="10000" placeholder="0:00 - my first song
<div class="action-container">
<div>
<h4><b> Chapter list (timecode - song name) </b></h4>
<textarea id="chapterList" rows="30" cols="10000" placeholder="0:00 - my first song
3:30 - another one
13:37 - one more time - Daft punk"></textarea>
<p id="errorLabel" style="color: red;"></p>
</div>
<div class="select-file">
<div>
<p><b> Output folder </b> </p>
<p id="folderLocation"> no location choosen </p>
<p id="errorLabel" style="color: red;"></p>
</div>
<button id="folderButton">choose folder 📂</button>
</div>
<div class="select-file">
<p><b> output type </b></p>
<select id="fileFormatSelect">
<option value="mp3">mp3 (recommended)</option>
<option value="ogg">ogg</option>
<option value="flac">flac (really long)</option>
<option value="m4a">m4a</option>
</select>
</div>
<div>
<div class="select-file">
<div>
<h4><b> Input file </b></h4>
<p id="fileLocation"> no location choosen </p>
</div>
<button id="fileButton">choose file 📂</button>
</div>
<button class="slice-button" id="sliceButton"> Slice 🔪</button>
<div class="select-file">
<div>
<p><b> Output folder </b> </p>
<p id="folderLocation"> no location choosen </p>
</div>
<button id="folderButton">choose folder 📂</button>
</div>
<div class="select-file">
<p><b> output type </b></p>
<select id="fileFormatSelect">
<option value="mp3">mp3 (recommended)</option>
<option value="ogg">ogg</option>
<option value="flac">flac (really long)</option>
<option value="m4a">m4a</option>
</select>
</div>
<br> <br>
<button class="slice-button" id="sliceButton"> Slice 🔪</button>
</div>
</div>
</div>
<footer>
<br>
<div class="select-file">
<div>
<div class="credit_main">
made by <a target="_blank" href="https://www.ayabusa.dev">
ayabusa
</a> ;D

View File

@ -17,7 +17,8 @@
}
textarea {
width: 100%;
width: 95%;
flex: 1;
}
img{
@ -42,6 +43,13 @@ img{
height: 97vh;
}
.action-container{
display: grid;
grid-auto-flow: column;
grid-auto-columns: 1fr;
}
::-moz-selection { /* Code for Firefox */
color: #ffffff;
background: #d88939;
@ -56,6 +64,10 @@ a {
color: #d88939;
}
.credit_main {
margin-left: auto;
margin-right: auto;
}
.credit {
text-align: center;
}
@ -107,6 +119,7 @@ button {
border-color: #292829;
color: #292829;
background-color: #d88939;
float: right;
}
.slice-button:hover{