change: ui for tube to go

ramonortegajr · May 30, 2024 · f8823ba · f8823ba
1 parent 23d8bde
commit f8823ba
Show file tree

Hide file tree

Showing 7 changed files with 54 additions and 39 deletions.
diff --git a/public/css/home.css b/public/css/home.css
@@ -51,6 +51,10 @@ header {
     margin-right: 30px; 
 }
 
+.header-link {
+    text-decoration: none;
+}
+
 .icon {
     margin-right: 10px;  
   }
@@ -237,3 +241,10 @@ i {
         font-size: 1.5em; 
     }
 }
+.spin-animation {
+    animation: spin 1s linear infinite;
+}
+@keyframes spin {
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(360deg); }
+}
diff --git a/public/js/script.js b/public/js/script.js
@@ -110,37 +110,6 @@ document.getElementById('thumbnail-container').addEventListener('click', functio
     }
 });
 
-
-// document.getElementById('download-button').addEventListener('click', function () {
-//     const videoUrl = document.getElementById('video-url').value;
-//     const qualitySelect = document.getElementById('quality');
-//     const itag = qualitySelect.value;
-//     const quality = qualitySelect.options[qualitySelect.selectedIndex].dataset.quality;
-//     const downloadUrl = `/download?url=${encodeURIComponent(videoUrl)}&itag=${itag}&quality=${quality}`;
-
-//     const a = document.createElement('a');
-//     a.href = downloadUrl;
-//     a.download = 'video.mp4';
-//     document.body.appendChild(a);
-//     a.click();
-//     document.body.removeChild(a);
-// });
-
-// document.addEventListener('DOMContentLoaded', function () {
-//     const pasteClipboardButton = document.getElementById('paste-clipboard');
-//     if (pasteClipboardButton) {
-//         pasteClipboardButton.addEventListener('click', function () {
-//             navigator.clipboard.readText()
-//                 .then(text => {
-//                     document.getElementById('video-url').value = text;
-//                 })
-//                 .catch(err => {
-//                     console.error('Failed to read clipboard contents: ', err);
-//                 });
-//         });
-//     }
-// });
-
 function formatDuration(seconds) {
     const hrs = Math.floor(seconds / 3600);
     const mins = Math.floor((seconds % 3600) / 60);
@@ -150,6 +119,6 @@ function formatDuration(seconds) {
 
 function convert(serviceName) {
     // Call your endpoint here
-    window.location.href = '/tube-togo';
+    window.location.href = '/tubetogo';
     console.log('Converting:', serviceName);
 }
diff --git a/server.js b/server.js
@@ -13,11 +13,14 @@ app.set('view engine', 'ejs');
 
 //call end points
 app.get('/', (req, res) => {
-    res.render('index.ejs');
+    res.render('index');
 });
 app.get('/tube-togo', (req, res) => {
     res.render('tube-togo');
 });
+app.get('/tubetogo', (req, res) => {
+    res.render('tubetogo');
+})
 
 app.post('/get-video-info', async (req, res) => {
     const videoUrl = req.body.url;

diff --git a/views/index.ejs b/views/index.ejs
@@ -1,4 +1,4 @@
-<%- include('partials/header', { title: 'To Go Services' }) %>
+<%- include('partials/header', { title: 'Tools To Go' }) %>
 
 <div class="container">
     <% const services = [

diff --git a/views/partials/header.ejs b/views/partials/header.ejs
@@ -10,7 +10,7 @@
 
 <header>
     <div class="menu-icon">&#9776;</div>
-    <h1 class="header-text">Tools To Go</h1>
+    <a href="/" class="header-link"><h1 class="header-text">Tools To Go</h1></a>
     <div class="header-icons">
       <a href="https://www.facebook.com/" target="_blank" class="icon fb" style="font-size: 20px; color: black;">
         <i class="fab fa-facebook"></i>

diff --git a/views/tube-togo.ejs b/views/tube-togo.ejs
@@ -45,10 +45,6 @@
         </div>                      
         <p class="note">💡Generate for free. No signup needed</p>
     </div>
-    <footer>
-        <button class="explore-tools">More tools soon</button>
-    </footer>
-    <p style="font-size: 80%;">Developed with <span class="blue-heart">&#x1F499;</span> by Ram Ortega</p>
     <script src="./js/script.js"></script>
 </body>
 </html>
diff --git a/views/tubetogo.ejs b/views/tubetogo.ejs
@@ -0,0 +1,36 @@
+<%- include('partials/header', { title: 'Tools To Go' }) %>
+
+<div class="container" style="display: flex; flex-direction: column; align-items: center;">
+    <!-- Tube To Go -->
+    <div class="text-section" style="display: flex; align-items: center; justify-content: center; flex-direction: column; text-align: center; background: none;">
+        <h1 style="color: #C13E3E; margin: 0; font-size: 2.5em; margin-bottom: -20px;">Tube To Go</h1>
+    </div>
+    <div class="card" style="border: 2px solid #C13E3E; padding: 40px; width: 80%; display: flex; justify-content: space-between; align-items: flex-start;">
+        <form id="converter-form">
+            <div style="width: 100%; margin-right: 20px;">
+                <h2 style="color: #C13E3E; margin-bottom: 20px;">Paste YouTube link here:</h2>
+                <input type="text" id="video-url" placeholder="ex:https://www.youtube.com/watch?qwerty" style="width: 93%; padding: 15px; margin-bottom: 20px; border: 1px solid #C13E3E; border-radius: 5px; background: none;" required>
+                <button class="more-button red" id="generate-button" type="submit" style="background-color: #C13E3E; color: white; padding: 15px; border: none; border-radius: 5px; font-size: 1.2em; width: 100%;">
+                    <i id="cog-icon" class="fas fa-cog" style="color: white;"></i> Generate Link
+                </button>
+            </div>
+        </form>  
+
+        <div id="video-info" style="display: none; text-align: center; max-width: 300px; margin: auto; margin-left: 2.0em; border: 2px solid #C13E3E; border-radius: 10px; padding: 20px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);">
+            <div id="thumbnail-container">
+                <img id="thumbnail" src="" alt="Video Thumbnail" style="width: 100%; border-radius: 10px; cursor: pointer;">
+            </div>
+            <p id="title" style="font-weight: bold; font-size: 18px; margin: 10px 0;"></p>
+            <p id="length" style="color: #666; margin-bottom: 20px;"></p>
+            <label for="quality" style="display: block; margin-bottom: 10px; font-weight: bold;">Select Quality:</label>
+            <select id="quality" style="width: 100%; padding: 10px; border-radius: 5px; border: 1px solid #C13E3E; margin-bottom: 20px;"></select>
+            <button id="download-button" style="background-color: #C13E3E; color: white; padding: 10px 20px; border: none; border-radius: 5px; cursor: pointer;">
+                <i class="fa fa-download" aria-hidden="true" style="color: white;"></i> Download
+            </button>
+        </div>
+    </div>
+    <p class="note" style="margin-top: -20px;">💡Generate for free. No signup needed</p>
+</div>
+
+<%- include('partials/footer') %>
+<script src="./js/script.js"></script>