-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
113 lines (103 loc) · 6.87 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
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bookmarks</title>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="A portable, shareable bookmarks file.">
<script type="module" src="/vendor.js"></script>
<script type="module" src="/application.js"></script>
</head>
<body class="h-full bg-gray-50 dark:bg-gray-950" x-data="bookmarks">
<div class="min-h-full mx-auto px-4 sm:px-6 lg:px-8 pb-10">
<div class="pt-4">
<header>
<div>
<h1 class="text-3xl font-bold leading-tight tracking-tight text-gray-900 dark:text-gray-100">Bookmarks</h1>
</div>
</header>
<main class="mt-3">
<div class="static pb-28">
<div class="absolute mt-2" @click.outside="searchString = ''; activeSearchResultIndex = 0">
<div style="width: 90vw;" class="max-w-3xl transform divide-y divide-gray-200 dark:divide-gray-700 overflow-hidden rounded-xl bg-gray-50 dark:bg-gray-950 shadow-md ring-1 ring-gray-950 dark:ring-gray-500 ring-opacity-5">
<div class="relative">
<svg class="pointer-events-none absolute left-4 top-3.5 h-5 w-5 text-gray-400 dark:text-gray-600" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path fill-rule="evenodd" d="M9 3.5a5.5 5.5 0 100 11 5.5 5.5 0 000-11zM2 9a7 7 0 1112.452 4.391l3.328 3.329a.75.75 0 11-1.06 1.06l-3.329-3.328A7 7 0 012 9z" clip-rule="evenodd" />
</svg>
<input type="text" id="search-string" autocomplete="false" autofocus x-model="searchString" class="h-12 w-full border-0 bg-transparent pl-11 pr-4 text-gray-900 dark:text-gray-100 placeholder:text-gray-500 dark:placeholder:text-gray-500 focus:ring-0" placeholder="Search..." @keydown.down.prevent="makeNextSearchResultActive" @keydown.up.prevent="makePreviousSearchResultActive" @keydown.enter.prevent="window.open(search()[activeSearchResultIndex].href, '_self')" @keydown.escape.prevent="searchString = ''; activeSearchResultIndex = 0" @keypress="activeSearchResultIndex = 0">
</div>
<ul :class="search().length === 0 ? 'hidden' : ''" class="max-h-96 scroll-py-3 overflow-y-auto p-3" id="options" role="listbox">
<template x-for="(path, index) in search()">
<li class="group flex cursor-default select-none rounded-xl p-3" :class="activeSearchResultIndex === index ? 'bg-gray-200 dark:bg-gray-800' : ''" role="option" tabindex="-1" :id="'search-result-' + index" @mouseenter="activeSearchResultIndex = index">
<a :href="path.href" class="overflow-x-hidden">
<div class="flex-auto">
<p>
<template x-for="(name, nameIndex) in path.names">
<span>
<span x-show="nameIndex !== 0" class="mx-1 text-gray-400 dark:text-gray-600"> → </span>
<span x-text="name" class="font-medium text-gray-700 dark:text-gray-300"></span>
</span>
</template>
</p>
<p class="text-sm truncate" :class="activeSearchResultIndex === index ? 'text-gray-700 dark:text-gray-300' : 'text-gray-500'" x-text="path.href.replace('https://', '').replace('http://', '').replace(/\/$/, '')"></p>
</div>
</a>
</li>
</template>
</ul>
<div x-show="searchString.trim() !== '' && search().length === 0" class="px-6 py-14 text-center sm:px-14">
<svg class="mx-auto h-6 w-6 text-gray-400 dark:text-gray-600" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m9-.75a9 9 0 11-18 0 9 9 0 0118 0zm-9 3.75h.008v.008H12v-.008z" />
</svg>
<p class="mt-4 font-semibold text-gray-900 dark:text-gray-100">No results found</p>
<p class="mt-2 text-gray-500">No bookmarks found for this search term. Please try again.</p>
</div>
<div class="flex flex-wrap items-center bg-gray-50 dark:bg-gray-950 px-4 py-2.5 text-xs text-gray-700 dark:text-gray-300">
Tip: use spaces to narrow down results by folders.
</div>
</div>
</div>
</div>
<div class="-ml-2 flex flex-wrap prose max-w-none prose-li:my-0 prose-ul:my-0 prose-a:no-underline hover:prose-a:underline prose-a:text-indigo-600 dark:prose-a:text-blue-500 prose-a:font-normal">
<template x-for="tree in xHtmlForForest">
<div class="mt-3 mr-6" x-html="tree"></div>
</template>
</div>
</main>
</div>
</div>
<footer class="px-6 lg:px-8 print:px-0 pt-16 pb-6 mt-auto">
<div class="border-t border-gray-300 dark:border-gray-700 pt-2.5 w-full flex justify-center text-sm text-gray-600 dark:text-gray-300 print:text-black">
Built using <a class="hover:underline print:text-black" target="_blank" href="https://github.com/hilverd/bookmarks.html">bookmarks.html</a> v<span x-text="version"></span>
</div>
</footer>
<pre id="bookmarks" class="hidden">
Search Engines
Google: https://www.google.com/
Bing: https://www.bing.com/
Baidu: https://www.baidu.com/
Social Media
Facebook: https://www.facebook.com/
Instagram: https://www.instagram.com/
WhatsApp: https://www.whatsapp.com/
Reddit: https://www.reddit.com/
LinkedIn: https://www.linkedin.com/
Travel
Maps
Google Maps: https://www.google.com/maps
Bing Maps: https://www.bing.com/maps
Reviews
Tripadvisor: https://www.tripadvisor.com/
Airbnb: https://www.airbnb.com/
Streaming & Online TV
YouTube: https://www.youtube.com/
Netflix: https://www.netflix.com/
Reference Materials
Wikipedia: https://www.wikipedia.org/
Quora: https://www.quora.com/
Shopping
Amazon: https://www.amazon.com/
eBay: https://www.ebay.com/
</pre>
</body>
</html>