updated to newer local version

newer version i made some time ago featuring changing backgrounds
2025-11-03 23:21:31 +00:00 · 2019-08-31 02:07:00 +02:00
parent 69876e43ef
commit a1557470de
18 changed files with 12241 additions and 553 deletions
--- a/font-awesome.css
+++ b/font-awesome.css
--- a/fonts/FontAwesome.otf
+++ b/fonts/FontAwesome.otf
--- a/fonts/fontawesome-webfont.eot
+++ b/fonts/fontawesome-webfont.eot
--- a/fonts/fontawesome-webfont.svg
+++ b/fonts/fontawesome-webfont.svg
--- a/fonts/fontawesome-webfont.ttf
+++ b/fonts/fontawesome-webfont.ttf
--- a/fonts/fontawesome-webfont.woff
+++ b/fonts/fontawesome-webfont.woff
--- a/fonts/fontawesome-webfont.woff2
+++ b/fonts/fontawesome-webfont.woff2
--- a/index.html
+++ b/index.html
@@ -1 +1,34 @@
-<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'><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>  </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></body>
+<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'>
+    <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="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>
--- a/scripts/jquery-1.4.2.min.js
+++ b/scripts/jquery-1.4.2.min.js
--- a/scripts/jquery.js
+++ b/scripts/jquery.js
--- a/scripts/scripts.js
+++ b/scripts/scripts.js
@@ -1,30 +1,53 @@
+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 ",

    idxWidth = 700,
-	idxLogoFull  = [225,80],
-	idxLogoSmall = [157,56],
+    idxLogoFull = [225, 80],
+    idxLogoSmall = [157, 56],
    idxMargin = 24,
    idxFadedOpacity = 0.3,

    idxHeight = 0;


-$(function()
-{
+$(function () {
    // Create Engine Index

    indexCreate();

    // 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(){
+    $("#toggleInfo").click(function () {
        $("#infoBox").toggle(400);
    });

@@ -33,8 +56,7 @@ $(function()
    build(firstProp(eng), false);
 });

-function doSearch()
-{
+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")
@@ -48,16 +70,14 @@ function doSearch()
 /*	ENGINE INDEX
 	-----------------------------------------------------  */

-function indexCreate()
-{
+function indexCreate() {
    var row = 0,
        i = 0, // Reset every row
        j = 0, // Total
        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
        // And the number of engines left to draw is <= items in the final row
        if (
@@ -65,38 +85,47 @@ function indexCreate()
            (numKeys(eng) - j) <= (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>");
+        $("#engines").prepend("<a id='" + e + "_logo' ref='" + e + "'><img src='engines/" + eng[e].logo + "'></a>");

-		if (i == cols) { i=0; row++; };
+        if (i == cols) {
+            i = 0;
+            row++;
+        };
        eng[e].idxPos = [
-			(idxLogoSmall[0]+idxMargin)*i - idxWidth/2 + offset,
-			(idxLogoSmall[1]+idxMargin)*row
+            (idxLogoSmall[0] + idxMargin) * i - idxWidth / 2 + offset,
+            (idxLogoSmall[1] + idxMargin) * row
 		];
-		i++; j++;
+        i++;
+        j++;
    }
-	idxHeight = (row+1)*(idxLogoSmall[1]+idxMargin)-idxMargin;
+    idxHeight = (row + 1) * (idxLogoSmall[1] + idxMargin) - idxMargin;
    idxHeight = Math.max(idxHeight, idxLogoFull[1]);

-	$("#engines a").click(function(){ build($(this).attr("ref"), true); })
+    $("#engines a").click(function () {
+        build($(this).attr("ref"), true);
+    })

    $("#engines a").css({
        "left": "50%",
        "bottom": "0",
-		"marginLeft": -idxLogoFull[0]/2+"px"
+        "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;

-function indexOpen()
-{
+function indexOpen() {
    idxState = true;
    clearTimeout(idxClear);

@@ -104,12 +133,11 @@ function indexOpen()
        "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",
+    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],
@@ -117,19 +145,17 @@ function indexOpen()
    }
 }

-function indexClose()
-{
+function indexClose() {
    idxState = false;

    $("#engines").css({
        "height": idxLogoFull[1]
    });

-	$("#engines a").each(function()
-	{
+    $("#engines a").each(function () {
        var op = $(this).hasClass("active");
-		$(this).stop().queue("fx",[]).animate({
-			"marginLeft": -idxLogoFull[0]/2+"px",
+        $(this).stop().queue("fx", []).animate({
+            "marginLeft": -idxLogoFull[0] / 2 + "px",
            "marginBottom": 0,
            "opacity": (op) ? 1 : 0,
            "width": idxLogoFull[0],
@@ -138,7 +164,9 @@ function indexClose()
    });

    // Because jQuery doesn't like me
-	idxClear = setTimeout(function(){ $("#engines a:not(.active)").css("opacity",0) }, fadeDur);
+    idxClear = setTimeout(function () {
+        $("#engines a:not(.active)").css("opacity", 0)
+    }, fadeDur);
 }


@@ -146,63 +174,64 @@ function indexClose()
 /*	GENERATING THE SEARCH ENGINE PAGE
 	-----------------------------------------------------  */

-function build(e, animate) 
-{
+function build(e, animate) {
    var methodFade = (animate) ? fadeDur : 0;

    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);
+    $("#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);
+    $("#i").attr("autosave", "com.infinise.go." + current.engine);
    $("#input input").focus();

-	setTimeout(function()
-	{
+    setTimeout(function () {
        $("#method").html("");
-		for (place in e.places) $("#method").append("<a onclick='setPlace(this)'>"+place+"</a>");
+        for (place in e.places) $("#method").append("<a onclick='setPlace(this)'>" + place + "</a>");

        setPlace("#method a:first");

-		$("#method").animate({"opacity": 1}, fadeDur);
+        $("#method").animate({
+            "opacity": 1
+        }, fadeDur);
    }, methodFade);
 }

-function setPlace(place) 
-{
+function setPlace(place) {
    current.place = $(place).html();

    $("#method a").removeClass("active");
    $(place).addClass("active");
    $("#input input").focus();

-	if (eng[current.engine].places[current.place][1] !== false)
-	{
+    if (eng[current.engine].places[current.place][1] !== false) {
        fetchSuggestions();
        $("#i").attr("autocomplete", "off");
-	} 
-	else 
-	{
+    } else {
        closeSugBox(false);
        $("#i").attr("autocomplete", "on");
    }
 }

-function setLang(language) 
-{
+function setLang(language) {
    current.language = language;

    $("#lang").fadeIn(fadeDur).html(language);
@@ -216,42 +245,52 @@ 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() 
-{
+function nextEngine() {
    build(findNext(eng, current.engine), true);
 }

-function nextPlace() 
-{
+function nextPlace() {
    var nextPlace = findNext(eng[current.engine].places, current.place);
-	$("#method a").each(function()
-	{
+    $("#method a").each(function () {
        if ($(this).html() == nextPlace) setPlace($(this));
    })
 }

-function nextLanguage() 
-{
+function nextLanguage() {
    setLang(findNext(eng[current.engine].languages, current.language));
 }

@@ -259,12 +298,9 @@ function nextLanguage()
 /*	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 ) 
-		{
+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];
@@ -273,52 +309,45 @@ function fetchSuggestions(key)
            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.");
+function buildSuggestions(list) {
+    if (list.empty) {
+        if (console) console.log("(1) Suggestions for '" + list.query + "' empty.");
        closeSugBox(false);
-	}
-	else if (
+    } 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 (console) console.log("(2) Suggestions for '" + list.query + "' accepted.");

        $("#sugs").html("");
-		for (sug in list.results)
-		{
+        for (sug in list.results) {
            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").css({
+            "display": "block"
+        });
+        $("#sugs li").mousemove(function () {
            $("#sugs .active").removeClass("active");
            $(this).addClass("active");
-		}
-		).click(function() 
-		{
+        }).click(function () {
            applySugResult();
        });
-	} 
-	else 
-	{
-		if(console)console.log("(3) Suggestions for '"+list.query+"' discarded.");
+    } else {
+        if (console) console.log("(3) Suggestions for '" + list.query + "' discarded.");
    }
 }

-function prevSugResult() 
-{
+function prevSugResult() {
    if ($("#sugs").css("display") == "none") return;
    if ($("#sugs .active").length == 0) {
        $("#sugs li:last-child").addClass("active");
@@ -328,8 +357,7 @@ function prevSugResult()
    backupQuery();
 }

-function nextSugResult() 
-{
+function nextSugResult() {
    if ($("#sugs").css("display") == "none") return;
    if ($("#sugs .active").length == 0) {
        $("#sugs li:first-child").addClass("active");
@@ -341,8 +369,7 @@ function nextSugResult()

 var originalQuery = false;

-function backupQuery() 
-{
+function backupQuery() {
    if ($("#sugs .active").length > 0) {
        if (!originalQuery) originalQuery = $("#i").val();
        $("#i").val($("#sugs .active a").html());
@@ -352,23 +379,16 @@ function backupQuery()
    }
 }

-function closeSugBox(src) 
-{
+function closeSugBox(src) {
    if (src == false || src == undefined || (src.id != "i" && src.id != "sugs"))
-		$("#sugs").html("").css({"display": "none"});
+        $("#sugs").html("").css({
+            "display": "none"
+        });
 }

-function applySugResult() 
-{
+function applySugResult() {
    if ($("#sugs .active").length > 0) {
        $("#i").val($("#sugs .active a").html());
        closeSugBox(false);
    }
 }
-
-
-
-
-
-
-
--- a/style.css
+++ b/style.css
@@ -5,28 +5,58 @@
 }

@-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 {
@@ -37,11 +67,13 @@ placeholder {
    color: rgba(142, 219, 242, 0.5);
 }

-:-moz-placeholder { /* Firefox 18- */
+:-moz-placeholder {
+    /* Firefox 18- */
    color: rgba(142, 219, 242, 0.5);
 }

-::-moz-placeholder {  /* Firefox 19+ */
+::-moz-placeholder {
+    /* Firefox 19+ */
    color: rgba(142, 219, 242, 0.5);
 }

@@ -56,6 +88,12 @@ body {
    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;
@@ -77,11 +115,11 @@ body {
    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;
+    -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 {
@@ -100,7 +138,6 @@ body {
 }


-
 /* 	SEARCH BOX
 	----------------------------------------------------- */

@@ -109,7 +146,7 @@ body {
    font-family: 'Roboto', sans-serif;
    font-weight: 100;
    text-align: center;
-	background: #020E12;
+    background: rgba(10, 10, 10, 0.3);
    width: 100%;
    outline: 0;
    color: #8EDBF2;
@@ -121,8 +158,7 @@ body {
    right: 49px;
    top: 39px;
    font-size: 13px;
-	font-weight: bold;
-	padding: 3px 5px;
+    +padding: 3px 5px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    color: #b7c2cf;
@@ -143,6 +179,55 @@ body {
 }


+/* 	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
 	----------------------------------------------------- */
@@ -150,7 +235,7 @@ body {
 #sugs {
    display: none;
    position: absolute;
-	background: rgba(255,255,255,0.8);
+    background: rgba(255, 255, 255, 0.8);
    border: 1px solid #dae2e9;
    border-top: 0;
    left: 41px;
@@ -179,4 +264,3 @@ body {
 #sugs li a:active {
    background: #939fad;
 }
-
--- a/wallpaper/1.jpg
+++ b/wallpaper/1.jpg
--- a/wallpaper/2.jpg
+++ b/wallpaper/2.jpg
--- a/wallpaper/3.jpg
+++ b/wallpaper/3.jpg
--- a/wallpaper/4.jpg
+++ b/wallpaper/4.jpg
--- a/wallpaper/5.jpg
+++ b/wallpaper/5.jpg
--- a/wallpaper/6.jpg
+++ b/wallpaper/6.jpg