diff --git a/ui/app/page.tsx b/ui/app/page.tsx index c08f8b3f..e242dfe9 100644 --- a/ui/app/page.tsx +++ b/ui/app/page.tsx @@ -1,4 +1,4 @@ -'use client'; +"use client"; import { useState, useEffect, useRef, useCallback } from "react"; @@ -7,41 +7,67 @@ const scriptCategories = [ emoji: "🤖", name: "Automation", description: "Smart scripts that work while you sleep", - scripts: ["Auto Email Sender", "File Organizer", "Backup Scheduler", "File Renamer", "Folder Monitor"], + scripts: [ + "Auto Email Sender", + "File Organizer", + "Backup Scheduler", + "File Renamer", + "Folder Monitor", + ], color: "from-cyan-400 to-blue-600", hoverColor: "hover:from-cyan-500 hover:to-blue-700", - bgPattern: "linear-gradient(45deg, rgba(6,182,212,0.1) 25%, transparent 25%), linear-gradient(-45deg, rgba(6,182,212,0.1) 25%, transparent 25%)", - icon: "⚡" + bgPattern: + "linear-gradient(45deg, rgba(6,182,212,0.1) 25%, transparent 25%), linear-gradient(-45deg, rgba(6,182,212,0.1) 25%, transparent 25%)", + icon: "⚡", }, { emoji: "🧠", name: "Productivity", description: "Focus amplifiers for peak performance", - scripts: ["Pomodoro Timer", "Quote Fetcher", "Reminder System", "Time Tracker", "Todo Manager"], + scripts: [ + "Pomodoro Timer", + "Quote Fetcher", + "Reminder System", + "Time Tracker", + "Todo Manager", + ], color: "from-purple-400 to-pink-600", hoverColor: "hover:from-purple-500 hover:to-pink-700", - bgPattern: "radial-gradient(circle at 20% 50%, rgba(168,85,247,0.1) 0%, transparent 50%)", - icon: "🚀" + bgPattern: + "radial-gradient(circle at 20% 50%, rgba(168,85,247,0.1) 0%, transparent 50%)", + icon: "🚀", }, { emoji: "🌐", name: "Web Scraping", description: "Extract gold from the digital wilderness", - scripts: ["News Fetcher", "Weather Checker", "Web Scraper", "YouTube Downloader"], + scripts: [ + "News Fetcher", + "Weather Checker", + "Web Scraper", + "YouTube Downloader", + ], color: "from-green-400 to-teal-600", hoverColor: "hover:from-green-500 hover:to-teal-700", - bgPattern: "repeating-linear-gradient(90deg, transparent, transparent 2px, rgba(34,197,94,0.1) 2px, rgba(34,197,94,0.1) 4px)", - icon: "🌊" + bgPattern: + "repeating-linear-gradient(90deg, transparent, transparent 2px, rgba(34,197,94,0.1) 2px, rgba(34,197,94,0.1) 4px)", + icon: "🌊", }, { emoji: "⚙️", name: "Utilities", description: "Your digital Swiss Army knife", - scripts: ["Age Calculator", "Currency Converter", "Password Generator", "Unit Converter"], + scripts: [ + "Age Calculator", + "Currency Converter", + "Password Generator", + "Unit Converter", + ], color: "from-orange-400 to-red-600", hoverColor: "hover:from-orange-500 hover:to-red-700", - bgPattern: "conic-gradient(from 0deg, rgba(251,146,60,0.1), rgba(239,68,68,0.1), rgba(251,146,60,0.1))", - icon: "🔧" + bgPattern: + "conic-gradient(from 0deg, rgba(251,146,60,0.1), rgba(239,68,68,0.1), rgba(251,146,60,0.1))", + icon: "🔧", }, { emoji: "📊", @@ -50,8 +76,9 @@ const scriptCategories = [ scripts: ["Data Converter", "Data Processor", "Data Visualizer"], color: "from-indigo-400 to-purple-600", hoverColor: "hover:from-indigo-500 hover:to-purple-700", - bgPattern: "linear-gradient(135deg, rgba(99,102,241,0.1) 0%, rgba(168,85,247,0.1) 100%)", - icon: "📈" + bgPattern: + "linear-gradient(135deg, rgba(99,102,241,0.1) 0%, rgba(168,85,247,0.1) 100%)", + icon: "📈", }, { emoji: "🔐", @@ -60,8 +87,9 @@ const scriptCategories = [ scripts: ["Password Checker"], color: "from-red-400 to-pink-600", hoverColor: "hover:from-red-500 hover:to-pink-700", - bgPattern: "radial-gradient(ellipse at center, rgba(239,68,68,0.1) 0%, transparent 70%)", - icon: "🛡️" + bgPattern: + "radial-gradient(ellipse at center, rgba(239,68,68,0.1) 0%, transparent 70%)", + icon: "🛡️", }, { emoji: "🎵", @@ -70,9 +98,10 @@ const scriptCategories = [ scripts: ["Audio Processor", "Image Processor"], color: "from-yellow-400 to-orange-600", hoverColor: "hover:from-yellow-500 hover:to-orange-700", - bgPattern: "linear-gradient(60deg, rgba(251,191,36,0.1) 25%, transparent 25%), linear-gradient(120deg, rgba(251,191,36,0.1) 25%, transparent 25%)", - icon: "🎨" - } + bgPattern: + "linear-gradient(60deg, rgba(251,191,36,0.1) 25%, transparent 25%), linear-gradient(120deg, rgba(251,191,36,0.1) 25%, transparent 25%)", + icon: "🎨", + }, ]; const terminalCommands = [ @@ -82,7 +111,7 @@ const terminalCommands = [ "python utilities/password_generator.py --length 16 --secure", "python data_tools/data_visualizer.py --input data.csv --chart bar", "python security/password_checker.py --file passwords.txt", - "python media/image_processor.py --resize 1920x1080 --format jpg" + "python media/image_processor.py --resize 1920x1080 --format jpg", ]; const floatingParticles = Array.from({ length: 20 }, (_, i) => ({ @@ -91,7 +120,7 @@ const floatingParticles = Array.from({ length: 20 }, (_, i) => ({ y: Math.random() * 100, size: Math.random() * 4 + 2, speed: Math.random() * 0.3 + 0.1, - opacity: Math.random() * 0.5 + 0.3 + opacity: Math.random() * 0.5 + 0.3, })); export default function Home() { @@ -130,11 +159,13 @@ export default function Home() { // Animate particles useEffect(() => { const animateParticles = () => { - setParticles(prev => prev.map(particle => ({ - ...particle, - y: (particle.y + particle.speed * 0.01) % 100, - x: particle.x + Math.sin(Date.now() * 0.0001 + particle.id) * 0.02 - }))); + setParticles((prev) => + prev.map((particle) => ({ + ...particle, + y: (particle.y + particle.speed * 0.01) % 100, + x: particle.x + Math.sin(Date.now() * 0.0001 + particle.id) * 0.02, + })) + ); }; const interval = setInterval(animateParticles, 2000); @@ -144,14 +175,14 @@ export default function Home() { // Cursor blinking useEffect(() => { const interval = setInterval(() => { - setShowCursor(prev => !prev); + setShowCursor((prev) => !prev); }, 500); return () => clearInterval(interval); }, []); useEffect(() => { setIsLoaded(true); - + const handleScroll = () => { setScrollY(window.scrollY); // Animate stats when scrolled into view @@ -159,17 +190,17 @@ export default function Home() { setStatsAnimated(true); } }; - + const handleMouseMove = (e: MouseEvent) => { setMousePosition({ x: e.clientX, y: e.clientY }); }; - window.addEventListener('scroll', handleScroll); - window.addEventListener('mousemove', handleMouseMove); - + window.addEventListener("scroll", handleScroll); + window.addEventListener("mousemove", handleMouseMove); + return () => { - window.removeEventListener('scroll', handleScroll); - window.removeEventListener('mousemove', handleMouseMove); + window.removeEventListener("scroll", handleScroll); + window.removeEventListener("mousemove", handleMouseMove); }; }, [statsAnimated]); @@ -192,7 +223,11 @@ export default function Home() { const handleTerminalSubmit = (e: React.FormEvent) => { e.preventDefault(); if (terminalInput.trim()) { - setTerminalHistory(prev => [...prev, `$ ${terminalInput}`, "Command executed successfully! ✅"]); + setTerminalHistory((prev) => [ + ...prev, + `$ ${terminalInput}`, + "Command executed successfully! ✅", + ]); setTerminalInput(""); } }; @@ -219,20 +254,22 @@ export default function Home() { width: `${particle.size}px`, height: `${particle.size}px`, opacity: particle.opacity, - transform: `translateY(${scrollY * 0.02}px)` + transform: `translateY(${scrollY * 0.02}px)`, }} /> ))} {/* Enhanced cursor follower with trail effect */} -
@@ -250,13 +287,13 @@ export default function Home() {
- - {/* Hero Section - Enhanced terminal with interactive elements */} -
+
{/* Enhanced Matrix-like background */}
{[...Array(100)].map((_, i) => ( @@ -281,10 +321,18 @@ export default function Home() { top: `${Math.random() * 100}%`, animationDelay: `${Math.random() * 10}s`, animationDuration: `${6 + Math.random() * 6}s`, - transform: `translateY(${scrollY * 0.02}px) rotate(${Math.random() * 360}deg)` + transform: `translateY(${scrollY * 0.02}px) rotate(${ + Math.random() * 360 + }deg)`, }} > - {Math.random() > 0.7 ? ['def', 'import', 'python', 'class', 'if'][Math.floor(Math.random() * 5)] : Math.random() > 0.5 ? '1' : '0'} + {Math.random() > 0.7 + ? ["def", "import", "python", "class", "if"][ + Math.floor(Math.random() * 5) + ] + : Math.random() > 0.5 + ? "1" + : "0"}
))}
@@ -292,50 +340,86 @@ export default function Home() { {/* Glowing orbs */}
-
-
+
+
{/* Enhanced Terminal Window */} -
+
{/* Terminal Header with interactive buttons */}
- + - +
- user@pyeveryday:~$ {scriptCategories[activeScript].name.toLowerCase()} + user@pyeveryday:~${" "} + {scriptCategories[activeScript].name.toLowerCase()}
{new Date().toLocaleTimeString()}
- + {/* Enhanced Terminal Content */}
-
$ python3 pyeveryday.py --initialize
+
+ $ python3 pyeveryday.py --initialize +
🐍 PyEveryday Automation Suite v2.0.1
- + {/* Terminal History */} {terminalHistory.map((line, index) => (
{line}
))} - +
▶ Loading {scriptCategories.length} script categories
-
-
-
+
+
+
@@ -349,33 +433,47 @@ export default function Home() { ✓
- +
- {scriptCategories[activeScript].icon} - Active Module: {scriptCategories[activeScript].name} + + {scriptCategories[activeScript].icon} + + Active Module:{" "} + + {scriptCategories[activeScript].name} +
- +
Description:
{scriptCategories[activeScript].description}
- +
{scriptCategories[activeScript].scripts.map((script, index) => ( - setTerminalHistory(prev => [...prev, `$ Running ${script}...`, `✅ ${script} executed successfully!`])} + onClick={() => + setTerminalHistory((prev) => [ + ...prev, + `$ Running ${script}...`, + `✅ ${script} executed successfully!`, + ]) + } > {script} ))}
- + {/* Interactive command input */} -
+ $ setIsTerminalFocused(true)} onBlur={() => setIsTerminalFocused(false)} /> - _ + + _ +
@@ -397,13 +501,23 @@ export default function Home() {
Initialize Scripts - - + + - -

- Seven powerful categories of automation tools, each designed to solve specific challenges in your digital workflow. + Seven powerful categories of automation tools, each designed to + solve specific challenges in your digital workflow.

@@ -431,23 +546,29 @@ export default function Home() {
{scriptCategories.map((category, index) => ( -
setHoveredCategory(index)} onMouseLeave={() => setHoveredCategory(null)} onClick={() => handleCategoryClick(index)} > {/* Animated Background overlay */}
- + {/* Glowing border effect */}
- +
@@ -457,41 +578,65 @@ export default function Home() { {category.icon}
- +

{category.name}

{category.description}

- +
- {category.scripts.slice(0, selectedCategory === index ? category.scripts.length : 3).map((script, scriptIndex) => ( -
= 3 ? 'translate-x-4 opacity-0' : 'translate-x-0 opacity-100'}`} - style={{ transitionDelay: `${scriptIndex * 50}ms` }} - onClick={(e) => { - e.stopPropagation(); - setTerminalHistory(prev => [...prev, `$ python ${category.name.toLowerCase()}/${script.toLowerCase().replace(/\s+/g, '_')}.py`, `✅ ${script} executed successfully!`]); - }} - > - {script} -
- ))} - {category.scripts.length > 3 && selectedCategory !== index && ( -
- Click to see +{category.scripts.length - 3} more... -
- )} + {category.scripts + .slice( + 0, + selectedCategory === index + ? category.scripts.length + : 3 + ) + .map((script, scriptIndex) => ( +
= 3 + ? "translate-x-4 opacity-0" + : "translate-x-0 opacity-100" + }`} + style={{ transitionDelay: `${scriptIndex * 50}ms` }} + onClick={(e) => { + e.stopPropagation(); + setTerminalHistory((prev) => [ + ...prev, + `$ python ${category.name.toLowerCase()}/${script + .toLowerCase() + .replace(/\s+/g, "_")}.py`, + `✅ ${script} executed successfully!`, + ]); + }} + > + {script} +
+ ))} + {category.scripts.length > 3 && + selectedCategory !== index && ( +
+ Click to see +{category.scripts.length - 3} more... +
+ )}
{/* Interactive indicators */}
{[...Array(3)].map((_, i) => ( -
))} @@ -517,7 +662,11 @@ export default function Home() {
{/* Enhanced Code Editor Mockup */} -
+
@@ -525,14 +674,20 @@ export default function Home() {
- file_organizer.py + + file_organizer.py +
- Python - Active + + Python + + + Active +
- +
{/* Line numbers */}
@@ -540,31 +695,52 @@ export default function Home() {
{i + 1}
))}
- +
# PyEveryday - File Organizer
- import os, shutil + import{" "} + + os + + ,{" "} + + shutil +
- from pathlib import Path + from{" "} + + pathlib + {" "} + import{" "} + + Path +

- def organize_files(directory): + def{" "} + + organize_files + + (directory):
# Automatically sort files by type
- for file in Path(directory).iterdir(): + for file{" "} + in{" "} + Path(directory).iterdir():
- if file.is_file(): + if{" "} + file.is_file():
@@ -585,9 +761,17 @@ export default function Home() { {/* Interactive execution button */} {showCodeDemo && (
- @@ -620,14 +804,20 @@ export default function Home() {
-
+
- {statsAnimated ? '25+' : '0'} + {statsAnimated ? "25+" : "0"}
-
Python Scripts
+
+ Python Scripts +
Ready-to-use automation tools
@@ -644,45 +834,78 @@ export default function Home() {
- -
+ +
- {statsAnimated ? '7' : '0'} + {statsAnimated ? "7" : "0"}
-
+
+
+
+ Categories +
+
+ Covering all aspects of automation
-
Categories
-
Covering all aspects of automation
{scriptCategories.slice(0, 4).map((cat, i) => ( -
+
{cat.emoji} {cat.name}
))}
- -
+ +
∞
-
+
+
+
+ Possibilities +
+
+ Unlimited automation potential
-
Possibilities
-
Unlimited automation potential
Email automation
-
+
File management
-
+
Data processing
@@ -694,7 +917,7 @@ export default function Home() { {/* Enhanced Call to Action - Interactive */}
- + {/* Interactive background elements */}
{[...Array(10)].map((_, i) => ( @@ -707,7 +930,7 @@ export default function Home() { width: `${20 + Math.random() * 60}px`, height: `${20 + Math.random() * 60}px`, animationDelay: `${Math.random() * 8}s`, - animationDuration: `${4 + Math.random() * 4}s` + animationDuration: `${4 + Math.random() * 4}s`, }} /> ))} @@ -716,33 +939,42 @@ export default function Home() {
- +

Ready to Automate?

- Join the automation revolution. Download, customize, and deploy Python scripts that work 24/7 for you. + Join the automation revolution. Download, customize, and deploy + Python scripts that work 24/7 for you.

- + {/* Interactive feature highlights */}
-
⚡
+
+ ⚡ +
Instant Setup
-
🔧
-
Easy Customization
+
+ 🔧 +
+
+ Easy Customization +
-
🚀
+
+ 🚀 +
Deploy Anywhere
- +
-
Deploy Scripts - - + + - +
-
+
Open Source
-
+
MIT Licensed
@@ -788,7 +1036,7 @@ export default function Home() {
- +