-
Notifications
You must be signed in to change notification settings - Fork 0
/
toi_example.html
executable file
·152 lines (146 loc) · 7.62 KB
/
toi_example.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
<!DOCTYPE html>
<html>
<head>
<title>TOI example</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="main.css">
<!-- styles for the toi div -->
<link rel="stylesheet" href="toi.css">
</head>
<body>
<header id="header_id">
<h1>A Big Fat Heading</h1>
</header>
<nav id="nav_id">
<ul class="nav_container">
<li id="home_id">Home</li>
<li id="profile_id">Profile</li>
<li class="search" id="search_id">
<input type="text" class="search_input" placeholder="Search" id="search_id">
</li>
<li id="logout_id">Logout</li>
</ul>
</nav>
<main id="main_id">
<h2 id="sub_id">Subsection heading</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Sagittis
aliquam malesuada bibendum arcu vitae elementum. Eget gravida cum
sociis natoque penatibus et magnis dis. Dolor sit amet consectetur
adipiscing elit duis tristique sollicitudin. Urna molestie at elementum
eu facilisis sed odio morbi. Faucibus vitae aliquet nec ullamcorper sit
amet. Quam adipiscing vitae proin sagittis nisl rhoncus mattis rhoncus.
Neque sodales ut etiam sit amet. Interdum consectetur libero id
faucibus nisl. Turpis in eu mi bibendum neque egestas congue quisque
egestas. Id diam maecenas ultricies mi eget mauris pharetra et
ultrices. Senectus et netus et malesuada fames ac turpis egestas. At
auctor urna nunc id cursus metus aliquam eleifend mi. Nec feugiat nisl
pretium fusce id velit ut tortor pretium. Arcu ac tortor dignissim
convallis aenean. Ac odio tempor orci dapibus ultrices in iaculis nunc
sed.</p>
<p>Lobortis feugiat vivamus at augue eget arcu dictum varius duis.
Rhoncus est pellentesque elit ullamcorper dignissim cras tincidunt.
Hendrerit dolor magna eget est. Maecenas volutpat blandit aliquam etiam
erat velit scelerisque in dictum. Gravida quis blandit turpis cursus
in. Lectus urna duis convallis convallis tellus id interdum velit.
Iaculis eu non diam phasellus vestibulum lorem sed. Pellentesque elit
eget gravida cum sociis natoque penatibus et magnis. Nullam vehicula
ipsum a arcu cursus vitae congue mauris. Euismod in pellentesque massa
placerat duis ultricies lacus. Risus in hendrerit gravida rutrum.
Ornare quam viverra orci sagittis eu volutpat odio facilisis mauris. In
fermentum posuere urna nec. Ac felis donec et odio pellentesque diam
volutpat commodo sed. Varius morbi enim nunc faucibus a pellentesque
sit amet. Scelerisque felis imperdiet proin fermentum leo vel.</p>
<p>Lectus mauris ultrices eros in cursus turpis massa. Non blandit
massa enim nec dui nunc mattis. Eu sem integer vitae justo eget magna
fermentum iaculis eu. Sit amet aliquam id diam maecenas. Sed blandit
libero volutpat sed cras ornare arcu. Eu non diam phasellus vestibulum
lorem. Amet mauris commodo quis imperdiet. Mauris vitae ultricies leo
integer malesuada nunc. Sed id semper risus in hendrerit gravida rutrum
quisque non. Nibh sit amet commodo nulla facilisi nullam vehicula ipsum
a. Aenean sed adipiscing diam donec adipiscing tristique risus. Lorem
sed risus ultricies tristique nulla aliquet. Nulla aliquet porttitor
lacus luctus accumsan tortor posuere.</p>
<p>Lectus mauris ultrices eros in cursus turpis massa. Non blandit
massa enim nec dui nunc mattis. Eu sem integer vitae justo eget magna
fermentum iaculis eu. Sit amet aliquam id diam maecenas. Sed blandit
libero volutpat sed cras ornare arcu. Eu non diam phasellus vestibulum
lorem. Amet mauris commodo quis imperdiet. Mauris vitae ultricies leo
integer malesuada nunc. Sed id semper risus in hendrerit gravida rutrum
quisque non. Nibh sit amet commodo nulla facilisi nullam vehicula ipsum
a. Aenean sed adipiscing diam donec adipiscing tristique risus. Lorem
sed risus ultricies tristique nulla aliquet. Nulla aliquet porttitor
lacus luctus accumsan tortor posuere.</p>
<p>Lectus mauris ultrices eros in cursus turpis massa. Non blandit
massa enim nec dui nunc mattis. Eu sem integer vitae justo eget magna
fermentum iaculis eu. Sit amet aliquam id diam maecenas. Sed blandit
libero volutpat sed cras ornare arcu. Eu non diam phasellus vestibulum
lorem. Amet mauris commodo quis imperdiet. Mauris vitae ultricies leo
integer malesuada nunc. Sed id semper risus in hendrerit gravida rutrum
quisque non. Nibh sit amet commodo nulla facilisi nullam vehicula ipsum
a. Aenean sed adipiscing diam donec adipiscing tristique risus. Lorem
sed risus ultricies tristique nulla aliquet. Nulla aliquet porttitor
lacus luctus accumsan tortor posuere.</p>
<p>Lectus mauris ultrices eros in cursus turpis massa. Non blandit
massa enim nec dui nunc mattis. Eu sem integer vitae justo eget magna
fermentum iaculis eu. Sit amet aliquam id diam maecenas. Sed blandit
libero volutpat sed cras ornare arcu. Eu non diam phasellus vestibulum
lorem. Amet mauris commodo quis imperdiet. Mauris vitae ultricies leo
integer malesuada nunc. Sed id semper risus in hendrerit gravida rutrum
quisque non. Nibh sit amet commodo nulla facilisi nullam vehicula ipsum
a. Aenean sed adipiscing diam donec adipiscing tristique risus. Lorem
sed risus ultricies tristique nulla aliquet. Nulla aliquet porttitor
lacus luctus accumsan tortor posuere.</p>
<p>Lectus mauris ultrices eros in cursus turpis massa. Non blandit
massa enim nec dui nunc mattis. Eu sem integer vitae justo eget magna
fermentum iaculis eu. Sit amet aliquam id diam maecenas. Sed blandit
libero volutpat sed cras ornare arcu. Eu non diam phasellus vestibulum
lorem. Amet mauris commodo quis imperdiet. Mauris vitae ultricies leo
integer malesuada nunc. Sed id semper risus in hendrerit gravida rutrum
quisque non. Nibh sit amet commodo nulla facilisi nullam vehicula ipsum
a. Aenean sed adipiscing diam donec adipiscing tristique risus. Lorem
sed risus ultricies tristique nulla aliquet. Nulla aliquet porttitor
lacus luctus accumsan tortor posuere.</p>
</main>
<footer id="footer_id">
<p>This is an insignificant footer paragraph.</p>
</footer>
<button id="toi_btn">TOI</button>
<script type="module">
import toi_init from './toi.mjs';
const tour_info = [
{
id: 'header_id',
info: ['This is the header.', 'A header comes at the top of a page. Usually it contains heading elements such as h1. It can contain other elements that are appropriate at the top of a page though.'],
},
{
id: 'home_id',
info: ['This takes you to the Home page.'],
},
{
id: 'profile_id',
info: ['This shows you the profile of the current user. The current user may edit the page if she wishes.'],
},
{
id: 'search_id',
info: ['Search of content on this site using this input box.'],
},
{
id: 'logout_id',
info: ['This button logs you out.'],
},
{
id: 'main_id',
info: ['This holds the main content of the page.'],
},
{
id: 'footer_id',
info: ['This is the footer.'],
},
];
// Pass in the data and the id of the toi button
toi_init(tour_info, 'toi_btn');
</script>
</body>
</html>