diff --git a/assets/css/custom.css b/assets/css/custom.css new file mode 100644 index 0000000..49f5b45 --- /dev/null +++ b/assets/css/custom.css @@ -0,0 +1,307 @@ +/*-------------------------------------------------------------- +# General +--------------------------------------------------------------*/ +:root { + --primary-color: #1a1a1a; + --accent-color: #c5a47e; + --background-color: #fdfdfd; + --surface-color: #ffffff; + --text-color: #333; + --heading-font: 'Playfair Display', serif; + --body-font: 'Inter', sans-serif; +} + +body { + font-family: var(--body-font); + color: var(--text-color); + background-color: var(--background-color); + line-height: 1.7; +} + +h1, h2, h3, h4, h5, h6 { + font-family: var(--heading-font); + color: var(--primary-color); +} + +a { + color: var(--accent-color); + text-decoration: none; + transition: 0.3s; +} + +a:hover { + color: #a28664; + text-decoration: none; +} + +.btn-primary { + background-color: var(--accent-color); + border-color: var(--accent-color); + padding: 12px 30px; + border-radius: 4px; + font-family: var(--body-font); + font-weight: 500; + text-transform: uppercase; + letter-spacing: 1px; +} + +.btn-primary:hover { + background-color: #a28664; + border-color: #a28664; +} + +/*-------------------------------------------------------------- +# Header +--------------------------------------------------------------*/ +.site-header { + padding: 1.5rem 0; + background-color: var(--surface-color) !important; + border-bottom: 1px solid #efefef; +} + +.header-content { + display: flex; + justify-content: space-between; + align-items: center; +} + +.logo { + font-family: var(--heading-font); + font-size: 1.75rem; + font-weight: 700; + color: var(--primary-color) !important; +} + +.main-nav ul { + list-style: none; + margin: 0; + padding: 0; + display: flex; + gap: 2rem; +} + +.main-nav a { + font-family: var(--body-font); + text-transform: uppercase; + letter-spacing: 1px; + font-size: 0.9rem; + font-weight: 500; + color: var(--primary-color); + padding-bottom: 0.5rem; + border-bottom: 2px solid transparent; +} + +.main-nav a:hover, .main-nav a.active { + color: var(--accent-color); + border-bottom-color: var(--accent-color); +} + + +/*-------------------------------------------------------------- +# Hero Section +--------------------------------------------------------------*/ +.hero { + height: 85vh; + background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url('https://images.pexels.com/photos/298863/pexels-photo-298863.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2'); + background-size: cover; + background-position: center; + display: flex; + align-items: center; + justify-content: center; + text-align: center; +} + +.hero h1 { + font-size: 4.5rem; + color: #fff; + font-weight: 700; +} + +.hero p { + font-size: 1.2rem; + color: #fff; + margin-bottom: 30px; +} + +.hero-small { + padding: 4rem 0; + background-color: #f8f9fa; + text-align: center; + border-bottom: 1px solid #dee2e6; +} + +.hero-small h1 { + font-size: 2.5rem; + margin-bottom: 0.5rem; +} + +.hero-small p { + font-size: 1.1rem; + color: #6c757d; +} + +/*-------------------------------------------------------------- +# Product Section +--------------------------------------------------------------*/ +.product-section { + padding: 80px 0; +} + +.section-title { + text-align: center; + margin-bottom: 60px; +} + +.section-title h2 { + font-size: 3rem; + font-weight: 700; +} + +.product-grid { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); + gap: 2rem; +} + +.product-card { + border: none; + border-radius: 8px; + overflow: hidden; + background-color: var(--surface-color); + box-shadow: 0 10px 30px rgba(0,0,0,0.05); + transition: transform 0.3s ease, box-shadow 0.3s ease; +} + +.product-card:hover { + transform: translateY(-10px); + box-shadow: 0 15px 40px rgba(0,0,0,0.1); +} + +.product-image-wrapper { + height: 350px; + width: 100%; + overflow: hidden; +} + +.product-image { + height: 100%; + width: 100%; + object-fit: cover; + transition: transform 0.4s ease; +} + +.product-card:hover .product-image { + transform: scale(1.05); +} + +.product-info { + padding: 25px; + text-align: center; +} + +.product-name { + font-size: 1.25rem; + font-weight: 600; + margin-bottom: 5px; +} + +.product-price { + font-size: 1.3rem; + font-weight: 700; + color: var(--accent-color); +} + +/*-------------------------------------------------------------- +# Footer +--------------------------------------------------------------*/ +.site-footer { + background-color: var(--primary-color); + color: #a9a9a9; + padding: 40px 0; + font-size: 0.9rem; + text-align: center; +} + +.site-footer a { + color: #fff; +} + +.site-footer a:hover { + color: var(--accent-color); +} + +.site-footer .social-links a { + font-size: 1.2rem; + margin: 0 10px; +} + +/*-------------------------------------------------------------- +# Product Detail Page +--------------------------------------------------------------*/ +.product-detail-layout { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 4rem; + padding: 4rem 0; + align-items: start; +} + +.product-detail-images .main-product-image { + width: 100%; + border-radius: 8px; + box-shadow: 0 10px 30px rgba(0,0,0,0.1); +} + +.product-title { + font-size: 2.8rem; + margin-bottom: 1rem; +} + +.product-price-detail { + font-size: 2rem; + font-weight: 700; + color: var(--accent-color); + margin-bottom: 2rem; +} + +.product-description { + font-size: 1rem; + line-height: 1.8; + color: #555; + margin-bottom: 2rem; +} + +.add-to-cart-form .quantity-selector { + margin-bottom: 1.5rem; +} + +.add-to-cart-form .quantity-input { + width: 80px; + padding: 0.5rem; + text-align: center; + border: 1px solid #ccc; + border-radius: 4px; +} + +.add-to-cart-form .btn-primary { + width: 100%; + padding: 1rem; + font-size: 1.1rem; +} + +/* Notices */ +.notice { + text-align: center; + padding: 2rem; + margin: 2rem auto; + border-radius: 0.25rem; + background-color: #f8f9fa; + border: 1px solid #dee2e6; + max-width: 800px; +} + +.notice-error { + background-color: #f8d7da; + color: #721c24; + border-color: #f5c6cb; +} diff --git a/assets/js/main.js b/assets/js/main.js new file mode 100644 index 0000000..9020217 --- /dev/null +++ b/assets/js/main.js @@ -0,0 +1 @@ +// Custom JS will go here diff --git a/db/migrations/001_create_products_table.sql b/db/migrations/001_create_products_table.sql new file mode 100644 index 0000000..e03e1bd --- /dev/null +++ b/db/migrations/001_create_products_table.sql @@ -0,0 +1,9 @@ +CREATE TABLE IF NOT EXISTS products ( + id INT AUTO_INCREMENT PRIMARY KEY, + name VARCHAR(255) NOT NULL, + category VARCHAR(100) NOT NULL, + price DECIMAL(10, 2) NOT NULL, + image_url VARCHAR(255) NOT NULL, + is_featured BOOLEAN DEFAULT TRUE, + created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP +) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4; diff --git a/db/migrations/002_seed_products.sql b/db/migrations/002_seed_products.sql new file mode 100644 index 0000000..8f90d09 --- /dev/null +++ b/db/migrations/002_seed_products.sql @@ -0,0 +1,8 @@ +TRUNCATE TABLE products; +INSERT INTO products (name, category, price, image_url) VALUES +('Classic Oxford Shoes', 'Footwear', 199.99, 'https://images.pexels.com/photos/267320/pexels-photo-267320.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1'), +('Modern Charcoal Suit', 'Suits', 499.99, 'https://images.pexels.com/photos/1884584/pexels-photo-1884584.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1'), +('Leather Loafers', 'Footwear', 149.99, 'https://images.pexels.com/photos/1619690/pexels-photo-1619690.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1'), +('Navy Blue Tuxedo', 'Suits', 699.99, 'https://images.pexels.com/photos/325876/pexels-photo-325876.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1'), +('Suede Derby Shoes', 'Footwear', 179.99, 'https://images.pexels.com/photos/4252950/pexels-photo-4252950.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1'), +('Beige Linen Suit', 'Suits', 399.99, 'https://images.pexels.com/photos/6764033/pexels-photo-6764033.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1'); diff --git a/index.php b/index.php index 7205f3d..0932ce2 100644 --- a/index.php +++ b/index.php @@ -1,150 +1,138 @@ query("SELECT id, name, category, price, image_url FROM products WHERE is_featured = TRUE LIMIT 6"); + $products = $stmt->fetchAll(); +} catch (PDOException $e) { + // If the table doesn't exist, it might be because install.php hasn't been run. + // We can fail silently and just show an empty product list. + // In a real app, this should be logged. +} ?> - + - - - New Style - - - - - - - - - - - - - - - - - - - + + + + + bconcept + + + + + + + + + + + + + + + + + + -
-
-

Analyzing your requirements and generating your website…

-
- Loading… -
-

AI is collecting your requirements and applying the first changes.

-

This page will update automatically as the plan is implemented.

-

Runtime: PHP — UTC

-
-
- + + + + + +
+
+
+
+

Elegance Redefined

+

Discover our curated collection of men's formal wear and footwear.

+ Shop Now +
+
+
+
+ + + + + + + + + + + - + \ No newline at end of file diff --git a/install.php b/install.php new file mode 100644 index 0000000..70a4390 --- /dev/null +++ b/install.php @@ -0,0 +1,68 @@ + PDO::ERRMODE_EXCEPTION, + ]); + $message .= "MySQL server connection successful.
"; + + // 2. Create the database if it doesn't exist + $pdo_admin->exec("CREATE DATABASE IF NOT EXISTS `".DB_NAME."`"); + $message .= "Database `".DB_NAME."` created or already exists.
"; + + // 3. Now, connect to the specific database using the existing db() function + $pdo = db(); + $message .= "Database `".DB_NAME."` connection successful.
"; + + // 4. Execute 001_create_products_table.sql + $sql_create = file_get_contents('db/migrations/001_create_products_table.sql'); + if ($sql_create === false) { + throw new Exception("Could not read migration file: 001_create_products_table.sql"); + } + $pdo->exec($sql_create); + $message .= "`products` table created successfully.
"; + + // 5. Execute 002_seed_products.sql + $sql_seed = file_get_contents('db/migrations/002_seed_products.sql'); + if ($sql_seed === false) { + throw new Exception("Could not read migration file: 002_seed_products.sql"); + } + $pdo->exec($sql_seed); + $message .= "`products` table seeded with sample data.
"; + + $message .= "
Installation complete! You can now go to the homepage."; + +} catch (Exception $e) { + http_response_code(500); + $message = "An error occurred: " . $e->getMessage(); +} + +?> + + + + + + Installation + + + + +
+
Database Setup
+
+

+
+
+ + \ No newline at end of file diff --git a/product-detail.php b/product-detail.php new file mode 100644 index 0000000..87999a0 --- /dev/null +++ b/product-detail.php @@ -0,0 +1,103 @@ +prepare('SELECT * FROM products WHERE slug = :slug'); + $stmt->bindParam(':slug', $slug, PDO::PARAM_STR); + $stmt->execute(); + $product = $stmt->fetch(PDO::FETCH_ASSOC); + + if (!$product) { + http_response_code(404); + $error_message = "Product not found."; + } + +} catch (PDOException $e) { + $error_message = "Database error: " . $e->getMessage(); +} + +function format_price($price) { + return 'đ' . number_format($price, 0, ',', '.'); +} + +$page_title = $product ? $product['name'] : 'Product Not Found'; +$meta_description = $product ? htmlspecialchars($product['description']) : 'The requested product could not be found.'; + +?> + + + + + + <?php echo htmlspecialchars($page_title); ?> - bconcept + + + + + + + +
+
+
+
+ + +
+
+
+ +
+
+ +
+ +
+
+ <?php echo htmlspecialchars($product['name']); ?> +
+
+

+

+
+ +
+
+
+ + +
+ +
+
+
+ +
+
+ + +
+ + + diff --git a/products.php b/products.php new file mode 100644 index 0000000..c37a934 --- /dev/null +++ b/products.php @@ -0,0 +1,99 @@ +query('SELECT id, name, price, image_url, slug FROM products ORDER BY created_at DESC'); + if ($stmt) { + $products = $stmt->fetchAll(PDO::FETCH_ASSOC); + } +} catch (PDOException $e) { + // If the table doesn't exist, it's not a fatal error for the page load. + if ($e->getCode() === '42S02') { + $error_message = "The products table is not available. Please run the installer."; + } else { + $error_message = "An error occurred: " . $e->getMessage(); + } +} + +function format_price($price) { + return 'đ' . number_format($price, 0, ',', '.'); +} +?> + + + + + + All Products - bconcept + + + + + + + +
+
+
+
+ + +
+
+
+ +
+
+
+

All Products

+

Discover our curated collection of timeless pieces.

+
+
+ +
+
+ +
+ +
No products are currently available.
+ +
+ +
+ +
+ <?php echo htmlspecialchars($product['name']); ?> +
+
+

+

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