-
Notifications
You must be signed in to change notification settings - Fork 0
/
test.html
144 lines (128 loc) · 4.64 KB
/
test.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
<!DOCTYPE html>
<html lang="en">
<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">
<title>Toolbox Test</title>
<link rel="stylesheet" href="./dist/toolbox.min.css">
<!-- Custom styling on top of ToolboxCSS can be applied on the ":root" -->
<style>
:root {
}
</style>
</head>
<body class="tbx-nav-fixed-offset">
<nav class="tbx-nav tbx-nav-fixed" role="navigation">
<a href="#" class="tbx-nav-brand">
<img src="logo.png" alt="Toolbox Logo" width="32" height="32">
<h1>Toolbox</h1>
</a>
<div class="tbx-nav-links">
<a href="#cards">Cards</a>
<a href="#forms">Forms</a>
<a href="#tables">Tables</a>
<a href="#modals">Modals</a>
<a href="#footer">Footer</a>
</div>
<div class="tbx-nav-right">
<button class="tbx-btn" onclick="tbx('body').toggleClass('tbx-dark')">Dark/Light mode</button>
<a class="tbx-btn" href="#login">Login</a>
</div>
<div class="tbx-nav-collapser tbx-nav-right">
<button class="tbx-btn" onclick="tbx.navcollapse()">☰</button>
</div>
</nav>
<main class="tbx-main" role="main">
<section id="cards">
<h2>Cards</h2>
<div class="tbx-card">
<img src="logo.png" width="64" height="64" alt="Toolbox Logo">
<h3>This is a card</h3>
<p>
It can be used to separate content into a small container. The container can even have buttons, images and links!
</p>
<div>
<button class="tbx-btn">Button</button>
<a href="#cards">Link</a>
</div>
</div>
</section>
<section id="forms">
<h2>Forms</h2>
<div class="tbx-card">
<h3>Send a message</h3>
<p>This example shows a contact form, inside a card.</p>
<form class="tbx-form">
<label for="name">Name</label>
<input type="text" name="name">
<label for="msg">Message</label>
<input type="text" name="msg">
<button type="submit" class="tbx-btn">Send</button>
</form>
</div>
</section>
<section id="tables">
<h2>Tables</h2>
<table class="tbx-table">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>35</td>
</tr>
<tr>
<td>Jane</td>
<td>Doe</td>
<td>31</td>
</tr>
<tr>
<td>Baby</td>
<td>Doe</td>
<td>2</td>
</tr>
</table>
</section>
<section id="modals">
<h2>Modals</h2>
<button onclick="tbx('#test-modal').show()" class="tbx-btn">Show test modal</button>
</section>
<section id="login">
<h2>Login</h2>
<div class="tbx-card" style="max-width: 15rem;">
<img src="logo.png" alt="Toolbox Logo" class="tbx-full-width">
<form class="tbx-form">
<label for="email">Email address</label>
<input type="email" name="email">
<label for="username">Username</label>
<input type="text" name="username">
<button type="submit" class="tbx-full-width tbx-btn">Login</button>
</form>
</div>
</section>
</main>
<div id="test-modal" class="tbx-modal">
<div class="tbx-modal-content">
<div class="tbx-modal-header">
<span onclick="tbx('#test-modal').hide()" class="tbx-close-btn">×</span>
<h2>Test Modal</h2>
</div>
<div class="tbx-modal-body">
<p>Some text in the Modal Body</p>
<p>Some other text...</p>
</div>
<div class="tbx-modal-footer">
<p>Bottom text</p>
</div>
</div>
</div>
<footer id="footer" class="tbx-footer">
Copyright © 2021 JanCraft
</footer>
<script src="./dist/toolbox.min.js"></script>
</body>
</html>