← back to Designer Portfolio Pages
src/views/builder.ejs
83 lines
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>Mood Board Builder</title>
<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=Lora:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="/public/app.css" />
</head>
<body>
<main class="container">
<header class="header">
<h1>Designer Mood Board</h1>
<p class="muted">Search your Shopify catalog, add patterns to your mood board, and create a shareable link.</p>
</header>
<section class="card">
<h2>Find patterns</h2>
<div class="row">
<input id="patternQuery" class="input" placeholder="Search by product title (e.g., damask, vintage, linen)" />
<button id="searchBtn" class="btn">Search</button>
</div>
<div id="results" class="grid"></div>
</section>
<section class="card">
<h2>Your Mood Board <span id="selectedCount" class="muted"></span></h2>
<div id="selected" class="grid"></div>
<p class="muted" id="emptyHint">Search above and click "Add to Mood Board" to start building.</p>
</section>
<section class="card">
<h2>Designer info</h2>
<div class="form">
<label class="label">Portfolio title (optional)
<input id="title" class="input" placeholder="e.g., Warm Neutrals + Textures" />
</label>
<div class="row">
<label class="label">Name
<input id="contactName" class="input" placeholder="Jane Doe" />
</label>
<label class="label">Business (optional)
<input id="business" class="input" placeholder="Studio Doe Interiors" />
</label>
</div>
<div class="row">
<label class="label">Email
<input id="email" class="input" placeholder="jane@studio.com" />
</label>
<label class="label">Phone (optional)
<input id="phone" class="input" placeholder="+1 (555) 123-4567" />
</label>
</div>
<label class="label">Website (optional)
<input id="website" class="input" placeholder="https://studio.com" />
</label>
<label class="label">Password (optional)
<input id="password" class="input" type="password" placeholder="Leave blank for no password" />
</label>
<label class="checkbox">
<input id="generateAiIntro" type="checkbox" />
Generate a short AI intro paragraph (optional)
</label>
<button id="createBtn" class="btn primary" disabled>Create Mood Board Link</button>
<div id="share" class="share"></div>
</div>
</section>
</main>
<script src="/public/builder.js"></script>
</body>
</html>