byreqz/blue-searchpage
1
0
Fork 0
mirror of https://github.com/byReqz/blue-searchpage.git synced 2024-11-21 13:13:13 +00:00
Code Issues Projects Releases Wiki Activity

updated to newer version

Browse Source 
added toggable and changing backgrounds and a tooltip
This commit is contained in:
Nils 2019-08-31 02:10:04 +02:00
parent 6f2e59e818
commit b5e922930a
16 changed files with 5499 additions and 381 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2337
font-awesome.css vendored Normal file
View File

File diff suppressed because it is too large Load Diff

BIN
fonts/FontAwesome.otf Normal file
View File

Binary file not shown.

BIN
fonts/fontawesome-webfont.eot Normal file
View File

Binary file not shown.

2671
fonts/fontawesome-webfont.svg Normal file
View File

File diff suppressed because it is too large Load Diff
Side by Side

After

Width:  |  Height:  |  Size: 434 KiB

BIN
fonts/fontawesome-webfont.ttf Normal file
View File

Binary file not shown.

BIN
fonts/fontawesome-webfont.woff Normal file
View File

Binary file not shown.

BIN
fonts/fontawesome-webfont.woff2 Normal file
View File

Binary file not shown.

46
index.html
View File

@ -1,22 +1,34 @@
<head> <head>
<link href='https://fonts.googleapis.com/css?family=Roboto:100&amp;subset=latin,cyrillic-ext,greek-ext,greek,vietnamese,cyrillic,latin-ext' rel='stylesheet' type='text/css'> <link href='https://fonts.googleapis.com/css?family=Roboto:100&amp;subset=latin,cyrillic-ext,greek-ext,greek,vietnamese,cyrillic,latin-ext' rel='stylesheet' type='text/css'>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8"> <meta http-equiv="Content-type" content="text/html;charset=UTF-8">
<title id="title">Start</title> <title id="title">Start</title>
<link rel="stylesheet" href="style.css" type="text/css"> <link rel="stylesheet" href="style.css" type="text/css">
<script src="scripts/jquery-1.4.2.min.js" type="text/javascript"></script> <link rel="stylesheet" href="font-awesome.css" type="text/css">
<script src="scripts/tools.js" type="text/javascript"></script> <script src="scripts/jquery-1.4.2.min.js" type="text/javascript"></script>
<script src="scripts/scripts.js" type="text/javascript"></script> <script src="scripts/tools.js" type="text/javascript"></script>
<script src="engines/base.js" type="text/javascript"></script> <script src="scripts/scripts.js" type="text/javascript"></script>
<script type="text/javascript" src="scripts/jquery.js"></script> <script src="engines/base.js" type="text/javascript"></script>
<script type="text/javascript" src="scripts/jquery.js"></script>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head> </head>
<body> <body>
<div id="engines"></div> <div id="engines"></div>
<div id="container"> <div id="container">
<form id="form" onsubmit="return doSearch()"> <form id="form" onsubmit="return doSearch()">
<div id="input"><input id="i" type="text" autocomplete="off" spellcheck="false" placeholder="Who the fuck is byReqz?" results="0" /></div> <a onclick="nextLanguage()" id="lang"></a> <div id="input"><input id="i" type="text" autocomplete="off" spellcheck="false" placeholder="Search anything" results="0" /></div>
<ul id="sugs"></ul> <a onclick="nextLanguage()" id="lang"></a>
</form> <ul id="sugs"></ul>
<p id="method"></p> </form>
</div> <p id="method"></p>
</div>
<button id='toggleBG' title='Choose between random bg or the default bg!' onclick="toggleBG();">Toggle Background Image</button>
<script>
toggleBG()
</script>
<div id="tutorial" align="center">
<p>Input Text to search,hover over the Logo to see all Search Engines</p>
</div>
</body> </body>

548
scripts/scripts.js
View File

@ -1,48 +1,69 @@
var org = true;
/*'http://www.planwallpaper.com/static/images/hexagon-prisms-28449-2560x1440_QnLmOkL-min.jpg', 'http://www.planwallpaper.com/static/images/6999064-indian-beach-wallpaper_XEK3Udy-min.jpg', 'http://www.planwallpaper.com/static/images/Seamless-Polygon-Backgrounds-Vol2-full-min.jpg', 'http://www.planwallpaper.com/static/images/colorful-triangles-background-min.jpg', 'http://www.planwallpaper.com/static/images/ZhGEqAP-min.jpg', 'http://www.planwallpaper.com/static/images/Live-Wallpaper-1.jpeg', 'http://www.planwallpaper.com/static/images/Wallpaper-HD-10-min.jpg', 'http://www.planwallpaper.com/static/images/butterfly-wallpaper.jpeg', 'http://www.planwallpaper.com/static/images/blue-abstract-glass-balls-min.jpg', 'http://www.planwallpaper.com/static/images/555837-min.jpg', 'http://www.planwallpaper.com/static/images/HD-Wallpapers1.jpeg', 'http://www.planwallpaper.com/static/images/Technology-Wallpaper-14-min.jpg', 'http://www.planwallpaper.com/static/images/11-sea-beach-sand-wallpaper_sf9i1b6-min.jpg', 'http://www.planwallpaper.com/static/images/kartandtinki1_photo-wallpapers_02-min.jpg', 'http://www.planwallpaper.com/static/images/black_hd_wallpaper_black_hd_wallpaper-min.jpg', 'http://www.planwallpaper.com/static/images/6944150-abstract-colors-wallpaper-min.jpg', 'http://www.planwallpaper.com/static/images/wallpaper-11628192-min.jpg', 'http://www.planwallpaper.com/static/images/wallpapers-7020-7277-hd-wallpapers-min.jpg', 'http://www.planwallpaper.com/static/images/i-should-buy-a-boat-min.jpg', 'http://www.planwallpaper.com/static/images/2022725-wallpaper_625864_Iz6NK8G-min.jpg', 'http://www.planwallpaper.com/static/images/79438-blue-world-map-min.jpg', 'http://www.planwallpaper.com/static/images/303836-min.jpg', 'http://www.planwallpaper.com/static/images/abstract_wallpaper_xVBXbWX-min.jpg', 'http://www.planwallpaper.com/static/images/general-night-golden-gate-bridge-hd-wallpapers-golden-gate-bridge-wallpaper-min.jpg', 'http://www.planwallpaper.com/static/images/black-and-blue-cubes-wallpaper1-min.jpg', 'http://www.planwallpaper.com/static/images/city_of_love-wallpaper-5120x3200-min.jpg', 'http://www.planwallpaper.com/static/images/b807c2282ab0a491bd5c5c1051c6d312_k4PiHxO-min.jpg', */
var images = ['wallpaper/6.jpg','wallpaper/5.jpg','wallpaper/4.jpg','wallpaper/3.jpg','wallpaper/2.jpg','wallpaper/1.jpg'];
function toggleBG() {
if (org) {
document.body.style.backgroundImage = "url('" + images[Math.round(Math.random() * (images.length - 1))] + "')";
document.body.style.backgroundSize = "100% 100%";
org = false;
} else {
org = true;
document.body.style.backgroundSize = "";
document.body.style.backgroundImage = "url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEIAAABCCAYAAADjVADoAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAA3XAAAN1wFCKJt4AAAAB3RJTUUH4AgbFB4l6ZLKSQAAAFZJREFUeNrt2jENgDAABMAHASyoYMZWpTDWWxcskBAUsGGhSbkz8D/8+AkAAAAAAAAAwNim3gVqe9YkKdty9cyfbQEAAAAAAAAARvX7f8Rx3nviH/F5AaflDQJlfwozAAAAAElFTkSuQmCC')";
console.log(document.body.style.backgroundImage);
}
return false;
}
var eng = {}, var eng = {},
current = {}, current = {},
fadeDur = 200, fadeDur = 200,
titlePrefix = "Search ", titlePrefix = "Search ",
idxWidth = 700, idxWidth = 700,
idxLogoFull = [225, 80], idxLogoFull = [225, 80],
idxLogoSmall = [157, 56], idxLogoSmall = [157, 56],
idxMargin = 24, idxMargin = 24,
idxFadedOpacity = 0.3, idxFadedOpacity = 0.3,
idxHeight = 0; idxHeight = 0;
$(function() { $(function () {
// Create Engine Index // Create Engine Index
indexCreate(); indexCreate();
// Behavior // Behavior
$("#i").keyup(function(ev) { $("#i").keyup(function (ev) {
fetchSuggestions(ev.which); fetchSuggestions(ev.which);
}); });
$(document).click(function(ev) { $(document).click(function (ev) {
closeSugBox(ev.srcElement) closeSugBox(ev.srcElement)
}); });
$("#toggleInfo").click(function() { $("#toggleInfo").click(function () {
$("#infoBox").toggle(400); $("#infoBox").toggle(400);
}); });
// Set up first engine // Set up first engine
build(firstProp(eng), false); build(firstProp(eng), false);
}); });
function doSearch() { function doSearch() {
var url = eng[current.engine].places[current.place][0]; var url = eng[current.engine].places[current.place][0];
url = url.replace("%query%", encodeURIComponent($("#i").val())); url = url.replace("%query%", encodeURIComponent($("#i").val()));
if (typeof eng[current.engine].languages == "object") if (typeof eng[current.engine].languages == "object")
url = url.replace("%lang%", eng[current.engine].languages[current.language]); url = url.replace("%lang%", eng[current.engine].languages[current.language]);
window.location.href = url; window.location.href = url;
return false; return false;
} }
@ -50,102 +71,102 @@ function doSearch() {
----------------------------------------------------- */ ----------------------------------------------------- */
function indexCreate() { function indexCreate() {
var row = 0, var row = 0,
i = 0, // Reset every row i = 0, // Reset every row
j = 0, // Total j = 0, // Total
offset = 0, offset = 0,
cols = Math.floor(idxWidth / idxLogoSmall[0]); cols = Math.floor(idxWidth / idxLogoSmall[0]);
for (e in eng) { for (e in eng) {
// If the offset hasn't been set yet // If the offset hasn't been set yet
// And the number of engines left to draw is <= items in the final row // And the number of engines left to draw is <= items in the final row
if ( if (
offset == 0 && offset == 0 &&
(numKeys(eng) - j) <= (numKeys(eng) % cols) (numKeys(eng) - j) <= (numKeys(eng) % cols)
) { ) {
offset = cols - numKeys(eng) % cols; offset = cols - numKeys(eng) % cols;
offset = offset * (idxLogoSmall[0] + idxMargin) / 2; offset = offset * (idxLogoSmall[0] + idxMargin) / 2;
}
$("#engines").prepend("<a id='" + e + "_logo' ref='" + e + "'><img src='engines/" + eng[e].logo + "'></a>");
if (i == cols) {
i = 0;
row++;
};
eng[e].idxPos = [
(idxLogoSmall[0] + idxMargin) * i - idxWidth / 2 + offset,
(idxLogoSmall[1] + idxMargin) * row
];
i++;
j++;
} }
idxHeight = (row + 1) * (idxLogoSmall[1] + idxMargin) - idxMargin;
idxHeight = Math.max(idxHeight, idxLogoFull[1]);
$("#engines").prepend("<a id='" + e + "_logo' ref='" + e + "'><img src='engines/" + eng[e].logo + "'></a>"); $("#engines a").click(function () {
build($(this).attr("ref"), true);
})
if (i == cols) { $("#engines a").css({
i = 0; "left": "50%",
row++; "bottom": "0",
}; "marginLeft": -idxLogoFull[0] / 2 + "px"
eng[e].idxPos = [ });
(idxLogoSmall[0] + idxMargin) * i - idxWidth / 2 + offset,
(idxLogoSmall[1] + idxMargin) * row
];
i++;
j++;
}
idxHeight = (row + 1) * (idxLogoSmall[1] + idxMargin) - idxMargin;
idxHeight = Math.max(idxHeight, idxLogoFull[1]);
$("#engines a").click(function() { $("#engines").mouseenter(function () {
build($(this).attr("ref"), true); indexOpen();
}) });
$("#engines").mouseleave(function () {
$("#engines a").css({ indexClose();
"left": "50%", });
"bottom": "0",
"marginLeft": -idxLogoFull[0] / 2 + "px"
});
$("#engines").mouseenter(function() {
indexOpen();
});
$("#engines").mouseleave(function() {
indexClose();
});
} }
var idxState = false, var idxState = false,
idxClear = undefined; idxClear = undefined;
function indexOpen() { function indexOpen() {
idxState = true; idxState = true;
clearTimeout(idxClear); clearTimeout(idxClear);
$("#engines").css({ $("#engines").css({
"height": idxHeight "height": idxHeight
}); });
for (e in eng) { for (e in eng) {
var op = $("#" + e + "_logo").hasClass("active"); var op = $("#" + e + "_logo").hasClass("active");
$("#" + e + "_logo").stop().queue("fx", []).animate({ $("#" + e + "_logo").stop().queue("fx", []).animate({
"marginLeft": eng[e].idxPos[0] + "px", "marginLeft": eng[e].idxPos[0] + "px",
"marginBottom": eng[e].idxPos[1] + "px", "marginBottom": eng[e].idxPos[1] + "px",
"opacity": (op) ? 1 : idxFadedOpacity, "opacity": (op) ? 1 : idxFadedOpacity,
"width": idxLogoSmall[0], "width": idxLogoSmall[0],
"height": idxLogoSmall[1], "height": idxLogoSmall[1],
}, fadeDur); }, fadeDur);
} }
} }
function indexClose() { function indexClose() {
idxState = false; idxState = false;
$("#engines").css({ $("#engines").css({
"height": idxLogoFull[1] "height": idxLogoFull[1]
}); });
$("#engines a").each(function() { $("#engines a").each(function () {
var op = $(this).hasClass("active"); var op = $(this).hasClass("active");
$(this).stop().queue("fx", []).animate({ $(this).stop().queue("fx", []).animate({
"marginLeft": -idxLogoFull[0] / 2 + "px", "marginLeft": -idxLogoFull[0] / 2 + "px",
"marginBottom": 0, "marginBottom": 0,
"opacity": (op) ? 1 : 0, "opacity": (op) ? 1 : 0,
"width": idxLogoFull[0], "width": idxLogoFull[0],
"height": idxLogoFull[1] "height": idxLogoFull[1]
}, fadeDur);
});
// Because jQuery doesn't like me
idxClear = setTimeout(function () {
$("#engines a:not(.active)").css("opacity", 0)
}, fadeDur); }, fadeDur);
});
// Because jQuery doesn't like me
idxClear = setTimeout(function() {
$("#engines a:not(.active)").css("opacity", 0)
}, fadeDur);
} }
@ -154,67 +175,67 @@ function indexClose() {
----------------------------------------------------- */ ----------------------------------------------------- */
function build(e, animate) { function build(e, animate) {
var methodFade = (animate) ? fadeDur : 0; var methodFade = (animate) ? fadeDur : 0;
current.engine = e; // Just the engine's ID for reference current.engine = e; // Just the engine's ID for reference
e = eng[e]; // Engine object e = eng[e]; // Engine object
$("#title").html(titlePrefix + e.pageTitle); $("#title").html(titlePrefix + e.pageTitle);
$("#method").stop().queue("fx", []).animate({ $("#method").stop().queue("fx", []).animate({
"opacity": 0 "opacity": 0
}, methodFade); }, methodFade);
op = (idxState) ? idxFadedOpacity : 0; op = (idxState) ? idxFadedOpacity : 0;
$("#engines a").stop().queue("fx", []).removeClass("active"); $("#engines a").stop().queue("fx", []).removeClass("active");
$("#" + current.engine + "_logo").addClass("active").animate({ $("#" + current.engine + "_logo").addClass("active").animate({
"opacity": 1 "opacity": 1
}, fadeDur);
$("#engines a:not(.active)").animate({
"opacity": op
}, fadeDur);
if (typeof e.languages == "object") setLang(firstProp(e.languages));
else $("#lang").fadeOut(fadeDur);
closeSugBox(false);
$("#i").attr("autosave", "com.infinise.go." + current.engine);
$("#input input").focus();
setTimeout(function() {
$("#method").html("");
for (place in e.places) $("#method").append("<a onclick='setPlace(this)'>" + place + "</a>");
setPlace("#method a:first");
$("#method").animate({
"opacity": 1
}, fadeDur); }, fadeDur);
}, methodFade); $("#engines a:not(.active)").animate({
"opacity": op
}, fadeDur);
if (typeof e.languages == "object") setLang(firstProp(e.languages));
else $("#lang").fadeOut(fadeDur);
closeSugBox(false);
$("#i").attr("autosave", "com.infinise.go." + current.engine);
$("#input input").focus();
setTimeout(function () {
$("#method").html("");
for (place in e.places) $("#method").append("<a onclick='setPlace(this)'>" + place + "</a>");
setPlace("#method a:first");
$("#method").animate({
"opacity": 1
}, fadeDur);
}, methodFade);
} }
function setPlace(place) { function setPlace(place) {
current.place = $(place).html(); current.place = $(place).html();
$("#method a").removeClass("active"); $("#method a").removeClass("active");
$(place).addClass("active"); $(place).addClass("active");
$("#input input").focus(); $("#input input").focus();
if (eng[current.engine].places[current.place][1] !== false) { if (eng[current.engine].places[current.place][1] !== false) {
fetchSuggestions(); fetchSuggestions();
$("#i").attr("autocomplete", "off"); $("#i").attr("autocomplete", "off");
} else { } else {
closeSugBox(false); closeSugBox(false);
$("#i").attr("autocomplete", "on"); $("#i").attr("autocomplete", "on");
} }
} }
function setLang(language) { function setLang(language) {
current.language = language; current.language = language;
$("#lang").fadeIn(fadeDur).html(language); $("#lang").fadeIn(fadeDur).html(language);
$("#input input").focus(); $("#input input").focus();
} }
@ -224,157 +245,150 @@ function setLang(language) {
var isCtrl = false; var isCtrl = false;
var isCmd = false; var isCmd = false;
$(document).keyup(function(e) { $(document).keyup(function (e) {
if (e.which == 17) isCtrl = false; if (e.which == 17) isCtrl = false;
if (e.which == 91) isCmd = false; if (e.which == 91) isCmd = false;
}).keydown(function(e) { }).keydown(function (e) {
if (e.which == 17) isCtrl = true; if (e.which == 17) isCtrl = true;
if (e.which == 91) isCmd = true; if (e.which == 91) isCmd = true;
if (e.which == 49 && isCtrl == true) { if (e.which == 49 && isCtrl == true) { /* Key "1" */
/* Key "1" */ nextEngine();
nextEngine(); return false;
return false; }
} if (e.which == 50 && isCtrl == true) { /* Key "2" */
if (e.which == 50 && isCtrl == true) { nextPlace();
/* Key "2" */ return false;
nextPlace(); }
return false; if (e.which == 51 && isCtrl == true) { /* Key "3" */
} nextLanguage();
if (e.which == 51 && isCtrl == true) { return false;
/* Key "3" */ }
nextLanguage();
return false;
}
if (e.which == 38) { if (e.which == 38) { /* Arrow Up */
/* Arrow Up */ prevSugResult();
prevSugResult(); }
} if (e.which == 40) { /* Arrow Down */
if (e.which == 40) { nextSugResult();
/* Arrow Down */ }
nextSugResult(); if (e.which == 27) { /* ESC */
} closeSugBox(false);
if (e.which == 27) { }
/* ESC */ if (e.which == 13) { /* Enter */
closeSugBox(false); applySugResult();
} }
if (e.which == 13) {
/* Enter */
applySugResult();
}
}); });
function nextEngine() { function nextEngine() {
build(findNext(eng, current.engine), true); build(findNext(eng, current.engine), true);
} }
function nextPlace() { function nextPlace() {
var nextPlace = findNext(eng[current.engine].places, current.place); var nextPlace = findNext(eng[current.engine].places, current.place);
$("#method a").each(function() { $("#method a").each(function () {
if ($(this).html() == nextPlace) setPlace($(this)); if ($(this).html() == nextPlace) setPlace($(this));
}) })
} }
function nextLanguage() { function nextLanguage() {
setLang(findNext(eng[current.engine].languages, current.language)); setLang(findNext(eng[current.engine].languages, current.language));
} }
/* SUGGESTIONS /* SUGGESTIONS
----------------------------------------------------- */ ----------------------------------------------------- */
function fetchSuggestions(key) { function fetchSuggestions(key)  {
if (key == undefined || (!inArray(key, new Array(13, 16, 20, 27, 37, 38, 39, 40)) && !isCtrl && !isCmd)) { if (key == undefined || (!inArray(key, new Array(13, 16, 20, 27, 37, 38, 39, 40)) && !isCtrl && !isCmd)) {
if ($("#i").val() != "" && eng[current.engine].places[current.place][1] !== false) { if ($("#i").val() != "" && eng[current.engine].places[current.place][1] !== false) {
current.suggestionsTimestamp = new Date().getTime(); current.suggestionsTimestamp = new Date().getTime();
var url = eng[current.engine].places[current.place][1]; var url = eng[current.engine].places[current.place][1];
url = url.replace("%query%", encodeURIComponent($("#i").val())); url = url.replace("%query%", encodeURIComponent($("#i").val()));
url = url.replace("%time%", current.suggestionsTimestamp); url = url.replace("%time%", current.suggestionsTimestamp);
if (typeof eng[current.engine].languages == "object") if (typeof eng[current.engine].languages == "object")
url = url.replace("%lang%", eng[current.engine].languages[current.language]); url = url.replace("%lang%", eng[current.engine].languages[current.language]);
$.getJSON(url, function(data) { $.getJSON(url, function (data) {
buildSuggestions(data); buildSuggestions(data);
}) })
} else closeSugBox(false); } else closeSugBox(false);
} }
} }
function buildSuggestions(list) { function buildSuggestions(list) {
if (list.empty) { if (list.empty) {
if (console) console.log("(1) Suggestions for '" + list.query + "' empty."); if (console) console.log("(1) Suggestions for '" + list.query + "' empty.");
closeSugBox(false); closeSugBox(false);
} else if ( } else if (
list.engine == current.engine && list.engine == current.engine &&
list.timestamp == current.suggestionsTimestamp && list.timestamp == current.suggestionsTimestamp &&
list.query == $("#i").val() list.query == $("#i").val()
) { ) {
if (console) console.log("(2) Suggestions for '" + list.query + "' accepted."); if (console) console.log("(2) Suggestions for '" + list.query + "' accepted.");
$("#sugs").html(""); $("#sugs").html("");
for (sug in list.results) { for (sug in list.results) {
sug = list.results[sug]; sug = list.results[sug];
$("#sugs").append("<li><a href='" + sug[1] + "'>" + sug[0] + "</a></li>"); $("#sugs").append("<li><a href='" + sug[1] + "'>" + sug[0] + "</a></li>");
}
$("#sugs").css({
"display": "block"
});
$("#sugs li").mousemove(function () {
$("#sugs .active").removeClass("active");
$(this).addClass("active");
}).click(function () {
applySugResult();
});
} else {
if (console) console.log("(3) Suggestions for '" + list.query + "' discarded.");
} }
$("#sugs").css({
"display": "block"
});
$("#sugs li").mousemove(function() {
$("#sugs .active").removeClass("active");
$(this).addClass("active");
}).click(function() {
applySugResult();
});
} else {
if (console) console.log("(3) Suggestions for '" + list.query + "' discarded.");
}
} }
function prevSugResult() { function prevSugResult() {
if ($("#sugs").css("display") == "none") return; if ($("#sugs").css("display") == "none") return;
if ($("#sugs .active").length == 0) { if ($("#sugs .active").length == 0) {
$("#sugs li:last-child").addClass("active"); $("#sugs li:last-child").addClass("active");
} else { } else {
$("#sugs .active").removeClass("active").prev().addClass("active"); $("#sugs .active").removeClass("active").prev().addClass("active");
} }
backupQuery(); backupQuery();
} }
function nextSugResult() { function nextSugResult() {
if ($("#sugs").css("display") == "none") return; if ($("#sugs").css("display") == "none") return;
if ($("#sugs .active").length == 0) { if ($("#sugs .active").length == 0) {
$("#sugs li:first-child").addClass("active"); $("#sugs li:first-child").addClass("active");
} else { } else {
$("#sugs .active").removeClass("active").next().addClass("active"); $("#sugs .active").removeClass("active").next().addClass("active");
} }
backupQuery(); backupQuery();
} }
var originalQuery = false; var originalQuery = false;
function backupQuery() { function backupQuery() {
if ($("#sugs .active").length > 0) { if ($("#sugs .active").length > 0) {
if (!originalQuery) originalQuery = $("#i").val(); if (!originalQuery) originalQuery = $("#i").val();
$("#i").val($("#sugs .active a").html()); $("#i").val($("#sugs .active a").html());
} else { } else {
$("#i").val(originalQuery); $("#i").val(originalQuery);
originalQuery = false; originalQuery = false;
} }
} }
function closeSugBox(src) { function closeSugBox(src) {
if (src == false || src == undefined || (src.id != "i" && src.id != "sugs")) if (src == false || src == undefined || (src.id != "i" && src.id != "sugs"))
$("#sugs").html("").css({ $("#sugs").html("").css({
"display": "none" "display": "none"
}); });
} }
function applySugResult() { function applySugResult() {
if ($("#sugs .active").length > 0) { if ($("#sugs .active").length > 0) {
$("#i").val($("#sugs .active a").html()); $("#i").val($("#sugs .active a").html());
closeSugBox(false); closeSugBox(false);
} }
} }

278
style.css
View File

@ -1,68 +1,106 @@
* { * {
margin: 0; margin: 0;
padding: 0; padding: 0;
text-decoration: none; text-decoration: none;
} }
@-webkit-keyframes slide { @-webkit-keyframes slide {
0% {-webkit-transform: translateY(80px); opacity: 0;} 0% {
100% {-webkit-transform: translateY(0px); opacity: 1;} -webkit-transform: translateY(80px);
opacity: 0;
}
100% {
-webkit-transform: translateY(0px);
opacity: 1;
}
} }
@-moz-keyframes slide { @-moz-keyframes slide {
0% {-moz-transform: translateY(80px); opacity: 0;} 0% {
100% {-moz-transform: translateY(0px); opacity: 1;} -moz-transform: translateY(80px);
opacity: 0;
}
100% {
-moz-transform: translateY(0px);
opacity: 1;
}
} }
@-ms-keyframes slide { @-ms-keyframes slide {
0% {-ms-transform: translateY(80px); opacity: 0;} 0% {
100% {-ms-transform: translateY(0px); opacity: 1;} -ms-transform: translateY(80px);
opacity: 0;
}
100% {
-ms-transform: translateY(0px);
opacity: 1;
}
} }
@-o-keyframes slide { @-o-keyframes slide {
0% {-o-transform: translateY(80px); opacity: 0;} 0% {
100% {-o-transform: translateY(0px); opacity: 1;} -o-transform: translateY(80px);
opacity: 0;
}
100% {
-o-transform: translateY(0px);
opacity: 1;
}
} }
@keyframes slide { @keyframes slide {
0% {transform: translateY(80px); opacity: 0;} 0% {
100% {transform: translateY(0px); opacity: 1;} transform: translateY(80px);
opacity: 0;
}
100% {
transform: translateY(0px);
opacity: 1;
}
} }
placeholder { placeholder {
color: rgba(142, 219, 242, 0.5); color: rgba(142, 219, 242, 0.5);
} }
::-webkit-input-placeholder { ::-webkit-input-placeholder {
color: rgba(142, 219, 242, 0.5); color: rgba(142, 219, 242, 0.5);
} }
:-moz-placeholder { /* Firefox 18- */ :-moz-placeholder {
color: rgba(142, 219, 242, 0.5); /* Firefox 18- */
color: rgba(142, 219, 242, 0.5);
} }
::-moz-placeholder { /* Firefox 19+ */ ::-moz-placeholder {
color: rgba(142, 219, 242, 0.5); /* Firefox 19+ */
color: rgba(142, 219, 242, 0.5);
} }
:-ms-input-placeholder { :-ms-input-placeholder {
color: rgba(142, 219, 242, 0.5); color: rgba(142, 219, 242, 0.5);
} }
body { body {
-webkit-text-size-adjust: none; -webkit-text-size-adjust: none;
-webkit-user-select: none; -webkit-user-select: none;
font-size: 14px; font-size: 14px;
background-color: #020F12; background-color: #020F12;
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEIAAABCCAYAAADjVADoAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAA3XAAAN1wFCKJt4AAAAB3RJTUUH4AgbFB4l6ZLKSQAAAFZJREFUeNrt2jENgDAABMAHASyoYMZWpTDWWxcskBAUsGGhSbkz8D/8+AkAAAAAAAAAwNim3gVqe9YkKdty9cyfbQEAAAAAAAAARvX7f8Rx3nviH/F5AaflDQJlfwozAAAAAElFTkSuQmCC'); background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEIAAABCCAYAAADjVADoAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAA3XAAAN1wFCKJt4AAAAB3RJTUUH4AgbFB4l6ZLKSQAAAFZJREFUeNrt2jENgDAABMAHASyoYMZWpTDWWxcskBAUsGGhSbkz8D/8+AkAAAAAAAAAwNim3gVqe9YkKdty9cyfbQEAAAAAAAAARvX7f8Rx3nviH/F5AaflDQJlfwozAAAAAElFTkSuQmCC');
}
#tutorial {
font-family: 'Roboto', sans-serif;
color: #8EDBF2;
top: 20px;
font-size: 16px;
} }
#container { #container {
position: absolute; position: absolute;
left: 0px; left: 0px;
top: calc(50% - 83px); top: calc(50% - 83px);
width: 100%; width: 100%;
height: 144px; height: 144px;
} }
@ -70,113 +108,159 @@ body {
----------------------------------------------------- */ ----------------------------------------------------- */
#engines { #engines {
width: 700px; width: 700px;
height: 80px; height: 80px;
position: absolute; position: absolute;
left: 50%; left: 50%;
bottom: calc(50% + 40px); bottom: calc(50% + 40px);
margin-left: -350px; margin-left: -350px;
margin-bottom: 10%; margin-bottom: 10%;
-webkit-animation:slide 0.75s ease; -webkit-animation: slide 0.75s ease;
moz-animation:slide 0.75s ease; moz-animation: slide 0.75s ease;
ms-animation:slide 0.75s ease; ms-animation: slide 0.75s ease;
o-animation:slide 0.75s ease; o-animation: slide 0.75s ease;
animation:slide 0.75s ease; animation: slide 0.75s ease;
} }
#engines a { #engines a {
display: block; display: block;
width: 225px; width: 225px;
height: 80px; height: 80px;
cursor: pointer; cursor: pointer;
opacity: 0.0; opacity: 0.0;
position: absolute; position: absolute;
} }
#engines a img { #engines a img {
display: block; display: block;
height: 100%; height: 100%;
width: 100%; width: 100%;
} }
/* SEARCH BOX /* SEARCH BOX
----------------------------------------------------- */ ----------------------------------------------------- */
#input input { #input input {
font-size: 140px; font-size: 140px;
font-family: 'Roboto', sans-serif; font-family: 'Roboto', sans-serif;
font-weight: 100; font-weight: 100;
text-align: center; text-align: center;
background: #020E12; background: rgba(10, 10, 10, 0.3);
width: 100%; width: 100%;
outline: 0; outline: 0;
color: #8EDBF2; color: #8EDBF2;
border: 0px; border: 0px;
} }
#lang { #lang {
position: absolute; position: absolute;
right: 49px; right: 49px;
top: 39px; top: 39px;
font-size: 13px; font-size: 13px;
font-weight: bold; +padding: 3px 5px;
padding: 3px 5px; -webkit-border-radius: 3px;
-webkit-border-radius: 3px; -moz-border-radius: 3px;
-moz-border-radius: 3px; color: #b7c2cf;
color: #b7c2cf; cursor: pointer;
cursor: pointer;
} }
#lang:hover { #lang:hover {
background: #b7c2cf; background: #b7c2cf;
color: white; color: white;
} }
#lang:active { #lang:active {
background: #939fad; background: #939fad;
} }
#method { #method {
display: none; display: none;
} }
/* BG BUTTON
----------------------------------------------------- */
#toggleBG {
font-family: 'Roboto', sans-serif;
position: absolute;
right: 50px;
bottom: 50px;
width: 300px;
height: 100px;
color: #8EDBF2;
background: none;
border: none;
transition-duration: 0.3s;
font-size: 15px;
}
#toggleBG:hover {
cursor: pointer;
font-size: 20px;
}
#toggleBG:focus {
outline: 0;
}
/* Donator Button
----------------------------------------------------- */
#Donatormode {
font-family: 'Roboto', sans-serif;
position: absolute;
left: 50px;
bottom: 50px;
width: 300px;
height: 100px;
color: #8EDBF2;
background: none;
border: none;
transition-duration: 0.3s;
font-size: 15px;
}
#Donatormode:hover {
cursor: pointer;
font-size: 20px;
}
#Donatormode:focus {
outline: 0;
}
/* SEARCH SUGGESTIONS /* SEARCH SUGGESTIONS
----------------------------------------------------- */ ----------------------------------------------------- */
#sugs { #sugs {
display: none; display: none;
position: absolute; position: absolute;
background: rgba(255,255,255,0.8); background: rgba(255, 255, 255, 0.8);
border: 1px solid #dae2e9; border: 1px solid #dae2e9;
border-top: 0; border-top: 0;
left: 41px; left: 41px;
top: 68px; top: 68px;
right: 41px; right: 41px;
list-style: none; list-style: none;
padding: 3px 0; padding: 3px 0;
font-size: 11px; font-size: 11px;
-webkit-border-bottom-left-radius: 5px; -webkit-border-bottom-left-radius: 5px;
-webkit-border-bottom-right-radius: 5px; -webkit-border-bottom-right-radius: 5px;
-moz-border-radius-bottomleft: 5px; -moz-border-radius-bottomleft: 5px;
-moz-border-radius-bottomright: 5px; -moz-border-radius-bottomright: 5px;
} }
#sugs li a { #sugs li a {
display: block; display: block;
padding: 3px 8px; padding: 3px 8px;
color: #74889e; color: #74889e;
} }
#sugs li.active a { #sugs li.active a {
background: #b7c2cf; background: #b7c2cf;
color: white; color: white;
} }
#sugs li a:active { #sugs li a:active {
background: #939fad; background: #939fad;
} }

BIN
wallpaper/1.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 342 KiB

BIN
wallpaper/2.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 401 KiB

BIN
wallpaper/3.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 395 KiB

BIN
wallpaper/4.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 157 KiB

BIN
wallpaper/5.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 279 KiB

BIN
wallpaper/6.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 610 KiB