Skip to content

Instantly share code, notes, and snippets.

@AnastasiosMpoletis

AnastasiosMpoletis/epic-time-clock-angularjs.markdown

Last active June 9, 2017 19:30
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 AnastasiosMpoletis/d565f68ff8dc8794445fe95cfda99d9a to your computer and use it in GitHub Desktop.
Save AnastasiosMpoletis/d565f68ff8dc8794445fe95cfda99d9a to your computer and use it in GitHub Desktop.
Download ZIP
Epic Time Clock AngularJS
Raw
epic-time-clock-angularjs.markdown
Raw
index.html
<body>
<div id="rootDiv" ng-app="rootApp" , ng-controller="rootCtrl">
<!-- Mute button, background music -->
<div class="row">
<div class="col-xs-12 muteBar centerize">
<!-- Background music -->
<audio id="backgroundMusic" src="https://dl.dropbox.com/s/934qv7z6ghac8iv/backgroundMusic.mp3?dl=0" autoplay loop></audio>
<!-- Mute button -->
<p>Sound <br/></p>
<label class="switch">
<input type="checkbox" id="muteButton" ng-click="muteFunc()" checked />
<div class="slider round"></div>
</label>
</div>
</div>
<!-- End of mute button row -->
<!-- Buttons 1, 2 - Assassins Creed, God of War -->
<div class="row">
<div class="col-xs-6 centerize">
<button type="button" class="btn-circle" ng-click="button1()"><img src="https://dl.dropbox.com/s/g1n8hh9ycbxwv32/assassinButton.ico?dl=0" /></button>
</div>
<div class="col-xs-6 centerize">
<button type="button" class="btn-circle" ng-click="button2()"><img src="https://dl.dropbox.com/s/bi7iiioihtgdmkl/godofwarButton.png?dl=0" /></button>
</div>
</div>
<!-- End of buttons 1, 2 row - Assassins Creed, God of War -->
<!-- Clock row -->
<div class="row">
<div id="clockDiv" class="col-xs-12 clock centerize">
<!-- Time display -->
<p/>{{time()}}
</div>
</div>
<!-- End of clock row -->
<!-- Buttons 3, 4 - Prince of Persia, The Witcher -->
<div class="row">
<div class="col-xs-6 centerize">
<button type="button" class="btn-circle" ng-click="button3()"><img src="https://dl.dropbox.com/s/vaqahcj7oux1icu/popButton.ico?dl=0" /></button>
</div>
<div class="col-xs-6 centerize">
<button type="button" class="btn-circle" ng-click="button4()"><img src="https://dl.dropbox.com/s/vmcy8yrx3ym944s/thewitcherButton.png?dl=0" /></button>
</div>
</div>
<!-- End of buttons 3, 4 row - Prince of Persia, The Witcher -->
</div>
<!-- Footer -->
<footer>
<p class="btn info" data-toggle="popover" data-placement="top" data-trigger="hover" data-content="Themes : Assassins Creed, God of War, Prince of Persia, The Witcher
Background music : The Witcher 3: Wild Hunt - OST #2 - Geralt of Rivia
SFX : Isolation Music - Epic sword sound effects"><span class="glyphicon glyphicon-info-sign"></span></p>
<!-- Created by link footer -->
<p>Created by <a href="http://anastasiosmpoletis.webege.com" target="_blank"><em>Anastasios Mpoletis</em></a></p>
</footer>
<!-- End of footer -->
</body>
Raw
script.js
angular
.module("rootApp", [])
.controller("rootCtrl", function($scope, $interval) {
// Button 1 actions - Assassins Creed
$scope.button1 = function() {
return (document.body.style.backgroundImage =
"url('https://dl.dropbox.com/s/z8pz4fo2w9lg9vt/assassinscreedBackground.jpg?dl=0')"), (document.getElementById(
"clockDiv"
).style.fontFamily =
"assassinFont"), (document.getElementById("clockDiv").style.fontSize =
"8vw"), (document.getElementById("clockDiv").style.wordSpacing =
"0.5vw"), $scope.playAudio1();
};
// Button 1 sound effect - Assassins Creed
$scope.playAudio1 = function() {
var audio = new Audio(
"https://dl.dropbox.com/s/ogdei5lzqlpnhia/assassinsSound.mp3?dl=0"
);
if ($scope.toggleBool === true) audio.play();
};
// Button 2 actions - God of War
$scope.button2 = function() {
return (document.body.style.backgroundImage =
"url('https://dl.dropbox.com/s/3p87no567p51e3q/godofwarBackground.jpg?dl=0')"), (document.getElementById(
"clockDiv"
).style.fontFamily =
"godofwarFont"), (document.getElementById("clockDiv").style.fontSize =
"8vw"), (document.getElementById("clockDiv").style.wordSpacing =
"-0.9vw"), $scope.playAudio2();
};
// Button 2 sound effect - God of War
$scope.playAudio2 = function() {
var audio = new Audio(
"https://dl.dropbox.com/s/tgztymywnhq32yd/godofwarSound.mp3?dl=0"
);
if ($scope.toggleBool === true) audio.play();
};
// Button 3 actions - Prince of Persia
$scope.button3 = function() {
return (document.body.style.backgroundImage =
"url('https://dl.dropbox.com/s/dqsf91myc5msrch/princeofpersiaBackground.jpg?dl=0')"), (document.getElementById(
"clockDiv"
).style.fontFamily =
"popFont"), (document.getElementById("clockDiv").style.fontSize =
"5vw"), (document.getElementById("clockDiv").style.wordSpacing =
"1vw"), $scope.playAudio3();
};
// Button 3 sound effect - Prince of Persia
$scope.playAudio3 = function() {
var audio = new Audio(
"https://dl.dropbox.com/s/p6ykmxumgfzb638/popSound.mp3?dl=0"
);
if ($scope.toggleBool === true) audio.play();
};
// Button 4 actions - The Witcher
$scope.button4 = function() {
return (document.body.style.backgroundImage =
"url('https://dl.dropbox.com/s/9o7hmu8m9z5muz1/thewitcherBackground.jpg?dl=0')"), (document.getElementById(
"clockDiv"
).style.fontFamily =
"thewitcherFont"), (document.getElementById("clockDiv").style.fontSize =
"8vw"), (document.getElementById("clockDiv").style.wordSpacing =
"-1vw"), $scope.playAudio4();
};
// Button 4 sound effect - The Witcher
$scope.playAudio4 = function() {
var audio = new Audio(
"https://dl.dropbox.com/s/3oafq8uq6ck53xo/thewitcherSound.mp3?dl=0"
);
if ($scope.toggleBool === true) audio.play();
};
// Add zero function for better display of clock digits
function addzero(i) {
if (i < 10) {
i = "0" + i;
}
return i;
}
// Digital clock
$scope.time = function() {
var date = new Date();
return (
addzero(date.getHours()) +
" : " +
addzero(date.getMinutes()) +
" : " +
addzero(date.getSeconds())
);
};
$interval(function() {
$scope.time();
}, 1000);
// Mute button code
$scope.toggleBool = true;
function toggleCustom() {
if ($scope.toggleBool === true) {
document.getElementById("backgroundMusic").volume = 0.0;
$scope.toggleBool = false;
} else {
document.getElementById("backgroundMusic").volume = 1;
$scope.toggleBool = true;
}
}
$scope.muteFunc = function() {
return toggleCustom();
};
}); //end of angular controller
/* Information script */
$(document).ready(function() {
$('[data-toggle="popover"]').popover();
});
Raw
scripts
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
Raw
style.css
@font-face {
font-family: 'assassinFont';
src: url("https://dl.dropbox.com/s/xr3nndfc4aqq9be/acFont.woff2?dl=0") format("woff2");
}
@font-face {
font-family: 'godofwarFont';
src: url("https://dl.dropbox.com/s/1neizt9925qljdt/gowFont.woff2?dl=0") format("woff2");
}
@font-face {
font-family: 'popFont';
src: url("https://dl.dropbox.com/s/4ahm5z1r5kiv5wd/popFont.woff2?dl=0") format("woff2");
}
@font-face {
font-family: 'thewitcherFont';
src: url("https://dl.dropbox.com/s/g59gmmq9aht8zjc/twFont.woff2?dl=0") format("woff2");
}
.switch {
position: relative;
display: inline-block;
width: 3em;
height: 2em;
}
.switch input {
display: none;
}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
-webkit-transition: .4s;
transition: .4s;
box-shadow: -0.1vw 0.1vh 0.8vmin #000000, 0.1vw -0.1vh 0.8vmin #000000;
}
.slider:before {
position: absolute;
content: "";
height: 1.5em;
width: 1.5em;
left: 0.3em;
bottom: 0.3em;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
}
input:checked + .slider {
background-color: #333333;
}
input:focus + .slider {
box-shadow: 0 0 0.5vmin #2196F3;
}
input:checked + .slider:before {
-webkit-transform: translateX(0.9em);
-ms-transform: translateX(0.9em);
transform: translateX(0.9em);
}
.slider.round {
border-radius: 10vw;
}
.slider.round:before {
border-radius: 50%;
}
.muteBar {
font-family: assassinfont, Verdana, Tahoma;
font-size: 2vw;
letter-spacing: 0.3vw;
color: white;
text-shadow: -0.2vw 0.2vh 1vmin #000000, 0.2vw -0.2vh 1vmin #000000;
text-decoration: none;
text-align: center;
user-select: none;
margin-top: 2vh;
}
/* Popover */
.popover {
max-width: 50vw;
white-space: pre-line;
text-align: center;
}
/* Popover Body */
.popover-content {
background-color: #333333;
font-family: assassinfont;
font-size: 0.9vw;
}
/* Popover Arrow */
.arrow {
border-color: transparent;
border-style: solid;
}
.info {
cursor: help;
}
.glyphicon-info-sign {
font-size: 1.5vw;
text-shadow: -0.2vw 0.2vh 1vmin #000000, 0.2vw -0.2vh 1vmin #000000;
}
footer {
font-family: assassinfont, Verdana, Tahoma;
font-size: 1vw;
letter-spacing: 0.2vw;
text-align: center;
color: white;
text-shadow: -0.2vw 0.2vh 1vmin #000000, 0.2vw -0.2vh 1vmin #000000;
text-decoration: none;
user-select: none;
margin-top: 3vh;
}
footer em {
color: white;
}
.btn-circle:active {
-webkit-transform: scale(0.98);
-ms-transform: scale(0.98);
transform: scale(0.98);
}
body {
background-image: url("https://dl.dropbox.com/s/fdame7zyt0pw9pl/backgroundImage.jpg?dl=0");
background-repeat: no-repeat;
background-position: center;
background-attachment: fixed;
-webkit-transition: background-image 0.5s ease-in-out;
transition: background-image 0.5s ease-in-out;
}
.clock {
font-family: Verdana, Tahoma;
font-size: 6vw;
color: white;
text-decoration: none;
text-align: center;
align-items: center;
word-spacing: 1vw;
letter-spacing: 1vw;
text-shadow: -0.2vw 0.2vh 1vmin #000000, 0.2vw -0.2vh 1vmin #000000;
user-select: none;
-webkit-transition: all 0.2s ease-out;
-moz-transition: all 0.2s ease;
-o-transition: all 0.2s ease;
-ms-transition: all 0.2s ease;
white-space: nowrap;
overflow: hidden;
height: 20vh;
margin-top: 4vh;
margin-bottom: 4vh;
cursor: default;
}
.centerize {
display: flex;
align-items: center;
justify-content: center;
}
.row {
margin: 0 auto;
}
.btn-circle {
background-color: Transparent;
background-repeat: no-repeat;
border: none;
cursor: pointer;
overflow: hidden;
outline: none;
user-select: none;
}
.btn-circle img {
width: 19vw;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment