Upload 7 files

Dockerfile

@@ -0,0 +1,31 @@
+# Use an official Python runtime as the base image
+FROM python:3.10-slim
+
+# Set the working directory in the container
+WORKDIR /app
+
+# Copy the requirements file into the container
+COPY requirements.txt .
+
+# Install the required packages
+RUN pip install --no-cache-dir -r requirements.txt
+
+# Copy the rest of the application code
+COPY . .
+
+# Set environment variables
+ENV FLASK_APP=app.py
+ENV FLASK_RUN_HOST=0.0.0.0
+ENV FLASK_ENV=production
+
+# Expose the port the app runs on
+EXPOSE 7860
+
+# Run the application
+CMD ["gunicorn", "--bind", "0.0.0.0:7860", "app:app"]
+
+# Print the contents of the current directory
+RUN ls -la
+
+# Print the contents of the app.py file
+RUN cat app.py

app.py

@@ -0,0 +1,36 @@
+from flask import Flask, render_template, request, redirect, url_for, jsonify
+from supabase import create_client, Client
+from dotenv import load_dotenv
+import os
+
+load_dotenv()
+
+app = Flask(__name__)
+
+SUPABASE_URL = os.getenv('SUPABASE_URL')
+SUPABASE_KEY = os.getenv('SUPABASE_KEY')
+supabase: Client = create_client(SUPABASE_URL, SUPABASE_KEY)
+
+@app.route('/')
+def home():
+    return render_template('home.html')
+
+@app.route('/products')
+def products():
+    response = supabase.table('products').select('*').execute()
+    products = response.data
+    return render_template('product_list.html', products=products)
+
+@app.route('/products/<int:product_id>')
+def product_detail(product_id):
+    response = supabase.table('products').select('*').eq('id', product_id).execute()
+    if response.data:
+        product = response.data[0]
+        return render_template('product_detail.html', product=product)
+    else:
+        return "Product not found", 404
+
+if __name__ == '__main__':
+    app.run(debug=True, port=5000)
+
+

requirements.txt

@@ -0,0 +1,45 @@
+aiohappyeyeballs==2.4.4
+aiohttp==3.11.11
+aiosignal==1.3.2
+annotated-types==0.7.0
+anyio==4.7.0
+async-timeout==5.0.1
+attrs==24.3.0
+blinker==1.9.0
+certifi==2024.12.14
+click==8.1.8
+deprecation==2.1.0
+exceptiongroup==1.2.2
+Flask==3.1.0
+frozenlist==1.5.0
+gotrue==2.11.0
+gunicorn==23.0.0
+h11==0.14.0
+h2==4.1.0
+hpack==4.0.0
+httpcore==1.0.7
+httpx==0.27.2
+hyperframe==6.0.1
+idna==3.10
+itsdangerous==2.2.0
+Jinja2==3.1.5
+MarkupSafe==3.0.2
+multidict==6.1.0
+packaging==24.2
+postgrest==0.18.0
+propcache==0.2.1
+pydantic==2.10.4
+pydantic_core==2.27.2
+python-dateutil==2.9.0.post0
+python-dotenv==1.0.1
+realtime==2.0.6
+six==1.17.0
+sniffio==1.3.1
+storage3==0.9.0
+StrEnum==0.4.15
+supabase==2.10.0
+supafunc==0.7.0
+typing_extensions==4.12.2
+websockets==13.1
+Werkzeug==3.1.3
+yarl==1.18.3

static/styles.css

@@ -0,0 +1,406 @@
+/* Colorful Wooden Nameplate E-commerce Stylesheet */
+
+/* Import Google Fonts */
+@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&family=Playfair+Display:wght@700&display=swap');
+
+/* Reset and base styles */
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+:root {
+  --color-wood-dark: #8B4513;
+  --color-wood-light: #DEB887;
+  --color-accent-1: #FF6B6B;
+  --color-accent-2: #4ECDC4;
+  --color-accent-3: #FFA500;
+  --color-text: #333;
+  --color-background: #FFF8E7;
+}
+
+body {
+  font-family: 'Poppins', sans-serif;
+  line-height: 1.6;
+  color: var(--color-text);
+  background-color: var(--color-background);
+}
+
+.container {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 0 20px;
+}
+
+/* Typography */
+h1, h2, h3 {
+  font-family: 'Playfair Display', serif;
+  margin-bottom: 1rem;
+  color: var(--color-wood-dark);
+}
+
+h1 {
+  font-size: 3rem;
+  font-weight: 700;
+}
+
+h2 {
+  font-size: 2.5rem;
+  font-weight: 700;
+}
+
+p {
+  margin-bottom: 1rem;
+}
+
+a {
+  color: var(--color-wood-dark);
+  text-decoration: none;
+  transition: color 0.3s ease;
+}
+
+a:hover {
+  color: var(--color-accent-1);
+}
+
+/* Header */
+header {
+  background-color: var(--color-wood-light);
+  padding: 1rem 0;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+nav ul {
+  list-style-type: none;
+  display: flex;
+  justify-content: center;
+}
+
+nav ul li {
+  margin: 0 1rem;
+}
+
+nav ul li a {
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  color: var(--color-wood-dark);
+  position: relative;
+}
+
+nav ul li a::after {
+  content: '';
+  position: absolute;
+  width: 100%;
+  height: 2px;
+  bottom: -5px;
+  left: 0;
+  background-color: var(--color-accent-1);
+  transform: scaleX(0);
+  transition: transform 0.3s ease;
+}
+
+nav ul li a:hover::after {
+  transform: scaleX(1);
+}
+
+/* Main content */
+main {
+  padding: 2rem 0;
+}
+
+/* Home page */
+.hero {
+  text-align: center;
+  padding: 4rem 0;
+  background-color: var(--color-wood-light);
+  position: relative;
+  overflow: hidden;
+}
+
+.hero::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-image: url('https://images.unsplash.com/photo-1610505460324-989d7439edb8?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80');
+  background-size: cover;
+  background-position: center;
+  opacity: 0.2;
+  z-index: 0;
+}
+
+.hero-content {
+  position: relative;
+  z-index: 1;
+}
+
+.hero h1 {
+  font-size: 4rem;
+  margin-bottom: 1.5rem;
+  color: var(--color-wood-dark);
+  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+.cta-button {
+  display: inline-block;
+  background-color: var(--color-accent-1);
+  color: #fff;
+  padding: 0.75rem 1.5rem;
+  border-radius: 50px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  transition: all 0.3s ease;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+}
+
+.cta-button:hover {
+  background-color: var(--color-wood-dark);
+  color: #fff;
+  transform: translateY(-2px);
+  box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15);
+}
+
+/* Product list */
+.product-list {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
+  gap: 2rem;
+}
+
+.product-card {
+  background-color: #fff;
+  border-radius: 10px;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+  overflow: hidden;
+  transition: all 0.3s ease;
+  position: relative;
+}
+
+.product-card:hover {
+  transform: translateY(-5px);
+  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
+}
+
+.product-card img {
+  width: 100%;
+  height: 200px;
+  object-fit: cover;
+}
+
+.product-card-content {
+  padding: 1.5rem;
+}
+
+.product-card h2 {
+  font-size: 1.5rem;
+  margin-bottom: 0.5rem;
+  color: var(--color-wood-dark);
+}
+
+.product-card .price {
+  font-weight: 600;
+  color: var(--color-accent-3);
+  font-size: 1.25rem;
+  margin-bottom: 1rem;
+}
+
+/* Product detail */
+.product-detail {
+  display: flex;
+  gap: 2rem;
+  align-items: flex-start;
+  background-color: #fff;
+  border-radius: 10px;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+  padding: 2rem;
+}
+
+.product-detail img {
+  width: 50%;
+  max-width: 500px;
+  border-radius: 10px;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+}
+
+.product-info {
+  flex: 1;
+}
+
+.product-info h1 {
+  margin-bottom: 0.5rem;
+  color: var(--color-wood-dark);
+}
+
+.product-info .price {
+  font-size: 1.5rem;
+  font-weight: 600;
+  color: var(--color-accent-3);
+  margin-bottom: 1rem;
+}
+
+.product-info .details {
+  margin-bottom: 1.5rem;
+  line-height: 1.8;
+}
+
+.whatsapp-button {
+  display: inline-block;
+  background-color: #25d366;
+  color: #fff;
+  padding: 0.75rem 1.5rem;
+  border-radius: 50px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  transition: all 0.3s ease;
+  margin-right: 1rem;
+}
+
+.whatsapp-button:hover {
+  background-color: #128c7e;
+  color: #fff;
+  transform: translateY(-2px);
+}
+
+/* Forms */
+form {
+  background-color: #fff;
+  padding: 2rem;
+  border-radius: 10px;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+}
+
+.form-group {
+  margin-bottom: 1.5rem;
+}
+
+label {
+  display: block;
+  margin-bottom: 0.5rem;
+  font-weight: 600;
+  color: var(--color-wood-dark);
+}
+
+input[type="text"],
+input[type="password"],
+textarea {
+  width: 100%;
+  padding: 0.75rem;
+  border: 2px solid var(--color-wood-light);
+  border-radius: 5px;
+  font-family: inherit;
+  font-size: inherit;
+  transition: border-color 0.3s ease;
+}
+
+input[type="text"]:focus,
+input[type="password"]:focus,
+textarea:focus {
+  outline: none;
+  border-color: var(--color-accent-2);
+}
+
+button[type="submit"] {
+  background-color: var(--color-accent-2);
+  color: #fff;
+  padding: 0.75rem 1.5rem;
+  border: none;
+  border-radius: 50px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  cursor: pointer;
+  transition: all 0.3s ease;
+}
+
+button[type="submit"]:hover {
+  background-color: var(--color-wood-dark);
+  transform: translateY(-2px);
+}
+
+/* Admin dashboard */
+.admin-actions {
+  margin-bottom: 2rem;
+}
+
+.admin-product-list {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+  gap: 2rem;
+}
+
+.admin-product-card {
+  background-color: #fff;
+  border-radius: 10px;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+  overflow: hidden;
+}
+
+.admin-product-card img {
+  width: 100%;
+  height: 200px;
+  object-fit: cover;
+}
+
+.admin-product-card-content {
+  padding: 1.5rem;
+}
+
+.admin-actions-buttons {
+  display: flex;
+  justify-content: space-between;
+  margin-top: 1rem;
+}
+
+.edit-button,
+.delete-button {
+  padding: 0.5rem 1rem;
+  border: none;
+  border-radius: 50px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  cursor: pointer;
+  transition: all 0.3s ease;
+}
+
+.edit-button {
+  background-color: var(--color-accent-2);
+  color: #fff;
+}
+
+.edit-button:hover {
+  background-color: var(--color-wood-dark);
+}
+
+.delete-button {
+  background-color: var(--color-accent-1);
+  color: #fff;
+}
+
+.delete-button:hover {
+  background-color: #c0392b;
+}
+
+/* Responsive design */
+@media (max-width: 768px) {
+  .product-detail {
+    flex-direction: column;
+  }
+
+  .product-detail img {
+    width: 100%;
+    max-width: none;
+  }
+
+  .hero h1 {
+    font-size: 3rem;
+  }
+}
+
+

templates/home.html

@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Custom Wooden Nameplates</title>
+    <link rel="stylesheet" href="/static/styles.css">
+</head>
+<body>
+    <header>
+        <nav>
+            <ul>
+                <li><a href="/">Home</a></li>
+                <li><a href="/products">Products</a></li>
+            </ul>
+        </nav>
+    </header>
+    <main>
+        <section class="hero">
+            <div class="container">
+                <div class="hero-content">
+                    <h1>Custom Wooden Nameplates</h1>
+                    <p>Personalized, handcrafted wooden nameplates for your home or office</p>
+                    <a href="/products" class="cta-button">View Our Collection</a>
+                </div>
+            </div>
+        </section>
+    </main>
+</body>
+</html>
+
+

templates/product_detail.html

@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="/static/styles.css">
+    <title>{{ product.name }} - Custom Wooden Nameplate</title>
+</head>
+<body>
+    <header>
+        <nav>
+            <ul>
+                <li><a href="/">Home</a></li>
+                <li><a href="/products">Products</a></li>
+            </ul>
+        </nav>
+    </header>
+    <main>
+        <div class="container">
+            <div class="product-detail">
+                <img src="{{ product.image_link }}" alt="{{ product.name }}">
+                <div class="product-info">
+                    <h1>{{ product.name }}</h1>
+                    <p class="price">{{ product.price }}</p>
+                    <p class="details">{{ product.details }}</p>
+                    <a href="{{ product.whatsapp_link }}" target="_blank" class="whatsapp-button">Buy on WhatsApp</a>
+                    <a href="/products" class="cta-button">Back to Products</a>
+                </div>
+            </div>
+        </div>
+    </main>
+</body>
+</html>
+
+

templates/product_list.html

@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Our Wooden Nameplates</title>
+    <link rel="stylesheet" href="/static/styles.css">
+</head>
+<body>
+    <header>
+        <nav>
+            <ul>
+                <li><a href="/">Home</a></li>
+                <li><a href="/products">Products</a></li>
+            </ul>
+        </nav>
+    </header>
+    <main>
+        <div class="container">
+            <h1>Our Wooden Nameplate Collection</h1>
+            <div class="product-list">
+                {% for product in products %}
+                <div class="product-card">
+                    <img src="{{ product.image_link }}" alt="{{ product.name }}">
+                    <div class="product-card-content">
+                        <h2>{{ product.name }}</h2>
+                        <p class="price">{{ product.price }}</p>
+                        <a href="/products/{{ product.id }}" class="cta-button">View Details</a>
+                    </div>
+                </div>
+                {% endfor %}
+            </div>
+        </div>
+    </main>
+</body>
+</html>
+
+