Skip to content

Instantly share code, notes, and snippets.

@mariacheline

mariacheline/index.html

Last active August 6, 2017 11:05
Show Gist options
  • Save mariacheline/ce0671e9d17c577c1d44509cf431b130 to your computer and use it in GitHub Desktop.
Save mariacheline/ce0671e9d17c577c1d44509cf431b130 to your computer and use it in GitHub Desktop.
Download ZIP
WERpXK
Raw
index.html
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0">
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script type='text/javascript' src=https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.js></script>
<!-- <script type='text/javascript' src='scripts/ImpChart.js'></script> -->
<title>Il Mio Fatturato</title>
<!-- DON'T TOUCH THIS SECTION -->
<link href='http://fonts.googleapis.com/css?family=Lato:300,400,700|Cookie' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="css/mystyle.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="scripts/jquery.carouFredSel-5.5.2.js" type="text/javascript"></script>
<script type="text/javascript" src="scripts/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="scripts/jquery.form.js"></script>
<script type="text/javascript" src="scripts/scripts.js"></script>
<script type="text/javascript">
function launchFullScreen() {
if(document.requestFullScreen) {
document.requestFullScreen();
} else if(document.mozRequestFullScreen) {
document.mozRequestFullScreen();
} else if(document.webkitRequestFullScreen) {
document.webkitRequestFullScreen();
}
}
</script>
</head>
<!-- END OF DON'T TOUCH -->
<body onload="launchFullScreen();">
<div class="wrapper" id="top">
<section id="slideshow"> <!-- Slideshow Start -->
<div class="html_carousel">
<div id="slider">
<div class="slide">
<img src="http://tablet.marrmobile.com/cappello.jpg" usemap="#linkhome" alt="image 1"/>
<map name=linkhome>
<area shape=Rect Coords=5,5,180,120 Href="index.php">
</map>
</div><!--/slide-->
</div><!--/slider-->
<div class="clearfix"></div>
</div><!--/html_carousel-->
</section> <!-- Slideshow End -->
<section id="work"> <!-- Work Links Section Start -->
<div class="switch">
<input class="switch__input" type="radio" name="switch" value="0"/>
<label class="btn-toggle switch__label">fattura</label>
<input class="switch__input" type="radio" name="switch" value="1" checked/>
<label class="btn-toggle switch__label">incasso</label>
<span class="switch__selection"></span>
</div>
<select id="selectbox1">
<option disabled>Month</option>
<option value="january">January</option>
<option value="february">February</option>
<option value="march">March</option>
<option value="april">April</option>
<option value="may">May</option>
<option value="june">June</option>
<option value="july">July</option>
<option value="august">August</option>
<option value="september">September</option>
<option value="october">October</option>
<option value="november">November</option>
<option value="december">December</option>
</select>
<select id="selectbox2">
<option disabled>Year</option>
<option value="">1111</option>
<option value="aye">2222</option>
<option value="eh">333</option>
<option value="ooh">4444</option>
<option value="whoop">5555</option>
</select>
<canvas id="fatturato" class="fatturato" height="460" width="542"></canvas>
<script>
var month =0;
var chartData = {
labels :
["01","02","03","04","05","06","07","08","09","10","11","12","13","14","15","16","17","18","19","20","21","22","23","24","25","26","27","28","29","30","31"],
datasets : [{
type : 'bar',
label : 'Fatturato del 8/2017',
borderWidth : 2,
backgroundColor : "rgba(132,133,18,0.5)",
borderColor : "rgba(132,133,18,0.5)",
data :[]},
{
type: 'bar',
label : 'Obiettivo del 8/2017',
pointBackgroundColor : "rgba(112,163,2,.5)",
backgroundColor : "rgba(132,133,18,0.5)",
borderWidth: 2,
borderdColor : "rgba(112,163,2,.5)",
data: []},
{
type: 'line',
label : 'Obiettivo del 8/2017',
showLine : false,
pointStyle : 'dash',
lineTension: 0,
radius : 10,
pointBackgroundColor : "rgba(112,163,2,.5)",
backgroundColor : "rgba(112,163,2,.5)",
borderWidth: 2,
borderColor : "rgba(112,163,2,1)",
data: []},
]};
this.myChart = new Chart(document.getElementById("fatturato").getContext("2d"),{
type : 'bar',
data : chartData,
plugins: [{
afterUpdate: function(chart) {
if(chart.config.data.datasets.length != 4)
return;
//var dataset = chart.config.data.datasets[1];
var dataset2 = chart.config.data.datasets[2];
var offset = 0;
/*for (var i = 0; i < dataset._meta[0].data.length; i++) {
var model = dataset._meta[0].data[i]._model;
model.x += offset - model.radius/2 ;
model.controlPointNextX += offset- model.radius/2 ;
model.controlPointPreviousX += offset;}*/
for (var i = 0; i < dataset2._meta[0].data.length; i++) {
var model2 = dataset2._meta[0].data[i]._model;
model2.x += offset- model2.radius/2 ;
model2.controlPointNextX += offset- model2.radius/2 ;
model2.controlPointPreviousX += offset;
}
}
}],
options : {}
});
function Update(json){
var obiettivoScalinata = new Array();
var fatturatoScalinata = new Array();
var fatturatoScalinata_ya = new Array();
var obiettivo = json['obiettivoMensile']/json['monLength'];
for(var i = 0; i < (json['monLength']>json['monLength_ya']?json['monLength']:json['monLength_ya']);i++) {
obiettivoScalinata.push((obiettivoScalinata[i-1]||0)+obiettivo);
if(i < json['monLength'])
fatturatoScalinata.push((fatturatoScalinata[i-1]||0)+(json['fatturato'][i-1]||0));
if(i < json['monLength_ya'])
fatturatoScalinata_ya.push((fatturatoScalinata_ya[i-1]||0)+(json['fatturato_ya'][i-1]||0));
}
console.log(fatturatoScalinata);
var labels = new Array();
console.log (json['monLength'] +" "+ json['monLength_ya']);
for(var i = 0; i < (json['monLength']>json['monLength_ya']?json['monLength']:json['monLength_ya']);i++)
labels.push(""+(i+1));
myChart.data.labels = labels;
myChart.data.datasets[2].data=obiettivoScalinata;
myChart.data.datasets[0].data=fatturatoScalinata;
myChart.data.datasets[1].data=fatturatoScalinata_ya;
myChart.update();
month = json['month'];
}
$(document).ready(function(){$('select').each(function () {
var $this = $(this),
numberOfOptions = $(this).children('option').length;
$this.addClass('s-hidden');
$this.wrap('<div class="select"></div>');
$this.after('<div class="styledSelect"></div>');
var $styledSelect = $this.next('div.styledSelect');
$styledSelect.text($this.children('option').eq(0).text());
var $list = $('<ul />', {
'class': 'options'
}).insertAfter($styledSelect);
for (var i = 0; i < numberOfOptions; i++) {
$('<li />', {
text: $this.children('option').eq(i).text(),
rel: $this.children('option').eq(i).val()
}).appendTo($list);
}
var $listItems = $list.children('li');
$styledSelect.click(function (e) {
e.stopPropagation();
$('div.styledSelect.active').each(function () {
$(this).removeClass('active').next('ul.options').hide();
});
$(this).toggleClass('active').next('ul.options').toggle();
});
$listItems.click(function (e) {
e.stopPropagation();
$styledSelect.text($(this).text()).removeClass('active');
$this.val($(this).attr('rel'));
$list.hide();
});
$(document).click(function () {
$styledSelect.removeClass('active');
$list.hide();
});
});
var radioBtn = $('.switch');
radioBtn.click(function(e){
if (e.target && e.target.tagName === "INPUT") {
radioCheck();
}
});
function radioCheck() {
if ($('input[value=0]:checked').length > 0) {
$('.switch__selection').css({
"background-color": "rgb(234,113,114)",
"transform": "translateX(0%)"});
makeFatturato();
} else if ($('input[value=1]:checked').length > 0) {
$('.switch__selection').css({
"background-color": "rgb(145,202,229)",
"transform": "translateX(100%)"});
makeIncasso();
}
}
$("#negative").click(function (){
$.getJSON("query.php","month="+(month-1),Update);
})
$("#positive").click(function (){
$.getJSON("query.php","month="+(month+1),Update);
})
$.getJSON("query.php","month="+(month),Update);
});
function makeFatturato() {
myChart.data.datasets = new Array({
type : 'bar',
borderWidth : 2,
backgroundColor : "rgba(132,133,18,0.5)",
borderColor : "rgba(132,133,18,0.5)",
data :[]},
{
type: 'bar',
pointBackgroundColor : "rgba(112,163,2,.5)",
backgroundColor : "rgba(132,133,18,0.5)",
borderWidth: 2,
borderdColor : "rgba(112,163,2,.5)",
data: []},
{
type: 'line',
showLine : false,
pointStyle : 'dash',
lineTension: 0,
radius : 10,
pointBackgroundColor : "rgba(112,163,2,.5)",
backgroundColor : "rgba(112,163,2,.5)",
borderWidth: 2,
borderColor : "rgba(112,163,2,1)",
data: []} );
$.getJSON("query.php","month="+(month),Update);
myChart.update();
}
function makeIncasso(){
myChart.data.datasets = {};
myChart.update();
}
</script>
<div class="item2">
<a id="positive" ><img src="images/work/thumbs/indietro.png" alt="Indietro"></a><!-- Image must be 400px by 300px -->
</div><!--/item-->
<div class="fatturato2">
<h3></h3></div><!--/item-->
<div class="item2">
<a id="negative" ><img src="images/work/thumbs/avanti.png" alt="image 2"></a><!-- Image must be 400px by 300px -->
</div><!--/item-->
<div class="clearfix"></div>
</section> <!-- Work Links Section End -->
</div>
<!-- <footer id="footer">
<div class="wrapper">
</div>
<div class="clearfix"></div>
</footer> -->
<script type="text/javascript">
$("#slider").carouFredSel({
responsive : true,
scroll : {
fx : "crossfade",
easing : "swing",
duration : 1000,
}
});
</script>
<!-- SLIDESHOW SCRIPT END -->
</body>
</html>
Raw
style.css
/* ----------------- Reset all styles ----------------- */
* {
margin: 0;
padding: 0;
border: 0;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
/* ----------------- Website background and general text colour ----------------- */
body {
background-image: url(../images/backgroundtexture.png);
background-color: #f9f9f9;
color: #2d2d2d;
margin-top: 104px;
}
/* ----------------- Wrapper - keeps all content in the center of page ----------------- */
.wrapper {
margin: auto;
width: 80%;
height: auto;
}
/* ---------------- */
/* The rest is pretty self explanatory - it appears in the order that it occurs on the HTML document */
#top {
margin-top: 30px;
}
hr {
height: 1px;
width: 100%;
background-color: #2d2d2d;
margin: 3% 0;
}
#slideshow {
width: 100%;
margin: 3% auto 3% auto;
}
/* - - - - - - - - - - - - - - - Slider START - - - - - - - - - - - - - - - */
.html_carousel div.slide {
position: relative;
}
.html_carousel div.slide img {
width: 100%;
height: auto;
-webkit-box-shadow: 0 1px 1px #c1c1c1;
box-shadow: 0 1px 1px #c1c1c1;
border-radius: 15px;
}
.clearfix {
float: none;
clear: both;
}
/* - - - - - - - - - - - - - - - Slider END - - - - - - - - - - - - - - - */
/* ----------------------- WORK LINKS START ------------------------- */
#work {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-webkit-flex-flow: row wrap;
-ms-flex-flow: row wrap;
flex-flow: row wrap;
min-width: 568px;
max-width: 568px;
margin: 3% auto 3% auto;
padding: 1em;
height: auto;
background-color: #D3D3D3;
-webkit-box-shadow: 0 1px 1px #c1c1c1;
box-shadow: 0 1px 1px #c1c1c1;
border-radius: 15px;
}
.mex {
border-radius: 15px;
margin-top: 10px;
margin-left: auto;
margin-right: auto;
padding-right: 3px;
padding-top: 7px;
padding-left: 3px;
padding-bottom: 5px;
width: 94%;
background-color: #FFF;
-webkit-box-shadow: 0 1px 3px #c3c3c3;
box-shadow: 0 1px 3px #c3c3c3;
}
.cont {
margin: 1px;
text-align: justify;
padding-bottom: 7px;
padding-left: 5px;
padding-right: 5px;
line-heigth: auto;
-webkit-box-shadow: 0 2px 0 #c3c3c3;
box-shadow: 0 2px 0 #c3c3c3;
border-radius: 15px 15px 0 0;
opacity: 0.8;
}
.item {
border-radius: 15px;
width: 180px;
height: 185px;
background-color: #FFF;
margin: 10px;
float: left;
-webkit-box-shadow: 0 1px 3px #c3c3c3;
box-shadow: 0 1px 3px #c3c3c3;
overflow: hidden;
-webkit-transition: box-shadow 0.2s ease-in-out;
-o-transition: box-shadow 0.2s ease-in-out;
-webkit-transition: -webkit-box-shadow 0.2s ease-in-out;
transition: -webkit-box-shadow 0.2s ease-in-out;
transition: box-shadow 0.2s ease-in-out;
transition: box-shadow 0.2s ease-in-out, -webkit-box-shadow 0.2s ease-in-out;
}
.item2 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
border-radius: 15px;
width: 50px;
height: 50px;
background-color: #FFF;
-webkit-box-shadow: 0 1px 3px #c3c3c3;
box-shadow: 0 1px 3px #c3c3c3;
overflow: hidden;
-webkit-transition: box-shadow 0.2s ease-in-out;
-o-transition: box-shadow 0.2s ease-in-out;
-webkit-transition: -webkit-box-shadow 0.2s ease-in-out;
transition: -webkit-box-shadow 0.2s ease-in-out;
transition: box-shadow 0.2s ease-in-out;
transition: box-shadow 0.2s ease-in-out, -webkit-box-shadow 0.2s ease-in-out;
cursor: pointer;
}
.fatturato2 {
border-radius: 15px;
width: 400px;
height: 50px;
background-color: #FFF;
margin: 10px;
float: left;
-webkit-box-shadow: 0 1px 3px #c3c3c3;
box-shadow: 0 1px 3px #c3c3c3;
overflow: hidden;
-webkit-transition: box-shadow 0.2s ease-in-out;
-o-transition: box-shadow 0.2s ease-in-out;
-webkit-transition: -webkit-box-shadow 0.2s ease-in-out;
transition: -webkit-box-shadow 0.2s ease-in-out;
transition: box-shadow 0.2s ease-in-out;
transition: box-shadow 0.2s ease-in-out, -webkit-box-shadow 0.2s ease-in-out;
}
.fatturato {
-webkit-box-flex: 1;
-webkit-flex: 1 0 100%;
-ms-flex: 1 0 100%;
flex: 1 0 100%;
margin-top: 1em;
border-radius: 15px;
background-color: #FFF;
-webkit-box-shadow: 0 1px 3px #c3c3c3;
box-shadow: 0 1px 3px #c3c3c3;
overflow: hidden;
-webkit-transition: box-shadow 0.2s ease-in-out;
-o-transition: box-shadow 0.2s ease-in-out;
-webkit-transition: -webkit-box-shadow 0.2s ease-in-out;
transition: -webkit-box-shadow 0.2s ease-in-out;
transition: box-shadow 0.2s ease-in-out;
transition: box-shadow 0.2s ease-in-out, -webkit-box-shadow 0.2s ease-in-out;
}
.item img:hover, .item2 img:hover {
-webkit-box-shadow: 0 0 8px #C80815, 0 0 8px #C80815;
box-shadow: 0 0 8px #C80815, 0 0 8px #C80815;
}
.item img, .item2 img {
display: block;
width: 100%;
-webkit-box-shadow: 0 2px 1px #c3c3c3;
box-shadow: 0 2px 1px #c3c3c3;
border-radius: 15px 15px 0 0;
opacity: 0.8;
-webkit-transition: opacity 0.2s ease-in-out;
-o-transition: opacity 0.2s ease-in-out;
transition: opacity 0.2s ease-in-out;
}
.item img:hover, .item2 img:hover, .mex cont:hover {
opacity: 1;
}
.item h3, .fatturato2 h3 {
font-family: Lato, Arial, Helvetica, sans-serif;
font-size: 105%;
font-weight: normal;
padding: 5px 0 0 8px;
color: #2d2d2d;
text-decoration: none;
}
.mex h3 {
font-family: Lato, Arial, Helvetica, sans-serif;
font-size: 105%;
font-weight: normal;
padding: 5px 0 0 6px;
color: #2d2d2d;
text-decoration: none;
}
.item h3 a, .mex h3 a {
text-decoration: none;
color: #2d2d2d;
}
.mex p1 {
font-family: Lato, Arial, Helvetica, sans-serif;
font-size: 70%;
font-weight: normal;
text-decoration: none;
}
.item p, .mex p, .fatturato2 p {
font-family: Lato, Arial, Helvetica, sans-serif;
font-size: 70%;
font-weight: normal;
padding: 0 0 0 8px;
/*color:#fdae42;*/
color: #C80815;
text-decoration: none;
}
/* ----------------------- WORK LINKS END ------------------------- */
.icon {
float: right;
width: 32px;
margin: 95px 0 2px 4%;
opacity: 0.85;
}
.icon:hover {
opacity: 1;
}
/* ---------------------- RESPONSIVE STUFF - ONLY TOUCH IF YOUR'E CONFIDENT WITH CSS ---------------------- */
@media only screen and (max-width: 1279px) {
.wrapper {
width: 95%;
}
}
@media only screen and (max-width: 1105px) {
#work {
width: 900px;
}
.item {
width: 164px;
height: 170px;
margin: 8px;
}
}
@media only screen and (max-width: 999px) {
#work {
width: 750px;
}
.item {
width: 136px;
height: 144px;
margin: 7px;
}
.item h3, .mex h3 {
font-size: 90%;
}
.item p, .mex p, .mex p1 {
font-size: 60%;
}
}
@media only screen and (max-width: 835px) {
#work {
width: 650px;
}
.item {
width: 116px;
height: 121px;
margin: 7px;
}
.item h3, .mex h3 {
font-size: 75%;
}
.item p, .mex p, .mex p1 {
font-size: 40%;
}
}
@media only screen and (max-width: 860px) {
header h1 {
font-size: 110%;
}
header h2 {
font-size: 80%;
}
}
@media only screen and (max-width: 720px) {
#work {
width: 99%;
}
.item {
width: 172px;
height: 178px;
margin: 8px;
}
.item h3 {
font-size: 130%;
}
.mex p1 {
font-size: 100%;
}
.mex h3 {
font-size: 100%;
}
.item p, .mex p {
font-size: 90%;
}
}
@media only screen and (max-width: 510px) {
#work {
width: 300px;
}
.item {
width: 136px;
height: 140px;
margin: 7px;
}
.item h3 {
font-size: 75%;
}
.mex p1 {
font-size: 50%;
}
.item p, .mex p, .mex h3 {
font-size: 40%;
}
}
.switch {
position: relative;
width: 12rem;
height: 2rem;
margin-right: 20px;
font: normal 11px/22px Arial, Sans-Serif;
font-weight: bold;
text-transform: uppercase;
-webkit-transition: all .3s ease-in;
-o-transition: all .3s ease-in;
transition: all .3s ease-in;
background-color: #eee;
-webkit-tap-highlight-color: transparent;
}
.switch input {
opacity: 0;
position: absolute;
top: 0;
left: 0;
width: 50%;
height: 2rem;
z-index: 2;
cursor: pointer;
background-color: transparent;
}
.switch input:first-of-type {
left: 0%;
}
.switch input:last-of-type {
left: 50%;
}
.switch input:checked {
cursor: default;
}
.switch input + label {
position: absolute;
width: 50%;
background-color: transparent;
line-height: 2rem;
text-align: center;
z-index: 1;
}
.switch input + label:first-of-type {
left: 0%;
}
.switch input + label:last-of-type {
left: 50%;
}
.switch__selection {
-webkit-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
position: absolute;
top: 0;
display: block;
background-color: #ea7172;
width: 50%;
height: 100%;
pointer-events: none;
}
.s-hidden {
visibility: hidden;
padding-right: 10px;
}
.select {
width: 100px;
-webkit-tap-highlight-color: transparent;
height: 32px;
cursor: pointer;
display: inline-block;
position: relative;
font: normal 11px/22px Arial, Sans-Serif;
letter-spacing: 1px;
color: black;
}
.styledSelect {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
height: 32px;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
padding: 1em 10px;
background-color: #eee;
font-weight: bold;
}
/**___ arrow for select input */
/*.styledSelect:after {
content: "";
width: 0;
height: 0;
border: 5px solid transparent;
border-color: black transparent transparent transparent;
position: absolute;
top: 13px;
right: 6px;
}*/
.styledSelect:active, .styledSelect.active {
background-color: #eee;
}
.options {
display: none;
position: absolute;
top: 100%;
right: 0;
left: 0;
z-index: 999;
margin: 0 0;
padding: 0 0;
list-style: none;
border: 1px solid #ccc;
background-color: white;
-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
border-top: none;
height: 150px;
overflow-y: scroll;
}
.options::-webkit-scrollbar {
width: 0px;
background-color: transparent;
}
.options li {
padding: 1em;
margin: 0;
text-align: center;
-webkit-tap-highlight-color: #ea7172;
}
.options li:hover {
background-color: #ea7172;
color: white;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment