diff --git a/assets/css/custom.css b/assets/css/custom.css new file mode 100644 index 0000000..ef21950 --- /dev/null +++ b/assets/css/custom.css @@ -0,0 +1,340 @@ +:root { + --color-primary: #6366F1; + --color-secondary: #EC4899; + --color-background: #F8FAFC; + --color-surface: #FFFFFF; + --color-text: #1E293B; + --color-text-muted: #64748B; + --color-border: #E2E8F0; + --font-family: 'Inter', sans-serif; + --border-radius: 0.75rem; +} + +body { + font-family: var(--font-family); + background-color: var(--color-background); + color: var(--color-text); + margin: 0; + display: flex; + flex-direction: column; + min-height: 100vh; +} + +.container { + width: 100%; + max-width: 1200px; + margin: 0 auto; + padding: 0 1.5rem; +} + +.main-header { + background-color: var(--color-surface); + border-bottom: 1px solid var(--color-border); + padding: 1rem 0; +} + +.main-header .container { + display: flex; + justify-content: space-between; + align-items: center; +} + +.logo { + font-size: 1.5rem; + font-weight: 700; + color: var(--color-primary); + text-decoration: none; +} + +.main-nav ul { + margin: 0; + padding: 0; + list-style: none; + display: flex; + align-items: center; + gap: 1.5rem; +} + +.main-nav a { + text-decoration: none; + color: var(--color-text-muted); + font-weight: 600; + transition: color 0.2s ease; +} + +.main-nav a:hover { + color: var(--color-primary); +} + +main.container { + flex-grow: 1; + padding-top: 2rem; + padding-bottom: 2rem; +} + +.main-footer { + background-color: var(--color-surface); + border-top: 1px solid var(--color-border); + padding: 1.5rem 0; + text-align: center; + color: var(--color-text-muted); + font-size: 0.9rem; +} + +/* Auth Pages */ +.auth-container { + display: flex; + justify-content: center; + align-items: center; + padding: 2rem 0; +} + +.auth-card { + background-color: var(--color-surface); + padding: 2.5rem; + border-radius: var(--border-radius); + box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); + width: 100%; + max-width: 420px; + text-align: center; +} + +.auth-title { + font-size: 2rem; + font-weight: 700; + margin-bottom: 0.5rem; +} + +.auth-subtitle { + color: var(--color-text-muted); + margin-bottom: 2rem; +} + +.form-group { + margin-bottom: 1.5rem; + text-align: left; +} + +.form-group label { + display: block; + font-weight: 600; + margin-bottom: 0.5rem; +} + +.form-group input { + width: 100%; + padding: 0.75rem 1rem; + border: 1px solid var(--color-border); + border-radius: 0.5rem; + font-size: 1rem; + transition: border-color 0.2s ease, box-shadow 0.2s ease; +} + +.form-group input:focus { + outline: none; + border-color: var(--color-primary); + box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.3); +} + +.btn { + display: inline-block; + padding: 0.75rem 1.5rem; + border: none; + border-radius: 0.5rem; + font-size: 1rem; + font-weight: 600; + cursor: pointer; + text-decoration: none; + transition: transform 0.2s ease, box-shadow 0.2s ease; +} + +.btn:hover { + transform: translateY(-2px); + box-shadow: 0 4px 10px rgba(0,0,0,0.1); +} + +.btn-primary { + background-color: var(--color-primary); + color: white; +} + +.btn-gradient { + background-image: linear-gradient(to right, var(--color-primary), var(--color-secondary)); + color: white; +} + +.auth-switch { + margin-top: 2rem; + font-size: 0.9rem; + color: var(--color-text-muted); +} + +.auth-switch a { + color: var(--color-primary); + font-weight: 600; + text-decoration: none; +} + +.alert { + padding: 1rem; + margin-bottom: 1.5rem; + border-radius: 0.5rem; + text-align: center; +} + +.alert-danger { + background-color: #FEE2E2; + color: #B91C1C; +} + +/* Hero Section (Logged Out) */ +.hero-section { + text-align: center; + padding: 4rem 1rem; +} + +.hero-section h1 { + font-size: 3rem; + font-weight: 700; + margin-bottom: 1rem; +} + +.hero-section p { + font-size: 1.25rem; + color: var(--color-text-muted); + margin-bottom: 2rem; +} + +/* Creator UI (Logged In) */ +.creator-container { + text-align: center; +} + +.page-title { + font-size: 2.5rem; + font-weight: 700; + margin-bottom: 0.5rem; +} + +.page-subtitle { + font-size: 1.1rem; + color: var(--color-text-muted); + margin-bottom: 3rem; +} + +.creator-card { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 2rem; + background-color: var(--color-surface); + padding: 2rem; + border-radius: var(--border-radius); + box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); +} + +.image-upload-wrapper { + position: relative; + cursor: pointer; + border-radius: var(--border-radius); + overflow: hidden; + border: 2px dashed var(--color-border); +} + +.image-preview { + width: 100%; + height: 100%; + object-fit: cover; + display: block; +} + +.upload-overlay { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-color: rgba(0,0,0,0.3); + color: white; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + opacity: 0; + transition: opacity 0.3s ease; +} + +.image-upload-wrapper:hover .upload-overlay { + opacity: 1; +} + +.upload-overlay svg { + width: 48px; + height: 48px; + margin-bottom: 1rem; +} + +.styled-preview-wrapper { + border-radius: var(--border-radius); + overflow: hidden; + background-color: var(--color-background); +} + +.styled-preview { + width: 100%; + height: 100%; + object-fit: cover; + transition: all 0.4s ease; +} + +.styles-gallery { + margin-top: 3rem; +} + +.gallery-title { + font-size: 1.75rem; + font-weight: 700; + margin-bottom: 1.5rem; +} + +.styles-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); + gap: 1.5rem; +} + +.style-card { + border-radius: var(--border-radius); + overflow: hidden; + cursor: pointer; + border: 3px solid transparent; + transition: border-color 0.3s ease; +} + +.style-card.active { + border-color: var(--color-primary); +} + +.style-card img { + width: 100%; + display: block; +} + +.style-name { + padding: 0.75rem; + background-color: var(--color-surface); + font-weight: 600; +} + +/* CSS Filters for Styles */ +.style-pop-art { + filter: contrast(1.5) saturate(1.8); +} + +.style-pixel-art { + image-rendering: pixelated; + filter: grayscale(1) contrast(2); +} + +.style-sketch { + filter: grayscale(1) brightness(1.2) contrast(1.5); +} \ No newline at end of file diff --git a/assets/js/main.js b/assets/js/main.js new file mode 100644 index 0000000..3d6ef25 --- /dev/null +++ b/assets/js/main.js @@ -0,0 +1,55 @@ +document.addEventListener('DOMContentLoaded', () => { + const imageUpload = document.getElementById('image-upload'); + const imagePreview = document.getElementById('image-preview'); + const styledPreview = document.getElementById('styled-preview'); + const uploadWrapper = document.querySelector('.image-upload-wrapper'); + + if (uploadWrapper) { + uploadWrapper.addEventListener('click', () => imageUpload.click()); + } + + if (imageUpload) { + imageUpload.addEventListener('change', (event) => { + const file = event.target.files[0]; + if (file) { + const reader = new FileReader(); + reader.onload = (e) => { + const imageUrl = e.target.result; + if(imagePreview) imagePreview.src = imageUrl; + if(styledPreview) styledPreview.src = imageUrl; + }; + reader.readAsDataURL(file); + } + }); + } + + const styleCards = document.querySelectorAll('.style-card'); + styleCards.forEach(card => { + card.addEventListener('click', () => { + // Update active card + styleCards.forEach(c => c.classList.remove('active')); + card.classList.add('active'); + + // Apply style effect + const style = card.dataset.style; + if (styledPreview) { + styledPreview.className = 'styled-preview'; // Reset classes + switch (style) { + case 'pop-art': + styledPreview.classList.add('style-pop-art'); + break; + case 'pixel-art': + styledPreview.classList.add('style-pixel-art'); + break; + case 'sketch': + styledPreview.classList.add('style-sketch'); + break; + case 'none': + default: + // No extra class needed + break; + } + } + }); + }); +}); diff --git a/db/migrations/001_create_users_table.php b/db/migrations/001_create_users_table.php index cd8fb71..51dad71 100644 --- a/db/migrations/001_create_users_table.php +++ b/db/migrations/001_create_users_table.php @@ -1,23 +1,22 @@ exec($sql); - echo "Migration 001: Users table created successfully.\n"; - } catch (PDOException $e) { - die("Migration 001 failed: " . $e->getMessage() . "\n"); - } -} +try { + $pdo = db(); + $sql = " + CREATE TABLE IF NOT EXISTS users ( + id INT AUTO_INCREMENT PRIMARY KEY, + username VARCHAR(50) NOT NULL UNIQUE, + password VARCHAR(255) NOT NULL, + created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP + ) ENGINE=INNODB; + "; + + $pdo->exec($sql); + + echo "Migration 001: users table created or already exists." . PHP_EOL; + +} catch (PDOException $e) { + die("Migration failed: " . $e->getMessage()); +} \ No newline at end of file diff --git a/index.php b/index.php index e13ae95..96fbef0 100644 --- a/index.php +++ b/index.php @@ -1,131 +1,59 @@ - - - - - - New Style - - - - - - -
-
-

Analyzing your requirements and generating your website…

-
- Loading… -
-

Flatlogic AI is collecting your requirements and applying the first changes.

-

This page will update automatically as the plan is implemented.

-

Runtime: PHP — UTC

+ + +
+

Create Your Avatar

+

Upload a photo, pick a style, and see the magic.

+ +
+
+
+ Avatar preview area +
+ + Upload Photo +
+ +
+
+
+
+ Styled avatar preview +
+
+
+ +
+

Select a Style

+
+
+ Pop Art avatar style +
Pop Art
+
+
+ Pixel Art avatar style +
Pixel Art
+
+
+ Sketch avatar style +
Sketch
+
+
+ No style +
None
+
+
+
-
- - - + +
+

Create Stunning Avatars from Your Photos

+

Join us and start transforming your pictures with unique artistic styles.

+ Get Started Now +
+ + + \ No newline at end of file diff --git a/login.php b/login.php new file mode 100644 index 0000000..01a6d27 --- /dev/null +++ b/login.php @@ -0,0 +1,72 @@ +prepare("SELECT * FROM users WHERE username = ?"); + $stmt->execute([$username]); + $user = $stmt->fetch(); + + if ($user && password_verify($password, $user['password'])) { + $_SESSION['user_id'] = $user['id']; + $_SESSION['username'] = $user['username']; + header("Location: index.php"); + exit; + } else { + $error = 'Invalid username or password.'; + } + } +} +?> + + + + + + Login - Avatar Generator + + + + + +
+
+

Welcome Back

+

Log in to continue creating.

+ + +
+ + +
+
+ + +
+
+ + +
+
+ +
+
+
+

Don't have an account? Register

+
+
+
+ + + + diff --git a/logout.php b/logout.php new file mode 100644 index 0000000..766a593 --- /dev/null +++ b/logout.php @@ -0,0 +1,6 @@ + + + + + + diff --git a/partials/header.php b/partials/header.php new file mode 100644 index 0000000..c7e2e1e --- /dev/null +++ b/partials/header.php @@ -0,0 +1,33 @@ + + + + + + + <?php echo isset($title) ? htmlspecialchars($title) : 'Avatar Generator'; ?> + + + + + +
+
+ + +
+
+
diff --git a/register.php b/register.php new file mode 100644 index 0000000..17d353c --- /dev/null +++ b/register.php @@ -0,0 +1,76 @@ +prepare("SELECT id FROM users WHERE username = ?"); + $stmt->execute([$username]); + if ($stmt->fetch()) { + $error = 'Username already exists.'; + } else { + $hashed_password = password_hash($password, PASSWORD_DEFAULT); + $stmt = $pdo->prepare("INSERT INTO users (username, password) VALUES (?, ?)"); + if ($stmt->execute([$username, $hashed_password])) { + $_SESSION['user_id'] = $pdo->lastInsertId(); + $_SESSION['username'] = $username; + header("Location: index.php"); + exit; + } else { + $error = 'Something went wrong. Please try again.'; + } + } + } +} +?> + + + + + + Register - Avatar Generator + + + + + +
+
+

Create Account

+

Get started with your own custom avatars.

+ + +
+ + +
+
+ + +
+
+ + +
+
+ +
+
+
+

Already have an account? Log In

+
+
+
+ + + +