-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathnewtab.html
144 lines (144 loc) · 8.61 KB
/
newtab.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>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>New Tab</title>
<link rel="stylesheet" href="style.css">
<link rel="icon" href="icons/icon-32.png">
<link rel="stylesheet" href="" id="google-fonts">
</head>
<body>
<div id="Content">
<h1 id="time"></h1>
<h2 id="message"></h2>
<div id="shortcut-grid">
<div id="shortcut-row-1" class="shortcut-row">
<a><div id="shortcut-1" class="shortcut"><span class="shortcut-emoji">❓</span><span class="shortcut-name">Right click to customize</span></div></a>
<a><div id="shortcut-2" class="shortcut"><span class="shortcut-emoji">❓</span><span class="shortcut-name">Right click to customize</span></div></a>
<a><div id="shortcut-3" class="shortcut"><span class="shortcut-emoji">❓</span><span class="shortcut-name">Right click to customize</span></div></a>
</div>
</div>
<h2 id="goal">Today I want to <span role="textbox" contenteditable id="goal-input" spellcheck="false">...</span></h2>
<img src="icons/settings.svg" id="settingsicon" width="25" height="25" draggable="false">
<div id="settings" class="hidden">
<h1>Settings</h1>
<hr>
<fieldset>
<legend>Background</legend>
<input type="radio" name="bg-option" value="default" id="bg-option-default"><label for="bg-option-default">Default Gallery</label><br>
<input type="radio" name="bg-option" value="custom" id="bg-option-custom"><label for="bg-option-custom">Custom Image(s)</label><br>
<fieldset class="subset" data-requires="bg-option-custom">
<p>Paste a list of direct image urls seperated by new lines. If there is more than one line, a random image will be selected from the list.</p>
<textarea id="custom-images" spellcheck="false" autocapitalize="false" autocomplete="off"></textarea>
</fieldset>
<input type="radio" name="bg-option" value="bing" id="bg-option-bing"><label for="bg-option-bing">Bing Image of the Day</label><br>
<fieldset class="subset" data-requires="bg-option-bing" style="border: none; margin-left: 0px;">
<a id="bing-copyright"></a>
</fieldset>
<input type="radio" name="bg-option" value="materialColors" id="bg-option-materialColors"><label for="bg-option-materialColors">Solid Colors</label><br>
<input type="radio" name="bg-option" value="color" id="bg-option-color"><label for="bg-option-color">Custom Color</label><br>
<fieldset class="subset" data-requires="bg-option-color">
<input type="color" id="custom-color-input">
</fieldset>
</fieldset>
<fieldset>
<legend>Message</legend>
<input type="radio" name="mg-option" value="none" id="mg-option-none"><label for="mg-option-none">None</label><br>
<input type="radio" name="mg-option" value="jokes" id="mg-option-jokes"><label for="mg-option-jokes">Jokes & Puns</label><br>
<input type="radio" name="mg-option" value="customMg" id="mg-option-custom"><label for="mg-option-custom">Custom</label>
<fieldset class="subset" data-requires="mg-option-custom">
<p>Enter your custom messages seperated by new lines. If there is more than one line, a random message will be selected from the list.</p>
<textarea id="custom-messages" spellcheck="false" autocapitalize="false" autocomplete="off"></textarea>
</fieldset>
</fieldset>
<fieldset>
<legend>Adjustments</legend>
<label>Time Position: </label>
<input type="range" min="-70" max="50" value="-40" id="time-position"><br>
<label>Message Position: </label>
<input type="range" min="30" max="190" value="120" id="message-position"><br>
<label>Goal Position: </label>
<input type="range" min="-30" max="60" value="30" id="goal-position"><br>
<label>Shortcut Size: </label>
<input type="range" min="130" max="200" value="170" id="shortcut-size"><br>
<label>Shortcut Position: </label>
<input type="range" min="200" max="800" value="350" id="shortcut-pos">
</fieldset>
<fieldset>
<legend>Toggles</legend>
<input type="checkbox" id="shortcuts-toggle" checked><label for="shortcuts-toggle">Enable Shortcuts</label><br>
<input type="checkbox" id="goal-toggle" checked><label for="goal-toggle">Enable Daily Goal</label><br>
<input type="checkbox" id="shadow-toggle" checked><label for="shadow-toggle">Enable Text Shadow</label><br>
<input type="checkbox" id="darken-toggle"><label for="darken-toggle">Darken Shortcut Background</label>
</fieldset>
<fieldset>
<legend>Background Filters</legend>
<label>Darken:</label>
<input type="range" min="0" max="100" value="0" id="darken-bg"><br>
<label>Blur:</label>
<input type="range" min="0" max="40" value="0" id="blur-bg"><br>
<label>Grayscale</label>
<input type="range" min="0" max="100" value="0" id="grayscale-bg"><hr style="margin-bottom: 10px;">
<input type="checkbox" id="vignette-bg"><label for="vignette-bg">Vignette</label>
<label class="subtext">Darken the corners of the screen</label>
</fieldset>
<fieldset>
<legend>Text</legend>
<label>Font Family:</label>
<input type="text" maxlength="200" placeholder="Roboto" id="font-family">
<label class="subtext">Enter the exact name of any <a href="https://fonts.google.com/" target="_blank">google font</a> to use for main text like the time and message.</label>
<label>Secondary Font:</label>
<input type="text" maxlength="200" placeholder="Cabin" id="secondary-font">
<label class="subtext">Enter the exact name of any <a href="https://fonts.google.com/" target="_blank">google font</a> to use for shortcuts and other secondary text.</label>
</fieldset>
<fieldset class="button-set">
<legend>Data</legend>
<button id="reset-btn">Clear Data</button><br>
<button id="file-backup">Save Backup</button>
<button id="import-backup">Load Backup</button><br>
<button id="sync-backup">Backup to Cloud</button>
<button id="sync-restore">Restore from Cloud</button>
</fieldset>
<p>Right click a shortcut to customize it.</p>
</div>
<div id="settings-overlay" class="hidden"></div>
<dialog id="shortcut-modal">
<header>
<h2>Edit Shortcut</h2>
<hr>
<form>
<div>
<label for="shortcut-name">Name:</label>
<input type="text" id="shortcut-name" name="shortcut-name" placeholder="Enter shortcut name" required maxlength="40" autocomplete="off">
</div>
<div>
<label for="shortcut-url">Full URL:</label>
<input type="url" id="shortcut-url" name="shortcut-url" placeholder="https://example.com/ " required autocomplete="off" spellcheck="false">
</div>
<div>
<label for="shortcut-emoji">Emoji / Acronym:</label>
<input type="text" id="shortcut-emoji" name="shortcut-emoji" placeholder="Enter up to four characters" required maxlength="4" autocomplete="off">
</div>
<footer>
<button class="save-button" type="submit">Save</button>
<button class="cancel-button" type="reset" id="shortcut-cancel-btn">Cancel</button>
</footer>
</form>
</header>
</dialog>
<dialog id="welcome">
<h2>Welcome to Tab+</h2>
<hr>
<p>Don't worry if things don't look right.<br><br>Head over to <strong>settings in the bottom left</strong> where you can customize the positioning of each element!<br>You can also customize the background, message, and toggle features.</p>
<button style="width: 49%;" disabled class="close-button">Close</button>
<button style="width: 49%;" disabled class="settings-button">Settings</button>
</dialog>
</div>
<script src="js/main.js"></script>
<script src="js/backgrounds.js"></script>
<script src="js/messages.js"></script>
<script src="js/shortcuts.js"></script>
</body>
</html>