/
index.html
153 lines (142 loc) · 11.8 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
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="assets/css/bootstrap.min.css">
<link rel="stylesheet" href="assets/css/reset.css">
<link rel="stylesheet" href="assets/css/app.css">
<link rel="stylesheet" href="assets/css/OverlayScrollbars.min.css">
<title>Hello, world!</title>
</head>
<body onload="startTime()">
<div class="w-100 h-100 position-relative">
<div class="position-absolute settings-wrapper">
<div class="btn-group">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<svg xmlns='http://www.w3.org/2000/svg' class='ionicon-settings' viewBox='0 0 512 512'><title>Settings</title><circle cx='256' cy='256' r='48'/><path d='M470.39 300l-.47-.38-31.56-24.75a16.11 16.11 0 01-6.1-13.33v-11.56a16 16 0 016.11-13.22L469.92 212l.47-.38a26.68 26.68 0 005.9-34.06l-42.71-73.9a1.59 1.59 0 01-.13-.22A26.86 26.86 0 00401 92.14l-.35.13-37.1 14.93a15.94 15.94 0 01-14.47-1.29q-4.92-3.1-10-5.86a15.94 15.94 0 01-8.19-11.82l-5.59-39.59-.12-.72A27.22 27.22 0 00298.76 26h-85.52a26.92 26.92 0 00-26.45 22.39l-.09.56-5.57 39.67a16 16 0 01-8.13 11.82 175.21 175.21 0 00-10 5.82 15.92 15.92 0 01-14.43 1.27l-37.13-15-.35-.14a26.87 26.87 0 00-32.48 11.34l-.13.22-42.77 73.95a26.71 26.71 0 005.9 34.1l.47.38 31.56 24.75a16.11 16.11 0 016.1 13.33v11.56a16 16 0 01-6.11 13.22L42.08 300l-.47.38a26.68 26.68 0 00-5.9 34.06l42.71 73.9a1.59 1.59 0 01.13.22 26.86 26.86 0 0032.45 11.3l.35-.13 37.07-14.93a15.94 15.94 0 0114.47 1.29q4.92 3.11 10 5.86a15.94 15.94 0 018.19 11.82l5.56 39.59.12.72A27.22 27.22 0 00213.24 486h85.52a26.92 26.92 0 0026.45-22.39l.09-.56 5.57-39.67a16 16 0 018.18-11.82c3.42-1.84 6.76-3.79 10-5.82a15.92 15.92 0 0114.43-1.27l37.13 14.95.35.14a26.85 26.85 0 0032.48-11.34 2.53 2.53 0 01.13-.22l42.71-73.89a26.7 26.7 0 00-5.89-34.11zm-134.48-40.24a80 80 0 11-83.66-83.67 80.21 80.21 0 0183.66 83.67z'/></svg>
</a>
<div class="dropdown-menu dropdown-menu-right p-0">
<div class="d-flex h-100">
<div class="w-25 position-relative">
<div class="nav flex-column nav-pills" id="v-pills-tab" role="tablist" aria-orientation="vertical">
<a class="nav-link active" id="v-pills-home-tab" data-toggle="pill" href="#v-pills-home" role="tab" aria-controls="v-pills-home" aria-selected="true">Home</a>
<a class="nav-link" id="v-pills-profile-tab" data-toggle="pill" href="#v-pills-profile" role="tab" aria-controls="v-pills-profile" aria-selected="false">Profile</a>
<a class="nav-link" id="v-pills-messages-tab" data-toggle="pill" href="#v-pills-messages" role="tab" aria-controls="v-pills-messages" aria-selected="false">Messages</a>
<a class="nav-link" id="v-pills-settings-tab" data-toggle="pill" href="#v-pills-settings" role="tab" aria-controls="v-pills-settings" aria-selected="false">Settings</a>
<a class="nav-link" id="v-pills-profile-tab" data-toggle="pill" href="#v-pills-profile" role="tab" aria-controls="v-pills-profile" aria-selected="false">Profile</a>
<a class="nav-link" id="v-pills-messages-tab" data-toggle="pill" href="#v-pills-messages" role="tab" aria-controls="v-pills-messages" aria-selected="false">Messages</a>
<a class="nav-link" id="v-pills-settings-tab" data-toggle="pill" href="#v-pills-settings" role="tab" aria-controls="v-pills-settings" aria-selected="false">Settings</a>
<a class="nav-link" id="v-pills-profile-tab" data-toggle="pill" href="#v-pills-profile" role="tab" aria-controls="v-pills-profile" aria-selected="false">Profile</a>
</div>
</div>
<div class="w-75 position-relative">
<div class="tab-content" id="v-pills-tabContent">
<div class="tab-pane fade show active" id="v-pills-home" role="tabpanel" aria-abelledby="v-pills-home-tab">
<div class="d-flex flex-column mb-3 title-menu-content">
<span>General</span>
<span>Description of Title Menu</span>
</div>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Id blanditiis maxime accusantium quas maiores doloremque eum iusto ipsa minima qui reprehenderit sit deleniti, sapiente explicabo dicta totam voluptas quae nisi.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Id blanditiis maxime accusantium quas maiores doloremque eum iusto ipsa minima qui reprehenderit sit deleniti, sapiente explicabo dicta totam voluptas quae nisi.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Id blanditiis maxime accusantium quas maiores doloremque eum iusto ipsa minima qui reprehenderit sit deleniti, sapiente explicabo dicta totam voluptas quae nisi.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Id blanditiis maxime accusantium quas maiores doloremque eum iusto ipsa minima qui reprehenderit sit deleniti, sapiente explicabo dicta totam voluptas quae nisi.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Id blanditiis maxime accusantium quas maiores doloremque eum iusto ipsa minima qui reprehenderit sit deleniti, sapiente explicabo dicta totam voluptas quae nisi.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Id blanditiis maxime accusantium quas maiores doloremque eum iusto ipsa minima qui reprehenderit sit deleniti, sapiente explicabo dicta totam voluptas quae nisi.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Id blanditiis maxime accusantium quas maiores doloremque eum iusto ipsa minima qui reprehenderit sit deleniti, sapiente explicabo dicta totam voluptas quae nisi.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Id blanditiis maxime accusantium quas maiores doloremque eum iusto ipsa minima qui reprehenderit sit deleniti, sapiente explicabo dicta totam voluptas quae nisi.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Id blanditiis maxime accusantium quas maiores doloremque eum iusto ipsa minima qui reprehenderit sit deleniti, sapiente explicabo dicta totam voluptas quae nisi.
</div>
<div class="tab-pane fade" id="v-pills-profile" role="tabpanel" aria-labelledby="v-pills-profile-tab">...</div>
<div class="tab-pane fade" id="v-pills-messages" role="tabpanel" aria-labelledby="v-pills-messages-tab">...</div>
<div class="tab-pane fade" id="v-pills-settings" role="tabpanel" aria-labelledby="v-pills-settings-tab">...</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="bg-overlay"></div>
<div>
<img src="https://images.pexels.com/photos/5231685/pexels-photo-5231685.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" alt="" class="bg-home">
</div>
<div class="d-flex align-items-center h-100 content-wrapper">
<div class="mx-auto text-center mr-5">
<div class="content-top">
<h1 id="clock-o" class="clocks"></h1>
<h2 class="mantras">Good Morning, Hen.</h2>
</div>
<div class="input-search-wrapper">
<form action="https://www.google.com/search" id="form-search" method="GET">
<div class="input-group mb-1">
<div class="input-group-prepend">
<button class="btn bg-transparent search-type-button dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Google</button>
<div class="search-type-content dropdown-menu">
<a class="dropdown-item" data-id="google" href="#">Google</a>
<a class="dropdown-item" data-id="duckduckgo" href="#">DuckDuckGo</a>
<a class="dropdown-item" data-id="youtube" href="#">Youtube Search</a>
<a class="dropdown-item" data-id="github" href="#">Github</a>
<a class="dropdown-item" data-id="bing" href="#">Bing</a>
</div>
</div>
<input type="text" class="form-control input-search bg-transparent border-0" name="q" placeholder="Search on Google">
<div class="input-group-append">
<button type="submit" class="bg-transparent border-0">
<svg xmlns='http://www.w3.org/2000/svg' class='ionicon-search' viewBox='0 0 512 512'><title>Search</title><path d='M456.69 421.39L362.6 327.3a173.81 173.81 0 0034.84-104.58C397.44 126.38 319.06 48 222.72 48S48 126.38 48 222.72s78.38 174.72 174.72 174.72A173.81 173.81 0 00327.3 362.6l94.09 94.09a25 25 0 0035.3-35.3zM97.92 222.72a124.8 124.8 0 11124.8 124.8 124.95 124.95 0 01-124.8-124.8z'/></svg>
</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
<!-- Optional JavaScript; choose one of the two! -->
<script src="assets/js/jquery.min.js"></script>
<script src="gapuradigital.js"></script>
<script src="assets/js/popper.min.js"></script>
<script src="assets/js/bootstrap.min.js"></script>
<script src="assets/js/jquery.overlayScrollbars.min.js"></script>
<script>
$(function() {
//The passed argument has to be at least a empty object or a object with your desired options
$('.settings-wrapper .tab-content > .tab-pane').overlayScrollbars({ });
});
$(document).on('click', '.settings-wrapper .dropdown-menu', function (e) {
e.stopPropagation();
});
$('.search-type-content a').on('click', function(e) {
var id = $(this).data('id');
// add search engine
if(id == 'google') {
$('.input-search-wrapper .input-search').attr('name', 'q')
$('.input-search-wrapper .input-search').attr('placeholder', 'Search on Google')
$('#form-search').attr('action', 'https://www.google.com/search');
$('.search-type-button').html('Google');
} else if(id == 'duckduckgo') {
$('.input-search-wrapper .input-search').attr('name', 'q')
$('.input-search-wrapper .input-search').attr('placeholder', 'Search on DuckDuckGo')
$('#form-search').attr('action', 'https://duckduckgo.com/');
$('.search-type-button').html('DuckDuckGo');
} else if(id == 'youtube') {
$('.input-search-wrapper .input-search').attr('name', 'search_query')
$('.input-search-wrapper .input-search').attr('placeholder', 'Search on Youtube')
$('#form-search').attr('action', 'https://www.youtube.com/results');
$('.search-type-button').html('Youtube');
} else if(id == 'github') {
$('.input-search-wrapper .input-search').attr('name', 'q')
$('.input-search-wrapper .input-search').attr('placeholder', 'Search on Github')
$('#form-search').attr('action', 'https://github.com/search');
$('.search-type-button').html('Github');
} else if(id == 'bing') {
$('.input-search-wrapper .input-search').attr('name', 'q')
$('.input-search-wrapper .input-search').attr('placeholder', 'Search on Bing')
$('#form-search').attr('action', 'https://bing.com/search');
$('.search-type-button').html('Bing');
}
})
</script>
</body>
</html>