API tools faq
paste
Guest User

startpage may 2016

a guest
May 4th, 2016
194
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 9.79 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4.     <link href='http://fonts.googleapis.com/css?family=Roboto:400,100' rel='stylesheet' type='text/css'/>
  5.     <link href='https://fonts.googleapis.com/css?family=Roboto+Mono' rel='stylesheet' type='text/css'>
  6.     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
  7.     <link href="style.css" rel="stylesheet"/>
  8.     <title>New Tab</title>
  9. </head>
  10. <body>
  11. <script>
  12. $(window).bind('keydown', function(event) {
  13.     if (event.ctrlKey || event.metaKey) {
  14.         switch (String.fromCharCode(event.which).toLowerCase()) {
  15.         case 'r':
  16.             event.preventDefault();
  17.             window.location = "../writer/index.html"
  18.             break;
  19.         }
  20.     }
  21. });
  22. </script>
  23.  
  24. <style>
  25. html, body, div, span {
  26.     margin: 0;
  27.     padding: 0;
  28.     border: 0;
  29. }
  30.  
  31. body {
  32.     background-color: #fafafa;
  33.     font-family: "Roboto", sans-serif;
  34.     background-image: url("bg.png");
  35. }
  36.  
  37. #searchbar-container {
  38.     width: 100%;
  39.     height: 5vh;
  40.     margin-top: 2vh;
  41.  
  42.     /*
  43.     -webkit-box-shadow: 0px 4px 5px 0px rgba(0,0,0,0.25);
  44.     -moz-box-shadow: 0px 4px 5px 0px rgba(0,0,0,0.25);
  45.     box-shadow: 0px 4px 5px 0px rgba(0,0,0,0.25);
  46.     */
  47.     text-align: center;
  48.     cursor: text;
  49. }
  50.  
  51. #searchbar {
  52.     /* a lot of the weird stuff here is for centering */
  53.     border: none;
  54.  
  55.     margin-left: auto;
  56.     margin-right: auto;
  57.     height: 4vh;
  58.     min-height: 50px;
  59.     position: relative;
  60.     top: 50%;
  61.     transform: translateX(-50%);
  62.     transform: translateY(-50%);
  63.  
  64.     font-size: 18pt;
  65.     color: rgba(70, 80, 95, 1);
  66.  
  67.     color: mediumseagreen;
  68.     border-bottom: 2px solid mediumseagreen;
  69.     opacity: 0.5;
  70.  
  71.     background-color: rgba(0, 0, 0, 0);
  72.     -webkit-transition: width .1s ease;
  73.     width: 0px;
  74.     opacity: 0;
  75. }
  76.  
  77. ::selection {
  78.     color: white;
  79.     background-color: mediumseagreen;
  80. }
  81.  
  82. #searchbar:focus {
  83.     width: 30vw;
  84.     outline: none;
  85.     opacity: 1;
  86. }
  87.  
  88. #searchbar:hover {
  89.     opacity: 1;
  90. }
  91.  
  92. #searchbar::-webkit-search-cancel-button{
  93.     display:none;
  94. }
  95.  
  96. ::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  97.   opacity: .25;
  98. }
  99. ::-moz-placeholder { /* Firefox 19+ */
  100.   opacity: .25;
  101. }
  102. :-ms-input-placeholder { /* IE 10+ */
  103.   opacity: .25;
  104. }
  105. :-moz-placeholder { /* Firefox 18- */
  106.   opacity: .25;
  107. }
  108.  
  109. #stripe {
  110.     margin-top: 100px;
  111.     text-align: center;
  112. }
  113.  
  114. #clock {
  115.     color: rgb(50, 60, 75);
  116.     font-weight: 400;
  117.     font-size: 40pt;
  118.     display: inline;
  119.     text-align: center;
  120.     padding: 20px 40px 40px 40px;
  121.     transition: width .1s ease;
  122.     -webkit-transition: width .1s ease;
  123. }
  124.  
  125. #date {
  126.     color: rgba(50, 60, 75, 1);
  127.     font-weight: 400;
  128.     font-size: 12pt;
  129.  
  130. }
  131.  
  132. .card {
  133.     padding: 20px;
  134.     /*background-color: white;
  135.     -webkit-box-shadow: 0px 1px 4px 0px rgba(0,0,0,0.20);
  136.     -moz-box-shadow: 0px 1px 4px 0px rgba(0,0,0,0.20);
  137.     box-shadow: 0px 1px 4px 0px rgba(0,0,0,0.20);*/
  138. }
  139.  
  140. .cardcolumn {
  141.     width: 150px;
  142.     padding: 20px;
  143.     margin: 0px 20px;
  144.     /*background-color: white;
  145.     -webkit-box-shadow: 0px 1px 4px 0px rgba(0,0,0,0.20);
  146.     -moz-box-shadow: 0px 1px 4px 0px rgba(0,0,0,0.20);
  147.     box-shadow: 0px 1px 4px 0px rgba(0,0,0,0.20);*/
  148.     text-align: center;
  149.     float: left;
  150.     transition: box-shadow .1s ease;
  151. }
  152.  
  153. .cardcolumn:hover {
  154.     /*border-bottom: 3px solid mediumseagreen;*/
  155.     /*-webkit-box-shadow: 0px 1px 7px 0px rgba(0,0,0,0.20);
  156.     -moz-box-shadow: 0px 1px 7px 0px rgba(0,0,0,0.20);
  157.     box-shadow: 0px 1px 7px 0px rgba(0,0,0,0.20);*/
  158. }
  159.  
  160. #cards-holder {
  161.     display: table;
  162.     margin: auto;
  163.     margin-top: 0px;
  164. }
  165.  
  166. li {
  167.     text-align: left;
  168.     margin: 10px;
  169.     list-style:none;
  170.     color: rgb(50, 60, 75);
  171. }
  172.  
  173. a {
  174.     color: rgb(50, 60, 75);
  175.     text-decoration: none;
  176.     transition: color .1s ease;
  177. }
  178.  
  179. a:hover {
  180.     color: mediumseagreen;
  181.  
  182. }
  183.  
  184. </style>
  185.  
  186. <div id="stripe">
  187.     <h1 id="clock" class="card"></h1>
  188.     <br/>
  189.     <span id="date"></span>
  190. </div>
  191.  
  192. <div id="searchbar-container">
  193.     <input type="search" placeholder = "-a -m -w -y" id="searchbar" onsubmit="search()" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" title="press TAB to focus"/>
  194. </div>
  195.  
  196. <div id="cards-holder">
  197.     <div id="music" class="cardcolumn">
  198.         <li>
  199.             <a href="https://play.spotify.com/">spotify</a>
  200.         </li>
  201.         <li>
  202.             <a href="https://www.reddit.com/r/listentothis/">listentothis</a>
  203.         </li>
  204.         <li>
  205.             <a href="http://play.google.com/music/listen?hl=en&u=0#/wmp">google play</a>
  206.         </li>
  207.  
  208.     </div>
  209.  
  210.     <div id="reference" class="cardcolumn">
  211.         <li>
  212.             <a href="">current lab</a>
  213.         </li>
  214.         <li>
  215.             <a href="">design doc</a>
  216.         </li>
  217.         <li>
  218.             <a href="">project genesis</a>
  219.         </li>
  220.     </div>
  221.  
  222.     <div id="aesthetics" class="cardcolumn">
  223.         <li>
  224.             <a href="http://boards.4chan.org/wg/">/wg/</a>
  225.         </li>
  226.         <li>
  227.             <a href="https://unsplash.com/">unsplash</a>
  228.         </li>
  229.         <li>
  230.             <a href="https://design.google.com/">google design</a>
  231.         </li>
  232.     </div>
  233.  
  234.     <div id="other" class="cardcolumn">
  235.         <li>
  236.             <a href="https://www.google.com/#q=weather" id="temp_curr">it's ??? out</a>
  237.         </li>
  238.         <li>
  239.             <a href="https://www.google.com/#q=weather" id="description">probly okay</a>
  240.         </li>
  241.         <li>
  242.             <a href="https://www.google.com/#q=weather" id="badness">weather here</a>
  243.         </li>
  244.  
  245.     </div>
  246. </div>
  247.  
  248. <script>
  249. function startTime() {
  250.     var today = new Date();
  251.     var h = today.getHours();
  252.     //america
  253.     if (h >= 13) {
  254.         h -= 12;
  255.     } else if (h < 1) {
  256.        h += 12;
  257.    }
  258.    var m = today.getMinutes();
  259.    var s = today.getSeconds();
  260.    m = checkTime(m);
  261.    s = checkTime(s);
  262.    document.getElementById('clock').innerHTML =
  263.    h + ":" + m + ":" + s;
  264.    var t = setTimeout(startTime, 500);
  265. }
  266. function checkTime(i) {
  267.    if (i < 10) {i = "0" + i};  // add zero in front of numbers < 10
  268.    return i;
  269. }
  270.  
  271. startTime();
  272.  
  273. //press SHIFT to focus on the search bar
  274. //modifiers have to be AT THE END
  275. searchinput = document.getElementById("searchbar");
  276. if(!!searchinput){
  277.    searchinput.addEventListener("keypress", function(a){
  278.        var key = a.keyCode;
  279.        if(key == 13){
  280.            var query = this.value;
  281.            search(query);
  282.        }
  283.    });
  284. }
  285.  
  286.  
  287. function search(query) {
  288.    console.log(query)
  289.    var original = query;
  290.    var modifier = query.substr(query.length-2);
  291.    query = query.slice(0, query.length-2);
  292.    switch (modifier) {
  293.        case "-a":
  294.            window.location = "http://www.amazon.com/s/ref=nb_sb_noss_1?url=search-alias%3Daps&field-keywords=" +
  295.            query.replace(" ", "+");
  296.            break;
  297.        case "-y":
  298.            window.location =
  299.                "https://www.youtube.com/results?search_query=" +
  300.                query.replace(" ", "+");
  301.            break;
  302.        case "-w":
  303.            window.location =
  304.                "https://en.wikipedia.org/w/index.php?search=" +
  305.                query.replace(" ", "%20");
  306.            break;
  307.  
  308.         case "-m":
  309.             window.location =
  310.             "http://www.wolframalpha.com/input/?i=" +
  311.             query.replace("+", "%2B");
  312.             break;
  313.  
  314.        default:
  315.            window.location="https://www.google.com/#q=" +
  316.                   original.replace(" ", "+");
  317.  
  318.    }
  319. }
  320.  
  321. $(document).bind('keydown', function(e) {
  322.    if (e.which == 16) {
  323.        document.getElementById("searchbar").focus();
  324.    }
  325. });
  326.  
  327.  
  328. //weather shamelessly stolen from Austin Kilduff
  329. var json_url = "http://api.openweathermap.org/data/2.5/weather?q=NewYork,ny&appid=6e131a2916d5d45d8367b72a4675be0a";
  330. var city;
  331. var temp_curr;
  332. var temp_low;
  333. var temp_high;
  334. var description;
  335. var weatherCode;
  336. var humidity;
  337. $.when(
  338.     $.getJSON(json_url)
  339.     ).done( function(json_obj) {
  340.         city = json_obj["name"];
  341.         temp_curr = k_to_f(json_obj["main"]["temp"]);
  342.         temp_low = k_to_f(json_obj["main"]["temp_min"]);
  343.         temp_high = k_to_f(json_obj["main"]["temp_max"]);
  344.         description = json_obj["weather"][0]["description"];
  345.        weatherCode = Number(json_obj["weather"][0]["id"]);
  346.        humidity = Number(json_obj["main"]["humidity"])
  347.         insertWeatherInfo();
  348.     }
  349. );
  350. function k_to_f(kelvin) {
  351.     return ((9 / 5) * (kelvin - 273) + 32).toFixed(0);
  352. }
  353. function insertWeatherInfo() {
  354.     //$("#city").append(city.toLowerCase());
  355.     document.getElementById("description").innerHTML = (description.toLowerCase());
  356.     document.getElementById("temp_curr").innerHTML = ("it's " + temp_curr + "&deg; out");
  357.     $("#temp_low").append("lo " + temp_low + "&deg; /");
  358.     $("#temp_high").append("hi " + temp_high + "&deg;");
  359.    console.log("weather code: " + weatherCode);
  360.    console.log("humidity: " + humidity);
  361.    var disgusting = (weatherCode > 500 && weatherCode < 800);
  362.     if (disgusting || Number(temp_low) < 30 || Number(temp_high) > 95
  363.         || humidity > 75) {
  364.         document.getElementById("badness").innerHTML = ("disgusting");
  365.     } else {
  366.         document.getElementById("badness").innerHTML = ("not bad");
  367.     }
  368. }
  369.  
  370.  
  371. var monthNames = [
  372.   "January", "February", "March",
  373.   "April", "May", "June", "July",
  374.   "August", "September", "October",
  375.   "November", "December"
  376. ];
  377. var days = ['Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday'];
  378.  
  379. var date = new Date();
  380. var day = date.getDate();
  381. var weekday = date.getDay();
  382. var monthIndex = date.getMonth();
  383. var year = date.getFullYear();
  384.  
  385. document.getElementById("date").innerHTML = days[weekday] + ", " + monthNames[monthIndex] + " " + day;
  386.  
  387. $("#searchbar-container").click(function() {
  388.     $("#searchbar").focus();
  389. })
  390.  
  391. </script>
  392. </body>
  393. </html>
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!