Skip to content

Commit 46c9200

Browse files
TheQuantifierTheQuantifier
committed
added intro_form page
1 parent 4e5fbd9 commit 46c9200

5 files changed

Lines changed: 950 additions & 4 deletions

File tree

‎itis3135/components/footer.html‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,8 +10,9 @@
1010
<a href="https://thequantifier.github.io/" target="_blank" rel="noopener">GitHub.io</a><span class="sep">•</span>
1111
<a href="https://github.com/TheQuantifier" target="_blank" rel="noopener">GitHub</a><span class="sep">•</span>
1212
<a href="jolly-hound/index.html" target="_blank" rel="noopener">Jolly Hound (Home)</a><span class="sep">•</span>
13-
<a href="jolly-hound/about.html" target="_blank" rel="noopener">Jolly Hound (About)</a>
14-
<a href="hobby/index.html" target="_blank" rel="noopener">Hobby Page</a>
13+
<a href="jolly-hound/about.html" target="_blank" rel="noopener">Jolly Hound (About)</a><span class="sep">•</span>
14+
<a href="hobby/index.html" target="_blank" rel="noopener">Hobby Page</a><span class="sep">•</span>
15+
<a href="intro_form.html" target="_blank" rel="noopener">Intro Form</a>
1516
</nav>
1617

1718
<p class="built-by">Designed by <strong>Manus Webworks</strong>.</p>

‎itis3135/components/header.html‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -14,8 +14,9 @@ <h1>John Hand – ITIS 3135</h1>
1414
<a href="https://thequantifier.github.io/" target="_blank" rel="noopener">GitHub.io</a><span class="sep">•</span>
1515
<a href="https://github.com/TheQuantifier" target="_blank" rel="noopener">GitHub</a><span class="sep">•</span>
1616
<a href="jolly-hound/index.html" target="_blank" rel="noopener">Jolly Hound (Home)</a><span class="sep">•</span>
17-
<a href="jolly-hound/about.html" target="_blank" rel="noopener">Jolly Hound (About)</a>
18-
<a href="hobby/index.html" target="_blank" rel="noopener">Hobby Page</a>
17+
<a href="jolly-hound/about.html" target="_blank" rel="noopener">Jolly Hound (About)</a><span class="sep">•</span>
18+
<a href="hobby/index.html" target="_blank" rel="noopener">Hobby Page</a><span class="sep">•</span>
19+
<a href="intro_form.html" target="_blank" rel="noopener">Intro Form</a>
1920
</div>
2021
</nav>
2122
</header>

‎itis3135/intro_form.html‎

Lines changed: 209 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,209 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<!--
4+
File: intro_form.html
5+
Purpose: BYO - Introduction Page Form
6+
-->
7+
<head>
8+
<meta charset="utf-8" />
9+
<meta name="viewport" content="width=device-width, initial-scale=1" />
10+
<title>Introduction Form — ITIS 3135</title>
11+
<meta name="description" content="Fill this form to generate an Introduction page clone (H2 will read 'Introduction Form')." />
12+
13+
<!-- Accumulus (required) -->
14+
<script src="https://lint.page/kit/4d0fe3.js" crossorigin="anonymous"></script>
15+
16+
<!-- Site CSS -->
17+
<link rel="stylesheet" href="styles/default.css" />
18+
<link rel="stylesheet" href="styles/page.css" />
19+
20+
<!-- Dynamic include loader and site JS (external per rubric) -->
21+
<script src="scripts/include.js" defer></script>
22+
<script src="scripts/main.js" defer></script>
23+
</head>
24+
25+
<body>
26+
<!-- ==================== HEADER (Dynamic Include) ==================== -->
27+
<header data-include="components/header.html"></header>
28+
29+
<!-- ==================== MAIN CONTENT ==================== -->
30+
<main id="content" class="wrap">
31+
<header class="page-head">
32+
<h2>Introduction Form</h2>
33+
<p class="muted">Please submit the form below.</p>
34+
</header>
35+
36+
<!-- Result container (populated by JS on submit) -->
37+
<section id="result-view" hidden aria-live="polite">
38+
<h3>Result Preview</h3>
39+
<!-- JS will inject the rendered introduction here -->
40+
</section>
41+
42+
<!-- ============ FORM VIEW ============ -->
43+
<section id="form-view" aria-live="polite">
44+
<h3>Introduction Form Inputs</h3>
45+
<form id="intro-form" novalidate>
46+
<!-- Identity -->
47+
<fieldset>
48+
<legend>Identity</legend>
49+
50+
<div class="col-half">
51+
<label for="firstName">First Name<span aria-hidden="true"> *</span>
52+
<input id="firstName" name="firstName" type="text" required placeholder="John" autocomplete="given-name" />
53+
</label>
54+
</div>
55+
56+
<div class="col-half">
57+
<label for="middleName">Middle Name / Initial (optional)
58+
<input id="middleName" name="middleName" type="text" placeholder="Alexander or A." autocomplete="additional-name" />
59+
</label>
60+
</div>
61+
62+
<div class="col-half">
63+
<label for="preferredName">Preferred / Nickname (optional)
64+
<input id="preferredName" name="preferredName" type="text" placeholder="Iohannes Manus" />
65+
</label>
66+
</div>
67+
68+
<div class="col-half">
69+
<label for="lastName">Last Name<span aria-hidden="true"> *</span>
70+
<input id="lastName" name="lastName" type="text" required placeholder="Hand" autocomplete="family-name" />
71+
</label>
72+
</div>
73+
</fieldset>
74+
75+
<!-- Acknowledgment -->
76+
<fieldset>
77+
<legend>Acknowledgment</legend>
78+
<label for="ackStatement">Acknowledgment Statement<span aria-hidden="true"> *</span>
79+
<input id="ackStatement" name="ackStatement" type="text" required placeholder="I certify that this page is my work..." />
80+
</label>
81+
82+
<!-- Use text + pattern instead of date to avoid polyfill warning -->
83+
<label for="ackDate">Acknowledgment Date<span aria-hidden="true"> *</span>
84+
<input id="ackDate" name="ackDate" type="text" required
85+
placeholder="YYYY-MM-DD" pattern="[0-9]{4}-[0-9]{2}-[0-9]{2}"
86+
title="Enter date as YYYY-MM-DD" />
87+
</label>
88+
</fieldset>
89+
90+
<!-- Mascot -->
91+
<fieldset>
92+
<legend>Mascot</legend>
93+
94+
<div class="col-half">
95+
<label for="mascotAdj">Mascot Adjective<span aria-hidden="true"> *</span>
96+
<input id="mascotAdj" name="mascotAdj" type="text" required placeholder="e.g., Jolly" />
97+
</label>
98+
</div>
99+
100+
<div class="col-half">
101+
<label for="mascotAnimal">Mascot Animal<span aria-hidden="true"> *</span>
102+
<input id="mascotAnimal" name="mascotAnimal" type="text" required placeholder="e.g., Hound" />
103+
</label>
104+
</div>
105+
106+
<label for="divider">Divider Character<span aria-hidden="true"> *</span>
107+
<input id="divider" name="divider" type="text" required maxlength="3" placeholder="~, |, ♥, •, etc." />
108+
</label>
109+
</fieldset>
110+
111+
<!-- Image -->
112+
<fieldset>
113+
<legend>Picture</legend>
114+
<p class="muted">Defaults to your existing intro image. You may let visitors upload their own.</p>
115+
<label for="picture">Upload Image (optional)
116+
<input id="picture" name="picture" type="file" accept="image/*" />
117+
</label>
118+
<label for="pictureUrl">Or Image URL (optional)
119+
<input id="pictureUrl" name="pictureUrl" type="url" placeholder="https://example.com/me.jpg" />
120+
</label>
121+
<label for="pictureCaption">Picture Caption<span aria-hidden="true"> *</span>
122+
<input id="pictureCaption" name="pictureCaption" type="text" required placeholder="A short descriptive caption" />
123+
</label>
124+
</fieldset>
125+
126+
<!-- Statement -->
127+
<fieldset>
128+
<legend>Personal Statement</legend>
129+
<label for="personalStatement">Statement<span aria-hidden="true"> *</span>
130+
<textarea id="personalStatement" name="personalStatement" rows="4" required placeholder="A few sentences about you."></textarea>
131+
</label>
132+
</fieldset>
133+
134+
<!-- 7 Main Bullets -->
135+
<fieldset>
136+
<legend>Seven Main Bullets</legend>
137+
<p class="muted">These typically include Personal Background, Professional Background, etc.</p>
138+
<div id="bullets">
139+
<!-- Seeded by scripts/introduction.js -->
140+
</div>
141+
</fieldset>
142+
143+
<!-- Courses -->
144+
<fieldset>
145+
<legend>Courses</legend>
146+
<p class="muted">Add each course with department, number, name, and a short reason.</p>
147+
148+
<div id="courses">
149+
<!-- Dynamic course rows appear here -->
150+
</div>
151+
152+
<p>
153+
<button type="button" id="add-course" class="btn" aria-label="Add course">+ Add Course</button>
154+
</p>
155+
</fieldset>
156+
157+
<!-- Quote -->
158+
<fieldset>
159+
<legend>Quote</legend>
160+
<label for="quote">Quote<span aria-hidden="true"> *</span>
161+
<textarea id="quote" name="quote" rows="2" required placeholder="“What you do speaks so loudly...”"></textarea>
162+
</label>
163+
<label for="quoteAuthor">Author<span aria-hidden="true"> *</span>
164+
<input id="quoteAuthor" name="quoteAuthor" type="text" required placeholder="Ralph Waldo Emerson" />
165+
</label>
166+
</fieldset>
167+
168+
<!-- Optional fun/share -->
169+
<fieldset>
170+
<legend>Extras (Optional)</legend>
171+
<label for="funnyThing">Funny thing (optional)
172+
<input id="funnyThing" name="funnyThing" type="text" placeholder="A quirky fact or joke" />
173+
</label>
174+
<label for="shareThing">Something to share (optional)
175+
<input id="shareThing" name="shareThing" type="text" placeholder="Something you'd like to share" />
176+
</label>
177+
</fieldset>
178+
179+
<!-- Links -->
180+
<fieldset>
181+
<legend>Links (5 total)</legend>
182+
<div id="links">
183+
<!-- Seeded by scripts/introduction.js -->
184+
</div>
185+
</fieldset>
186+
187+
<!-- Controls -->
188+
<div class="actions">
189+
<button type="submit" class="btn primary">Submit</button>
190+
<button type="reset" class="btn">Reset</button>
191+
<button type="button" id="clear-all" class="btn danger">Clear</button>
192+
</div>
193+
194+
<!-- Inline validation summary -->
195+
<div id="errors" class="errors" role="alert" aria-live="assertive" hidden></div>
196+
</form>
197+
</section>
198+
199+
<!-- Hidden “default image URL” used when no file is chosen -->
200+
<input type="hidden" id="defaultImageUrl" value="images/intro/profile.jpg" />
201+
</main>
202+
203+
<!-- ==================== FOOTER (Dynamic Include) ==================== -->
204+
<footer data-include="components/footer.html"></footer>
205+
206+
<!-- Assignment logic: modules are deferred by default; no 'defer' attribute -->
207+
<script src="scripts/introduction.js" type="module"></script>
208+
</body>
209+
</html>

0 commit comments

Comments
 (0)