100 lines
16 KiB
HTML
100 lines
16 KiB
HTML
<html lang="da"><head><meta charset="utf-8"><link rel="icon" type="image/x-icon" href="/favicon.ico"><link rel="icon" type="image/svg+xml" href="/favicon.svg"><link rel="apple-touch-icon" href="/favicon.svg"><meta name="viewport" content="width=device-width,initial-scale=1"><meta name="theme-color" content="#1976d2"><meta name="description" content="AI-baseret tilbudsberegner specifikt for tømrerfaget og træarbejde"><title>Tilbudgivern - AI Tilbudsberegner for Tømrere</title><script defer="defer" src="/static/js/main.96df7f2e.js"></script><link href="/static/css/main.472e1821.css" rel="stylesheet"><style id="_goober"> .go1475592160{height:0;}.go1671063245{height:auto;}.go1888806478{display:flex;flex-wrap:wrap;flex-grow:1;}@media (min-width:600px){.go1888806478{flex-grow:initial;min-width:288px;}}.go167266335{background-color:#313131;font-size:0.875rem;line-height:1.43;letter-spacing:0.01071em;color:#fff;align-items:center;padding:6px 16px;border-radius:4px;box-shadow:0px 3px 5px -1px rgba(0,0,0,0.2),0px 6px 10px 0px rgba(0,0,0,0.14),0px 1px 18px 0px rgba(0,0,0,0.12);}.go3162094071{padding-left:20px;}.go3844575157{background-color:#313131;}.go1725278324{background-color:#43a047;}.go3651055292{background-color:#d32f2f;}.go4215275574{background-color:#ff9800;}.go1930647212{background-color:#2196f3;}.go946087465{display:flex;align-items:center;padding:8px 0;}.go703367398{display:flex;align-items:center;margin-left:auto;padding-left:16px;margin-right:-8px;}.go3963613292{width:100%;position:relative;transform:translateX(0);top:0;right:0;bottom:0;left:0;min-width:288px;}.go1141946668{box-sizing:border-box;display:flex;max-height:100%;position:fixed;z-index:1400;height:auto;width:auto;transition:top 300ms ease 0ms,right 300ms ease 0ms,bottom 300ms ease 0ms,left 300ms ease 0ms,max-width 300ms ease 0ms;pointer-events:none;max-width:calc(100% - 40px);}.go1141946668 .notistack-CollapseWrapper{padding:6px 0px;transition:padding 300ms ease 0ms;}@media (max-width:599.95px){.go1141946668{width:100%;max-width:calc(100% - 32px);}}.go3868796639 .notistack-CollapseWrapper{padding:2px 0px;}.go3118922589{top:14px;flex-direction:column;}.go1453831412{bottom:14px;flex-direction:column-reverse;}.go4027089540{left:20px;}@media (min-width:600px){.go4027089540{align-items:flex-start;}}@media (max-width:599.95px){.go4027089540{left:16px;}}.go2989568495{right:20px;}@media (min-width:600px){.go2989568495{align-items:flex-end;}}@media (max-width:599.95px){.go2989568495{right:16px;}}.go4034260886{left:50%;transform:translateX(-50%);}@media (min-width:600px){.go4034260886{align-items:center;}}</style></head><body><noscript>Du skal aktivere JavaScript for at køre denne app.</noscript><div id="root"><div class="App "><header class="header"><h1>🏗️ Tilbudgivern</h1><div class="nav-buttons"><button class="nav-btn active">🏗️ Projekt Flow</button><button class="nav-btn ">📋 Planlægning</button><button class="nav-btn ">🧱 Materialer</button><button class="nav-btn ">📦 Smart Pakker</button><button class="nav-btn ">📊 Nøgletal</button><button class="nav-btn ">🤖 AI Budget</button></div><button class="logout-btn">Log ud</button></header><main class="main-content"><div class="project-flow"><div class="project-header"><div class="project-info"><h2>📋 Selenium Test Projekt</h2><p>👤 Kunde: Test Kunde</p><p>📝 </p></div><button class="reset-btn">🔄 Nyt Projekt</button></div><div class="steps-nav"><div class="step available"><span class="step-icon">📋</span><span class="step-name">Projekt</span><small class="step-description">Opret kunde projekt</small></div><div class="step active available"><span class="step-icon">📐</span><span class="step-name">Geometri</span><small class="step-description">Tag dimensioner</small></div><div class="step disabled"><span class="step-icon">🔧</span><span class="step-name">Smart Pakke</span><small class="step-description">Materialer & Timer</small></div><div class="step disabled"><span class="step-icon">🎯</span><span class="step-name">Final Review</span><small class="step-description">Gennemgang & Tilbud</small></div></div><div class="step-content"><div class="enhanced-geometry-step"><h3>📐 Avanceret Geometri Beregning</h3><p>Beregn præcise målinger med automatisk materiale estimering</p><div class="info-box" style="background: rgb(255, 243, 205); border: 2px solid rgb(255, 193, 7); border-radius: 8px; padding: 15px; margin-bottom: 20px;"><h4 style="margin: 0px 0px 10px; color: rgb(133, 100, 4);">💡 Tip: Simple projekter</h4><p style="margin: 5px 0px; color: rgb(133, 100, 4);"><strong>Vil du bare tilføje vinduer, kviste eller små reparationer?</strong><br>Klik på <strong>"Spring over tagberegning"</strong> nederst for at gå direkte til manuel pakke-valg.</p></div><div class="info-box" style="background: rgb(230, 243, 255); border: 1px solid rgb(0, 123, 255); border-radius: 5px; padding: 15px; margin-bottom: 20px;"><h4 style="margin: 0px 0px 10px; color: rgb(0, 86, 179);">📋 Krav til realistiske beregninger:</h4><ul style="margin: 0px; padding-left: 20px; color: rgb(73, 80, 87);"><li>Bygningsbredde: 1,0 - 100 meter</li><li>Bygningslængde: 1,0 - 150 meter</li><li>Væghøjde: 1,0 - 10,0 meter</li><li>Taghældning (skråt): 5 - 60 grader</li><li>Minimum areal: 5 m²</li><li>Maksimum areal: 10.000 m²</li></ul></div><div style="display: flex; gap: 20px; align-items: flex-start;"><div style="flex: 1 1 0%; min-width: 400px; max-width: 600px; position: sticky; top: 20px; order: 2;"><div style="background: white; border: 3px solid rgb(0, 123, 255); border-radius: 12px; padding: 20px; box-shadow: rgba(0, 123, 255, 0.2) 0px 4px 12px;"><h3 style="margin: 0px 0px 15px; color: rgb(0, 123, 255); font-size: 20px; font-weight: bold;">🏗️ Live Visualisering</h3><div style="min-height: 300px; border: 1px solid rgb(221, 221, 221); padding: 10px; background: white; border-radius: 5px;"><div>
|
||
<svg viewBox="0 0 810 670" style="width: 100%; max-width: 1200px; min-height: 500px; border: 3px solid #ddd;">
|
||
<!-- Ground line -->
|
||
<line x1="30" y1="500" x2="650" y2="500" stroke="#8B4513" stroke-width="6"></line>
|
||
|
||
<!-- Foundation/base -->
|
||
<rect x="80" y="500" width="350" height="25" fill="#C0C0C0" stroke="#999" stroke-width="3"></rect>
|
||
|
||
<!-- Walls -->
|
||
<rect x="80" y="400" width="350" height="100" fill="#F5F5DC" stroke="#4169E1" stroke-width="4"></rect>
|
||
|
||
<!-- Left rafter/spær -->
|
||
<line x1="80" y1="400" x2="255" y2="298.9637028918155" stroke="#8B4513" stroke-width="6"></line>
|
||
|
||
<!-- Right rafter/spær -->
|
||
<line x1="430" y1="400" x2="255" y2="298.9637028918155" stroke="#8B4513" stroke-width="6"></line>
|
||
|
||
<!-- Left roof surface -->
|
||
<polygon points="80,400 255,298.9637028918155 92,388" fill="#DC143C" stroke="#B22222" stroke-width="3" opacity="0.7"></polygon>
|
||
|
||
<!-- Right roof surface -->
|
||
<polygon points="430,400 255,298.9637028918155 418,388" fill="#B22222" stroke="#8B0000" stroke-width="3" opacity="0.7"></polygon>
|
||
|
||
<!-- Ridge beam -->
|
||
<line x1="250" y1="298.9637028918155" x2="260" y2="298.9637028918155" stroke="#654321" stroke-width="10"></line>
|
||
|
||
<!-- Rafter length measurement line -->
|
||
<line x1="80" y1="400" x2="255" y2="298.9637028918155" stroke="#FF6600" stroke-width="4" stroke-dasharray="8,8"></line>
|
||
|
||
<!-- Angle arc for roof pitch -->
|
||
<path d="M 120 400 A 35 35 0 0 0 150.31088913245534 382.5" stroke="#FF0000" stroke-width="4" fill="none"></path>
|
||
|
||
<!-- Dimension lines and labels -->
|
||
|
||
<!-- Building width dimension -->
|
||
<line x1="80" y1="545" x2="430" y2="545" stroke="#000" stroke-width="3"></line>
|
||
<line x1="80" y1="535" x2="80" y2="555" stroke="#000" stroke-width="3"></line>
|
||
<line x1="430" y1="535" x2="430" y2="555" stroke="#000" stroke-width="3"></line>
|
||
<text x="255" y="565" text-anchor="middle" font-size="20" fill="#000" font-weight="bold">
|
||
Spændvidde: 10.0m
|
||
</text>
|
||
|
||
<!-- Wall height dimension -->
|
||
<line x1="45" y1="500" x2="45" y2="400" stroke="#000" stroke-width="3"></line>
|
||
<line x1="40" y1="500" x2="50" y2="500" stroke="#000" stroke-width="3"></line>
|
||
<line x1="40" y1="400" x2="50" y2="400" stroke="#000" stroke-width="3"></line>
|
||
<text x="25" y="450" text-anchor="middle" font-size="16" fill="#000" font-weight="bold" transform="rotate(-90 25 450)">
|
||
Væghøjde: 2.5m
|
||
</text>
|
||
|
||
<!-- Roof height dimension -->
|
||
<line x1="465" y1="400" x2="465" y2="298.9637028918155" stroke="#000" stroke-width="3"></line>
|
||
<line x1="455" y1="400" x2="475" y2="400" stroke="#000" stroke-width="3"></line>
|
||
<line x1="455" y1="298.9637028918155" x2="475" y2="298.9637028918155" stroke="#000" stroke-width="3"></line>
|
||
<text x="490" y="349.48185144590775" text-anchor="middle" font-size="16" fill="#000" font-weight="bold" transform="rotate(-90 490 349.48185144590775)">
|
||
Ryghøjde: 2.89m
|
||
</text>
|
||
|
||
<!-- Rafter length annotation -->
|
||
<text x="152.5" y="334.48185144590775" text-anchor="middle" font-size="16" fill="#FF6600" font-weight="bold" transform="rotate(-30 152.5 334.48185144590775)">
|
||
Spærlængde: 5.77m
|
||
</text>
|
||
|
||
<!-- Roof angle annotation -->
|
||
<text x="130" y="385" text-anchor="start" font-size="20" fill="#FF0000" font-weight="bold">
|
||
30°
|
||
</text>
|
||
|
||
<!-- Half width dimension -->
|
||
<line x1="80" y1="350" x2="255" y2="350" stroke="#666" stroke-width="2" stroke-dasharray="5,5"></line>
|
||
<text x="167.5" y="365" text-anchor="middle" font-size="15" fill="#666" font-weight="bold">
|
||
5.0m
|
||
</text>
|
||
|
||
<!-- Total height dimension (center line from peak to ground) -->
|
||
<line x1="240" y1="500" x2="240" y2="298.9637028918155" stroke="#000" stroke-width="3" stroke-dasharray="6,4"></line>
|
||
<line x1="235" y1="500" x2="245" y2="500" stroke="#000" stroke-width="3"></line>
|
||
<line x1="235" y1="298.9637028918155" x2="245" y2="298.9637028918155" stroke="#000" stroke-width="3"></line>
|
||
<text x="225" y="399.48185144590775" text-anchor="middle" font-size="16" fill="#000" font-weight="bold" transform="rotate(-90 225 399.48185144590775)">
|
||
Total højde: 5.39m
|
||
</text>
|
||
|
||
<!-- Title -->
|
||
<text x="255" y="35" text-anchor="middle" font-size="22" font-weight="bold" fill="#DC143C">
|
||
Gavlsnit - Skråt Tag (10.0m × 15.0m, 30°)
|
||
</text>
|
||
|
||
<!-- Technical specifications box -->
|
||
<rect x="500" y="60" width="280" height="240" fill="#F0F8FF" stroke="#4169E1" stroke-width="3"></rect>
|
||
<text x="515" y="85" font-size="18" font-weight="bold" fill="#000">BEREGNINGER:</text>
|
||
<text x="515" y="110" font-size="15" fill="#000">Spændvidde: 10.0m</text>
|
||
<text x="515" y="135" font-size="15" fill="#000">Bygningslængde: 15.0m</text>
|
||
<text x="515" y="160" font-size="15" fill="#000">Taghældning: 30°</text>
|
||
<text x="515" y="185" font-size="15" fill="#000">Væghøjde: 2.5m</text>
|
||
<text x="515" y="210" font-size="15" fill="#000">Ryghøjde: 2.89m</text>
|
||
<text x="515" y="235" font-size="15" fill="#000">Total højde: 5.39m</text>
|
||
<text x="515" y="260" font-size="15" fill="#FF6600" font-weight="bold">Spærlængde: 5.77m</text>
|
||
<text x="515" y="285" font-size="15" fill="#FF6600" font-weight="bold">Spær c/c: 600mm</text>
|
||
</svg>
|
||
</div></div></div></div><div style="flex: 1 1 0%; min-width: 450px; order: 1;"><div class="geometry-form"><div class="form-row"><div class="form-group"><label>Tagtype:</label><select><option value="sadeltag">Sadeltag/Skråttag</option><option value="valmtag">Valmtag</option><option value="koebenhavnertag">Københavnertag</option><option value="fladt_tag">Fladtag</option><option value="pulttag">Pulttag</option><option value="tag_med_kviste">Tag med kviste</option><option value="mansard">Mansardtag</option></select></div><div class="form-group"><label>Tagmateriale:</label><select><option value="tegl">🧱 Tegl</option><option value="tagpap">📄 Tagpap</option><option value="eternit">🏗️ Eternit</option></select></div><div class="form-group" style="display: flex; align-items: center; gap: 10px;"><label style="display: flex; align-items: center; cursor: pointer; margin: 0px;"><input type="checkbox" style="margin-right: 8px; width: 20px; height: 20px;"><span style="font-size: 16px; font-weight: bold;">🏘️ Vinkelhus (L-formet bygning)</span></label><small class="form-help" style="display: block; margin-top: 5px;">Aktivér for hjørnehuse med to bygningsvinger</small></div></div><div class="form-row"><div class="form-group"><label>Bredde (m):</label><input type="number" placeholder="10" step="0.1" min="1.0" max="100" value="10"><small class="form-help">Mellem 1,0 og 100 meter</small></div><div class="form-group"><label>Længde (m):</label><input type="number" placeholder="15" step="0.1" min="1.0" max="150" value=""><small class="form-help">Mellem 1,0 og 150 meter</small></div></div><div class="form-row"><div class="form-group"><label>Taghældning (°):</label><input type="number" min="5" max="60" placeholder="25" value="30"><small class="form-help">Mellem 5 og 60 grader (kun for skråt tag)</small></div><div class="form-group"><label>Væghøjde (m):</label><input type="number" step="0.1" min="1.0" max="10.0" placeholder="2.5" value=""><small class="form-help">Mellem 1,0 og 10,0 meter</small></div><div class="form-group"><label>Højde stern til kip (m):</label><input type="number" step="0.1" min="0.5" max="8.0" placeholder="1.5" value=""><small class="form-help">Lodret højde fra stern til kip - beregner automatisk tagbeklædning</small></div><div class="form-group"><label>Tagbeklædning (m²):</label><input type="number" step="0.1" min="10" max="2000" placeholder="Auto-beregnes" value=""><small class="form-help">Total tagareal - beregner automatisk stern-kip højde</small></div></div><div style="margin-bottom: 15px; padding: 12px 16px; border-radius: 8px; text-align: center; font-weight: 500;"><span style="color: rgb(12, 84, 96); background: rgb(209, 236, 241); padding: 8px 12px; border-radius: 6px; border: 1px solid rgb(190, 229, 235);">💾 Gemmes automatisk om 3 sekunder...</span></div><button title="Gem og beregn geometri nu (normalt sker det automatisk)" style="padding: 8px 16px; font-size: 0.9rem; background-color: rgb(108, 117, 125); color: white; border: none; border-radius: 6px; cursor: pointer; margin-top: 10px; opacity: 1;">🔄 Gem Nu</button></div></div></div><div class="geometry-results"><div class="results-grid"><div class="result-card"><h4>📏 Grundmål</h4><div class="measurements"><div>Grundareal: m²</div><div>Tagareal: m²</div><div>Taghøjde: m</div><div>Spærlængde: m</div></div></div><div class="result-card"><h4>🪵 Vindskeder</h4><div class="windboard-details"><div>Gavl: m</div><div>Tagkant: m</div><div>Ryg: m</div><div><strong>Total: m</strong></div></div></div></div></div><div class="step-actions" style="display: flex; gap: 10px; justify-content: space-between; margin-top: 20px;"><button class="secondary-btn" style="background: linear-gradient(135deg, rgb(102, 126, 234) 0%, rgb(118, 75, 162) 100%); color: white; border: none; padding: 14px 28px; border-radius: 8px; cursor: pointer; font-size: 16px; font-weight: bold; box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 6px; transition: 0.3s;">⏭️ Spring over tagberegning<div style="font-size: 12px; font-weight: normal; margin-top: 4px;">Gå direkte til manuel pakke-valg</div></button><button class="primary-btn">Fortsæt til Smart Pakke</button></div></div></div></div></main></div></div></body></html> |