From 7363d88e7ea3d0a74db573559828be8d9e32f6f9 Mon Sep 17 00:00:00 2001 From: "google-labs-jules[bot]" <161369871+google-labs-jules[bot]@users.noreply.github.com> Date: Sun, 5 Oct 2025 09:07:17 +0000 Subject: [PATCH] This commit introduces the initial file structure for integrating Supabase and Stripe into the NutriPlan application. - Creates a new branch `feature/supabase-stripe-integration`. - Adds `index.html` with the necessary UI components for authentication, product display, and order history. - Adds `style.css` with a clean, modern, and mobile-first design, consistent with the project's UI/UX guidelines. - Adds `script.js` containing the client-side logic for Supabase authentication, order management, and a simulated Stripe Checkout flow. API keys are abstracted into constants for easy configuration. - Adds a detailed `README.md` with comprehensive setup and usage instructions for Supabase, Stripe, and the project itself. --- README.md | 134 +++++++++ index.html | 148 +++------- jules-scratch/verification/verification.png | Bin 0 -> 29582 bytes .../verification/verify_nutriplan.py | 19 ++ script.js | 248 ++++++++++++---- server.log | 0 style.css | 277 ++++++++++-------- 7 files changed, 544 insertions(+), 282 deletions(-) create mode 100644 README.md create mode 100644 jules-scratch/verification/verification.png create mode 100644 jules-scratch/verification/verify_nutriplan.py create mode 100644 server.log diff --git a/README.md b/README.md new file mode 100644 index 0000000..00fcf74 --- /dev/null +++ b/README.md @@ -0,0 +1,134 @@ +# NutriPlan - Supabase & Stripe Integration + +This project is a sample implementation of a web application named NutriPlan. It demonstrates how to integrate Supabase for user authentication and database operations (managing orders) and Stripe for handling payments (subscriptions via Stripe Checkout). + +The frontend is built with plain HTML, CSS, and JavaScript, focusing on a clean, modern, and mobile-first design. + +## Features + +* **User Authentication:** Sign-up, login, and logout functionality managed by Supabase Auth. +* **Product Display:** A clean, responsive grid displaying available subscription plans. +* **Stripe Checkout:** Secure payment processing through redirection to Stripe Checkout. +* **Order History:** Logged-in users can view their past orders, fetched from a Supabase database. +* **Secure API Calls:** The architecture is designed to use a serverless backend (like Supabase Edge Functions) to securely create Stripe Checkout sessions, preventing keys from being exposed on the client-side. + +## Tech Stack + +* **Frontend:** HTML, CSS, JavaScript +* **Authentication & Database:** [Supabase](https://supabase.io/) +* **Payments:** [Stripe](https://stripe.com/) +* **Fonts:** Google Fonts (Montserrat & Open Sans) + +## Project Structure + +``` +. +├── index.html # The main HTML file for the user interface. +├── style.css # The stylesheet for the application. +├── script.js # The core JavaScript file for all client-side logic. +└── README.md # This documentation file. +``` + +--- + +## Installation and Setup + +Follow these instructions to get the project running locally. + +### Prerequisites + +* A [Supabase](https://app.supabase.io/) account. +* A [Stripe](https://dashboard.stripe.com/register) account. +* A local web server to serve the files (e.g., VS Code Live Server, Python's `http.server`). + +### Step 1: Set up Supabase + +1. **Create a New Project:** + * Go to your Supabase dashboard and create a new project. + +2. **Get API Keys:** + * Navigate to your project's **Settings > API**. + * You will need the **Project URL** and the **`anon` public key**. + +3. **Create an `orders` Table:** + * Go to the **Table Editor** in your Supabase project. + * Create a new table named `orders`. + * Add the following columns: + * `id` (int8, is identity) - Primary Key + * `created_at` (timestamptz, default `now()`) + * `user_id` (uuid, foreign key to `auth.users.id`) - This links the order to a user. + * `product_name` (text) - The name of the purchased plan. + * `stripe_payment_intent` (text) - The payment intent ID from Stripe for reference. + * Make sure to **disable Row Level Security (RLS)** for this table for initial testing, or create appropriate policies for access. For production, you should enable RLS and create policies that only allow users to see their own orders. + +### Step 2: Set up Stripe + +1. **Get API Keys:** + * Go to your Stripe Dashboard. + * Navigate to **Developers > API keys**. + * You will need the **Publishable key** (`pk_test_...`). + +2. **Create Products:** + * In the Stripe Dashboard, go to the **Products** catalog. + * Create at least two products (e.g., "Basic Plan", "Premium Plan"). + * For each product, add a pricing plan (e.g., $9.99/month). + * Note down the **API ID** for each price (e.g., `price_123abc`). You will need this for the checkout button in `index.html`. + +### Step 3: Configure the Project + +1. **Clone or Download the Repository:** + * Get the project files onto your local machine. + +2. **Update `index.html`:** + * Open `index.html`. + * Find the `.product-card` divs. + * Update the `data-product-id` attribute with the **Price API IDs** you got from Stripe. + ```html +
+ ``` + +3. **Update `script.js`:** + * Open `script.js`. + * At the top of the file, replace the placeholder constants with your actual keys from Supabase and Stripe. + ```javascript + const SUPABASE_URL = 'YOUR_SUPABASE_URL'; // From Supabase Settings > API + const SUPABASE_ANON_KEY = 'YOUR_SUPABASE_ANON_KEY'; // From Supabase Settings > API + const STRIPE_PUBLISHABLE_KEY = 'YOUR_STRIPE_PUBLISHABLE_KEY'; // From Stripe Developers > API Keys + ``` + +### Step 4: (Advanced) Create the Backend Function + +For the Stripe Checkout to work, you need a secure backend environment to create the checkout session. The client-side code in `script.js` is prepared to call a serverless function. + +1. **Create a Supabase Edge Function:** + * Use the Supabase CLI to create a new function (e.g., `create-checkout-session`). + * This function will receive a `productId` from the client. + * Inside the function, use the Stripe Node.js library to create a checkout session. You will need your **Stripe Secret Key** here (store it as a Supabase secret). + * The function should return the `sessionId` to the client. + +2. **Client-side Call:** + * In `script.js`, uncomment and use the `supabase.functions.invoke` call to trigger your edge function. + +--- + +## Testing + +1. **Start a Local Server:** + * From the project's root directory, start a simple web server. For example, if you have Python 3: + ```bash + python -m http.server + ``` + * Open your browser and navigate to `http://localhost:8000` (or the appropriate port). + +2. **Test Authentication:** + * Since the example uses a dummy login, you'll need to either implement a full Supabase Auth UI or manually create a user in your Supabase dashboard and log in via the browser console to get a session. + * Once logged in, your email should appear, and the "Your Orders" section should be visible. + +3. **Test Checkout:** + * Click on a "Choose Plan" button. + * Check the browser's console. You should see a log message indicating a redirect would happen. + * If you have implemented the Supabase Edge Function, you should be redirected to the Stripe Checkout page. + +4. **Test Order History:** + * After a successful (test) payment, you'll need a mechanism (like a Stripe webhook) to write the order details back to your Supabase `orders` table. + * Once an order is in the table for the logged-in user, it should appear in the "Your Orders" section. \ No newline at end of file diff --git a/index.html b/index.html index d2b0850..2ebc0c9 100644 --- a/index.html +++ b/index.html @@ -1,121 +1,63 @@ - + - NutriPlan - Программа 'Фитнес' + NutriPlan - Your Personal Meal Plan + - - + -
-
- Пример блюда из программы 'Фитнес' +
+

NutriPlan

+
+
- -
-
-

Программа питания 'Фитнес'

-

Идеальный баланс для поддержания формы и достижения спортивных результатов. Начните свой путь к здоровью уже сегодня!

-
- -
- -
- 1. Калорийность -
- - - -
-
- - -
- 2. Количество приемов пищи -
- - - -
-
- - -
- 3. Продолжительность -
- - - - -
-
- - -
- 4. Дополнительно -
- - -
-
-
- -
-
- Цена за день: - 1000 ₽ +
+ +
+ + +
+

Our Plans

+
+ +
+

Basic Plan

+

$9.99/month

+

Get a personalized weekly meal plan.

+
-
- Итоговая стоимость: - 5000 ₽ +
+

Premium Plan

+

$19.99/month

+

Weekly meal plan + personal nutritionist chat.

+
- - - -
+
+ +
+
+

© 2024 NutriPlan. All rights reserved.

+
+ + + + \ No newline at end of file diff --git a/jules-scratch/verification/verification.png b/jules-scratch/verification/verification.png new file mode 100644 index 0000000000000000000000000000000000000000..ea2b1613f64635cf7f58e7bc6ca57c2a6f7b0291 GIT binary patch literal 29582 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 literal 0 HcmV?d00001 diff --git a/jules-scratch/verification/verify_nutriplan.py b/jules-scratch/verification/verify_nutriplan.py new file mode 100644 index 0000000..d858671 --- /dev/null +++ b/jules-scratch/verification/verify_nutriplan.py @@ -0,0 +1,19 @@ +from playwright.sync_api import sync_playwright, Page, expect + +def run(playwright): + browser = playwright.chromium.launch(headless=True) + page = browser.new_page() + + # Navigate to the local server + page.goto("http://localhost:8000") + + # Wait for the main heading to be visible to ensure the page is loaded + expect(page.get_by_role("heading", name="NutriPlan")).to_be_visible() + + # Take a screenshot + page.screenshot(path="jules-scratch/verification/verification.png") + + browser.close() + +with sync_playwright() as playwright: + run(playwright) \ No newline at end of file diff --git a/script.js b/script.js index 80d0561..c782f00 100644 --- a/script.js +++ b/script.js @@ -1,61 +1,191 @@ -document.addEventListener('DOMContentLoaded', () => { - const form = document.getElementById('nutriplan-form'); - if (!form) return; - - const pricePerDayEl = document.getElementById('price-per-day'); - const totalPriceEl = document.getElementById('total-price'); - - // --- CONFIGURATION --- - const BASE_PRICE_PER_DAY = 1000; - - const calculateAndDisplayPrice = () => { - // --- GATHER DATA --- - const formData = new FormData(form); - - const caloriesValue = form.querySelector('input[name="calories"]:checked').value; - const calorieModifier = parseInt(form.querySelector('input[name="calories"]:checked').dataset.modifier, 10); - - const mealsValue = form.querySelector('input[name="meals"]:checked').value; - const mealsModifier = parseInt(form.querySelector('input[name="meals"]:checked').dataset.modifier, 10); - - const durationInDays = parseInt(form.querySelector('input[name="duration"]:checked').value, 10); - - let totalExtras = 0; - const extraOptions = []; - form.querySelectorAll('input[name="extras"]:checked').forEach(el => { - totalExtras += parseInt(el.dataset.modifier, 10); - extraOptions.push(el.value); - }); - - // --- CALCULATE PRICE --- - const pricePerDay = BASE_PRICE_PER_DAY + calorieModifier + mealsModifier; - const totalPrice = (pricePerDay * durationInDays) + totalExtras; - - // --- DISPLAY PRICE --- - pricePerDayEl.textContent = `${pricePerDay} ₽`; - totalPriceEl.textContent = `${totalPrice} ₽`; - - return { - calories: caloriesValue, - meals: mealsValue, - duration: durationInDays, - extras: extraOptions, - pricePerDay: pricePerDay, - totalPrice: totalPrice - }; - }; - - // --- EVENT LISTENERS --- - form.addEventListener('change', calculateAndDisplayPrice); - - form.addEventListener('submit', (e) => { - e.preventDefault(); - const finalSelection = calculateAndDisplayPrice(); - console.log("--- NutriPlan Order ---"); - console.log(JSON.stringify(finalSelection, null, 2)); - alert('Заказ оформлен! Проверьте детали в консоли разработчика.'); +// ----------------------------------------------------------------------------- +// Configuration +// ----------------------------------------------------------------------------- +// IMPORTANT: Replace these with your actual Supabase and Stripe keys. +// These are placeholders and will not work. +// You can get your keys from the Supabase and Stripe dashboards. + +const SUPABASE_URL = 'YOUR_SUPABASE_URL'; // e.g., 'https://your-project-id.supabase.co' +const SUPABASE_ANON_KEY = 'YOUR_SUPABASE_ANON_KEY'; // The public "anon" key +const STRIPE_PUBLISHABLE_KEY = 'YOUR_STRIPE_PUBLISHABLE_KEY'; // The public "pk_test_..." key + +// ----------------------------------------------------------------------------- +// Initialize Clients +// ----------------------------------------------------------------------------- +// Check if the placeholder keys have been replaced. If not, show an alert. +if (SUPABASE_URL === 'YOUR_SUPABASE_URL' || SUPABASE_ANON_KEY === 'YOUR_SUPABASE_ANON_KEY' || STRIPE_PUBLISHABLE_KEY === 'YOUR_STRIPE_PUBLISHABLE_KEY') { + alert('Please replace the placeholder API keys in script.js with your actual Supabase and Stripe keys.'); +} + +// Initialize the Supabase client +const supabase = supabase.createClient(SUPABASE_URL, SUPABASE_ANON_KEY); + +// Initialize the Stripe client +const stripe = Stripe(STRIPE_PUBLISHABLE_KEY); + +// ----------------------------------------------------------------------------- +// DOM Element References +// ----------------------------------------------------------------------------- +const authContainer = document.getElementById('auth-container'); +const userInfoSection = document.getElementById('user-info'); +const userEmailElement = document.getElementById('user-email'); +const logoutButton = document.getElementById('logout-button'); +const productsSection = document.getElementById('products'); +const ordersSection = document.getElementById('orders'); +const orderList = document.getElementById('order-list'); +const checkoutButtons = document.querySelectorAll('.checkout-button'); + +// ----------------------------------------------------------------------------- +// Authentication Handling (Supabase) +// ----------------------------------------------------------------------------- + +// Function to set up the Supabase Auth UI +const setupAuthUI = () => { + // This is a simplified example. For a real app, you might use Supabase's pre-built UI components + // or create your own form to call supabase.auth.signInWithPassword() or signUp(). + // For this example, we'll simulate a login/logout flow. + authContainer.innerHTML = ` +

Login to see your orders and purchase plans.

+ + + `; + // Dummy login for demonstration + document.getElementById('login-button-dummy').addEventListener('click', () => { + // In a real app, you'd get email/password from a form + // const { user, error } = await supabase.auth.signInWithPassword({ email, password }); + alert("This is a dummy login. In a real app, you would integrate Supabase's authentication UI or build your own login form."); }); +}; + +// Function to update the UI based on the user's auth state +const updateUI = async (user) => { + if (user) { + // User is logged in + authContainer.classList.add('hidden'); + userInfoSection.classList.remove('hidden'); + ordersSection.classList.remove('hidden'); + productsSection.style.display = 'block'; // Show products + + userEmailElement.textContent = user.email; + await fetchOrders(user.id); + } else { + // User is logged out + authContainer.classList.remove('hidden'); + userInfoSection.classList.add('hidden'); + ordersSection.classList.add('hidden'); + productsSection.style.display = 'block'; // Still show products + + userEmailElement.textContent = ''; + orderList.innerHTML = '
  • Login to see your past orders.
    • '; + } +}; + +// Listen for authentication state changes +supabase.auth.onAuthStateChange((event, session) => { + const user = session?.user || null; + updateUI(user); +}); + +// Handle logout +logoutButton.addEventListener('click', async () => { + const { error } = await supabase.auth.signOut(); + if (error) { + console.error('Error logging out:', error); + } +}); + +// ----------------------------------------------------------------------------- +// Stripe Checkout Integration +// ----------------------------------------------------------------------------- + +// Add event listeners to all "Choose Plan" buttons +checkoutButtons.forEach(button => { + button.addEventListener('click', async (event) => { + const user = supabase.auth.user(); + if (!user) { + alert('Please log in before making a purchase.'); + return; + } + + const productId = event.target.closest('.product-card').dataset.productId; + + // This is where you would call a serverless function (e.g., a Supabase Edge Function) + // to create a Stripe Checkout session. + // The client should NOT create the session directly for security reasons. + // The function would take the product ID and user ID. + + // --- Example of calling a Supabase Function --- + // const { data, error } = await supabase.functions.invoke('create-checkout-session', { + // body: { productId: productId } + // }); + // if (error) { + // console.error('Error creating checkout session:', error); + // alert('Could not create checkout session.'); + // return; + // } + // const { sessionId } = data; + // --------------------------------------------- + + // For this example, we'll simulate the redirect to Stripe Checkout. + console.log(`Redirecting to Stripe Checkout for product: ${productId}`); + alert(`This is a demo. In a real application, you would be redirected to Stripe to purchase product ID: ${productId}. This requires a backend (like a Supabase Function) to securely create the session.`); + + // --- This is the code you'd use with a real session ID --- + // const { error: stripeError } = await stripe.redirectToCheckout({ + // sessionId: sessionId + // }); + // if (stripeError) { + // console.error('Stripe redirect error:', stripeError); + // } + // --------------------------------------------------------- + }); +}); + + +// ----------------------------------------------------------------------------- +// Order Management (Supabase Database) +// ----------------------------------------------------------------------------- + +// Fetches and displays orders for the logged-in user +const fetchOrders = async (userId) => { + // Assumes you have a table named 'orders' with columns like 'id', 'user_id', 'product_name', 'created_at' + const { data: orders, error } = await supabase + .from('orders') + .select('*') + .eq('user_id', userId) + .order('created_at', { ascending: false }); + + if (error) { + console.error('Error fetching orders:', error); + orderList.innerHTML = '
  • Could not fetch orders.
    • '; + return; + } + + if (orders && orders.length > 0) { + orderList.innerHTML = orders.map(order => ` +
  • + Plan: ${order.product_name || 'N/A'}
    + Ordered on: ${new Date(order.created_at).toLocaleDateString()} +
    • + `).join(''); + } else { + orderList.innerHTML = '
  • You have no past orders.
    • '; + } +}; + +// ----------------------------------------------------------------------------- +// Initial Load +// ----------------------------------------------------------------------------- + +// Check the initial auth state when the page loads +const initializePage = async () => { + const { data: { session } } = await supabase.auth.getSession(); + const user = session?.user || null; + updateUI(user); + if (!user) { + setupAuthUI(); + } +}; - // --- INITIAL CALCULATION --- - calculateAndDisplayPrice(); -}); \ No newline at end of file +// Run initialization +document.addEventListener('DOMContentLoaded', initializePage); \ No newline at end of file diff --git a/server.log b/server.log new file mode 100644 index 0000000..e69de29 diff --git a/style.css b/style.css index 53d0365..263e86e 100644 --- a/style.css +++ b/style.css @@ -1,184 +1,221 @@ -/* --- CSS RESET & DEFAULTS --- */ +/* ------------------- */ +/* Basic Reset & Setup */ +/* ------------------- */ :root { - --primary-color: #4CAF50; - --secondary-color: #F5F5F5; - --text-heading: #333333; + --primary-green: #4CAF50; + --secondary-gray: #F5F5F5; + --text-headings: #333333; --text-body: #555555; - --accent-color: #FF9800; --white: #FFFFFF; - --border-color: #E0E0E0; - --font-heading: 'Montserrat', sans-serif; - --font-body: 'Lato', sans-serif; + --font-body: 'Open Sans', sans-serif; + --border-radius: 8px; } -*, -*::before, -*::after { - box-sizing: border-box; +* { margin: 0; padding: 0; + box-sizing: border-box; } body { font-family: var(--font-body); + font-weight: 400; color: var(--text-body); background-color: var(--white); line-height: 1.6; } -/* --- LAYOUT --- */ -.product-page { - display: grid; - max-width: 1200px; - margin: 0 auto; - padding: 20px; - gap: 40px; +/* ------------------- */ +/* Layout & Spacing */ +/* ------------------- */ +body, header, main, footer { + display: flex; + flex-direction: column; + align-items: center; } -@media (min-width: 992px) { - .product-page { - grid-template-columns: 1fr 1fr; - padding: 40px; - } +header, main, footer { + width: 100%; + padding: 2rem 1rem; } -/* --- COMPONENTS --- */ - -/* Product Gallery */ -.product-gallery { - width: 100%; - height: auto; - border-radius: 16px; - overflow: hidden; +main { + gap: 2rem; } -.product-gallery img { +section { width: 100%; - height: 100%; - object-fit: cover; + max-width: 900px; + background-color: var(--secondary-gray); + padding: 2rem; + border-radius: var(--border-radius); } -/* Calculator */ -.product-calculator { - display: flex; - flex-direction: column; +/* ------------------- */ +/* Typography */ +/* ------------------- */ +h1, h2 { + font-family: var(--font-heading); + font-weight: 700; + color: var(--text-headings); + text-align: center; + margin-bottom: 1rem; } -.calculator-header h1 { - font-family: var(--font-heading); +h1 { font-size: 2.5rem; - color: var(--text-heading); - margin-bottom: 10px; + color: var(--primary-green); } -.calculator-header p { - font-size: 1.1rem; - margin-bottom: 30px; +h2 { + font-size: 2rem; + border-bottom: 2px solid var(--primary-green); + padding-bottom: 0.5rem; + margin-bottom: 1.5rem; } -/* Form Styling */ -#nutriplan-form { - display: flex; - flex-direction: column; - gap: 25px; +h3 { + font-family: var(--font-heading); + font-weight: 700; + color: var(--text-headings); + font-size: 1.5rem; +} + +p { + margin-bottom: 1rem; } -.form-step { +/* ------------------- */ +/* Components */ +/* ------------------- */ +button, .checkout-button { + font-family: var(--font-body); + background-color: var(--primary-green); + color: var(--white); border: none; + padding: 12px 24px; + border-radius: var(--border-radius); + cursor: pointer; + font-size: 1rem; + font-weight: bold; + text-align: center; + transition: background-color 0.3s ease, transform 0.2s ease; } -.form-step legend { - font-family: var(--font-heading); - font-size: 1.2rem; - font-weight: 700; - color: var(--text-heading); - margin-bottom: 15px; +button:hover, .checkout-button:hover { + background-color: #45a049; /* Slightly darker green */ + transform: translateY(-2px); } -.options-group { - display: grid; - grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); - gap: 15px; +.hidden { + display: none !important; } -/* Visually Hidden Input */ -.options-group input[type="radio"], -.options-group input[type="checkbox"] { - opacity: 0; - position: absolute; - width: 0; - height: 0; +/* Auth Container (Supabase UI) */ +#auth-container { + width: 100%; + max-width: 400px; + margin: 1rem auto; } -.option-card { - display: flex; - align-items: center; - justify-content: center; - padding: 20px 15px; - border-radius: 8px; - border: 2px solid var(--border-color); - background-color: var(--white); - cursor: pointer; - transition: all 0.2s ease-in-out; +/* User Info Section */ +#user-info { text-align: center; - font-weight: 600; } -.options-group input:hover + .option-card { - border-color: var(--primary-color); +#user-email { + font-weight: bold; + color: var(--primary-green); } -.options-group input:checked + .option-card { - background-color: #e8f5e9; /* Light green */ - border-color: var(--primary-color); - color: var(--primary-color); - box-shadow: 0 4px 12px rgba(76, 175, 80, 0.2); +#logout-button { + margin-top: 1rem; + background-color: #f44336; /* Red for logout */ } -/* Price Display */ -.price-display { - margin-top: 30px; - padding: 20px; - background-color: var(--secondary-color); - border-radius: 8px; +#logout-button:hover { + background-color: #d32f2f; } -.price-item, .price-total { - display: flex; - justify-content: space-between; - align-items: center; - font-size: 1.1rem; +/* Products Section */ +.product-grid { + display: grid; + grid-template-columns: 1fr; /* Mobile-first: single column */ + gap: 1.5rem; } -.price-total { - margin-top: 10px; - font-weight: 700; - font-size: 1.5rem; - color: var(--text-heading); +.product-card { + background-color: var(--white); + border: 1px solid #ddd; + border-radius: var(--border-radius); + padding: 1.5rem; + text-align: center; + box-shadow: 0 4px 8px rgba(0,0,0,0.1); + transition: transform 0.3s ease, box-shadow 0.3s ease; } -#price-per-day, #total-price { - font-family: var(--font-heading); +.product-card:hover { + transform: translateY(-5px); + box-shadow: 0 8px 16px rgba(0,0,0,0.15); +} + +.product-card .price { + font-size: 1.8rem; + font-weight: bold; + color: var(--primary-green); + margin: 0.5rem 0; } -/* CTA Button */ -.cta-button { - margin-top: 30px; - padding: 20px; +.product-card .checkout-button { width: 100%; - background-color: var(--primary-color); + margin-top: 1rem; +} + +/* Orders Section */ +#order-list { + list-style: none; +} + +#order-list li { + background-color: var(--white); + padding: 1rem; + border-radius: var(--border-radius); + margin-bottom: 0.5rem; + border-left: 5px solid var(--primary-green); +} + +/* Footer */ +footer { + text-align: center; + margin-top: 2rem; + padding: 1rem; + background-color: var(--text-headings); color: var(--white); - font-family: var(--font-heading); - font-size: 1.2rem; - font-weight: 700; - border: none; - border-radius: 8px; - cursor: pointer; - transition: background-color 0.2s ease, box-shadow 0.2s ease; } -.cta-button:hover { - background-color: #45a049; /* Darker green */ - box-shadow: 0 8px 15px rgba(0, 0, 0, 0.15); +/* ------------------- */ +/* Media Queries */ +/* ------------------- */ +@media (min-width: 768px) { + /* Two-column layout for product grid on desktop */ + .product-grid { + grid-template-columns: repeat(2, 1fr); + } + + /* Two-column layout for main content on desktop */ + main { + flex-direction: row; + flex-wrap: wrap; + justify-content: center; + align-items: flex-start; + } + + section#products { + flex-basis: 60%; + } + + section#user-info, section#orders { + flex-basis: 35%; + } } \ No newline at end of file