~firefox
12 itemsDownload ./*


..
stylish
hidecaption.ahk
homepage-centered-iframe.html
homepage-centered-slideshow.html
homepage-masonry.html
homepage-panels.html
homepage-sidebar.html
homepage-slide3d.html
mailorder.html
remoteButter.html
slideshow.html
template.html


firefoxhomepage-centered-slideshow.html
2 years agoDownloadRawClose


<!DOCTYPE html>
<!--

    Author:        Twily                                        2015
    Website:       http://twily.info/
    Compatibility: Mozilla Firefox, Google Chrome
                   (For the slideshow to work this file cannot be run from a web server)

    Search Usage:  "artist!i" will find images for "artist"

-->
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<title>New Tab</title>

<style type="text/css">
/*
    >> Search and Replace to change color scheme

    * (If you make two or more the same value you will need to
       manually separate the colors in the code later to undo) 

    #17181A - Background        #D54A56 - Color Mnu1
    #27282B - Content BG        #84BD3F - Color Mnu2
    #AAABAD - Content FG        #D753A4 - Color Mnu3
    #CECFD1 - C FG Light        #6F67E6 - Color Mnu4
    #111113 - L FG Hover

    Transition: "transition: .2s ease-out"
    Menu Width: "width: 200px"
    Margin Top: "margin-top: -75px"
    Border Rad: "border-radius: 1px"
*/

html,body {
    margin: 0; padding: 0; overflow: hidden;
    width: 100%; height: 100%;
    font-family: "Droid Sans", "Liberation Sans", "DejaVu Sans", "Segoe UI", Sans; font-size: 10pt;
    background: #17181A;
}
*:focus  { outline: none; }
ul, li   { list-style-type: none; margin: 0; padding: 0; }
textarea { background: transparent; color: #CECFD1; }

a, a:link, a:visited { color: #CECFD1; text-decoration: none; transition: .2s ease-out; }
a:hover, a:active    { color: #111113; }

.slideshow {
    position: absolute; top: 0; left: 0;
    width: 100%; height: 100%; z-index: 1;
    background: #000 no-repeat center center; background-size: cover;           /* cover || contain */
    opacity: 0; transition: opacity 3s ease;                                    /* Image crossfade time */
}

#center { position: relative; width: 100%; height: 100%; }
#center #content {
    margin: 0; overflow: visible; width: 100%; height: auto;
    position: absolute; top: 50%; transform: translate(0,-50%);
    text-align: center; opacity: 1; z-index: 10; background: #17181A; /* #17181A || transparent */
}

#q {
    width: calc((200px * 4) - (8px * 2));
    background: #27282B; color: #CECFD1;
    border: 0; border-radius: 1px;
    font-family: "Droid Sans", "Liberation Sans", "DejaVu Sans", "Segoe UI", Sans; font-size: 12pt;
    padding: 4px 8px; height: 24px;
}

#more {
    background: transparent; color: #AAABAD; display: block; 
    text-align: center; margin: 0 auto; width: 32px; height: 32px;
    font-weight: bold; cursor: default;
}
    #plus {
        border: 0; border-radius: 1px 1px 0 0; width: 32px; height: 32px; font-size: 12pt;
        background: transparent; color: #CECFD1; font-weight: bold; cursor: pointer;
        transition: .2s ease-out;
    }
    #help {
        display: block; visibility: hidden; width: 320px; cursor: default;
        position: absolute; left: 0; right: 0; margin: auto;
        font-family: "PragmataPro", "Droid Sans Mono", "Liberation Sans Mono", "DejaVu Sans Mono", "Consolas", "Lucida Console", monospace;
        padding: 8px; text-align: left; border-radius: 1px; opacity: 0;
        background: #27282B; color: #AAABAD; transition: .2s ease-out;
    }
    #more:hover #plus { background: #27282B; }
    #more:hover #help { visibility: visible; opacity: 1; }
        #note { width: 100%; height: 100px; resize: none; border: 0; outline: 0; }

#menu {
    width: 100%; height: 32px; margin: 0 auto;
    background: transparent; color: #AAABAD; cursor: default;
}
    #mnu                   { height: 32px; line-height: 32px; width: calc((200px * 4) + 1px); }

    #menu ul               { display: inline-table; position: relative; list-style: none; }
    #menu label            { padding: 0; display: inline-block; font-weight: bold; width: 200px; /* menu width */ }

    #menu ul li            { float: left; border-radius: 0 0 1px 1px; height: 32px; text-align: center; transition: .2s ease-out; }
    #menu ul li:hover      { background: #27282B; color: #cecfd1;  }
    #menu ul li a          { display: block; white-space: nowrap; padding: 0 10px; }

    #menu ul ul {
        display: flex; flex-flow: column wrap; /* column | row(-reverse) */ align-content: flex-start;
        visibility: hidden; opacity: 0; width: calc(200px * 4); /* cols */ height: calc(32px * 3); /* rows */
        position: absolute; bottom: 100%; left: 0; z-index: 11;
        background: #27282B; border-radius: 1px; transition: .2s ease-out;
    }
    #menu ul li:hover > ul { bottom: 100%; visibility: visible; opacity: 1; z-index: 12; height: calc(32px * 3); /* rows */ }
    #menu ul ul li { background: #27282B; border-radius: 1px; height: 32px; text-align: left; width: 200px; /* menu width */ }

    /* Menu Colors */
    #menu ul #mnu_1 li:hover { background: #D54A56; }
    #menu ul #mnu_2 li:hover { background: #84BD3F; }
    #menu ul #mnu_3 li:hover { background: #D753A4; }
    #menu ul #mnu_4 li:hover { background: #6F67E6; }

    #menu img { position: relative; top: 3px; left: -3px; width: 16px; height: 16px; visibility: hidden; }
</style>
<script type="text/javascript" language="javascript">
var $=function(id) { return document.getElementById(id); };

var help="<ul> \
    <li><b>!g</b> = Search Google (Default)</li> \
    <li><b>!i</b> = Search Google Images</li> \
    <li><b>!m</b> = Search IMDb</li> \
    <li><b>!u</b> = Search Urban Dictionary</li> \
    <li><b>!w</b> = Search Wikipedia</li> \
    <li><b>!y</b> = Search YouTube</li> \
</ul>";

var search=[ // Search engines
    ["",    "https://www.google.no/#q="],                           // Google (Default)
    ["!g",  "https://www.google.no/#q="],                           // Google
    ["!i",  "https://www.google.no/search?tbm=isch&q="],            // Google Images
    ["!m",  "http://www.imdb.com/find?q="],                         // IMDb
    ["!u",  "http://www.urbandictionary.com/define.php?term="],     // Urban Dictionary
    ["!w",  "http://en.wikipedia.org/w/index.php?search="],         // Wikipedia
    ["!y",  "https://www.youtube.com/results?search_query="],       // YouTube
];

var menu=[ // Menu titles
    "News",                                                         // mnu_1
    "4chan",                                                        // mnu_2
    "Entertainment",                                                // mnu_3
    "Other",                                                        // mnu_4
];

var showFavicon = true;                                             // Enable/Disable Link Favicons (img)

// Link setup (separate with ["", "", ""],)
// Format: ["Name", "URL", "Custom Favicon"],
var links=[
    // News -           mnu_1
    ["Arch Linux",                      "http://archlinux.org",                 ""],
    ["Dagbladet",                       "http://dagbladet.no",                  ""],
    ["Gamer",                           "http://gamer.no",                      ""],
    ["Hardware",                        "http://hardware.no",                   ""],
    ["IGN",                             "http://ign.com",                       ""],
    ["IT-Avisen",                       "http://itavisen.no",                   "http://www.itavisen.no/sites/itavisen.no/files/favicon.ico"],
    ["NRK",                             "http://nrk.no",                        ""],
    ["OA",                              "http://oa.no",                         ""],
    ["PressFire",                       "http://pressfire.no",                  "http://www.pressfire.no/gfx/icons/application/favico.ico"],
    ["Teknofil",                        "http://teknofil.no",                   ""],
    ["TorrentFreak",                    "http://torrentfreak.com",              ""],
    ["VG",                              "http://vg.no",                         ""],

    ["", "", ""],

    // 4chan -          mnu_2
    ["/b/ - Random",                    "https://boards.4chan.org/b/catalog",   ""],
    ["/e/ - Ecchi",                     "https://boards.4chan.org/e/catalog",   ""],
    ["/f/ - Flash",                     "https://boards.4chan.org/f/",          ""],
    ["/g/ - Technology",                "https://boards.4chan.org/g/catalog",   "http://s.4cdn.org/image/favicon-ws.ico"],
    ["/gif/ - Adult GIF",               "https://boards.4chan.org/gif/catalog", ""],
    ["/h/ - Hentai",                    "https://boards.4chan.org/h/catalog",   ""],
    ["/mlp/ - Pony",                    "https://boards.4chan.org/mlp/catalog", "http://s.4cdn.org/image/favicon-ws.ico"],
    ["/mu/ - Music",                    "https://boards.4chan.org/mu/catalog",  "http://s.4cdn.org/image/favicon-ws.ico"],
    ["/pol/ - Politically Incorrect",   "https://boards.4chan.org/pol/catalog", ""],
    ["/wg/ - Wallpaper General",        "https://boards.4chan.org/wg/catalog",  ""],
    ["/wsg/ - Worksafe GIF",            "https://boards.4chan.org/wsg/catalog", "http://s.4cdn.org/image/favicon-ws.ico"],
    ["/x/ - Paranormal",                "https://boards.4chan.org/x/catalog",   "http://s.4cdn.org/image/favicon-ws.ico"],

    ["", "", ""],

    // Entertainment -  mnu_3
    ["Derpibooru",                      "https://derpibooru.org/",              ""],
    ["DeviantArt",                      "http://deviantart.com/",               ""],
    ["I Am Bored",                      "http://www.i-am-bored.com/",           ""],
    ["Imgur",                           "https://imgur.com/",                   ""],
    ["MetArt",                          "http://members.met-art.com/members/",  ""],
    ["Netflix",                         "http://netflix.com",                   ""],
    ["/pone/",                          "https://8chan.co/pone/catalog.html",   ""],
    ["Reddit",                          "http://reddit.com",                    ""],
    ["StumbleUpon",                     "http://stumbleupon.com",               "https://nb9-stumbleupon.netdna-ssl.com/-G-ChSR8MQAl3Skvq8oNZg"],
    ["Your World of Text",              "http://www.yourworldoftext.com/",      ""],
    ["YouTube",                         "http://youtube.com",                   ""],
    ["xHamster",                        "http://xhamster.com/",                 ""],

    ["", "", ""],

    // Other -          mnu_4
    ["Altinn",                          "https://www.altinn.no/",               ""],
    ["CockMail",                        "https://mail.cock.li",                 "https://mail.cock.li/skins/larry/images/favicon.ico"],
    ["DnB",                             "http://www.dnb.no/en/",                ""],
    ["Dropbox",                         "https://www.dropbox.com",              "https://cf.dropboxstatic.com/static/images/favicon-vflk5FiAC.ico"],
    ["Facebook",                        "http://facebook.com",                  ""],
    ["Outlook",                         "http://outlook.com",                   ""],
    ["Pastebin",                        "http://pastebin.com/u/Twilypastes",    ""],
    ["PayPal",                          "http://www.paypal.com/",               ""],
    ["MaxFile",                         "http://maxfile.ro",                    ""],
    ["Userstyles",                      "http://userstyles.org/",               ""],
    ["Wallgig",                         "http://wallgig.net",                   ""],
    ["Wallhaven",                       "http://alpha.wallhaven.cc",            ""],
];

// Command to generate imagelist (GNU/Linux) [Requires find, sed and vim]
// $ function list() { echo "var filepath=\"file://"$(pwd)"/\";" && find "$1" -maxdepth 1 -type f -regex ".*\.\(jpg\|jpeg\|png\)" -exec echo "    "\"{}\", \; | sed "s/%/%25/g" | sed "s/\.\///g" | vim -; }; list .
// 
// If filenames (or the path) contain '%' they will need to be replaced by '%25' (Eg.: ..%25.. to ..%2525..)
// (The command above does this automatically using sed)
var imagelist=[
    "wallhaven-110491.jpg",
    "wallhaven-123187.jpg",
    "wallhaven-134400.jpg",
    "wallhaven-137115.jpg",
    "wallhaven-149753.jpg",
    "wallhaven-20260.jpg",
    "wallhaven-26620.jpg",
    "wallhaven-31652.jpg",
    "wallhaven-50083.jpg",
    "wallhaven-51234.jpg",
    "wallhaven-54308.jpg",
    "wallhaven-6463.jpg",
    "wallhaven-65157.jpg",
    "wallhaven-6688.jpg",
    "wallhaven-69760.jpg",
    "wallhaven-72147.jpg",
    "wallhaven-82896.jpg",
    "wallhaven-8489.jpg",
    "wallhaven-86566.jpg",
];

var wTimer=5;                                                                   // Seconds before next image
var wOpacity=25;                                                                // 0 (Transparent) - 100 (Opaque)
var filepath="file:///home/guest/Pictures/Wallpapers/wallhaven/";               // Path to find images (filepath+imagelist[x])

var i,ss="";
function init() {
    for(i=0;i<search.length;i++) if(search[i][0]=="") ss=search[i][1];
    if(ss=="") alert("Error: Missing default search engine!");

    $('help').innerHTML=help;
    if(localStorage.getItem('note')!=null) if(localStorage.getItem('note').length!=0) toggleNote();
    build();

    nextImage();                                                                // Show first image
    if(imagelist.length>1) setInterval("nextImage();",wTimer*1000);             // Run the slideshow
    $('q').value="";
    $('q').focus();
}

var wshow="img1",whide="img2",newimg,curimg;
function nextImage() {
    curimg=newimg;
    while(newimg==curimg) newimg=Math.floor(Math.random()*imagelist.length);    // Generate next random image
    (new Image()).src=filepath+imagelist[newimg];                               // Preload next image

    whide=[wshow,wshow=whide][0];                                               // Swap values
    $(wshow).style.backgroundImage="url('"+filepath+imagelist[curimg]+"')";     // Show current image
    $(wshow).style.opacity=wOpacity/100;
    $(whide).style.opacity=0;

    if(curimg==null) nextImage();                                               // Buffer one image ahead
}

function build() { // Build menu
    $('mnu').innerHTML="";

    for(i=0;i<menu.length;i++) { // Menu titles
        $('mnu').innerHTML+="<li><label>"+menu[i]+"</label>\n<ul id=\"mnu_"+(i+1)+"\"></ul></li>";
    }

    var m=1,skip=false;
    for(i=0;i<links.length;i++) { // Menu links
        if(links[i][0]=="" && links[i][1]=="") skip=true;

        if(!skip) {
            var printimg="";

            if(showFavicon) {
                var favicon;
                if(links[i][2]!="") favicon=links[i][2];
                else                favicon=getFavicon(links[i][1]);

                printimg="<img id=\"img_"+i+"\" src=\""+favicon+"\""+" onload=\"javascript:this.style.visibility='inherit';\" /> ";
            }

            $('mnu_'+m).innerHTML+="<li><a href=\""+links[i][1]+"\" target=\"_self\">"+printimg+links[i][0]+"</a></li>";
        } else {
            skip=false; m++;
        }
    }
}

/*
    Optional patch for using "!i" before the search query: http://pastebin.com/Lw24tQ81
*/
function handleQuery(e,q) { // Handle search query
    var key=e.keyCode || e.which;

    if(key==13) { // Enter
        var x=q.lastIndexOf("!");

        if(x!=-1 && x>=q.length-2) {
            for(i=0;i<search.length;i++) {
                if(search[i][0]==q.substr(x)) { // Find "*!i"
                    window.location=search[i][1]+q.substr(0,x).replace(/&/g,"%26");
                    return true;
                }
            }
            // Invalid "!i", use default
            window.location=ss+q.substr(0,x).replace(/&/g,"%26");
        } else {
            // "!i" where not specified, use default
            window.location=ss+q.replace(/&/g,"%26");
        }
    }
}

function getFavicon(url) {
    var l=document.createElement("a");
    l.href=url;

    return l.protocol+"//"+l.hostname+"/favicon.ico";
}

function toggleNote() {
    if($('note')==null) {
        $('help').innerHTML="<textarea id='note' spellcheck='false' placeholder='Store temporary note...'></textarea>";
        if(localStorage.getItem('note')!=null) $('note').value=localStorage.getItem('note');
        $('note').addEventListener('change',function() { localStorage.setItem('note',$('note').value); });
        $('plus').value="-";
        $('note').focus();
    } else {
        $('help').innerHTML=help;
        $('plus').value="+";
        $('q').focus();
    }
}
</script>
</head>
<body onload="javascript:init();">

<div id="img1" class="slideshow"></div>
<div id="img2" class="slideshow"></div>

<div id="center">
    <div id="content">
        <div id="menu">
            <ul id="mnu"></ul>
        </div>
        <br />
        <input type="text" id="q" value="" placeholder="Search..." onkeypress="javascript:handleQuery(event,this.value);" onfocus="this.value=this.value" />
        <br /><br />
        <div id="more">
            <input type="button" id="plus" value="+" onclick="javascript:toggleNote();" />
            <br />
            <div id="help"></div>
        </div>
    </div>
</div>

</body>
</html>


Top
twily at openmailbox dot org
©twily.info 2013 - 2017



744 937 visits
... ^ v