Compare commits
2 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
b96d6dd21e | ||
|
|
2902ab3d4a |
404
assets/css/custom.css
Normal file
404
assets/css/custom.css
Normal file
@ -0,0 +1,404 @@
|
||||
: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, .form-group textarea {
|
||||
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;
|
||||
background-color: var(--color-background);
|
||||
}
|
||||
|
||||
.form-group input:focus, .form-group textarea: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);
|
||||
}
|
||||
|
||||
/* Comments Section */
|
||||
.comments-container {
|
||||
max-width: 800px;
|
||||
margin: 4rem auto 2rem;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.comments-title {
|
||||
font-size: 1.75rem;
|
||||
font-weight: 700;
|
||||
margin-bottom: 1.5rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.comment-form-wrapper {
|
||||
background-color: var(--color-surface);
|
||||
padding: 1.5rem;
|
||||
border-radius: var(--border-radius);
|
||||
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.comment-form-wrapper textarea {
|
||||
min-height: 80px;
|
||||
resize: vertical;
|
||||
}
|
||||
|
||||
.comment-form-wrapper .btn {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.comments-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1.5rem;
|
||||
}
|
||||
|
||||
.comment-card {
|
||||
background-color: var(--color-surface);
|
||||
padding: 1.5rem;
|
||||
border-radius: var(--border-radius);
|
||||
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
|
||||
}
|
||||
|
||||
.comment-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 1rem;
|
||||
font-size: 0.9rem;
|
||||
color: var(--color-text-muted);
|
||||
}
|
||||
|
||||
.comment-author {
|
||||
font-weight: 600;
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
.comment-body p {
|
||||
margin: 0;
|
||||
line-height: 1.6;
|
||||
}
|
||||
55
assets/js/main.js
Normal file
55
assets/js/main.js
Normal file
@ -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;
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
@ -1,23 +1,26 @@
|
||||
<?php
|
||||
require_once __DIR__ . '/../config.php';
|
||||
// db/migrations/001_create_users_table.php
|
||||
|
||||
if (function_exists('migrate_001_create_users_table')) {
|
||||
return;
|
||||
}
|
||||
|
||||
function migrate_001_create_users_table() {
|
||||
require_once __DIR__ . '/../config.php';
|
||||
|
||||
try {
|
||||
$pdo = db();
|
||||
$sql = "
|
||||
CREATE TABLE IF NOT EXISTS `users` (
|
||||
`id` int(11) NOT NULL AUTO_INCREMENT,
|
||||
`username` varchar(255) NOT NULL,
|
||||
`password` varchar(255) NOT NULL,
|
||||
`created_at` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP,
|
||||
PRIMARY KEY (`id`),
|
||||
UNIQUE KEY `username` (`username`)
|
||||
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 DEFAULT CHARSET=utf8mb4;
|
||||
";
|
||||
$pdo->exec($sql);
|
||||
echo "Migration 001: Users table created successfully.\n";
|
||||
echo "Migration 001: 'users' table created or already exists.\n";
|
||||
} catch (PDOException $e) {
|
||||
die("Migration 001 failed: " . $e->getMessage() . "\n");
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -1,25 +1,27 @@
|
||||
<?php
|
||||
require_once __DIR__ . '/../config.php';
|
||||
// db/migrations/002_create_comments_table.php
|
||||
|
||||
if (function_exists('migrate_002_create_comments_table')) {
|
||||
return;
|
||||
}
|
||||
|
||||
function migrate_002_create_comments_table() {
|
||||
require_once __DIR__ . '/../config.php';
|
||||
|
||||
try {
|
||||
$pdo = db();
|
||||
$sql = "
|
||||
CREATE TABLE IF NOT EXISTS `comments` (
|
||||
`id` int(11) NOT NULL AUTO_INCREMENT,
|
||||
`post_id` int(11) NOT NULL,
|
||||
`name` varchar(255) NOT NULL,
|
||||
`comment` text NOT NULL,
|
||||
`created_at` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP,
|
||||
PRIMARY KEY (`id`),
|
||||
KEY `post_id` (`post_id`),
|
||||
CONSTRAINT `comments_ibfk_1` FOREIGN KEY (`post_id`) REFERENCES `posts` (`id`) ON DELETE CASCADE
|
||||
CREATE TABLE IF NOT EXISTS comments (
|
||||
id INT AUTO_INCREMENT PRIMARY KEY,
|
||||
user_id INT NOT NULL,
|
||||
comment TEXT NOT NULL,
|
||||
created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
|
||||
FOREIGN KEY (user_id) REFERENCES users(id) ON DELETE CASCADE
|
||||
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
|
||||
";
|
||||
$pdo->exec($sql);
|
||||
echo "Migration 002: Comments table created successfully.\n";
|
||||
echo "Migration 002: 'comments' table created or already exists.\n";
|
||||
} catch (PDOException $e) {
|
||||
die("Migration 002 failed: " . $e->getMessage() . "\n");
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
246
index.php
246
index.php
@ -1,131 +1,125 @@
|
||||
<?php
|
||||
declare(strict_types=1);
|
||||
@ini_set('display_errors', '1');
|
||||
@error_reporting(E_ALL);
|
||||
@date_default_timezone_set('UTC');
|
||||
$title = 'Home - Avatar Generator';
|
||||
require_once 'partials/header.php';
|
||||
|
||||
// Handle comment submission
|
||||
if (isset($_SESSION['user_id']) && $_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['comment'])) {
|
||||
$comment_text = trim($_POST['comment']);
|
||||
if (!empty($comment_text)) {
|
||||
try {
|
||||
$stmt = db()->prepare("INSERT INTO comments (user_id, comment) VALUES (:user_id, :comment)");
|
||||
$stmt->execute(['user_id' => $_SESSION['user_id'], 'comment' => $comment_text]);
|
||||
} catch (PDOException $e) {
|
||||
// Optional: handle error, e.g., log it or show a generic error message
|
||||
}
|
||||
}
|
||||
// Redirect to the same page to prevent form resubmission
|
||||
header("Location: index.php");
|
||||
exit;
|
||||
}
|
||||
|
||||
// Fetch comments
|
||||
$comments = [];
|
||||
if (isset($_SESSION['user_id'])) {
|
||||
try {
|
||||
$stmt = db()->query("
|
||||
SELECT c.comment, c.created_at, u.username
|
||||
FROM comments c
|
||||
JOIN users u ON c.user_id = u.id
|
||||
ORDER BY c.created_at DESC
|
||||
");
|
||||
$comments = $stmt->fetchAll(PDO::FETCH_ASSOC);
|
||||
} catch (PDOException $e) {
|
||||
// Optional: handle error
|
||||
}
|
||||
}
|
||||
|
||||
$phpVersion = PHP_VERSION;
|
||||
$now = date('Y-m-d H:i:s');
|
||||
?>
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>New Style</title>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
:root {
|
||||
--bg-color-start: #6a11cb;
|
||||
--bg-color-end: #2575fc;
|
||||
--text-color: #ffffff;
|
||||
--card-bg-color: rgba(255, 255, 255, 0.01);
|
||||
--card-border-color: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: 'Inter', sans-serif;
|
||||
background: linear-gradient(45deg, var(--bg-color-start), var(--bg-color-end));
|
||||
color: var(--text-color);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
min-height: 100vh;
|
||||
text-align: center;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
body::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><path d="M-10 10L110 10M10 -10L10 110" stroke-width="1" stroke="rgba(255,255,255,0.05)"/></svg>');
|
||||
animation: bg-pan 20s linear infinite;
|
||||
z-index: -1;
|
||||
}
|
||||
@keyframes bg-pan {
|
||||
0% { background-position: 0% 0%; }
|
||||
100% { background-position: 100% 100%; }
|
||||
}
|
||||
main {
|
||||
padding: 2rem;
|
||||
}
|
||||
.card {
|
||||
background: var(--card-bg-color);
|
||||
border: 1px solid var(--card-border-color);
|
||||
border-radius: 16px;
|
||||
padding: 2rem;
|
||||
backdrop-filter: blur(20px);
|
||||
-webkit-backdrop-filter: blur(20px);
|
||||
box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
.loader {
|
||||
margin: 1.25rem auto 1.25rem;
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
border: 3px solid rgba(255, 255, 255, 0.25);
|
||||
border-top-color: #fff;
|
||||
border-radius: 50%;
|
||||
animation: spin 1s linear infinite;
|
||||
}
|
||||
@keyframes spin {
|
||||
from { transform: rotate(0deg); }
|
||||
to { transform: rotate(360deg); }
|
||||
}
|
||||
.hint {
|
||||
opacity: 0.9;
|
||||
}
|
||||
.sr-only {
|
||||
position: absolute;
|
||||
width: 1px; height: 1px;
|
||||
padding: 0; margin: -1px;
|
||||
overflow: hidden;
|
||||
clip: rect(0, 0, 0, 0);
|
||||
white-space: nowrap; border: 0;
|
||||
}
|
||||
h1 {
|
||||
font-size: 3rem;
|
||||
font-weight: 700;
|
||||
margin: 0 0 1rem;
|
||||
letter-spacing: -1px;
|
||||
}
|
||||
p {
|
||||
margin: 0.5rem 0;
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
code {
|
||||
background: rgba(0,0,0,0.2);
|
||||
padding: 2px 6px;
|
||||
border-radius: 4px;
|
||||
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
|
||||
}
|
||||
footer {
|
||||
position: absolute;
|
||||
bottom: 1rem;
|
||||
font-size: 0.8rem;
|
||||
opacity: 0.7;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<div class="card">
|
||||
<h1>Analyzing your requirements and generating your website…</h1>
|
||||
<div class="loader" role="status" aria-live="polite" aria-label="Applying initial changes">
|
||||
<span class="sr-only">Loading…</span>
|
||||
|
||||
<?php if (isset($_SESSION['user_id'])): ?>
|
||||
<div class="creator-container">
|
||||
<h1 class="page-title">Create Your Avatar</h1>
|
||||
<p class="page-subtitle">Upload a photo, pick a style, and see the magic.</p>
|
||||
|
||||
<div class="creator-card">
|
||||
<div class="creator-column preview-column">
|
||||
<div class="image-upload-wrapper">
|
||||
<img src="https://picsum.photos/seed/placeholder-1/800/800" alt="Avatar preview area" id="image-preview" class="image-preview">
|
||||
<div class="upload-overlay">
|
||||
<i data-feather="upload"></i>
|
||||
<span>Upload Photo</span>
|
||||
</div>
|
||||
<p class="hint">Flatlogic AI is collecting your requirements and applying the first changes.</p>
|
||||
<p class="hint">This page will update automatically as the plan is implemented.</p>
|
||||
<p>Runtime: PHP <code><?= htmlspecialchars($phpVersion) ?></code> — UTC <code><?= htmlspecialchars($now) ?></code></p>
|
||||
<input type="file" id="image-upload" accept="image/*" style="display: none;">
|
||||
</div>
|
||||
</main>
|
||||
<footer>
|
||||
Page updated: <?= htmlspecialchars($now) ?> (UTC)
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
</div>
|
||||
<div class="creator-column styled-column">
|
||||
<div class="styled-preview-wrapper">
|
||||
<img src="https://picsum.photos/seed/placeholder-1/800/800" alt="Styled avatar preview" id="styled-preview" class="styled-preview">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="styles-gallery">
|
||||
<h2 class="gallery-title">Select a Style</h2>
|
||||
<div class="styles-grid">
|
||||
<div class="style-card active" data-style="pop-art">
|
||||
<img src="https://picsum.photos/seed/style-art/400/400" alt="Pop Art avatar style">
|
||||
<div class="style-name">Pop Art</div>
|
||||
</div>
|
||||
<div class="style-card" data-style="pixel-art">
|
||||
<img src="https://picsum.photos/seed/style-pixel/400/400" alt="Pixel Art avatar style">
|
||||
<div class="style-name">Pixel Art</div>
|
||||
</div>
|
||||
<div class="style-card" data-style="sketch">
|
||||
<img src="https://picsum.photos/seed/style-sketch/400/400" alt="Sketch avatar style">
|
||||
<div class="style-name">Sketch</div>
|
||||
</div>
|
||||
<div class="style-card" data-style="none">
|
||||
<img src="https://picsum.photos/seed/style-none/400/400" alt="No style">
|
||||
<div class="style-name">None</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Comments Section -->
|
||||
<div class="comments-container">
|
||||
<h2 class="comments-title">Community Feedback</h2>
|
||||
<div class="comment-form-wrapper">
|
||||
<form action="index.php" method="POST">
|
||||
<div class="form-group">
|
||||
<textarea name="comment" class="form-control" placeholder="Share your thoughts..." required></textarea>
|
||||
</div>
|
||||
<button type="submit" class="btn btn-primary btn-gradient">Post Comment</button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div class="comments-list">
|
||||
<?php if (empty($comments)): ?>
|
||||
<p>No comments yet. Be the first to share your thoughts!</p>
|
||||
<?php else: ?>
|
||||
<?php foreach ($comments as $comment): ?>
|
||||
<div class="comment-card">
|
||||
<div class="comment-header">
|
||||
<span class="comment-author"><?php echo htmlspecialchars($comment['username']); ?></span>
|
||||
<span class="comment-date"><?php echo date('M j, Y, g:i a', strtotime($comment['created_at'])); ?></span>
|
||||
</div>
|
||||
<div class="comment-body">
|
||||
<p><?php echo htmlspecialchars($comment['comment']); ?></p>
|
||||
</div>
|
||||
</div>
|
||||
<?php endforeach; ?>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
</div>
|
||||
<!-- End Comments Section -->
|
||||
|
||||
<?php else: ?>
|
||||
<div class="hero-section">
|
||||
<h1>Create Stunning Avatars from Your Photos</h1>
|
||||
<p>Join us and start transforming your pictures with unique artistic styles.</p>
|
||||
<a href="register.php" class="btn btn-primary btn-gradient">Get Started Now</a>
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
|
||||
<?php require_once 'partials/footer.php'; ?>
|
||||
72
login.php
Normal file
72
login.php
Normal file
@ -0,0 +1,72 @@
|
||||
<?php
|
||||
session_start();
|
||||
require_once 'db/config.php';
|
||||
$error = '';
|
||||
|
||||
if ($_SERVER['REQUEST_METHOD'] == 'POST') {
|
||||
$username = trim($_POST['username']);
|
||||
$password = $_POST['password'];
|
||||
|
||||
if (empty($username) || empty($password)) {
|
||||
$error = 'Please fill in all fields.';
|
||||
} else {
|
||||
$pdo = db();
|
||||
$stmt = $pdo->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.';
|
||||
}
|
||||
}
|
||||
}
|
||||
?>
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Login - Avatar Generator</title>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap" rel="stylesheet">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/feather-icons/4.29.0/feather.min.css">
|
||||
<link rel="stylesheet" href="assets/css/custom.css?v=<?php echo time(); ?>">
|
||||
</head>
|
||||
<body>
|
||||
<div class="auth-container">
|
||||
<div class="auth-card">
|
||||
<h1 class="auth-title">Welcome Back</h1>
|
||||
<p class="auth-subtitle">Log in to continue creating.</p>
|
||||
|
||||
<?php if ($error): ?>
|
||||
<div class="alert alert-danger"><?php echo htmlspecialchars($error); ?></div>
|
||||
<?php endif; ?>
|
||||
|
||||
<form method="POST" action="login.php">
|
||||
<div class="form-group">
|
||||
<label for="username">Username</label>
|
||||
<input type="text" id="username" name="username" required>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="password">Password</label>
|
||||
<input type="password" id="password" name="password" required>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<button type="submit" class="btn btn-primary btn-gradient">Log In</button>
|
||||
</div>
|
||||
</form>
|
||||
<div class="auth-switch">
|
||||
<p>Don't have an account? <a href="register.php">Register</a></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/feather-icons/4.29.0/feather.min.js"></script>
|
||||
<script>
|
||||
feather.replace();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
6
logout.php
Normal file
6
logout.php
Normal file
@ -0,0 +1,6 @@
|
||||
<?php
|
||||
session_start();
|
||||
session_unset();
|
||||
session_destroy();
|
||||
header("Location: login.php");
|
||||
exit;
|
||||
12
partials/footer.php
Normal file
12
partials/footer.php
Normal file
@ -0,0 +1,12 @@
|
||||
</main>
|
||||
<footer class="main-footer">
|
||||
<div class="container">
|
||||
<p>© <?php echo date('Y'); ?> AvatarGen. All rights reserved.</p>
|
||||
</div>
|
||||
</footer>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/feather-icons/4.29.0/feather.min.js"></script>
|
||||
<script>
|
||||
feather.replace();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
33
partials/header.php
Normal file
33
partials/header.php
Normal file
@ -0,0 +1,33 @@
|
||||
<?php
|
||||
if (session_status() === PHP_SESSION_NONE) {
|
||||
session_start();
|
||||
}
|
||||
?>
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title><?php echo isset($title) ? htmlspecialchars($title) : 'Avatar Generator'; ?></title>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap" rel="stylesheet">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/feather-icons/4.29.0/feather.min.css">
|
||||
<link rel="stylesheet" href="assets/css/custom.css?v=<?php echo time(); ?>">
|
||||
</head>
|
||||
<body>
|
||||
<header class="main-header">
|
||||
<div class="container">
|
||||
<a href="index.php" class="logo">AvatarGen</a>
|
||||
<nav class="main-nav">
|
||||
<ul>
|
||||
<?php if (isset($_SESSION['user_id'])): ?>
|
||||
<li><span>Welcome, <?php echo htmlspecialchars($_SESSION['username']); ?>!</span></li>
|
||||
<li><a href="logout.php">Logout</a></li>
|
||||
<?php else: ?>
|
||||
<li><a href="login.php">Login</a></li>
|
||||
<li><a href="register.php" class="btn btn-primary">Register</a></li>
|
||||
<?php endif; ?>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
<main class="container">
|
||||
76
register.php
Normal file
76
register.php
Normal file
@ -0,0 +1,76 @@
|
||||
<?php
|
||||
session_start();
|
||||
require_once 'db/config.php';
|
||||
$error = '';
|
||||
|
||||
if ($_SERVER['REQUEST_METHOD'] == 'POST') {
|
||||
$username = trim($_POST['username']);
|
||||
$password = $_POST['password'];
|
||||
|
||||
if (empty($username) || empty($password)) {
|
||||
$error = 'Please fill in all fields.';
|
||||
} else {
|
||||
$pdo = db();
|
||||
$stmt = $pdo->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.';
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
?>
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Register - Avatar Generator</title>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap" rel="stylesheet">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/feather-icons/4.29.0/feather.min.css">
|
||||
<link rel="stylesheet" href="assets/css/custom.css?v=<?php echo time(); ?>">
|
||||
</head>
|
||||
<body>
|
||||
<div class="auth-container">
|
||||
<div class="auth-card">
|
||||
<h1 class="auth-title">Create Account</h1>
|
||||
<p class="auth-subtitle">Get started with your own custom avatars.</p>
|
||||
|
||||
<?php if ($error): ?>
|
||||
<div class="alert alert-danger"><?php echo htmlspecialchars($error); ?></div>
|
||||
<?php endif; ?>
|
||||
|
||||
<form method="POST" action="register.php">
|
||||
<div class="form-group">
|
||||
<label for="username">Username</label>
|
||||
<input type="text" id="username" name="username" required>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="password">Password</label>
|
||||
<input type="password" id="password" name="password" required>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<button type="submit" class="btn btn-primary btn-gradient">Register</button>
|
||||
</div>
|
||||
</form>
|
||||
<div class="auth-switch">
|
||||
<p>Already have an account? <a href="login.php">Log In</a></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/feather-icons/4.29.0/feather.min.js"></script>
|
||||
<script>
|
||||
feather.replace();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
x
Reference in New Issue
Block a user