Add mimify CSS and JS + favicon + htaccess + optimize page speed load
This commit is contained in:
parent
8c20d8a7f0
commit
58c9ed0120
|
|
@ -0,0 +1,25 @@
|
|||
RewriteEngine on
|
||||
|
||||
RewriteCond %{SERVER_PORT} 80
|
||||
RewriteRule .* https://%{HTTP_HOST} [R=301,L]
|
||||
|
||||
<IfModule mod_expires.c>
|
||||
ExpiresActive On
|
||||
ExpiresDefault "access plus 7200 seconds"
|
||||
ExpiresByType image/jpg "access plus 1 week"
|
||||
ExpiresByType image/jpeg "access plus 1 week"
|
||||
ExpiresByType image/png "access plus 1 week"
|
||||
ExpiresByType image/gif "access plus 1 week"
|
||||
ExpiresByType image/svg+xml "access plus 1 week"
|
||||
AddType image/x-icon .ico
|
||||
ExpiresByType image/ico "access plus 1 week"
|
||||
ExpiresByType image/icon "access plus 1 week"
|
||||
ExpiresByType image/x-icon "access plus 1 week"
|
||||
ExpiresByType text/css "access plus 1 week"
|
||||
ExpiresByType text/javascript "access plus 1 week"
|
||||
ExpiresByType text/html "access plus 7200 seconds"
|
||||
ExpiresByType application/xhtml+xml "access plus 7200 seconds"
|
||||
ExpiresByType application/javascript "access plus 1 week"
|
||||
ExpiresByType application/x-javascript "access plus 1 week"
|
||||
ExpiresByType application/x-shockwave-flash "access plus 1 week"
|
||||
</IfModule>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 1.4 KiB |
17
index.html
17
index.html
|
|
@ -5,16 +5,14 @@
|
|||
<meta charset="UTF-8">
|
||||
<title>Calculator</title>
|
||||
|
||||
<script src="ressources/jquery-3.3.1.min.js"></script>
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="ressources/materialize.min.css">
|
||||
<script src="ressources/materialize.min.js"></script>
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="ressources/index.css">
|
||||
<script src="ressources/index.js"></script>
|
||||
<link rel="icon" href="favicon.ico" type="image/x-icon"/>
|
||||
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/>
|
||||
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="ressources/materialize.min.css">
|
||||
<link rel="stylesheet" type="text/css" href="ressources/index.min.css">
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
|
@ -126,6 +124,11 @@
|
|||
|
||||
</div>
|
||||
|
||||
<script src="ressources/jquery-3.3.1.min.js"></script>
|
||||
<script async src="ressources/materialize.min.js"></script>
|
||||
|
||||
<script async src="ressources/index.min.js"></script>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -0,0 +1 @@
|
|||
body,html{height:100%;overscroll-behavior:contain}*{box-sizing:border-box}.button-input{position:relative;color:white;font-size:40px;display:inline-block;width:33.333333333333333%;text-align:center;height:25%;cursor:pointer}.buttons-operators .button-input{width:100%;height:20%}.button-input span{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.parenthesis{width:100%;height:20%}.parenthesis .button-input{width:50%;height:100%}.button-input.parenthesis div{display:inline-block;width:50%;position:relative;height:100%;font-size:40px}.container{height:100%;background:#1F1F1F;width:100%;z-index:0;padding:0;margin:0;max-width:none;display:block}.buttons-container{position:absolute;bottom:0;display:block;font-size:0;width:100%;height:60%;line-height:0;z-index:0}.buttons-numbers{display:inline-block;width:75%;height:100%;background:#000;vertical-align:top}.buttons-operators{display:inline-block;width:25%;height:100%;background:#232323}.display-container{height:40%;top:0;position:absolute;width:100%;z-index:0}.display{text-align:right;color:white;font-size:70px;position:absolute;width:94%;left:50%;top:50%;overflow:auto;line-height:initial;transform:translate(-50%,-50%);-webkit-transition:font 0.3s ease;-moz-transition:font 0.3s ease;-o-transition:font 0.3s ease;-ms-transition:font 0.3s ease;transition:font 0.3s ease}.error .display{color:#d00506;font-weight:600}.display.big{font-size:60px}.display.medium{font-size:50px}.display.small{font-size:40px}.clears-buttons-container{position:absolute;bottom:10px;right:10px;height:60px;width:130px;display:block;font-size:0;line-height:0}.clears-buttons-container div,.expand-buttons div{width:60px;height:60px;display:inline-block;border-radius:50%;vertical-align:top;background:#424242;font-size:16px;line-height:60px;text-align:center;color:white;font-weight:600;opacity:0;cursor:pointer;-webkit-transition:all 0.3s ease;-moz-transition:all 0.3s ease;-o-transition:all 0.3s ease;-ms-transition:all 0.3s ease;transition:all 0.3s ease}.clears-buttons-container.show div{opacity:1}#sup{margin-right:10px}.expand-buttons{position:absolute;top:calc(40% - 40px);left:50%;transform:translateX(-50%);width:35px;height:35px;z-index:2;-webkit-transition:all 0.3s ease;-moz-transition:all 0.3s ease;-o-transition:all 0.3s ease;-ms-transition:all 0.3s ease;transition:all 0.3s ease}.expand-buttons svg{-webkit-transition:all 0.3s ease;-moz-transition:all 0.3s ease;-o-transition:all 0.3s ease;-ms-transition:all 0.3s ease;transition:all 0.3s ease}.container.history .expand-buttons{top:calc(100% - 40px)}.container.history .expand-buttons svg{transform:rotate(180deg)}.main-history{width:100%;height:100%;position:absolute;background:#1F1F1F;z-index:1;top:-100%;-webkit-transition:all 0.3s ease;-moz-transition:all 0.3s ease;-o-transition:all 0.3s ease;-ms-transition:all 0.3s ease;transition:all 0.3s ease}.container.history .main-history{top:0}.day-container{color:white;border-bottom:1px solid rgba(97,97,97,.5);padding:10px;line-height:initial}.day-container:last-child{border-bottom:none}.day-container .title{color:#ffc107;font-weight:600;font-size:12px}.day-container .calcul-container{text-align:right;padding:3px 0;font-size:25px;color:white;font-family:sans-serif}.day-container .calcul-container .operation{overflow:auto}.day-container .calcul-container .result{color:#9e9e9e}.delete-history-container{background:black;height:40px;width:100%;font-size:17px;color:white;text-align:center;line-height:40px}.delete-history-container span{font-size:28px}.delete-history-container #delete-history{position:absolute;right:10px;top:0;line-height:40px;color:#9e9e9e;cursor:pointer}.history-container{height:calc(100% - 40px);overflow:auto}@media screen and (min-width:1020px){.calculator-container{display:inline-block;height:100%;width:60%;line-height:0;position:absolute;font-size:0}.main-history{display:inline-block;position:relative;width:40%;top:0;line-height:0;height:100%;vertical-align:top;font-size:0}.history-container{background-color:#161616}.expand-buttons{display:none}.container{overflow:hidden}}
|
||||
|
|
@ -0,0 +1,29 @@
|
|||
let operators=['+','-','/','*','.'];let operation="";let operations=[];function calculate(){try{let result=eval(operation);operations.unshift({calcul:operation,result,date:new Date().getTime()});operation=result.toString();localStorage.setItem("operations",JSON.stringify(operations));display();insertHistory()}catch(e){$(".display-container").addClass("error")}}
|
||||
function setFontSize($display){let length=operation.length;let clearsButtons=$(".clears-buttons-container");if(length>0){clearsButtons.addClass("show")}else{clearsButtons.removeClass("show")}
|
||||
if(length<=10){$display.removeClass("big");$display.removeClass("medium");$display.removeClass("small")}else if(length<=12){$display.addClass("big");$display.removeClass("medium");$display.removeClass("small")}else if(length<=14){$display.addClass("medium");$display.removeClass("big");$display.removeClass("small")}else if(length<=16){$display.addClass("small");$display.removeClass("big");$display.removeClass("medium")}}
|
||||
function roundDate(date){date.setHours(0);date.setMinutes(0);date.setSeconds(0);date.setMilliseconds(0);return date}
|
||||
function diff2Dates(date1,date2){let one_day=1000*60*60*24;let date1_ms=date1.getTime();let date2_ms=date2.getTime();let difference_ms=date2_ms-date1_ms;return Math.round(difference_ms/one_day)}
|
||||
function insertHistory(){let $html=$("<div></div>");let now=roundDate(new Date());let historyContainer=$(".history-container");if(operations.length>0){for(let operation of operations){let date=roundDate(new Date(operation.date));if($html.find(`.day-container[data-day="${ date.toDateString() }"]`).length>0){$html.find(`.day-container[data-day="${ date.toDateString() }"] .title`).after(`
|
||||
<div class="calcul-container">
|
||||
<div class="operation">${ operation.calcul }</div>
|
||||
<div class="result">${ operation.result }</div>
|
||||
</div>`)}else{let daysAgo="";let diff=diff2Dates(date,now);if(diff===0){daysAgo="Today"}else if(diff===1){daysAgo="Yesterday"}else{daysAgo=diff+" days ago"}
|
||||
$html.prepend(`
|
||||
<div class="day-container" data-day="${ date.toDateString() }">
|
||||
<div class="title">${ daysAgo }</div>
|
||||
<div class="calcul-container">
|
||||
<div class="operation">${ operation.calcul }</div>
|
||||
<div class="result">${ operation.result }</div>
|
||||
</div>
|
||||
</div>`)}}
|
||||
historyContainer.html($html.html());historyContainer.animate({scrollTop:historyContainer[0].scrollHeight},300)}else{historyContainer.empty()}}
|
||||
function supp(){if(operation.length>0){let $display=$(".display");operation=operation.slice(0,-1);$display.text(operation);$display.scrollLeft(1000);setFontSize($display);$(".display-container").removeClass("error")}}
|
||||
function ac(){if(operation.length>0){let $display=$(".display");operation="";$display.text(operation);$display.scrollLeft(1000);setFontSize($display)}
|
||||
$(".display-container").removeClass("error")}
|
||||
function display(){let $display=$(".display");$display.text(operation);$display.scrollLeft(1000);setFontSize($display);$(".display-container").removeClass("error")}
|
||||
function swipedetect(el,callback){let touchsurface=el,swipedir,startX,startY,distX,distY,threshold=150,restraint=100,allowedTime=300,elapsedTime,startTime,handleswipe=callback||function(swipedir){};touchsurface.addEventListener('touchstart',function(e){var touchobj=e.changedTouches[0];swipedir='none';dist=0;startX=touchobj.pageX;startY=touchobj.pageY;startTime=new Date().getTime()},!1);touchsurface.addEventListener('touchmove',function(e){},!1);touchsurface.addEventListener('touchend',function(e){var touchobj=e.changedTouches[0];distX=touchobj.pageX-startX;distY=touchobj.pageY-startY;elapsedTime=new Date().getTime()-startTime;if(elapsedTime<=allowedTime){if(Math.abs(distX)>=threshold&&Math.abs(distY)<=restraint){swipedir=(distX<0)?'left':'right'}
|
||||
else if(Math.abs(distY)>=threshold&&Math.abs(distX)<=restraint){swipedir=(distY<0)?'up':'down'}}
|
||||
handleswipe(swipedir)},!1)}
|
||||
$(window).on("load",function(){if(localStorage.getItem("operations")){operations=JSON.parse(localStorage.getItem("operations"));insertHistory()}
|
||||
$(document).on("click","#ac",ac);$(document).on("click","#sup",supp);$(document).on("click",".button-input",function(){let $elem=$(this);let input=$elem.find("span").html();if(input==="="){calculate()}else{operation+=$elem.find("span").html();display()}});$(document).on("click",".expand-buttons",()=>$(".container").toggleClass("history"));$(document).on("click","#delete-history",function(){operations=[];localStorage.setItem("operations",JSON.stringify(operations));insertHistory()});$(window).on("keypress",function(e){e.preventDefault();let char=e.charCode;console.log(char,String.fromCharCode(char));if(char===13){calculate()}else if(operators.indexOf(String.fromCharCode(char))>=0){operation+=String.fromCharCode(char)}else if(char>=48&&char<=57){operation+=String.fromCharCode(char)}else if(char===115||char===83){supp()}else if(char===97||char===65){ac()}
|
||||
display()});swipedetect(document.getElementsByClassName("display-container")[0],function(dir){if(dir==="down"){$(".container").addClass("history")}});let historyContainer=document.getElementsByClassName("history-container");swipedetect(historyContainer[0],function(dir){if(dir==="up"&&((historyContainer[0].scrollTop+historyContainer[0].offsetHeight)===historyContainer[0].scrollHeight)){$(".container").removeClass("history")}})})
|
||||
Loading…
Reference in New Issue