← back to SmokeShop
public/index.html
283 lines
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SmokeShop — Instagram Content Manager</title>
<link rel="stylesheet" href="/css/styles.css">
</head>
<body>
<!-- Spreadsheet Banner -->
<div class="spreadsheet-banner">
<a href="https://docs.google.com/spreadsheets/d/1FrGZRWdisWpPIKK1zx6uHstRuidtUOua/edit?usp=sharing&ouid=118338764009699775321&rtpof=true&sd=true" target="_blank" rel="noopener noreferrer">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="vertical-align:middle;margin-right:8px"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/></svg>
View Full Content Calendar Spreadsheet (Google Sheets)
</a>
</div>
<!-- Header -->
<div class="header">
<h1>SMOKE & VAPE DEPOT <span>Instagram Content Manager</span></h1>
<div class="header-actions">
<div class="ig-status">
<div class="dot"></div>
<span>Instagram:</span>
<span>Not Connected</span>
</div>
<button class="btn btn-sm btn-secondary" onclick="showIGOptions()">Connect Instagram</button>
</div>
</div>
<!-- Instagram Connect Modal -->
<div class="ig-connect-overlay" id="ig-connect-overlay">
<div class="ig-connect-modal">
<h3>Connect Instagram</h3>
<p style="color:var(--text-muted);font-size:13px;margin-bottom:16px">Choose how to connect your Instagram account:</p>
<div style="display:flex;flex-direction:column;gap:12px">
<button class="btn btn-primary" onclick="igLoginStandard()" style="padding:14px 20px;font-size:15px;border-radius:10px;text-align:left">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="vertical-align:middle;margin-right:10px"><rect x="2" y="2" width="20" height="20" rx="5" ry="5"/><path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"/><line x1="17.5" y1="6.5" x2="17.5" y2="6.5"/></svg>
Login to Instagram (Standard)
<div style="font-size:11px;color:var(--text-muted);margin-top:4px;margin-left:30px">Log into your Instagram account in a new tab to post manually</div>
</button>
<button class="btn btn-warning" onclick="igConnectAPI()" style="padding:14px 20px;font-size:15px;border-radius:10px;text-align:left;color:#000">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="vertical-align:middle;margin-right:10px"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>
Connect via Meta API (Auto-Post)
<div style="font-size:11px;color:rgba(0,0,0,0.5);margin-top:4px;margin-left:30px">Authorize via Meta Business to enable scheduled auto-posting</div>
</button>
</div>
<button class="btn btn-secondary btn-sm" onclick="closeIGModal()" style="margin-top:16px;width:100%">Cancel</button>
</div>
</div>
<div class="container">
<!-- Store Details (Collapsible) -->
<details class="store-details">
<summary>
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="vertical-align:middle;margin-right:6px"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>
Store Profile & AI Context
</summary>
<div class="store-details-content">
<div class="store-detail-grid">
<div class="store-detail-section">
<h4>About the Store</h4>
<p><strong>Smoke & Vape Depot</strong></p>
<p>6100 Reseda Blvd, Reseda, CA 91335</p>
<p>San Fernando Valley • 818 Area Code</p>
<p>Open late every night until 12 AM</p>
<p style="color:var(--text-muted);font-size:12px;margin-top:8px">Your neighborhood smoke shop serving the local Reseda community.</p>
</div>
<div class="store-detail-section">
<h4>Products We Carry</h4>
<div class="product-tags">
<span class="ptag papers">RAW</span>
<span class="ptag papers">Elements</span>
<span class="ptag papers">Juicy Jay's</span>
<span class="ptag papers">Zig-Zag</span>
<span class="ptag papers">King Palm</span>
<span class="ptag lighters">Clipper</span>
<span class="ptag lighters">Zippo</span>
<span class="ptag lighters">BIC</span>
<span class="ptag glass">GRAV Labs</span>
<span class="ptag glass">MAV Glass</span>
<span class="ptag glass">Diamond Glass</span>
<span class="ptag cbd">Charlotte's Web</span>
<span class="ptag cbd">cbdMD</span>
<span class="ptag acc">Santa Cruz Shredder</span>
<span class="ptag acc">Cali Crusher</span>
<span class="ptag acc">Formula 420</span>
</div>
</div>
<div class="store-detail-section">
<h4>Neighborhood</h4>
<p>Next to Wingstop (6048 Reseda Blvd)</p>
<p>Reseda — diverse, working-class SFValley neighborhood</p>
<p>Nearby: barbershops, taquerias, Reseda Park, Sherman Way corridor</p>
<p style="color:var(--text-muted);font-size:12px;margin-top:8px">We support local businesses and community events.</p>
</div>
<div class="store-detail-section">
<h4>Brand Voice</h4>
<p>Friendly, authentic, neighborhood vibe</p>
<p>"Your local smoke shop" — approachable, knowledgeable</p>
<p>Emphasize craft/art side of glassware, community connection</p>
<h4 style="margin-top:12px;color:var(--danger)">Instagram Compliance</h4>
<p>NEVER reference smoking, vaping, or inhaling</p>
<p>NEVER make health claims about CBD</p>
<p>NEVER target minors — always "21+ only"</p>
<p style="color:var(--success)">OK: packaging, shelves, glassware as art, CBD, accessories, store interior</p>
</div>
</div>
<p style="color:var(--text-muted);font-size:11px;margin-top:12px;text-align:center">This context is sent to Gemini AI when generating posts from photos. Edit in Settings or CLAUDE.md.</p>
</div>
</details>
<!-- Stats -->
<div class="stats-bar">
<div class="stat-card"><div class="value" id="stat-total">0</div><div class="label">Total Posts</div></div>
<div class="stat-card"><div class="value" id="stat-draft">0</div><div class="label">Drafts</div></div>
<div class="stat-card"><div class="value" id="stat-scheduled">0</div><div class="label">Scheduled</div></div>
<div class="stat-card"><div class="value" id="stat-posted">0</div><div class="label">Posted</div></div>
<div class="stat-card"><div class="value" id="stat-images">0</div><div class="label">With Image</div></div>
</div>
<!-- Tabs -->
<div class="tabs">
<button class="tab active" data-tab="calendar" onclick="switchTab('calendar')">Calendar</button>
<button class="tab" data-tab="posts" onclick="switchTab('posts')">All Posts</button>
<button class="tab" data-tab="settings" onclick="switchTab('settings')">Settings</button>
</div>
<!-- Quick Photo Capture -->
<div class="quick-photo">
<label class="btn btn-lg btn-primary" style="cursor:pointer;font-size:16px;padding:16px 32px;border-radius:12px">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="vertical-align:middle;margin-right:6px"><path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z"/><circle cx="12" cy="13" r="4"/></svg>
Take Photo
<input type="file" accept="image/*" capture="environment" id="quick-camera" style="display:none" onchange="quickPhoto(this)">
</label>
<label class="btn btn-lg btn-warning" style="cursor:pointer;font-size:16px;padding:16px 32px;border-radius:12px;color:#000">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="vertical-align:middle;margin-right:6px"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="17 8 12 3 7 8"/><line x1="12" y1="3" x2="12" y2="15"/></svg>
Upload Photo
<input type="file" accept="image/*" id="quick-upload" style="display:none" onchange="quickPhoto(this)">
</label>
</div>
<!-- Calendar Tab -->
<div class="tab-content active" id="tab-calendar">
<div class="calendar-controls">
<button class="btn btn-primary" onclick="generateCalendar()">Generate 8-Week Calendar</button>
<button class="btn btn-warning" onclick="generateAllImages()">Generate All Images (Gemini)</button>
<button class="btn btn-secondary" onclick="openNewPost()">+ New Post</button>
</div>
<div class="calendar-grid" id="calendar-grid"></div>
</div>
<!-- Posts Tab -->
<div class="tab-content" id="tab-posts">
<div class="calendar-controls">
<button class="btn btn-secondary" onclick="openNewPost()">+ New Post</button>
<button class="btn btn-warning" onclick="generateAllImages()">Generate All Images</button>
</div>
<div class="post-list" id="post-list"></div>
</div>
<!-- Settings Tab -->
<div class="tab-content" id="tab-settings">
<div class="settings-grid">
<div class="settings-section">
<h3>Store Info</h3>
<div class="form-group">
<label>Store Name</label>
<input type="text" id="setting-store_name" value="Smoke & Vape Depot">
</div>
<div class="form-group">
<label>Store Address</label>
<input type="text" id="setting-store_address" value="6100 Reseda Blvd, Reseda CA">
</div>
<div class="form-group">
<label>App URL</label>
<input type="text" id="setting-app_url" value="http://45.61.58.125:8401">
</div>
</div>
<div class="settings-section">
<h3>Instagram / Meta API</h3>
<div class="form-group">
<label>Meta App ID</label>
<input type="text" id="setting-ig_app_id" placeholder="Enter Meta App ID">
</div>
<div class="form-group">
<label>Meta App Secret</label>
<input type="password" id="setting-ig_app_secret" placeholder="Enter Meta App Secret">
</div>
<div class="form-group">
<label>Instagram Status</label>
<p style="color:var(--text-muted);font-size:13px;padding:8px 0">
Configure your Meta App ID and Secret above, then click "Connect Instagram" in the header to authorize.
</p>
</div>
<button class="btn btn-primary" onclick="saveSettings()">Save Settings</button>
</div>
</div>
</div>
</div>
<!-- Post Editor Modal -->
<div class="modal-overlay" id="modal-overlay">
<div class="modal">
<h2>Edit Post</h2>
<div class="preview-container">
<div class="preview-image" id="preview-img" style="position:relative">
<div class="placeholder">No image generated yet.</div>
</div>
<div class="preview-details">
<div class="form-group">
<label>Title (4 words max)</label>
<input type="text" id="edit-title" placeholder="New Glass Just Arrived" maxlength="60">
</div>
<div class="form-row">
<div class="form-group">
<label>Template</label>
<select id="edit-template">
<option value="a">A — Dark/Red</option>
<option value="b">B — Dark/Orange</option>
</select>
</div>
<div class="form-group">
<label>Category</label>
<select id="edit-category">
<option value="community">Community</option>
<option value="product">Product</option>
<option value="promo">Promo</option>
</select>
</div>
</div>
<div class="form-row">
<div class="form-group">
<label>Schedule</label>
<input type="datetime-local" id="edit-schedule">
</div>
<div class="form-group">
<label>Status</label>
<select id="edit-status">
<option value="draft">Draft</option>
<option value="scheduled">Scheduled</option>
<option value="posted">Posted</option>
<option value="failed">Failed</option>
</select>
</div>
</div>
<div style="display:flex;gap:6px;margin-bottom:10px;flex-wrap:wrap">
<button class="btn btn-sm btn-primary" onclick="generateImage()">Generate Image</button>
<button class="btn btn-sm btn-secondary" onclick="generateCaption()">AI Caption</button>
<label class="btn btn-sm btn-warning" style="cursor:pointer">
Take Photo
<input type="file" accept="image/*" capture="environment" id="camera-input" style="display:none" onchange="uploadPhoto(this)">
</label>
<label class="btn btn-sm btn-secondary" style="cursor:pointer">
Upload
<input type="file" accept="image/*" id="file-input" style="display:none" onchange="uploadPhoto(this)">
</label>
</div>
</div>
</div>
<div class="form-group">
<label>Caption (with hashtags)</label>
<textarea id="edit-caption" placeholder="Write your Instagram caption here..."></textarea>
</div>
<div class="modal-actions">
<button class="btn btn-danger btn-sm" onclick="deletePost()">Delete</button>
<button class="btn btn-success btn-sm" id="publish-btn" onclick="publishPost()">Publish Now</button>
<div style="flex:1"></div>
<button class="btn btn-secondary" onclick="closeModal()">Cancel</button>
<button class="btn btn-primary" onclick="savePost()">Save</button>
</div>
</div>
</div>
<!-- Toast Container -->
<div class="toast-container" id="toast-container"></div>
<script src="/js/app.js"></script>
</body>
</html>