Arnie via Claude
87 lines
4.9 KiB
HTML
87 lines
4.9 KiB
HTML
<h2>What style for the corner decoration?</h2>
|
||
<p class="subtitle">1 meter tall corner trim, wall-to-wall 90° corner, split into 4 × 25cm pieces</p>
|
||
|
||
<div class="cards">
|
||
|
||
<div class="card" data-choice="geometric" onclick="toggleSelect(this)">
|
||
<div class="card-image" style="background:#1a1a2e;display:flex;align-items:center;justify-content:center;height:160px;">
|
||
<svg width="80" height="140" viewBox="0 0 80 140">
|
||
<!-- corner silhouette with geometric pattern -->
|
||
<polygon points="40,0 80,140 0,140" fill="#16213e" stroke="#0f3460" stroke-width="1"/>
|
||
<line x1="40" y1="20" x2="20" y2="110" stroke="#e94560" stroke-width="1.5"/>
|
||
<line x1="40" y1="20" x2="60" y2="110" stroke="#e94560" stroke-width="1.5"/>
|
||
<line x1="28" y1="55" x2="52" y2="55" stroke="#e94560" stroke-width="1"/>
|
||
<line x1="24" y1="75" x2="56" y2="75" stroke="#e94560" stroke-width="1"/>
|
||
<line x1="20" y1="95" x2="60" y2="95" stroke="#e94560" stroke-width="1"/>
|
||
<circle cx="40" cy="20" r="3" fill="#e94560"/>
|
||
<circle cx="20" cy="110" r="3" fill="#e94560"/>
|
||
<circle cx="60" cy="110" r="3" fill="#e94560"/>
|
||
</svg>
|
||
</div>
|
||
<div class="card-body">
|
||
<h3>Geometric / Modern</h3>
|
||
<p>Clean angular lines, diamond or triangular facets, sharp repeating pattern. Looks great in contemporary interiors.</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="card" data-choice="classic" onclick="toggleSelect(this)">
|
||
<div class="card-image" style="background:#1a1a2e;display:flex;align-items:center;justify-content:center;height:160px;">
|
||
<svg width="80" height="140" viewBox="0 0 80 140">
|
||
<!-- classical molding profile suggestion -->
|
||
<path d="M40,5 C30,15 20,25 20,40 C20,55 30,60 30,75 C30,90 20,95 20,110 C20,125 30,130 40,135 C50,130 60,125 60,110 C60,95 50,90 50,75 C50,60 60,55 60,40 C60,25 50,15 40,5Z" fill="#2a2a4a" stroke="#c9a84c" stroke-width="1.5"/>
|
||
<ellipse cx="40" cy="35" rx="8" ry="5" fill="none" stroke="#c9a84c" stroke-width="1"/>
|
||
<ellipse cx="40" cy="75" rx="8" ry="5" fill="none" stroke="#c9a84c" stroke-width="1"/>
|
||
<ellipse cx="40" cy="115" rx="8" ry="5" fill="none" stroke="#c9a84c" stroke-width="1"/>
|
||
<line x1="30" y1="55" x2="50" y2="55" stroke="#c9a84c" stroke-width="0.5"/>
|
||
<line x1="30" y1="95" x2="50" y2="95" stroke="#c9a84c" stroke-width="0.5"/>
|
||
</svg>
|
||
</div>
|
||
<div class="card-body">
|
||
<h3>Classical / Ornate</h3>
|
||
<p>Curved profiles, egg-and-dart or bead motifs, traditional molding style. Suits older or formal interiors.</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="card" data-choice="nature" onclick="toggleSelect(this)">
|
||
<div class="card-image" style="background:#1a1a2e;display:flex;align-items:center;justify-content:center;height:160px;">
|
||
<svg width="80" height="140" viewBox="0 0 80 140">
|
||
<!-- organic / vine -->
|
||
<path d="M40,10 Q35,30 38,50 Q42,65 36,85 Q30,105 38,130" fill="none" stroke="#4a9e6a" stroke-width="2.5"/>
|
||
<!-- leaves -->
|
||
<path d="M38,30 Q25,25 22,35 Q30,38 38,30Z" fill="#4a9e6a" opacity="0.8"/>
|
||
<path d="M39,30 Q52,22 55,32 Q47,38 39,30Z" fill="#6ab87a" opacity="0.7"/>
|
||
<path d="M36,60 Q22,52 20,64 Q28,68 36,60Z" fill="#4a9e6a" opacity="0.8"/>
|
||
<path d="M37,60 Q50,50 54,62 Q46,68 37,60Z" fill="#6ab87a" opacity="0.7"/>
|
||
<path d="M36,95 Q20,88 18,100 Q28,105 36,95Z" fill="#4a9e6a" opacity="0.8"/>
|
||
<path d="M37,95 Q52,86 56,99 Q47,106 37,95Z" fill="#6ab87a" opacity="0.7"/>
|
||
<circle cx="38" cy="30" r="2" fill="#c9a84c"/>
|
||
<circle cx="36" cy="60" r="2" fill="#c9a84c"/>
|
||
<circle cx="36" cy="95" r="2" fill="#c9a84c"/>
|
||
</svg>
|
||
</div>
|
||
<div class="card-body">
|
||
<h3>Nature / Organic</h3>
|
||
<p>Flowing vines, leaves, or botanical motifs. Soft curves, asymmetric detail. Pairs with eclectic or boho spaces.</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="card" data-choice="minimal" onclick="toggleSelect(this)">
|
||
<div class="card-image" style="background:#1a1a2e;display:flex;align-items:center;justify-content:center;height:160px;">
|
||
<svg width="80" height="140" viewBox="0 0 80 140">
|
||
<!-- minimal rounded corner bead -->
|
||
<rect x="30" y="5" width="20" height="130" rx="10" fill="#2a2a4a" stroke="#888" stroke-width="1"/>
|
||
<rect x="33" y="5" width="14" height="130" rx="7" fill="#3a3a5a" stroke="none"/>
|
||
<!-- subtle groove lines -->
|
||
<line x1="40" y1="35" x2="40" y2="45" stroke="#555" stroke-width="3" stroke-linecap="round"/>
|
||
<line x1="40" y1="65" x2="40" y2="75" stroke="#555" stroke-width="3" stroke-linecap="round"/>
|
||
<line x1="40" y1="95" x2="40" y2="105" stroke="#555" stroke-width="3" stroke-linecap="round"/>
|
||
</svg>
|
||
</div>
|
||
<div class="card-body">
|
||
<h3>Minimalist</h3>
|
||
<p>Smooth rounded bead or simple stepped profile, maybe subtle groove accents. Blends into almost any interior.</p>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|