mirror of
https://github.com/arkorty/DownLink.git
synced 2026-03-17 16:51:45 +00:00
Update the main viewport background
This commit is contained in:
Arkaprabha Chakraborty
Binary file not shown.
@@ -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": {
|
||||
|
||||
@@ -2,17 +2,21 @@ 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">
|
||||
<Header />
|
||||
<main className="flex-grow">
|
||||
<Routes>
|
||||
<Route path="/" element={<Home />} />
|
||||
</Routes>
|
||||
</main>
|
||||
<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>
|
||||
<Route path="/" element={<Home />} />
|
||||
</Routes>
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
</Router>
|
||||
);
|
||||
|
||||
88
frontend/src/components/Background.js
Normal file
88
frontend/src/components/Background.js
Normal file
@@ -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;
|
||||
@@ -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="1080p">Ultra</option>
|
||||
<option value="720p">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 && (
|
||||
|
||||
@@ -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>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -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 />
|
||||
|
||||
Reference in New Issue
Block a user