Skip to content

Instantly share code, notes, and snippets.

@Sylvance

Sylvance/index.html

Created August 28, 2016 07:55
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 Sylvance/624e4edca51880b6e2428d0f1f7d4fa9 to your computer and use it in GitHub Desktop.
Save Sylvance/624e4edca51880b6e2428d0f1f7d4fa9 to your computer and use it in GitHub Desktop.
Download ZIP
ZOgarR
Raw
index.html
<html ng-app="gemStore">
<head>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet">
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css">
<link crossorigin="anonymous" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity=
"sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.js" type="text/javascript">
</script>
<script crossorigin="anonymous" integrity="sha256-cCueBR6CsyA4/9szpPfrX3s49M9vUU5BgtiJj06wt/s=" src="https://code.jquery.com/jquery-3.1.0.min.js">
</script>
<script crossorigin="anonymous" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" src=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">
</script>
<script type="text/javascript">
$(document).ready(function() {
$('#splash').ready()
{
setTimeout(function() {
$('#main').ready(function() {
$('#splash').remove();
$('#app_con').show();
});
}, 15000);
}
$('a.tabbies').on('click', function(e) {
var tab_id = $(this).attr('href');
console.log(tab_id);
jQuery(this).parent('li').addClass('active').siblings().removeClass('active');
if (tab_id == 'tabs_Home') {
jQuery('div.field_base:eq(0)').addClass('field_base tab active').siblings().removeClass('active');
}
if (tab_id == 'tabs_Messages') {
jQuery('div.field_base:eq(1)').addClass('field_base tab active').siblings().removeClass('active');
}
if (tab_id == 'tabs_Contacts') {
jQuery('div.field_base:eq(2)').addClass('field_base tab active').siblings().removeClass('active');
}
if (tab_id == 'tabs_Settings') {
jQuery('div.field_base:eq(3)').addClass('field_base tab active').siblings().removeClass('active');
}
if (tab_id == 'tabs_Logout') {
jQuery('div.field_base:eq(4)').addClass('field_base tab active').siblings().removeClass('active');
}
e.preventDefault();
});
});
</script>
<title>
App
</title>
</head>
<body class="container" ng-controller="StoreController as store">
<div class="app_con">
<div class="app_base">
<div class="app_top">
<div class="top_con">
<div class="top_base">
<ul class="top_nav" id="tabs_links">
<li class="active">
<a class="tabbies" href="tabs_Home"><i class="fa fa-home fa-fw fa-2x"></i>&nbsp;</a>
</li>
<li class="">
<a class="tabbies" href="tabs_Messages"><i class="fa fa-envelope fa-fw fa-2x"></i>&nbsp;</a>
</li>
<li class="">
<a class="tabbies" href="tabs_Contacts"><i class="fa fa-users fa-fw fa-2x"></i>&nbsp;</a>
</li>
<li class="">
<a class="tabbies" href="tabs_Settings"><i class="fa fa-cog fa-fw fa-2x"></i>&nbsp;</a>
</li>
<li class="">
<a class="tabbies" href="tabs_Logout"><i class="fa fa-power-off fa-fw fa-2x"></i>&nbsp;</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="app_field">
<div class="field_con">
<div id="tabs_Home" class="field_base tab">
<h1>HOME</h1>
<div class="product row" ng-repeat="product in store.products">
<h3>
{{product.name}} <em class="pull-right">${{product.price}}</em>
</h3>
</div>
</div>
<div id="tabs_Messages" class="field_base tab">
<center class="field_head">
<h1>MESSAGES</h1>
</center>
<div class="field_top">
<div class="main_con">
<div class="main_field">
<div class="main_base">
<ul class="mailbox">
<li class="envelope">
<a href="#">
<img src="#">
<h4>My name</h4>
<p>Hello, was aking if you will...</p>
</a>
</li>
<li class="envelope">
<a href="#">
<img src="#">
<h4>My name</h4>
<p>Hello, was aking if you will...</p>
</a>
</li>
<li class="envelope">
<a href="#">
<img src="#">
<h4>My name</h4>
<p>Hello, was aking if you will...</p>
</a>
</li>
<li class="envelope">
<a href="#">
<img src="#">
<h4>My name</h4>
<p>Hello, was aking if you will...</p>
</a>
</li>
<li class="envelope">
<a href="#">
<img src="#">
<h4>My name</h4>
<p>Hello, was aking if you will...</p>
</a>
</li>
<li class="envelope">
<a href="#">
<img src="#">
<h4>My name</h4>
<p>Hello, was aking if you will...</p>
</a>
</li>
<li class="envelope">
<a href="#">
<img src="#">
<h4>My name</h4>
<p>Hello, was aking if you will...</p>
</a>
</li>
<li class="envelope">
<a href="#">
<img src="#">
<h4>My name</h4>
<p>Hello, was aking if you will...</p>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div id="tabs_Contacts" class="field_base tab">
<h1>CONTACTS</h1>
</div>
<div id="tabs_Settings" class="field_base tab active">
<h1>SETTINGS</h1>
</div>
<div id="tabs_Logout" class="field_base tab">
<h1>LOGOUT</h1>
</div>
</div>
</div>
</body>
</html>
Raw
script.js
(function() {
var app = angular.module('gemStore', []);
app.controller('StoreController', function(){
this.products = gems;
});
var gems = [
{ name: 'Azurite', price: 2.95 },
{ name: 'Bloodstone', price: 5.95 },
{ name: 'Zircon', price: 3.95 }
];
})();
Raw
style.css
html, body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
background-color: #464646;
/* background-color: #4CACCC; */
/* border: 1px solid black; */
}
.app_con {
width: inherit;
height: inherit;
margin: 0;
padding: 0;
/* border: 1px solid black; */
}
.app_base {
margin: 0;
padding: 0;
/* border: 1px solid black; */
}
.app_top {
display: block;
clear: both;
/* border: 1px solid black; */
}
.app_field
{
/*margin: 2px;
padding: 2px;
height: 700px;*/
display: block;
clear: both;
/*border: 1px solid black;*/
}
.app_root
{
/*margin: 2px;
padding: 2px;
height: 100px;*/
display: block;
clear: both;
/*border: 1px solid black;*/
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
width: 100%;
}
li {
float: left;
width: 20%;
}
li.active {
color: white;
background-color: #4CAF50;
}
li a {
display: block;
color: #666;
text-align: center;
padding: 8px 8px;
text-decoration: none;
}
li.active a {
color: white;
}
li:hover:not(.active) {
background-color: white;
}
.tab {
display:none;
}
.tab.active {
display:block;
}
.field_base
{
padding: 10px;
}
.button-success,
.button-error,
.button-warning,
.button-secondary {
color: white;
border-radius: 4px;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
}
.button-success {
background: rgb(28, 184, 65); /* this is a green */
}
.button-success:hover {
background: rgb(202, 60, 60); /* this is a maroon */
-ms-transform: scale(1.1,1.1); /* IE 9 */
-webkit-transform: scale(1.1,1.1); /* Safari */
transform: scale(1.1,1.1);
}
.button-success:visited {
background: rgb(66, 184, 221); /* this is a light blue */
}
.button-error {
background: rgb(202, 60, 60); /* this is a maroon */
}
.button-warning {
background: rgb(223, 117, 20); /* this is an orange */
}
.button-secondary {
background: rgb(66, 184, 221); /* this is a light blue */
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment