-
Notifications
You must be signed in to change notification settings - Fork 3
/
Copy pathhome.html
175 lines (138 loc) · 7.26 KB
/
home.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
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
<!DOCTYPE html>
<html>
<head>
<title>Home</title>
<link href='https://fonts.googleapis.com/css?family=Bebas+Neue|Permanent+Marker|Potta+One' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
<!--<link rel="stylesheet" href="./css/style.css">-->
<link href="./src/css/output.css" rel="stylesheet">
<!-- <script src="https://cdn.tailwindcss.com"></script> -->
<script src="./src/js/popup.js" type="module"></script>
</head>
<body class="bg-gray-800 flex flex-col w-96 min-h-screen">
<!-- Guide Sentence -->
<h1 class="block pl-2 text-xl font-bold text-gray-800 text-white">Audio Kit</h1>
<div class="w-full mb-3 mt-2">
<div class="mx-4 rounded-lg shadow-lg bg-indigo-300 border-2 border-indigo-600 bg-opacity-70">
<div class="text-center">
<h4 class="text-lg text-indigo-900 "><b>Stay tuned for more updates</b></h4>
<p class="mt-2 text-sm text-blue-900 pb-3 mx-4">
Use the slider below to control the volume of the current tab. Switch to any tab playing audio with just one click.
</p>
</div>
</div>
</div>
<!-- Volume Slider -->
<div class="py-6 slider w-full bg-gray-800 rounded flex items-center shadow-xl">
<div class="slider w-full m-2">
<input type="range" id="volumeSlider" min="0" max="600"
class="appearance-none rounded-full bg-gray-400 w-full h-2 bg-black border-none outline-none">
<p class="text-lg font-semibold text-gray-400 text-black text-center">
Volume: <span class="hand-written" id="rangeValue">100</span> %
</p>
</div>
</div>
<!-- Default Voice Boost Bass Boost buttons -->
<div class="flex p-x-4 w-full">
<button class="flex-1 mx-1 py-2 bg-gray-700 text-white rounded hover:bg-gray-600 defaultButton" id="defaultButton" data-equalizer-type="default"> <i class="fa-solid fa-rotate-left px-2"></i><span class="hand-written">Default</span></button>
<button class="flex-1 mx-1 py-2 bg-gray-700 text-white rounded hover:bg-gray-600 js-audio-equalizer__preset" id="voiceBoost" data-equalizer-type="voice"> <i class="fa-solid fa-microphone px-2"></i> <span class="hand-written">Voice Boost</span></button>
<button class="flex-1 mx-1 py-2 bg-gray-700 text-white rounded hover:bg-gray-600 js-audio-equalizer__preset" id="bassBoost" data-equalizer-type="bass"> <i class="fa-solid fa-rocket px-2"></i> <span class="hand-written">Bass Boost</span></button>
</div>
<div class="flex p-2">
<div class="flex-none p-1">
<p class="text-pink-200 ellipsi border-2 border-purple-300 p-1 hand-written">Tab: </p>
</div>
<div class="flex-auto p-1">
<p class="text-center ellipsi border-2 border-purple-300 p-1 text-pink-500 hand-written" id="currentTabTitle"></p>
</div>
</div>
<div class="flex py-2 justify-center">
<!-- Tab Mute Button -->
<div class="self-center p-2">
<button class="text-white" id="signalToggleMuteButton">
<i class="fa-solid fa-play" id="tabMuteIcon"></i>
</button>
</div>
<!-- Muted Status -->
<div class="p-2">
<p class="text-white border-2 border-indigo-600 p-1 hand-written" id="tabMuted">Muted </p>
</div>
<!-- Sound Status -->
<div class="p-2" >
<p class="text-white border-2 border-indigo-600 p-1 hand-written" id="isAudible">Sound</p>
</div>"
<!-- Mute All -->
<div class="flex p-2">
<div class="self-center flex-none">
<button class="text-white" id="signalToggleMuteAllButton">
<i class="fa-solid fa-play" id="tabMuteAllIcon"></i>
</button>
</div>
<div class="flex-none px-2">
<p class="text-pink-200 border-2 border-indigo-600 p-1 hand-written" id="tabAllMuted">Muted All </p>
</div>
</div>
<!-- Unmute All -->
<div class="flex p-2">
<div class="self-center flex-none">
<button class="text-white" id="signalToggleUnmuteAllButton">
<i class="fa-solid fa-play" id="tabUnmuteAllIcon"></i>
</button>
</div>
<div class="flex-none px-2">
<p class="text-pink-200 border-2 border-indigo-600 p-1 hand-written" id="tabAllUnmuted">Unmute All </p>
</div>
</div>
</div>
<!--
<div class="py-6 px-10 slider w-full bg-gray-800 rounded items-center shadow-xl flex flex-col border-orange-800 border-2 my-6">
<div class="bg-orange-800 w-full">
<h1 class="text-white text-center text-xl ">Not in Production Yet.</hi>
</div>
<div class="slider w-full m-2">
<input type="range" id="bassVolumeSlider" min="0" max="200"
class="appearance-none rounded-full bg-gray-400 w-full h-1 bg-black border-none outline-none">
<p class="text-sm font-semibold text-gray-400 text-black text-center">
Bass Level: <span class="hand-written" id="bassRangeValue">100</span> %
</p>
</div>
<div class="slider w-full m-2">
<input type="range" id="midVolumeSlider" min="0" max="200"
class="appearance-none rounded-full bg-gray-400 w-full h-1 bg-black border-none outline-none">
<p class="text-sm font-semibold text-gray-400 text-black text-center">
Mid Level: <span class="hand-written" id="midRangeValue">100</span> %
</p>
</div>
</div>
-->
<div class="text-green-500 text-center " id="tabList">
<p class="text-center text-pink-300 ">Other Audio</p>
<!--<p>test 2</p>-->
</div>
<!-- Suggestion Box -->
<!--<div class="w-full mb-1 mt-11" id="removeElement" style="display: none;">-->
<div class="w-full mb-1 mt-5" id="suggestionBoxWrapper"></div>
<div class="update mx-4 rounded-lg shadow-lg bg-gray-200 border-2 border-indigo-600 bg-opacity-70 " id="suggestionBox">
<div class=" w-full flex flex-row-reverse ">
<div class=" justify-self-end mr-1">
<button class="text-white" id="signalRemoveElement">
<i class="fa-solid fa-xmark"></i>
</button>
</div>
<div class="flex-1 justify-self-center text-center">
<h4 class="text-lg flex-1 text-indigo-400 update"><b>Suggestions?</b></h4>
</div>
</div>
<p class="mt-2 text-xs text-justify text-gray-500 mx-4">
We would love to here any suggestions you might have!
</p>
<p class="text-center">
<a href="https://github.com/ChristianE00/equalizerExtension.git" target="_blank" class="update text-indigo-400 text-center">CLICK HERE</a>
<p>
</div>
</div>
</body>
<footer class="mt-auto mb-4">
<p class=" text-center text-white"><span class="text-blue-300">Contributions are welcome</span> -- Made with <i class="fa-solid fa-heart text-red-600"></i> by <a href="https://christiane00.github.io/AudioKit.github.io/" id="feedback" target="_blank" class="text-blue-600">the AudioKit team</a></p>
</footer>
</html>