-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
124 lines (111 loc) · 4.74 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Braille Embossers</title>
<style>
/* Global Styles */
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f5f5f5;
}
header {
background-color: #333;
color: #fff;
text-align: center;
padding: 20px;
box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2);
}
header img {
max-width: 80px;
border-radius: 50%;
}
h1 {
font-size: 2rem;
margin: 0;
}
section {
padding: 30px;
background-color: #fff;
margin: 20px;
border-radius: 10px;
box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1);
}
ul {
list-style-type: disc;
padding-left: 20px;
}
/* User Stories */
.user-story {
background-color: #f9f9f9;
padding: 20px;
margin-bottom: 20px;
border-radius: 10px;
box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1);
}
/* Footer */
footer {
background-color: #333;
color: #fff;
text-align: center;
padding: 10px;
}
a:hover {
font-weight: bold;
}
</style>
</head>
<body>
<header>
<h1>Braille Embossers</h1>
</header>
<section id="viewplus-100">
<center><h2>ViewPlus 100 Braille Embosser</h2></center>
<div class="product-info">
<center> <img src="https://github.com/SK-143381/is-568-brailleembosser/blob/main/viewplus-100.jpg" width="800" height="500" alt="ViewPlus 100 Braille Embosser"></center>
<p>The ViewPlus 100 Braille Embosser claims to be a state-of-the-art braille printer (priced at a whooping $14995.00 with the inkconnect extension) designed to empower visually impaired individuals.
It's supposed to act as a gateway to accessibility and inclusion.</p>
<p>It boasts the following key features:</p>
<ul>
<li>High-speed embossing for efficient braille production.</li>
<li>Support for various paper sizes and braille translation software.</li>
<li>Reliable and durable construction for long-term use.</li>
<li>Intuitive user interface for easy operation. <p style="color:red; font-size: x-small;"> PLEASE TAKE THIS WITH A GRAIN OF SALT --- AS THE USER STUDY WILL INFORM YOU</p></li>
<li>Enhanced connectivity options for seamless integration into your workflow. <p style="color: red; font-size: x-small;">WELL...</p></li>
</ul>
</div>
<p>With the ViewPlus 100, you 'can' produce braille documents quickly and accurately, making it an essential tool for education, employment, and everyday life for the blind and low vision students and professionals.</p>
</section>
<section id="user-stories">
<h2>User Stories</h2>
<div class="user-story">
<h3>User Story 1: Raima's tryst with the machine</h3>
<p>Raima is a sighted individual who wished to make the machine work.</p>
</div>
<a href="#user-story-2" style="color: black; text-decoration: none;">Read Tom's Story</a> |
<a href="#user-story-3" style="color: black; text-decoration: none;">Read Maria's Story</a>
</section>
<section id="user-story-2" style="color: black; text-decoration: none;">
<div class="user-story">
<h3>User Story 2: Aditya's Interaction with the Lochness</h3>
<p>Aditya is a visually impaired student, and wished to convert his presentation materials into braille.</p>
</div>
<a href="#user-stories" style="color: black; text-decoration: none;">Back to User Stories</a> |
<a href="#user-story-3" style="color: black; text-decoration: none;">Read Maria's Story</a>
</section>
<section id="user-story-3" style="color: black; text-decoration: none;">
<div class="user-story">
<h3>User Story 3: Raman and the Embosser - a story observed</h3>
<p>Raman is familiar with the machine and has used it before. Will familiarity make interction simpler?</p>
</div>
<a href="#user-stories" style="color: black; text-decoration: none;">Back to User Stories</a> |
<a href="#user-story-2" style="color: black; text-decoration: none;">Read Tom's Story</a>
</section>
<footer>
<p>© Sanchita and Aziz</p>
</footer>
</body>
</html>