Upgrade to interactive construction-tech landing page
Browse files- 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>
|
| 7 |
<style>
|
| 8 |
:root{
|
| 9 |
-
--
|
| 10 |
-
--
|
| 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:#
|
| 17 |
-
color:var(--text);min-height:100vh;
|
| 18 |
}
|
| 19 |
-
|
| 20 |
-
|
| 21 |
-
|
| 22 |
-
|
| 23 |
-
.
|
| 24 |
-
|
| 25 |
-
|
| 26 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 27 |
.formgrid{display:grid;grid-template-columns:1fr 1fr;gap:13px}
|
| 28 |
-
.field{background:#
|
| 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(--
|
| 37 |
-
.actions{display:flex;gap:10px;margin-top:16px}
|
| 38 |
-
button{border:0;border-radius:12px;padding:12px 16px;font-weight:800
|
| 39 |
-
.primary{background:linear-gradient(135deg,var(--
|
| 40 |
-
.secondary{background:#
|
| 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
|
| 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 |
-
|
| 58 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 59 |
</style>
|
| 60 |
</head>
|
| 61 |
-
<body>
|
| 62 |
-
<
|
| 63 |
-
<div class="
|
| 64 |
-
<
|
| 65 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 66 |
</div>
|
| 67 |
-
|
| 68 |
-
|
| 69 |
-
|
| 70 |
-
|
| 71 |
-
|
| 72 |
-
|
| 73 |
-
|
| 74 |
-
|
| 75 |
-
|
| 76 |
-
|
| 77 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 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 |
-
|
| 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 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 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 |
-
|
| 313 |
-
|
| 314 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 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>
|