CodeAntidote commited on
Commit
9999cf8
·
verified ·
1 Parent(s): dc7c978

Upgrade to interactive construction-tech landing page

Browse files
Files changed (1) hide show
  1. index.html +292 -56
index.html CHANGED
@@ -3,46 +3,160 @@
3
  <head>
4
  <meta charset="utf-8" />
5
  <meta name="viewport" content="width=device-width, initial-scale=1" />
6
- <title>Housing Market | PrintHome Time Optimizer</title>
7
  <style>
8
  :root{
9
- --bg:#ffffff; --card:#ffffff; --card2:#fff7f7; --text:#1f1f1f;
10
- --muted:#666666; --line:#f0d3d3; --accent:#c81e1e; --accent2:#ef4444;
11
- --danger:#c81e1e; --shadow:0 14px 38px rgba(200,30,30,.08);
12
  }
13
  *{box-sizing:border-box}
 
14
  body{
15
  margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
16
- background:#ffffff;
17
- color:var(--text);min-height:100vh;
18
  }
19
- .wrap{max-width:1180px;margin:0 auto;padding:34px 20px 56px}
20
- .hero{position:relative;display:flex;justify-content:space-between;gap:24px;align-items:flex-end;margin-bottom:24px}
21
- .badge{display:inline-block;padding:6px 10px;border:1px solid #efb3b3;border-radius:999px;color:#c81e1e;background:#fff5f5;font-size:12px;letter-spacing:.04em}
22
- h1{font-size:clamp(30px,5vw,54px);line-height:1.02;margin:12px 0 10px;letter-spacing:-.04em}
23
- .sub{max-width:720px;color:var(--muted);font-size:16px;line-height:1.55}
24
- .grid{display:grid;grid-template-columns:1.05fr .95fr;gap:20px}
25
- .panel{background:linear-gradient(180deg,#ffffff,#fffafa);border:1px solid var(--line);border-radius:20px;padding:20px;box-shadow:var(--shadow)}
26
- .panel h2{margin:0 0 4px;font-size:19px}.hint{color:var(--muted);font-size:13px;margin-bottom:18px}
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
27
  .formgrid{display:grid;grid-template-columns:1fr 1fr;gap:13px}
28
- .field{background:#ffffff;border:1px solid #f1d0d0;border-radius:14px;padding:12px}
29
  label{display:block;font-size:12px;color:#8a4b4b;margin-bottom:8px}
30
  input,select{width:100%;background:transparent;border:0;color:#c81e1e;font-size:22px;font-weight:700;outline:none}
31
- select{font-size:16px;appearance:auto}
32
- select option{color:#111;background:#fff}
33
  .unit{font-size:11px;color:#8a8a8a;margin-top:4px}
34
  .rangeRow{margin-top:14px;padding:14px;background:#fffafa;border:1px solid #f1d0d0;border-radius:14px}
35
  .rangeTop{display:flex;justify-content:space-between;gap:12px;font-size:13px;color:#7a4545;margin-bottom:10px}
36
- input[type=range]{accent-color:var(--accent);height:8px}
37
- .actions{display:flex;gap:10px;margin-top:16px}
38
- button{border:0;border-radius:12px;padding:12px 16px;font-weight:800;cursor:pointer}
39
- .primary{background:linear-gradient(135deg,var(--accent),#ef4444);color:#ffffff;flex:1}
40
- .secondary{background:#ffffff;color:#c81e1e;border:1px solid #efb3b3}
41
  .metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:16px}
42
  .metric{background:#fffafa;border:1px solid #f1d0d0;border-radius:15px;padding:14px}
43
  .metric .k{font-size:11px;color:#8b5a5a;text-transform:uppercase;letter-spacing:.08em}
44
  .metric .v{font-size:28px;font-weight:850;margin-top:5px}.metric .s{font-size:11px;color:#8a8a8a}
45
- .good{color:var(--accent)}.bad{color:var(--danger)}
46
  .timeline{margin:18px 0}
47
  .barLabel{display:flex;justify-content:space-between;font-size:12px;color:#7a4545;margin-bottom:7px}
48
  .bar{height:13px;background:#fff3f3;border-radius:99px;overflow:hidden;border:1px solid #f1d0d0}
@@ -54,41 +168,136 @@ button{border:0;border-radius:12px;padding:12px 16px;font-weight:800;cursor:poin
54
  .step{display:flex;justify-content:space-between;gap:12px;padding:10px 12px;border:1px solid #f1d0d0;border-radius:12px;background:#fffafa;font-size:13px}
55
  .step span:last-child{font-weight:800}
56
  .note{font-size:11px;color:#777;line-height:1.45;margin-top:15px}
57
- @media(max-width:850px){.grid{grid-template-columns:1fr}.hero{align-items:flex-start;flex-direction:column}.formgrid,.metrics{grid-template-columns:1fr 1fr}}
58
- @media(max-width:560px){.formgrid,.metrics{grid-template-columns:1fr}}
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
59
  </style>
60
  </head>
61
- <body>
62
- <div class="wrap">
63
- <div class="hero">
64
- <div style="position:absolute;top:0;right:0;font-size:11px;color:#8a4b4b;background:#fff7f7;border:1px solid #f0d3d3;border-radius:999px;padding:6px 10px;">
65
- © 2026 John Darby
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
66
  </div>
67
- <div>
68
- <div style="display:flex;align-items:center;gap:14px;margin-bottom:12px;flex-wrap:wrap">
69
- <div style="display:flex;align-items:center;gap:12px">
70
- <svg width="64" height="64" viewBox="0 0 72 72" aria-hidden="true">
71
- <rect x="5" y="5" width="62" height="62" rx="16" fill="#fff5f5" stroke="#c81e1e" stroke-width="2"/>
72
- <path d="M16 37 L36 20 L56 37" fill="none" stroke="#c81e1e" stroke-width="3.5" stroke-linecap="round" stroke-linejoin="round"/>
73
- <path d="M22 35 V53 H50 V35" fill="none" stroke="#c81e1e" stroke-width="3" stroke-linejoin="round"/>
74
- <rect x="31" y="41" width="10" height="12" rx="2" fill="#c81e1e"/>
75
- <rect x="45" y="30" width="4" height="10" rx="2" fill="#ef4444"/>
76
- <rect x="51" y="25" width="4" height="15" rx="2" fill="#ef4444"/>
77
- <rect x="57" y="19" width="4" height="21" rx="2" fill="#c81e1e"/>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
78
  </svg>
79
- <div>
80
- <div style="font-size:30px;font-weight:900;color:#c81e1e;line-height:1">Housing Market</div>
81
- <div style="font-size:12px;color:#7a4545;letter-spacing:.08em;text-transform:uppercase;margin-top:5px">PrintHome Compare</div>
82
- </div>
83
  </div>
 
 
84
  </div>
85
- <span class="badge">3D HOME CONSTRUCTION ANALYTICS</span>
86
- <h1 style="color:#222">Time Optimizer</h1>
87
- <div class="sub">Compare traditional construction with a 3D-printed-home schedule, estimate total time saved, and identify the next bottleneck slowing completion.</div>
88
- </div>
89
- </div>
90
 
91
- <div class="grid">
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
92
  <section class="panel">
93
  <h2>Project assumptions</h2>
94
  <div class="hint">Use a contractor estimate when available. Defaults are only demo values.</div>
@@ -168,8 +377,10 @@ button{border:0;border-radius:12px;padding:12px 16px;font-weight:800;cursor:poin
168
  <div class="note">This is an early planning model, not an engineering schedule, contractual estimate, or structural-safety tool. Validate inputs with project-specific contractors, printer vendors, engineers, and local authorities.</div>
169
  </section>
170
  </div>
171
- </div>
172
 
 
 
 
173
  <script>
174
  const defaults={
175
  projectName:"Austin Demo Home",
@@ -307,11 +518,36 @@ function resetDemo(){
307
  }
308
 
309
  calculate();
310
- </script>
311
 
312
- <footer style="text-align:center;padding:28px 12px 34px;color:#8a4b4b;font-size:13px;">
313
- © 2026 John Darby | PrintHome Compare. All rights reserved.
314
- </footer>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
315
 
 
 
 
 
 
 
 
 
 
 
316
  </body>
317
  </html>
 
3
  <head>
4
  <meta charset="utf-8" />
5
  <meta name="viewport" content="width=device-width, initial-scale=1" />
6
+ <title>PrintHome Compare | 3D Home Construction Analytics</title>
7
  <style>
8
  :root{
9
+ --red:#c81e1e; --red2:#ef4444; --ink:#1b1b1b; --muted:#666;
10
+ --line:#efd6d6; --soft:#fff7f7; --white:#fff;
 
11
  }
12
  *{box-sizing:border-box}
13
+ html{scroll-behavior:smooth}
14
  body{
15
  margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
16
+ color:var(--ink);background:#fff;
 
17
  }
18
+ a{text-decoration:none;color:inherit}
19
+ button,input,select{font:inherit}
20
+ button{cursor:pointer}
21
+
22
+ .topnav{
23
+ position:sticky;top:0;z-index:50;
24
+ background:rgba(255,255,255,.92);backdrop-filter:blur(16px);
25
+ border-bottom:1px solid #f1e5e5
26
+ }
27
+ .navinner{
28
+ max-width:1220px;margin:0 auto;padding:12px 22px;
29
+ display:flex;align-items:center;justify-content:space-between;gap:18px
30
+ }
31
+ .brand{display:flex;align-items:center;gap:11px}
32
+ .brandmark{
33
+ width:44px;height:44px;border:1px solid var(--line);border-radius:13px;
34
+ background:var(--soft);display:grid;place-items:center
35
+ }
36
+ .brandname{font-size:18px;font-weight:900;letter-spacing:-.025em}
37
+ .brandsub{font-size:9px;letter-spacing:.15em;text-transform:uppercase;color:#9b5656;margin-top:2px}
38
+ .navright{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
39
+ .navlink,.navcta{
40
+ border:0;border-radius:999px;padding:10px 13px;font-size:12px;font-weight:800;background:transparent
41
+ }
42
+ .navlink:hover{background:#fff3f3;color:var(--red)}
43
+ .navcta{background:var(--red);color:#fff}
44
+ .copyright{font-size:10px;color:#8b5a5a;border:1px solid var(--line);border-radius:999px;padding:6px 9px}
45
+
46
+ .shell{max-width:1220px;margin:0 auto;padding:0 22px}
47
+ .hero{
48
+ min-height:610px;display:grid;grid-template-columns:1.02fr .98fr;gap:36px;
49
+ align-items:center;padding:58px 0 50px;border-bottom:1px solid #f3e5e5
50
+ }
51
+ .eyebrow{
52
+ display:inline-flex;gap:8px;align-items:center;font-size:11px;font-weight:900;
53
+ letter-spacing:.14em;text-transform:uppercase;color:var(--red)
54
+ }
55
+ .eyedot{width:7px;height:7px;border-radius:99px;background:var(--red);box-shadow:0 0 0 6px #fff0f0}
56
+ .hero h1{
57
+ font-size:clamp(50px,7.5vw,94px);line-height:.91;letter-spacing:-.06em;
58
+ margin:18px 0 22px;color:#171717
59
+ }
60
+ .hero h1 span{color:var(--red)}
61
+ .lead{font-size:18px;line-height:1.6;color:#626262;max-width:660px}
62
+ .heroactions{display:flex;gap:10px;flex-wrap:wrap;margin-top:26px}
63
+ .heroactions button{
64
+ min-height:48px;padding:0 20px;border-radius:999px;font-weight:900;border:1px solid #dfc2c2
65
+ }
66
+ .primarybtn{background:var(--red);color:#fff;border-color:var(--red)!important}
67
+ .secondarybtn{background:#fff;color:#872525}
68
+ .hero-stats{display:flex;gap:28px;flex-wrap:wrap;margin-top:32px}
69
+ .hero-stat strong{font-size:24px;color:var(--red);display:block}
70
+ .hero-stat span{font-size:11px;color:#777}
71
+
72
+ .visual{
73
+ position:relative;min-height:475px;border-radius:30px;overflow:hidden;
74
+ border:1px solid #ecd1d1;background:linear-gradient(150deg,#fff8f8 0,#fff 52%,#fff2f2 100%)
75
+ }
76
+ .gridbg{
77
+ position:absolute;inset:0;
78
+ background-image:linear-gradient(rgba(200,30,30,.05) 1px,transparent 1px),
79
+ linear-gradient(90deg,rgba(200,30,30,.05) 1px,transparent 1px);
80
+ background-size:30px 30px;
81
+ mask-image:linear-gradient(to bottom,#000 58%,transparent)
82
+ }
83
+ .visual-inner{position:absolute;inset:30px;display:grid;place-items:center}
84
+ .house-svg{width:min(100%,520px);height:auto;overflow:visible}
85
+ .layer{
86
+ fill:none;stroke:#c81e1e;stroke-width:4;stroke-linecap:round;
87
+ stroke-dasharray:650;stroke-dashoffset:650;
88
+ animation:printLayer 5.4s ease-in-out infinite
89
+ }
90
+ .l2{animation-delay:.22s}.l3{animation-delay:.44s}.l4{animation-delay:.66s}.l5{animation-delay:.88s}.l6{animation-delay:1.1s}
91
+ @keyframes printLayer{
92
+ 0%,8%{stroke-dashoffset:650;opacity:.16}
93
+ 48%,82%{stroke-dashoffset:0;opacity:1}
94
+ 100%{stroke-dashoffset:0;opacity:.25}
95
+ }
96
+ .nozzle{transform-origin:center;animation:nozzle 5.4s ease-in-out infinite}
97
+ @keyframes nozzle{
98
+ 0%{transform:translateX(-112px)}48%{transform:translateX(112px)}82%,100%{transform:translateX(-112px)}
99
+ }
100
+ .scan{animation:scan 3.3s ease-in-out infinite}
101
+ @keyframes scan{0%,100%{opacity:.2;transform:translateY(-28px)}50%{opacity:.9;transform:translateY(84px)}}
102
+ .floatcard{
103
+ position:absolute;background:rgba(255,255,255,.96);border:1px solid #efd1d1;
104
+ border-radius:15px;padding:11px 13px;font-size:11px;box-shadow:0 14px 35px rgba(140,20,20,.08)
105
+ }
106
+ .floatcard strong{display:block;color:var(--red);font-size:18px;margin-top:3px}
107
+ .fc1{left:18px;bottom:18px}.fc2{right:18px;top:18px}
108
+
109
+ .section{padding:70px 0;border-bottom:1px solid #f3e7e7}
110
+ .sectionhead{display:grid;grid-template-columns:.62fr 1.38fr;gap:26px;margin-bottom:34px}
111
+ .kicker{font-size:11px;font-weight:900;letter-spacing:.14em;text-transform:uppercase;color:var(--red)}
112
+ .sectitle{font-size:clamp(33px,5vw,58px);line-height:1.03;letter-spacing:-.045em;margin:0;color:#262626}
113
+ .featuregrid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:#ecdede;border:1px solid #ecdede}
114
+ .feature{background:#fff;padding:25px;min-height:185px;transition:.22s ease}
115
+ .feature:hover{background:#fff8f8;transform:translateY(-3px)}
116
+ .feature .n{font-size:11px;color:var(--red);font-weight:900;letter-spacing:.08em}
117
+ .feature h3{font-size:20px;margin:25px 0 9px}
118
+ .feature p{font-size:13px;line-height:1.55;color:#686868;margin:0}
119
+
120
+ .workflow{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
121
+ .flow{
122
+ border:1px solid var(--line);border-radius:18px;padding:18px;background:#fff;
123
+ transition:.2s ease
124
+ }
125
+ .flow:hover{border-color:#df9f9f;background:#fff9f9}
126
+ .flownum{width:30px;height:30px;border-radius:99px;background:var(--red);color:#fff;display:grid;place-items:center;font-size:11px;font-weight:900}
127
+ .flow b{display:block;margin:16px 0 7px}.flow p{font-size:12px;color:#6d6d6d;line-height:1.5;margin:0}
128
+
129
+ .toolintro{
130
+ display:flex;justify-content:space-between;gap:24px;align-items:end;
131
+ padding-top:60px;margin-bottom:22px
132
+ }
133
+ .toolintro h2{font-size:clamp(36px,5vw,64px);letter-spacing:-.05em;margin:0}
134
+ .toolintro p{max-width:500px;color:#656565;line-height:1.55;margin:0}
135
+ #analyzer{scroll-margin-top:78px}
136
+
137
+ /* Existing calculator styling */
138
+ .grid{display:grid;grid-template-columns:1.05fr .95fr;gap:20px;padding-bottom:64px}
139
+ .panel{background:linear-gradient(180deg,#fff,#fffafa);border:1px solid var(--line);border-radius:20px;padding:20px;box-shadow:0 14px 38px rgba(200,30,30,.08)}
140
+ .panel h2{margin:0 0 4px;font-size:19px}
141
+ .hint{color:var(--muted);font-size:13px;margin-bottom:18px}
142
  .formgrid{display:grid;grid-template-columns:1fr 1fr;gap:13px}
143
+ .field{background:#fff;border:1px solid #f1d0d0;border-radius:14px;padding:12px}
144
  label{display:block;font-size:12px;color:#8a4b4b;margin-bottom:8px}
145
  input,select{width:100%;background:transparent;border:0;color:#c81e1e;font-size:22px;font-weight:700;outline:none}
146
+ select{font-size:16px;appearance:auto} select option{color:#111;background:#fff}
 
147
  .unit{font-size:11px;color:#8a8a8a;margin-top:4px}
148
  .rangeRow{margin-top:14px;padding:14px;background:#fffafa;border:1px solid #f1d0d0;border-radius:14px}
149
  .rangeTop{display:flex;justify-content:space-between;gap:12px;font-size:13px;color:#7a4545;margin-bottom:10px}
150
+ input[type=range]{accent-color:var(--red);height:8px}
151
+ .actions{display:flex;gap:10px;margin-top:16px;flex-wrap:wrap}
152
+ .actions button{border:0;border-radius:12px;padding:12px 16px;font-weight:800}
153
+ .primary{background:linear-gradient(135deg,var(--red),#ef4444);color:#fff;flex:1}
154
+ .secondary{background:#fff;color:#c81e1e;border:1px solid #efb3b3}
155
  .metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:16px}
156
  .metric{background:#fffafa;border:1px solid #f1d0d0;border-radius:15px;padding:14px}
157
  .metric .k{font-size:11px;color:#8b5a5a;text-transform:uppercase;letter-spacing:.08em}
158
  .metric .v{font-size:28px;font-weight:850;margin-top:5px}.metric .s{font-size:11px;color:#8a8a8a}
159
+ .good,.bad{color:var(--red)}
160
  .timeline{margin:18px 0}
161
  .barLabel{display:flex;justify-content:space-between;font-size:12px;color:#7a4545;margin-bottom:7px}
162
  .bar{height:13px;background:#fff3f3;border-radius:99px;overflow:hidden;border:1px solid #f1d0d0}
 
168
  .step{display:flex;justify-content:space-between;gap:12px;padding:10px 12px;border:1px solid #f1d0d0;border-radius:12px;background:#fffafa;font-size:13px}
169
  .step span:last-child{font-weight:800}
170
  .note{font-size:11px;color:#777;line-height:1.45;margin-top:15px}
171
+ footer{border-top:1px solid #f0e1e1;padding:28px 20px 35px;text-align:center;color:#8a4b4b;font-size:12px}
172
+
173
+ .reveal{opacity:0;transform:translateY(16px);transition:opacity .65s ease,transform .65s ease}
174
+ .reveal.show{opacity:1;transform:none}
175
+
176
+ @media(max-width:920px){
177
+ .hero{grid-template-columns:1fr;min-height:auto;padding-top:44px}
178
+ .navlink{display:none}.visual{min-height:360px}
179
+ .sectionhead{grid-template-columns:1fr}.featuregrid{grid-template-columns:1fr}
180
+ .workflow{grid-template-columns:1fr 1fr}.grid{grid-template-columns:1fr}
181
+ }
182
+ @media(max-width:620px){
183
+ .shell,.navinner{padding-left:14px;padding-right:14px}
184
+ .copyright{display:none}.hero h1{font-size:51px}.lead{font-size:16px}
185
+ .visual{min-height:320px}.workflow{grid-template-columns:1fr}
186
+ .formgrid,.metrics{grid-template-columns:1fr}.hero-stats{gap:18px}
187
+ }
188
+ @media(prefers-reduced-motion:reduce){
189
+ html{scroll-behavior:auto}.layer,.nozzle,.scan{animation:none}.reveal{opacity:1;transform:none}
190
+ }
191
  </style>
192
  </head>
193
+ <body id="top">
194
+ <header class="topnav">
195
+ <div class="navinner">
196
+ <a class="brand" href="#top">
197
+ <span class="brandmark">
198
+ <svg width="29" height="29" viewBox="0 0 64 64" aria-hidden="true">
199
+ <path d="M10 33 32 15 54 33" fill="none" stroke="#c81e1e" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
200
+ <path d="M17 31v21h30V31" fill="none" stroke="#c81e1e" stroke-width="3"/>
201
+ <rect x="26" y="39" width="8" height="13" rx="1.5" fill="#c81e1e"/>
202
+ <rect x="40" y="30" width="4" height="9" rx="1" fill="#e04a4a"/>
203
+ <rect x="46" y="24" width="4" height="15" rx="1" fill="#c81e1e"/>
204
+ </svg>
205
+ </span>
206
+ <span><div class="brandname">PrintHome Compare</div><div class="brandsub">Housing Market Analytics</div></span>
207
+ </a>
208
+ <div class="navright">
209
+ <button class="navlink" data-scroll="#what">What it does</button>
210
+ <button class="navlink" data-scroll="#workflow">Workflow</button>
211
+ <button class="navcta" data-scroll="#analyzer">Analyze Project</button>
212
+ <span class="copyright">© 2026 John Darby</span>
213
  </div>
214
+ </div>
215
+ </header>
216
+
217
+ <main>
218
+ <div class="shell">
219
+ <section class="hero">
220
+ <div>
221
+ <div class="eyebrow"><span class="eyedot"></span>3D Home Construction Decision Support</div>
222
+ <h1>BUILD<br><span>SMARTER.</span></h1>
223
+ <div class="lead">
224
+ See whether 3D printing can actually shorten the <b>whole home construction schedule</b> — not just the wall-printing phase.
225
+ </div>
226
+ <div class="heroactions">
227
+ <button class="primarybtn" data-scroll="#analyzer">Analyze a Project</button>
228
+ <button class="secondarybtn" data-scroll="#what">See How It Works</button>
229
+ </div>
230
+ <div class="hero-stats">
231
+ <div class="hero-stat"><strong id="heroSaved">18 days</strong><span>demo time saved</span></div>
232
+ <div class="hero-stat"><strong id="heroReduction">8.6%</strong><span>demo schedule reduction</span></div>
233
+ <div class="hero-stat"><strong>7 inputs+</strong><span>schedule factors modeled</span></div>
234
+ </div>
235
+ </div>
236
+
237
+ <div class="visual" aria-label="Animated illustration of a 3D printer building a house">
238
+ <div class="gridbg"></div>
239
+ <div class="visual-inner">
240
+ <svg class="house-svg" viewBox="0 0 560 390" role="img" aria-label="3D printed house construction animation">
241
+ <defs>
242
+ <linearGradient id="roof" x1="0" x2="1"><stop stop-color="#f7dada"/><stop offset="1" stop-color="#fff"/></linearGradient>
243
+ </defs>
244
+ <path d="M95 262 L280 116 L465 262" fill="url(#roof)" stroke="#333" stroke-width="4" stroke-linejoin="round"/>
245
+ <path d="M120 255 V326 H440 V255" fill="#fff" stroke="#333" stroke-width="3"/>
246
+ <path class="layer l1" d="M126 316 H434"/>
247
+ <path class="layer l2" d="M126 304 H434"/>
248
+ <path class="layer l3" d="M126 292 H434"/>
249
+ <path class="layer l4" d="M126 280 H434"/>
250
+ <path class="layer l5" d="M126 268 H434"/>
251
+ <path class="layer l6" d="M126 256 H434"/>
252
+ <rect x="242" y="275" width="74" height="51" rx="3" fill="#fff7f7" stroke="#c81e1e" stroke-width="3"/>
253
+ <rect x="154" y="272" width="54" height="35" rx="3" fill="#fff" stroke="#777" stroke-width="2"/>
254
+ <rect x="350" y="272" width="54" height="35" rx="3" fill="#fff" stroke="#777" stroke-width="2"/>
255
+ <g class="nozzle">
256
+ <rect x="257" y="182" width="46" height="38" rx="6" fill="#2b2b2b"/>
257
+ <path d="M270 220 H291 L285 239 H276 Z" fill="#c81e1e"/>
258
+ <path d="M281 239 V255" stroke="#c81e1e" stroke-width="4"/>
259
+ </g>
260
+ <path class="scan" d="M106 238 H454" stroke="#ef4444" stroke-width="2" stroke-dasharray="8 8"/>
261
  </svg>
 
 
 
 
262
  </div>
263
+ <div class="floatcard fc1">3D wall printing<strong>7 days</strong></div>
264
+ <div class="floatcard fc2">Project-level view<strong>Not walls only</strong></div>
265
  </div>
266
+ </section>
 
 
 
 
267
 
268
+ <section class="section reveal" id="what">
269
+ <div class="sectionhead">
270
+ <div class="kicker">What we solve</div>
271
+ <h2 class="sectitle">A fast print does not automatically mean a fast house.</h2>
272
+ </div>
273
+ <div class="featuregrid">
274
+ <article class="feature"><div class="n">01 / WHOLE PROJECT</div><h3>Measure real time saved</h3><p>Replace the conventional wall phase with printing, then account for setup, contingency, and overlapping work.</p></article>
275
+ <article class="feature"><div class="n">02 / BOTTLENECK</div><h3>Find what slows the project next</h3><p>If walls get faster, the schedule may become constrained by MEP, finishing, roofing, or another downstream phase.</p></article>
276
+ <article class="feature"><div class="n">03 / TRANSPARENCY</div><h3>Keep every assumption visible</h3><p>The first version uses editable planning assumptions instead of hiding the logic behind an unexplained AI score.</p></article>
277
+ </div>
278
+ </section>
279
+
280
+ <section class="section reveal" id="workflow">
281
+ <div class="sectionhead">
282
+ <div class="kicker">How it works</div>
283
+ <h2 class="sectitle">From project assumptions to a decision in four steps.</h2>
284
+ </div>
285
+ <div class="workflow">
286
+ <div class="flow"><div class="flownum">1</div><b>Describe the home</b><p>Project name, location, house type, size, and current schedule.</p></div>
287
+ <div class="flow"><div class="flownum">2</div><b>Enter print assumptions</b><p>Wall-print time, mobilization, setup, and contingency.</p></div>
288
+ <div class="flow"><div class="flownum">3</div><b>Compare schedules</b><p>The model replaces the wall phase and calculates project-level impact.</p></div>
289
+ <div class="flow"><div class="flownum">4</div><b>Find the next bottleneck</b><p>See the remaining phase with the greatest schedule-reduction opportunity.</p></div>
290
+ </div>
291
+ </section>
292
+
293
+ <section class="toolintro reveal" id="analyzer">
294
+ <div>
295
+ <div class="kicker">Interactive analyzer</div>
296
+ <h2>Run your project.</h2>
297
+ </div>
298
+ <p>Change the assumptions below. The results update when you analyze the schedule, so you can compare realistic and worst-case scenarios.</p>
299
+ </section>
300
+ <div class="grid">
301
  <section class="panel">
302
  <h2>Project assumptions</h2>
303
  <div class="hint">Use a contractor estimate when available. Defaults are only demo values.</div>
 
377
  <div class="note">This is an early planning model, not an engineering schedule, contractual estimate, or structural-safety tool. Validate inputs with project-specific contractors, printer vendors, engineers, and local authorities.</div>
378
  </section>
379
  </div>
 
380
 
381
+ </div>
382
+ </main>
383
+ <footer>© 2026 John Darby | PrintHome Compare. All rights reserved.</footer>
384
  <script>
385
  const defaults={
386
  projectName:"Austin Demo Home",
 
518
  }
519
 
520
  calculate();
 
521
 
522
+ const _originalCalculate = calculate;
523
+ calculate = function(){
524
+ _originalCalculate();
525
+ const savedEl=document.getElementById("saved");
526
+ const pctEl=document.getElementById("pct");
527
+ const hs=document.getElementById("heroSaved");
528
+ const hp=document.getElementById("heroReduction");
529
+ if(hs && savedEl) hs.textContent=savedEl.textContent+" days";
530
+ if(hp && pctEl) hp.textContent=pctEl.textContent;
531
+ };
532
+ calculate();
533
+ </script>
534
+ <script>
535
+ document.querySelectorAll("[data-scroll]").forEach(btn=>{
536
+ btn.addEventListener("click",()=>{
537
+ const target=document.querySelector(btn.getAttribute("data-scroll"));
538
+ if(target) target.scrollIntoView({behavior:"smooth",block:"start"});
539
+ });
540
+ });
541
 
542
+ const reveals=[...document.querySelectorAll(".reveal")];
543
+ if("IntersectionObserver" in window){
544
+ const io=new IntersectionObserver(entries=>{
545
+ entries.forEach(e=>{if(e.isIntersecting)e.target.classList.add("show")});
546
+ },{threshold:.13});
547
+ reveals.forEach(el=>io.observe(el));
548
+ }else{
549
+ reveals.forEach(el=>el.classList.add("show"));
550
+ }
551
+ </script>
552
  </body>
553
  </html>