-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
84 lines (78 loc) · 4.46 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
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The page supports both dark and light color schemes,
and the page author prefers / default is light. -->
<meta name="color-scheme" content="light dark">
<!-- Replace the Bootstrap CSS with the
Bootstrap-Dark Variant CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap-dark-5@1.1.3/dist/css/bootstrap-dark.min.css" rel="stylesheet">
<title>XrayPB VPN</title>
<!-- Optional Meta Theme Color is also supported on Safari and Chrome -->
<meta name="theme-color" content="#111111" media="(prefers-color-scheme: light)">
<meta name="theme-color" content="#eeeeee" media="(prefers-color-scheme: dark)">
</head>
<body>
<main>
<div class="container">
<header class="mb-4 bd-header bg-dark py-3 d-flex align-items-stretch border-bottom border-dark" data-bs-color-scheme>
<div class="container-fluid d-flex align-items-center">
<h1 class="d-flex align-items-center fs-4 text-white mb-0">
<img src="/asset/img/xraypblogo3.png" width="30" height="30" class="me-3" alt="XrayPB">
XrayPB
</h1>
<!-- ***** ***** ***** THE BUTTON GOES BELOW HERE ***** ***** ***** -->
<div class="btn-group ms-auto" role="group">
<a id="darkmode-button" class="btn btn-outline-secondary"><i class="fa fa-moon-o fa-fw d-none d-light-inline" title="Switch to dark mode"></i><i class="fa fa-sun-o fa-fw d-none d-dark-inline" title="Switch to light mode"></i></a>
<div class="btn-group" role="group">
<button id="btnGroupDrop1" type="button" class="btn btn-outline-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false"></button>
<ul class="dropdown-menu" aria-labelledby="btnGroupDrop1">
<li><a id="darkmode-button-l-1" class="dropdown-item">Set Light Mode</a></li>
<li><a id="darkmode-button-d-1" class="dropdown-item">Set Dark Mode</a></li>
<li><hr class="dropdown-divider"></li>
<li><a id="darkmode-button-l-2" class="dropdown-item">Set Light Mode (no save)</a></li>
<li><a id="darkmode-button-d-2" class="dropdown-item">Set Dark Mode (no save)</a></li>
<li><hr class="dropdown-divider"></li>
<li><a id="darkmode-forget" class="dropdown-item">Reset Mode</a></li>
</ul>
</div>
</div>
<!-- ***** ***** ***** THE BUTTON GOES ABOVE HERE ***** ***** ***** -->
</div>
</header>
<div class="p-5 mb-4 bg-dark rounded-3 ">
<div class="container-fluid py-5">
<img src="/asset/img/xraypblogo.png" class="rounded mx-auto d-block width="240px" height="240px"" alt="logo">
<h1 class="display-5 fw-bold">Custom jumbotron</h1>
<p class="col-md-8 fs-4">Using a series of utilities, you can create this jumbotron, just like the one in previous versions of Bootstrap. Check out the examples below for how you can remix and restyle it to your liking.</p>
<button class="btn btn-primary btn-lg" type="button">Example button</button>
</div>
</div>
<div class="row align-items-md-stretch">
<div class="col-md-6">
<div class="h-100 p-5 text-white bg-dark rounded-3">
<h2>Change the background</h2>
<p>Swap the background-color utility and add a `.text-*` color utility to mix up the jumbotron look. Then, mix and match with additional component themes and more.</p>
<button class="btn btn-outline-light" type="button">Example button</button>
</div>
</div>
<div class="col-md-6">
<div class="h-100 p-5 bg-dark border rounded-3">
<h2>Add borders</h2>
<p>Or, keep it light and add a border for some added definition to the boundaries of your content. Be sure to look under the hood at the source HTML here as we've adjusted the alignment and sizing of both column's content for equal-height.</p>
<button class="btn btn-outline-secondary" type="button">Example button</button>
</div>
</div>
</div>
<!-- Optional Bootstrap JavaScript -->
<footer class="pt-3 mt-4 text-muted border-top">
XrayPB © 2022
</footer>
</div>
<script src="location/of/the/bootstrap.js/here"></script>
</main>
</body>
</html>