Update the main viewport background

frontend/package.json

@@ -10,9 +10,11 @@
     "react": "^18.3.1",
     "react-confetti": "^6.1.0",
     "react-dom": "^18.3.1",
+    "react-particles": "^2.12.2",
     "react-router-dom": "^6.26.0",
     "react-scripts": "5.0.1",
     "react-type-animation": "^3.2.0",
+    "tsparticles-slim": "^2.12.0",
     "web-vitals": "^2.1.4"
   },
   "scripts": {

frontend/src/App.js

@@ -2,11 +2,14 @@ import React from "react";
 import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
 import Header from "./components/Header";
 import Home from "./components/Home";
+import Background from "./components/Background";
 
 function App() {
   return (
     <Router>
-      <div className="flex flex-col min-h-screen">
+      <div className="flex flex-col min-h-screen relative">
+        <Background />
+        <div className="relative z-10 flex flex-col min-h-screen">
           <Header />
           <main className="flex-grow">
             <Routes>
@@ -14,6 +17,7 @@ function App() {
             </Routes>
           </main>
         </div>
+      </div>
     </Router>
   );
 }

frontend/src/components/Background.js

@@ -0,0 +1,88 @@
+import React from "react";
+import Particles from "react-particles";
+import { loadSlim } from "tsparticles-slim";
+
+const Background = () => {
+  const particlesInit = async (engine) => {
+    await loadSlim(engine);
+  };
+
+  return (
+    <Particles
+      id="tsparticles"
+      init={particlesInit}
+      options={{
+        background: {
+          color: {
+            value: "#2c2c2c",
+          },
+        },
+        fpsLimit: 120,
+        interactivity: {
+          events: {
+            onClick: {
+              enable: true,
+              mode: "push",
+            },
+            onHover: {
+              enable: true,
+              mode: "repulse",
+            },
+            resize: true,
+          },
+          modes: {
+            push: {
+              quantity: 4,
+            },
+            repulse: {
+              distance: 200,
+              duration: 0.8,
+              speed: 0.03,
+            },
+          },
+        },
+        particles: {
+          color: {
+            value: "#d0d0d0",
+          },
+          links: {
+            color: "#a0a0a0",
+            distance: 150,
+            enable: true,
+            opacity: 0.5,
+            width: 1,
+          },
+          move: {
+            direction: "none",
+            enable: true,
+            outModes: {
+              default: "bounce",
+            },
+            random: false,
+            speed: 2,
+            straight: false,
+          },
+          number: {
+            density: {
+              enable: true,
+              area: 800,
+            },
+            value: 80,
+          },
+          opacity: {
+            value: 0.5,
+          },
+          shape: {
+            type: "circle",
+          },
+          size: {
+            value: { min: 1, max: 5 },
+          },
+        },
+        detectRetina: true,
+      }}
+    />
+  );
+};
+
+export default Background;

frontend/src/components/DownloadForm.js

@@ -68,7 +68,7 @@ const DownloadForm = () => {
   const getBarClass = () => {
     if (message === "Download Complete") return "bg-green-400";
     if (message === "Download Failed") return "bg-red-400";
-    return "bg-blue-500";
+    return "bg-blue-400";
   };
 
   const getBarStyle = () => ({
@@ -96,7 +96,7 @@ const DownloadForm = () => {
           <div className="flex-grow">
             <label
               htmlFor="url"
-              className="block text-sm font-medium text-gray-700 text-left"
+              className="block text-sm font-medium text-gray-300 text-left"
             >
               Video URL
             </label>
@@ -112,7 +112,7 @@ const DownloadForm = () => {
           <div className="flex-shrink-0 w-18">
             <label
               htmlFor="quality"
-              className="block text-sm font-medium text-gray-700 text-left"
+              className="block text-sm font-medium text-gray-300 text-left"
             >
               Quality
             </label>
@@ -122,19 +122,17 @@ const DownloadForm = () => {
               onChange={(e) => setQuality(e.target.value)}
               className="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm"
             >
-              <option value="360p">Normal</option>
+              <option value="360p">Standard</option>
               <option value="480p">High</option>
-              <option value="720p">Super</option>
+              <option value="720p">Ultra</option>
-              <option value="1080p">Ultra</option>
             </select>
           </div>
         </div>
-
         <div
-          className={`w-full bg-white rounded-lg mt-4 h-6 relative overflow-hidden ${
+          className={`w-full rounded-full mt-4 h-6 relative overflow-hidden ${
             progress > 0 || (isDownloading && progress === 0)
-              ? "border border-gray-300"
+              ? "bg-white bg-opacity-60"
-              : ""
+              : "bg-inherit"
           }`}
         >
           <div
@@ -160,18 +158,17 @@ const DownloadForm = () => {
             </span>
           </div>
         </div>
-
         <div className="flex justify-center">
           {!isDownloading && !message.startsWith("Downloading") && (
             <button
               type="submit"
-              className="relative inline-flex items-center px-8 py-4 border border-transparent text-lg font-bold rounded-lg text-white bg-gradient-to-r from-cyan-500 via-green-500 to-blue-500 hover:shadow-lg focus:outline-none animate-gradient"
+              className="relative inline-flex items-center px-8 py-4 text-lg font-bold rounded-xl text-white bg-black bg-opacity-60 hover:shadow-lg focus:outline-none transition-all duration-300"
             >
-              <span className="absolute inset-0 bg-black opacity-0 transition-opacity duration-300 ease-in-out active:opacity-40 rounded-lg"></span>
+              <span className="absolute inset-0 bg-black opacity-0 transition-opacity duration-300 ease-in-out active:opacity-40 rounded-xl"></span>
               Download
             </button>
           )}
-        </div>
+        </div>{" "}
       </form>
 
       {showConfetti && (

frontend/src/components/Header.js

@@ -2,26 +2,8 @@ import React from "react";
 
 const Header = () => {
   return (
-    <header className="bg-gradient-to-r from-cyan-500 via-green-500 to-blue-500 text-white p-4 animate-gradient">
+    <header className="text-white bg-black bg-opacity-60 p-4">
       <h1 className="text-xl font-bold">DownLink</h1>
-      <style jsx>{`
-        @keyframes gradientFlow {
-          0% {
-            background-position: 0% 0%;
-          }
-          50% {
-            background-position: 100% 100%;
-          }
-          100% {
-            background-position: 0% 0%;
-          }
-        }
-
-        .animate-gradient {
-          background-size: 300% 300%;
-          animation: gradientFlow 15s ease infinite;
-        }
-      `}</style>
     </header>
   );
 };

frontend/src/components/Home.js

@@ -10,17 +10,19 @@ const Home = () => {
         <h1 className="text-white mb-4 text-4xl sm:text-5xl lg:text-6xl font-extrabold">
           <TypeAnimation
             sequence={[
-              "Easy To Use!",
+              "From YouTube!",
+              1200,
+              "Download Now!",
               1200,
               "HD Quality!",
               1200,
-              "Download YouTube Videos!",
+              "DownLink!",
               1200,
             ]}
             wrapper="span"
             speed={30}
             repeat={Infinity}
-            className="text-transparent bg-clip-text bg-gradient-to-r from-cyan-500 to-blue-500"
+            className="text-transparent bg-clip-text bg-white bg-opacity-80"
           />
         </h1>
         <DownloadForm />