-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
131 lines (115 loc) · 7.28 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
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>PrettySearch</title>
<meta name="description"
content="Search the Web using your favourite search engine while enjoying Bing-like backdrops ;)">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="theme-color" content="#f39c12"/>
<link rel="stylesheet" href="./assets/css/style.css">
<link rel="icon" href="favicon.ico" type="image/x-icon"/>
<link rel="manifest" href="manifest.json">
<!-- for users without javascript -->
<noscript>
<div class="w3-modal">
<div class="w3-modal-content w3-animate-opacity w3-card-4">
<header class="w3-container w3-white">
<h2>Please Enable Javascript</h2>
</header>
<div class="w3-container">
<p>This website is a single-page application, meaning it requires Javascript even for basic
functionality. I am strongly against the useless proliferation and even abuse of Javascript in
recent years, but still believe Javascript can be the right choice if used correctly.</p>
<p>I strive to only use as little Javascript as humanly possible. If you are paranoid or just
curious, feel free to <a href="./assets/js/main.js">take a look at the source</a> before enabling
Javascript on this website, and also please do send complaints or suggestions on <a
href="https://github.com/RAD750/prettysearch">my Github</a>.</p>
</div>
</div>
</div>
</noscript>
<style id="js-backdrop"></style>
</head>
<body onload="on_page_load()">
<!--top bar-->
<div class="w3-bar w3-text-white">
<div class="w3-bar-item w3-right"><a href="#/about" onclick='openMdl("mdl_about")' id="i18n_btnAbout">About</a>
</div>
<div class="w3-bar-item w3-right"><a href="#/preferences"
onclick='openMdl("mdl_preferences")' id="i18n_btnPreferences">Preferences</a></div>
</div>
<!--search container-->
<main class="w3-display-middle w3-text-white w3-text-shadow-medium">
<h1 class="w3-center">PrettySearch</h1>
<form class="search-form" id="search-form">
<input autofocus="" autocorrect="off" autocapitalize="off" id="search-input" class="search-input"
autocomplete="off" name="q" tabindex="1" value="" type="text">
<input type="submit" tabindex="2" value="" id="search-submit" class="search-submit icon-search fa fa-car">
</form>
</main>
<!--modals-->
<!--about modal-->
<div id="mdl_about" class="w3-modal">
<div class="w3-modal-content w3-animate-opacity w3-card-4">
<header class="w3-container w3-white">
<span onclick="closeMdl('mdl_about')" class="w3-button w3-display-topright">×</span>
<h2 id="i18n_titleAboutModal">About PrettySearch</h2>
</header>
<div class="w3-container w3-padding">
<p id="i18n_textAboutModal">PrettySearch is a search engine portal.<br />Its purpose is to recreate the
pretty interface of Bing, with the nice photos in the background, without tying you to
Microsoft.<br />You can choose your favourite search engine and your favourite photo in the <a href="#/preferences"
onclick='closeMdl("mdl_about");openMdl("mdl_preferences")'>preferences</a>.</p>
<p id="i18n_textAboutModalDevel">This website is hosted and developed by <a href="https://www.a-centauri.com">Jacopo</a>. You can have a look at the source and contribute on <a href="https://github.com/RAD750/prettysearch">GitHub</a></p>
<p id="i18n_textAboutModalPrivacy">Please read the <a href="#/preferences"
onclick='closeMdl("mdl_about");openMdl("mdl_privacy")'>Privacy Policy</a>. You'll be surprised ☺</p>
<div id="divAboutModalPhoto"><p><span id="i18n_textAboutModalPhoto">Background photo by</span> <span id="photoAuthorName">AUTHOR_PLACEHOLDER</span> <span id="i18n_textAboutModalPhotoFrom">from</span> <a href="http://unsplash.com">Unsplash</a></p>
<p id="i18n_textAboutModalSetAsDefaultBackdrop">Like today's photo? Set it as your default background in your <a href="#/preferences"
onclick='closeMdl("mdl_about");openMdl("mdl_preferences")'>preferences</a>.</p></div>
</div>
</div>
</div>
<!--preferences modal-->
<div id="mdl_preferences" class="w3-modal">
<div class="w3-modal-content w3-animate-opacity w3-card-4">
<header class="w3-container w3-white">
<span onclick="closeMdl('mdl_preferences')" class="w3-button w3-display-topright ">×</span>
<h2 id="i18n_titlePreferencesModal">Search Preferences</h2>
</header>
<div class="w3-container w3-padding">
<label id="i18n_labelSearchEngineSelection">Choose your search engine:</label>
<select id="pref.search_engine" class="w3-input">
</select>
<br />
<label id="i18n_labelUseCustomBackdrop">Use custom background:</label>
<input class="w3-input" type="text" placeholder="https://www.example.com/backdrop.jpg" id="pref.custom_backdrop" />
<a href="#/preferences" onclick='setCurrentBackdropAsDefault()' id="i18n_btnSetCurrentBackdropAsDefault">Set current backdrop </a>
<br />
<br />
<button class="w3-button w3-teal" onclick='savePrefs()' id="i18n_btnSavePrefs">Save preferences</button>
<button class="w3-button w3-light-gray" onclick='resetPrefs()' id="i18n_btnResetToDefault">Reset to default</button>
</div>
</div>
</div>
<!--privacy modal-->
<div id="mdl_privacy" class="w3-modal">
<div class="w3-modal-content w3-animate-opacity w3-card-4">
<header class="w3-container w3-white">
<span onclick="closeMdl('mdl_privacy')" class="w3-button w3-display-topright ">×</span>
<h2 id="i18n_titlePrivacyModal">Privacy</h2>
</header>
<div id="i18n_textPrivacyModal" class="w3-container w3-padding">
<h4>Data Protection Officer</h4>
<p><a href="mailto:[email protected]">Jacopo Cassinis</a> - Sori (Italy)</p>
I do not collect any data and logs are anonymized. This website uses no cookies. Preferences are
saved via HTML5 Web Storage and are never sent to any server.<br />When clicking "Search", you send
your search query to the search engine of your choice, so you should read their privacy policy for
further information.
</div>
</div>
</div>
<!-- main script -->
<script src="./assets/js/main.js?v=0.4" async defer></script>
</body>
</html>