Skip to content

Commit fe83ad9

Browse files
SSOBHY2SSOBHY2
authored
Update print statement from 'Hello' to 'Goodbye'
1 parent ae55f4c commit fe83ad9

File tree

1 file changed

+34
-8
lines changed

1 file changed

+34
-8
lines changed

‎index.html‎

Lines changed: 34 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -39,9 +39,19 @@
3939
nav ul li { margin: 5px 15px; }
4040
nav ul li a { color: var(--primary-color); font-weight: 600; padding: 8px 15px; border-radius: 50px; transition: background-color 0.3s, color 0.3s; }
4141
nav ul li a:hover, nav ul li a:focus { background-color: var(--primary-color); color: var(--background-white); }
42-
.hero { padding: 5rem 2rem; text-align: center; background-color: var(--primary-color); color: var(--background-white); }
42+
43+
/* FIXED: Hero section with background image */
44+
.hero {
45+
padding: 6rem 2rem;
46+
text-align: center;
47+
color: var(--background-white);
48+
background-image: linear-gradient(rgba(0, 58, 110, 0.85), rgba(0, 58, 110, 0.85)), url('healthcare.jpg');
49+
background-size: cover;
50+
background-position: center;
51+
}
4352
.hero h1 { color: var(--background-white); border: none; }
44-
.hero p { font-size: 1.2em; max-width: 700px; margin: 1rem auto 0 auto; color: rgba(255, 255, 255, 0.85); }
53+
.hero p { font-size: 1.2em; max-width: 700px; margin: 1rem auto 0 auto; color: rgba(255, 255, 255, 0.9); }
54+
4555
.main { padding: 4rem 0; }
4656
.section { background: var(--background-white); margin-bottom: 40px; padding: 50px; border-radius: 16px; box-shadow: var(--shadow); overflow: hidden; }
4757

@@ -67,6 +77,9 @@
6777
.mockup-item img { width: 100%; max-width: 350px; height: auto; box-shadow: 0 10px 30px rgba(0,0,0,0.1), 0 0 0 10px #111; border-radius: 40px; transition: transform 0.3s; }
6878
.mockup-item img:hover { transform: translateY(-5px); }
6979
.mockup-item figcaption { margin-top: 1.5rem; font-weight: 600; color: var(--text-dark); }
80+
.requirements-list { list-style: none; padding-left: 0; }
81+
.requirements-list li { margin-bottom: 15px; position: relative; padding-left: 30px; font-size: 1.05em; }
82+
.requirements-list li::before { content: '✔'; color: var(--secondary-color); font-weight: bold; position: absolute; left: 0; top: 2px; }
7083
.research-artifact { border: 1px solid var(--border-color); border-radius: 8px; padding: 2rem; margin-top: 2rem; background: var(--background-light); }
7184
.research-artifact h4 { border-bottom: 2px solid var(--border-color); padding-bottom: 0.5rem; }
7285
blockquote { margin: 2rem 0; border-left: 5px solid var(--secondary-color); padding-left: 1.5rem; font-style: italic; font-size: 1.1em; color: var(--text-dark); }
@@ -91,6 +104,7 @@ <h1>HealthGuide QC</h1>
91104
<li><a href="#experience">The Experience</a></li>
92105
<li><a href="#design">The Process</a></li>
93106
<li><a href="#mockups">The Solution</a></li>
107+
<li><a href="#requirements">Requirements</a></li>
94108
<li><a href="#evidence">Evidence</a></li>
95109
</ul>
96110
</nav>
@@ -143,12 +157,12 @@ <h2>The Experience: Storyboards & User Flows</h2>
143157
<h3>Storyboard: A Visual Narrative</h3>
144158
<p><strong>This storyboard follows our persona, Mohammed, demonstrating his journey from initial anxiety to final empowerment.</strong></p>
145159
<div class="storyboard-grid">
146-
<div class="storyboard-panel"><div class="image-placeholder">1. The Problem</div><div class="caption">Mohammed feels chest tightness but hesitates to call for help due to the language barrier.</div></div>
147-
<div class="storyboard-panel"><div class="image-placeholder">2. The Solution</div><div class="caption">He opens HealthGuide QC and is relieved to find an Arabic language option.</div></div>
148-
<div class="storyboard-panel"><div class="image-placeholder">3. The Interaction</div><div class="caption">He nervously types his symptoms into the clean, simple interface.</div></div>
149-
<div class="storyboard-panel"><div class="image-placeholder">4. The Result</div><div class="caption">The AI provides a clear recommendation and a confidence score, building his trust.</div></div>
150-
<div class="storyboard-panel"><div class="image-placeholder">5. The Action</div><div class="caption">He follows the advice and uses the app to locate a recommended walk-in clinic nearby.</div></div>
151-
<div class="storyboard-panel"><div class="image-placeholder">6. The Outcome</div><div class="caption">With a clear plan, Mohammed feels confident and in control of his health situation.</div></div>
160+
<div class="storyboard-panel"><div class="image-placeholder">1. Symptom Onset</div><div class="caption">Mohammed feels chest tightness but hesitates to call for help due to the language barrier.</div></div>
161+
<div class="storyboard-panel"><div class="image-placeholder">2. Seeking Help</div><div class="caption">He opens HealthGuide QC and is relieved to find an Arabic language option.</div></div>
162+
<div class="storyboard-panel"><div class="image-placeholder">3. AI Interaction</div><div class="caption">He nervously types his symptoms into the clean, simple interface.</div></div>
163+
<div class="storyboard-panel"><div class="image-placeholder">4. Receiving Advice</div><div class="caption">The AI provides a clear recommendation and a confidence score, building his trust.</div></div>
164+
<div class="storyboard-panel"><div class="image-placeholder">5. Taking Action</div><div class="caption">He follows the advice and uses the app to locate a recommended walk-in clinic nearby.</div></div>
165+
<div class="storyboard-panel"><div class="image-placeholder">6. Outcome</div><div class="caption">With a clear plan, Mohammed feels confident and in control of his health situation.</div></div>
152166
</div>
153167

154168
<h3>User Journey & Flow Maps</h3>
@@ -202,6 +216,18 @@ <h2>The Solution: High-Fidelity Mockups</h2>
202216
</figure>
203217
</div>
204218
</section>
219+
220+
<section id="requirements" class="section">
221+
<h2>Final User Requirements</h2>
222+
<p><strong>Our design principles and user research were synthesized into a final set of functional requirements.</strong> This list serves as a summary of the core features the HealthGuide QC application must provide to be successful.</p>
223+
<ul class="requirements-list">
224+
<li><strong>Multilingual Support:</strong> The user must be able to interact with the application in English, French, and Arabic.</li>
225+
<li><strong>Transparent AI:</strong> Every recommendation must be accompanied by a confidence score and links to medical sources.</li>
226+
<li><strong>Human-in-the-Loop:</strong> The user must always have a clear, accessible option to connect with a human nurse (e.g., 811).</li>
227+
<li><strong>Actionable Next Steps:</strong> The application must provide clear, location-aware directions to appropriate healthcare facilities.</li>
228+
<li><strong>Data Privacy:</strong> User data must be handled securely and transparently, in accordance with Canadian privacy laws.</li>
229+
</ul>
230+
</section>
205231

206232
<section id="evidence" class="section">
207233
<h2>The Foundation: Evidence of User Research</h2>

0 commit comments

Comments
 (0)