diff options
| author | Kapil Viren Ahuja <k.v.ahuja@gmail.com> | 2017-03-23 15:43:36 +0530 |
|---|---|---|
| committer | Kapil Viren Ahuja <k.v.ahuja@gmail.com> | 2017-03-23 15:43:36 +0530 |
| commit | 14ae911664aecbd5a470bdc633cac1362db1599f (patch) | |
| tree | f98417ca8bc9a11368252359d9cee77bc5758685 | |
| parent | 8cbfbc931b4a241255a4eb2aa0dd3d27d05af407 (diff) | |
| download | minionlivesmatter-14ae911664aecbd5a470bdc633cac1362db1599f.tar.gz minionlivesmatter-14ae911664aecbd5a470bdc633cac1362db1599f.zip | |
Index page is now looking more fun :)
| -rw-r--r-- | templates/index.html | 530 |
1 files changed, 430 insertions, 100 deletions
diff --git a/templates/index.html b/templates/index.html index 61f262e..1440676 100644 --- a/templates/index.html +++ b/templates/index.html @@ -1,115 +1,445 @@ -<!DOCTYPE html> +<!doctype html> <html lang="en"> - <head> - <meta charset="utf-8" /> - <meta http-equiv="X-UA-Compatible" content="IE=edge"> - <title>Minion Lives Matter</title> - <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport" /> - <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" /> - <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700" /> - <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css" /> - <link rel="stylesheet" href="assets/tether/dist/css/tether.min.css" /> - <link rel="stylesheet" href="assets/bootstrap/dist/css/bootstrap.min.css" /> - <link rel="stylesheet" href="assets/bootstrap-material-design/dist/bootstrap-material-design.min.css" /> - </head> - <body> - <nav class="navbar navbar-inverse bg-inverse fixed-top"> - <a class="navbar-brand" href="alpha.vainsocial.com">Vainsocial</a> - </nav> +<head> + <meta charset="utf-8" /> + <link rel="icon" type="image/png" href="assets/img/favicon.ico"> + <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> + + <title>Hipster as F*** Cards by Creative Tim</title> - <div class="container" style="padding: 3rem 1.5rem;"> - <div class="container"> - <h1>Minion Lives Matter</h1> - <p> - <em>Based on Vainsocial users' data from the past 24 hours that by no means is representative to the whole player base of Vainglory. {{ sql_val("SELECT COUNT(*) FROM match WHERE created_at > NOW() - '1 day'::INTERVAL") }} matches are taken into account for this calculation.</em> - <noscript>This site works without JavaScript! However, be aware that live stats won't update.</noscript> - </p> + <meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport' /> + <meta name="viewport" content="width=device-width" /> + + <link href="assets/css/bootstrap.min.css" rel="stylesheet" /> + <link href="assets/css/hipster_cards.css" rel="stylesheet"/> + + <!-- Fonts and icons --> + <link href="assets/css/pe-icon-7-stroke.css" rel="stylesheet" /> + <link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet" /> + <link href='http://fonts.googleapis.com/css?family=Playfair+Display|Raleway:700,100,400|Roboto:400,700|Playfair+Display+SC:400,700' rel='stylesheet' type='text/css'> + + <style> + .card{ + margin-bottom: 70px; + } + </style> +</head> +<body> + +<div class="wrapper"> + <div class="container"> + + <div class="container"> + <h1>Minion Lives Matter</h1> + + + <div class="card-box col-md-4 col-sm-6"> + <div class="card card-with-border card-just-text" data-background="color" data-color="black" > + <div class="content"> + <h4 class="title">"{{ sql_val("SELECT COUNT(*) FROM match WHERE created_at > NOW() - '1 day'::INTERVAL") }} matches are taken into account."</h4> + <p class="description">Using VainSocial.com players' data in last 24 hours.</p> + </div> + </div> <!-- end card --> + </div> + + <div class="card-box col-md-4 col-sm-6"> + <div class="card card-just-text card-with-border" data-background="image" data-src="assets/img/music-3.jpg"> + <div class="content"> + <div class="filter filter-red"></div> + <h4 class="title title-modern">"Minions Lives Matter."</h4> + <p class="description">Shutterfly@vaisocial</p> + </div> + + <div class="filter"></div> + </div> <!-- end card --> </div> - <div class="card"> - <div class="card-block"> - <h4 class="card-title"><span id="minions-killed-now">0</span> Minions died</h4> - <p class="card-text">since you opened this page</p> - <script type="text/javascript"> - var minions_per_second = {{ sql_val("SELECT SUM(minion_kills)/SUM(match.duration)::FLOAT FROM participant JOIN roster ON participant.roster_api_id=roster.api_id JOIN match ON roster.match_api_id=match.api_id WHERE participant.created_at > NOW() - '1 day'::INTERVAL") }}; - var minions = 0; - // sum(minions killed) / sum(game lengh s) - setInterval(() => { - minions += minions_per_second; - $("#minions-killed-now").text(Math.floor(minions)); - }, 1000); - </script> - </div> + + <div class="card-box col-md-4 col-sm-6"> + <div class="card card-with-border card-just-text" data-background="color" data-color="black" > + <div class="content"> + <h4 class="title">"Since you opened this page"</h4> + <p class="description">- Hipster Quote</p> + </div> + </div> <!-- end card --> + </div> + </div> + + + +<!-- Stormcaller started here --> + <div class="masonry-container"> + + <div class="card-box col-md-4 col-sm-6"> + <div class="card text-center" data-background="image" data-src="assets/img/city-2.png"> + <h4 class="title title-modern">Minion Died</h4> + + <div class="content"> + <div class="price"> + <h6></h6> + <h4 id="minions-killed-now">0</h4> + </div> + <p class="description">why do we have to be so cruel? Why? Why? Why?</p> + </div> + <div class="filter"></div> + </div> <!-- end card --> </div> - <div class="card"> - <div class="card-block"> - <h4 class="card-title">{{ sql_val("SELECT COUNT((item_grants->>'*1045_Item_FountainOfRenewal*')::INT)-COUNT((item_uses->>'*1045_Item_FountainOfRenewal*')::INT) FROM participant WHERE created_at > NOW() - '1 day'::INTERVAL") }} Fountains</h4> - <!-- sum(FoR bought) - sum(FoR used) --> - <p class="card-text">did not help their team</p> - </div> + + + <div class="card-box col-md-4 col-sm-6"> + <div class="card text-center" data-background="image" data-src="assets/img/city-1.jpg"> + <h4 class="title title-modern">Fountains</h4> + + <div class="content"> + <div class="price"> + <h6></h6> + <h4 id="minions-killed-now">{{ sql_val("SELECT COUNT((item_grants->>'*1045_Item_FountainOfRenewal*')::INT)-COUNT((item_uses->>'*1045_Item_FountainOfRenewal*')::INT) FROM participant WHERE created_at > NOW() - '1 day'::INTERVAL") }}</h4> + </div> + <p class="description">bought for the looks</p> + </div> + <div class="filter"></div> + </div> <!-- end card --> </div> - <div class="card"> - <div class="card-block"> - <h4 class="card-title">{{ sql_val("SELECT (SUM(match.duration)/60*5) / SUM(roster.kraken_captures) FROM match JOIN roster ON roster.match_api_id=match.api_id WHERE match.created_at > NOW() - '1 day'::INTERVAL") }} Minions</h4> - <p class="card-text">are needed to unleash a Kraken</p> - <!-- 1 wave = 3m * 1CS/m + 1m * 2CS/m = 5CS, 3 waves/min = 15CS/min = 5m/min --> - <!-- (sum(game length s / 60)min * 5m/min) / sum(krakens) --> - </div> + + + + + + + + + + + + + + + <div class="card-box col-md-4 col-sm-6"> + <div class="card"> + <div class="content"> + <h6 class="category">Best stories</h6> + <h4 class="title"><a href="#">This is a plain Hipster Card, see for yourself</a></h4> + <p class="description">When selling products it's always a good idea to go with commanding fonts that are good at showing authority and security. I feel like Raleway and Roboto do just that.</p> + </div> + </div> <!-- end card --> </div> - <div class="card"> - <div class="card-block"> - <h4 class="card-title">{{ sql_val("SELECT SUM(participant.crystal_mine_captures) FROM participant WHERE participant.created_at > NOW() - '1 day'::INTERVAL") }} Crystal Sentries</h4> - <!-- sum(miners) --> - <p class="card-text">got slaugthered</p> - </div> + + + <div class="card-box col-md-4 col-sm-6"> + <div class="card"> + <div class="header"> + <img src="assets/img/beard-1.jpg" /> + + <div class="social-line social-line-visible" data-buttons="4"> + <button class="btn btn-social btn-facebook"> + <i class="fa fa-facebook"></i> + </button> + <button class="btn btn-social btn-twitter"> + <i class="fa fa-twitter"></i> + </button> + <button class="btn btn-social btn-pinterest"> + <i class="fa fa-pinterest"></i> + </button> + <button class="btn btn-social btn-google"> + <i class="fa fa-google-plus"></i> + </button> + </div> + </div> + + <div class="content"> + <h6 class="category">News</h6> + <h4 class="title">Use this card and see what you can achive</h4> + <p class="description">When selling products it's always a good idea to go with commanding fonts that are good at showing authority and security. I feel like Raleway and Roboto do just that.</p> + </div> + </div> <!-- end card --> </div> - <div class="card"> - <div class="card-block"> - <h4 class="card-title">{{ sql_val("SELECT SUM((participant.item_sells->>'*1038_Item_Flare*')::INT) FROM participant WHERE participant.created_at > NOW() - '1 day'::INTERVAL") }} Flares</h4> - <!-- sum(flares sold) --> - <p class="card-text">got thrown into the trash</p> - </div> + + + + <div class="card-box col-md-4 col-sm-6"> + <div class="card" data-background="image" data-src="assets/img/lifestyle-2.jpg"> + <div class="header"> + <div class="category"> + <h6 class="label label-warning">Trending Post</h6> + </div> + + <div class="social-line" data-buttons="3"> + <button class="btn btn-social btn-facebook"> + <i class="fa fa-facebook-square"></i> Share + </button> + <button class="btn btn-social btn-twitter"> + <i class="fa fa-twitter"></i> Tweet + </button> + <button class="btn btn-social btn-pinterest"> + <i class="fa fa-pinterest"></i> Pin + </button> + </div> + </div> + + <div class="content"> + <h4 class="title">Tobias Van Schneider is a German designer raised in Austria...</h4> + <p class="description">When selling products it's always a good idea to go with commanding fonts that are good at showing authority and security.</p> + </div> + <div class="filter"></div> + </div> <!-- end card --> </div> - <div class="card"> - <div class="card-block"> - <h4 class="card-title">Every {{ sql_val("SELECT SUM(match.duration)/60 / (SUM((participant.item_uses->>'*1052_Item_WeaponInfusion*')::INT) + SUM((participant.item_uses->>'*1053_Item_CrystalInfusion*')::INT)) FROM participant JOIN roster ON participant.roster_api_id=roster.api_id JOIN match ON roster.match_api_id=match.api_id WHERE participant.created_at > NOW() - '1 day'::INTERVAL") }} minutes</h4> - <!-- sum(game length s)/60 / (sum(infusion wp) + sum(infusion cp)) --> - <p class="card-text">A hero gets high on infusions</p> - </div> + + + + + + <div class="card-box col-md-4 col-sm-6"> + <div class="card card-with-border" data-background="image" data-src="assets/img/fashion-1.jpg"> + <div class="header"> + </div> + + <div class="content text-center"> + <p class="description">When selling products it's always a good idea to go with commanding fonts that are good at showing authority and security. I feel like Raleway and Roboto do just that.</p> + </div> + <div class="footer text-center"> + <a href="#" class="btn btn-danger btn-fill btn-round">Read article</a> + </div> + <div class="filter"></div> + </div> <!-- end card --> </div> - <div class="card"> - <div class="card-block"> - <h4 class="card-title">{{ sql_val("SELECT SUM((item_uses->>'*1054_Item_ScoutTrap*')::INT) FROM participant WHERE participant.created_at > NOW() - '1 day'::INTERVAL") }} Scout Traps</h4> - <!-- sum(game length s)/60 / (sum(infusion wp) + sum(infusion cp)) --> - <p class="card-text">Scout Traps made the Halcyon Fold a dangerous place</p> - </div> + + + + <div class="card-box col-md-4 col-sm-6"> + <div class="card card-just-text card-with-border" data-background="image" data-src="assets/img/lifestyle-9.jpg"> + <div class="content"> + <h4 class="title title-modern">"I liked nutella, triangles and outerspace way before hipsters."</h4> + <p class="description">- Not A Hipster</p> + </div> + <div class="filter"></div> + </div> <!-- end card --> </div> - <div class="card"> - <div class="card-block"> - <h4 class="card-title">{{ sql_val("SELECT SUM(turret_kills) FROM participant WHERE hero='*SAW*' AND created_at > NOW() - '1 day'::INTERVAL") }} Turrets</h4> - <!-- sum(turret_kills) where hero=saw --> - <p class="card-text">were pushed by a SAW</p> - </div> + + + <div class="card-box col-md-4 col-sm-6"> + <div class="card card-with-border" data-background="color" data-color="azure"> + <div class="header"> + <div class="icon"> + <i class="pe-7s-radio"></i> + </div> + </div> + <div class="content text-center"> + <h4 class="title title-modern">Nicecream.fm</h4> + <p class="description">Best vibes in the marketplace. Listen to the best music from '89. I feel like Nicecream and .fm do just that.</p> + </div> + <div class="footer text-center"> + <button class="btn btn-neutral btn-round btn-fill btn-modern">Listen Now!</button> + </div> + </div> <!-- end card --> </div> - <div class="card"> - <div class="card-block"> - <h4 class="card-title">{{ sql_val("SELECT SUM(turret_kills) FROM participant WHERE created_at > NOW() - '1 day'::INTERVAL") }} Turrets</h4> - <!-- sum(turret_kills) --> - <p class="card-text">need to be rebuilt by Minion Workers every day</p> - </div> + + + + + + <div class="card-box col-md-4 col-sm-6"> + <div class="card card-with-border" data-background="color" data-color="orange"> + <div class="content"> + <h6 class="category">Hot Article</h6> + <h4 class="title"> + <a href="#"> Try the new hairstyle from this Barber Shop</a> + </h4> + <p class="description">When selling products it's always a good idea to go with commanding fonts that are good at showing authority and security. I feel like Raleway and Roboto do just that.</p> + </div> + </div> <!-- end card --> </div> - <div class="card"> - <div class="card-block"> - <h4 class="card-title">{{ sql_val("SELECT SUM(minion_kills) FROM participant WHERE NOT winner AND created_at > NOW() - '1 day'::INTERVAL") }} out of {{ sql_val("SELECT SUM(minion_kills) FROM participant WHERE created_at > NOW() - '1 day'::INTERVAL") }} Minions</h4> - <!-- sum(minions killed) where match lost --> - <!-- sum(minions killed) --> - <p class="card-text">died for nothing</p> - </div> + + + + <div class="card-box col-md-4 col-sm-6"> + <div class="card text-center" data-background="image" data-src="assets/img/city-2.png"> + <h4 class="title title-modern">Hipster Vacation</h4> + + <div class="content"> + <div class="price"> + <h6>From</h6> + <h4>2.799<b class="currency">$</b></h4> + </div> + <p class="description">When selling products it's always a good idea to go with commanding fonts that are good at showing authority and security.</p> + </div> + <div class="filter"></div> + <div class="footer btn-center"> + <button class="btn btn-neutral btn-round btn-fill">Book Now!</button> + </div> + </div> <!-- end card --> + </div> + + + + + <div class="card-box col-md-4 col-sm-6"> + <div class="card card-with-border"> + <div class="header"> + <div class="icon"> + <i class="pe-7s-glasses"></i> + </div> + </div> + <div class="content text-center"> + <h4 class="title text-center">Hipster Glasses App</h4> + <p class="description">Here can be a description about the application that is for download. I feel like this app is what I need.</p> + </div> + <div class="footer btn-center"> + <button class="btn btn-default btn-round btn-fill btn-info btn-modern">Download</button> + </div> + </div> <!-- end card --> </div> + + + + + + + <div class="card-box col-md-4 col-sm-6"> + <div class="card card-just-text card-with-border" data-background="image" data-src="assets/img/music-3.jpg"> + <div class="content"> + <div class="filter filter-red"></div> + <h4 class="title title-modern">"I like the way you work it +No diggity, I gotta bag it up."</h4> + <p class="description">- Chet Faker</p> + </div> + + <div class="filter"></div> + </div> <!-- end card --> + </div> + + + + <div class="card-box col-md-4 col-sm-6"> + <div class="card card-with-border" data-background="color" data-color="green"> + <div class="header"> + <div class="icon"> + <i class="pe-7s-gift"></i> + </div> + + <div class="social-line" data-buttons="3"> + <button class="btn btn-social btn-facebook"> + <i class="fa fa-facebook"></i> + </button> + <button class="btn btn-social btn-twitter"> + <i class="fa fa-twitter"></i> + </button> + <button class="btn btn-social btn-pinterest"> + <i class="fa fa-pinterest"></i> + </button> + </div> + + </div> + <div class="content text-center"> + <p class="description">Your friend <b>Michael Osborn</b> has sent you a hipster gift card.</p><br> + </div> + <div class="footer btn-center"> + <button class="btn btn-neutral btn-fill btn-modern">View Gift Details</button> + </div> + </div> <!-- end card --> + </div> + + + + <div class="card-box col-md-4 col-sm-6"> + <div class="card" data-background="color" data-color="black"> + <div class="header"> + <img src="assets/img/home-1.jpg"/> + + <div class="social-line" data-buttons="2"> + <button class="btn btn-social"> + <i class="fa fa-facebook-square"></i> Share + </button> + <button class="btn btn-social"> + <i class="fa fa-twitter"></i> Tweet + </button> + </div> + </div> + + <div class="content"> + <h6 class="category">Interior Design</h6> + <h4 class="title"><a href="#">Hipster Apartment sold for $1.2 mil.</a></h4> + <p class="description">When selling products it's always a good idea to go with commanding fonts that are good at showing authority and security. I feel like Raleway and Roboto do just that.</p> + </div> + </div> <!-- end card --> + </div> + + + + <div class="card-box col-md-4 col-sm-6"> + <div class="card text-center" data-background="image" data-src="assets/img/city-1.jpg"> + <h4 class="title title-modern">Hipster City</h4> + + <div class="content"> + <div class="price"> + <h6>From</h6> + <h4>1.499<b class="currency">$</b></h4> + </div> + </div> + + <div class="footer btn-center"> + <button class="btn btn-neutral btn-round btn-modern">Buy Ticket</button> + </div> + + <div class="filter filter-blue"></div> + </div> <!-- end card --> + </div> + + </div> - <script src="assets/jquery/dist/jquery.min.js" type="text/javascript"></script> - <script src="assets/tether/dist/js/tether.min.js" type="text/javascript"></script> - <script src="assets/bootstrap/dist/js/bootstrap.min.js" type="text/javascript"></script> - <script src="assets/bootstrap-material-design/dist/bootstrap-material-design.iife.min.js" type="text/javascript"></script> - </body> -</html> + + </div> +</div> <!-- end wrapper --> + +</body> + + <script src="assets/js/jquery-1.10.2.js" type="text/javascript"></script> + <script src="assets/js/bootstrap.min.js" type="text/javascript"></script> + <script src="assets/js/hipster-cards.js"></script> + + + <script type="text/javascript"> + var minions_per_second = {{ sql_val("SELECT SUM(minion_kills)/SUM(match.duration)::FLOAT FROM participant JOIN roster ON participant.roster_api_id=roster.api_id JOIN match ON roster.match_api_id=match.api_id WHERE participant.created_at > NOW() - '1 day'::INTERVAL") }}; + var minions = 0; + // sum(minions killed) / sum(game lengh s) + setInterval(() => { + minions += minions_per_second; + $("#minions-killed-now").text(Math.floor(minions)); + }, 1000); + </script> + + + <script type="text/javascript"> + var minions_per_second = {{ sql_val("SELECT SUM(minion_kills)/SUM(match.duration)::FLOAT FROM participant JOIN roster ON participant.roster_api_id=roster.api_id JOIN match ON roster.match_api_id=match.api_id WHERE participant.created_at > NOW() - '1 day'::INTERVAL") }}; + var minions = 0; + // sum(minions killed) / sum(game lengh s) + setInterval(() => { + minions += minions_per_second; + $("#minions-killed-now").text(Math.floor(minions)); + }, 1000); + </script> + + + <!-- Just for demo --> + <script src="https://cdnjs.cloudflare.com/ajax/libs/masonry/3.3.1/masonry.pkgd.min.js"></script> + + <script> + + $().ready(function(){ + + var $container = $('.masonry-container'); + + doc_width = $(document).width(); + + if (doc_width >= 768){ + $container.masonry({ + itemSelector : '.card-box', + columnWidth : '.card-box', + transitionDuration : 0 + }); + } else { + $('.mas-container').removeClass('mas-container').addClass('row'); + } + }); + </script> + +</html>
\ No newline at end of file |