updated images with ai images
This commit is contained in:
@@ -0,0 +1,117 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Image Review — All 28</title>
|
||||
<style>
|
||||
* { box-sizing: border-box; margin: 0; padding: 0; }
|
||||
body { background: #0d0d0d; color: #ddd; font-family: monospace; padding: 24px; }
|
||||
.header { margin-bottom: 24px; }
|
||||
.header h1 { font-size: 13px; color: #888; text-transform: uppercase; letter-spacing: 1px; }
|
||||
.header .meta { font-size: 11px; color: #444; margin-top: 6px; }
|
||||
.section-label { font-size: 10px; color: #555; text-transform: uppercase; letter-spacing: 2px; margin: 28px 0 12px; border-bottom: 1px solid #1a1a1a; padding-bottom: 8px; }
|
||||
.grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 8px; }
|
||||
.card { background: #141414; border: 1px solid #222; border-radius: 6px; overflow: hidden; cursor: pointer; transition: border-color 0.15s; }
|
||||
.card:hover { border-color: #4a9eff; }
|
||||
.card img { width: 100%; height: 160px; object-fit: cover; display: block; }
|
||||
.card .info { padding: 10px; }
|
||||
.card .name { font-size: 11px; color: #aaa; margin-bottom: 6px; font-weight: bold; }
|
||||
.card .prompt { font-size: 10px; color: #555; line-height: 1.6; }
|
||||
.card .tag { display: inline-block; font-size: 9px; background: #1a2a1a; color: #4a9eff; padding: 2px 6px; border-radius: 3px; margin-bottom: 6px; }
|
||||
|
||||
/* lightbox */
|
||||
.lb { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.93); z-index: 100; padding: 32px; }
|
||||
.lb.open { display: flex; gap: 32px; align-items: flex-start; }
|
||||
.lb img { max-height: 80vh; max-width: 60vw; object-fit: contain; border-radius: 6px; flex-shrink: 0; }
|
||||
.lb .lb-info { flex: 1; }
|
||||
.lb .lb-name { font-size: 13px; color: #eee; margin-bottom: 12px; }
|
||||
.lb .lb-model { font-size: 10px; color: #4a9eff; margin-bottom: 16px; }
|
||||
.lb .lb-prompt { font-size: 12px; color: #aaa; line-height: 1.8; }
|
||||
.lb .lb-close { position: absolute; top: 16px; right: 24px; font-size: 24px; color: #555; cursor: pointer; }
|
||||
.lb .lb-close:hover { color: #eee; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="header">
|
||||
<h1>Lahr Carpet Cleaning — Image Review</h1>
|
||||
<div class="meta">Model: FLUX.1 Schnell Q8_0 GGUF · 4 steps, cfg=1.0, euler/simple · 1024×576 → WebP · 28 images total</div>
|
||||
</div>
|
||||
|
||||
<div class="section-label">Hero Images (16)</div>
|
||||
<div class="grid" id="heroes"></div>
|
||||
|
||||
<div class="section-label">Service Cards (12)</div>
|
||||
<div class="grid" id="services"></div>
|
||||
|
||||
<div class="lb" id="lb" onclick="closeLB()">
|
||||
<img id="lb-img" src="">
|
||||
<div class="lb-info">
|
||||
<div class="lb-name" id="lb-name"></div>
|
||||
<div class="lb-model">FLUX.1 Schnell · Q8_0 GGUF · 4 steps · euler · cfg=1.0</div>
|
||||
<div class="lb-prompt" id="lb-prompt"></div>
|
||||
</div>
|
||||
<div class="lb-close">✕</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
const HEROES = [
|
||||
{ file: "hero-carpet-cleaning.webp", prompt: "low-angle 35mm lens perspective looking across thick plush cream carpet in an upstate New York living room, carpet fibers razor sharp in foreground, couch and coffee table receding into shallow bokeh background, warm afternoon window light raking across carpet texture, Finger Lakes farmhouse interior, no people, ultra-realistic architectural photography, 16:9" },
|
||||
{ file: "hero-stairs.webp", prompt: "dramatic low 35mm angle looking up a clean carpeted staircase from floor level, light grey carpet runner sharp and textured in foreground steps, wood banister receding diagonally, bright daylight flooding from above, shallow depth of field, no people, ultra-realistic interior photography, 16:9" },
|
||||
{ file: "hero-upholstery.webp", prompt: "50mm lens low corner angle across a bright residential living room, plush linen fabric sofa arm sharp in near foreground, clean armchair and window receding with bokeh, afternoon countryside light through window, shallow depth of field, no people, ultra-realistic interior photography, 16:9" },
|
||||
{ file: "hero-floors.webp", prompt: "low 24mm angle pressed to gleaming light oak hardwood floor, floor grain razor sharp in extreme foreground receding to hallway vanishing point, white walls, natural light streaming in, shallow depth of field, no people, ultra-realistic interior photography, 16:9" },
|
||||
{ file: "hero-area-rugs.webp", prompt: "low 35mm angle looking across a hand-knotted oriental rug from floor level, rich red and gold rug fibers sharp in foreground, hardwood floor and room receding into bokeh, cozy farmhouse living room, warm natural light, shallow depth of field, no people, ultra-realistic interior photography, 16:9" },
|
||||
{ file: "hero-add-ons.webp", prompt: "low 35mm angle across a clean beige bedroom carpet, carpet pile sharp and detailed in near foreground, wooden bed frame and sheer curtained window receding, crisp morning light, shallow depth of field, no people, no machines, ultra-realistic interior photography, 16:9" },
|
||||
{ file: "hero-commercial.webp", prompt: "low 24mm wide-angle lens across a modern corporate lobby floor, dark charcoal commercial carpet sharp in extreme foreground receding to glass entrance doors, recessed ceiling lights creating depth, strong vanishing point perspective, no people, ultra-realistic architectural photography, 16:9" },
|
||||
{ file: "hero-offices.webp", prompt: "low 24mm angle across clean grey carpet tiles in a modern open-plan office, carpet tile seams sharp in foreground receding to rows of empty desks and glass partitions, professional overhead lighting, strong linear perspective, no people, ultra-realistic architectural photography, 16:9" },
|
||||
{ file: "hero-vacation-rentals.webp", prompt: "low 35mm angle across clean beige carpet in a Finger Lakes cottage living room, carpet fibers sharp in foreground, stone fireplace and lake-view window receding with bokeh, wooden ceiling beams, warm inviting light, shallow depth of field, no people, ultra-realistic interior photography, 16:9" },
|
||||
{ file: "hero-hotels.webp", prompt: "low 24mm lens looking down a long hotel corridor from floor level, patterned burgundy carpet runner sharp in extreme foreground receding to vanishing point, warm wall sconces lining white walls, numbered doors converging in perspective, no people, ultra-realistic hospitality photography, 16:9" },
|
||||
{ file: "hero-retail.webp", prompt: "low 35mm diagonal angle across clean light grey carpet in an upscale retail showroom, carpet surface sharp in foreground, minimalist display fixtures and storefront windows receding with bokeh, bright track lighting overhead, shallow depth of field, no people, ultra-realistic architectural photography, 16:9" },
|
||||
{ file: "hero-property-management.webp", prompt: "low 35mm angle across fresh neutral carpet in an empty move-in ready apartment, carpet texture sharp in foreground, bare white walls and bright windows receding, clean real estate photography perspective, shallow depth of field, no people, ultra-realistic real estate photography, 16:9" },
|
||||
{ file: "hero-about.webp", prompt: "low 35mm angle from lawn level looking up at a classic upstate New York suburban home, green grass blades sharp in extreme foreground, inviting house facade receding upward, mature trees and clear blue sky, warm summer afternoon, no people, ultra-realistic real estate photography, 16:9" },
|
||||
{ file: "hero-service-area.webp", prompt: "low horizon 24mm wide-angle Finger Lakes landscape, green vineyard vines sharp in foreground receding to rolling hills and calm lake, golden hour light casting long shadows, strong depth and distance, no people, ultra-realistic landscape photography, 16:9" },
|
||||
{ file: "hero-living-room.webp", prompt: "low 35mm corner angle across a spacious residential living room, plush light grey carpet sharp and textured in foreground, large sectional sofa and bay windows receding with bokeh, warm afternoon sunlight, shallow depth of field, no people, ultra-realistic interior photography, 16:9" },
|
||||
{ file: "hero-clean-result.webp", prompt: "extreme low 50mm macro angle pressed to immaculate freshly cleaned residential carpet, individual carpet fibers razor sharp in foreground, pile receding into soft bokeh, raking natural light revealing deep clean texture and uniform pile height, no people, ultra-realistic macro carpet photography, 16:9" },
|
||||
];
|
||||
|
||||
const SERVICES = [
|
||||
{ file: "carpet-cleaning.webp", prompt: "low 35mm angle looking across plush clean beige carpet in a residential living room, carpet fibers sharp in foreground, couch and window receding into bokeh, warm afternoon light, shallow depth of field, no people, ultra-realistic interior photography" },
|
||||
{ file: "stairs-cleaning.webp", prompt: "low 35mm angle looking up clean grey carpeted stairs from bottom step, carpet texture sharp on nearest step, stairs receding diagonally upward, wood banister, bright light from above, no people, ultra-realistic interior photography" },
|
||||
{ file: "upholstery-cleaning.webp", prompt: "low 50mm angle across a clean plush linen fabric sofa arm, fabric weave sharp in foreground, living room receding with bokeh, warm light, shallow depth of field, no people, ultra-realistic interior photography" },
|
||||
{ file: "floor-cleaning.webp", prompt: "low 24mm angle pressed to gleaming light oak hardwood floor, wood grain razor sharp in extreme foreground receding down hallway, natural light, no people, ultra-realistic interior photography" },
|
||||
{ file: "area-rug-cleaning.webp", prompt: "low 35mm angle across a vibrant clean oriental rug from floor level, rug fibers and pattern sharp in foreground, hardwood floor and room receding, warm light, shallow depth of field, no people, ultra-realistic interior photography" },
|
||||
{ file: "add-ons.webp", prompt: "low 35mm angle across clean beige bedroom carpet, carpet pile sharp in foreground, bed frame and curtained window receding with bokeh, morning light, no people, ultra-realistic interior photography" },
|
||||
{ file: "commercial-overview.webp", prompt: "low 24mm angle across dark commercial carpet in a corporate lobby, carpet surface sharp in foreground receding to glass entrance, strong vanishing point, no people, ultra-realistic architectural photography" },
|
||||
{ file: "vacation-rentals.webp", prompt: "low 35mm angle across clean carpet in a Finger Lakes cottage living room, carpet sharp in foreground, stone fireplace and window receding with bokeh, rustic warm decor, no people, ultra-realistic interior photography" },
|
||||
{ file: "office-spaces.webp", prompt: "low 24mm angle across grey carpet tiles in a modern open office, tile seams sharp in foreground, empty desks receding with linear perspective, professional lighting, no people, ultra-realistic architectural photography" },
|
||||
{ file: "hotels-inns.webp", prompt: "low 24mm angle down a hotel corridor, patterned carpet runner sharp in foreground, corridor receding to vanishing point, warm wall sconces, no people, ultra-realistic hospitality photography" },
|
||||
{ file: "retail-showrooms.webp", prompt: "low 35mm diagonal angle across light grey carpet in an upscale retail showroom, carpet sharp in foreground, display fixtures and track lighting receding with bokeh, no people, ultra-realistic architectural photography" },
|
||||
{ file: "property-management.webp", prompt: "low 35mm angle across fresh neutral carpet in an empty clean apartment, carpet texture sharp in foreground, white walls and windows receding, no people, ultra-realistic real estate photography" },
|
||||
];
|
||||
|
||||
function openLB(src, name, prompt) {
|
||||
document.getElementById('lb-img').src = src;
|
||||
document.getElementById('lb-name').textContent = name;
|
||||
document.getElementById('lb-prompt').textContent = prompt;
|
||||
document.getElementById('lb').classList.add('open');
|
||||
}
|
||||
function closeLB() { document.getElementById('lb').classList.remove('open'); }
|
||||
|
||||
function buildCards(items, containerId, basePath) {
|
||||
const el = document.getElementById(containerId);
|
||||
items.forEach(item => {
|
||||
const src = basePath + item.file;
|
||||
const name = item.file.replace('.webp','');
|
||||
const card = document.createElement('div');
|
||||
card.className = 'card';
|
||||
card.innerHTML = `<img src="${src}" loading="lazy"><div class="info"><div class="tag">FLUX.1 Schnell</div><div class="name">${name}</div><div class="prompt">${item.prompt.substring(0,120)}…</div></div>`;
|
||||
card.onclick = () => openLB(src, name, item.prompt);
|
||||
el.appendChild(card);
|
||||
});
|
||||
}
|
||||
|
||||
buildCards(HEROES, 'heroes', '../assets/images/hero/');
|
||||
buildCards(SERVICES, 'services', '../assets/images/services/');
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user