BlankSlate/index.html at main · Musheer360/BlankSlate · GitHub

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
<!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" />
        <meta
            name="description"
            content="BlankSlate is an open-source, lightweight, and minimal browser extension."
        />
        <link rel="stylesheet" href="style.css" />
        <link rel="shortcut icon" type="image/x-icon" href="icons/icon.png" />
        <script src="main.js" defer></script>
        <title>New Tab</title>
    </head>
    <body id="body">
        <div class="overlay" id="tint">
            <div class="clockbox">
                <div class="time">
                    <p><span id="time"></span></p>
                </div>
                <div class="date">
                    <p><span id="date"></span></p>
                </div>
            </div>
            <div class="wish" id="greet"><p id="greeting"></p></div>
            <div class="entername" id="entername">
                <input
                    type="text"
                    class="askname"
                    id="askname-input"
                    placeholder="Enter your name"
                />
            </div>
            <div class="quotes">
                <div class="mainquote" id="mainquote"></div>
                <div class="mainauthor" id="mainauthor"></div>
            </div>
            <div class="weather">
                <div class="city" id="city"></div>
                <p class="cityblock">|</p>
                <div class="description" id="description"></div>
                <p class="tempblock">|</p>
                <p class="temp" id="temp"></p>
            </div>
            <div class="selectcity" id="selectcity">
                <input
                    type="text"
                    class="searchbox"
                    id="searchbox-input"
                    placeholder="Enter city"
                />
            </div>
            <div class="units" id="unitclick">
                <p class="chooseunit">Display unit:</p>
                <button class="celsius" id="celsius" aria-label="Celsius">
                    °C</button
                ><button
                    class="fahrenheit"
                    id="fahrenheit"
                    aria-label="Fahrenheit"
                >
                    °F
                </button>
            </div>
            <div class="menubtn" id="menubtn">
                <button
                    class="menu"
                    id="settingsMenu"
                    aria-label="Settings Menu"
                >
                    <svg
                        width="50px"
                        height="50px"
                        viewBox="0 0 100 100"
                        fill="none"
                    >
                        <path
                            class="line line1"
                            d="M 20,29.000046 H 80.000231 C 80.000231,29.000046 94.498839,28.817352 94.532987,66.711331 94.543142,77.980673 90.966081,81.670246 85.259173,81.668997 79.552261,81.667751 75.000211,74.999942 75.000211,74.999942 L 25.000021,25.000058"
                            stroke="#ffffff"
                        />
                        <path
                            class="line line2"
                            d="M 20,50 H 80"
                            stroke="#ffffff"
                        />
                        <path
                            class="line line3"
                            d="M 20,70.999954 H 80.000231 C 80.000231,70.999954 94.498839,71.182648 94.532987,33.288669 94.543142,22.019327 90.966081,18.329754 85.259173,18.331003 79.552261,18.332249 75.000211,25.000058 75.000211,25.000058 L 25.000021,74.999942"
                            stroke="#ffffff"
                        />
                    </svg>
                </button>
            </div>
            <div class="tweetbtn" id="tweetbtn">
                <button
                    id="shareButton"
                    class="shareButton"
                    aria-label="Share quote"
                >
                    <svg width="47" height="47" viewBox="0 0 25 25" fill="none">
                        <path
                            d="M20.5 3.5L3.5 9L10 12L17 7L12 14L15 20.5L20.5 3.5Z"
                            stroke="#ffffff"
                            stroke-width="0.65"
                        />
                    </svg>
                </button>
            </div>
            <div class="selectormenu" id="selectormenu">
                <p class="selectortext">Set Local Wallpaper</p>
                <button
                    class="chooselocal"
                    id="chooselocal"
                    aria-label="Choose a local image"
                >
                    <img src="folder.svg" alt="folder" class="white-folder" />
                </button>
            </div>
            <div class="blurbox" id="blurbox">
                <p>Blur</p>
                <input
                    type="range"
                    min="0"
                    max="40"
                    value="0"
                    id="blurSlider"
                    class="sliders"
                />
            </div>
            <div class="tintbox" id="tintbox">
                <p>Tint</p>
                <input
                    type="range"
                    id="alphaSlider"
                    min="0"
                    max="100"
                    step="1"
                    class="sliders"
                />
            </div>
            <div class="imagebox" id="imagebox">
                <p>Get New Wallpaper</p>
                <button
                    id="refreshBackground"
                    class="refreshBackground"
                    aria-label="Load a new image"
                >
                    <img
                        src="reload.svg"
                        alt="reload"
                        class="reloadicon"
                        id="reloadIcon"
                    />
                </button>
            </div>
        </div>
    </body>
</html>