v0.6.0: ruimtes (verfemmer: functie, netto m², vloerafwerking, FIBO-wandpanelen, eigen verfkleur, vals plafond, ruimtestaat op de PDF), inrichting (sanitair, keuken, kookeiland, kasten, bed, zithoek, boiler; slepen met snappen op het wandvlak, draaien, kosten), kozijnen met deurrichting, glasdeur en schuifdeuren (inbouw/opbouw, deuren open in de loopmodus) plus dagkanten, gevel stucwerk en wandstukken splitsen met eigen gevel, dak over de hele woning met overkapping, geschilderd plafond, model Amstel als nieuw ontwerp, kosten en prijzen uit kosten/intern.csv en kosten/leveranciers.csv (CostCsv); easter egg verwijderd; overbodige comments opgeschoond (alleen copyright, uitzonderingen en valkuilen blijven)
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
Machiel
co-authored by
Claude Opus 5.5
Claude Opus 5.5
parent
b5510d56c7
commit
ceda0b554d
+17
-74
@@ -4,13 +4,7 @@
|
||||
* Alle rechten voorbehouden. Gebruik uitsluitend met schriftelijke toestemming.
|
||||
* Zie LICENTIE.md.
|
||||
*/
|
||||
/* ============================================================
|
||||
HUISSTIJL Van Emous — kleuren als CSS-variabelen (bron: SCSS-variabelen
|
||||
$van-emous-blue / -orange / -ultra-light, $nav-link-color, $primary).
|
||||
De bediening (menu's, panelen, navigatie) is licht; de 2D-/3D-weergaven
|
||||
houden een donkere achtergrond (--viewport-bg), omdat de canvas-tekeningen
|
||||
daar lichte lijnen/teksten op gebruiken.
|
||||
============================================================ */
|
||||
/* De 2D-/3D-weergaven blijven donker (--viewport-bg): de canvas-tekeningen gebruiken lichte lijnen. */
|
||||
:root {
|
||||
--van-emous-blue: #dce4ee;
|
||||
--van-emous-orange: #b95913;
|
||||
@@ -20,7 +14,7 @@
|
||||
|
||||
--primary-hover: #9c4a0f;
|
||||
--primary-soft: rgba(185, 89, 19, 0.10);
|
||||
--primary-on-dark: #e8883d; /* oranje dat leesbaar blijft op de donkere weergaven */
|
||||
--primary-on-dark: #e8883d;
|
||||
--text: var(--nav-link-color);
|
||||
--text-muted: #5b6673;
|
||||
--text-faint: #8a94a0;
|
||||
@@ -85,7 +79,7 @@
|
||||
background: var(--viewport-bg);
|
||||
}
|
||||
.pane-2d-sub + .pane-2d-sub { border-top: 1px solid var(--border); }
|
||||
.pane-2d-primary { flex: 2; } /* primair aanzicht (bijv. vooraanzicht bij een wand) krijgt meer ruimte */
|
||||
.pane-2d-primary { flex: 2; }
|
||||
.pane-2d-sub canvas.interactive { cursor: default; }
|
||||
.pane-2d-row { display: flex; flex-direction: row; padding: 0; }
|
||||
.pane-2d-half { flex: 1; position: relative; min-width: 0; min-height: 0; background: var(--viewport-bg); }
|
||||
@@ -226,7 +220,6 @@
|
||||
.highlight { color: var(--primary); font-weight: bold; }
|
||||
canvas { display: block; width: 100%; height: 100%; }
|
||||
|
||||
/* --- Openingen tab (nieuw) --- */
|
||||
.opening-card {
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--border);
|
||||
@@ -286,7 +279,6 @@
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
/* --- Specificaties tab (nieuw) --- */
|
||||
.spec-section { margin-bottom: 14px; }
|
||||
|
||||
.material-info { font-size: 12px; color: var(--text-muted); line-height: 1.5; margin: 4px 0 10px; }
|
||||
@@ -298,9 +290,6 @@
|
||||
}
|
||||
.material-toggle-btn.active { background: var(--primary); border-color: var(--primary); color: #fff; }
|
||||
.material-toggle-btn:hover:not(.active) { border-color: var(--primary); color: var(--primary); }
|
||||
/* ============================================================
|
||||
APP SHELL: ribbon, workspace-wrapper, splashscreen, about-modal
|
||||
============================================================ */
|
||||
html, body { height: 100%; }
|
||||
|
||||
#tab-bar {
|
||||
@@ -331,7 +320,7 @@ body { display: flex; flex-direction: column; }
|
||||
color: var(--text-faint); font-size: 14px; flex-direction: column; gap: 10px;
|
||||
}
|
||||
|
||||
/* --- Splashscreen (blijft donker: het logo bevat lichte delen) --- */
|
||||
/* Splashscreen blijft donker: het logo bevat lichte delen. */
|
||||
#splash-screen {
|
||||
position: fixed; inset: 0; background: #0d0d0d; z-index: 9999;
|
||||
display: flex; flex-direction: column; align-items: center; justify-content: center;
|
||||
@@ -342,7 +331,6 @@ body { display: flex; flex-direction: column; }
|
||||
#splash-screen .splash-name { color: #eee; font-weight: bold; letter-spacing: 1px; }
|
||||
@keyframes splashFadeOut { 0% { opacity: 1; } 100% { opacity: 0; visibility: hidden; pointer-events: none; } }
|
||||
|
||||
/* --- "Over deze software"-modal --- */
|
||||
#about-overlay {
|
||||
position: fixed; inset: 0; background: rgba(33, 33, 33, .45); z-index: 500;
|
||||
display: none; align-items: center; justify-content: center;
|
||||
@@ -392,7 +380,6 @@ body { display: flex; flex-direction: column; }
|
||||
#wall-project-modal .modal-footer, #house-project-modal .modal-footer { display: flex; justify-content: flex-end; gap: 10px; margin-top: 14px; }
|
||||
#wall-project-modal .control-group input, #house-project-modal .control-group input { width: 150px; text-align: left; }
|
||||
|
||||
/* --- Kosten & tijden (CostSettings) --- */
|
||||
#cost-settings-overlay {
|
||||
position: fixed; inset: 0; background: rgba(33, 33, 33, .45); z-index: 500;
|
||||
display: none; align-items: center; justify-content: center;
|
||||
@@ -416,6 +403,13 @@ body { display: flex; flex-direction: column; }
|
||||
#cost-settings-modal .cs-row select { text-align: left; }
|
||||
#cost-settings-modal .cs-unit { color: var(--text-faint); font-size: 11px; }
|
||||
#cost-settings-modal .cs-row.changed .cs-label { color: var(--primary); font-weight: bold; }
|
||||
#cost-settings-modal .cs-row.from-list input { color: var(--primary); font-weight: bold; }
|
||||
#cost-settings-modal .cs-row.from-list .cs-unit::after { content: ' CSV'; color: var(--primary); font-size: 9px; }
|
||||
#cost-settings-modal .cs-pricelist { font-size: 12px; margin-bottom: 10px; padding: 6px 8px; border: 1px solid var(--border); border-radius: 4px; }
|
||||
#cost-settings-modal .cs-pricelist .io-btn { padding: 1px 8px; margin-left: 6px; }
|
||||
#cost-settings-modal .cs-pricelist .cs-list + .cs-list { margin-top: 4px; }
|
||||
#cost-settings-modal .cs-pricelist ul { margin: 4px 0 0; padding-left: 18px; max-height: 120px; overflow-y: auto; }
|
||||
#cost-settings-modal .cs-pricelist li.err { color: var(--danger); }
|
||||
|
||||
#new-overlay {
|
||||
position: fixed; inset: 0; background: rgba(33, 33, 33, .45); z-index: 500;
|
||||
@@ -438,12 +432,6 @@ body { display: flex; flex-direction: column; }
|
||||
.new-option:hover:not(.disabled) { border-color: var(--primary); color: var(--primary); background: var(--primary-soft); }
|
||||
.new-option.disabled { opacity: .4; cursor: not-allowed; }
|
||||
|
||||
/* ============================================================
|
||||
VLOER-EDITOR (floor.js) — hergebruikt bestaande klassen als
|
||||
.opening-card/.add-opening-btn/.global-warning/.controls-grid/.control-group/
|
||||
.tab-bar/.tab-btn/.tab-content/.result-row/.highlight/.divider (identiek
|
||||
aan de wand-editor, dus geen dubbele stijl-definities nodig).
|
||||
============================================================ */
|
||||
#floor-app { display: flex; width: 100%; height: 100%; }
|
||||
#floor-left-column {
|
||||
flex: 1; display: flex; flex-direction: column; height: 100%; min-height: 0; min-width: 0;
|
||||
@@ -462,10 +450,6 @@ body { display: flex; flex-direction: column; }
|
||||
}
|
||||
#floor-specs-panel-3d .controls-grid { grid-template-columns: 1fr 1fr; }
|
||||
|
||||
/* ============================================================
|
||||
WONING-EDITOR (house/house.js) — navigatieboom links, actief onderdeel
|
||||
rechts (overzicht of de ECHTE wand-/vloer-editor in #house-part-host).
|
||||
============================================================ */
|
||||
#house-app { display: flex; width: 100%; height: 100%; }
|
||||
#house-nav {
|
||||
width: 240px; flex: none; display: flex; flex-direction: column; gap: 6px;
|
||||
@@ -497,8 +481,6 @@ body { display: flex; flex-direction: column; }
|
||||
#house-part-host > #floor-app,
|
||||
#house-part-host > #house-overview { flex: 1; min-height: 0; height: auto; }
|
||||
|
||||
/* Overzicht: plattegrond en 3D over de volle breedte (smal: onder elkaar);
|
||||
bediening in de ribbon. Tabblad Rapport: rapport i.p.v. plattegrond. */
|
||||
#house-overview { display: flex; width: 100%; }
|
||||
.ho-views { flex: 1; display: flex; min-width: 0; min-height: 0; }
|
||||
.ho-pane { flex: 1; position: relative; min-height: 0; min-width: 0; background: var(--viewport-bg); }
|
||||
@@ -527,7 +509,6 @@ body { display: flex; flex-direction: column; }
|
||||
.io-btn-danger:hover { border-color: var(--danger); color: var(--danger); background: var(--danger-soft); }
|
||||
.control-group input:disabled { opacity: .5; cursor: not-allowed; background: var(--border-soft); }
|
||||
|
||||
/* --- Weergave-filter (core/view-filter.js): dropdown met vinkjes op de 3D-weergave --- */
|
||||
.view-filter { position: relative; }
|
||||
.vf-menu {
|
||||
position: absolute; right: 0; top: 100%; margin-top: 6px; min-width: 210px; display: none;
|
||||
@@ -537,10 +518,6 @@ body { display: flex; flex-direction: column; }
|
||||
.vf-item { display: flex; align-items: center; gap: 8px; color: #eee; font-size: 13px; padding: 4px 0; cursor: pointer; user-select: none; }
|
||||
.vf-item input { accent-color: var(--primary-on-dark); width: 15px; height: 15px; cursor: pointer; }
|
||||
|
||||
/* ============================================================
|
||||
UI-KIT (core/ui-kit.js): velden, schakelaars, secties, tabbladen,
|
||||
specificatie-kaarten. Iconen: Bootstrap Icons (css/vendor).
|
||||
============================================================ */
|
||||
.bi { line-height: 1; vertical-align: -0.125em; }
|
||||
.ui-section { margin-bottom: 14px; }
|
||||
.ui-section h2, .ui-spec-card h2 {
|
||||
@@ -552,7 +529,7 @@ body { display: flex; flex-direction: column; }
|
||||
.ui-field label { font-size: 12.5px; color: var(--text); display: flex; align-items: center; gap: 5px; }
|
||||
.ui-field.is-disabled label { color: var(--text-faint); }
|
||||
.ui-control { display: flex; align-items: center; flex: none; }
|
||||
.ui-control input[type=number], .ui-control select {
|
||||
.ui-control input[type=number], .ui-control input[type=text], .ui-control select {
|
||||
width: 118px; background: var(--surface); border: 1px solid var(--border); color: var(--text);
|
||||
padding: 4px 6px; border-radius: 4px; font-size: 12.5px; font-family: inherit;
|
||||
}
|
||||
@@ -610,10 +587,8 @@ body { display: flex; flex-direction: column; }
|
||||
.hn-item.active .bi, .hn-item:hover .bi { color: var(--primary); }
|
||||
.hn-label { display: inline-flex; align-items: center; }
|
||||
|
||||
/* Weergave-cyclus (T): render-only = ook het info-deel onder de 3D weg. */
|
||||
.render-only #specs-panel-3d, .render-only #floor-specs-panel-3d { display: none; }
|
||||
|
||||
/* Bestaande editor-panelen (wand/vloer) in dezelfde stijl als de UI-kit. */
|
||||
.control-group { min-height: 28px; margin-bottom: 3px; gap: 10px; }
|
||||
.control-group label { font-size: 12.5px; color: var(--text); }
|
||||
.control-group input, .control-group select { width: 118px; font-size: 12.5px; padding: 4px 6px; font-family: inherit; }
|
||||
@@ -634,44 +609,21 @@ h1 { display: flex; align-items: center; gap: 7px; font-size: 12px; font-weight:
|
||||
.vf-option.active { color: var(--primary-on-dark); font-weight: 600; }
|
||||
.vf-menu .vf-option:hover { color: var(--primary-on-dark); }
|
||||
|
||||
/* Voorvertoning steen trasraam (woning > Gevel) */
|
||||
.hs-stone-preview { display: block; width: 128px; height: auto; margin: 4px 0 8px; border: 1px solid var(--border, #ccc); border-radius: 3px; }
|
||||
|
||||
/* Lopen (first person, derde weergavestand): uitleg onderin de 3D. */
|
||||
.walk-hint { display: none; position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); padding: 6px 12px; border-radius: 4px;
|
||||
.walk-hint { display: none; position: absolute; left: 50%; top: 14px; transform: translateX(-50%); padding: 6px 12px; border-radius: 4px;
|
||||
background: rgba(0, 0, 0, 0.6); color: #fff; font-size: 12px; pointer-events: none; white-space: nowrap; z-index: 5; }
|
||||
.walk-hint.show { display: block; }
|
||||
.walk-prompt { display: none; position: absolute; left: 50%; top: 58%; transform: translateX(-50%); padding: 5px 11px; border-radius: 4px;
|
||||
background: rgba(0, 0, 0, 0.65); color: #fff; font-size: 13px; font-weight: 600; pointer-events: none; white-space: nowrap; z-index: 5; }
|
||||
.walk-prompt.show { display: block; }
|
||||
|
||||
/* Easter egg: schieten (Ctrl+L) */
|
||||
.shooter-hud { display: none; position: absolute; inset: 0; pointer-events: none; z-index: 6; font-family: monospace; color: #ffd27a; }
|
||||
.shooter-hud.show { display: block; }
|
||||
.shooter-cross { position: absolute; left: 50%; top: 50%; width: 18px; height: 18px; margin: -9px 0 0 -9px;
|
||||
background: linear-gradient(#ffd27a, #ffd27a) center/2px 100% no-repeat, linear-gradient(#ffd27a, #ffd27a) center/100% 2px no-repeat; opacity: .85; }
|
||||
.shooter-weapon { position: absolute; right: 18px; bottom: 16px; font-size: 18px; font-weight: 700; text-shadow: 0 0 4px #000; }
|
||||
.shooter-credit { position: absolute; left: 14px; top: 12px; font-size: 11px; color: #fff; opacity: .7; text-shadow: 0 0 3px #000; }
|
||||
.shooter-kills { position: absolute; right: 18px; top: 12px; font-size: 18px; font-weight: 700; text-shadow: 0 0 4px #000; }
|
||||
.shooter-shout { position: absolute; left: 50%; top: 22%; transform: translateX(-50%); font-size: 20px; font-weight: 700; color: #fff;
|
||||
text-shadow: 0 0 4px #000, 2px 2px 0 #8040a0; opacity: 0; transition: opacity .2s; white-space: nowrap; }
|
||||
.shooter-shout.show { opacity: 1; }
|
||||
.shooter-ouch { position: absolute; inset: 0; background: rgba(255, 0, 0, 0.45); opacity: 0; }
|
||||
.shooter-ouch.show { animation: shooter-ouch .4s ease-out; }
|
||||
@keyframes shooter-ouch { from { opacity: 1; } to { opacity: 0; } }
|
||||
.shooter-announce { position: absolute; left: 50%; top: 34%; transform: translateX(-50%); font: italic 900 42px Impact, 'Arial Black', sans-serif;
|
||||
color: #ff2a1a; text-shadow: 0 0 8px #000, 3px 3px 0 #400; letter-spacing: 2px; white-space: nowrap; opacity: 0; }
|
||||
.shooter-announce.show { opacity: 1; animation: shooter-announce .35s ease-out; }
|
||||
@keyframes shooter-announce { from { transform: translateX(-50%) scale(2.2); opacity: 0; } to { transform: translateX(-50%) scale(1); opacity: 1; } }
|
||||
.shooter-help { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); padding: 6px 12px; border-radius: 4px;
|
||||
background: rgba(0, 0, 0, 0.6); color: #fff; font-size: 12px; white-space: nowrap; }
|
||||
|
||||
|
||||
/* Openingen: "Volg dakhelling" (schuine bovenzijde) */
|
||||
.opening-roof-btn {
|
||||
display: inline-flex; align-items: center; gap: 5px; margin-top: 2px; padding: 4px 8px; font-size: 11.5px;
|
||||
background: var(--surface); border: 1px solid var(--border); color: var(--primary); border-radius: 4px; cursor: pointer;
|
||||
}
|
||||
.opening-roof-btn:hover { background: var(--primary-soft); border-color: var(--primary); }
|
||||
|
||||
/* Inspector: kruimelpad, schuiven, kleurstaal. */
|
||||
.ui-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; font-size: 11px; color: var(--text-faint); margin-bottom: 4px; }
|
||||
.ui-crumbs .bi { font-size: 9px; }
|
||||
.ui-crumbs span:last-child { color: var(--text-muted); }
|
||||
@@ -682,7 +634,6 @@ h1 { display: flex; align-items: center; gap: 7px; font-size: 12px; font-weight:
|
||||
.ui-range input[type=number] { width: 84px; }
|
||||
.ui-swatch { height: 14px; border-radius: 3px; border: 1px solid var(--border); margin: 2px 0 6px; }
|
||||
|
||||
/* Bouwfase (core/build-stages.js): schuif linksonder in de 3D. */
|
||||
.stage-bar {
|
||||
position: absolute; left: 15px; bottom: 14px; z-index: 10; min-width: 300px; max-width: calc(100% - 30px);
|
||||
background: rgba(0, 0, 0, 0.75); border: 1px solid #444; border-radius: 6px; padding: 7px 12px 6px; color: #eee; font-size: 12px;
|
||||
@@ -698,10 +649,7 @@ h1 { display: flex; align-items: center; gap: 7px; font-size: 12px; font-weight:
|
||||
.stage-ticks span.on { color: var(--primary-on-dark); }
|
||||
.stage-extra { display: none; margin-top: 6px; padding-top: 6px; border-top: 1px solid #444; }
|
||||
.stage-extra.show { display: flex; }
|
||||
.walking .stage-bar { display: none; }
|
||||
|
||||
/* Grafieken in het rapport (staafdiagrammen, HTML). Categorische kleuren
|
||||
in vaste volgorde: vloer, wanden, dak. */
|
||||
.viz { --series-1: #2a78d6; --series-2: #eb6834; --series-3: #1baf7a; --track: #eef1f5; }
|
||||
.viz-legend { display: flex; flex-wrap: wrap; gap: 12px; font-size: 11px; color: var(--text-muted); margin: -2px 0 8px; }
|
||||
.viz-legend span { display: inline-flex; align-items: center; gap: 5px; }
|
||||
@@ -722,9 +670,6 @@ h1 { display: flex; align-items: center; gap: 7px; font-size: 12px; font-weight:
|
||||
.viz-val { font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--text); text-align: right; white-space: nowrap; }
|
||||
.viz-note { font-size: 11px; color: var(--text-faint); line-height: 1.45; margin-top: 6px; }
|
||||
|
||||
/* ============================================================
|
||||
RIBBON (core/ribbon.js): tabbladen + groepen van 3 rijen hoog.
|
||||
============================================================ */
|
||||
#ribbon { flex: none; background: var(--van-emous-blue); border-bottom: 1px solid var(--border); position: relative; z-index: 100; user-select: none; }
|
||||
.rb-top { display: flex; align-items: flex-end; height: 34px; padding: 0 8px; }
|
||||
.rb-brand { display: flex; align-items: center; height: 100%; padding: 0 14px 0 4px; font-weight: 700; color: var(--primary); letter-spacing: .5px; }
|
||||
@@ -769,11 +714,10 @@ h1 { display: flex; align-items: center; gap: 7px; font-size: 12px; font-weight:
|
||||
.rb-kv small { font-weight: normal; color: var(--text-faint); margin-left: 2px; }
|
||||
.rb-note { grid-row: span 3; max-width: 260px; font-size: 11px; line-height: 1.4; color: var(--text-muted); white-space: normal; align-self: center; }
|
||||
.rb-note.rb-warn { color: var(--danger); }
|
||||
/* Velden (UI-kit) compact in de ribbon: label links, invoer rechts, één rij. */
|
||||
.rb-group .ui-field { min-height: 0; height: 26px; gap: 8px; }
|
||||
.rb-group .ui-field label { font-size: 11.5px; color: var(--text-muted); white-space: nowrap; }
|
||||
.rb-group .ui-control input[type=number] { width: 70px; padding: 2px 5px; font-size: 12px; }
|
||||
.rb-group .ui-control select { width: 132px; padding: 2px 4px; font-size: 12px; }
|
||||
.rb-group .ui-control select, .rb-group .ui-control input[type=text] { width: 132px; padding: 2px 4px; font-size: 12px; }
|
||||
.rb-group .ui-control input[type=color] { width: 46px; height: 22px; padding: 0; border: 1px solid var(--border); border-radius: 3px; background: none; }
|
||||
.rb-group .ui-unit { width: 20px; margin-left: 3px; font-size: 10.5px; }
|
||||
.rb-group .ui-switch { margin-right: 0; }
|
||||
@@ -792,7 +736,6 @@ h1 { display: flex; align-items: center; gap: 7px; font-size: 12px; font-weight:
|
||||
.rb-check { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text); cursor: pointer; white-space: nowrap; }
|
||||
.rb-check input { accent-color: var(--primary); }
|
||||
|
||||
/* Ribbon: hulpklassen voor de woning-tabbladen. */
|
||||
.rb-pair { display: flex; align-items: center; gap: 6px; }
|
||||
.rb-cols { grid-row: span 3; display: grid; grid-auto-flow: column; grid-template-rows: repeat(3, 26px); column-gap: 18px; align-items: center; }
|
||||
.rb-cols:empty { display: none; }
|
||||
|
||||
Reference in New Issue
Block a user