UI enhancement

shailendramaurya · Oct 12, 2023 · 886d54f · 886d54f
1 parent 6165c82
commit 886d54f
Show file tree

Hide file tree

Showing 3 changed files with 59 additions and 56 deletions.
diff --git a/index.html b/index.html
@@ -29,43 +29,13 @@ <h1><img src="logo.png" class="logo">Racoon</h1>
 	</header>
 
 	<main class="container">
-	  <form onsubmit="submit(document.getElementById('url').value);return false;">
+	  <form id="form">
 		<input type="url" id="url" placeholder="Input URL here">
-			<input type="checkbox" id="isAudioOnly">
-		<label>Audio Only</label>
-		<a class="submitBtn" onclick="submit(document.getElementById('url').value)">Download</a>
-	</form>
-<div id="status">
-</div>
-	</main>
-
-
-
-	<footer align="center">
-	  <a class="settings" data-target="settings"
-  onClick="toggleModal(event)">
-  <i class="gg-website"></i>
-</a><br>
-	  <a class="contrast"
-  data-target="about"
-  onClick="toggleModal(event)">
-  About
-</a>
-<a class="contrast" data-target="developer"
-  onClick="toggleModal(event)">
-  Developer
-</a>
-<a class="contrast"
-  data-target="supported-sites"
-  onClick="toggleModal(event)">
-  Supported Sites
-</a>
-
-<dialog id="settings">
+
+		<button type="submit" class="submitBtn">Download</button>
 		<article>
-			<header>Settings</header>
-			<br>
-			<div style="display:flex;">
+
+	<div style="display:flex;">
 			  <label for="vQuality"><h4>Video</h4></label>
     &nbsp;&nbsp;&nbsp;&nbsp;
     <select id="vQuality">
@@ -77,7 +47,6 @@ <h1><img src="logo.png" class="logo">Racoon</h1>
         <option value="1080">1080p</option>
     </select>
 </div>
-    <br>
 
 <div style="display:flex">
   <label for="aFormat"><h4>Audio</h4></label>&nbsp;&nbsp;&nbsp;&nbsp;
@@ -89,8 +58,32 @@ <h1><img src="logo.png" class="logo">Racoon</h1>
             <option value="opus">Opus</option>
         </select>
         </div>
-		</article>
-		</dialog>
+
+<input type="checkbox" id="isAudioOnly">
+		<label>Audio Only</label>
+</form>
+</article>
+<div id="status">
+</div>
+	</main>
+
+
+
+	<footer align="center">
+	  <a class="contrast"
+  data-target="about"
+  onClick="toggleModal(event)">
+  About
+</a>
+<a class="contrast" data-target="developer"
+  onClick="toggleModal(event)">
+  Developer
+</a>
+<a class="contrast"
+  data-target="supported-sites"
+  onClick="toggleModal(event)">
+  Supported Sites
+</a>
 
 <dialog id="about">
 		<article>

diff --git a/index.js b/index.js
@@ -7,6 +7,7 @@ const ref = urlParams.get("ref");
 const audio = urlParams.get("audio");
 const statusDiv = document.getElementById("status");
 
+
 const status = {
   "loading": function(){
     statusDiv.innerHTML=``;
@@ -23,6 +24,7 @@ const status = {
   }
 }
 
+
 function processUrl(x){
   if(url){
     document.getElementById('url').value=url;
@@ -37,6 +39,21 @@ function processUrl(x){
 processUrl(url);
 
 
+
+document.getElementById("form").addEventListener("submit", function(event) {
+            event.preventDefault();
+submit(document.getElementById('url').value);
+            });
+
+document.getElementById("isAudioOnly").addEventListener("change", function(event) {
+            if(document.getElementById('isAudioOnly').checked){
+document.getElementById("vQuality").setAttribute("disabled","")}
+else{
+document.getElementById("vQuality").removeAttribute("disabled")
+}
+            });
+
+
 function submit(x) {
   if(!x){return}
   var api = "https://co.wuk.sh/api/json";

diff --git a/racoon.css b/racoon.css
@@ -80,33 +80,26 @@ figure img {
    border-radius:5px;
  }
  footer[align="center"]{
-   position:fixed;
-   bottom:10px;
- }
- .submitBtn{
-   border:none;
-   color:white;
-   padding:10px;
-   border-radius:5px;
    position:relative;
-   margin-inline:15vw;
-   background-color: cornflowerblue;
+   bottom:0px;
+resize:none;
  }
+
  i{
    margin:20px;
    scale:1.2;
  }
  #status{
    display:flex;
-   position:absolute;
-   margin:15px;
-   left:50%;
-   top:50%;
-   transform:translate(-50%,-40%);
+   position:relative;
+justify-content:center;
+padding-top: 10px;
+width:95%;
+height:auto;
+left:50%;
+top:50%;
+transform:translate(-50%,-40%)
  }
  #status i{
    scale:4;
- }
- #status .check{
-
  }