Monday Wheather Report : March 2, 2020

HTML

<!DOCTYPE html>
<html lang="it">

<head>
<meta http-equiv="content-type"
content="text/html; charset=UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1,
shrink-to-fit=no">
<meta name="generator"
content="AlterVista - Editor HTML">
<title> </title>

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

<script src="https://code.jquery.com/jquery-3.1.1.min.js"
integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
crossorigin="anonymous"> </script>

<link rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css">
<script src="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.js">
</script>

<style>

body, main, section, article, div, p,
span, header, footer { font-size:1em; overflow:auto !important; }

main{ margin-top:4.5em; margin-bottom:0.0em;
border-top:solid 0em maroon;
border-bottom:solid 0em maroon;
border-left:solid 0.2em maroon !important;
border-right:solid 0.2em maroon !important;
padding:0.4em;
background-color:rgba(222,184,135,0.25); /* burly wood */
color:black; }

main{ /* width:100%; height:100%; */ }

section{
margin-left:4em !important;margin-right:4em !important;
margin-top:0em; margin-bottom:0em;
font-family:monospace;}

header, footer{ margin-top:4.5em; }

img{ width:100%;}

.centro{ text-align:center !important;
margin:auto !important; padding:0 !important; }

.sfondo{
background-image:url(https://ed-ora-andiamo.com/immagini/carta01x.gif);
background-repeat: repeat;
background-attachment: fixed;
background-color:rgba(253,245,230,0.5); /* old lace */
}

.bordo{border:solid 0px lime !important;}

/*
.bordo000{border:solid 2px black !important;}

.bordo111{border:solid 2px red !important;}
.bordo121{border:solid 2px orange !important;}
.bordo131{border:solid 2px green !important;}
*/

.bordo4{font-size:1.2em;border:solid 2px gray;}

</style>

</head>

<body onload="AttendereLoading()" class="sfondo bordo0" >
<main class="bordo1">

<section class="ui grid container centro bordo2">
<article class="sixteen wide left aligned column bordo3">
<div class="bordo4" style="text-align:center">
<h2>Sunday Wheather Report : March The First 2020</h2>
</div>
</article>
</section>

<section class="ui grid container centro bordo2">
<article class="sixteen wide left aligned column bordo3">
<div class="bordo4" style="text-align:center">
</div>
</article>
</section>

<section class="ui grid container centro bordo2">
<article class="eight wide left aligned column bordo3">
<div class="bordo4" style="text-align:center">
</div>
</article>
<article class="eight wide left aligned column bordo3">
<div class="bordo4" style="text-align:center">
</div>
</article>

</section>

<section class="ui grid container centro bordo2">
<article class="four wide left aligned column bordo3">
<div class="bordo4" style="text-align:center">
</div>
</article>
<article class="four wide left aligned column bordo3">
<div class="bordo4" style="text-align:center">
</div>
</article>

<article class="four wide left aligned column bordo3">
<div class="bordo4" style="text-align:center">
</div>
</article>
<article class="four wide left aligned column bordo3">
<div class="bordo4" style="text-align:center">
</div>
</article>

</section>

<section class="ui grid container centro bordo2">
<article class="two wide left aligned column bordo3">
<div class="bordo4" style="text-align:center">
</div>
</article>
<article class="two wide left aligned column bordo3">
<div class="bordo4" style="text-align:center">
</div>
</article>

<article class="two wide left aligned column bordo3">
<div class="bordo4" style="text-align:center">
</div>
</article>
<article class="two wide left aligned column bordo3">
<div class="bordo4" style="text-align:center">
</div>
</article>
<article class="two wide left aligned column bordo3">
<div class="bordo4" style="text-align:center">
</div>
</article>
<article class="two wide left aligned column bordo3">
<div class="bordo4" style="text-align:center">
</div>
</article>

<article class="two wide left aligned column bordo3">
<div class="bordo4" style="text-align:center">
</div>
</article>
<article class="two wide left aligned column bordo3">
<div class="bordo4" style="text-align:center">
</div>
</article>

</section>

</main>

<div id="aggiornamento">:::</div>
<div id="fine" style="">...</div>

<script src="fine.js" async></script>

<script>
document.getElementById( aggiornamento ).innerHTML=
<section class="ui segment bordo2" +
style="margin-top:2em; +
margin-bottom:2em; +
background-color:rgba(222,184,135,0.2); +
" +
+
style=" +
+
background-color:burlywood; +
background-color:rgba(222,184,135,0.2); +

+
+

"> +
+
+
<table +
+
style="margin:0 auto;text-align:center;" +
> +
<tr> +

<td class="bordo4" +
style=" +
font-size:1em; +
font-variant:small-caps;"> +

Pagina aggiornata il +

01 marzo 2020 +

0910 +

</td> +
</tr> +
</table> +
</section> +

</script>

</body>

</html>

Javascript

PHP

<?php
$actual_link = "http://{$_SERVER['HTTP_HOST']}{$_SERVER['REQUEST_URI']}";

$oggi_est = date("l") . " ";
$oggi_est = $oggi_est . date("Y/m/d");
$oggi_est_time = date("h:i:sa");

$fp = fopen('/membri/edoraandiamo/text.txt', 'w');
fwrite($fp, $actual_link. " " .$oggi_est. " ". $oggi_est_time);
fclose($fp);

$myfile = fopen("/membri/edoraandiamo/logs.txt", "a") or die("Unable to open file!");
// $actual_link = "cronologia";
fwrite($myfile, "\n". $actual_link. " " .$oggi_est. " ". $oggi_est_time);
fclose($myfile);

?>

Tutorial

Attivazione del modale :

Al quale corrisponde un div con id rr-modale contenitore e una class corrispondente

Definizione delle classes

.rr-modale{
position:fixed;
top:0;right:0; bottom:0;left:0;
background-color:rgba(0,0,0,1.0);
pointer-events:none; opacity:0;
overflow:auto !important;
z-index:100; }

.rr-modale:target { pointer-events: auto; opacity:1;}

La class rr-modale:target e' critica in quanto attiva alla pressione del tasto (i) le istruzioni presenti nella class rr-modale che altrimenti sembra inerte.Tenere conto della necessita' del tasto chiudi e della backdoor altrimenti sara' impossibile chiudere il modale se non chiudendo la finestra del browser.

<div id="rr-modale"
class="rr-modale">
<a href="#">chiudi</a>
</div>

chiudi

Tutorial

Attivazione del dropmenu :

.rr-dropmenu000{ position:fixed;top:0;left:0; width:100%;height:3.4em; overflow:initial !important; }

.rr-dropmenu111{ position:fixed;top:0;left:0; width:100%;height:3.4em; overflow:initial !important; }

.rr-dropmenu121{ overflow:initial !important; }

.rr-dropmenu131{ display:none; overflow:initial !important; }

.rr-dropmenu111:hover .rr-dropmenu131{ width:100%; display:block; }

.rr-dropmenu111:hover .rr-dropmenu121{ display:none; }

Tutorial

AttendereLoading :

.rr-bordoloading{
position:fixed;
top:50%;
top:50%;
left:0px;
left:70%;
left:50%;
margin-left:-12em;
margin-left:-8em;
margin-top:-1.5em;
background-color:transparent;
font-family:monospace;
font-variant:small-caps;
border-radius:4px;
border:solid 0px maroon;

z-index:99;
}

.rr-loading-stile{
background-color:black;
color:white;
font-size:2.05em;
font-family:sans-serif;
padding:0.5em;
padding:0.0em;
border-radius:4px;

}

.rr-lampeggio
{ animation: blinker 0.5s
linear infinite; }
@keyframes blinker { 50%
{ opacity: 0; } }

Loading Loading...

Javascript per AttendereLoading