-
Notifications
You must be signed in to change notification settings - Fork 12
/
index.html
145 lines (141 loc) · 8.78 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
<!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.0" />
<link rel="stylesheet" href="styles/base_style.css" /> <!-- base styles for buttons, etc. setting up color variables -->
<link rel="stylesheet" href="styles/layout.css" /> <!-- conditional css logic for layout -->
<link rel="stylesheet" href="styles/theme_rosebox.css">
<!-- <link rel="stylesheet" href="styles/theme_flexoki.css"> -->
<!-- <link rel="stylesheet" href="styles/tweak_dottedbg.css"> -->
<link rel="stylesheet" href="custom.css"> <!-- custom css (optional) -->
<link rel="icon" href="img/icon64.png" sizes="64x64">
<script src="lib/observe.js"></script>
<script src="lib/sortable.js"></script>
<script src="lib/tinydate.js"></script>
<script src="lib/circle-assign.js"></script>
<script src="main.js"></script> <!-- first set up the observer object -->
<script src="settings.js"></script> <!-- load from Localstorage and make settings object-->
<title>~</title>
<style id="styles"></style>
<style id="customfont"></style>
</head>
<body>
<div id="settings-screen-left" class="hidden">
<div id="layout-settings"></div>
<div id="setting-footer">
<button class="rb-button hook-save-btn">SAVE</button>
<button class="rb-button hook-close-btn">CLOSE</button>
<span id="savedmsg" class="invis">saved!</span>
</div>
</div>
<div id="settings-screen-right" class="hidden">
<div id="backup-screen">
<span id="backup-title-span">
<h1 class="title setting-title">Backup</h1>
<!--<button class="rb-button smolbtn" id="backup-close">×</button>-->
</span>
<p>Here you can import and export backups. They will get exported in json. Backups contain links and all
settings.</p><br>
<div class="imp-ext-grid">
<input type="text" class="rb-input impexp-span" id="json-import-inp" placeholder="paste backup JSON here..." autocomplete="off">
<button class="rb-button" id="import-json">import</button>
<input type="file" class="rb-button" id="import-json-file" accept="application/json" value="select backup file">
<input type="text" class="rb-input impexp-span" id="json-export-inp" placeholder="backup JSON will appear here..." autocomplete="off">
<button class="rb-button" id="export-json">export</button>
<button class="rb-button" id="export-json-file">download backup</button>
</div>
</div>
<div id="links-screen">
<div id="link-settings" draggable="false">
<span class="flex">
<h1 class="setting-title" draggable="false">Links </h1> (drag & drop to reorder) (recommend. max 8/col) (hit save after)
</span>
<div id="link-add-bar">
<form id="add-link">
<span class="add-link-top-wrap">
<input type="text" class="rb-input" name="link-name" autocomplete="off" required placeholder="name" id="add-link-name">
<input type="text" class="rb-input" name="link-url" autocomplete="off" required placeholder="url" id="add-link-url">
<input type="submit" value="add link" class="rb-button">
</span>
<!-- <span class="add-link-replace-text setting">
<p class="setting-title">replace link if names are the same?</p>
<label class="switch">
<input class="s-update" type="checkbox" checked id="add-link-replace" name="link-replace-checkbox" />
<div class="slider round"></div>
</label>
</span> -->
</form>
</div>
<br>
<div id="sortable-colwrap" draggable="false">
<div class="sortable-col" draggable="false" id="sortable-col1"></div>
<div class="sortable-col" draggable="false" id="sortable-col2"></div>
<div class="sortable-col" draggable="false" id="sortable-col3"></div>
</div>
<ul class="normal-ul">
<li>rightclick a link here to edit it</li>
<li>you can change the color theme with custom.css</li>
</ul>
</div>
<h1 class="setting-title" draggable="false">Help / Info</h1>
<details>
<summary>Custom CSS</summary>
<p>you can create a 'custom.css' file in extension's root folder to further specify css for your startpage if these options are not enough</p>
<p>this file will only update on refresh, not instanly.</p>
<p>the css rules in this file are not reflected in the settings, so if something is broken, you might've left some css in 'custom.css'</p>
</details>
<!-- i have these separately in markdown, and just threw them into dillinger.io + minified -->
<details>
<summary>Custom date format Help</summary>
<table class="help-table"><thead><tr><th>key</th><th>desc</th><th>example</th></tr></thead><tbody><tr><td><code>{YY}</code></td><td>full year</td><td><strong>2022</strong></td></tr><tr><td><code>{yy}</code></td><td>short year</td><td><strong>22</strong></td></tr><tr><td><code>{mm}</code></td><td>month number</td><td><strong>05</strong>(may)</td></tr><tr><td><code>{Mn}</code></td><td>month name (full)</td><td><strong>March</strong></td></tr><tr><td><code>{_Mn}</code></td><td>lowercase month name (full)</td><td><strong>march</strong></td></tr><tr><td><code>{mn}</code></td><td>month name (short)</td><td><strong>Nov</strong></td></tr><tr><td><code>{_mn}</code></td><td>lowercase month name (short)</td><td><strong>nov</strong></td></tr><tr><td><code>{dd}</code></td><td>day number</td><td><strong>07</strong></td></tr><tr><td><code>{ddt}</code></td><td>day number + st/nd/rd/th suffix</td><td><strong>07th</strong></td></tr><tr><td><code>{Wn}</code></td><td>weekday (full)</td><td><strong>Monday</strong></td></tr><tr><td><code>{_Wn}</code></td><td>lowercase weekday (full)</td><td><strong>monday</strong></td></tr><tr><td><code>{wn}</code></td><td>weekday (short)</td><td><strong>Mon</strong></td></tr><tr><td><code>{_wn}</code></td><td>lowercase weekday (short)</td><td><strong>mon</strong></td></tr></tbody></table>
<p>
<code>{wn}, {mm}. {Mn}</code> = Wed, 11. November<br>
<code>{mm}/{dd}/{YY}</code> = 11/03/2022<br>
<code>{Wn}</code> = Wednesday<br>
</p>
</details>
</div>
</div>
<div id="container" class="container cols-3 nogreeting" style="opacity: 0">
<header>
<img src="img/blank.png" id="main-img" draggable="false" />
</header>
<div id="clock">
<span class="clockdigit">0</span>
<span class="clockdigit">0</span>
<span class="clockdigit">-</span>
<span class="clockdigit">0</span>
<span class="clockdigit">0</span>
</div>
<div class="search">
<span class="search-span">
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="currentColor"><path d="M0 0h24v24H0z" fill="none"/><path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/></svg>
</span>
<form method="get" target="_blank" name="search" action="https://duckduckgo.com/?q=">
<input type="text" autofocus="autofocus" name="q" autocomplete="off" />
</form>
</div>
<div class="colwrap">
<h1 class="title greeting">heya <span class="accent">~</span> </h1>
<div class="col first-col" id="col-1">
<div class="title col1Title">google</div>
</div>
<div class="col second-col" id="col-2">
<div class="title col2Title">social Media</div>
</div>
<div class="col third-col" id="col-3">
<div class="title col3Title">others</div>
</div>
</div>
</div>
<button class="toggle smolbtn incognito" id="toggle" aria-label="toggle image">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><path d="m2 2l20 20M10.41 10.41a2 2 0 1 1-2.83-2.83m5.92 5.92L6 21m12-9l3 3"/><path d="M3.59 3.59A2 2 0 0 0 3 5v14a2 2 0 0 0 2 2h14c.55 0 1.052-.22 1.41-.59M21 15V5a2 2 0 0 0-2-2H9"/></g></svg>
</button>
<button class="settings smolbtn incognito" id="settings" aria-label="open settings">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><path d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2"/><circle cx="12" cy="12" r="3"/></g></svg>
</button>
<img id="testimg" hidden>
</body>
</html>