-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
213 lines (196 loc) · 10.5 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="author" content="La'Tonia Mertica & Chris Willard" />
<meta name="description"
content="3D renderer/visualization resource for Construction Project Storyteller clients to use in their projects - easily creating 3D renders/visualizations." />
<meta name="keywords"
content="HTML, CSS, Javascript, 3D, render, simulation, visualization, construction, project, storyteller, storysim, Emergent Works, Mentorship" />
<title>Construction Project Storysim</title>
<link rel="stylesheet" href="styles.css" />
<link rel="stylesheet" href="styles-toggle-theme.css">
<link rel="stylesheet" href="https://unpkg.com/maplibre-gl/dist/maplibre-gl.css" />
<script src="https://kit.fontawesome.com/162036c593.js" crossorigin="anonymous"></script>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;900&display=swap" rel="stylesheet">
<script src="https://unpkg.com/maplibre-gl/dist/maplibre-gl.js"></script>
<script type="text/javascript" src="index.js" defer></script>
<script type="text/javascript" src="toggle-theme.js"></script>
</head>
<body>
<div class="grid-div">
<div class="background-div">
<div id="map"></div>
<i onclick="toggleTheme()" title="trash current theme"
class="toggleBtn fa-sharp fa-solid fa-dumpster fa-2xl fa-beat "></i>
<div class="row description-survey-row">
<div class="column">
<section class="title-description-links-credit">
<h1>CON<span class="charColor">STR</span>UCTION <span class="charColor">PRO</span>JECT STORY<span
class="charColor">SIM</span></h1>
<div class="description-survey-inner-row">
<h2>DESCRIPTION</h2>
<p><span class="bodyProjectTitle">CONSTRUCTION PROJECT STORYSIM</span> is an innovative solution that
uses
physical addresses and aerial footage to harness geospatial and mapping technology. CPVc seamlessly
generates
immersive 3D renderings enriched with precise data, including exact dimensions, square footage, terrain
details, and other critical information crucial for precise cost estimation, bid and proposal
specifications,
and building mutual understanding with clients. We’re committed to continual research and skill
development
-
positioning us as pioneers of industry innovation.
<br>
<br>
... we equip
users with a fast, free, reliable resource to accurately assess project sites, estimate project costs,
and provide realistic project visualizations through a visually stunning interface their clients can
understand ...
</p>
<form action="https://gmail.us5.list-manage.com/subscribe/post" method="POST" class="subscribeForm"
title="subscribe for monthly insight from 'Construction Project Storyteller'">
<input type="hidden" name="u" value="12d8e8938404fcff41008b28e">
<input type="hidden" name="id" value="ccefcfb5b9">
<label for="MERGE0" class="subscribeText">SUBSCRIBE: </label>
<input type="email" name="MERGE0" id="MERGE0" size="25" value=""
placeholder="enter email address">
<button type="submit" class="subscribeBtn" id="subscribeBtn"><span
class="submitBtnText">SUBMIT</span></button>
</form>
</div>
<div class="column survey-column">
<form action="javascript:;" id="user-form">
<div class="form-ctrl">
<label for="name" id="label-name">NAME: </label>
<input type="text" name="name" id="name" placeholder="enter name">
</div>
<div class="form-ctrl">
<label for="email" id="label-email">EMAIL: </label>
<input type="email" id="email" placeholder="enter email">
</div>
<br>
<div class="form-ctrl">
<label for="industry" id="label-industry">YOU ARE BEST DESCRIBED AS</label>
<select name="industry" id="industry">
<option value="construction">Construction</option>
<option value="pilot">Pilot</option>
<option value="solopreneur">Solopreneur</option>
<option value="other">Other</option>
</select>
</div>
<br>
<div class="form-ctrl">
Do you designate budget funds for multimedia
solutions?
<br>
<label for="survey-1" class="survey-form-text">
<input type="radio" id="survey-1" name="survey">Yes
</label>
<label for="survey-2" class="survey-form-text">
<input type="radio" id="survey-2" name="survey">No
</label>
<label for="survey-3" class="survey-form-text">
<input type="radio" id="survey-3" name="survey">Not Yet
</label>
</div>
<br>
<div class="form-ctrl">
Services you provide
<small>
(select all that apply)
</small>
<br>
<label for="input-1" class="survey-form-text"><input type="checkbox" name="input"
id="input-1">architecture</label><br>
<label for="input-2" class="survey-form-text"><input type="checkbox" name="input"
id="input-2">construction</label><br>
<label for="input-3" class="survey-form-text"><input type="checkbox" name="input"
id="input-3">drone/uas</label><br>
<label for="input-4" class="survey-form-text"><input type="checkbox" name="input"
id="input-4">estimation</label><br>
<label for="input-5" class="survey-form-text"><input type="checkbox" name="input" id="input-5">real
estate</label>
</div>
<br>
<div class="form-ctrl">
<span id="thoughts">
Share Your Thoughts</span>
<br>
<textarea name="thoughts" id="placeholder" placeholder=" enter thoughts here"></textarea>
</div>
<button type="submit" value="submit" id="survey-btn">SUBMIT</button>
</form>
</div>
</section>
</div>
</div>
</div>
</div>
<div class="row gateway-row">
<!-- GATEWAYS LINKED TO SUBPAGES -->
<!-- REPLACE SHOWSUBPAGE PARAMETER STRING javascript:; IN FIRST CODE BLOCK BELOW WITH STRING PARAMETER construction THEN IN SECOND CODE BLOCK WITH pilot THEN IN THIRD CODE BLOCK WITH solopreneur -->
<div class="column"><button type="button" class="gateways construction" title="content for construction users"
onclick="showSubpage('javascript:;')"><img src="assets/construction.png"
alt="Gateway for construction users"><br>CONSTRUCTION</button>
</div>
<div class="column"><button type="button" class="gateways pilot" title="content for pilot users"
onclick="showSubpage('javascript:;')"><img src="assets/pilot.png" alt="Gateway for pilot users"><br>PILOT
(DRONE)</button></div>
<div class="column"><button type="button" class="gateways solopreneur" title="content for solopreneur users"
onclick="showSubpage('javascript:;')"><img src="assets/solopreneur.png"
alt="Gateway for soloprenuer users"><br>SOLOPRENEUR</button>
</div>
<!-- SUBPAGES FOR USER GATEWAYS -->
<div id="construction" class="subpage">
<button type="button" id="storysim-construction-btn" class="pulse"
onclick="hideSubpage('construction')">‹
⁄ ›</button>
</div>
<div id="pilot" class="subpage">
<button type="button" id="storysim-pilot-btn" class="pulse" onclick="hideSubpage('pilot')">‹
⁄ ›</button>
</div>
<div id="solopreneur" class="subpage">
<button type="button" id="storysim-solopreneur-btn" class="pulse"
onclick="hideSubpage('solopreneur')">‹
⁄ ›</button>
</div>
</div>
<footer>
<!-- CREDITS LINKED TO SUBPAGES -->
<button type="button" class="footer-link" title="credit mentor video"
onclick="showSubpage('credit-mentor-page')">CREDIT
MENTOR</button><sup> <a href="assets/chris-willard.pdf" title="click to download chris contact pdf"
rel="noreferrer noopener" target="_blank" class="chrisPdf">☎</a></sup>
<span class="charColor forwardSlash">/</span> <button type="button" class="footer-link"
title="credit mentee video" onclick="showSubpage('credit-mentee-page')">CREDIT
MENTEE</button><sup class="lmSuperscript"><a href="assets/latonia-mertica.pdf"
title="click to download la'tonia mertica contact pdf" rel="noreferrer noopener" target="_blank"
class="lmPdf">☎</a></sup>
</footer>
<!-- SUBPAGES FOR CREDITS -->
<div id="credit-mentor-page" class="subpage">
<button type="button" id="credit-mentor-btn" class="pulse" title="close mentor credit video"
onclick="hideSubpage('credit-mentor-page')">‹
⁄ ›
</button><br><br>
<video autoplay controls loop poster="assets/poster-cw.png" class="video-cw">
<source src="assets/chris-willard.mp4" type="video/mp4">
Apologies - Your Browser Does Not Support Video Tag
</video>
</div>
<div id="credit-mentee-page" class="subpage">
<button type="button" id="credit-mentee-btn" class="pulse" title="close mentee credit video"
onclick="hideSubpage('credit-mentee-page')">‹
⁄ ›</button><br><br>
<video autoplay controls loop poster="assets/poster-lmsw.png" class="video-lmsw">
<source src="assets/latonia-mertica.mp4" type="video/mp4">
Apologies - Your Browser Does Not Support Video Tag
</video>
</div>
</body>
</html>