<!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>
Struttura del HTML
head e dipendenze semanti google material icons
Fogli di style definizione delle classes personalizzate e per debugging
chiusura head
<style> body, main, section, article, div, p, span, header, footer {font-size:1em;} main{ margin-top:72px; margin-bottom:72px; border-top:solid 1em maroon; border-bottom:solid 1em maroon; border-left:solid 2em maroon; border-right:solid 2em maroon; padding:0.4em; color:black;} section{margin-left:4em;margin-right:4em;font-family:monospace;} header, footer{ margin-top:72px; } .center{ text-align:center !important; margin:auto !important; padding:0 !important; } .commento{ width:80%;height:40%; padding-left:4em;padding-top:4em; font-size:1em; font-family:monospace; text-align:left !important; background-color: rgba(204,166,128, 1.0) !important; display: none ; } .bordo0, .bordo1, .bordo2, .bordo3, .bordo4, .bordo5, .bordo6, .bordo7, .bordo8, .bordo9, .bordo10, .bordo11 {border:solid 1px blue;} /* debugging */ .bordo10{border:solid 0.2em orange !important;} .bordo11{border:solid 0.1em red !important;} .ui.transparent{background-color:transparent; color:transparent;} </style> </head>
Body
Immagine di background colore di sfondo spinner funzione javascript
<body onload="AttendereLoading()"
style="background-image:url(https://ed-ora-andiamo.com/immagini/carta01.gif); background-repeat: repeat;
background-attachment: fixed;
background-color:rgba(253,245,230,1);
">
main
chiusura
<main class="">
<h4 class="ui segment inverted tiny left aligned" style="font-variant:small-caps;">Pagina aggiornata il ... 2020 02 19</h4> </section> </main>
Javascript
modale backdoor dropmenu loading
<div id="rr-MBDLS-script">...</div>
<script>
document.getElementById('rr-MBDLS-script').innerHTML= ' <style>'+ ' .rr-bordomodale{ border:solid 4px gray; }'+
' .rr-bordocontenutomodale{ padding:6px; }'+ ' .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;'+
' z-index:100; }'+ ' .rr-modale:target {'+
' pointer-events: auto; opacity:1;}'+
' .rr-contenutomodale{ position:static;'+
' width:70%; height:70%; margin-left:15.0%;'+
' padding:0.5em; border-radius:4px;'+ ' background-color: rgba(255,229,204, 1.0);'+ ' background-color: rgba(204,166,128, 1.0);'+ ' overflow:auto; } </style>'+
' <div id="rr-modale" class="rr-modale">'+
' <div class="rr-contenutomodale">'+
' '+
'<p>'+
' <span style="margin:0.5em;'+
' border:solid 0px black;'+
' width:auto; height:auto; '+
' "> '+
' <a href="#" '+
' class="material-icons"'+
' style=" '+
' background-color:orange; '+
' background-color:orange; '+
' color:black; '+
' font-size:2em;'+
' box-shadow:3px 3px 6px black;'+
' border-radius:4px; '+
' "> '+
' close </a> '+
' </span>'+ ' '+
'</p>'+
' '+
' '+
' '+
' '+
' '+
' '+
' '+
' '+
' '+
' '+
' '+
' '+
' '+
' '+
' '+
' '+
' '+
' '+
' '+
' '+
' '+
' <hr/>'+
' <article style="height:100%;">'+
' '+
' '+
' <p> '+
' <a href="http://semantic-ui.com/"> '+
' <i class="material-icons" '+
' style="font-size:2em;"> '+
' home</i>'+
' <i style="font-size:1.2em;font-style:normal;'+
' font-variant:small-caps;'+
' font-weight:bold;'+
' ">'+
' pagina iniziale '+
' </i>'+
'</a> '+
' '+
' </p> '+
' '+
' '+
' '+
' '+
' '+
' '+
' <p> '+
' <a href="https://it.altervista.org/"> '+
' <i class="material-icons" '+
' style="font-size:2em;'+
' "> '+
' map</i>'+ '<i style="font-size:1.2em;font-style:normal;'+
' font-variant:small-caps;'+
' font-weight:bold;'+
'">'+
'mappa del sito</i> </a> '+
' '+
' </p> '+
' '+
' '+
' '+
' '+
' '+
' '+
' '+
' '+
' '+
' </article> '+
' </div>'+
' </div>'+
' '+
' '+
' '+
' '+
' '+
' <style> /* backdoor */ '+
' .rr-backdoor{ position: fixed; bottom: 0px;'+
'left:0px; font-size:small; '+
'background-color: rgba(153,76,0, 0.5);'+
'background-color:gray;'+ 'background-color:rgba(128,128,128,0.2);'+
'color: rgba(189,183,107, 1.0);'+
'color: rgba(128,128,128, 0.2);'+
' border-radius:4px;'+
'z-index:101;} '+
'</style> '+
' <a href="#" class="material-icons" > '+
' <span class="rr-backdoor" '+
' font-family:sans-serif !important;'+
'>face</span> '+
' </a>'+
' <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> '+
''+' <style> '+
' dropmenu versione 20020 02 14'+
'/* debugging */ '+
' .rr-bordo000{border:solid 0px lime;}'+
' .rr-bordo111{border:solid 0px blue;} '+
' .rr-bordo121{border:solid 0px orange;} '+
' .rr-bordo131{border:solid 0px fuchsia;} '+
''+
'.rr-dropmenu000{'+ ' position: fixed;'+
' top: 0; '+
' left:0; width:100%; '+
''+ ' height:3em; '+
' } '+
'.rr-dropmenu111{'+
' position: fixed;'+ ' top: 0px; '+
' left:50%;'+ ' margin-left:-50%; '+
' } '+
'.rr-dropmenu121{ '+
' margin-left:-0em;'+ ' border-radius:4px;'+
' } '+
''+
'.rr-dropmenu131{position:relative; display:none;} '+
''+
' .rr-dropmenu111:hover .rr-dropmenu131{ '+
' width:32em; '+' width:24em; '+
' height:3em; '+
''+
''+
' border-radius:4px; '+
' display:block;'+
' } '+
' .rr-dropmenu111:hover .rr-dropmenu121{'+
' display:none;}'+
' '+
''+' </style> '+
' <div class="'+
'rr-dropmenu000 rr-bgc000 rr-bordo000'+
'"> </div> '+
'<div class="rr-dropmenu111 rr-bordo111 rr-bgc111">'+
'<div class="material-icons rr-dropmenu121 rr-bgc121"'+
' style="border:solid 0.1px rgba(0,0,0,0.2);">'+
'menu</div>'+
''+
'<div class="rr-dropmenu131 rr-bordo131 rr-bgc131">'+
''+
'<a href="#rr-modale">'+
'<span class="material-icons" '+
'style="position:absolute;'+ 'left:30%;'+
'font-size:3em; '+
'border-radius:4px;'+
'">'+
'info</span>'+
'</a>'+
''+
''+
'<a href="#fine">'+
'<span class="material-icons"'+ 'style="position:absolute; left:60%;'+
'font-size:3em;'+
'border-radius:4px;'+
'">'+
'keyboard_arrow_down </span>'+
'</a>'+
''+
'<a href="#">'+
'<span class="material-icons" '+
'style="position:absolute; left:80%;'+
'font-size:3em;'+
'border-radius:4px;'+
'">'+
'keyboard_arrow_up </span>'+
'</a>'+
''+
' </div> '+
' </div> '+
''+
'<style>'+
' /* vers 20200213 */ '+
'.rr-bordoloading{ position:fixed;'+
'top:0px;'+'top:4em;'+'top:50%;'+
'left:0px;'+'left:50%;'+
'margin-left:-12em;'+
'margin-top:-1em; '+
' '+
'background-color:transparent;'+
' '+
' '+
'font-family:monospace;'+
'font-variant:small-caps;'+
'border:solid 0px orange; '+
'border-radius:4px; '+
'z-index:99; }'+
'.rr-loading-stile{ '+
' background-color:black;'+
' color:white; '+
' font-size:2.05em; '+
' font-family:sans-serif; '+
' padding:0.5em;'+
' border-radius:4px;'+
' '+
'}'+
'.rr-lampeggio'+
'{ animation: blinker 2.5s linear infinite; }'+
'@keyframes blinker { 50% { opacity: 0; } }'+
'</style>'+
'<div id="rr-AttendereLoading"'+ ' class="rr-bordoloading" '+
' style="background-color:transparent;" '+
' >'+
'<span style="background-color:transparent;">'+
''+
'</span>'+
'<span class="ui secondary loading massive button ">'+
' '+
'Loading'+
'</span>'+
'<span class="ui massive secondary button"'+
'> Loading...'+
'<span id="rr-percento">'+
'</span>'+
'</span>'+
'</div>'+
'' function AttendereLoading() { if(document.all) { document.all["rr-AttendereLoading"].style.visibility="hidden"; } else if (document.getElementById) { node= document.getElementById("rr-AttendereLoading"). style.visibility="hidden"; } } var percento=document.getElementById("rr-percento"); var contatore=1; var intervallo=setInterval( function() { percento.innerHTML=contatore+"%"; contatore++; if (contatore===101) {clearInterval(intervallo);} } , 30000) </script>
<script>
document.getElementById('rr-MBDLS-script').innerHTML= ' <style>'+ ' .rr-bordomodale{ border:solid 4px gray; }'+
' .rr-bordocontenutomodale{ padding:6px; }'+ ' .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;'+
' z-index:100; }'+ ' .rr-modale:target {'+
' pointer-events: auto; opacity:1;}'+
' .rr-contenutomodale{ position:static;'+
' width:70%; height:70%; margin-left:15.0%;'+
' padding:0.5em; border-radius:4px;'+ ' background-color: rgba(255,229,204, 1.0);'+ ' background-color: rgba(204,166,128, 1.0);'+ ' overflow:auto; } </style>'+
' <div id="rr-modale" class="rr-modale">'+
' <div class="rr-contenutomodale">'+
' '+
'<p>'+
' <span style="margin:0.5em;'+
' border:solid 0px black;'+
' width:auto; height:auto; '+
' "> '+
' <a href="#" '+
' class="material-icons"'+
' style=" '+
' background-color:orange; '+
' background-color:orange; '+
' color:black; '+
' font-size:2em;'+
' box-shadow:3px 3px 6px black;'+
' border-radius:4px; '+
' "> '+
' close </a> '+
' </span>'+ ' '+
'</p>'+
' '+
' '+
' '+
' '+
' '+
' '+
' '+
' '+
' '+
' '+
' '+
' '+
' '+
' '+
' '+
' '+
' '+
' '+
' '+
' '+
' '+
' <hr/>'+
' <article style="height:100%;">'+
' '+
' '+
' <p> '+
' <a href="http://semantic-ui.com/"> '+
' <i class="material-icons" '+
' style="font-size:2em;"> '+
' home</i>'+
' <i style="font-size:1.2em;font-style:normal;'+
' font-variant:small-caps;'+
' font-weight:bold;'+
' ">'+
' pagina iniziale '+
' </i>'+
'</a> '+
' '+
' </p> '+
' '+
' '+
' '+
' '+
' '+
' '+
' <p> '+
' <a href="https://it.altervista.org/"> '+
' <i class="material-icons" '+
' style="font-size:2em;'+
' "> '+
' map</i>'+ '<i style="font-size:1.2em;font-style:normal;'+
' font-variant:small-caps;'+
' font-weight:bold;'+
'">'+
'mappa del sito</i> </a> '+
' '+
' </p> '+
' '+
' '+
' '+
' '+
' '+
' '+
' '+
' '+
' '+
' </article> '+
' </div>'+
' </div>'+
' '+
' '+
' '+
' '+
' '+
' <style> /* backdoor */ '+
' .rr-backdoor{ position: fixed; bottom: 0px;'+
'left:0px; font-size:small; '+
'background-color: rgba(153,76,0, 0.5);'+
'background-color:gray;'+ 'background-color:rgba(128,128,128,0.2);'+
'color: rgba(189,183,107, 1.0);'+
'color: rgba(128,128,128, 0.2);'+
' border-radius:4px;'+
'z-index:101;} '+
'</style> '+
' <a href="#" class="material-icons" > '+
' <span class="rr-backdoor" '+
' font-family:sans-serif !important;'+
'>face</span> '+
' </a>'+
' <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> '+
''+' <style> '+
' dropmenu versione 20020 02 14'+
'/* debugging */ '+
' .rr-bordo000{border:solid 0px lime;}'+
' .rr-bordo111{border:solid 0px blue;} '+
' .rr-bordo121{border:solid 0px orange;} '+
' .rr-bordo131{border:solid 0px fuchsia;} '+
''+
'.rr-dropmenu000{'+ ' position: fixed;'+
' top: 0; '+
' left:0; width:100%; '+
''+ ' height:3em; '+
' } '+
'.rr-dropmenu111{'+
' position: fixed;'+ ' top: 0px; '+
' left:50%;'+ ' margin-left:-50%; '+
' } '+
'.rr-dropmenu121{ '+
' margin-left:-0em;'+ ' border-radius:4px;'+
' } '+
''+
'.rr-dropmenu131{position:relative; display:none;} '+
''+
' .rr-dropmenu111:hover .rr-dropmenu131{ '+
' width:32em; '+' width:24em; '+
' height:3em; '+
''+
''+
' border-radius:4px; '+
' display:block;'+
' } '+
' .rr-dropmenu111:hover .rr-dropmenu121{'+
' display:none;}'+
' '+
''+' </style> '+
' <div class="'+
'rr-dropmenu000 rr-bgc000 rr-bordo000'+
'"> </div> '+
'<div class="rr-dropmenu111 rr-bordo111 rr-bgc111">'+
'<div class="material-icons rr-dropmenu121 rr-bgc121"'+
' style="border:solid 0.1px rgba(0,0,0,0.2);">'+
'menu</div>'+
''+
'<div class="rr-dropmenu131 rr-bordo131 rr-bgc131">'+
''+
'<a href="#rr-modale">'+
'<span class="material-icons" '+
'style="position:absolute;'+ 'left:30%;'+
'font-size:3em; '+
'border-radius:4px;'+
'">'+
'info</span>'+
'</a>'+
''+
''+
'<a href="#fine">'+
'<span class="material-icons"'+ 'style="position:absolute; left:60%;'+
'font-size:3em;'+
'border-radius:4px;'+
'">'+
'keyboard_arrow_down </span>'+
'</a>'+
''+
'<a href="#">'+
'<span class="material-icons" '+
'style="position:absolute; left:80%;'+
'font-size:3em;'+
'border-radius:4px;'+
'">'+
'keyboard_arrow_up </span>'+
'</a>'+
''+
' </div> '+
' </div> '+
''+
'<style>'+
' /* vers 20200213 */ '+
'.rr-bordoloading{ position:fixed;'+
'top:0px;'+'top:4em;'+'top:50%;'+
'left:0px;'+'left:50%;'+
'margin-left:-12em;'+
'margin-top:-1em; '+
' '+
'background-color:transparent;'+
' '+
' '+
'font-family:monospace;'+
'font-variant:small-caps;'+
'border:solid 0px orange; '+
'border-radius:4px; '+
'z-index:99; }'+
'.rr-loading-stile{ '+
' background-color:black;'+
' color:white; '+
' font-size:2.05em; '+
' font-family:sans-serif; '+
' padding:0.5em;'+
' border-radius:4px;'+
' '+
'}'+
'.rr-lampeggio'+
'{ animation: blinker 2.5s linear infinite; }'+
'@keyframes blinker { 50% { opacity: 0; } }'+
'</style>'+
'<div id="rr-AttendereLoading"'+ ' class="rr-bordoloading" '+
' style="background-color:transparent;" '+
' >'+
'<span style="background-color:transparent;">'+
''+
'</span>'+
'<span class="ui secondary loading massive button ">'+
' '+
'Loading'+
'</span>'+
'<span class="ui massive secondary button"'+
'> Loading...'+
'<span id="rr-percento">'+
'</span>'+
'</span>'+
'</div>'+
'' function AttendereLoading() { if(document.all) { document.all["rr-AttendereLoading"].style.visibility="hidden"; } else if (document.getElementById) { node= document.getElementById("rr-AttendereLoading"). style.visibility="hidden"; } } var percento=document.getElementById("rr-percento"); var contatore=1; var intervallo=setInterval( function() { percento.innerHTML=contatore+"%"; contatore++; if (contatore===101) {clearInterval(intervallo);} } , 30000) </script>
Fine
tag di chiusura
<div id="fine"></div>
</body>
</html>
Titolo : section formato da solo TEXT
4 12
<section class="bordo2"> <h1 class="ui header">Titolo : section formato da solo TEXT </h1> <h2 class="ui header">4 12</h2> <article class="ui grid container "> <div class="four wide column left aligned bordo3"> </div> <div class="twelve wide column left aligned bordo3"> </div> <div class="sixteen wide column"></div> </article> </section>
Titolo : section formato da IMG con TEXT
4 12
immagine
<section class="bordo2"> <h1 class="ui header">Titolo : section formato da IMG con TEXT </h1> <h2 class="ui header">4 12</h2> <article class="ui grid container "> <div class="four wide column left aligned bordo3"> immagine </div> <div class="twelve wide column left aligned bordo3"> </div> <div class="sixteen wide column"></div> </article> </section>
Titolo : section formato da IMG-BTN con TEXT
4 4 8
http://placekitten.com/200/285
<section class="bordo2"> <h1 class="ui header">Titolo : section formato da IMG-BTN con TEXT </h1> <h2 class="ui header">4 4 8</h2> <article class="ui grid container "> <div class="four wide column left aligned bordo3"> </div> <div class="ui left aligned four wide column center bordo10" > <a href="http://semantic-ui.com" class="ui button olive large bordo11" > <div> </div> </a> </div> <div class="eight wide column left aligned bordo3"> http://placekitten.com/200/285 </div> <div class="sixteen wide column"></div> </article> </section>
Titolo : section formato da due coppie IMG-BTN con colonne 16:4
4 4 4 4
<section class="bordo2"> <h1 class="ui header">Titolo : section formato da due coppie IMG-BTN con colonne 16:4</h1> <h2 class="ui header">4 4 4 4</h2> <article class="ui grid container "> <div class="four wide column left aligned bordo3"> </div> <div class="ui left aligned four wide column center bordo10" > <a href="http://semantic-ui.com" class="ui button olive large bordo11" > <div> </div> </a> </div> <div class="four wide column left aligned bordo3"> </div> <div class="ui left aligned four wide column center bordo10" > <a href="http://semantic-ui.com" class="ui button violet large bordo11" > <div> </div> </a> </div> <div class="sixteen wide column"></div> </article> </section>
Titolo : section formato da due coppie IMG-BTN con colonna di separazione
4 3 2 4 3
<section class="bordo2"> <h1 class="ui header">Titolo : section formato da due coppie IMG-BTN con colonna di separazione</h1> <h2 class="ui header">4 3 2 4 3</h2> <article class="ui grid container "> <div class="four wide column left aligned bordo3"> </div> <div class="ui left aligned three wide column center bordo10" > <a href="http://semantic-ui.com" class="ui button olive large bordo11" > <div> </div> </a> </div> <div class="two wide column"></div> <div class="four wide column left aligned bordo3"> </div> <div class="ui left aligned three wide column center bordo10" > <a href="http://semantic-ui.com" class="ui button violet large bordo11" > <div> </div> </a> </div> <div class="sixteen wide column"></div> </article> </section>