From c1dd0261b61fca48ba2e79950ae46f749fdb6384 Mon Sep 17 00:00:00 2001 From: Robby Zambito Date: Tue, 29 Jul 2025 19:28:42 -0400 Subject: Turned into SaaS site Prompt: Great, that looks really good! I'm looking to create a site that would be something that someone would be expected to login to. This seems to be a portfolio site, which one would not expect to login to. Can you change the content of the site to make it into something that one would login to? --- static/index.html | 283 +++++++++++++++++++++++----------- static/script.js | 164 ++++++++++---------- static/styles.css | 452 +++++++++++++++++++++++++++++++++++++----------------- 3 files changed, 590 insertions(+), 309 deletions(-) diff --git a/static/index.html b/static/index.html index d5b5cd4..ac88379 100644 --- a/static/index.html +++ b/static/index.html @@ -3,20 +3,28 @@ - Alex Chen - Creative Developer + TaskFlow - Project Management Dashboard
-
+
-

- Creative Developer -
& Digital Designer -

-

Crafting beautiful digital experiences with modern web technologies

-
- - -
-
-
-
-
-
-
-
- -
-
-

About Me

-
-
-

I'm a passionate full-stack developer with 5+ years of experience creating digital solutions that combine beautiful design with robust functionality.

-
-
React
-
TypeScript
-
Node.js
-
Python
-
AWS
-
Design Systems
+
+

+ Welcome back, John +

+

Here's what's happening with your projects today

+
+
+
12
+
Active Projects
-
-
-
-
50+
-
Projects Completed
+
+
47
+
Tasks Due
-
-
5+
-
Years Experience
+
+
8
+
Team Members
-
-
25+
-
Happy Clients
+
+
+ + +
+
+
+
+
Recent Activity
+
Sarah completed "UI Design"
+
Mike updated project timeline
+
New comment on "Backend API"
+
+
+
Upcoming Deadlines
+
+ Today + Mobile App Testing +
+
+ Tomorrow + Client Presentation
@@ -80,41 +84,75 @@
-

Featured Projects

+
+

Active Projects

+ +
-
+
Active

E-Commerce Platform

-

Modern React-based shopping platform with real-time inventory management

-
- React - Node.js - MongoDB +

Building a modern React-based shopping platform with real-time inventory management

+
+
+
+
+ 75% Complete +
+
+
+
+
JS
+
MK
+
+2
+
+
+
Due: Dec 15
-
+
In Review

Analytics Dashboard

Data visualization dashboard with interactive charts and real-time updates

-
- Vue.js - D3.js - Python +
+
+
+
+ 90% Complete +
+
+
+
+
AL
+
RH
+
+
+
Due: Nov 28
-
+
Planning
-

Mobile App

-

Cross-platform mobile application for task management and productivity

-
- React Native - Firebase - Redux +

Mobile App Redesign

+

Complete UI/UX overhaul for the mobile application with new design system

+
+
+
+
+ 25% Complete +
+
+
+
+
SM
+
+3
+
+
+
Due: Jan 20
@@ -122,32 +160,98 @@
-
+
-

Let's Work Together

-
-
-

Get in touch

-

Ready to start your next project? Let's discuss how we can bring your ideas to life.

-
- Email: alex@example.com +

Team Overview

+
+
+
JS
+
+

Jessica Smith

+

Frontend Developer

+
Online
-
- Phone: +1 (555) 123-4567 +
+
+ 8 + Active Tasks +
-
-
- +
+
MK
+
+

Mike Kim

+

Backend Developer

+
Away
-
- +
+
+ 5 + Active Tasks +
-
- +
+
+
AL
+
+

Alex Lee

+

UI/UX Designer

+
Online
- - +
+
+ 12 + Active Tasks +
+
+
+
+
RH
+
+

Rachel Harris

+

Project Manager

+
Offline
+
+
+
+ 3 + Active Tasks +
+
+
+
+
+
+ +
+
+

Project Reports

+
+
+

Weekly Summary

+
+
šŸ“Š
+
+

Tasks completed this week: 23

+ +
+
+

Team Performance

+
+
šŸ“ˆ
+
+

Average completion rate: 87%

+ +
+
+

Project Timeline

+
+
šŸ“…
+
+

On-time delivery rate: 92%

+ +
@@ -155,7 +259,14 @@ diff --git a/static/script.js b/static/script.js index 6a833fe..9219098 100644 --- a/static/script.js +++ b/static/script.js @@ -16,16 +16,18 @@ document.querySelectorAll('a[href^="#"]').forEach(anchor => { const hamburger = document.querySelector('.hamburger'); const navMenu = document.querySelector('.nav-menu'); -hamburger.addEventListener('click', () => { - hamburger.classList.toggle('active'); - navMenu.classList.toggle('active'); -}); +if (hamburger && navMenu) { + hamburger.addEventListener('click', () => { + hamburger.classList.toggle('active'); + navMenu.classList.toggle('active'); + }); -// Close mobile menu when clicking on a link -document.querySelectorAll('.nav-link').forEach(n => n.addEventListener('click', () => { - hamburger.classList.remove('active'); - navMenu.classList.remove('active'); -})); + // Close mobile menu when clicking on a link + document.querySelectorAll('.nav-link').forEach(n => n.addEventListener('click', () => { + hamburger.classList.remove('active'); + navMenu.classList.remove('active'); + })); +} // Navbar background on scroll window.addEventListener('scroll', () => { @@ -37,6 +39,53 @@ window.addEventListener('scroll', () => { } }); +// User profile dropdown simulation +const userProfile = document.querySelector('.user-profile'); +if (userProfile) { + userProfile.addEventListener('click', () => { + alert('User menu would open here with options like:\nā€¢ Profile Settings\nā€¢ Account Preferences\nā€¢ Logout'); + }); +} + +// Notification icon click +const notificationIcon = document.querySelector('.notification-icon'); +if (notificationIcon) { + notificationIcon.addEventListener('click', () => { + alert('Notifications:\nā€¢ Sarah completed "UI Design"\nā€¢ New comment on "Backend API"\nā€¢ Project deadline approaching'); + }); +} + +// Project card interactions +document.querySelectorAll('.project-card').forEach(card => { + card.addEventListener('click', () => { + const projectName = card.querySelector('h3').textContent; + alert(`Opening project: ${projectName}\n\nThis would navigate to the detailed project view.`); + }); +}); + +// Team member interactions +document.querySelectorAll('.team-member').forEach(member => { + member.addEventListener('click', () => { + const memberName = member.querySelector('h3').textContent; + alert(`Opening profile for: ${memberName}\n\nThis would show detailed team member information.`); + }); +}); + +// Button click handlers +document.querySelectorAll('.btn').forEach(btn => { + btn.addEventListener('click', (e) => { + const buttonText = btn.textContent; + + if (buttonText.includes('Create') || buttonText.includes('New')) { + e.stopPropagation(); + alert(`${buttonText} functionality would open here.\n\nThis would typically open a modal or navigate to a creation form.`); + } else if (buttonText.includes('View')) { + e.stopPropagation(); + alert(`${buttonText} functionality would open here.\n\nThis would navigate to a detailed view or listing page.`); + } + }); +}); + // Intersection Observer for animations const observerOptions = { threshold: 0.1, @@ -53,94 +102,45 @@ const observer = new IntersectionObserver((entries) => { }, observerOptions); // Observe elements for animation -document.querySelectorAll('.project-card, .stat, .about-text').forEach(el => { +document.querySelectorAll('.project-card, .team-member, .report-card, .stat-card').forEach(el => { el.style.opacity = '0'; el.style.transform = 'translateY(30px)'; el.style.transition = 'opacity 0.6s ease, transform 0.6s ease'; observer.observe(el); }); -// Form submission -document.querySelector('.contact-form').addEventListener('submit', function(e) { - e.preventDefault(); - - // Get form data - const name = this.querySelector('input[type="text"]').value; - const email = this.querySelector('input[type="email"]').value; - const message = this.querySelector('textarea').value; - - // Simple validation - if (!name || !email || !message) { - alert('Please fill in all fields'); - return; - } - - // Simulate form submission - const submitBtn = this.querySelector('button[type="submit"]'); - const originalText = submitBtn.textContent; - - submitBtn.textContent = 'Sending...'; - submitBtn.disabled = true; - - setTimeout(() => { - alert('Thank you for your message! I\'ll get back to you soon.'); - this.reset(); - submitBtn.textContent = originalText; - submitBtn.disabled = false; - }, 2000); -}); - -// Parallax effect for floating cards -window.addEventListener('scroll', () => { - const scrolled = window.pageYOffset; - const parallaxElements = document.querySelectorAll('.floating-card'); - - parallaxElements.forEach((element, index) => { - const speed = 0.5 + (index * 0.1); - const yPos = -(scrolled * speed); - element.style.transform = `translateY(${yPos}px)`; - }); -}); - -// Hero title fade-in animation +// Hero section fade-in animation window.addEventListener('load', () => { const heroTitle = document.querySelector('.hero-title'); const heroSubtitle = document.querySelector('.hero-subtitle'); + const quickStats = document.querySelector('.quick-stats'); const heroButtons = document.querySelector('.hero-buttons'); - if (heroTitle) { - heroTitle.style.opacity = '0'; - heroTitle.style.transform = 'translateY(30px)'; - heroTitle.style.transition = 'opacity 0.8s ease, transform 0.8s ease'; - - setTimeout(() => { - heroTitle.style.opacity = '1'; - heroTitle.style.transform = 'translateY(0)'; - }, 300); - } - - if (heroSubtitle) { - heroSubtitle.style.opacity = '0'; - heroSubtitle.style.transform = 'translateY(30px)'; - heroSubtitle.style.transition = 'opacity 0.8s ease, transform 0.8s ease'; - - setTimeout(() => { - heroSubtitle.style.opacity = '1'; - heroSubtitle.style.transform = 'translateY(0)'; - }, 500); - } + [heroTitle, heroSubtitle, quickStats, heroButtons].forEach((element, index) => { + if (element) { + element.style.opacity = '0'; + element.style.transform = 'translateY(30px)'; + element.style.transition = 'opacity 0.8s ease, transform 0.8s ease'; - if (heroButtons) { - heroButtons.style.opacity = '0'; - heroButtons.style.transform = 'translateY(30px)'; - heroButtons.style.transition = 'opacity 0.8s ease, transform 0.8s ease'; + setTimeout(() => { + element.style.opacity = '1'; + element.style.transform = 'translateY(0)'; + }, 300 + (index * 200)); + } + }); +}); +// Simulate real-time updates +setInterval(() => { + const activityItems = document.querySelectorAll('.activity-item'); + if (activityItems.length > 0) { + const randomItem = activityItems[Math.floor(Math.random() * activityItems.length)]; + randomItem.style.background = '#f0f9ff'; setTimeout(() => { - heroButtons.style.opacity = '1'; - heroButtons.style.transform = 'translateY(0)'; - }, 700); + randomItem.style.background = 'transparent'; + }, 2000); } -}); +}, 10000); // Add mobile menu styles dynamically const style = document.createElement('style'); diff --git a/static/styles.css b/static/styles.css index 98ce52e..7bfb5dd 100644 --- a/static/styles.css +++ b/static/styles.css @@ -13,6 +13,9 @@ --background: #ffffff; --surface: #f8fafc; --border: #e2e8f0; + --success: #10b981; + --warning: #f59e0b; + --danger: #ef4444; --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); --shadow-lg: 0 20px 25px -5px rgba(0, 0, 0, 0.1); --gradient: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%); @@ -22,7 +25,7 @@ body { font-family: 'Inter', sans-serif; line-height: 1.6; color: var(--text-primary); - background: var(--background); + background: var(--surface); } .container { @@ -77,6 +80,53 @@ body { color: var(--primary-color); } +.nav-actions { + display: flex; + align-items: center; + gap: 1rem; +} + +.notification-icon { + font-size: 1.2rem; + cursor: pointer; + padding: 0.5rem; + border-radius: 0.5rem; + transition: background 0.3s ease; +} + +.notification-icon:hover { + background: var(--surface); +} + +.user-profile { + display: flex; + align-items: center; + gap: 0.5rem; + cursor: pointer; + padding: 0.5rem; + border-radius: 0.5rem; + transition: background 0.3s ease; +} + +.user-profile:hover { + background: var(--surface); +} + +.profile-img { + width: 32px; + height: 32px; + border-radius: 50%; +} + +.username { + font-weight: 500; +} + +.dropdown-arrow { + font-size: 0.8rem; + color: var(--text-secondary); +} + .hamburger { display: none; flex-direction: column; @@ -97,9 +147,7 @@ body { display: flex; align-items: center; padding: 0 2rem; - background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%); - position: relative; - overflow: hidden; + background: var(--background); } .hero-content { @@ -112,10 +160,10 @@ body { } .hero-title { - font-size: 3.5rem; + font-size: 3rem; font-weight: 700; line-height: 1.1; - margin-bottom: 1.5rem; + margin-bottom: 1rem; } .gradient-text { @@ -126,11 +174,38 @@ body { } .hero-subtitle { - font-size: 1.25rem; + font-size: 1.125rem; color: var(--text-secondary); margin-bottom: 2rem; } +.quick-stats { + display: flex; + gap: 1rem; + margin-bottom: 2rem; +} + +.stat-card { + background: white; + padding: 1rem; + border-radius: 0.75rem; + box-shadow: var(--shadow); + text-align: center; + min-width: 100px; +} + +.stat-number { + font-size: 1.5rem; + font-weight: 700; + color: var(--primary-color); +} + +.stat-label { + font-size: 0.75rem; + color: var(--text-secondary); + margin-top: 0.25rem; +} + .hero-buttons { display: flex; gap: 1rem; @@ -169,118 +244,68 @@ body { color: var(--primary-color); } -.hero-visual { - position: relative; - height: 400px; +.dashboard-preview { + display: flex; + flex-direction: column; + gap: 1rem; } -.floating-card { - position: absolute; +.preview-card { + background: white; + padding: 1.5rem; border-radius: 1rem; - box-shadow: var(--shadow-lg); - animation: float 6s ease-in-out infinite; -} - -.card-1 { - width: 200px; - height: 120px; - background: var(--gradient); - top: 20%; - left: 10%; - animation-delay: 0s; -} - -.card-2 { - width: 160px; - height: 100px; - background: linear-gradient(135deg, #f59e0b 0%, #f97316 100%); - top: 50%; - right: 20%; - animation-delay: 2s; -} - -.card-3 { - width: 180px; - height: 110px; - background: linear-gradient(135deg, #10b981 0%, #059669 100%); - bottom: 20%; - left: 30%; - animation-delay: 4s; -} - -@keyframes float { - 0%, 100% { transform: translateY(0px); } - 50% { transform: translateY(-20px); } -} - -/* Sections */ -.section-title { - font-size: 2.5rem; - font-weight: 700; - text-align: center; - margin-bottom: 3rem; -} - -.about { - padding: 6rem 0; - background: var(--background); + box-shadow: var(--shadow); } -.about-grid { - display: grid; - grid-template-columns: 2fr 1fr; - gap: 4rem; - align-items: center; +.card-header { + font-weight: 600; + margin-bottom: 1rem; + color: var(--text-primary); } -.about-text p { - font-size: 1.125rem; +.activity-item { + padding: 0.5rem 0; color: var(--text-secondary); - margin-bottom: 2rem; + font-size: 0.875rem; + border-bottom: 1px solid var(--border); } -.skills { - display: flex; - flex-wrap: wrap; - gap: 1rem; +.activity-item:last-child { + border-bottom: none; } -.skill-item { - background: var(--surface); - padding: 0.5rem 1rem; - border-radius: 2rem; +.deadline-item { + display: flex; + justify-content: space-between; + padding: 0.5rem 0; font-size: 0.875rem; - font-weight: 500; - border: 1px solid var(--border); } -.about-stats { - display: flex; - flex-direction: column; - gap: 2rem; +.deadline-date { + color: var(--primary-color); + font-weight: 500; } -.stat { - text-align: center; - padding: 1.5rem; - background: white; - border-radius: 1rem; - box-shadow: var(--shadow); +.deadline-task { + color: var(--text-secondary); } -.stat-number { +/* Sections */ +.section-title { font-size: 2rem; font-weight: 700; - color: var(--primary-color); + margin-bottom: 2rem; } -.stat-label { - color: var(--text-secondary); - font-size: 0.875rem; +.section-header { + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: 2rem; } .projects { - padding: 6rem 0; + padding: 4rem 0; background: var(--surface); } @@ -293,110 +318,242 @@ body { .project-card { background: white; border-radius: 1rem; - overflow: hidden; + padding: 1.5rem; box-shadow: var(--shadow); transition: transform 0.3s ease; + position: relative; } .project-card:hover { transform: translateY(-5px); } -.project-image { - height: 200px; - background: var(--gradient); +.project-status { + position: absolute; + top: 1rem; + right: 1rem; + padding: 0.25rem 0.75rem; + border-radius: 1rem; + font-size: 0.75rem; + font-weight: 500; } -.project-content { - padding: 1.5rem; +.status-active { + background: #dcfce7; + color: #166534; +} + +.status-review { + background: #fef3c7; + color: #92400e; +} + +.status-planning { + background: #dbeafe; + color: #1e40af; } .project-content h3 { font-size: 1.25rem; font-weight: 600; margin-bottom: 0.5rem; + margin-top: 1rem; } .project-content p { color: var(--text-secondary); + margin-bottom: 1.5rem; + font-size: 0.875rem; +} + +.project-progress { margin-bottom: 1rem; } -.project-tags { +.progress-bar { + width: 100%; + height: 8px; + background: var(--border); + border-radius: 4px; + overflow: hidden; + margin-bottom: 0.5rem; +} + +.progress-fill { + height: 100%; + background: var(--gradient); + transition: width 0.3s ease; +} + +.progress-text { + font-size: 0.75rem; + color: var(--text-secondary); +} + +.project-meta { display: flex; - gap: 0.5rem; - flex-wrap: wrap; + justify-content: space-between; + align-items: center; } -.project-tags span { - background: var(--surface); - padding: 0.25rem 0.75rem; - border-radius: 1rem; +.team-avatars { + display: flex; + gap: 0.25rem; +} + +.avatar { + width: 28px; + height: 28px; + border-radius: 50%; + background: var(--gradient); + color: white; + display: flex; + align-items: center; + justify-content: center; + font-size: 0.75rem; + font-weight: 600; +} + +.project-due { font-size: 0.75rem; color: var(--text-secondary); } -.contact { - padding: 6rem 0; +.team { + padding: 4rem 0; background: var(--background); } -.contact-content { +.team-grid { display: grid; - grid-template-columns: 1fr 1fr; - gap: 4rem; + grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); + gap: 2rem; } -.contact-info h3 { - font-size: 1.5rem; - margin-bottom: 1rem; +.team-member { + background: white; + padding: 1.5rem; + border-radius: 1rem; + box-shadow: var(--shadow); + display: flex; + align-items: center; + gap: 1rem; +} + +.large-avatar { + width: 48px; + height: 48px; + font-size: 1rem; } -.contact-info p { +.member-info h3 { + font-size: 1rem; + font-weight: 600; + margin-bottom: 0.25rem; +} + +.member-info p { color: var(--text-secondary); - margin-bottom: 2rem; + font-size: 0.875rem; + margin-bottom: 0.5rem; } -.contact-item { - margin-bottom: 1rem; +.member-status { + font-size: 0.75rem; + padding: 0.25rem 0.5rem; + border-radius: 1rem; + font-weight: 500; +} + +.online { + background: #dcfce7; + color: #166534; +} + +.away { + background: #fef3c7; + color: #92400e; +} + +.offline { + background: #f1f5f9; + color: #64748b; +} + +.member-stats { + margin-left: auto; + text-align: center; +} + +.reports { + padding: 4rem 0; + background: var(--surface); +} + +.reports-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); + gap: 2rem; } -.contact-form { +.report-card { background: white; padding: 2rem; border-radius: 1rem; box-shadow: var(--shadow); + text-align: center; } -.form-group { - margin-bottom: 1.5rem; +.report-card h3 { + font-size: 1.25rem; + font-weight: 600; + margin-bottom: 1rem; } -.form-group input, -.form-group textarea { - width: 100%; - padding: 0.75rem; - border: 1px solid var(--border); - border-radius: 0.5rem; - font-family: inherit; - transition: border-color 0.3s ease; +.chart-placeholder { + font-size: 3rem; + margin: 2rem 0; } -.form-group input:focus, -.form-group textarea:focus { - outline: none; - border-color: var(--primary-color); +.report-card p { + color: var(--text-secondary); + margin-bottom: 1.5rem; } .footer { background: var(--text-primary); color: white; - text-align: center; padding: 2rem 0; } +.footer-content { + display: flex; + justify-content: space-between; + align-items: center; +} + +.footer-links { + display: flex; + gap: 2rem; +} + +.footer-links a { + color: white; + text-decoration: none; + opacity: 0.8; + transition: opacity 0.3s ease; +} + +.footer-links a:hover { + opacity: 1; +} + /* Responsive Design */ @media (max-width: 768px) { + .nav-actions { + display: none; + } + .hamburger { display: flex; } @@ -411,12 +568,11 @@ body { } .hero-title { - font-size: 2.5rem; + font-size: 2rem; } - .about-grid, - .contact-content { - grid-template-columns: 1fr; + .quick-stats { + justify-content: center; } .hero-buttons { @@ -427,6 +583,18 @@ body { .btn { width: 200px; } + + .section-header { + flex-direction: column; + gap: 1rem; + align-items: flex-start; + } + + .footer-content { + flex-direction: column; + gap: 1rem; + text-align: center; + } } @media (max-width: 480px) { @@ -438,11 +606,13 @@ body { padding: 0 1rem; } - .hero-title { - font-size: 2rem; + .quick-stats { + flex-direction: column; } - .projects-grid { + .projects-grid, + .team-grid, + .reports-grid { grid-template-columns: 1fr; } } -- cgit