feat: added new tools and change design to 3d

public/css/home.css

@@ -0,0 +1,141 @@
+body {
+    font-family: Arial, sans-serif;
+    margin: 0;
+    padding: 0;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background-color: #f0f0f0;
+    flex-wrap: wrap;
+    margin-bottom: 80px;
+}
+
+footer {
+    position: fixed; 
+    bottom: 0; 
+    width: 100%; 
+    background-color: #ffffff; 
+    color: #343434; 
+    padding: 5px; 
+    text-align: center;
+    font-family: Arial, sans-serif; 
+    font-size: larger;
+    margin-top: 20px; 
+}
+
+.footer-line {
+    width: 100%; 
+    height: 1px; 
+    background-color: #fff; 
+    position: absolute; 
+    bottom: -5px; 
+    transform: translateY(50%); 
+}
+
+.container {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 20px;
+    padding: 20px;
+    width: 90%;
+    max-width: 1200px;
+}
+
+.card {
+    display: flex;
+    width: calc(50% - 10px);
+    border-radius: 15px;
+    overflow: hidden;
+    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1), 0 6px 20px rgba(0, 0, 0, 0.15);
+    background-color: white;
+    margin-bottom: 20px;
+    transition: transform 0.3s, box-shadow 0.3s;
+}
+
+.card:hover {
+    transform: translateY(-10px);
+    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.2), 0 10px 30px rgba(0, 0, 0, 0.25);
+}
+
+.text-section {
+    padding: 20px;
+    width: 50%;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    background-color: #f8f3ef;
+}
+
+.text-section h1 {
+    font-size: 2em;
+    font-weight: bold;
+    margin: 0 0 10px 0;
+}
+
+.more-button {
+    background-color: #3a3a8b;
+    color: white;
+    border: none;
+    padding: 10px 20px;
+    font-size: 1em;
+    border-radius: 25px;
+    margin: 10px 0;
+    cursor: pointer;
+    transition: background-color 0.3s;
+}
+
+.more-button:hover {
+    background-color: #2e2e6f;
+}
+
+.text-section p {
+    font-size: 0.9em;
+    color: #999;
+    margin-top: 10px;
+}
+
+.image-section {
+    width: 50%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: 20px;
+}
+
+.purple {
+    background-color: #c13e3e; /* Red color like YouTube */
+}
+
+.teal {
+    background-color: #292424; /* Black color like TikTok */
+}
+
+.red {
+    background-color: #1db954; /* Green color like Spotify */
+}
+
+.orange {
+    background-color: #4267B2; /* Blue color like Facebook */
+}
+
+.image-section img {
+    max-width: 100%;
+    height: auto;
+    border-radius: 10px;
+}
+
+.more-button.Tube {
+    background-color: #ff0000; /* Red color like YouTube */
+}
+
+.more-button.Tik {
+    background-color: #000000; /* Black color like TikTok */
+}
+
+.more-button.Sound {
+    background-color: #1db954; /* Green color like Spotify */
+}
+
+.more-button.Book {
+    background-color: #4267B2; /* Blue color like Facebook */
+}

server.js

@@ -2,17 +2,23 @@ const express = require('express');
 const cors = require('cors');
 const ytdl = require('ytdl-core');
 const app = express();
-const PORT = process.env.PORT || 2000;
+const path = require("path");
+
+const PORT = process.env.PORT || 3000;
 
 app.use(cors());
 app.use(express.json());
-app.use(express.static('public'));
+app.use(express.static(path.join(__dirname, 'public')));
 app.set('view engine', 'ejs');
 
 app.get('/', (req, res) => {
     res.render('index.ejs');
 });
 
+app.get('/home', (req, res) => {
+    res.render('home');
+});
+
 app.post('/get-video-info', async (req, res) => {
     const videoUrl = req.body.url;
     if (!ytdl.validateURL(videoUrl)) {

views/home.ejs

@@ -0,0 +1,47 @@
+<%- include('partials/header', { title: 'To Go Services' }) %>
+
+<div class="container">
+    <% const services = [
+        { title: "Tube To Go", description: "Dahil sa Tube To Go, YouTube Mo, Madaling Kopyahin!", img: "yt.png", colorClass: "purple", textColor: "#3a3a8b" },
+        { title: "Tik To Go", description: "Dahil sa Tik To Go, TikTok Mo, Madaling Kopyahin!", img: "tiktok.png", colorClass: "teal", textColor: "#5cbdb9" },
+        { title: "Sound To Go", description: "Dahil sa Sound To Go, Sound Mo, Madaling Kopyahin!", img: "mp3.png", colorClass: "red", textColor: "#e56b6f" },
+        { title: "Book To Go", description: "Dahil sa Book To Go, Book Mo, Madaling Kopyahin!", img: "fb.png", colorClass: "orange", textColor: "#fba65b" }
+    ]; %>
+
+    <!-- <% services.forEach(service => { %>
+        <div class="card">
+            <div class="text-section">
+                <h1 style="color: <%= service.textColor %>;"><%= service.title.replace(" ", " ") %></h1>
+                <% if (service.title === 'Tik To Go' || service.title === 'Book To Go' || service.title === 'Sound To Go') { %>
+                    <button class="more-button <%= service.colorClass %>">On Development</button>
+                <% } else { %>
+                    <button class="more-button <%= service.colorClass %>">Convert</button>
+                <% } %>
+                <p><%= service.description %></p>
+            </div>
+            <div class="image-section">
+                <img src="/images/<%= service.img %>" alt="<%= service.title %>">
+            </div>
+        </div>
+    <% }); %> -->
+
+    <% services.forEach(service => { %>
+        <div class="card">
+            <div class="text-section">
+                <h1 style="color: <%= service.textColor %>;"><%= service.title.replace(" ", " ") %></h1>
+                <!-- <button class="more-button <%= service.colorClass %>">Start Convert</button> -->
+                <% if (service.title === 'Tik To Go' || service.title === 'Book To Go' || service.title === 'Sound To Go') { %>
+                    <button class="more-button <%= service.colorClass %>">On Development</button>
+                <% } else { %>
+                    <button class="more-button <%= service.colorClass %>">Convert</button>
+                <% } %>
+                <p><%= service.description %></p>
+            </div>
+            <div class="image-section <%= service.colorClass %>">
+                <img src="/images/<%= service.img %>" alt="<%= service.title %>">
+            </div>
+        </div>
+    <% }); %>
+
+</div>
+<%- include('partials/footer') %>

views/index.ejs

@@ -16,6 +16,7 @@
             <i class="fa fa-question-circle" aria-hidden="true"></i>
         </div>
     </nav>
+    <a href="https://imgbb.com/"><img src="https://i.ibb.co/whXCdQT/LOGO.png" alt="LOGO" border="0"></a>
     <header>
         <h1>Tube To GO!</h1>
         <p style="font-size: 80%;">Dahil sa Tube To Go, YouTube Mo, Madaling Kopyahin!</p>

views/partials/footer.ejs

@@ -0,0 +1,6 @@
+</body>
+</html>
+<footer>
+    <div class="footer-line"></div>
+    <p style="font-size: 80%;">Developed with <span class="blue-heart">&#x1F499;</span> by Ram Ortega</p>
+</footer>

views/partials/header.ejs

@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title><%= title %></title>
+    <link rel="stylesheet" href="/css/home.css">
+</head>
+<body>