Sarah
05dd55e0b6
Full vanilla HTML/CSS/JS consumer app with mobile-first responsive design. Pages: feed (index), post meal, trades, messages inbox, chat, landing page, and admin login skeleton. Uses Ava's design tokens throughout. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
183 lines
8.7 KiB
HTML
183 lines
8.7 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Post a Meal — GrubFlip</title>
|
|
<meta name="theme-color" content="#FF6B35">
|
|
<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=Plus+Jakarta+Sans:wght@600;700;800&family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
|
|
<link rel="stylesheet" href="css/styles.css">
|
|
</head>
|
|
<body>
|
|
|
|
<!-- Header -->
|
|
<header class="gf-header">
|
|
<a href="index.html" class="btn btn--ghost btn--icon" aria-label="Back to feed">
|
|
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="15 18 9 12 15 6"/></svg>
|
|
</a>
|
|
<h1 style="font-size:1.125rem;font-family:var(--gf-font-heading);">Post a Meal</h1>
|
|
<div style="width:36px"></div>
|
|
</header>
|
|
|
|
<!-- Post Form -->
|
|
<main style="padding:1rem 0 5rem;">
|
|
<div class="container">
|
|
<form id="post-meal-form" novalidate>
|
|
|
|
<!-- Image Upload -->
|
|
<div class="form-group">
|
|
<label class="form-label">Photo</label>
|
|
<div class="upload-zone" id="upload-zone" role="button" tabindex="0" aria-label="Upload meal photo">
|
|
<div class="upload-zone__prompt">
|
|
<svg class="upload-zone__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
|
|
<rect x="3" y="3" width="18" height="18" rx="2" ry="2"/>
|
|
<circle cx="8.5" cy="8.5" r="1.5"/>
|
|
<polyline points="21 15 16 10 5 21"/>
|
|
</svg>
|
|
<p class="upload-zone__text">Tap to add a photo</p>
|
|
<p class="upload-zone__hint">JPG, PNG, or WebP · Max 20MB</p>
|
|
</div>
|
|
<div class="upload-zone__preview">
|
|
<img id="upload-preview-img" src="" alt="Meal preview">
|
|
<button type="button" class="btn--remove" aria-label="Remove photo">×</button>
|
|
</div>
|
|
</div>
|
|
<input type="file" id="image-input" accept="image/jpeg,image/png,image/webp" class="visually-hidden">
|
|
</div>
|
|
|
|
<!-- Title -->
|
|
<div class="form-group">
|
|
<label class="form-label" for="meal-title">What did you make?</label>
|
|
<input type="text" id="meal-title" class="form-input" placeholder="e.g. Chicken Parm with Penne" maxlength="100" required>
|
|
</div>
|
|
|
|
<!-- Description -->
|
|
<div class="form-group">
|
|
<label class="form-label" for="meal-description">
|
|
Description <small>(optional details)</small>
|
|
</label>
|
|
<textarea id="meal-description" class="form-textarea" placeholder="Fresh tonight, extra mozzarella. Feeds one." maxlength="300" rows="3"></textarea>
|
|
<p id="desc-counter" style="text-align:right;font-size:0.75rem;color:var(--gf-neutral-400);margin-top:0.25rem;">0/300</p>
|
|
</div>
|
|
|
|
<!-- Dietary Tags -->
|
|
<div class="form-group">
|
|
<label class="form-label">Dietary Tags <small>(select all that apply)</small></label>
|
|
<div class="tag-picker" role="group" aria-label="Dietary tags">
|
|
<input type="checkbox" class="tag-picker__option" id="tag-vegan" value="vegan">
|
|
<label class="tag-picker__label" for="tag-vegan">Vegan</label>
|
|
|
|
<input type="checkbox" class="tag-picker__option" id="tag-vegetarian" value="vegetarian">
|
|
<label class="tag-picker__label" for="tag-vegetarian">Vegetarian</label>
|
|
|
|
<input type="checkbox" class="tag-picker__option" id="tag-gluten-free" value="gluten-free">
|
|
<label class="tag-picker__label" for="tag-gluten-free">Gluten-Free</label>
|
|
|
|
<input type="checkbox" class="tag-picker__option" id="tag-dairy" value="dairy">
|
|
<label class="tag-picker__label" for="tag-dairy">Dairy</label>
|
|
|
|
<input type="checkbox" class="tag-picker__option" id="tag-dairy-free" value="dairy-free">
|
|
<label class="tag-picker__label" for="tag-dairy-free">Dairy-Free</label>
|
|
|
|
<input type="checkbox" class="tag-picker__option" id="tag-nut-free" value="nut-free">
|
|
<label class="tag-picker__label" for="tag-nut-free">Nut-Free</label>
|
|
|
|
<input type="checkbox" class="tag-picker__option" id="tag-halal" value="halal">
|
|
<label class="tag-picker__label" for="tag-halal">Halal</label>
|
|
|
|
<input type="checkbox" class="tag-picker__option" id="tag-kosher" value="kosher">
|
|
<label class="tag-picker__label" for="tag-kosher">Kosher</label>
|
|
|
|
<input type="checkbox" class="tag-picker__option" id="tag-high-protein" value="high-protein">
|
|
<label class="tag-picker__label" for="tag-high-protein">High-Protein</label>
|
|
|
|
<input type="checkbox" class="tag-picker__option" id="tag-low-carb" value="low-carb">
|
|
<label class="tag-picker__label" for="tag-low-carb">Low-Carb</label>
|
|
|
|
<input type="checkbox" class="tag-picker__option" id="tag-spicy" value="spicy">
|
|
<label class="tag-picker__label" for="tag-spicy">Spicy 🌶️</label>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Cuisine -->
|
|
<div class="form-group">
|
|
<label class="form-label" for="cuisine-select">Cuisine</label>
|
|
<select id="cuisine-select" class="form-select">
|
|
<option value="">Select cuisine type...</option>
|
|
<option value="Italian">Italian</option>
|
|
<option value="Mexican">Mexican</option>
|
|
<option value="Chinese">Chinese</option>
|
|
<option value="Japanese">Japanese</option>
|
|
<option value="Indian">Indian</option>
|
|
<option value="Thai">Thai</option>
|
|
<option value="Mediterranean">Mediterranean</option>
|
|
<option value="American">American</option>
|
|
<option value="Korean">Korean</option>
|
|
<option value="Vietnamese">Vietnamese</option>
|
|
<option value="French">French</option>
|
|
<option value="Middle Eastern">Middle Eastern</option>
|
|
<option value="Caribbean">Caribbean</option>
|
|
<option value="Ethiopian">Ethiopian</option>
|
|
<option value="Other">Other</option>
|
|
</select>
|
|
</div>
|
|
|
|
<!-- Portion + Trade Type Row -->
|
|
<div style="display:grid;grid-template-columns:1fr 1fr;gap:0.75rem;">
|
|
<div class="form-group">
|
|
<label class="form-label" for="portion-select">Portion</label>
|
|
<select id="portion-select" class="form-select">
|
|
<option value="single">Single serving</option>
|
|
<option value="double">Two servings</option>
|
|
<option value="family">Family size</option>
|
|
</select>
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="form-label" for="trade-type-select">Trade Type</label>
|
|
<select id="trade-type-select" class="form-select">
|
|
<option value="swap">Swap</option>
|
|
<option value="gift">Gift (free)</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Expires -->
|
|
<div class="form-group">
|
|
<label class="form-label" for="expires-select">Available for pickup within</label>
|
|
<select id="expires-select" class="form-select" required></select>
|
|
</div>
|
|
|
|
<!-- Submit -->
|
|
<button type="submit" id="submit-btn" class="btn btn--primary btn--lg btn--block">
|
|
Post Meal
|
|
</button>
|
|
</form>
|
|
</div>
|
|
</main>
|
|
|
|
<!-- Bottom Nav -->
|
|
<nav class="gf-bottom-nav" aria-label="Main navigation">
|
|
<a href="index.html" class="gf-bottom-nav__item">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 9l9-7 9 7v11a2 2 0 01-2 2H5a2 2 0 01-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>
|
|
Feed
|
|
</a>
|
|
<a href="post.html" class="gf-bottom-nav__item active" aria-current="page">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="16"/><line x1="8" y1="12" x2="16" y2="12"/></svg>
|
|
Post
|
|
</a>
|
|
<a href="trades.html" class="gf-bottom-nav__item">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M7 16l-4-4m0 0l4-4m-4 4h18M17 8l4 4m0 0l-4 4m4-4H3"/></svg>
|
|
Trades
|
|
</a>
|
|
<button class="gf-bottom-nav__item" aria-label="Profile">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20 21v-2a4 4 0 00-4-4H8a4 4 0 00-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>
|
|
Profile
|
|
</button>
|
|
</nav>
|
|
|
|
<script src="js/app.js"></script>
|
|
<script src="js/post.js"></script>
|
|
</body>
|
|
</html>
|