C3C/android-webview-kiosk
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: nix dev shell with Android SDK 34, JDK 17, gradle

Browse Source
This commit is contained in:
Arnie via Claude
2026-06-12 00:28:27 +02:00
parent 0e43f970a6
commit fd877411ef
17 changed files with 1651 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.superpowers/brainstorm/421-1781209654/content/cross-section.html
+89
View File
@@ -0,0 +1,89 @@
<h2>Cross-section of the twisted spine</h2>
<p class="subtitle">The shape that rotates as it rises — shown end-on, then how twist looks from front</p>
<div class="cards">
<div class="card" data-choice="ribbon" onclick="toggleSelect(this)">
<div class="card-image" style="background:#111;display:flex;align-items:center;justify-content:center;height:180px;gap:24px;">
<!-- end-on -->
<svg width="60" height="60" viewBox="-30 -30 60 60">
<text x="-28" y="-18" fill="#555" font-size="8" font-family="monospace">end-on</text>
<ellipse cx="0" cy="0" rx="22" ry="5" fill="#7c3aed" opacity="0.9"/>
</svg>
<!-- side view of twist -->
<svg width="60" height="140" viewBox="-30 -70 60 140">
<text x="-28" y="-62" fill="#555" font-size="8" font-family="monospace">front</text>
<!-- ribbon twisting -->
<path d="M-20,-60 Q20,-40 20,-20 Q-20,0 -20,20 Q20,40 20,60" fill="none" stroke="#7c3aed" stroke-width="3" stroke-linecap="round"/>
<path d="M20,-60 Q-20,-40 -20,-20 Q20,0 20,20 Q-20,40 -20,60" fill="none" stroke="#a78bfa" stroke-width="1.5" stroke-linecap="round" stroke-dasharray="4,2"/>
</svg>
</div>
<div class="card-body">
<h3>Flat Ribbon / Blade</h3>
<p>Thin wide strip — like a Möbius blade. Very dramatic from the side (wide face) but nearly disappears when viewed edge-on. Strong light/shadow contrast.</p>
</div>
</div>
<div class="card" data-choice="oval" onclick="toggleSelect(this)">
<div class="card-image" style="background:#111;display:flex;align-items:center;justify-content:center;height:180px;gap:24px;">
<svg width="60" height="60" viewBox="-30 -30 60 60">
<text x="-28" y="-18" fill="#555" font-size="8" font-family="monospace">end-on</text>
<ellipse cx="0" cy="0" rx="14" ry="14" fill="#0891b2"/>
</svg>
<svg width="60" height="140" viewBox="-30 -70 60 140">
<text x="-28" y="-62" fill="#555" font-size="8" font-family="monospace">front</text>
<!-- round rod — twist is subtle, gentle S curve outline -->
<path d="M-10,-60 Q12,-30 12,0 Q12,30 -10,60" fill="none" stroke="#0891b2" stroke-width="14" stroke-linecap="round" opacity="0.5"/>
<path d="M-10,-60 Q12,-30 12,0 Q12,30 -10,60" fill="none" stroke="#22d3ee" stroke-width="2" stroke-linecap="round"/>
</svg>
</div>
<div class="card-body">
<h3>Round Rod / Cylinder</h3>
<p>Circular cross-section spirals around corner axis. Twist is subtle — the silhouette curves gently. Smooth and elegant, easiest to print.</p>
</div>
</div>
<div class="card" data-choice="star" onclick="toggleSelect(this)">
<div class="card-image" style="background:#111;display:flex;align-items:center;justify-content:center;height:180px;gap:24px;">
<svg width="60" height="60" viewBox="-30 -30 60 60">
<text x="-28" y="-18" fill="#555" font-size="8" font-family="monospace">end-on</text>
<polygon points="0,-18 5,-7 17,-7 8,2 12,15 0,8 -12,15 -8,2 -17,-7 -5,-7" fill="#d97706"/>
</svg>
<svg width="60" height="140" viewBox="-30 -70 60 140">
<text x="-28" y="-62" fill="#555" font-size="8" font-family="monospace">front</text>
<!-- star cross-section twisting — shows alternating spike silhouette -->
<path d="M0,-60 Q18,-40 0,-20 Q-18,0 0,20 Q18,40 0,60" fill="none" stroke="#d97706" stroke-width="3"/>
<line x1="-18" y1="-40" x2="18" y2="-40" stroke="#d97706" stroke-width="1" opacity="0.5"/>
<line x1="-18" y1="0" x2="18" y2="0" stroke="#d97706" stroke-width="1" opacity="0.5"/>
<line x1="-18" y1="40" x2="18" y2="40" stroke="#d97706" stroke-width="1" opacity="0.5"/>
</svg>
</div>
<div class="card-body">
<h3>Star / Multi-Point</h3>
<p>3–5 pointed star cross-section. As it twists the spikes create a dynamic rippling silhouette. Most visually complex, high detail on print.</p>
</div>
</div>
<div class="card" data-choice="triangle" onclick="toggleSelect(this)">
<div class="card-image" style="background:#111;display:flex;align-items:center;justify-content:center;height:180px;gap:24px;">
<svg width="60" height="60" viewBox="-30 -30 60 60">
<text x="-28" y="-18" fill="#555" font-size="8" font-family="monospace">end-on</text>
<polygon points="0,-18 18,12 -18,12" fill="#16a34a"/>
</svg>
<svg width="60" height="140" viewBox="-30 -70 60 140">
<text x="-28" y="-62" fill="#555" font-size="8" font-family="monospace">front</text>
<!-- triangle twisting: alternating wide/narrow faces -->
<path d="M-16,-60 Q16,-30 -16,0 Q16,30 -16,60" fill="none" stroke="#16a34a" stroke-width="2.5"/>
<path d="M16,-60 Q-16,-30 16,0 Q-16,30 16,60" fill="none" stroke="#4ade80" stroke-width="1.5" stroke-dasharray="3,3"/>
<line x1="-16" y1="-60" x2="16" y2="-60" stroke="#16a34a" stroke-width="2"/>
<line x1="-16" y1="0" x2="16" y2="0" stroke="#16a34a" stroke-width="2"/>
<line x1="-16" y1="60" x2="16" y2="60" stroke="#16a34a" stroke-width="2"/>
</svg>
</div>
<div class="card-body">
<h3>Triangle / Prism</h3>
<p>3-sided prism twisting. Faces alternate between facing you and turning away — creates a strong angular rhythm as you walk past.</p>
</div>
</div>
</div>
.superpowers/brainstorm/421-1781209654/content/design-section1.html
+98
View File
@@ -0,0 +1,98 @@
<h2>Design — Cross-section (top view)</h2>
<p class="subtitle">How the piece sits in the corner. All measurements approximate — confirm before generating.</p>
<div class="mockup">
<div class="mockup-header">Top-down cross section at any height</div>
<div class="mockup-body" style="display:flex;justify-content:center;padding:24px 0;">
<svg width="340" height="300" viewBox="-20 -20 340 300">
<!-- Walls -->
<line x1="0" y1="0" x2="0" y2="280" stroke="#555" stroke-width="8" stroke-linecap="square"/>
<line x1="0" y1="0" x2="320" y2="0" stroke="#555" stroke-width="8" stroke-linecap="square"/>
<text x="8" y="140" fill="#777" font-size="11" font-family="monospace">wall</text>
<text x="100" y="14" fill="#777" font-size="11" font-family="monospace">wall</text>
<!-- Flanges (glued to walls) -->
<rect x="4" y="4" width="8" height="38" fill="#7c3aed" opacity="0.7"/>
<rect x="4" y="4" width="38" height="8" fill="#7c3aed" opacity="0.7"/>
<text x="14" y="28" fill="#e9d5ff" font-size="9" font-family="monospace">flange</text>
<!-- Hollow triangular spine -->
<polygon points="4,42 42,4 42,42" fill="#4c1d95" opacity="0.85" stroke="#a78bfa" stroke-width="1.5"/>
<!-- Cable hole -->
<circle cx="28" cy="28" r="5" fill="#111" stroke="#a78bfa" stroke-width="1" stroke-dasharray="2,1"/>
<text x="35" y="22" fill="#a78bfa" font-size="9" font-family="monospace">cable</text>
<line x1="34" y1="21" x2="32" y2="26" stroke="#a78bfa" stroke-width="0.8"/>
<!-- Spine label -->
<text x="7" y="56" fill="#c4b5fd" font-size="9" font-family="monospace">spine</text>
<!-- Ribbon blade — shown at 0° (flat, extending diagonally) -->
<!-- At 0° the blade lies in the XY plane along the 45° diagonal -->
<line x1="42" y1="42" x2="195" y2="195" stroke="#e879f9" stroke-width="10" stroke-linecap="round" opacity="0.9"/>
<!-- Ribbon label -->
<text x="150" y="175" fill="#f0abfc" font-size="11" font-family="monospace" transform="rotate(45 150 175)">ribbon blade (10cm wide)</text>
<!-- Protrusion depth arrow -->
<line x1="4" y1="260" x2="4" y2="270" stroke="#38bdf8" stroke-width="1"/>
<line x1="4" y1="265" x2="140" y2="265" stroke="#38bdf8" stroke-width="1.5" marker-end="url(#arr)"/>
<text x="50" y="280" fill="#38bdf8" font-size="10" font-family="monospace">~8cm from corner axis</text>
<!-- Spine size annotation -->
<line x1="42" y1="50" x2="90" y2="50" stroke="#6b7280" stroke-width="1" stroke-dasharray="2,2"/>
<text x="46" y="63" fill="#9ca3af" font-size="9" font-family="monospace">spine legs ~20mm</text>
<!-- Ribbon thickness annotation -->
<line x1="200" y1="193" x2="215" y2="178" stroke="#6b7280" stroke-width="1"/>
<text x="216" y="176" fill="#9ca3af" font-size="9" font-family="monospace">4mm thick</text>
<!-- Room diagonal guide -->
<line x1="0" y1="0" x2="220" y2="220" stroke="#333" stroke-width="1" stroke-dasharray="4,3"/>
<text x="190" y="240" fill="#444" font-size="9" font-family="monospace">45° diagonal</text>
<!-- Corner dot -->
<circle cx="4" cy="4" r="4" fill="#f59e0b"/>
</svg>
</div>
</div>
<div class="section">
<h3>Key dimensions</h3>
<table style="width:100%;border-collapse:collapse;font-family:monospace;font-size:13px;">
<tr style="border-bottom:1px solid #333">
<td style="padding:6px 12px;color:#9ca3af">Piece height</td>
<td style="padding:6px 12px;color:#e5e7eb">250mm</td>
</tr>
<tr style="border-bottom:1px solid #333">
<td style="padding:6px 12px;color:#9ca3af">Total stack</td>
<td style="padding:6px 12px;color:#e5e7eb">4 pieces × 250mm = 1000mm</td>
</tr>
<tr style="border-bottom:1px solid #333">
<td style="padding:6px 12px;color:#9ca3af">Ribbon width</td>
<td style="padding:6px 12px;color:#e5e7eb">100mm</td>
</tr>
<tr style="border-bottom:1px solid #333">
<td style="padding:6px 12px;color:#9ca3af">Ribbon thickness</td>
<td style="padding:6px 12px;color:#e5e7eb">4mm</td>
</tr>
<tr style="border-bottom:1px solid #333">
<td style="padding:6px 12px;color:#9ca3af">Protrusion from corner</td>
<td style="padding:6px 12px;color:#e5e7eb">~80mm (tip of ribbon at max extent)</td>
</tr>
<tr style="border-bottom:1px solid #333">
<td style="padding:6px 12px;color:#9ca3af">Twist per piece</td>
<td style="padding:6px 12px;color:#e5e7eb">360° — ribbon returns to same angle at top/bottom</td>
</tr>
<tr style="border-bottom:1px solid #333">
<td style="padding:6px 12px;color:#9ca3af">Spine triangle legs</td>
<td style="padding:6px 12px;color:#e5e7eb">~20mm × 20mm (right isosceles, sits in 90° corner)</td>
</tr>
<tr>
<td style="padding:6px 12px;color:#9ca3af">Cable channel</td>
<td style="padding:6px 12px;color:#e5e7eb">~8mm circular hole through centre of spine</td>
</tr>
</table>
</div>
<p class="subtitle" style="margin-top:16px;">Does this cross-section look right? Let me know in terminal.</p>
.superpowers/brainstorm/421-1781209654/content/style-v2.html
+122
View File
@@ -0,0 +1,122 @@
<h2>More abstract — protrudes into room space</h2>
<p class="subtitle">Pieces extend outward from corner (x+y axis), not just flat trim</p>
<div class="cards">
<div class="card" data-choice="twist" onclick="toggleSelect(this)">
<div class="card-image" style="background:#111;display:flex;align-items:center;justify-content:center;height:180px;overflow:hidden;">
<svg width="120" height="160" viewBox="0 0 120 160">
<!-- top-down hint showing corner + protrusion -->
<text x="6" y="14" fill="#555" font-size="9" font-family="monospace">top view →</text>
<!-- wall lines -->
<line x1="10" y1="20" x2="10" y2="155" stroke="#333" stroke-width="2"/>
<line x1="10" y1="20" x2="110" y2="20" stroke="#333" stroke-width="2"/>
<!-- twisted ribbon protruding diagonally -->
<path d="M10,20 Q40,35 55,55 Q70,75 60,100 Q50,125 65,145" fill="none" stroke="#7c3aed" stroke-width="4" stroke-linecap="round"/>
<path d="M10,20 Q45,30 65,48 Q85,66 75,90 Q65,115 80,135" fill="none" stroke="#a78bfa" stroke-width="2" stroke-linecap="round" stroke-dasharray="4,3"/>
<!-- cross sections showing twist -->
<ellipse cx="55" cy="55" rx="12" ry="5" fill="none" stroke="#7c3aed" stroke-width="1" transform="rotate(-30 55 55)"/>
<ellipse cx="60" cy="100" rx="12" ry="5" fill="none" stroke="#7c3aed" stroke-width="1" transform="rotate(20 60 100)"/>
<circle cx="10" cy="20" r="4" fill="#7c3aed"/>
</svg>
</div>
<div class="card-body">
<h3>Twisted Spine</h3>
<p>Ribbon or helix that spirals out from corner as it rises. Each 25cm piece is one full twist. Dramatic shadow play.</p>
</div>
</div>
<div class="card" data-choice="wave" onclick="toggleSelect(this)">
<div class="card-image" style="background:#111;display:flex;align-items:center;justify-content:center;height:180px;overflow:hidden;">
<svg width="120" height="160" viewBox="0 0 120 160">
<text x="6" y="14" fill="#555" font-size="9" font-family="monospace">top view →</text>
<line x1="10" y1="20" x2="10" y2="155" stroke="#333" stroke-width="2"/>
<line x1="10" y1="20" x2="110" y2="20" stroke="#333" stroke-width="2"/>
<!-- wave peaks alternating x/y -->
<path d="M10,30 Q50,30 50,50 Q50,70 10,70 Q50,70 50,90 Q50,110 10,110 Q50,110 50,130 Q50,150 10,150" fill="none" stroke="#0891b2" stroke-width="3"/>
<path d="M10,30 Q10,60 30,60 Q10,60 10,90 Q10,90 30,90 Q10,90 10,120 Q10,120 30,120" fill="none" stroke="#22d3ee" stroke-width="1.5" stroke-dasharray="3,3"/>
<!-- depth indication -->
<circle cx="50" cy="50" r="3" fill="#0891b2"/>
<circle cx="50" cy="90" r="3" fill="#0891b2"/>
<circle cx="50" cy="130" r="3" fill="#0891b2"/>
<circle cx="30" cy="60" r="3" fill="#22d3ee"/>
<circle cx="30" cy="100" r="3" fill="#22d3ee"/>
</svg>
</div>
<div class="card-body">
<h3>Wave / Oscillation</h3>
<p>Alternating peaks that swing out along x-axis then y-axis as you go up. Smooth sinusoidal form, organic feel despite being parametric.</p>
</div>
</div>
<div class="card" data-choice="fins" onclick="toggleSelect(this)">
<div class="card-image" style="background:#111;display:flex;align-items:center;justify-content:center;height:180px;overflow:hidden;">
<svg width="120" height="160" viewBox="0 0 120 160">
<text x="6" y="14" fill="#555" font-size="9" font-family="monospace">top view →</text>
<line x1="10" y1="20" x2="10" y2="155" stroke="#333" stroke-width="2"/>
<line x1="10" y1="20" x2="110" y2="20" stroke="#333" stroke-width="2"/>
<!-- stacked fins radiating outward -->
<g stroke="#d97706" stroke-width="2" fill="none">
<!-- fin 1 -->
<path d="M10,35 L55,35 L55,45 L10,45"/>
<!-- fin 2 rotated -->
<path d="M10,55 L10,65 L20,65"/>
<path d="M10,55 L55,55 L55,65"/>
<!-- fin 3 -->
<path d="M10,80 L55,80 L55,90 L10,90"/>
<!-- fin 4 rotated -->
<path d="M10,105 L10,115 L20,115"/>
<path d="M10,105 L55,105 L55,115"/>
<!-- fin 5 -->
<path d="M10,130 L55,130 L55,140 L10,140"/>
</g>
<text x="58" y="40" fill="#d97706" font-size="8">→ x</text>
<text x="22" y="68" fill="#f59e0b" font-size="8">↓ y</text>
</svg>
</div>
<div class="card-body">
<h3>Rotating Fins</h3>
<p>Horizontal blades that rotate 90° with each piece — alternating x-axis and y-axis protrusion. Strong geometric rhythm, industrial-abstract feel.</p>
</div>
</div>
<div class="card" data-choice="fractal" onclick="toggleSelect(this)">
<div class="card-image" style="background:#111;display:flex;align-items:center;justify-content:center;height:180px;overflow:hidden;">
<svg width="120" height="160" viewBox="0 0 120 160">
<text x="6" y="14" fill="#555" font-size="9" font-family="monospace">front view →</text>
<line x1="10" y1="20" x2="10" y2="155" stroke="#333" stroke-width="2"/>
<!-- branching / fractal-like structure growing from corner -->
<g stroke="#16a34a" fill="none">
<!-- trunk -->
<line x1="10" y1="150" x2="10" y2="100" stroke-width="5"/>
<!-- level 1 branches -->
<line x1="10" y1="120" x2="35" y2="100" stroke-width="3"/>
<line x1="10" y1="120" x2="35" y2="140" stroke-width="3"/>
<!-- level 2 -->
<line x1="35" y1="100" x2="55" y2="88" stroke-width="2"/>
<line x1="35" y1="100" x2="55" y2="112" stroke-width="2"/>
<line x1="35" y1="140" x2="55" y2="128" stroke-width="2"/>
<line x1="35" y1="140" x2="55" y2="152" stroke-width="2"/>
<!-- level 3 -->
<line x1="55" y1="88" x2="70" y2="82" stroke-width="1.5"/>
<line x1="55" y1="88" x2="70" y2="94" stroke-width="1.5"/>
<line x1="55" y1="112" x2="70" y2="106" stroke-width="1.5"/>
<line x1="55" y1="112" x2="70" y2="118" stroke-width="1.5"/>
<!-- upper section repeat -->
<line x1="10" y1="80" x2="10" y2="50" stroke-width="4"/>
<line x1="10" y1="65" x2="30" y2="50" stroke-width="2.5"/>
<line x1="10" y1="65" x2="30" y2="80" stroke-width="2.5"/>
<line x1="30" y1="50" x2="48" y2="42" stroke-width="1.5"/>
<line x1="30" y1="50" x2="48" y2="58" stroke-width="1.5"/>
<line x1="30" y1="80" x2="48" y2="72" stroke-width="1.5"/>
<line x1="30" y1="80" x2="48" y2="88" stroke-width="1.5"/>
</g>
</svg>
</div>
<div class="card-body">
<h3>Branching / Fractal</h3>
<p>Tree-like structure grows from corner outward. Each piece has a self-similar branching pattern at different scale. Bold, sculptural.</p>
</div>
</div>
</div>
.superpowers/brainstorm/421-1781209654/content/style.html
+86
View File
@@ -0,0 +1,86 @@
<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>
.superpowers/brainstorm/421-1781209654/content/twist-depth.html
+82
View File
@@ -0,0 +1,82 @@
<h2>Twist rate + protrusion depth</h2>
<p class="subtitle">Per 25cm piece — front view. Ribbon is ~5cm wide, ~4mm thick. Corner is the left edge.</p>
<div class="cards">
<div class="card" data-choice="half-shallow" onclick="toggleSelect(this)">
<div class="card-image" style="background:#111;display:flex;align-items:center;justify-content:center;height:200px;">
<svg width="130" height="180" viewBox="0 0 130 180">
<!-- wall corner -->
<line x1="15" y1="0" x2="15" y2="180" stroke="#333" stroke-width="3"/>
<!-- ribbon: 180° twist, protrudes ~4cm -->
<text x="18" y="12" fill="#555" font-size="8" font-family="monospace">180° / 4cm out</text>
<!-- front edge of ribbon -->
<path d="M15,20 Q55,50 15,90 Q55,130 15,160" fill="none" stroke="#7c3aed" stroke-width="4" stroke-linecap="round"/>
<!-- back edge -->
<path d="M15,20 Q25,50 15,90 Q25,130 15,160" fill="none" stroke="#a78bfa" stroke-width="1.5" stroke-dasharray="3,2"/>
<!-- protrusion depth arrow -->
<line x1="15" y1="50" x2="55" y2="50" stroke="#555" stroke-width="1" stroke-dasharray="2,2"/>
<text x="58" y="53" fill="#555" font-size="8">4cm</text>
</svg>
</div>
<div class="card-body">
<h3>Gentle — 180° / 4cm</h3>
<p>One half-turn per piece. Subtle reach. Elegant, understated. Good if it sits close to the corner.</p>
</div>
</div>
<div class="card" data-choice="full-medium" onclick="toggleSelect(this)">
<div class="card-image" style="background:#111;display:flex;align-items:center;justify-content:center;height:200px;">
<svg width="130" height="180" viewBox="0 0 130 180">
<line x1="15" y1="0" x2="15" y2="180" stroke="#333" stroke-width="3"/>
<text x="18" y="12" fill="#555" font-size="8" font-family="monospace">360° / 8cm out</text>
<!-- full twist, medium protrusion -->
<path d="M15,20 Q75,40 75,55 Q75,70 15,90 Q75,110 75,125 Q75,140 15,160" fill="none" stroke="#7c3aed" stroke-width="4" stroke-linecap="round"/>
<path d="M15,20 Q20,40 20,55 Q20,70 15,90 Q20,110 20,125 Q20,140 15,160" fill="none" stroke="#a78bfa" stroke-width="1.5" stroke-dasharray="3,2"/>
<line x1="15" y1="45" x2="75" y2="45" stroke="#555" stroke-width="1" stroke-dasharray="2,2"/>
<text x="78" y="48" fill="#555" font-size="8">8cm</text>
</svg>
</div>
<div class="card-body">
<h3>Balanced — 360° / 8cm</h3>
<p>One full turn per piece. Confident reach into the room. You clearly see the twist from any angle.</p>
</div>
</div>
<div class="card" data-choice="full-deep" onclick="toggleSelect(this)">
<div class="card-image" style="background:#111;display:flex;align-items:center;justify-content:center;height:200px;">
<svg width="130" height="180" viewBox="0 0 130 180">
<line x1="15" y1="0" x2="15" y2="180" stroke="#333" stroke-width="3"/>
<text x="18" y="12" fill="#555" font-size="8" font-family="monospace">360° / 14cm out</text>
<!-- full twist, deep protrusion -->
<path d="M15,20 Q110,38 110,55 Q110,72 15,90 Q110,108 110,125 Q110,142 15,160" fill="none" stroke="#7c3aed" stroke-width="4" stroke-linecap="round"/>
<path d="M15,20 Q22,38 22,55 Q22,72 15,90 Q22,108 22,125 Q22,142 15,160" fill="none" stroke="#a78bfa" stroke-width="1.5" stroke-dasharray="3,2"/>
<line x1="15" y1="42" x2="110" y2="42" stroke="#555" stroke-width="1" stroke-dasharray="2,2"/>
<text x="95" y="38" fill="#555" font-size="8">14cm</text>
</svg>
</div>
<div class="card-body">
<h3>Bold — 360° / 14cm</h3>
<p>One full turn, reaches deep into room. Real sculptural presence. Dominant in the space.</p>
</div>
</div>
<div class="card" data-choice="double-deep" onclick="toggleSelect(this)">
<div class="card-image" style="background:#111;display:flex;align-items:center;justify-content:center;height:200px;">
<svg width="130" height="180" viewBox="0 0 130 180">
<line x1="15" y1="0" x2="15" y2="180" stroke="#333" stroke-width="3"/>
<text x="18" y="12" fill="#555" font-size="8" font-family="monospace">720° / 14cm out</text>
<!-- double twist, deep -->
<path d="M15,20 Q110,30 110,42 Q110,55 15,65 Q110,75 110,87 Q110,100 15,110 Q110,120 110,132 Q110,145 15,155" fill="none" stroke="#7c3aed" stroke-width="4" stroke-linecap="round"/>
<path d="M15,20 Q20,30 20,42 Q20,55 15,65 Q20,75 20,87 Q20,100 15,110 Q20,120 20,132 Q20,145 15,155" fill="none" stroke="#a78bfa" stroke-width="1.5" stroke-dasharray="3,2"/>
<line x1="15" y1="35" x2="110" y2="35" stroke="#555" stroke-width="1" stroke-dasharray="2,2"/>
<text x="95" y="31" fill="#555" font-size="8">14cm</text>
</svg>
</div>
<div class="card-body">
<h3>Intense — 720° / 14cm</h3>
<p>Two full turns per piece. Rapid tight twisting with bold reach. Very dynamic — almost turbulent energy.</p>
</div>
</div>
</div>
.superpowers/brainstorm/421-1781209654/content/waiting.html
+3
View File
@@ -0,0 +1,3 @@
<div style="display:flex;align-items:center;justify-content:center;min-height:60vh">
<p class="subtitle">Continuing in terminal...</p>
</div>
.superpowers/brainstorm/421-1781209654/state/server-stopped
+1
View File
@@ -0,0 +1 @@
{"reason":"idle timeout","timestamp":1781212895650}
.superpowers/brainstorm/421-1781209654/state/server.log
+12
View File
@@ -0,0 +1,12 @@
{"type":"server-started","port":49435,"host":"127.0.0.1","url_host":"localhost","url":"http://localhost:49435","screen_dir":"/home/becky/.claude-jail/.superpowers/brainstorm/421-1781209654/content","state_dir":"/home/becky/.claude-jail/.superpowers/brainstorm/421-1781209654/state"}
{"type":"screen-added","file":"/home/becky/.claude-jail/.superpowers/brainstorm/421-1781209654/content/style.html"}
{"type":"screen-added","file":"/home/becky/.claude-jail/.superpowers/brainstorm/421-1781209654/content/style-v2.html"}
{"source":"user-event","type":"click","text":"top view →\n \n \n \n \n \n \n \n \n \n \n \n \n \n Twisted Spine\n Ribbon or helix that spirals out from corner as it rises. Each 25cm piece is one full twist. Dramatic shadow play.","choice":"twist","id":null,"timestamp":1781210786563}
{"source":"user-event","type":"click","text":"top view →\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n Wave / Oscillation\n Alternating peaks that swing out along x-axis then y-axis as you go up. Smooth sinusoidal form, organic feel despite being parametric.","choice":"wave","id":null,"timestamp":1781210796933}
{"source":"user-event","type":"click","text":"top view →\n \n \n \n \n \n \n \n \n \n \n \n \n \n Twisted Spine\n Ribbon or helix that spirals out from corner as it rises. Each 25cm piece is one full twist. Dramatic shadow play.","choice":"twist","id":null,"timestamp":1781210797729}
{"type":"screen-added","file":"/home/becky/.claude-jail/.superpowers/brainstorm/421-1781209654/content/cross-section.html"}
{"source":"user-event","type":"click","text":"end-on\n \n \n \n \n front\n \n \n \n \n \n \n Flat Ribbon / Blade\n Thin wide strip — like a Möbius blade. Very dramatic from the side (wide face) but nearly disappears when viewed edge-on. Strong light/shadow contrast.","choice":"ribbon","id":null,"timestamp":1781210944918}
{"type":"screen-added","file":"/home/becky/.claude-jail/.superpowers/brainstorm/421-1781209654/content/twist-depth.html"}
{"source":"user-event","type":"click","text":"360° / 8cm out\n \n \n \n \n 8cm\n \n \n \n Balanced — 360° / 8cm\n One full turn per piece. Confident reach into the room. You clearly see the twist from any angle.","choice":"full-medium","id":null,"timestamp":1781211055275}
{"type":"screen-added","file":"/home/becky/.claude-jail/.superpowers/brainstorm/421-1781209654/content/waiting.html"}
{"type":"server-stopped","reason":"idle timeout"}
.superpowers/brainstorm/421-1781209654/state/server.pid
+1
View File
@@ -0,0 +1 @@
449