Here is the complete, self-contained index.html file.
You can simply copy the code below, paste it into a plain text file on your computer, save it as index.html, drop it inside a folder (e.g., named portfolio), and drag that folder right onto Netlify Drop to get your site live!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>バウネ映像写真館 | John Baune Visuals — Shōwa Film & Motion</title>
<script src="https://cdn.tailwindcss.com"></script>
<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=IBM+Plex+Mono:ital,wght@0,400;0,500;0,600;1,400&family=Noto+Serif+JP:wght@400;600;700;900&family=Shippori+Mincho:wght@400;600;800&display=swap" rel="stylesheet">
<style>
:root {
--paper: #F2ECE1;
--paper-dark: #E5DEC9;
--sumi: #181615;
--shu: #C83E2B;
--amber: #D9822B;
--emerald: #1F4E43;
--film-border: #111111;
}
body {
background-color: var(--paper);
color: var(--sumi);
font-family: 'Shippori Mincho', 'Noto Serif JP', serif;
overflow-x: hidden;
}
.font-mono-tech {
font-family: 'IBM Plex Mono', monospace;
}
/* Vertical Japanese Text (Tategaki) */
.tategaki {
writing-mode: vertical-rl;
text-orientation: upright;
letter-spacing: 0.18em;
}
/* Hanko Stamp Effect */
.hanko {
display: inline-flex;
align-items: center;
justify-content: center;
border: 2.5px solid var(--shu);
color: var(--shu);
border-radius: 4px;
padding: 4px 6px;
font-weight: 900;
line-height: 1.05;
transform: rotate(-3deg);
box-shadow: inset 0 0 2px rgba(200, 62, 43, 0.4);
mask-image: radial-gradient(circle, rgba(0,0,0,1) 80%, rgba(0,0,0,0.6) 100%);
}
/* Film Grain Overlay */
.grain-overlay {
pointer-events: none;
position: fixed;
inset: 0;
z-index: 999;
opacity: 0.22;
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
}
/* Showa Film Emulations */
.stock-fujicolor img, .stock-fujicolor .film-preview {
filter: contrast(1.06) saturate(1.12) sepia(0.18) hue-rotate(-4deg);
}
.stock-neopan img, .stock-neopan .film-preview {
filter: grayscale(1) contrast(1.45) brightness(0.95);
}
.stock-sakura img, .stock-sakura .film-preview {
filter: contrast(0.96) saturate(0.88) sepia(0.28) brightness(1.03);
}
/* Quartz Date Stamp (80s Point & Shoot style) */
.quartz-date {
font-family: 'IBM Plex Mono', monospace;
color: #FF6B1A;
text-shadow: 0 0 6px rgba(255, 107, 26, 0.85), 0 0 2px rgba(255, 60, 0, 0.9);
letter-spacing: 0.12em;
font-weight: 600;
}
/* 35mm Sprocket Holes */
.sprocket-holes {
background-image: repeating-linear-gradient(
to right,
transparent 0px,
transparent 12px,
#F2ECE1 12px,
#F2ECE1 24px,
transparent 24px,
transparent 36px
);
height: 10px;
}
/* Light Leak Effect */
.light-leak::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background: linear-gradient(125deg, rgba(225, 85, 35, 0.24) 0%, rgba(217, 130, 43, 0.08) 35%, transparent 65%);
mix-blend-mode: screen;
}
/* Custom Scrollbar */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: #E5DEC9; }
::-webkit-scrollbar-thumb { background: #181615; }
</style>
</head>
<body class="stock-fujicolor selection:bg-[#C83E2B] selection:text-white" id="app-body">
<!-- Film Grain Layer -->
<div id="grain-layer" class="grain-overlay"></div>
<!-- Top Darkroom Control Strip -->
<div class="sticky top-0 z-50 bg-[#181615] text-[#F2ECE1] border-b-2 border-[#C83E2B] px-4 py-2.5 text-xs font-mono-tech">
<div class="max-w-7xl mx-auto flex flex-wrap items-center justify-between gap-3">
<div class="flex items-center gap-3">
<span class="bg-[#C83E2B] text-white px-2 py-0.5 font-bold tracking-wider">昭和レトロ現像所</span>
<span class="hidden sm:inline text-[#D9822B]">DARKROOM EMULATION:</span>
<div class="flex items-center gap-1 bg-black/50 p-1 rounded border border-neutral-700">
<button onclick="setFilmStock('fujicolor')" id="btn-fujicolor" class="px-2.5 py-1 bg-[#1F4E43] text-white font-semibold transition">FUJICOLOR F-II (76)</button>
<button onclick="setFilmStock('neopan')" id="btn-neopan" class="px-2.5 py-1 hover:bg-neutral-800 text-neutral-300 transition">NEOPAN 400 (B&W)</button>
<button onclick="setFilmStock('sakura')" id="btn-sakura" class="px-2.5 py-1 hover:bg-neutral-800 text-neutral-300 transition">SAKURA KONICA (68)</button>
</div>
</div>
<div class="flex items-center gap-3">
<button onclick="toggleGrain()" id="grain-btn" class="px-2.5 py-1 border border-neutral-600 hover:border-[#D9822B] text-neutral-200 transition">
GRAIN: ON
</button>
<button onclick="openBatchUpload()" class="px-3 py-1 bg-[#C83E2B] hover:bg-[#a93221] text-white font-semibold flex items-center gap-1.5 transition cursor-pointer">
<span>+ LOAD GOOGLE PHOTOS</span>
</button>
<button onclick="resetPhotos()" class="px-2 py-1 text-neutral-400 hover:text-white underline" title="Reset custom photos">
Reset
</button>
</div>
</div>
</div>
<!-- Main Header / Indie Zine Masthead -->
<header class="border-b-4 border-[#181615] bg-[#F2ECE1] relative">
<div class="max-w-7xl mx-auto px-4 sm:px-8 py-8 md:py-12">
<div class="grid grid-cols-1 lg:grid-cols-12 gap-8 items-start">
<!-- Left Vertical Japanese Title & Hanko -->
<div class="lg:col-span-2 flex lg:flex-col items-center lg:items-start justify-between border-b lg:border-b-0 lg:border-r-2 border-[#181615] pb-6 lg:pb-0 lg:pr-6">
<div class="flex items-start gap-4">
<h1 class="tategaki text-3xl sm:text-4xl font-black tracking-widest text-[#181615] leading-none select-none">
バウネ映像写真館
</h1>
<div class="tategaki text-xs text-neutral-600 font-mono-tech pt-2">
川越・西オーストラリア
</div>
</div>
<div class="mt-0 lg:mt-8 flex flex-col items-end lg:items-start gap-2">
<div class="hanko text-sm">
<span>寫眞<br>記録</span>
</div>
<span class="font-mono-tech text-[10px] tracking-widest uppercase text-neutral-600">ISSUED: 1978 / 2026</span>
</div>
</div>
<!-- Center Editorial Masthead & Lead Photo -->
<div class="lg:col-span-7 flex flex-col justify-between">
<div class="border-b-2 border-[#181615] pb-4 mb-6 flex flex-wrap items-baseline justify-between gap-2">
<div>
<p class="font-mono-tech text-xs uppercase tracking-[0.2em] text-[#C83E2B] font-semibold">
SHŌWA SILVER HALIDE & 8MM MOTION ARCHIVE
</p>
<h2 class="text-4xl sm:text-6xl font-black tracking-tight mt-1">
JOHN BAUNE
</h2>
</div>
<div class="text-right font-mono-tech text-xs">
<p class="bg-[#181615] text-[#F2ECE1] px-2 py-0.5 inline-block">VOL. 04 — KAWAGOE TO PERTH</p>
<p class="mt-1 text-neutral-600">35MM STILL / 16MM & 4K MOTION</p>
</div>
</div>
<!-- Featured Hero Negative Frame -->
<div class="relative bg-[#121212] p-3 sm:p-5 shadow-2xl group light-leak">
<div class="flex justify-between items-center text-[11px] font-mono-tech text-[#D9822B] mb-2">
<span>▶ FUJI RVP 50</span>
<span>FRAME 00A — FEATURE</span>
<span>◁ 36A</span>
</div>
<div class="relative aspect-[16/10] overflow-hidden bg-black">
<img id="hero-img" src="https://images.unsplash.com/photo-1503899036084-c55cdd92da26?auto=format&fit=crop&w=1400&q=85" alt="Featured Frame" class="w-full h-full object-cover transition duration-700 group-hover:scale-105" />
<div class="absolute bottom-3 right-4 quartz-date text-sm sm:text-base">
'86 10 14
</div>
<button onclick="triggerPhotoSwap('hero')" class="absolute top-3 right-3 bg-[#181615]/90 hover:bg-[#C83E2B] text-[#F2ECE1] font-mono-tech text-xs px-3 py-1.5 border border-[#F2ECE1]/40 transition">
[SWAP HERO PHOTO]
</button>
</div>
<div class="mt-3 flex justify-between items-center text-xs text-neutral-300 font-mono-tech">
<span>LOC: KOEDO KAWAGOE / SWAN VALLEY</span>
<span>LENS: 50MM F/1.4 PLANAR</span>
</div>
</div>
</div>
<!-- Right Column Manifesto & Navigation Index -->
<div class="lg:col-span-3 border-t lg:border-t-0 lg:border-l-2 border-[#181615] pt-6 lg:pt-0 lg:pl-6 flex flex-col justify-between h-full">
<div>
<div class="bg-[#181615] text-[#F2ECE1] px-3 py-1.5 font-mono-tech text-xs uppercase tracking-widest mb-4 flex justify-between">
<span>目録 / INDEX</span>
<span>P. 01</span>
</div>
<nav class="space-y-2.5 text-sm font-semibold border-b-2 border-[#181615] pb-6">
<a href="#contact-sheet" class="flex justify-between items-center hover:text-[#C83E2B] transition py-1 border-b border-dashed border-neutral-400">
<span>01. 密着印画 / Contact Sheet</span>
<span class="font-mono-tech text-xs">→</span>
</a>
<a href="#telecine" class="flex justify-between items-center hover:text-[#C83E2B] transition py-1 border-b border-dashed border-neutral-400">
<span>02. 映写室 / 8mm & Studio Motion</span>
<span class="font-mono-tech text-xs">→</span>
</a>
<a href="#rates" class="flex justify-between items-center hover:text-[#C83E2B] transition py-1 border-b border-dashed border-neutral-400">
<span>03. 料金表 / Darkroom Menu</span>
<span class="font-mono-tech text-xs">→</span>
</a>
<a href="#dispatch" class="flex justify-between items-center hover:text-[#C83E2B] transition py-1">
<span>04. 電報依頼 / Commission Slip</span>
<span class="font-mono-tech text-xs">→</span>
</a>
</nav>
<div class="mt-6 bg-[#E5DEC9] p-4 border border-[#181615]">
<p class="text-xs font-mono-tech uppercase text-[#C83E2B] font-bold mb-1">作家ノート / STATEMENT</p>
<p class="text-sm leading-relaxed text-neutral-800">
Unpolished grain, warm halation, and candid human presence. Documenting street corners in Saitama, quiet family moments in the Perth Hills, and live studio productions with the tactile honesty of Shōwa-era silver gelatin prints.
</p>
</div>
</div>
<div class="mt-6 pt-4 border-t border-[#181615] font-mono-tech text-[11px] text-neutral-600 space-y-1">
<div>STUDIO: BRABHAM / PERTH WA</div>
<div>ARCHIVE: KAWAGOE, SAITAMA JP</div>
<div class="text-[#1F4E43] font-bold">● AVAILABLE FOR COMMISSIONS</div>
</div>
</div>
</div>
</div>
</header>
<!-- Section 01: 35mm Contact Sheet Gallery (密着印画) -->
<section id="contact-sheet" class="py-16 px-4 sm:px-8 max-w-7xl mx-auto">
<div class="flex flex-col md:flex-row md:items-end justify-between border-b-4 border-[#181615] pb-4 mb-8 gap-4">
<div>
<div class="flex items-center gap-3">
<span class="bg-[#C83E2B] text-white font-mono-tech text-xs px-2 py-0.5 font-bold">ARCHIVE 01</span>
<span class="font-mono-tech text-xs uppercase tracking-widest text-neutral-600">PROOF SHEET / 35MM NEGATIVE STRIPS</span>
</div>
<h3 class="text-3xl sm:text-4xl font-black mt-2">密着印画・作品集 <span class="text-xl font-normal text-neutral-600">/ Contact Sheet</span></h3>
</div>
<!-- Category Filter Tabs -->
<div class="flex flex-wrap gap-1.5 font-mono-tech text-xs" id="filter-tabs">
<button onclick="filterGallery('all')" data-cat="all" class="filter-btn bg-[#181615] text-[#F2ECE1] px-3 py-1.5 border border-[#181615] transition">ALL ROLLS</button>
<button onclick="filterGallery('kawagoe')" data-cat="kawagoe" class="filter-btn bg-[#E5DEC9] text-[#181615] hover:bg-[#181615] hover:text-[#F2ECE1] px-3 py-1.5 border border-[#181615] transition">川越・東京 STREETS</button>
<button onclick="filterGallery('family')" data-cat="family" class="filter-btn bg-[#E5DEC9] text-[#181615] hover:bg-[#181615] hover:text-[#F2ECE1] px-3 py-1.5 border border-[#181615] transition">家族・日常 PORTRAITS</button>
<button onclick="filterGallery('wa')" data-cat="wa" class="filter-btn bg-[#E5DEC9] text-[#181615] hover:bg-[#181615] hover:text-[#F2ECE1] px-3 py-1.5 border border-[#181615] transition">西豪州 LANDSCAPES</button>
<button onclick="filterGallery('companions')" data-cat="companions" class="filter-btn bg-[#E5DEC9] text-[#181615] hover:bg-[#181615] hover:text-[#F2ECE1] px-3 py-1.5 border border-[#181615] transition">猫と犬 COMPANIONS</button>
</div>
</div>
<!-- Instructions Banner for Google Photos -->
<div class="mb-8 bg-[#E5DEC9] border-2 border-[#181615] p-4 flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4">
<div class="flex items-center gap-3">
<span class="hanko text-xs shrink-0">写真<br>入替</span>
<p class="text-xs sm:text-sm">
<strong>Your Google Photos Library:</strong> Click <strong>[SWAP PHOTO]</strong> on any frame below to load your own portraits, street snaps, or family albums directly from your computer/Google Photos exports. Everything saves automatically in your browser.
</p>
</div>
<button onclick="openBatchUpload()" class="shrink-0 bg-[#181615] hover:bg-[#C83E2B] text-[#F2ECE1] font-mono-tech text-xs px-4 py-2 transition">
+ ADD MULTIPLE PHOTOS
</button>
</div>
<!-- Contact Sheet Wrapper -->
<div class="bg-[#121212] p-4 sm:p-8 border-4 border-[#181615] shadow-2xl">
<div class="sprocket-holes mb-4 opacity-80"></div>
<div id="gallery-grid" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
<!-- Rendered dynamically by JS -->
</div>
<div class="sprocket-holes mt-6 opacity-80"></div>
</div>
</section>
<!-- Section 02: 8mm & Studio Telecine Room (昭和映写室) -->
<section id="telecine" class="py-16 bg-[#181615] text-[#F2ECE1] border-y-4 border-[#C83E2B]">
<div class="max-w-7xl mx-auto px-4 sm:px-8">
<div class="grid grid-cols-1 lg:grid-cols-12 gap-10 items-center">
<div class="lg:col-span-5 space-y-6">
<div class="inline-block bg-[#C83E2B] text-white font-mono-tech text-xs px-2.5 py-1 font-bold">
ARCHIVE 02 / TELECINE & STUDIO MOTION
</div>
<h3 class="text-3xl sm:text-5xl font-black leading-tight">
昭和映写室<br>
<span class="text-[#D9822B] text-2xl sm:text-3xl font-normal">Motion Picture & Stage Production</span>
</h3>
<p class="text-neutral-300 text-sm sm:text-base leading-relaxed">
From multi-camera studio shoots with performers and crew to intimate handheld family reels in the park. Edited with rhythmic pacing, analog sound design, and authentic film halation.
</p>
<!-- Reel Selector -->
<div class="space-y-3 pt-2 font-mono-tech text-xs">
<p class="text-[#D9822B] uppercase tracking-wider">SELECT REEL CARTRIDGE:</p>
<button onclick="selectReel(0)" id="reel-btn-0" class="w-full text-left p-3.5 border-2 border-[#C83E2B] bg-black/60 flex items-center justify-between transition">
<div>
<div class="font-bold text-white">REEL A: STUDIO PERFORMANCE & CREW</div>
<div class="text-neutral-400 text-[11px] mt-0.5">Multi-cam lighting • Live stage • Soundstage reel</div>
</div>
<span class="bg-[#C83E2B] text-white px-2 py-0.5">PLAYING</span>
</button>
<button onclick="selectReel(1)" id="reel-btn-1" class="w-full text-left p-3.5 border border-neutral-700 hover:border-[#D9822B] bg-black/30 flex items-center justify-between transition">
<div>
<div class="font-bold text-white">REEL B: PARK CHRONICLES & CHILDHOOD</div>
<div class="text-neutral-400 text-[11px] mt-0.5">Sunlight & bubbles • Handheld 16mm texture • Perth parks</div>
</div>
<span class="text-neutral-400">02:15</span>
</button>
<button onclick="selectReel(2)" id="reel-btn-2" class="w-full text-left p-3.5 border border-neutral-700 hover:border-[#D9822B] bg-black/30 flex items-center justify-between transition">
<div>
<div class="font-bold text-white">REEL C: KAWAGOE TO WESTERN AUSTRALIA</div>
<div class="text-neutral-400 text-[11px] mt-0.5">Cross-continental travelogue • Super 8 & 4K hybrid</div>
</div>
<span class="text-neutral-400">03:40</span>
</button>
</div>
</div>
<!-- Retro Trinitron / Telecine Monitor -->
<div class="lg:col-span-7">
<div class="bg-[#262320] p-4 sm:p-6 rounded-lg border-4 border-neutral-700 shadow-2xl">
<div class="flex justify-between items-center mb-3 font-mono-tech text-xs text-neutral-400">
<span class="text-[#D9822B] font-bold">● TELECINE MONITOR // 24 FPS</span>
<span id="reel-code">TC 01:14:22:08</span>
</div>
<!-- Screen Frame -->
<div class="relative aspect-video bg-black overflow-hidden border-4 border-black rounded shadow-inner film-preview light-leak">
<img id="reel-poster" src="https://images.unsplash.com/photo-1485846234645-a62644f84728?auto=format&fit=crop&w=1200&q=85" class="w-full h-full object-cover opacity-85" alt="Reel frame" />
<!-- Scanlines & Viewfinder Crosshair -->
<div class="absolute inset-0 pointer-events-none flex items-center justify-center">
<div class="w-16 h-16 border border-white/30 rounded-full flex items-center justify-center">
<div class="w-2 h-2 bg-[#C83E2B] rounded-full animate-ping"></div>
</div>
</div>
<!-- Top Left OSD -->
<div class="absolute top-4 left-4 font-mono-tech text-xs bg-black/70 px-2.5 py-1 text-[#52FF7C] border border-[#52FF7C]/40">
<span id="reel-title-osd">▶ PLAY // STUDIO SHOWREEL</span>
</div>
<!-- Subtitles (Japanese Cinema Style) -->
<div class="absolute bottom-6 inset-x-6 text-center">
<p id="reel-subtitle" class="inline-block bg-black/80 text-[#F2ECE1] px-4 py-1.5 text-sm sm:text-base tracking-widest border border-white/20">
「光と影のあいだに、記憶を焼き付ける」
</p>
</div>
</div>
<!-- Monitor Controls -->
<div class="mt-4 flex flex-wrap items-center justify-between gap-4 font-mono-tech text-xs">
<div class="flex items-center gap-2">
<span class="text-neutral-400">GATE:</span>
<button onclick="setGate('16:9')" class="px-2 py-1 bg-neutral-800 text-white border border-neutral-600">SUPER 16</button>
<button onclick="setGate('4:3')" class="px-2 py-1 bg-neutral-900 text-neutral-400 border border-neutral-700">REGULAR 8 (4:3)</button>
</div>
<a href="#dispatch" class="bg-[#C83E2B] hover:bg-[#a63120] text-white px-4 py-1.5 font-bold transition">
BOOK VIDEO PRODUCTION →
</a>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Section 03: Showa Darkroom Rate Card (料金表) -->
<section id="rates" class="py-16 px-4 sm:px-8 max-w-7xl mx-auto">
<div class="border-4 border-[#181615] bg-[#E5DEC9] p-6 sm:p-10 relative">
<div class="flex flex-col sm:flex-row sm:items-center justify-between border-b-2 border-[#181615] pb-6 mb-8 gap-4">
<div>
<span class="font-mono-tech text-xs uppercase tracking-widest text-[#C83E2B] font-bold">MENU & SPECIFICATIONS</span>
<h3 class="text-3xl font-black mt-1">撮影料金表 <span class="text-lg font-normal text-neutral-700">/ Commission Packages</span></h3>
</div>
<div class="hanko text-base self-start sm:self-auto">
<span>公認<br>価格</span>
</div>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
<!-- Package 1 -->
<div class="bg-[#F2ECE1] border-2 border-[#181615] p-6 flex flex-col justify-between">
<div>
<div class="flex justify-between items-center font-mono-tech text-xs border-b border-[#181615] pb-2 mb-4">
<span>PLAN A // 肖像・家族</span>
<span class="bg-[#1F4E43] text-white px-2 py-0.5">STILLS</span>
</div>
<h4 class="text-xl font-bold mb-2">Portrait & Family Chronicle</h4>
<p class="text-sm text-neutral-700 mb-4 leading-relaxed">
Natural, unposed outdoor or at-home sessions across Perth, Swan Valley, and regional WA. Graded with signature Shōwa film warmth.
</p>
<ul class="text-xs font-mono-tech space-y-1.5 text-neutral-800 mb-6">
<li>✓ 90-Minute Location Shoot</li>
<li>✓ 60+ High-Res Archival Stills</li>
<li>✓ Custom Contact Sheet Print PDF</li>
</ul>
</div>
<a href="#dispatch" onclick="selectPackage('Portrait & Family Chronicle')" class="block text-center bg-[#181615] hover:bg-[#C83E2B] text-[#F2ECE1] font-mono-tech text-xs py-2.5 transition">
SELECT PLAN A
</a>
</div>
<!-- Package 2 -->
<div class="bg-[#F2ECE1] border-2 border-[#C83E2B] p-6 flex flex-col justify-between relative shadow-lg">
<div>
<div class="flex justify-between items-center font-mono-tech text-xs border-b border-[#181615] pb-2 mb-4">
<span>PLAN B // 映像制作</span>
<span class="bg-[#C83E2B] text-white px-2 py-0.5">MOTION + STILLS</span>
</div>
<h4 class="text-xl font-bold mb-2">Studio, Artist & Event Reel</h4>
<p class="text-sm text-neutral-700 mb-4 leading-relaxed">
Multi-camera videography for performers, creative studios, brands, and live events—paired with behind-the-scenes documentary stills.
</p>
<ul class="text-xs font-mono-tech space-y-1.5 text-neutral-800 mb-6">
<li>✓ Half or Full-Day Production</li>
<li>✓ 4K Master Edit + Vertical Cutdowns</li>
<li>✓ Professional Audio & Color Grade</li>
</ul>
</div>
<a href="#dispatch" onclick="selectPackage('Studio, Artist & Event Reel')" class="block text-center bg-[#C83E2B] hover:bg-[#181615] text-white font-mono-tech text-xs py-2.5 transition">
SELECT PLAN B
</a>
</div>
<!-- Package 3 -->
<div class="bg-[#F2ECE1] border-2 border-[#181615] p-6 flex flex-col justify-between">
<div>
<div class="flex justify-between items-center font-mono-tech text-xs border-b border-[#181615] pb-2 mb-4">
<span>PLAN C // 特別企画</span>
<span class="bg-[#D9822B] text-black px-2 py-0.5 font-bold">BESPOKE</span>
</div>
<h4 class="text-xl font-bold mb-2">Editorial & Cross-Cultural</h4>
<p class="text-sm text-neutral-700 mb-4 leading-relaxed">
Bilingual (English / Japanese) visual production for publications, hospitality venues, artisans, and tourism across WA and Japan.
</p>
<ul class="text-xs font-mono-tech space-y-1.5 text-neutral-800 mb-6">
<li>✓ Storyboard & Art Direction</li>
<li>✓ Stills + Short Documentary Film</li>
<li>✓ Full Commercial Licensing</li>
</ul>
</div>
<a href="#dispatch" onclick="selectPackage('Editorial & Cross-Cultural')" class="block text-center bg-[#181615] hover:bg-[#C83E2B] text-[#F2ECE1] font-mono-tech text-xs py-2.5 transition">
SELECT PLAN C
</a>
</div>
</div>
</div>
</section>
<!-- Section 04: Darkroom Order Slip / Commission Form (電報・現像依頼票) -->
<section id="dispatch" class="py-16 px-4 sm:px-8 max-w-4xl mx-auto">
<div class="bg-[#F2ECE1] border-4 border-[#181615] p-6 sm:p-10 shadow-2xl relative">
<div class="flex justify-between items-start border-b-2 border-[#181615] pb-4 mb-6">
<div>
<p class="font-mono-tech text-xs text-[#C83E2B] font-bold">FORM NO. 1988-JB // DARKROOM ORDER SLIP</p>
<h3 class="text-2xl sm:text-3xl font-black mt-1">撮影・現像依頼票 / Commission Dispatch</h3>
</div>
<div class="hanko text-xs">
<span>受付<br>済印</span>
</div>
</div>
<form id="booking-form" onsubmit="submitBooking(event)" class="space-y-5 font-mono-tech text-xs sm:text-sm">
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
<div>
<label class="block font-bold uppercase mb-1">01. ご芳名 / Client Name *</label>
<input type="text" required placeholder="Your Name" class="w-full bg-[#E5DEC9] border-2 border-[#181615] p-2.5 focus:outline-none focus:border-[#C83E2B]" />
</div>
<div>
<label class="block font-bold uppercase mb-1">02. 連絡先 / Email or Phone *</label>
<input type="text" required placeholder="name@example.com" class="w-full bg-[#E5DEC9] border-2 border-[#181615] p-2.5 focus:outline-none focus:border-[#C83E2B]" />
</div>
</div>
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
<div>
<label class="block font-bold uppercase mb-1">03. ご希望プラン / Package</label>
<select id="package-select" class="w-full bg-[#E5DEC9] border-2 border-[#181615] p-2.5 focus:outline-none focus:border-[#C83E2B]">
<option value="Portrait & Family Chronicle">Plan A: Portrait & Family Chronicle</option>
<option value="Studio, Artist & Event Reel">Plan B: Studio, Artist & Event Reel</option>
<option value="Editorial & Cross-Cultural">Plan C: Editorial & Cross-Cultural</option>
</select>
</div>
<div>
<label class="block font-bold uppercase mb-1">04. 撮影場所 / Location</label>
<input type="text" placeholder="e.g. Swan Valley, Perth CBD, Studio..." class="w-full bg-[#E5DEC9] border-2 border-[#181615] p-2.5 focus:outline-none focus:border-[#C83E2B]" />
</div>
</div>
<div>
<label class="block font-bold uppercase mb-1">05. 内容詳細 / Project Notes</label>
<textarea rows="4" placeholder="Tell me about the mood, dates, or story you want to capture..." class="w-full bg-[#E5DEC9] border-2 border-[#181615] p-2.5 focus:outline-none focus:border-[#C83E2B]"></textarea>
</div>
<div class="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4 pt-2">
<span class="text-xs text-neutral-600">STAMPED & DISPATCHED DIRECTLY TO JOHN BAUNE</span>
<button type="submit" class="w-full sm:w-auto bg-[#C83E2B] hover:bg-[#181615] text-white font-bold px-8 py-3 transition cursor-pointer">
STAMP & SEND ORDER SLIP →
</button>
</div>
</form>
<div id="booking-confirm" class="hidden mt-6 bg-[#1F4E43] text-white p-4 font-mono-tech text-xs border-2 border-[#181615]">
✓ 現像依頼を受理しました — Order slip stamped and logged! John will respond shortly.
</div>
</div>
</section>
<!-- Footer -->
<footer class="bg-[#181615] text-[#F2ECE1] py-10 px-4 sm:px-8 border-t-4 border-[#C83E2B] font-mono-tech text-xs">
<div class="max-w-7xl mx-auto flex flex-col sm:flex-row items-center justify-between gap-4">
<div class="flex items-center gap-3">
<span class="hanko text-xs border-[#C83E2B] text-[#C83E2B]">バウネ</span>
<span>© JOHN FREDERICK BAUNE VISUALS (バウネ映像写真館) — PERTH, WA & KAWAGOE, JP</span>
</div>
<div class="text-neutral-400">
PRINTED ON ARCHIVAL SHŌWA STOCK
</div>
</div>
</footer>
<!-- Hidden File Inputs for Google Photos Replacement -->
<input type="file" id="single-file-input" accept="image/*" class="hidden" onchange="handleSingleFileSelect(event)" />
<input type="file" id="batch-file-input" accept="image/*" multiple class="hidden" onchange="handleBatchFileSelect(event)" />
<script>
const defaultPhotos = [
{
id: 'frame-01',
code: '▶ 01A',
title: '小江戸の午後 / Afternoon in Koedo',
category: 'kawagoe',
date: "'84 04 08",
notes: 'Kawagoe warehouse district — 35mm F/2',
src: 'https://images.unsplash.com/photo-1545569341-9eb8b30979d9?auto=format&fit=crop&w=900&q=80'
},
{
id: 'frame-02',
code: '▶ 02A',
title: '公園のシャボン玉 / Soap Bubbles in the Park',
category: 'family',
date: "'86 10 13",
notes: 'Afternoon light & laughter — 50mm F/1.4',
src: 'https://images.unsplash.com/photo-1502086223501-7ea6ecd79368?auto=format&fit=crop&w=900&q=80'
},
{
id: 'frame-03',
code: '▶ 03A',
title: 'スワンバレーの夕暮れ / Swan Valley Dusk',
category: 'wa',
date: "'86 08 21",
notes: 'Eastern corridor golden hour — Fujicolor',
src: 'https://images.unsplash.com/photo-1506744038136-46273834b3fb?auto=format&fit=crop&w=900&q=80'
},
{
id: 'frame-04',
code: '▶ 04A',
title: '午後の猫と犬 / Afternoon Companions',
category: 'companions',
date: "'86 06 05",
notes: 'Quiet sunbeams on the veranda — 85mm',
src: 'https://images.unsplash.com/photo-1514888286974-6c03e2ca1dba?auto=format&fit=crop&w=900&q=80'
},
{
id: 'frame-05',
code: '▶ 05A',
title: '路地裏のネオン / Backstreet Halation',
category: 'kawagoe',
date: "'85 11 19",
notes: 'Evening rain & lantern reflections — Pushed 1 Stop',
src: 'https://images.unsplash.com/photo-1509198397868-475647b2a1e5?auto=format&fit=crop&w=900&q=80'
},
{
id: 'frame-06',
code: '▶ 06A',
title: '平均台のステップ / Balance Beam Steps',
category: 'family',
date: "'86 09 28",
notes: 'Candid childhood milestones in Perth',
src: 'https://images.unsplash.com/photo-1472162072942-cd5147eb3902?auto=format&fit=crop&w=900&q=80'
}
];
const reels = [
{
title: '▶ PLAY // STUDIO SHOWREEL',
tc: 'TC 01:14:22:08',
sub: '「光と影のあいだに、記憶を焼き付ける」',
img: 'https://images.unsplash.com/photo-1485846234645-a62644f84728?auto=format&fit=crop&w=1200&q=85'
},
{
title: '▶ PLAY // PARK CHRONICLES',
tc: 'TC 02:08:11:19',
sub: '「風に舞うシャボン玉と、午後の陽だまり」',
img: 'https://images.unsplash.com/photo-1516627145497-ae6968895b74?auto=format&fit=crop&w=1200&q=85'
},
{
title: '▶ PLAY // KAWAGOE TO WA',
tc: 'TC 03:40:05:02',
sub: '「川越の街並みから、西オーストラリアの広い空へ」',
img: 'https://images.unsplash.com/photo-1493976040374-85c8e12f0c0e?auto=format&fit=crop&w=1200&q=85'
}
];
let photos = JSON.parse(localStorage.getItem('jb_showa_photos')) || defaultPhotos;
let currentFilter = 'all';
let swapTargetId = null;
const savedHero = localStorage.getItem('jb_showa_hero');
if (savedHero) {
document.getElementById('hero-img').src = savedHero;
}
function renderGallery() {
const grid = document.getElementById('gallery-grid');
const filtered = currentFilter === 'all' ? photos : photos.filter(p => p.category === currentFilter);
grid.innerHTML = filtered.map((item, idx) => `
<div class="bg-[#1b1918] p-3 border border-neutral-800 flex flex-col justify-between group relative">
<div class="flex justify-between items-center font-mono-tech text-[11px] text-[#D9822B] mb-2">
<span>${item.code || ('▶ 0' + (idx + 1) + 'A')}</span>
<span class="uppercase text-neutral-400">${item.category}</span>
<span class="text-[#C83E2B]">● REC</span>
</div>
<div class="relative aspect-[4/3] bg-black overflow-hidden">
<img src="${item.src}" alt="${item.title}" class="w-full h-full object-cover transition duration-500 group-hover:scale-105" />
<div class="absolute bottom-2.5 right-3 quartz-date text-xs">
${item.date}
</div>
<button onclick="triggerPhotoSwap('${item.id}')" class="absolute top-2.5 right-2.5 bg-black/85 hover:bg-[#C83E2B] text-white font-mono-tech text-[10px] px-2.5 py-1 border border-white/30 transition">
[SWAP PHOTO]
</button>
</div>
<div class="mt-3 pt-2 border-t border-neutral-800">
<h4 class="text-[#F2ECE1] font-bold text-base">${item.title}</h4>
<p class="font-mono-tech text-[11px] text-neutral-400 mt-0.5">${item.notes}</p>
</div>
</div>
`).join('');
}
function filterGallery(cat) {
currentFilter = cat;
document.querySelectorAll('.filter-btn').forEach(btn => {
if (btn.dataset.cat === cat) {
btn.className = 'filter-btn bg-[#181615] text-[#F2ECE1] px-3 py-1.5 border border-[#181615] transition';
} else {
btn.className = 'filter-btn bg-[#E5DEC9] text-[#181615] hover:bg-[#181615] hover:text-[#F2ECE1] px-3 py-1.5 border border-[#181615] transition';
}
});
renderGallery();
}
function setFilmStock(stock) {
const body = document.getElementById('app-body');
body.classList.remove('stock-fujicolor', 'stock-neopan', 'stock-sakura');
body.classList.add('stock-' + stock);
['fujicolor', 'neopan', 'sakura'].forEach(s => {
const btn = document.getElementById('btn-' + s);
if (s === stock) {
btn.className = 'px-2.5 py-1 bg-[#1F4E43] text-white font-semibold transition';
} else {
btn.className = 'px-2.5 py-1 hover:bg-neutral-800 text-neutral-300 transition';
}
});
}
function toggleGrain() {
const grain = document.getElementById('grain-layer');
const btn = document.getElementById('grain-btn');
if (grain.style.display === 'none') {
grain.style.display = 'block';
btn.textContent = 'GRAIN: ON';
} else {
grain.style.display = 'none';
btn.textContent = 'GRAIN: OFF';
}
}
function triggerPhotoSwap(id) {
swapTargetId = id;
document.getElementById('single-file-input').click();
}
function handleSingleFileSelect(event) {
const file = event.target.files[0];
if (!file) return;
const reader = new FileReader();
reader.onload = function(e) {
if (swapTargetId === 'hero') {
document.getElementById('hero-img').src = e.target.result;
localStorage.setItem('jb_showa_hero', e.target.result);
} else {
photos = photos.map(p => p.id === swapTargetId ? { ...p, src: e.target.result } : p);
localStorage.setItem('jb_showa_photos', JSON.stringify(photos));
renderGallery();
}
};
reader.readAsDataURL(file);
}
function openBatchUpload() {
document.getElementById('batch-file-input').click();
}
function handleBatchFileSelect(event) {
const files = Array.from(event.target.files);
if (!files.length) return;
files.forEach((file, i) => {
const reader = new FileReader();
reader.onload = function(e) {
const newEntry = {
id: 'custom-' + Date.now() + '-' + i,
code: '▶ NEW',
title: file.name.replace(/\.[^/.]+$/, ""),
category: currentFilter === 'all' ? 'family' : currentFilter,
date: "'86 10 14",
notes: 'Imported from Google Photos Archive',
src: e.target.result
};
photos.unshift(newEntry);
localStorage.setItem('jb_showa_photos', JSON.stringify(photos));
renderGallery();
};
reader.readAsDataURL(file);
});
}
function resetPhotos() {
localStorage.removeItem('jb_showa_photos');
localStorage.removeItem('jb_showa_hero');
photos = [...defaultPhotos];
document.getElementById('hero-img').src = 'https://images.unsplash.com/photo-1503899036084-c55cdd92da26?auto=format&fit=crop&w=1400&q=85';
renderGallery();
}
function selectReel(idx) {
const r = reels[idx];
document.getElementById('reel-title-osd').textContent = r.title;
document.getElementById('reel-code').textContent = r.tc;
document.getElementById('reel-subtitle').textContent = r.sub;
document.getElementById('reel-poster').src = r.img;
[0, 1, 2].forEach(i => {
const btn = document.getElementById('reel-btn-' + i);
if (i === idx) {
btn.className = 'w-full text-left p-3.5 border-2 border-[#C83E2B] bg-black/60 flex items-center justify-between transition';
} else {
btn.className = 'w-full text-left p-3.5 border border-neutral-700 hover:border-[#D9822B] bg-black/30 flex items-center justify-between transition';
}
});
}
function setGate(ratio) {
const img = document.getElementById('reel-poster');
img.style.padding = ratio === '4:3' ? '0 12%' : '0';
}
function selectPackage(pkg) {
document.getElementById('package-select').value = pkg;
}
function submitBooking(e) {
e.preventDefault();
document.getElementById('booking-confirm').classList.remove('hidden');
e.target.reset();
}
renderGallery();
</script>
</body>
</html>