Skip to content

Instantly share code, notes, and snippets.

@ekinertac

ekinertac/newtab.html

Created June 11, 2017 16:23
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save ekinertac/2ac2f8ecf775bf9d2148ea5c27ae1124 to your computer and use it in GitHub Desktop.
Save ekinertac/2ac2f8ecf775bf9d2148ea5c27ae1124 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
newtab.html
<html>
<head>
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<link href="https://fonts.googleapis.com/css?family=Raleway:100,200,300" rel="stylesheet">
<style>
body {
background-image: url("http://static.simpledesktops.com/uploads/desktops/2014/10/15/tetons-at-night.png");
background-size: cover;
color: rgba(255,255,255,.5);
font-family: 'Raleway', sans-serif;
font-weight: 100;
}
.link {
font-size: 20px;
text-align: center;
margin: 10px;
padding: 15px 0px;
color: rgba(255,255,255, .5);
border: 1px solid rgba(255,255,255,.3);
background-color: rgba(255,255,255,.1);
transition: all ease 0.3s;
border-radius: 0px;
opacity: 1;
}
.link:hover {
/*color: rgba(255,255,255, .5);
outline: 1px solid rgba(255,255,255,.3);
background-color: rgba(255,255,255,.3);*/
text-decoration: none;
border: 1px solid rgba(255,255,255,1);
}
.row {
margin-top: 10px;
}
.row:last-child {
border-bottom: none;
}
.spacer {
height: 10px;
}
.title-wrapper { position: relative; }
.title {
font-size: 18px;
color: rgba(255,255,255,.3);
font-weight: 100;
position: absolute;
top: 18px;
left: 0;
transform: rotate(90deg);
transform-origin: left top 0;
writing-mode: bt-lr;
}
</style>
</head>
<body ng-app="NewTabApp">
<div class="spacer"></div>
<div class="container" ng-controller="LinkController">
<div class="row" ng-repeat="link in links">
<div class="col-lg-12">
<div class="row title-wrapper">
<div class="title">{{ link.title }}</div>
</div>
</div>
<div class="col-sm-12">
<div class="row">
<a ng-repeat="url in link.urls"
href="{{ url.url }}"
class="col-sm-2 btn link"
style="{{ url.style }}">
{{ url.name }}</a>
</div>
</div>
</div>
</div>
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0/angular.js"></script>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script>
var LINKS = [
{
title: "most visited",
urls: [
{url: "http://facebook.com", name: "Facebook", style:"background: #3B5998; color: #fff;" },
{url: "http://reddit.com", name: "Reddit", style:"background: #CEE3F8; color: #000;"},
{url: "http://eksisozluk.com", name: "eksiSozluk", style:"background: #E7E4D7; color: #80C14B;"},
{url: "http://9gag.com", name: "NGag", style:"background: #000; color: #fff;"},
{url: "http://youtube.com", name: "YouTube", style:"background: #CC181E; color: #fff;"},
{url: "http://gmail.com", name: "gMail", style:"background: #E7E4D7; color: #E75A4D;"},
{url: "http://twitter.com", name: "Twitter", style:"background: #1DA1F2; color: white;"},
{url: "http://tumblr.com", name: "Tumblr", style:"background: #274158; color: white;"},
{url: "http://instagram.com", name: "Instagram", style:"background: -webkit-linear-gradient(top, #9639ae 0%,#f8772d 100%); color: white;"},
]
},
{
title: "devnews",
urls: [
{url: "http://news.ycombinator.com",name: "HNews", style:"background: #FF6600; color: #fff;"},
{url: "http://www.echojs.com/", name: "EchoJS", style:"background: #AF1D1D; color: #fff;"},
{url: "https://hackernoon.com/", name: "HNoon", style:"background: #00FF25; color: #000;"},
{url: "https://www.bootstrappers.io/", name: "Bootstrappers", style:"background: #2C7453; color: #fff;"},
]
},
{
title: "news",
urls: [
{url: "http://birgun.net", name: "BirGün", style:"background: white; color: red;"},
{url: "http://diken.com.tr", name: "Diken", style:"background: #FDB42A; color: white;"},
{url: "http://t24.com.tr", name: "T24", style:"background: #007FC5; color: white;"},
]
},
{
title: "shopping",
urls: [
{url: "http://sahibinden.com", name: "Sahibinden", style:"background: rgba(249, 245, 2, 1); color: black;"},
{url: "http://aliexpress.com", name: "AliExp", style:"background: #fff; color: #FF9900;"},
{url: "http://mydukkan.com", name: "MyDukkan", style:"background: #F36831; color: #fff;"},
{url: "http://n11.com", name: "n11", style:"background: #fff; color: #EA222F;"},
{url: "http://hepsiburada.com", name: "HepsiBurada", style:"background: #FF8600; color: #fff;"},
]
},
{
title: "media",
urls: [
{url: "http://imdb.com", name: "iMDB", style:"background: #E6B91E; color: black;"},
{url: "http://tvmaze.com", name: "TvMaze", style:"background: #3C948B; color: white;"},
{url: "http://trakt.tv", name: "Trakt", style:"background: red; color: white;"},
{url: "http://sceneaccess.eu", name: "SceneAccess", style:"background: #393939; color: #EB266B;"},
{url: "http://720pizle.com", name: "720p", style:"background: #10AFFD; color: white;"},
{url: "http://dizipub.com", name: "DiziPub", style:"background: #149353; color: #333;"},
{url: "http://www.dizibox.com", name: "DiziBox", style:"background: #1D202B; color: #FFD500;"},
]
},
{
title: "development",
urls: [
{url: "http://github.com", name: "Github", style:"background: #9CDAF1; color: black;"},
{url: "http://bitbucket.com", name: "Bitbucket", style:"background: #205081; color: white;"},
{url: "http://sentry.io", name: "Sentry", style:"background: #6C5FC7; color: white;"},
{url: "http://127.0.0.1:8000", name: "localhost", style:"background: #1D202B; color: #FFD500;"},
{url: "http://stackoverflow.com", name: "StackOverflow",style:"background: #2D2E2F; color: #F48024;"},
{url: "https://www.cyberciti.biz", name: "nixCraft", style:""},
]
},
{
title: "bilgi",
urls: [
{url: "http://rehber.bilgi.edu.tr", name: "Rehber"},
{url: "http://ticket.bilgi.edu.tr", name: "Ticket"},
{url: "https://login.microsoftonline.com/login.srf?wa=wsignin1.0&rpsnv=4&ct=1480261123&rver=6.7.6640.0&wp=MCMBI&wreply=https%3a%2f%2fportal.office.com%2flanding.aspx%3ftarget%3d%252fdefault.aspx&lc=1033&id=501392&msafed=0&client-request-id=5b151418-9f3b-4507-aff3-1491eee4bccf", name: "Outlook"},
]
},
];
// Define the `phonecatApp` module
var NewTabApp = angular.module('NewTabApp', []);
// Define the `PhoneListController` controller on the `phonecatApp` module
NewTabApp.controller('LinkController', function LinkController($scope) {
$scope.name = "TabApp";
$scope.links = LINKS;
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment