From c8c7848f05296a63b30c72ca853e4aae0ae3ac96 Mon Sep 17 00:00:00 2001 From: Sreileak Theap <163486314+Meyyun@users.noreply.github.com> Date: Sat, 18 Oct 2025 15:55:50 -0400 Subject: [PATCH 1/3] front end submit --- frontend/app/globals.css | 82 ++++- frontend/app/layout.tsx | 4 +- frontend/app/page.tsx | 592 +++++++++++++++++++++++++++++++------ frontend/package-lock.json | 60 ++++ frontend/public/LOGO.png | Bin 0 -> 15535 bytes 5 files changed, 641 insertions(+), 97 deletions(-) create mode 100644 frontend/public/LOGO.png diff --git a/frontend/app/globals.css b/frontend/app/globals.css index a2dc41e..4aee959 100644 --- a/frontend/app/globals.css +++ b/frontend/app/globals.css @@ -22,5 +22,85 @@ body { background: var(--background); color: var(--foreground); - font-family: Arial, Helvetica, sans-serif; + font-family: sans-serif; +} + +/* Custom Animations for Dynamic Homepage */ +@keyframes gradient-x { + 0%, 100% { + background-size: 200% 200%; + background-position: left center; + } + 50% { + background-size: 200% 200%; + background-position: right center; + } +} + +@keyframes float { + 0%, 100% { + transform: translateY(0px); + } + 50% { + transform: translateY(-10px); + } +} + +@keyframes pulse-glow { + 0%, 100% { + opacity: 0.5; + transform: scale(1); + } + 50% { + opacity: 0.8; + transform: scale(1.05); + } +} + +/* Animation Classes */ +.animate-gradient-x { + animation: gradient-x 4s ease infinite; +} + +.animate-float { + animation: float 3s ease-in-out infinite; +} + +.animate-pulse-glow { + animation: pulse-glow 2s ease-in-out infinite; +} + +/* Animation Delays */ +.animation-delay-1000 { + animation-delay: 1s; +} + +.animation-delay-2000 { + animation-delay: 2s; +} + +.animation-delay-3000 { + animation-delay: 3s; +} + +.animation-delay-4000 { + animation-delay: 4s; +} + +.animation-delay-5000 { + animation-delay: 5s; +} + +.animation-delay-6000 { + animation-delay: 6s; +} + +/* Smooth hover transitions */ +.hover-lift { + transition: transform 0.3s ease, box-shadow 0.3s ease; +} + +.hover-lift:hover { + transform: translateY(-5px); + box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15); } diff --git a/frontend/app/layout.tsx b/frontend/app/layout.tsx index f7fa87e..6b02e98 100644 --- a/frontend/app/layout.tsx +++ b/frontend/app/layout.tsx @@ -13,8 +13,8 @@ const geistMono = Geist_Mono({ }); export const metadata: Metadata = { - title: "Create Next App", - description: "Generated by create next app", + title: "Skinalyze", + description: "AI-powered skin disease detection platform. Upload photos or use your camera for instant skin condition analysis and health insights.", }; export default function RootLayout({ diff --git a/frontend/app/page.tsx b/frontend/app/page.tsx index 21b686d..622bb4a 100644 --- a/frontend/app/page.tsx +++ b/frontend/app/page.tsx @@ -1,103 +1,507 @@ -import Image from "next/image"; +"use client"; + +import { useState } from "react"; +import NextImage from "next/image"; +// Union type for safer section navigation +type Section = "home" | "about" | "features" | "tutorial"; +type View = "main" | "login" | "signup"; export default function Home() { - return ( -
-
- Next.js logo -
    -
  1. - Get started by editing{" "} - - app/page.tsx - - . -
    2. -
  2. - Save and see your changes instantly. -
    3. -
- -
- ("home"); + const [currentView, setCurrentView] = useState("main"); + + // Smooth scroll to section (switches to main page first if needed) + const scrollToSection = (sectionId: string) => { + // First switch to main page if not already there + if (currentView !== 'main') { + setCurrentView('main'); + } + + // Small delay to ensure the main page is rendered before scrolling + setTimeout(() => { + const element = document.getElementById(sectionId); + if (element) { + element.scrollIntoView({ behavior: 'smooth' }); + setActiveSection(sectionId as Section); + } + }, 100); + }; + + const NavButton = ({ section, label, isActive }: { section: Section; label: string; isActive: boolean }) => ( + + ); + + const ViewButton = ({ view, label, isActive }: { view: View; label: string; isActive: boolean }) => ( + + ); + + // Home Section Component + const HomeSection = () => ( +
+ {/* Floating Icons */} +
+
🔬
+
📱
+
🧬
+
🩺
+
🩹
+
💊
+
+ + {/* Hero Section */} +
+
+

+ Skinalyze +

+
+ +
+

+ AI-powered skin disease detection through image analysis. Upload a photo or use your camera to get instant skin condition insights +

+ + {/* Feature badges */} +
+ + ⚡ Instant Analysis + + + 🔒 Secure & Private + +
+
+ +
+ +
+
+
+ ); + + // About Section Component + const AboutSection = () => ( +
+ {/* Background Animation Elements */} +
+
+
+
+
+ +
+ {/* Enhanced Title */} +
+

+ About Skinalyze +

+
+
+ + {/* Mission Content */} +
+

+ We're democratizing access to skin health insights through cutting-edge AI technology. Our mission is to provide early detection and awareness of skin conditions, making dermatological screening accessible to everyone, anywhere. +

+ + {/* Mission Values */} +
+
+ 🌍 Accessible +
+
+ 💡 Innovative +
+
+ 🔒 Reliable +
+
+
+
+
+ ); + + // Features Section Component + const FeaturesSection = () => ( +
+ {/* Background Animation Elements */} +
+
+
+
+
+ +
+ {/* Enhanced Title */} +
+

+ Features +

+
+
+ + {/* How It Works Section */} +
+
+
+

How It Works

+
+

+ Using advanced machine learning algorithms trained on thousands of dermatological images, + Skinalyze can identify potential skin conditions, analyze skin health, and provide + personalized recommendations for skincare and medical consultation. +

+
+ AI-Powered • Fast • Accurate +
+
+
+ + {/* Enhanced Feature Cards */} +
+
+
+ 📸 +
+

Image Analysis

+

Upload photos for instant AI-powered skin condition analysis with 95% accuracy

+
+ ⚡ Instant Results +
+
+ +
+
+ 📷 +
+

Camera Detection

+

Use your device camera for real-time skin health monitoring and analysis

+
+ 📱 Real-time Scan +
+
+ +
+
+ 🔬 +
+

AI Insights

+

Machine learning helps identify potential skin conditions and provides recommendations

+
+ 🎯 Smart Analysis +
+
+
+
+
+ ); + + // Tutorial Section Component + const TutorialSection = () => ( +
+
+

How to Use Skinalyze

+ +
+ {/* Step 1 */} +
+
+ 1 +
+
+

Upload Your Image

+

+ Take a clear, well-lit photo of your skin condition or upload an existing image from your device. + Make sure the area is visible and the image is in focus. +

+
+

+ Tip: Use natural lighting and avoid shadows for best results. +

+
+
+
+ + {/* Step 2 */} +
+
+ 2 +
+
+

AI Analysis

+

+ Our advanced AI algorithms will analyze your image within seconds, identifying potential skin conditions, + analyzing texture, pigmentation, and other important factors. +

+
+

+ Processing: Analysis typically takes 2-5 seconds. +

+
+
+
+ + {/* Step 3 */} +
+
+ 3 +
+
+

Get Your Results

+

+ Review your personalized analysis report including potential conditions identified, + confidence levels, and recommended next steps or skincare advice. +

+
+

+ Remember: This is for informational purposes only. Consult a dermatologist for medical advice. +

+
+
+
+
+ +
+ +
+
+
+ ); + + // Main Page Component (Home + About + Features + Tutorial) + const MainPage = () => ( +
+ + + + +
+ ); + + // Login Page Component + const LoginPage = () => ( +
+
+

Welcome Back

+
e.preventDefault()}> +
+ + +
+
+ + +
+ + +
+

+ Don't have an account?{' '} + +

+
+
+ ); + + // SignUp Page Component + const SignUpPage = () => ( +
+
+

Create Account

+
e.preventDefault()}> +
+
+ + +
+
+ + +
+
+
+ + - Deploy now - - +
+ + +
+
+ + +
+ Terms of Service and{' '} + Privacy Policy + + + + +

+ Already have an account?{' '} + +

+
+
+ ); + + return ( +
+ {/* Dynamic Background Pattern */} +
+
+
+
+
+
+
+ + {/* Navigation */} + + + {/* Main Content */} +
{/* Added padding-top to account for fixed navbar */} + {currentView === 'main' && } + {currentView === 'login' && } + {currentView === 'signup' && }
-
); -} +} \ No newline at end of file diff --git a/frontend/package-lock.json b/frontend/package-lock.json index 129336c..58d0d5e 100644 --- a/frontend/package-lock.json +++ b/frontend/package-lock.json @@ -1213,6 +1213,66 @@ "node": ">=14.0.0" } }, + "node_modules/@tailwindcss/oxide-wasm32-wasi/node_modules/@emnapi/core": { + "version": "1.5.0", + "dev": true, + "inBundle": true, + "license": "MIT", + "optional": true, + "dependencies": { + "@emnapi/wasi-threads": "1.1.0", + "tslib": "^2.4.0" + } + }, + "node_modules/@tailwindcss/oxide-wasm32-wasi/node_modules/@emnapi/runtime": { + "version": "1.5.0", + "dev": true, + "inBundle": true, + "license": "MIT", + "optional": true, + "dependencies": { + "tslib": "^2.4.0" + } + }, + "node_modules/@tailwindcss/oxide-wasm32-wasi/node_modules/@emnapi/wasi-threads": { + "version": "1.1.0", + "dev": true, + "inBundle": true, + "license": "MIT", + "optional": true, + "dependencies": { + "tslib": "^2.4.0" + } + }, + "node_modules/@tailwindcss/oxide-wasm32-wasi/node_modules/@napi-rs/wasm-runtime": { + "version": "1.0.5", + "dev": true, + "inBundle": true, + "license": "MIT", + "optional": true, + "dependencies": { + "@emnapi/core": "^1.5.0", + "@emnapi/runtime": "^1.5.0", + "@tybys/wasm-util": "^0.10.1" + } + }, + "node_modules/@tailwindcss/oxide-wasm32-wasi/node_modules/@tybys/wasm-util": { + "version": "0.10.1", + "dev": true, + "inBundle": true, + "license": "MIT", + "optional": true, + "dependencies": { + "tslib": "^2.4.0" + } + }, + "node_modules/@tailwindcss/oxide-wasm32-wasi/node_modules/tslib": { + "version": "2.8.1", + "dev": true, + "inBundle": true, + "license": "0BSD", + "optional": true + }, "node_modules/@tailwindcss/oxide-win32-arm64-msvc": { "version": "4.1.14", "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-win32-arm64-msvc/-/oxide-win32-arm64-msvc-4.1.14.tgz", diff --git a/frontend/public/LOGO.png b/frontend/public/LOGO.png new file mode 100644 index 0000000000000000000000000000000000000000..9515d1f8b2adf6540ff8ecac15a3fc2d3914a6d4 GIT binary patch literal 15535 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 Date: Sat, 18 Oct 2025 15:56:37 -0400 Subject: [PATCH 2/3] page.tsx update --- frontend/app/page.tsx | 451 ++++++++---------------------------------- 1 file changed, 85 insertions(+), 366 deletions(-) diff --git a/frontend/app/page.tsx b/frontend/app/page.tsx index 622bb4a..82f9605 100644 --- a/frontend/app/page.tsx +++ b/frontend/app/page.tsx @@ -1,58 +1,32 @@ "use client"; import { useState } from "react"; -import NextImage from "next/image"; + +// If you later use images, re-enable the import below +// import Image from "next/image"; + // Union type for safer section navigation -type Section = "home" | "about" | "features" | "tutorial"; -type View = "main" | "login" | "signup"; +type Section = "home" | "about" | "tutorial" | "Login" | "SignUp"; export default function Home() { const [activeSection, setActiveSection] = useState
("home"); - const [currentView, setCurrentView] = useState("main"); - // Smooth scroll to section (switches to main page first if needed) + // Smooth scroll to section const scrollToSection = (sectionId: string) => { - // First switch to main page if not already there - if (currentView !== 'main') { - setCurrentView('main'); + const element = document.getElementById(sectionId); + if (element) { + element.scrollIntoView({ behavior: 'smooth' }); + setActiveSection(sectionId as Section); } - - // Small delay to ensure the main page is rendered before scrolling - setTimeout(() => { - const element = document.getElementById(sectionId); - if (element) { - element.scrollIntoView({ behavior: 'smooth' }); - setActiveSection(sectionId as Section); - } - }, 100); }; const NavButton = ({ section, label, isActive }: { section: Section; label: string; isActive: boolean }) => ( - ); - - const ViewButton = ({ view, label, isActive }: { view: View; label: string; isActive: boolean }) => ( - @@ -117,117 +65,54 @@ export default function Home() { // About Section Component const AboutSection = () => ( -
- {/* Background Animation Elements */} -
-
-
-
-
- -
- {/* Enhanced Title */} -
-

- About Skinalyze -

-
-
+
+
+

About Skinalyze

- {/* Mission Content */} -
-

- We're democratizing access to skin health insights through cutting-edge AI technology. Our mission is to provide early detection and awareness of skin conditions, making dermatological screening accessible to everyone, anywhere. -

- - {/* Mission Values */} -
-
- 🌍 Accessible -
-
- 💡 Innovative -
-
- 🔒 Reliable -
+
+
+

🎯 Our Mission

+

+ We're democratizing access to skin health insights through cutting-edge AI technology. + Our mission is to provide early detection and awareness of skin conditions, making dermatological + screening accessible to everyone, anywhere. +

-
-
-
- ); - - // Features Section Component - const FeaturesSection = () => ( -
- {/* Background Animation Elements */} -
-
-
-
-
- -
- {/* Enhanced Title */} -
-

- Features -

-
-
- - {/* How It Works Section */} -
-
-
-

How It Works

-
-

+

+

🧠 How It Works

+

Using advanced machine learning algorithms trained on thousands of dermatological images, Skinalyze can identify potential skin conditions, analyze skin health, and provide personalized recommendations for skincare and medical consultation.

-
- AI-Powered • Fast • Accurate -
- {/* Enhanced Feature Cards */} -
-
-
- 📸 -
-

Image Analysis

-

Upload photos for instant AI-powered skin condition analysis with 95% accuracy

-
- ⚡ Instant Results -
+
+
+
📸
+

Image Analysis

+

Upload photos for instant AI-powered skin condition analysis

- -
-
- 📷 -
-

Camera Detection

-

Use your device camera for real-time skin health monitoring and analysis

-
- 📱 Real-time Scan -
+
+
📷
+

Camera Detection

+

Use your device camera for real-time skin health monitoring

- -
-
- 🔬 -
-

AI Insights

-

Machine learning helps identify potential skin conditions and provides recommendations

-
- 🎯 Smart Analysis -
+
+
🔬
+

AI Insights

+

Machine learning helps identify potential skin conditions

+ +
+

🚀 Built for HackKnight Fall 2025

+

+ Skinalyze was developed during HackKnight Fall 2025, leveraging modern web frameworks like Next.js, React, and Tailwind CSS. + Our mission is to democratize dermatological insights through accessible AI-powered skin health analysis. +

+
); @@ -235,13 +120,13 @@ export default function Home() { // Tutorial Section Component const TutorialSection = () => (
-
-

How to Use Skinalyze

+
+

How to Use Skinalyze

{/* Step 1 */}
-
+
1
@@ -250,8 +135,8 @@ export default function Home() { Take a clear, well-lit photo of your skin condition or upload an existing image from your device. Make sure the area is visible and the image is in focus.

-
-

+

+

Tip: Use natural lighting and avoid shadows for best results.

@@ -260,7 +145,7 @@ export default function Home() { {/* Step 2 */}
-
+
2
@@ -269,8 +154,8 @@ export default function Home() { Our advanced AI algorithms will analyze your image within seconds, identifying potential skin conditions, analyzing texture, pigmentation, and other important factors.

-
-

+

+

Processing: Analysis typically takes 2-5 seconds.

@@ -279,7 +164,7 @@ export default function Home() { {/* Step 3 */}
-
+
3
@@ -288,8 +173,8 @@ export default function Home() { Review your personalized analysis report including potential conditions identified, confidence levels, and recommended next steps or skincare advice.

-
-

+

+

Remember: This is for informational purposes only. Consult a dermatologist for medical advice.

@@ -300,7 +185,7 @@ export default function Home() {
@@ -309,198 +194,32 @@ export default function Home() {
); - // Main Page Component (Home + About + Features + Tutorial) - const MainPage = () => ( -
- - - - -
- ); - - // Login Page Component - const LoginPage = () => ( -
-
-

Welcome Back

-
e.preventDefault()}> -
- - -
-
- - -
- - -
-

- Don't have an account?{' '} - -

-
-
- ); - - // SignUp Page Component - const SignUpPage = () => ( -
-
-

Create Account

-
e.preventDefault()}> -
-
- - -
-
- - -
-
-
- - -
-
- - -
-
- - -
- - -
-

- Already have an account?{' '} - -

-
-
- ); - return ( -
- {/* Dynamic Background Pattern */} -
-
-
-
-
-
-
-
- +
{/* Navigation */} -
); From 7e7e9682fc027b3dd13a4fec9e098951ef2f9020 Mon Sep 17 00:00:00 2001 From: Sreileak Theap <163486314+Meyyun@users.noreply.github.com> Date: Sat, 18 Oct 2025 16:13:39 -0400 Subject: [PATCH 3/3] page updated --- frontend/app/page.tsx | 451 ++++++++++++++++++++++++++++++++++-------- 1 file changed, 366 insertions(+), 85 deletions(-) diff --git a/frontend/app/page.tsx b/frontend/app/page.tsx index 82f9605..622bb4a 100644 --- a/frontend/app/page.tsx +++ b/frontend/app/page.tsx @@ -1,32 +1,58 @@ "use client"; import { useState } from "react"; - -// If you later use images, re-enable the import below -// import Image from "next/image"; - +import NextImage from "next/image"; // Union type for safer section navigation -type Section = "home" | "about" | "tutorial" | "Login" | "SignUp"; +type Section = "home" | "about" | "features" | "tutorial"; +type View = "main" | "login" | "signup"; export default function Home() { const [activeSection, setActiveSection] = useState
("home"); + const [currentView, setCurrentView] = useState("main"); - // Smooth scroll to section + // Smooth scroll to section (switches to main page first if needed) const scrollToSection = (sectionId: string) => { - const element = document.getElementById(sectionId); - if (element) { - element.scrollIntoView({ behavior: 'smooth' }); - setActiveSection(sectionId as Section); + // First switch to main page if not already there + if (currentView !== 'main') { + setCurrentView('main'); } + + // Small delay to ensure the main page is rendered before scrolling + setTimeout(() => { + const element = document.getElementById(sectionId); + if (element) { + element.scrollIntoView({ behavior: 'smooth' }); + setActiveSection(sectionId as Section); + } + }, 100); }; const NavButton = ({ section, label, isActive }: { section: Section; label: string; isActive: boolean }) => ( + ); + + const ViewButton = ({ view, label, isActive }: { view: View; label: string; isActive: boolean }) => ( + @@ -65,54 +117,117 @@ export default function Home() { // About Section Component const AboutSection = () => ( -
-
-

About Skinalyze

+
+ {/* Background Animation Elements */} +
+
+
+
+
-
-
-

🎯 Our Mission

-

- We're democratizing access to skin health insights through cutting-edge AI technology. - Our mission is to provide early detection and awareness of skin conditions, making dermatological - screening accessible to everyone, anywhere. -

+
+ {/* Enhanced Title */} +
+

+ About Skinalyze +

+
+
+ + {/* Mission Content */} +
+

+ We're democratizing access to skin health insights through cutting-edge AI technology. Our mission is to provide early detection and awareness of skin conditions, making dermatological screening accessible to everyone, anywhere. +

+ + {/* Mission Values */} +
+
+ 🌍 Accessible +
+
+ 💡 Innovative +
+
+ 🔒 Reliable +
-
-

🧠 How It Works

-

+

+
+
+ ); + + // Features Section Component + const FeaturesSection = () => ( +
+ {/* Background Animation Elements */} +
+
+
+
+
+ +
+ {/* Enhanced Title */} +
+

+ Features +

+
+
+ + {/* How It Works Section */} +
+
+
+

How It Works

+
+

Using advanced machine learning algorithms trained on thousands of dermatological images, Skinalyze can identify potential skin conditions, analyze skin health, and provide personalized recommendations for skincare and medical consultation.

+
+ AI-Powered • Fast • Accurate +
-
-
-
📸
-

Image Analysis

-

Upload photos for instant AI-powered skin condition analysis

+ {/* Enhanced Feature Cards */} +
+
+
+ 📸 +
+

Image Analysis

+

Upload photos for instant AI-powered skin condition analysis with 95% accuracy

+
+ ⚡ Instant Results +
-
-
📷
-

Camera Detection

-

Use your device camera for real-time skin health monitoring

+ +
+
+ 📷 +
+

Camera Detection

+

Use your device camera for real-time skin health monitoring and analysis

+
+ 📱 Real-time Scan +
-
-
🔬
-

AI Insights

-

Machine learning helps identify potential skin conditions

+ +
+
+ 🔬 +
+

AI Insights

+

Machine learning helps identify potential skin conditions and provides recommendations

+
+ 🎯 Smart Analysis +
- -
-

🚀 Built for HackKnight Fall 2025

-

- Skinalyze was developed during HackKnight Fall 2025, leveraging modern web frameworks like Next.js, React, and Tailwind CSS. - Our mission is to democratize dermatological insights through accessible AI-powered skin health analysis. -

-
); @@ -120,13 +235,13 @@ export default function Home() { // Tutorial Section Component const TutorialSection = () => (
-
-

How to Use Skinalyze

+
+

How to Use Skinalyze

{/* Step 1 */}
-
+
1
@@ -135,8 +250,8 @@ export default function Home() { Take a clear, well-lit photo of your skin condition or upload an existing image from your device. Make sure the area is visible and the image is in focus.

-
-

+

+

Tip: Use natural lighting and avoid shadows for best results.

@@ -145,7 +260,7 @@ export default function Home() { {/* Step 2 */}
-
+
2
@@ -154,8 +269,8 @@ export default function Home() { Our advanced AI algorithms will analyze your image within seconds, identifying potential skin conditions, analyzing texture, pigmentation, and other important factors.

-
-

+

+

Processing: Analysis typically takes 2-5 seconds.

@@ -164,7 +279,7 @@ export default function Home() { {/* Step 3 */}
-
+
3
@@ -173,8 +288,8 @@ export default function Home() { Review your personalized analysis report including potential conditions identified, confidence levels, and recommended next steps or skincare advice.

-
-

+

+

Remember: This is for informational purposes only. Consult a dermatologist for medical advice.

@@ -185,7 +300,7 @@ export default function Home() {
@@ -194,32 +309,198 @@ export default function Home() {
); + // Main Page Component (Home + About + Features + Tutorial) + const MainPage = () => ( +
+ + + + +
+ ); + + // Login Page Component + const LoginPage = () => ( +
+
+

Welcome Back

+
e.preventDefault()}> +
+ + +
+
+ + +
+
+ + Forgot password? +
+ +
+

+ Don't have an account?{' '} + +

+
+
+ ); + + // SignUp Page Component + const SignUpPage = () => ( +
+
+

Create Account

+
e.preventDefault()}> +
+
+ + +
+
+ + +
+
+
+ + +
+
+ + +
+
+ + +
+ + +
+

+ Already have an account?{' '} + +

+
+
+ ); + return ( -
+
+ {/* Dynamic Background Pattern */} +
+
+
+
+
+
+
+
+ {/* Navigation */} -
);