Compare commits
6 commits
feature/in
...
main
| Author | SHA1 | Date | |
|---|---|---|---|
| fd4ebed84d | |||
|
|
5000d89ec3 | ||
|
|
f90275f631 | ||
|
|
b177fcccc0 | ||
|
|
23ec656c5d | ||
|
|
400cb4c9c7 |
3 changed files with 555 additions and 71 deletions
|
|
@ -1,13 +1,13 @@
|
||||||
const express = require('express');
|
const express = require('express');
|
||||||
const sqlite3 = require('sqlite3').verbose();
|
const sqlite3 = require('sqlite3').verbose();
|
||||||
const path = require('path');
|
const path = require('path');
|
||||||
|
const crypto = require('crypto');
|
||||||
const { sanitizeBody, validate } = require('./src/middleware/validation');
|
const { sanitizeBody, validate } = require('./src/middleware/validation');
|
||||||
|
|
||||||
// Amazon Affiliate Configuration
|
// Amazon Affiliate Configuration
|
||||||
const AFFILIATE_ID = process.env.AMAZON_ASSOCIATE_ID || 'greybeardhold-20';
|
const AFFILIATE_ID = process.env.AMAZON_ASSOCIATE_ID || 'greybeardhold-20';
|
||||||
|
|
||||||
const app = express();
|
const app = express();
|
||||||
const PORT = process.env.PORT || 3001;
|
|
||||||
|
|
||||||
// Middleware
|
// Middleware
|
||||||
app.use(express.json());
|
app.use(express.json());
|
||||||
|
|
@ -45,6 +45,8 @@ db.serialize(() => {
|
||||||
CREATE TABLE IF NOT EXISTS users (
|
CREATE TABLE IF NOT EXISTS users (
|
||||||
id INTEGER PRIMARY KEY AUTOINCREMENT,
|
id INTEGER PRIMARY KEY AUTOINCREMENT,
|
||||||
email TEXT UNIQUE NOT NULL,
|
email TEXT UNIQUE NOT NULL,
|
||||||
|
password_hash TEXT,
|
||||||
|
password_salt TEXT,
|
||||||
created_at DATETIME DEFAULT CURRENT_TIMESTAMP
|
created_at DATETIME DEFAULT CURRENT_TIMESTAMP
|
||||||
)
|
)
|
||||||
`);
|
`);
|
||||||
|
|
@ -99,15 +101,89 @@ db.serialize(() => {
|
||||||
FOREIGN KEY (product_id) REFERENCES products(id)
|
FOREIGN KEY (product_id) REFERENCES products(id)
|
||||||
)
|
)
|
||||||
`);
|
`);
|
||||||
|
// Auth tokens table
|
||||||
|
db.run(`
|
||||||
|
CREATE TABLE IF NOT EXISTS auth_tokens (
|
||||||
|
id INTEGER PRIMARY KEY AUTOINCREMENT,
|
||||||
|
user_id INTEGER NOT NULL,
|
||||||
|
token TEXT UNIQUE NOT NULL,
|
||||||
|
created_at DATETIME DEFAULT CURRENT_TIMESTAMP,
|
||||||
|
FOREIGN KEY (user_id) REFERENCES users(id)
|
||||||
|
)
|
||||||
|
`);
|
||||||
});
|
});
|
||||||
|
|
||||||
// Routes
|
// ─── Auth helpers ───
|
||||||
|
const generateToken = () => crypto.randomBytes(32).toString('hex');
|
||||||
|
|
||||||
|
const authenticate = (req, res, next) => {
|
||||||
|
const token = req.headers.authorization?.replace('Bearer ', '');
|
||||||
|
if (!token) return res.status(401).json({ error: 'Authentication required' });
|
||||||
|
|
||||||
|
db.get('SELECT user_id FROM auth_tokens WHERE token = ?', [token], (err, row) => {
|
||||||
|
if (err || !row) return res.status(401).json({ error: 'Invalid or expired token' });
|
||||||
|
req.userId = row.user_id;
|
||||||
|
next();
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
// ─── Routes ───
|
||||||
|
|
||||||
// Health check
|
// Health check
|
||||||
app.get('/api/health', (req, res) => {
|
app.get('/api/health', (req, res) => {
|
||||||
res.json({ status: 'ok', timestamp: new Date().toISOString() });
|
res.json({ status: 'ok', timestamp: new Date().toISOString() });
|
||||||
});
|
});
|
||||||
|
|
||||||
|
// Signup
|
||||||
|
app.post('/api/auth/signup', (req, res) => {
|
||||||
|
const { email, password } = req.body;
|
||||||
|
if (!email || !password) return res.status(400).json({ error: 'Email and password required' });
|
||||||
|
if (password.length < 8) return res.status(400).json({ error: 'Password must be at least 8 characters' });
|
||||||
|
|
||||||
|
const salt = crypto.randomBytes(16).toString('hex');
|
||||||
|
const hash = crypto.pbkdf2Sync(password, salt, 100000, 64, 'sha512').toString('hex');
|
||||||
|
|
||||||
|
db.run('INSERT INTO users (email, password_hash, password_salt) VALUES (?, ?, ?)', [email, hash, salt], function(err) {
|
||||||
|
if (err) {
|
||||||
|
if (err.message?.includes('UNIQUE')) return res.status(409).json({ error: 'Email already registered' });
|
||||||
|
return res.status(500).json({ error: 'Database error' });
|
||||||
|
}
|
||||||
|
const token = generateToken();
|
||||||
|
db.run('INSERT INTO auth_tokens (user_id, token) VALUES (?, ?)', [this.lastID, token], (err) => {
|
||||||
|
if (err) return res.status(500).json({ error: 'Database error' });
|
||||||
|
res.status(201).json({ userId: this.lastID, token });
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
// Login
|
||||||
|
app.post('/api/auth/login', (req, res) => {
|
||||||
|
const { email, password } = req.body;
|
||||||
|
if (!email || !password) return res.status(400).json({ error: 'Email and password required' });
|
||||||
|
|
||||||
|
db.get('SELECT * FROM users WHERE email = ?', [email], (err, user) => {
|
||||||
|
if (err || !user) return res.status(401).json({ error: 'Invalid email or password' });
|
||||||
|
|
||||||
|
const hash = crypto.pbkdf2Sync(password, user.password_salt, 100000, 64, 'sha512').toString('hex');
|
||||||
|
if (hash !== user.password_hash) return res.status(401).json({ error: 'Invalid email or password' });
|
||||||
|
|
||||||
|
const token = generateToken();
|
||||||
|
db.run('INSERT INTO auth_tokens (user_id, token) VALUES (?, ?)', [user.id, token], (err) => {
|
||||||
|
if (err) return res.status(500).json({ error: 'Database error' });
|
||||||
|
res.json({ userId: user.id, token });
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
// Logout
|
||||||
|
app.post('/api/auth/logout', authenticate, (req, res) => {
|
||||||
|
const token = req.headers.authorization?.replace('Bearer ', '');
|
||||||
|
db.run('DELETE FROM auth_tokens WHERE token = ?', [token], (err) => {
|
||||||
|
if (err) return res.status(500).json({ error: 'Database error' });
|
||||||
|
res.json({ success: true });
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
// Get all products
|
// Get all products
|
||||||
app.get('/api/products', (req, res) => {
|
app.get('/api/products', (req, res) => {
|
||||||
db.all('SELECT * FROM products', [], (err, rows) => {
|
db.all('SELECT * FROM products', [], (err, rows) => {
|
||||||
|
|
@ -160,8 +236,12 @@ app.post('/api/profiles', validate(require('./src/middleware/validation').schema
|
||||||
);
|
);
|
||||||
});
|
});
|
||||||
|
|
||||||
// Get style profile by user ID
|
// Get style profile by user ID (auth required)
|
||||||
app.get('/api/profile/:userId', (req, res) => {
|
app.get('/api/profile/:userId', authenticate, (req, res) => {
|
||||||
|
// Only allow fetching your own profile
|
||||||
|
if (parseInt(req.params.userId) !== req.userId) {
|
||||||
|
return res.status(403).json({ error: 'Access denied' });
|
||||||
|
}
|
||||||
db.get(
|
db.get(
|
||||||
'SELECT * FROM style_profiles WHERE user_id = ? ORDER BY created_at DESC LIMIT 1',
|
'SELECT * FROM style_profiles WHERE user_id = ? ORDER BY created_at DESC LIMIT 1',
|
||||||
[req.params.userId],
|
[req.params.userId],
|
||||||
|
|
@ -186,8 +266,8 @@ app.get('/api/profile/:userId', (req, res) => {
|
||||||
);
|
);
|
||||||
});
|
});
|
||||||
|
|
||||||
// Generate curated box
|
// Generate curated box (auth required)
|
||||||
app.post('/api/box', validate(require('./src/middleware/validation').schemas.box), (req, res) => {
|
app.post('/api/box', authenticate, validate(require('./src/middleware/validation').schemas.box), (req, res) => {
|
||||||
const { userId, preferredColors, stylePreferences, budget } = req.body;
|
const { userId, preferredColors, stylePreferences, budget } = req.body;
|
||||||
|
|
||||||
// Validate and default stylePreferences to empty array
|
// Validate and default stylePreferences to empty array
|
||||||
|
|
@ -205,72 +285,122 @@ app.post('/api/box', validate(require('./src/middleware/validation').schemas.box
|
||||||
|
|
||||||
const hardLines = JSON.parse(profile?.hard_lines || '[]');
|
const hardLines = JSON.parse(profile?.hard_lines || '[]');
|
||||||
|
|
||||||
// Get all products
|
// Get feedback to tune weights
|
||||||
db.all('SELECT * FROM products', [], (err, products) => {
|
db.all(
|
||||||
if (err) {
|
'SELECT * FROM feedback WHERE user_id = ?',
|
||||||
console.error('Error fetching products:', err);
|
[userId],
|
||||||
return res.status(500).json({ error: 'Database error' });
|
(err, feedbackRows) => {
|
||||||
|
if (err) {
|
||||||
|
console.error('Error fetching feedback:', err);
|
||||||
|
return res.status(500).json({ error: 'Database error' });
|
||||||
|
}
|
||||||
|
|
||||||
|
// Default v1 weights
|
||||||
|
const defaultWeights = { colorMatch: 25, styleMatch: 35, sizeFit: 20, priceFit: 20 };
|
||||||
|
|
||||||
|
// If enough feedback, tune weights based on what predicts "would keep"
|
||||||
|
let weights = defaultWeights;
|
||||||
|
if (feedbackRows.length >= 10) {
|
||||||
|
const kept = feedbackRows.filter(f => f.would_keep === 1);
|
||||||
|
const notKept = feedbackRows.filter(f => f.would_keep === 0 || f.would_keep === null);
|
||||||
|
|
||||||
|
if (kept.length > 0 && notKept.length > 0) {
|
||||||
|
const avgRating = (rows, field) => rows.reduce((sum, r) => sum + (r[field] || 3), 0) / rows.length;
|
||||||
|
|
||||||
|
const keptColor = avgRating(kept, 'color_rating');
|
||||||
|
const notKeptColor = avgRating(notKept, 'color_rating');
|
||||||
|
const keptStyle = avgRating(kept, 'style_rating');
|
||||||
|
const notKeptStyle = avgRating(notKept, 'style_rating');
|
||||||
|
const keptFit = avgRating(kept, 'fit_rating');
|
||||||
|
const notKeptFit = avgRating(notKept, 'fit_rating');
|
||||||
|
|
||||||
|
// Positive delta = this factor predicts keeping
|
||||||
|
const deltas = {
|
||||||
|
color: Math.max(0, keptColor - notKeptColor),
|
||||||
|
style: Math.max(0, keptStyle - notKeptStyle),
|
||||||
|
fit: Math.max(0, keptFit - notKeptFit)
|
||||||
|
};
|
||||||
|
|
||||||
|
const totalDelta = deltas.color + deltas.style + deltas.fit || 0.01;
|
||||||
|
const learningRate = Math.min(0.5, feedbackRows.length / 50);
|
||||||
|
|
||||||
|
// Blend: retain 80% of defaults, shift 20% toward feedback signals (max 50% shift)
|
||||||
|
const blend = (def, signal) => Math.round(def * (1 - learningRate) + (signal / totalDelta) * 80 * learningRate);
|
||||||
|
|
||||||
|
weights = {
|
||||||
|
colorMatch: blend(defaultWeights.colorMatch, deltas.color),
|
||||||
|
styleMatch: blend(defaultWeights.styleMatch, deltas.style),
|
||||||
|
sizeFit: blend(defaultWeights.sizeFit, deltas.fit),
|
||||||
|
priceFit: Math.round(defaultWeights.priceFit * (1 - learningRate) + 20 * learningRate)
|
||||||
|
};
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Get all products
|
||||||
|
db.all('SELECT * FROM products', [], (err, products) => {
|
||||||
|
if (err) {
|
||||||
|
console.error('Error fetching products:', err);
|
||||||
|
return res.status(500).json({ error: 'Database error' });
|
||||||
|
}
|
||||||
|
|
||||||
|
// Score and filter products using tuned weights
|
||||||
|
const scoredProducts = products
|
||||||
|
.map(product => {
|
||||||
|
let score = 0;
|
||||||
|
|
||||||
|
// Color match
|
||||||
|
if (preferredColors.includes(product.color)) {
|
||||||
|
score += weights.colorMatch;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Style match
|
||||||
|
if (styles.length > 0) {
|
||||||
|
let productStyleTags = JSON.parse(product.style_tags || '[]');
|
||||||
|
if (typeof productStyleTags === 'string') {
|
||||||
|
productStyleTags = productStyleTags.split(',').map(s => s.trim());
|
||||||
|
}
|
||||||
|
const matchingStyles = styles.filter(style =>
|
||||||
|
productStyleTags.some(tag => tag.toLowerCase().includes(style.toLowerCase()))
|
||||||
|
);
|
||||||
|
if (matchingStyles.length > 0) {
|
||||||
|
score += weights.styleMatch;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Price fit
|
||||||
|
if (product.price <= budget) {
|
||||||
|
score += weights.priceFit;
|
||||||
|
}
|
||||||
|
|
||||||
|
return { ...product, score, weights };
|
||||||
|
})
|
||||||
|
.filter(product => {
|
||||||
|
// Filter out hard lines
|
||||||
|
const productStyleTags = JSON.parse(product.style_tags || '[]');
|
||||||
|
return !hardLines.some(hardLine =>
|
||||||
|
productStyleTags.some(tag => tag.toLowerCase().includes(hardLine.toLowerCase())) ||
|
||||||
|
product.title.toLowerCase().includes(hardLine.toLowerCase()) ||
|
||||||
|
product.brand.toLowerCase().includes(hardLine.toLowerCase())
|
||||||
|
);
|
||||||
|
})
|
||||||
|
.filter(product => product.price <= budget)
|
||||||
|
.sort((a, b) => b.score - a.score)
|
||||||
|
.slice(0, 6);
|
||||||
|
|
||||||
|
res.json({
|
||||||
|
products: scoredProducts,
|
||||||
|
totalMatches: scoredProducts.length,
|
||||||
|
tunedWeights: feedbackRows.length >= 10 ? weights : null
|
||||||
|
});
|
||||||
|
});
|
||||||
}
|
}
|
||||||
|
);
|
||||||
// Score and filter products
|
|
||||||
const scoredProducts = products
|
|
||||||
.map(product => {
|
|
||||||
let score = 0;
|
|
||||||
|
|
||||||
// Color match: +25 points
|
|
||||||
if (preferredColors.includes(product.color)) {
|
|
||||||
score += 25;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Style match: +35 points
|
|
||||||
if (styles.length > 0) {
|
|
||||||
let productStyleTags = JSON.parse(product.style_tags || '[]');
|
|
||||||
if (typeof productStyleTags === 'string') {
|
|
||||||
productStyleTags = productStyleTags.split(',').map(s => s.trim());
|
|
||||||
}
|
|
||||||
const matchingStyles = styles.filter(style =>
|
|
||||||
productStyleTags.some(tag => tag.toLowerCase().includes(style.toLowerCase()))
|
|
||||||
);
|
|
||||||
if (matchingStyles.length > 0) {
|
|
||||||
score += 35;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Price fit: +20 points
|
|
||||||
if (product.price <= budget) {
|
|
||||||
score += 20;
|
|
||||||
}
|
|
||||||
|
|
||||||
return { ...product, score, matchingStyles: styles.filter(style => {
|
|
||||||
let tagList = JSON.parse(product.style_tags || '[]');
|
|
||||||
if (typeof tagList === 'string') tagList = tagList.split(',').map(s => s.trim());
|
|
||||||
return tagList.some(tag => tag.toLowerCase().includes(style.toLowerCase()));
|
|
||||||
}) };
|
|
||||||
})
|
|
||||||
.filter(product => {
|
|
||||||
// Filter out hard lines
|
|
||||||
const productStyleTags = JSON.parse(product.style_tags || '[]');
|
|
||||||
return !hardLines.some(hardLine =>
|
|
||||||
productStyleTags.some(tag => tag.toLowerCase().includes(hardLine.toLowerCase())) ||
|
|
||||||
product.title.toLowerCase().includes(hardLine.toLowerCase()) ||
|
|
||||||
product.brand.toLowerCase().includes(hardLine.toLowerCase())
|
|
||||||
);
|
|
||||||
})
|
|
||||||
.filter(product => product.price <= budget)
|
|
||||||
.sort((a, b) => b.score - a.score)
|
|
||||||
.slice(0, 6); // Top 4-6 items
|
|
||||||
|
|
||||||
res.json({
|
|
||||||
products: scoredProducts,
|
|
||||||
totalMatches: scoredProducts.length
|
|
||||||
});
|
|
||||||
});
|
|
||||||
}
|
}
|
||||||
);
|
);
|
||||||
});
|
});
|
||||||
|
|
||||||
// Submit feedback
|
// Submit feedback (auth required)
|
||||||
app.post('/api/feedback', validate(require('./src/middleware/validation').schemas.feedback), (req, res) => {
|
app.post('/api/feedback', authenticate, validate(require('./src/middleware/validation').schemas.feedback), (req, res) => {
|
||||||
const { userId, productId, wouldKeep, fitRating, styleRating, colorRating, qualityRating } = req.body;
|
const { userId, productId, wouldKeep, fitRating, styleRating, colorRating, qualityRating } = req.body;
|
||||||
|
|
||||||
db.run(
|
db.run(
|
||||||
|
|
@ -314,7 +444,32 @@ const loadSeedProducts = () => {
|
||||||
{ asin: 'B08T7X9K1L', title: 'Bamboo Silk Scarf', brand: 'Etsy', category: 'Accessories', color: 'Multicolor', style_tags: 'boho,feminine,elegant', price: 24.99, image_url: 'https://m.media-amazon.com/images/I/71X7Y7Z7X6L.jpg', affiliate_link: `https://www.amazon.com/dp/B08T7X9K1L?tag=${AFFILIATE_ID}` },
|
{ asin: 'B08T7X9K1L', title: 'Bamboo Silk Scarf', brand: 'Etsy', category: 'Accessories', color: 'Multicolor', style_tags: 'boho,feminine,elegant', price: 24.99, image_url: 'https://m.media-amazon.com/images/I/71X7Y7Z7X6L.jpg', affiliate_link: `https://www.amazon.com/dp/B08T7X9K1L?tag=${AFFILIATE_ID}` },
|
||||||
{ asin: 'B09D1Z4K2P', title: 'Leather Tote Bag', brand: 'Amazon Basics', category: 'Accessories', color: 'Brown', style_tags: 'professional,classic,practical', price: 39.99, image_url: 'https://m.media-amazon.com/images/I/81X8Z8Z8X7L.jpg', affiliate_link: `https://www.amazon.com/dp/B09D1Z4K2P?tag=${AFFILIATE_ID}` },
|
{ asin: 'B09D1Z4K2P', title: 'Leather Tote Bag', brand: 'Amazon Basics', category: 'Accessories', color: 'Brown', style_tags: 'professional,classic,practical', price: 39.99, image_url: 'https://m.media-amazon.com/images/I/81X8Z8Z8X7L.jpg', affiliate_link: `https://www.amazon.com/dp/B09D1Z4K2P?tag=${AFFILIATE_ID}` },
|
||||||
{ asin: 'B08W3K7L1N', title: 'Sunglasses - Oversized', brand: 'Amazon Basics', category: 'Accessories', color: 'Black', style_tags: 'feminine,edgy,casual', price: 14.99, image_url: 'https://m.media-amazon.com/images/I/91X9Z9Z9X4L.jpg', affiliate_link: `https://www.amazon.com/dp/B08W3K7L1N?tag=${AFFILIATE_ID}` },
|
{ asin: 'B08W3K7L1N', title: 'Sunglasses - Oversized', brand: 'Amazon Basics', category: 'Accessories', color: 'Black', style_tags: 'feminine,edgy,casual', price: 14.99, image_url: 'https://m.media-amazon.com/images/I/91X9Z9Z9X4L.jpg', affiliate_link: `https://www.amazon.com/dp/B08W3K7L1N?tag=${AFFILIATE_ID}` },
|
||||||
{ asin: 'B09H5X2K3L', title: 'Beaded Necklace Set', brand: 'Etsy', category: 'Accessories', color: 'Multicolor', style_tags: 'boho,feminine,elegant', price: 29.99, image_url: 'https://m.media-amazon.com/images/I/61Z6J7X7X9L.jpg', affiliate_link: `https://www.amazon.com/dp/B09H5X2K3L?tag=${AFFILIATE_ID}` }
|
{ asin: 'B09H5X2K3L', title: 'Beaded Necklace Set', brand: 'Etsy', category: 'Accessories', color: 'Multicolor', style_tags: 'boho,feminine,elegant', price: 29.99, image_url: 'https://m.media-amazon.com/images/I/61Z6J7X7X9L.jpg', affiliate_link: `https://www.amazon.com/dp/B09H5X2K3L?tag=${AFFILIATE_ID}` },
|
||||||
|
// ── Phase 2 products (24 new, total 50) ──
|
||||||
|
{ asin: 'B07RYH2X4L', title: 'AUTOMET Women\'s Oversized Sweater', brand: 'AUTOMET', category: 'Tops', color: 'Brown', style_tags: 'casual,cozy,comfortable', price: 32.99, image_url: 'https://m.media-amazon.com/images/I/71Z8Y8Z8Y1L.jpg', affiliate_link: `https://www.amazon.com/dp/B07RYH2X4L?tag=${AFFILIATE_ID}` },
|
||||||
|
{ asin: 'B0B2KXQ7PJ', title: 'ZESICA Women\'s Boho Floral Maxi Dress', brand: 'ZESICA', category: 'Dresses', color: 'Red', style_tags: 'boho,feminine,elegant', price: 45.99, image_url: 'https://m.media-amazon.com/images/I/81Y9Z9Z9Y2L.jpg', affiliate_link: `https://www.amazon.com/dp/B0B2KXQ7PJ?tag=${AFFILIATE_ID}` },
|
||||||
|
{ asin: 'B07G4DLY5V', title: 'GRACE KARIN Women\'s Pencil Skirt', brand: 'GRACE KARIN', category: 'Bottoms', color: 'Black', style_tags: 'professional,elegant,classic', price: 34.99, image_url: 'https://m.media-amazon.com/images/I/61A8B8C8D8L.jpg', affiliate_link: `https://www.amazon.com/dp/B07G4DLY5V?tag=${AFFILIATE_ID}` },
|
||||||
|
{ asin: 'B0BJ7P8X2M', title: 'ANRABESS Women\'s Two-Piece Lounge Set', brand: 'ANRABESS', category: 'Tops', color: 'Green', style_tags: 'casual,comfortable,active', price: 39.99, image_url: 'https://m.media-amazon.com/images/I/71Z8Y8Z8Y3L.jpg', affiliate_link: `https://www.amazon.com/dp/B0BJ7P8X2M?tag=${AFFILIATE_ID}` },
|
||||||
|
{ asin: 'B0B6GKCN8K', title: 'PRETTYGARDEN Women\'s Blazer Jacket', brand: 'PRETTYGARDEN', category: 'Outerwear', color: 'Purple', style_tags: 'professional,elegant,feminine', price: 52.99, image_url: 'https://m.media-amazon.com/images/I/81Y9Z9Z9Y4L.jpg', affiliate_link: `https://www.amazon.com/dp/B0B6GKCN8K?tag=${AFFILIATE_ID}` },
|
||||||
|
{ asin: 'B0BXKQ3P8N', title: 'Dokotoo Women\'s Linen Shorts', brand: 'Dokotoo', category: 'Bottoms', color: 'Yellow', style_tags: 'casual,comfortable,practical', price: 24.99, image_url: 'https://m.media-amazon.com/images/I/71Z8Y8Z8Y5L.jpg', affiliate_link: `https://www.amazon.com/dp/B0BXKQ3P8N?tag=${AFFILIATE_ID}` },
|
||||||
|
{ asin: 'B08G1LX7P2', title: 'Columbia Women\'s Benton Springs Fleece', brand: 'Columbia', category: 'Outerwear', color: 'Red', style_tags: 'casual,outdoor,active', price: 44.99, image_url: 'https://m.media-amazon.com/images/I/81Y9Z9Z9Y6L.jpg', affiliate_link: `https://www.amazon.com/dp/B08G1LX7P2?tag=${AFFILIATE_ID}` },
|
||||||
|
{ asin: 'B08H2M5Q7K', title: 'HUE Women\'s Ultra Leggings', brand: 'HUE', category: 'Bottoms', color: 'Green', style_tags: 'casual,active,comfortable', price: 28.00, image_url: 'https://m.media-amazon.com/images/I/71Z8Y8Z8Y7L.jpg', affiliate_link: `https://www.amazon.com/dp/B08H2M5Q7K?tag=${AFFILIATE_ID}` },
|
||||||
|
{ asin: 'B09MVJ3X8P', title: 'Allegra K Women\'s Peplum Top', brand: 'Allegra K', category: 'Tops', color: 'Orange', style_tags: 'feminine,elegant,professional', price: 36.99, image_url: 'https://m.media-amazon.com/images/I/81Y9Z9Z9Y8L.jpg', affiliate_link: `https://www.amazon.com/dp/B09MVJ3X8P?tag=${AFFILIATE_ID}` },
|
||||||
|
{ asin: 'B0BL3XQ7PJ', title: 'Wrangler Women\'s Retro High Rise Jean', brand: 'Wrangler', category: 'Bottoms', color: 'Brown', style_tags: 'classic,casual,edgy', price: 54.99, image_url: 'https://m.media-amazon.com/images/I/71Z8Y8Z8Y9L.jpg', affiliate_link: `https://www.amazon.com/dp/B0BL3XQ7PJ?tag=${AFFILIATE_ID}` },
|
||||||
|
{ asin: 'B07QK3X6L2', title: 'V28 Women\'s V-Neck Racerback Tank', brand: 'V28', category: 'Tops', color: 'Purple', style_tags: 'active,casual,practical', price: 16.99, image_url: 'https://m.media-amazon.com/images/I/71A9B9C9D1L.jpg', affiliate_link: `https://www.amazon.com/dp/B07QK3X6L2?tag=${AFFILIATE_ID}` },
|
||||||
|
{ asin: 'B0C2HPX8KJ', title: 'BTFBM Women\'s Satin Cami Dress', brand: 'BTFBM', category: 'Dresses', color: 'Yellow', style_tags: 'feminine,elegant,casual', price: 42.99, image_url: 'https://m.media-amazon.com/images/I/81A9B9C9D2L.jpg', affiliate_link: `https://www.amazon.com/dp/B0C2HPX8KJ?tag=${AFFILIATE_ID}` },
|
||||||
|
{ asin: 'B0B14KQ3MN', title: 'LILLUSORY Women\'s Knit Cardigan', brand: 'LILLUSORY', category: 'Outerwear', color: 'Brown', style_tags: 'cozy,casual,feminine', price: 47.99, image_url: 'https://m.media-amazon.com/images/I/81A9B9C9D3L.jpg', affiliate_link: `https://www.amazon.com/dp/B0B14KQ3MN?tag=${AFFILIATE_ID}` },
|
||||||
|
{ asin: 'B0BHX2M5L8', title: 'New Balance Women\'s 574 Sneaker', brand: 'New Balance', category: 'Shoes', color: 'Grey', style_tags: 'casual,active,classic', price: 74.99, image_url: 'https://m.media-amazon.com/images/I/81A9B9C9D4L.jpg', affiliate_link: `https://www.amazon.com/dp/B0BHX2M5L8?tag=${AFFILIATE_ID}` },
|
||||||
|
{ asin: 'B0CDKQ3X7M', title: 'Soda Women\'s Open Toe Sandal', brand: 'Soda', category: 'Shoes', color: 'Brown', style_tags: 'feminine,casual,boho', price: 29.99, image_url: 'https://m.media-amazon.com/images/I/81A9B9C9D5L.jpg', affiliate_link: `https://www.amazon.com/dp/B0CDKQ3X7M?tag=${AFFILIATE_ID}` },
|
||||||
|
{ asin: 'B0BFWJX2P8', title: 'Dr. Scholl\'s Women\'s Time Off Sneaker', brand: 'Dr. Scholl\'s', category: 'Shoes', color: 'White', style_tags: 'casual,comfortable,classic', price: 59.99, image_url: 'https://m.media-amazon.com/images/I/81A9B9C9D6L.jpg', affiliate_link: `https://www.amazon.com/dp/B0BFWJX2P8?tag=${AFFILIATE_ID}` },
|
||||||
|
{ asin: 'B08L9Q7R3K', title: 'Sam Edelman Women\'s Hazel Pump', brand: 'Sam Edelman', category: 'Shoes', color: 'Red', style_tags: 'elegant,feminine,professional', price: 79.99, image_url: 'https://m.media-amazon.com/images/I/81A9B9C9D7L.jpg', affiliate_link: `https://www.amazon.com/dp/B08L9Q7R3K?tag=${AFFILIATE_ID}` },
|
||||||
|
{ asin: 'B07VK9P7K2', title: 'Fossil Women\'s Leather Crossbody', brand: 'Fossil', category: 'Accessories', color: 'Brown', style_tags: 'professional,classic,practical', price: 69.99, image_url: 'https://m.media-amazon.com/images/I/81A9B9C9D8L.jpg', affiliate_link: `https://www.amazon.com/dp/B07VK9P7K2?tag=${AFFILIATE_ID}` },
|
||||||
|
{ asin: 'B08XJ8M2L7', title: 'Kate Spade New York Stud Earrings', brand: 'Kate Spade', category: 'Accessories', color: 'Gold', style_tags: 'feminine,elegant,classic', price: 34.00, image_url: 'https://m.media-amazon.com/images/I/81A9B9C9D9L.jpg', affiliate_link: `https://www.amazon.com/dp/B08XJ8M2L7?tag=${AFFILIATE_ID}` },
|
||||||
|
{ asin: 'B09V1X4K8P', title: 'Maidenform Women\'s Comfort Devotion Bra', brand: 'Maidenform', category: 'Undergarments', color: 'Pink', style_tags: 'comfortable,classic,feminine', price: 27.99, image_url: 'https://m.media-amazon.com/images/I/71Z9A9B9C1L.jpg', affiliate_link: `https://www.amazon.com/dp/B09V1X4K8P?tag=${AFFILIATE_ID}` },
|
||||||
|
{ asin: 'B0B6X8K5L2', title: 'Hanes Women\'s French Terry Jogger', brand: 'Hanes', category: 'Bottoms', color: 'Orange', style_tags: 'comfortable,casual,active', price: 19.99, image_url: 'https://m.media-amazon.com/images/I/71Z9A9B9C2L.jpg', affiliate_link: `https://www.amazon.com/dp/B0B6X8K5L2?tag=${AFFILIATE_ID}` },
|
||||||
|
{ asin: 'B09KXQ7P3L', title: 'Roxy Women\'s Beach Classics Bikini', brand: 'Roxy', category: 'Tops', color: 'Yellow', style_tags: 'active,casual,feminine', price: 34.99, image_url: 'https://m.media-amazon.com/images/I/71Z9A9B9C3L.jpg', affiliate_link: `https://www.amazon.com/dp/B09KXQ7P3L?tag=${AFFILIATE_ID}` },
|
||||||
|
{ asin: 'B0C5JX8K2N', title: 'Lacozy Women\'s Wrap Dress', brand: 'Lacozy', category: 'Dresses', color: 'Green', style_tags: 'feminine,casual,boho', price: 39.99, image_url: 'https://m.media-amazon.com/images/I/71Z9A9B9C4L.jpg', affiliate_link: `https://www.amazon.com/dp/B0C5JX8K2N?tag=${AFFILIATE_ID}` },
|
||||||
|
{ asin: 'B0BK7P3X8Q', title: 'MINTLIMIT Women\'s Hiking Pants', brand: 'MINTLIMIT', category: 'Bottoms', color: 'Purple', style_tags: 'active,outdoor,practical', price: 31.99, image_url: 'https://m.media-amazon.com/images/I/71Z9A9B9C5L.jpg', affiliate_link: `https://www.amazon.com/dp/B0BK7P3X8Q?tag=${AFFILIATE_ID}` }
|
||||||
];
|
];
|
||||||
|
|
||||||
seedProducts.forEach(product => {
|
seedProducts.forEach(product => {
|
||||||
|
|
|
||||||
|
|
@ -20,7 +20,15 @@ export default function CuratedBox() {
|
||||||
const fetchProfile = async (userId) => {
|
const fetchProfile = async (userId) => {
|
||||||
try {
|
try {
|
||||||
setLoadingProfile(true);
|
setLoadingProfile(true);
|
||||||
const response = await fetch(`/api/profile/${userId}`);
|
const token = localStorage.getItem('wardrobe_token');
|
||||||
|
const response = await fetch(`/api/profile/${userId}`, {
|
||||||
|
headers: token ? { 'Authorization': `Bearer ${token}` } : {}
|
||||||
|
});
|
||||||
|
if (response.status === 401) {
|
||||||
|
// Auth required — store return URL and redirect
|
||||||
|
window.location.href = `/?login=required&redirect=box&userId=${userId}`;
|
||||||
|
return;
|
||||||
|
}
|
||||||
const data = await response.json();
|
const data = await response.json();
|
||||||
if (response.ok) {
|
if (response.ok) {
|
||||||
// Convert underscore fields to camelCase for consistency
|
// Convert underscore fields to camelCase for consistency
|
||||||
|
|
@ -50,7 +58,10 @@ export default function CuratedBox() {
|
||||||
|
|
||||||
const response = await fetch('/api/box', {
|
const response = await fetch('/api/box', {
|
||||||
method: 'POST',
|
method: 'POST',
|
||||||
headers: { 'Content-Type': 'application/json' },
|
headers: {
|
||||||
|
'Content-Type': 'application/json',
|
||||||
|
...(localStorage.getItem('wardrobe_token') ? { 'Authorization': `Bearer ${localStorage.getItem('wardrobe_token')}` } : {})
|
||||||
|
},
|
||||||
body: JSON.stringify({
|
body: JSON.stringify({
|
||||||
userId,
|
userId,
|
||||||
preferredColors,
|
preferredColors,
|
||||||
|
|
@ -90,7 +101,10 @@ export default function CuratedBox() {
|
||||||
try {
|
try {
|
||||||
await fetch('/api/feedback', {
|
await fetch('/api/feedback', {
|
||||||
method: 'POST',
|
method: 'POST',
|
||||||
headers: { 'Content-Type': 'application/json' },
|
headers: {
|
||||||
|
'Content-Type': 'application/json',
|
||||||
|
...(localStorage.getItem('wardrobe_token') ? { 'Authorization': `Bearer ${localStorage.getItem('wardrobe_token')}` } : {})
|
||||||
|
},
|
||||||
body: JSON.stringify({
|
body: JSON.stringify({
|
||||||
userId,
|
userId,
|
||||||
productId,
|
productId,
|
||||||
|
|
|
||||||
315
wardrobe-ai/site/index.html
Normal file
315
wardrobe-ai/site/index.html
Normal file
|
|
@ -0,0 +1,315 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Wardrobe AI — Your Personal Stylist, Powered by AI</title>
|
||||||
|
<style>
|
||||||
|
:root {
|
||||||
|
--rose: #e8a0bf;
|
||||||
|
--rose-dark: #c77d9f;
|
||||||
|
--sage: #9caf88;
|
||||||
|
--sage-dark: #7a8f6a;
|
||||||
|
--cream: #fdf6f0;
|
||||||
|
--charcoal: #2d2d2d;
|
||||||
|
--text: #3a3a3a;
|
||||||
|
--text-light: #6b6b6b;
|
||||||
|
}
|
||||||
|
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||||
|
body {
|
||||||
|
font-family: 'Georgia', 'Times New Roman', serif;
|
||||||
|
background: var(--cream);
|
||||||
|
color: var(--text);
|
||||||
|
line-height: 1.6;
|
||||||
|
}
|
||||||
|
.container { max-width: 960px; margin: 0 auto; padding: 0 24px; }
|
||||||
|
|
||||||
|
/* Hero */
|
||||||
|
.hero {
|
||||||
|
text-align: center;
|
||||||
|
padding: 80px 0 60px;
|
||||||
|
background: linear-gradient(135deg, #fdf6f0 0%, #f7e8f0 50%, #eef2ea 100%);
|
||||||
|
}
|
||||||
|
.hero h1 {
|
||||||
|
font-size: 3rem;
|
||||||
|
color: var(--charcoal);
|
||||||
|
margin-bottom: 16px;
|
||||||
|
letter-spacing: -0.5px;
|
||||||
|
}
|
||||||
|
.hero .accent { color: var(--rose-dark); }
|
||||||
|
.hero p {
|
||||||
|
font-size: 1.25rem;
|
||||||
|
color: var(--text-light);
|
||||||
|
max-width: 600px;
|
||||||
|
margin: 0 auto 32px;
|
||||||
|
}
|
||||||
|
.cta-button {
|
||||||
|
display: inline-block;
|
||||||
|
background: var(--rose-dark);
|
||||||
|
color: white;
|
||||||
|
padding: 16px 40px;
|
||||||
|
border-radius: 8px;
|
||||||
|
text-decoration: none;
|
||||||
|
font-size: 1.1rem;
|
||||||
|
font-weight: bold;
|
||||||
|
transition: background 0.2s;
|
||||||
|
border: none;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
.cta-button:hover { background: var(--rose); }
|
||||||
|
|
||||||
|
/* How It Works */
|
||||||
|
.how-it-works {
|
||||||
|
padding: 80px 0;
|
||||||
|
}
|
||||||
|
.how-it-works h2, .differentiators h2, .pricing h2, .waitlist h2 {
|
||||||
|
text-align: center;
|
||||||
|
font-size: 2rem;
|
||||||
|
color: var(--charcoal);
|
||||||
|
margin-bottom: 48px;
|
||||||
|
}
|
||||||
|
.steps {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(3, 1fr);
|
||||||
|
gap: 32px;
|
||||||
|
}
|
||||||
|
.step {
|
||||||
|
text-align: center;
|
||||||
|
padding: 32px 20px;
|
||||||
|
background: white;
|
||||||
|
border-radius: 12px;
|
||||||
|
box-shadow: 0 2px 16px rgba(0,0,0,0.04);
|
||||||
|
}
|
||||||
|
.step-number {
|
||||||
|
display: inline-block;
|
||||||
|
width: 48px;
|
||||||
|
height: 48px;
|
||||||
|
line-height: 48px;
|
||||||
|
background: var(--sage);
|
||||||
|
color: white;
|
||||||
|
border-radius: 50%;
|
||||||
|
font-size: 1.5rem;
|
||||||
|
font-weight: bold;
|
||||||
|
margin-bottom: 16px;
|
||||||
|
}
|
||||||
|
.step h3 { font-size: 1.2rem; color: var(--charcoal); margin-bottom: 8px; }
|
||||||
|
.step p { color: var(--text-light); font-size: 0.95rem; }
|
||||||
|
|
||||||
|
/* Differentiators */
|
||||||
|
.differentiators {
|
||||||
|
padding: 80px 0;
|
||||||
|
background: white;
|
||||||
|
}
|
||||||
|
.diff-grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(2, 1fr);
|
||||||
|
gap: 24px;
|
||||||
|
max-width: 800px;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
.diff-card {
|
||||||
|
padding: 24px;
|
||||||
|
border-left: 4px solid var(--sage);
|
||||||
|
background: var(--cream);
|
||||||
|
border-radius: 0 8px 8px 0;
|
||||||
|
}
|
||||||
|
.diff-card h3 { color: var(--charcoal); margin-bottom: 8px; }
|
||||||
|
.diff-card p { color: var(--text-light); font-size: 0.95rem; }
|
||||||
|
|
||||||
|
/* Pricing */
|
||||||
|
.pricing {
|
||||||
|
padding: 80px 0;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.price-card {
|
||||||
|
display: inline-block;
|
||||||
|
background: white;
|
||||||
|
border-radius: 12px;
|
||||||
|
box-shadow: 0 4px 24px rgba(0,0,0,0.06);
|
||||||
|
padding: 48px 40px;
|
||||||
|
border: 2px solid var(--rose);
|
||||||
|
}
|
||||||
|
.price-amount { font-size: 2.5rem; font-weight: bold; color: var(--charcoal); }
|
||||||
|
.price-period { color: var(--text-light); margin-bottom: 24px; }
|
||||||
|
.price-features {
|
||||||
|
list-style: none;
|
||||||
|
text-align: left;
|
||||||
|
margin: 24px 0;
|
||||||
|
}
|
||||||
|
.price-features li {
|
||||||
|
padding: 8px 0;
|
||||||
|
color: var(--text-light);
|
||||||
|
}
|
||||||
|
.price-features li::before { content: "✓ "; color: var(--sage-dark); font-weight: bold; }
|
||||||
|
|
||||||
|
/* Waitlist */
|
||||||
|
.waitlist {
|
||||||
|
padding: 80px 0;
|
||||||
|
background: linear-gradient(135deg, #eef2ea 0%, #f7e8f0 100%);
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.waitlist p { color: var(--text-light); max-width: 500px; margin: 0 auto 24px; }
|
||||||
|
.waitlist-form {
|
||||||
|
display: flex;
|
||||||
|
gap: 12px;
|
||||||
|
max-width: 460px;
|
||||||
|
margin: 0 auto;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
.waitlist-form input[type="email"] {
|
||||||
|
flex: 1;
|
||||||
|
padding: 14px 20px;
|
||||||
|
border: 2px solid #ddd;
|
||||||
|
border-radius: 8px;
|
||||||
|
font-size: 1rem;
|
||||||
|
font-family: inherit;
|
||||||
|
}
|
||||||
|
.waitlist-form button {
|
||||||
|
padding: 14px 28px;
|
||||||
|
background: var(--charcoal);
|
||||||
|
color: white;
|
||||||
|
border: none;
|
||||||
|
border-radius: 8px;
|
||||||
|
font-size: 1rem;
|
||||||
|
cursor: pointer;
|
||||||
|
font-family: inherit;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
.waitlist-form button:hover { background: #4a4a4a; }
|
||||||
|
|
||||||
|
/* Footer */
|
||||||
|
footer {
|
||||||
|
text-align: center;
|
||||||
|
padding: 40px 0;
|
||||||
|
color: var(--text-light);
|
||||||
|
font-size: 0.85rem;
|
||||||
|
}
|
||||||
|
footer a { color: var(--rose-dark); }
|
||||||
|
|
||||||
|
@media (max-width: 720px) {
|
||||||
|
.steps, .diff-grid { grid-template-columns: 1fr; }
|
||||||
|
.hero h1 { font-size: 2rem; }
|
||||||
|
.waitlist-form { flex-direction: column; }
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<!-- Hero -->
|
||||||
|
<section class="hero">
|
||||||
|
<div class="container">
|
||||||
|
<h1>Clothes you'll <span class="accent">love</span>.<br>Without the scroll.</h1>
|
||||||
|
<p>
|
||||||
|
Wardrobe AI curates clothing from real designers — picked for your style,
|
||||||
|
your size, and your budget. No trends. No algorithms optimizing for ad revenue.
|
||||||
|
Just clothes that feel like <em>you</em>.
|
||||||
|
</p>
|
||||||
|
<a href="#waitlist" class="cta-button">Get Early Access</a>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- How It Works -->
|
||||||
|
<section class="how-it-works">
|
||||||
|
<div class="container">
|
||||||
|
<h2>How It Works</h2>
|
||||||
|
<div class="steps">
|
||||||
|
<div class="step">
|
||||||
|
<div class="step-number">1</div>
|
||||||
|
<h3>Tell Us Your Style</h3>
|
||||||
|
<p>Share your sizes, favorite colors, style preferences, and what you absolutely won't wear. Takes 2 minutes.</p>
|
||||||
|
</div>
|
||||||
|
<div class="step">
|
||||||
|
<div class="step-number">2</div>
|
||||||
|
<h3>AI Curates Your Box</h3>
|
||||||
|
<p>Our curation engine matches you with pieces from small designers and boutique brands — filtered for fit and budget.</p>
|
||||||
|
</div>
|
||||||
|
<div class="step">
|
||||||
|
<div class="step-number">3</div>
|
||||||
|
<h3>Love It or Learn</h3>
|
||||||
|
<p>Keep what you love. Rate what you don't. Every box gets smarter because the AI learns from <em>your</em> taste.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Differentiators -->
|
||||||
|
<section class="differentiators">
|
||||||
|
<div class="container">
|
||||||
|
<h2>Not Another Subscription Box</h2>
|
||||||
|
<div class="diff-grid">
|
||||||
|
<div class="diff-card">
|
||||||
|
<h3>🏷️ Real Designers, Not Fast Fashion</h3>
|
||||||
|
<p>We curate from small businesses and boutique brands — clothes with craftsmanship, not warehouse overstock.</p>
|
||||||
|
</div>
|
||||||
|
<div class="diff-card">
|
||||||
|
<h3>🧠 Learns Your Taste</h3>
|
||||||
|
<p>Rate what you receive. Every rating trains the engine. Box #3 is smarter than box #1 — and it keeps improving.</p>
|
||||||
|
</div>
|
||||||
|
<div class="diff-card">
|
||||||
|
<h3>💰 Within Your Budget</h3>
|
||||||
|
<p>Set your per-item budget ($50, $100, $150). We never send items above it. Respect for your wallet is built in.</p>
|
||||||
|
</div>
|
||||||
|
<div class="diff-card">
|
||||||
|
<h3>🚫 Your Hard Lines, Respected</h3>
|
||||||
|
<p>No synthetics. No florals. No crop tops. Whatever your boundaries are, the engine treats them as rules, not suggestions.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Pricing -->
|
||||||
|
<section class="pricing">
|
||||||
|
<div class="container">
|
||||||
|
<h2>Simple Pricing</h2>
|
||||||
|
<div class="price-card">
|
||||||
|
<div class="price-amount">Free</div>
|
||||||
|
<div class="price-period">during early access</div>
|
||||||
|
<ul class="price-features">
|
||||||
|
<li>Personalized style profile</li>
|
||||||
|
<li>AI-curated boxes on demand</li>
|
||||||
|
<li>Feedback-powered learning engine</li>
|
||||||
|
<li>Products from boutique brands</li>
|
||||||
|
<li>Budget-respecting curation</li>
|
||||||
|
<li>No subscription, no commitment</li>
|
||||||
|
</ul>
|
||||||
|
<p style="color: var(--text-light); font-size: 0.85rem;">You only pay for what you buy. We earn through brand partnerships — never by selling your data.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Waitlist -->
|
||||||
|
<section class="waitlist" id="waitlist">
|
||||||
|
<div class="container">
|
||||||
|
<h2>Be First in Line</h2>
|
||||||
|
<p>Wardrobe AI is in early access. Drop your email and we'll let you know when your personal stylist is ready.</p>
|
||||||
|
<form class="waitlist-form" onsubmit="handleSubmit(event)">
|
||||||
|
<input type="email" id="email" placeholder="you@email.com" required>
|
||||||
|
<button type="submit">Join Waitlist</button>
|
||||||
|
</form>
|
||||||
|
<p id="confirmation" style="display:none; margin-top: 16px; color: var(--sage-dark); font-weight: bold;">
|
||||||
|
🎉 You're on the list! We'll be in touch.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<footer>
|
||||||
|
<div class="container">
|
||||||
|
<p>Wardrobe AI · Built with care in Washington · <a href="https://os.scoble.me/forgejo/sscoble/wardrobe-ai">View on Forgejo</a></p>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
function handleSubmit(e) {
|
||||||
|
e.preventDefault();
|
||||||
|
const email = document.getElementById('email').value;
|
||||||
|
// Store in localStorage for now (backend coming)
|
||||||
|
const waitlist = JSON.parse(localStorage.getItem('wardrobe_waitlist') || '[]');
|
||||||
|
waitlist.push({ email, timestamp: new Date().toISOString() });
|
||||||
|
localStorage.setItem('wardrobe_waitlist', JSON.stringify(waitlist));
|
||||||
|
document.querySelector('.waitlist-form').style.display = 'none';
|
||||||
|
document.getElementById('confirmation').style.display = 'block';
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
Loading…
Add table
Add a link
Reference in a new issue