updated to newer version
added toggable and changing backgrounds and a tooltip
This commit is contained in:
Nils
parent
6f2e59e818
commit
b5e922930a
File diff suppressed because it is too large
Load Diff
Binary file not shown.
Binary file not shown.
File diff suppressed because it is too large
Load Diff
|
After Width: | Height: | Size: 434 KiB |
Binary file not shown.
Binary file not shown.
Binary file not shown.
46
index.html
46
index.html
|
|
@ -1,22 +1,34 @@
|
|||
<head>
|
||||
<link href='https://fonts.googleapis.com/css?family=Roboto:100&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">
|
||||
<title id="title">Start</title>
|
||||
<link rel="stylesheet" href="style.css" type="text/css">
|
||||
<script src="scripts/jquery-1.4.2.min.js" type="text/javascript"></script>
|
||||
<script src="scripts/tools.js" type="text/javascript"></script>
|
||||
<script src="scripts/scripts.js" type="text/javascript"></script>
|
||||
<script src="engines/base.js" type="text/javascript"></script>
|
||||
<script type="text/javascript" src="scripts/jquery.js"></script>
|
||||
<link href='https://fonts.googleapis.com/css?family=Roboto:100&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">
|
||||
<title id="title">Start</title>
|
||||
<link rel="stylesheet" href="style.css" type="text/css">
|
||||
<link rel="stylesheet" href="font-awesome.css" type="text/css">
|
||||
<script src="scripts/jquery-1.4.2.min.js" type="text/javascript"></script>
|
||||
<script src="scripts/tools.js" type="text/javascript"></script>
|
||||
<script src="scripts/scripts.js" type="text/javascript"></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>
|
||||
|
||||
<body>
|
||||
<div id="engines"></div>
|
||||
<div id="container">
|
||||
<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>
|
||||
<ul id="sugs"></ul>
|
||||
</form>
|
||||
<p id="method"></p>
|
||||
</div>
|
||||
<div id="engines"></div>
|
||||
<div id="container">
|
||||
<form id="form" onsubmit="return doSearch()">
|
||||
<div id="input"><input id="i" type="text" autocomplete="off" spellcheck="false" placeholder="Search anything" results="0" /></div>
|
||||
<a onclick="nextLanguage()" id="lang"></a>
|
||||
<ul id="sugs"></ul>
|
||||
</form>
|
||||
<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>
|
||||
|
|
|
|||
|
|
@ -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 = {},
|
||||
current = {},
|
||||
fadeDur = 200,
|
||||
titlePrefix = "Search ",
|
||||
current = {},
|
||||
fadeDur = 200,
|
||||
titlePrefix = "Search ",
|
||||
|
||||
idxWidth = 700,
|
||||
idxLogoFull = [225, 80],
|
||||
idxLogoSmall = [157, 56],
|
||||
idxMargin = 24,
|
||||
idxFadedOpacity = 0.3,
|
||||
idxWidth = 700,
|
||||
idxLogoFull = [225, 80],
|
||||
idxLogoSmall = [157, 56],
|
||||
idxMargin = 24,
|
||||
idxFadedOpacity = 0.3,
|
||||
|
||||
idxHeight = 0;
|
||||
idxHeight = 0;
|
||||
|
||||
|
||||
$(function() {
|
||||
// Create Engine Index
|
||||
$(function () {
|
||||
// Create Engine Index
|
||||
|
||||
indexCreate();
|
||||
indexCreate();
|
||||
|
||||
// Behavior
|
||||
// Behavior
|
||||
|
||||
$("#i").keyup(function(ev) {
|
||||
fetchSuggestions(ev.which);
|
||||
});
|
||||
$(document).click(function(ev) {
|
||||
closeSugBox(ev.srcElement)
|
||||
});
|
||||
$("#i").keyup(function (ev) {
|
||||
fetchSuggestions(ev.which);
|
||||
});
|
||||
$(document).click(function (ev) {
|
||||
closeSugBox(ev.srcElement)
|
||||
});
|
||||
|
||||
$("#toggleInfo").click(function() {
|
||||
$("#infoBox").toggle(400);
|
||||
});
|
||||
$("#toggleInfo").click(function () {
|
||||
$("#infoBox").toggle(400);
|
||||
});
|
||||
|
||||
// Set up first engine
|
||||
// Set up first engine
|
||||
|
||||
build(firstProp(eng), false);
|
||||
build(firstProp(eng), false);
|
||||
});
|
||||
|
||||
function doSearch() {
|
||||
var url = eng[current.engine].places[current.place][0];
|
||||
url = url.replace("%query%", encodeURIComponent($("#i").val()));
|
||||
if (typeof eng[current.engine].languages == "object")
|
||||
url = url.replace("%lang%", eng[current.engine].languages[current.language]);
|
||||
var url = eng[current.engine].places[current.place][0];
|
||||
url = url.replace("%query%", encodeURIComponent($("#i").val()));
|
||||
if (typeof eng[current.engine].languages == "object")
|
||||
url = url.replace("%lang%", eng[current.engine].languages[current.language]);
|
||||
|
||||
window.location.href = url;
|
||||
return false;
|
||||
window.location.href = url;
|
||||
return false;
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -50,102 +71,102 @@ function doSearch() {
|
|||
----------------------------------------------------- */
|
||||
|
||||
function indexCreate() {
|
||||
var row = 0,
|
||||
i = 0, // Reset every row
|
||||
j = 0, // Total
|
||||
offset = 0,
|
||||
cols = Math.floor(idxWidth / idxLogoSmall[0]);
|
||||
var row = 0,
|
||||
i = 0, // Reset every row
|
||||
j = 0, // Total
|
||||
offset = 0,
|
||||
cols = Math.floor(idxWidth / idxLogoSmall[0]);
|
||||
|
||||
for (e in eng) {
|
||||
// If the offset hasn't been set yet
|
||||
// And the number of engines left to draw is <= items in the final row
|
||||
if (
|
||||
offset == 0 &&
|
||||
(numKeys(eng) - j) <= (numKeys(eng) % cols)
|
||||
) {
|
||||
offset = cols - numKeys(eng) % cols;
|
||||
offset = offset * (idxLogoSmall[0] + idxMargin) / 2;
|
||||
for (e in eng) {
|
||||
// If the offset hasn't been set yet
|
||||
// And the number of engines left to draw is <= items in the final row
|
||||
if (
|
||||
offset == 0 &&
|
||||
(numKeys(eng) - j) <= (numKeys(eng) % cols)
|
||||
) {
|
||||
offset = cols - numKeys(eng) % cols;
|
||||
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) {
|
||||
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 a").css({
|
||||
"left": "50%",
|
||||
"bottom": "0",
|
||||
"marginLeft": -idxLogoFull[0] / 2 + "px"
|
||||
});
|
||||
|
||||
$("#engines a").click(function() {
|
||||
build($(this).attr("ref"), true);
|
||||
})
|
||||
|
||||
$("#engines a").css({
|
||||
"left": "50%",
|
||||
"bottom": "0",
|
||||
"marginLeft": -idxLogoFull[0] / 2 + "px"
|
||||
});
|
||||
|
||||
$("#engines").mouseenter(function() {
|
||||
indexOpen();
|
||||
});
|
||||
$("#engines").mouseleave(function() {
|
||||
indexClose();
|
||||
});
|
||||
$("#engines").mouseenter(function () {
|
||||
indexOpen();
|
||||
});
|
||||
$("#engines").mouseleave(function () {
|
||||
indexClose();
|
||||
});
|
||||
}
|
||||
|
||||
var idxState = false,
|
||||
idxClear = undefined;
|
||||
idxClear = undefined;
|
||||
|
||||
function indexOpen() {
|
||||
idxState = true;
|
||||
clearTimeout(idxClear);
|
||||
idxState = true;
|
||||
clearTimeout(idxClear);
|
||||
|
||||
$("#engines").css({
|
||||
"height": idxHeight
|
||||
});
|
||||
$("#engines").css({
|
||||
"height": idxHeight
|
||||
});
|
||||
|
||||
for (e in eng) {
|
||||
var op = $("#" + e + "_logo").hasClass("active");
|
||||
$("#" + e + "_logo").stop().queue("fx", []).animate({
|
||||
"marginLeft": eng[e].idxPos[0] + "px",
|
||||
"marginBottom": eng[e].idxPos[1] + "px",
|
||||
"opacity": (op) ? 1 : idxFadedOpacity,
|
||||
"width": idxLogoSmall[0],
|
||||
"height": idxLogoSmall[1],
|
||||
}, fadeDur);
|
||||
}
|
||||
for (e in eng) {
|
||||
var op = $("#" + e + "_logo").hasClass("active");
|
||||
$("#" + e + "_logo").stop().queue("fx", []).animate({
|
||||
"marginLeft": eng[e].idxPos[0] + "px",
|
||||
"marginBottom": eng[e].idxPos[1] + "px",
|
||||
"opacity": (op) ? 1 : idxFadedOpacity,
|
||||
"width": idxLogoSmall[0],
|
||||
"height": idxLogoSmall[1],
|
||||
}, fadeDur);
|
||||
}
|
||||
}
|
||||
|
||||
function indexClose() {
|
||||
idxState = false;
|
||||
idxState = false;
|
||||
|
||||
$("#engines").css({
|
||||
"height": idxLogoFull[1]
|
||||
});
|
||||
$("#engines").css({
|
||||
"height": idxLogoFull[1]
|
||||
});
|
||||
|
||||
$("#engines a").each(function() {
|
||||
var op = $(this).hasClass("active");
|
||||
$(this).stop().queue("fx", []).animate({
|
||||
"marginLeft": -idxLogoFull[0] / 2 + "px",
|
||||
"marginBottom": 0,
|
||||
"opacity": (op) ? 1 : 0,
|
||||
"width": idxLogoFull[0],
|
||||
"height": idxLogoFull[1]
|
||||
$("#engines a").each(function () {
|
||||
var op = $(this).hasClass("active");
|
||||
$(this).stop().queue("fx", []).animate({
|
||||
"marginLeft": -idxLogoFull[0] / 2 + "px",
|
||||
"marginBottom": 0,
|
||||
"opacity": (op) ? 1 : 0,
|
||||
"width": idxLogoFull[0],
|
||||
"height": idxLogoFull[1]
|
||||
}, fadeDur);
|
||||
});
|
||||
|
||||
// Because jQuery doesn't like me
|
||||
idxClear = setTimeout(function () {
|
||||
$("#engines a:not(.active)").css("opacity", 0)
|
||||
}, 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) {
|
||||
var methodFade = (animate) ? fadeDur : 0;
|
||||
var methodFade = (animate) ? fadeDur : 0;
|
||||
|
||||
current.engine = e; // Just the engine's ID for reference
|
||||
e = eng[e]; // Engine object
|
||||
current.engine = e; // Just the engine's ID for reference
|
||||
e = eng[e]; // Engine object
|
||||
|
||||
$("#title").html(titlePrefix + e.pageTitle);
|
||||
$("#title").html(titlePrefix + e.pageTitle);
|
||||
|
||||
$("#method").stop().queue("fx", []).animate({
|
||||
"opacity": 0
|
||||
}, methodFade);
|
||||
$("#method").stop().queue("fx", []).animate({
|
||||
"opacity": 0
|
||||
}, methodFade);
|
||||
|
||||
op = (idxState) ? idxFadedOpacity : 0;
|
||||
$("#engines a").stop().queue("fx", []).removeClass("active");
|
||||
$("#" + current.engine + "_logo").addClass("active").animate({
|
||||
"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
|
||||
op = (idxState) ? idxFadedOpacity : 0;
|
||||
$("#engines a").stop().queue("fx", []).removeClass("active");
|
||||
$("#" + current.engine + "_logo").addClass("active").animate({
|
||||
"opacity": 1
|
||||
}, 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) {
|
||||
current.place = $(place).html();
|
||||
current.place = $(place).html();
|
||||
|
||||
$("#method a").removeClass("active");
|
||||
$(place).addClass("active");
|
||||
$("#input input").focus();
|
||||
$("#method a").removeClass("active");
|
||||
$(place).addClass("active");
|
||||
$("#input input").focus();
|
||||
|
||||
if (eng[current.engine].places[current.place][1] !== false) {
|
||||
fetchSuggestions();
|
||||
$("#i").attr("autocomplete", "off");
|
||||
} else {
|
||||
closeSugBox(false);
|
||||
$("#i").attr("autocomplete", "on");
|
||||
}
|
||||
if (eng[current.engine].places[current.place][1] !== false) {
|
||||
fetchSuggestions();
|
||||
$("#i").attr("autocomplete", "off");
|
||||
} else {
|
||||
closeSugBox(false);
|
||||
$("#i").attr("autocomplete", "on");
|
||||
}
|
||||
}
|
||||
|
||||
function setLang(language) {
|
||||
current.language = language;
|
||||
current.language = language;
|
||||
|
||||
$("#lang").fadeIn(fadeDur).html(language);
|
||||
$("#input input").focus();
|
||||
$("#lang").fadeIn(fadeDur).html(language);
|
||||
$("#input input").focus();
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -224,157 +245,150 @@ function setLang(language) {
|
|||
var isCtrl = false;
|
||||
var isCmd = false;
|
||||
|
||||
$(document).keyup(function(e) {
|
||||
if (e.which == 17) isCtrl = false;
|
||||
if (e.which == 91) isCmd = false;
|
||||
}).keydown(function(e) {
|
||||
if (e.which == 17) isCtrl = true;
|
||||
if (e.which == 91) isCmd = true;
|
||||
$(document).keyup(function (e) {
|
||||
if (e.which == 17) isCtrl = false;
|
||||
if (e.which == 91) isCmd = false;
|
||||
}).keydown(function (e) {
|
||||
if (e.which == 17) isCtrl = true;
|
||||
if (e.which == 91) isCmd = true;
|
||||
|
||||
if (e.which == 49 && isCtrl == true) {
|
||||
/* Key "1" */
|
||||
nextEngine();
|
||||
return false;
|
||||
}
|
||||
if (e.which == 50 && isCtrl == true) {
|
||||
/* Key "2" */
|
||||
nextPlace();
|
||||
return false;
|
||||
}
|
||||
if (e.which == 51 && isCtrl == true) {
|
||||
/* Key "3" */
|
||||
nextLanguage();
|
||||
return false;
|
||||
}
|
||||
if (e.which == 49 && isCtrl == true) { /* Key "1" */
|
||||
nextEngine();
|
||||
return false;
|
||||
}
|
||||
if (e.which == 50 && isCtrl == true) { /* Key "2" */
|
||||
nextPlace();
|
||||
return false;
|
||||
}
|
||||
if (e.which == 51 && isCtrl == true) { /* Key "3" */
|
||||
nextLanguage();
|
||||
return false;
|
||||
}
|
||||
|
||||
if (e.which == 38) {
|
||||
/* Arrow Up */
|
||||
prevSugResult();
|
||||
}
|
||||
if (e.which == 40) {
|
||||
/* Arrow Down */
|
||||
nextSugResult();
|
||||
}
|
||||
if (e.which == 27) {
|
||||
/* ESC */
|
||||
closeSugBox(false);
|
||||
}
|
||||
if (e.which == 13) {
|
||||
/* Enter */
|
||||
applySugResult();
|
||||
}
|
||||
if (e.which == 38) { /* Arrow Up */
|
||||
prevSugResult();
|
||||
}
|
||||
if (e.which == 40) { /* Arrow Down */
|
||||
nextSugResult();
|
||||
}
|
||||
if (e.which == 27) { /* ESC */
|
||||
closeSugBox(false);
|
||||
}
|
||||
if (e.which == 13) { /* Enter */
|
||||
applySugResult();
|
||||
}
|
||||
});
|
||||
|
||||
function nextEngine() {
|
||||
build(findNext(eng, current.engine), true);
|
||||
build(findNext(eng, current.engine), true);
|
||||
}
|
||||
|
||||
function nextPlace() {
|
||||
var nextPlace = findNext(eng[current.engine].places, current.place);
|
||||
$("#method a").each(function() {
|
||||
if ($(this).html() == nextPlace) setPlace($(this));
|
||||
})
|
||||
var nextPlace = findNext(eng[current.engine].places, current.place);
|
||||
$("#method a").each(function () {
|
||||
if ($(this).html() == nextPlace) setPlace($(this));
|
||||
})
|
||||
}
|
||||
|
||||
function nextLanguage() {
|
||||
setLang(findNext(eng[current.engine].languages, current.language));
|
||||
setLang(findNext(eng[current.engine].languages, current.language));
|
||||
}
|
||||
|
||||
|
||||
/* SUGGESTIONS
|
||||
----------------------------------------------------- */
|
||||
|
||||
function fetchSuggestions(key) {
|
||||
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) {
|
||||
current.suggestionsTimestamp = new Date().getTime();
|
||||
function fetchSuggestions(key) {
|
||||
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) {
|
||||
current.suggestionsTimestamp = new Date().getTime();
|
||||
|
||||
var url = eng[current.engine].places[current.place][1];
|
||||
url = url.replace("%query%", encodeURIComponent($("#i").val()));
|
||||
url = url.replace("%time%", current.suggestionsTimestamp);
|
||||
if (typeof eng[current.engine].languages == "object")
|
||||
url = url.replace("%lang%", eng[current.engine].languages[current.language]);
|
||||
var url = eng[current.engine].places[current.place][1];
|
||||
url = url.replace("%query%", encodeURIComponent($("#i").val()));
|
||||
url = url.replace("%time%", current.suggestionsTimestamp);
|
||||
if (typeof eng[current.engine].languages == "object")
|
||||
url = url.replace("%lang%", eng[current.engine].languages[current.language]);
|
||||
|
||||
$.getJSON(url, function(data) {
|
||||
buildSuggestions(data);
|
||||
})
|
||||
} else closeSugBox(false);
|
||||
}
|
||||
$.getJSON(url, function (data) {
|
||||
buildSuggestions(data);
|
||||
})
|
||||
} else closeSugBox(false);
|
||||
}
|
||||
}
|
||||
|
||||
function buildSuggestions(list) {
|
||||
if (list.empty) {
|
||||
if (console) console.log("(1) Suggestions for '" + list.query + "' empty.");
|
||||
closeSugBox(false);
|
||||
} else if (
|
||||
list.engine == current.engine &&
|
||||
list.timestamp == current.suggestionsTimestamp &&
|
||||
list.query == $("#i").val()
|
||||
) {
|
||||
if (console) console.log("(2) Suggestions for '" + list.query + "' accepted.");
|
||||
if (list.empty) {
|
||||
if (console) console.log("(1) Suggestions for '" + list.query + "' empty.");
|
||||
closeSugBox(false);
|
||||
} else if (
|
||||
list.engine == current.engine &&
|
||||
list.timestamp == current.suggestionsTimestamp &&
|
||||
list.query == $("#i").val()
|
||||
) {
|
||||
if (console) console.log("(2) Suggestions for '" + list.query + "' accepted.");
|
||||
|
||||
$("#sugs").html("");
|
||||
for (sug in list.results) {
|
||||
sug = list.results[sug];
|
||||
$("#sugs").append("<li><a href='" + sug[1] + "'>" + sug[0] + "</a></li>");
|
||||
$("#sugs").html("");
|
||||
for (sug in list.results) {
|
||||
sug = list.results[sug];
|
||||
$("#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() {
|
||||
if ($("#sugs").css("display") == "none") return;
|
||||
if ($("#sugs .active").length == 0) {
|
||||
$("#sugs li:last-child").addClass("active");
|
||||
} else {
|
||||
$("#sugs .active").removeClass("active").prev().addClass("active");
|
||||
}
|
||||
backupQuery();
|
||||
if ($("#sugs").css("display") == "none") return;
|
||||
if ($("#sugs .active").length == 0) {
|
||||
$("#sugs li:last-child").addClass("active");
|
||||
} else {
|
||||
$("#sugs .active").removeClass("active").prev().addClass("active");
|
||||
}
|
||||
backupQuery();
|
||||
}
|
||||
|
||||
function nextSugResult() {
|
||||
if ($("#sugs").css("display") == "none") return;
|
||||
if ($("#sugs .active").length == 0) {
|
||||
$("#sugs li:first-child").addClass("active");
|
||||
} else {
|
||||
$("#sugs .active").removeClass("active").next().addClass("active");
|
||||
}
|
||||
backupQuery();
|
||||
if ($("#sugs").css("display") == "none") return;
|
||||
if ($("#sugs .active").length == 0) {
|
||||
$("#sugs li:first-child").addClass("active");
|
||||
} else {
|
||||
$("#sugs .active").removeClass("active").next().addClass("active");
|
||||
}
|
||||
backupQuery();
|
||||
}
|
||||
|
||||
var originalQuery = false;
|
||||
|
||||
function backupQuery() {
|
||||
if ($("#sugs .active").length > 0) {
|
||||
if (!originalQuery) originalQuery = $("#i").val();
|
||||
$("#i").val($("#sugs .active a").html());
|
||||
} else {
|
||||
$("#i").val(originalQuery);
|
||||
originalQuery = false;
|
||||
}
|
||||
if ($("#sugs .active").length > 0) {
|
||||
if (!originalQuery) originalQuery = $("#i").val();
|
||||
$("#i").val($("#sugs .active a").html());
|
||||
} else {
|
||||
$("#i").val(originalQuery);
|
||||
originalQuery = false;
|
||||
}
|
||||
}
|
||||
|
||||
function closeSugBox(src) {
|
||||
if (src == false || src == undefined || (src.id != "i" && src.id != "sugs"))
|
||||
$("#sugs").html("").css({
|
||||
"display": "none"
|
||||
});
|
||||
if (src == false || src == undefined || (src.id != "i" && src.id != "sugs"))
|
||||
$("#sugs").html("").css({
|
||||
"display": "none"
|
||||
});
|
||||
}
|
||||
|
||||
function applySugResult() {
|
||||
if ($("#sugs .active").length > 0) {
|
||||
$("#i").val($("#sugs .active a").html());
|
||||
closeSugBox(false);
|
||||
}
|
||||
if ($("#sugs .active").length > 0) {
|
||||
$("#i").val($("#sugs .active a").html());
|
||||
closeSugBox(false);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
278
style.css
278
style.css
|
|
@ -1,68 +1,106 @@
|
|||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
text-decoration: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
@-webkit-keyframes slide {
|
||||
0% {-webkit-transform: translateY(80px); opacity: 0;}
|
||||
100% {-webkit-transform: translateY(0px); opacity: 1;}
|
||||
0% {
|
||||
-webkit-transform: translateY(80px);
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
-webkit-transform: translateY(0px);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@-moz-keyframes slide {
|
||||
0% {-moz-transform: translateY(80px); opacity: 0;}
|
||||
100% {-moz-transform: translateY(0px); opacity: 1;}
|
||||
0% {
|
||||
-moz-transform: translateY(80px);
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
-moz-transform: translateY(0px);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@-ms-keyframes slide {
|
||||
0% {-ms-transform: translateY(80px); opacity: 0;}
|
||||
100% {-ms-transform: translateY(0px); opacity: 1;}
|
||||
0% {
|
||||
-ms-transform: translateY(80px);
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
-ms-transform: translateY(0px);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@-o-keyframes slide {
|
||||
0% {-o-transform: translateY(80px); opacity: 0;}
|
||||
100% {-o-transform: translateY(0px); opacity: 1;}
|
||||
0% {
|
||||
-o-transform: translateY(80px);
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
-o-transform: translateY(0px);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slide {
|
||||
0% {transform: translateY(80px); opacity: 0;}
|
||||
100% {transform: translateY(0px); opacity: 1;}
|
||||
0% {
|
||||
transform: translateY(80px);
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
transform: translateY(0px);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
placeholder {
|
||||
color: rgba(142, 219, 242, 0.5);
|
||||
color: rgba(142, 219, 242, 0.5);
|
||||
}
|
||||
|
||||
::-webkit-input-placeholder {
|
||||
color: rgba(142, 219, 242, 0.5);
|
||||
color: rgba(142, 219, 242, 0.5);
|
||||
}
|
||||
|
||||
:-moz-placeholder { /* Firefox 18- */
|
||||
color: rgba(142, 219, 242, 0.5);
|
||||
:-moz-placeholder {
|
||||
/* Firefox 18- */
|
||||
color: rgba(142, 219, 242, 0.5);
|
||||
}
|
||||
|
||||
::-moz-placeholder { /* Firefox 19+ */
|
||||
color: rgba(142, 219, 242, 0.5);
|
||||
::-moz-placeholder {
|
||||
/* Firefox 19+ */
|
||||
color: rgba(142, 219, 242, 0.5);
|
||||
}
|
||||
|
||||
:-ms-input-placeholder {
|
||||
color: rgba(142, 219, 242, 0.5);
|
||||
color: rgba(142, 219, 242, 0.5);
|
||||
}
|
||||
|
||||
body {
|
||||
-webkit-text-size-adjust: none;
|
||||
-webkit-user-select: none;
|
||||
font-size: 14px;
|
||||
background-color: #020F12;
|
||||
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEIAAABCCAYAAADjVADoAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAA3XAAAN1wFCKJt4AAAAB3RJTUUH4AgbFB4l6ZLKSQAAAFZJREFUeNrt2jENgDAABMAHASyoYMZWpTDWWxcskBAUsGGhSbkz8D/8+AkAAAAAAAAAwNim3gVqe9YkKdty9cyfbQEAAAAAAAAARvX7f8Rx3nviH/F5AaflDQJlfwozAAAAAElFTkSuQmCC');
|
||||
-webkit-text-size-adjust: none;
|
||||
-webkit-user-select: none;
|
||||
font-size: 14px;
|
||||
background-color: #020F12;
|
||||
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 {
|
||||
position: absolute;
|
||||
left: 0px;
|
||||
top: calc(50% - 83px);
|
||||
width: 100%;
|
||||
height: 144px;
|
||||
position: absolute;
|
||||
left: 0px;
|
||||
top: calc(50% - 83px);
|
||||
width: 100%;
|
||||
height: 144px;
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -70,113 +108,159 @@ body {
|
|||
----------------------------------------------------- */
|
||||
|
||||
#engines {
|
||||
width: 700px;
|
||||
height: 80px;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
bottom: calc(50% + 40px);
|
||||
margin-left: -350px;
|
||||
margin-bottom: 10%;
|
||||
-webkit-animation:slide 0.75s ease;
|
||||
moz-animation:slide 0.75s ease;
|
||||
ms-animation:slide 0.75s ease;
|
||||
o-animation:slide 0.75s ease;
|
||||
animation:slide 0.75s ease;
|
||||
width: 700px;
|
||||
height: 80px;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
bottom: calc(50% + 40px);
|
||||
margin-left: -350px;
|
||||
margin-bottom: 10%;
|
||||
-webkit-animation: slide 0.75s ease;
|
||||
moz-animation: slide 0.75s ease;
|
||||
ms-animation: slide 0.75s ease;
|
||||
o-animation: slide 0.75s ease;
|
||||
animation: slide 0.75s ease;
|
||||
}
|
||||
|
||||
#engines a {
|
||||
display: block;
|
||||
width: 225px;
|
||||
height: 80px;
|
||||
cursor: pointer;
|
||||
opacity: 0.0;
|
||||
position: absolute;
|
||||
display: block;
|
||||
width: 225px;
|
||||
height: 80px;
|
||||
cursor: pointer;
|
||||
opacity: 0.0;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
#engines a img {
|
||||
display: block;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
display: block;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* SEARCH BOX
|
||||
----------------------------------------------------- */
|
||||
|
||||
#input input {
|
||||
font-size: 140px;
|
||||
font-family: 'Roboto', sans-serif;
|
||||
font-weight: 100;
|
||||
text-align: center;
|
||||
background: #020E12;
|
||||
width: 100%;
|
||||
outline: 0;
|
||||
color: #8EDBF2;
|
||||
border: 0px;
|
||||
font-size: 140px;
|
||||
font-family: 'Roboto', sans-serif;
|
||||
font-weight: 100;
|
||||
text-align: center;
|
||||
background: rgba(10, 10, 10, 0.3);
|
||||
width: 100%;
|
||||
outline: 0;
|
||||
color: #8EDBF2;
|
||||
border: 0px;
|
||||
}
|
||||
|
||||
#lang {
|
||||
position: absolute;
|
||||
right: 49px;
|
||||
top: 39px;
|
||||
font-size: 13px;
|
||||
font-weight: bold;
|
||||
padding: 3px 5px;
|
||||
-webkit-border-radius: 3px;
|
||||
-moz-border-radius: 3px;
|
||||
color: #b7c2cf;
|
||||
cursor: pointer;
|
||||
position: absolute;
|
||||
right: 49px;
|
||||
top: 39px;
|
||||
font-size: 13px;
|
||||
+padding: 3px 5px;
|
||||
-webkit-border-radius: 3px;
|
||||
-moz-border-radius: 3px;
|
||||
color: #b7c2cf;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#lang:hover {
|
||||
background: #b7c2cf;
|
||||
color: white;
|
||||
background: #b7c2cf;
|
||||
color: white;
|
||||
}
|
||||
|
||||
#lang:active {
|
||||
background: #939fad;
|
||||
background: #939fad;
|
||||
}
|
||||
|
||||
#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
|
||||
----------------------------------------------------- */
|
||||
|
||||
#sugs {
|
||||
display: none;
|
||||
position: absolute;
|
||||
background: rgba(255,255,255,0.8);
|
||||
border: 1px solid #dae2e9;
|
||||
border-top: 0;
|
||||
left: 41px;
|
||||
top: 68px;
|
||||
right: 41px;
|
||||
list-style: none;
|
||||
padding: 3px 0;
|
||||
font-size: 11px;
|
||||
-webkit-border-bottom-left-radius: 5px;
|
||||
-webkit-border-bottom-right-radius: 5px;
|
||||
-moz-border-radius-bottomleft: 5px;
|
||||
-moz-border-radius-bottomright: 5px;
|
||||
display: none;
|
||||
position: absolute;
|
||||
background: rgba(255, 255, 255, 0.8);
|
||||
border: 1px solid #dae2e9;
|
||||
border-top: 0;
|
||||
left: 41px;
|
||||
top: 68px;
|
||||
right: 41px;
|
||||
list-style: none;
|
||||
padding: 3px 0;
|
||||
font-size: 11px;
|
||||
-webkit-border-bottom-left-radius: 5px;
|
||||
-webkit-border-bottom-right-radius: 5px;
|
||||
-moz-border-radius-bottomleft: 5px;
|
||||
-moz-border-radius-bottomright: 5px;
|
||||
}
|
||||
|
||||
#sugs li a {
|
||||
display: block;
|
||||
padding: 3px 8px;
|
||||
color: #74889e;
|
||||
display: block;
|
||||
padding: 3px 8px;
|
||||
color: #74889e;
|
||||
}
|
||||
|
||||
#sugs li.active a {
|
||||
background: #b7c2cf;
|
||||
color: white;
|
||||
background: #b7c2cf;
|
||||
color: white;
|
||||
}
|
||||
|
||||
#sugs li a:active {
|
||||
background: #939fad;
|
||||
background: #939fad;
|
||||
}
|
||||
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 342 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 401 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 395 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 157 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 279 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 610 KiB |
Loading…
Reference in New Issue