-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
129 lines (126 loc) · 7.36 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
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="author" content="D7460N" />
<meta name="description" content="Could tell you, but then I'd have to... well, you know." />
<meta name="color-scheme" content="dark light" />
<title>D7460N</title>
<link type="image/svg+xml" rel="icon" href="assets/images/logo.svg" />
<link type="text/css" rel="stylesheet" href="assets/css/styles.css" />
</head>
<body style="opacity: 0.0; transition: opacity 1s ease-in-out;">
<app-container>
<header>
<app-logo>HEADER</app-logo>
<label for="toggleLayout">
<input type="checkbox" id="toggleLayout" />
<demo-buttons>Layouts</demo-buttons>
</label>
<label for="toggleTheme">
<input type="checkbox" id="toggleTheme" />
<demo-buttons>Themes</demo-buttons>
</label>
</header>
<nav>
<header>NAV</header>
<panel-list>
<label for="radio01">
<input type="radio" id="radio01" name="radio" checked />
<list-cell>NAV TAB 01</list-cell>
</label>
<label for="radio02">
<input type="radio" id="radio02" name="radio" />
<list-cell>NAV TAB 02</list-cell>
</label>
<label for="radio03">
<input type="radio" id="radio03" name="radio" />
<list-cell>NAV TAB 03</list-cell>
</label>
<label for="radio04">
<input type="radio" id="radio04" name="radio" />
<list-cell>NAV TAB 04</list-cell>
</label>
<label for="radio05">
<input type="radio" id="radio05" name="radio" />
<list-cell>NAV TAB 05</list-cell>
</label>
</panel-list>
</nav>
<main>
<header>MAIN</header>
<panel-tab id="tab01">
<panel-list>
<p>TAB 01</p>
<p>Sticky header/scrolllable content (no js).</p>
</panel-list>
</panel-tab>
<panel-tab id="tab02">
<panel-list>
<p>TAB 02</p>
<p>Sticky header/scrolllable content (no js).</p>
<p>Eget mauris pharetra et ultrices neque ornare aenean euismod elementum. Massa enim nec dui nunc mattis enim.</p>
<p>Viverra suspendisse potenti nullam ac tortor vitae. Ornare lectus sit amet est placerat in egestas erat. Mi proin sed libero enim sed faucibus turpis in eu. Iaculis at erat pellentesque adipiscing commodo elit. Ac orci phasellus egestas tellus rutrum tellus pellentesque.</p>
<p>Integer feugiat scelerisque varius morbi enim nunc faucibus a. Non odio euismod lacinia at quis risus sed. Donec enim diam vulputate ut. Tempor nec feugiat nisl pretium fusce id velit ut tortor. Dolor sit amet consectetur adipiscing elit duis tristique sollicitudin. Massa massa ultricies mi quis hendrerit dolor magna eget.</p>
<p>Viverra suspendisse potenti nullam ac tortor vitae. Ornare lectus sit amet est placerat in egestas erat. Mi proin sed libero enim sed faucibus turpis in eu. Iaculis at erat pellentesque adipiscing commodo elit. Ac orci phasellus egestas tellus rutrum tellus pellentesque.</p>
<p>Integer feugiat scelerisque varius morbi enim nunc faucibus a. Non odio euismod lacinia at quis risus sed. Donec enim diam vulputate ut. Tempor nec feugiat nisl pretium fusce id velit ut tortor. Dolor sit amet consectetur adipiscing elit duis tristique sollicitudin. Massa massa ultricies mi quis hendrerit dolor magna eget.</p>
<p>Viverra suspendisse potenti nullam ac tortor vitae. Ornare lectus sit amet est placerat in egestas erat. Mi proin sed libero enim sed faucibus turpis in eu. Iaculis at erat pellentesque adipiscing commodo elit. Ac orci phasellus egestas tellus rutrum tellus pellentesque.</p>
<p>Integer feugiat scelerisque varius morbi enim nunc faucibus a. Non odio euismod lacinia at quis risus sed. Donec enim diam vulputate ut. Tempor nec feugiat nisl pretium fusce id velit ut tortor. Dolor sit amet consectetur adipiscing elit duis tristique sollicitudin. Massa massa ultricies mi quis hendrerit dolor magna eget.</p>
</panel-list>
</panel-tab>
<panel-tab id="tab03">
<panel-list>
<p>TAB 03</p>
<p>Sticky header/scrolllable content (no js).</p>
<p>Vitae tempus quam pellentesque nec. Odio aenean sed adipiscing diam donec adipiscing tristique risus. Congue eu consequat ac felis donec et odio.</p>
<p>Adipiscing enim eu turpis egestas pretium aenean. Posuere morbi leo urna molestie at elementum eu facilisis. Aenean et tortor at risus viverra adipiscing at in. Egestas sed tempus urna et pharetra pharetra massa.</p>
</panel-list>
</panel-tab>
<panel-tab id="tab04">
<panel-list>
<p>TAB 04</p>
<p>Sticky header/scrolllable content (no js).</p>
<p>Lectus mauris ultrices eros in cursus turpis massa. Ultrices gravida dictum fusce ut placerat orci.</p>
<p>Quisque id diam vel quam elementum. Ut sem viverra aliquet eget. Elementum tempus egestas sed sed risus pretium.</p>
</panel-list>
</panel-tab>
<panel-tab id="tab05">
<panel-list>
<p>TAB 05</p>
<p>Sticky header/scrolllable content (no js).</p>
<p>Mauris pellentesque pulvinar pellentesque habitant morbi tristique senectus et.</p>
<p>Et molestie ac feugiat sed lectus vestibulum mattis. Vestibulum morbi blandit cursus risus at ultrices mi tempus.</p>
</panel-list>
</panel-tab>
</main>
<aside>
<header>ASIDE</header>
<panel-list>
<p>Sticky header/scrolllable content (no js).</p>
<p>In publishing and graphic design, Lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document or a typeface without relying on meaningful content. Lorem ipsum may be used as a placeholder before final copy is available.</p>
<p>Adipiscing enim eu turpis egestas pretium aenean. Posuere morbi leo urna molestie at elementum eu facilisis. Aenean et tortor at risus viverra adipiscing at in. Egestas sed tempus urna et pharetra pharetra massa.</p>
<p>ASIDE content. In publishing and graphic design, Lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document or a typeface without relying on meaningful content. Lorem ipsum may be used as a placeholder before final copy is available.</p>
<p>Adipiscing enim eu turpis egestas pretium aenean. Posuere morbi leo urna molestie at elementum eu facilisis. Aenean et tortor at risus viverra adipiscing at in. Egestas sed tempus urna et pharetra pharetra massa.</p>
</panel-list>
</aside>
<aside-2>
<header>ASIDE-2</header>
<panel-list>
<p>Sticky header/scrolllable content (no js).</p>
</panel-list>
</aside-2>
<footer>
<powered-by>FOOTER</powered-by>
<app-version>v.0.00001</app-version>
</footer>
</app-container>
<script type="text/javascript" charset="utf-8" src="assets/js/scripts.js"></script>
<noscript>
<style>
body {opacity: 1.0;}
</style>
</noscript>
</body>
</html>