init

2025-06-14 02:14:10 +00:00 · 2024-02-14 17:01:21 +01:00
parent 6dd5a84c60
commit 12e7049dad
28 changed files with 4005 additions and 2 deletions
--- a/src/assets/cat-vibe-vibe-cat.gif
+++ b/src/assets/cat-vibe-vibe-cat.gif
--- a/src/index.html
+++ b/src/index.html
@ -0,0 +1,47 @@
+<!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>
+    <script type="module" src="/main.js" defer></script>
+  </head>
+
+<!-- Made by ayabusa (www.ayabusa.dev) with pain, because making html and css is awfully painfull :) -->
+
+  <body>
+    <div class="main-container">
+      <h3>Welcome to the Rusty slicer! <img src="assets/cat-vibe-vibe-cat.gif"></h1>
+        <div class="select-file">
+          <p><b> Input file </b> <br> no location choosen </p>
+          <button type="file-button">choose file 📂</button>
+        </div>
+
+        <div class="chapter-list">
+          <textarea rows="30">nothing for now</textarea>
+        </div>
+
+        <div class="select-file">
+          <p><b> Output folder </b> <br> no location choosen </p>
+          <button type="file-button">choose folder 📂</button>
+        </div>
+
+        <div class="select-file">
+          <p><b> output type </b></p>
+          <select>
+            <option value="mp3">mp3</option>
+            <option value="ogg">ogg</option>
+            <option value="flac">flac</option>
+            <option value="m4a">m4a</option>
+          </select>
+        </div>
+
+        <button class="slice-button" type="button"> Slice 🔪</button>
+          
+        <footer>
+          <br>
+          made by ayabusa ;D</footer>
+    </div>
+  </body>
+</html>
--- a/src/main.js
+++ b/src/main.js
@ -0,0 +1,18 @@
+const { invoke } = window.__TAURI__.tauri;
+
+let greetInputEl;
+let greetMsgEl;
+
+async function greet() {
+  // Learn more about Tauri commands at https://tauri.app/v1/guides/features/command
+  greetMsgEl.textContent = await invoke("greet", { name: greetInputEl.value });
+}
+
+window.addEventListener("DOMContentLoaded", () => {
+  greetInputEl = document.querySelector("#greet-input");
+  greetMsgEl = document.querySelector("#greet-msg");
+  document.querySelector("#greet-form").addEventListener("submit", (e) => {
+    e.preventDefault();
+    greet();
+  });
+});
--- a/src/protocol.css
+++ b/src/protocol.css
--- a/src/styles.css
+++ b/src/styles.css
@ -0,0 +1,100 @@
+:root {
+  font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
+
+  color: #f6f6f6;
+  background-color: #292829;
+
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-text-size-adjust: 100%;
+}
+
+textarea {
+  width: 100%;
+}
+
+img{
+  height: 2em;
+  width: 2em;
+}
+
+.select-file {
+
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  row-gap: 0;
+}
+
+p{
+
+}
+
+
+
+.row {
+  display: flex;
+  justify-content: center;
+}
+
+
+h1 {
+  text-align: center;
+}
+
+input,
+button {
+  border-radius: 8px;
+  border: 1px solid transparent;
+  padding: 0.5em 0.5em;
+  font-size: 1em;
+  font-weight: 500;
+  font-family: inherit;
+  color: #ffffff;
+  background-color: #292829;
+  transition: border-color 0.25s, color 0.25s;
+  border-color: #ffffff;
+  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
+}
+
+button {
+  cursor: pointer;
+}
+
+button:hover {
+  border-color: #d88939;
+  color: #d88939;
+}
+button:active {
+  border-color: #d88939;
+  background-color: #353435;
+}
+
+input,
+button {
+  outline: none;
+}
+
+.slice-button{
+  border-color: #292829;
+  color: #292829;
+  background-color: #d88939;
+}
+
+.slice-button:hover{
+  border-color: #d88939;
+  color: #d88939;
+  background-color: #292829;
+}
+
+.slice-button:active {
+  background-color: #353435;
+}
+
+
+#greet-input {
+  margin-right: 5px;
+}