Libreria Software HIMD

In questa sezione sono contenuti gli step del progetto. Alcuni si possono anche trovare nel mio account Github

Il programma in questione usa largamente un metodo javascript documentGetElmentById il quale permette di costruire una struttura HTML con alcune proprietà interessanti. Una delle quali è la possibilità di calcolare le dimensioni degli elementi.

Normalmente se uno style è usato frequentemente viene creata una class che permette di trasferire dei valori costanti lungo tutto il codice HTML evitando in tal modo di procedere artigianalmente (o con replace) all'aggiornamento del codice.
Tale pratica è molto utile, ma non permette di usare il calcolo matematico per definire gli elementi.
Con document.GetElement è possibile fare un mix tra html css e calcolo aritmentico. Nel programma di seguito si troveranno molti esempi di questa tecnica.

Definizione del progetto:
La struttura è stata definita a grandi linee predentemente in queste pagine, sostanzialmente il codice HIMD (HeaderIframeModalDropdown) risulta un assemblaggio admin e medium derivato da BMU(BaseMediumUser) * riferimento a Github trasponendo il css in jscss

Si tratta in un certo modo della stessa idea sviluppata da sass con il precompilato. Una maniera per rendere più flessibile il codice HTML. naturalmente il jscss è paragonabile solo molto idealmente con sass Sviluppare un HTML con DGEBI comporta una conoscenza sufficiente del codice HTML, CSS e ovviamente anche di Javascript. Oggi è impossibile creare un sito web senza javascript, naturalmente ciò va parzialmente in cnflitto con lo spirito HTML poiché tale linguaggio nasce come tollerante di errori in quanto per certi versi l'interprete in caso di errori si sostituisce al programmatore aggiustando il codice errato (ma fino a un certo punto).
Inserire uno script ha come effetti un blocco di HTML nel caso lo script contenesse degli errori di sintassi. Javascript è molto meno rigido di Java o altri veri e propri linguaggi di programmazione tuttavia rende il feeling con la scrittura del codice html molto meno friendly.

Il codice jscss è formato dal dgebi vero e proprio e da un eventuale javascript puro aggiunto.
Il codice nel formato dgebi è formato dalla concatenazione di stringhe javascript.Le capacità editoriali dello scrittore di software sono misura dell'esperienza nella scrittura di codice jscss. Alcuni bug soprattutto allorquando il codice diventa molto corposo possono essere molto insidiosi. Il vantaggio rispetto al codice html è lo stop assoluto nel caso ci sia anche una minima sgrammaticatura.
Nel codice HIMD riportanto in Libreria si è fatto largo uso di commenti i quali risultano molto utili.

METODOLOGIA del progetto:
Il risultato del codice HIMD somiglia ad un progetto di template e in effeti così funziona, tuttavia la procedura di creazione parte da considerazioni poco deduttive.

La sezione B (base) si costruisce partendo dalle dimensioni width height percentuali di iframe e sono da considerare essenziali i relativi magic numbers. Fatto questo si procede con la definizione di header il quale contiene le icone
X ? !
X e ! si riferiscono a jQuery mentre ? è un drop in puro css. La costante in questo caso è header fixed altezza al quale si adatta il font-size. Si tratta ovviamente del fatto che iframe ha la priorità. Avere priorità iframe comporta anche una gestione di z-index poiché definiscono i livelli di sovrapposizione o startificazione dei menu a tendina. Nel caso di B iframe ha zindex 0 poiché i menu di scelta del contenuto devono essere visti in primo piano (sotto questo aspetto MODAL zindex100 TOOTLTIP zindex110).

La sezione M (medium) è caratterizzata dalla presenza delle voci dell'elenco il che richiede che l'elemento costante sia il font-size attorno al quale ruotano i calcoli della griglia (template).
Inoltre M caratterizzato da essere a mezza strada tra administrator e user, può essere utilizzato anche come file esterno in formato script.

Problemi si sincronismo. Quando M è esterno il caricamento da B può non essere sincronizzato se si utilizza link rel href. Per ovviare si utilizza lo script di caricamento sincrono il quale offre la assoluta garanzia che appena viene aggiorato M allora B ne utilizza la versione immediatamente aggiornata.

<!-- <script> var casuale = Math.random(); var esteso = casuale.toString(); esteso ="?"+esteso; var link_js_01 = document.createElement( "script" ); var nome_link_js_01 ="20200831-0945_elencoY_new.js"; nome_link_js_01 = nome_link_js_01+esteso; link_js_01.src = nome_link_js_01 ; document.getElementsByTagName( "head" )[0].appendChild( link_js_01 ); </script> -->

back ^

<!DOCTYPE html> <html lang="it"> <head> <meta charset="utf-8"> <meta name="generator" content="AlterVista - Editor HTML"/> <title> 0945 HIMD studio apps 20200830 hhmm html yyyymmdd </title> <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://use.fontawesome.com/2d0876dd08.js"></script> <style> html, body { font-family:monospace; background-color:oldlace; } </style> </head> <body> <main id="DGEBIhimd" class="material-icons">bug_report</main> <!-- --> <iframe src="http://edoraandiamo.altervista.org/" name="odlanir"></iframe> <!-- --> <script> // progetto fluid ha come centro iframe // sul quale devono prevalere // i menu a discesa usando zindex // es. iframe zindex0 menu zindex100 // iframe viene posizionato con un // discostamento dal top0 // // INTESTAZIONE_HEIGHT=3; // rem // default // // // utilizzo del calcolo al fine // di determinare i valori delle // variabili // INTESTAZIONE_HEIGHT=4; // rem I_H = INTESTAZIONE_HEIGHT ; // mirror // settaggi indipendenti da I_H IFRAME_WIDTH=80; IFRAME_HEIGHT=80; // percento // settaggi per centrare iframe IFRAME_LEFT=50; // percento IFRAME_MARGINE_LEFT=-40; //percento // // ANNOUNCEMENT_POS_RIGHT=5; // percento ANNOUNCEMENT_POS_TOP=0.5; // rem CLOSE_POS_LEFT=5; // percento CLOSE_POS_TOP=ANNOUNCEMENT_POS_TOP; // FONT_SIZE_ANNOUNCEMENT=2; // rem // FONT_SIZE_ANNOUNCEMENT=2.5; // rem // font size calcolato // FONT_SIZE_ANNOUNCEMENT=I_H*0.625; // rem FONT_SIZE_ANNOUNCEMENT=I_H*0.7; // rem FONT_SIZE_CLOSE=FONT_SIZE_ANNOUNCEMENT; // rem // HELP_CENTER_POS_RIGHT=50; // percento HELP_CENTER_POS_TOP=ANNOUNCEMENT_POS_TOP; FONT_SIZE_HELP_CENTER=FONT_SIZE_ANNOUNCEMENT; // // // M1T_CONTENITORE_LARGHEZZA=99.25; // percento M1T_CONTENUTO_LARGHEZZA=M1T_CONTENITORE_LARGHEZZA; M1T_CONTENITORE_ALTEZZA=80; // percento M1T_CONTENUTO_ALTEZZA=M1T_CONTENITORE_ALTEZZA; // // // document.getElementById("DGEBIhimd").innerHTML= // classes stile ' <style> ' + // definizione di iframe ' iframe { '+ ' position:fixed; '+ ' top:'+INTESTAZIONE_HEIGHT+'rem; '+ ' width:'+IFRAME_WIDTH+'%; '+ ' height:'+IFRAME_HEIGHT+'%; '+ ' left:'+IFRAME_LEFT+'%; '+ ' margin-left:'+IFRAME_MARGINE_LEFT+'%; '+ ' border:none; '+ ' z-index:0; '+ // zindex importante ' } '+ // sistemazione icone material ' '+ // '.m1t_announcement {'+ // ' position:fixed; '+ // ' top:'+ANNOUNCEMENT_POS_TOP+'rem ;'+ // ' right:'+ANNOUNCEMENT_POS_RIGHT+'% ; '+ // ' font-size:'+FONT_SIZE_ANNOUNCEMENT+'rem ; '+ // ' } '+ ' '+ ///////////////////////////////////////////// '.m1t_close {'+ // ' position:fixed; '+ // ' top:'+CLOSE_POS_TOP+'rem ;'+ // ' left:'+CLOSE_POS_LEFT+'% ; '+ // ' font-size:'+FONT_SIZE_CLOSE+'rem ; '+ // ' } '+ // ' '+ ' '+ ' '+ ' '+ ' '+ ' '+ ' '+ // definizione modal box ' .m1t { pointer-events:none; opacity:0; } '+ // ' .m1t:target { pointer-events:auto; opacity:1; } '+ ////////////////////////////////////////////////// ' .m1t_contenitore { position:fixed; z-index:100; } '+ ' .m1t_contenitore { top:'+INTESTAZIONE_HEIGHT+'rem; } '+ ' .m1t_contenitore { left:50%; margin-left:-50%; } '+ // ' .m1t_contenitore { width:99.25%; } '+ // 100% // ' .m1t_contenitore { height:80%; } '+ ' .m1t_contenitore { width:'+M1T_CONTENITORE_LARGHEZZA+ '%; } '+ // 100% ' .m1t_contenitore { height:'+M1T_CONTENITORE_ALTEZZA+ '%; } '+ ' .m1t_contenitore { background-color:rgba(0,0,0,0.25); } '+ ' .m1t_contenitore { border:solid 0.2rem transparent; } '+ ' '+ ' '+ ///////////////////////////////////////////////// ' .m1t_contenuto { position:fixed; z-index:100; } '+ ' .m1t_contenuto { top:'+INTESTAZIONE_HEIGHT+'rem; } '+ ' .m1t_contenuto { left:50%; margin-left:-50%; } '+ // ' .m1t_contenuto { width:99.25%; } '+ // 100% // ' .m1t_contenuto { height:80%; } '+ ' .m1t_contenuto { width:'+M1T_CONTENUTO_LARGHEZZA+ '%; } '+ // 100% ' .m1t_contenuto { height:'+M1T_CONTENUTO_ALTEZZA+ '%; } '+ ' .m1t_contenuto { background-color:rgba(0,0,0,0.25); } '+ ' .m1t_contenuto { overflow:auto; } '+ ' .m1t_contenuto { border:solid 0.2rem transparent; } '+ ' '+ ' '+ ///////////////////////////////////////////////// ' '+ ' .m1t_tooltip_contenuto { display:none; } '+ ' '+ ' .m1t_tooltip_contenitore:hover '+ ' .m1t_tooltip_contenuto { display:block; }'+ ' '+ ' '+ ' '+ ' .m1t_tooltip_contenitore { position:fixed; z-index:110; } '+ ' .m1t_tooltip_contenitore { top:'+HELP_CENTER_POS_TOP+'rem ; } '+ ' .m1t_tooltip_contenitore { right:50% ; } '+ ' .m1t_tooltip_contenitore { margin-right:-25% ; } '+ // ' .m1t_tooltip_contenitore { width:50% ; } '+ // ' .m1t_tooltip_contenitore { height:50% ; } '+ ' .m1t_tooltip_contenitore { background-color:transparent; } '+ ' .m1t_tooltip_contenitore { border:solid 0.2rem transparent ; } '+ ' '+ ' '+ ' '+ ' '+ ' .m1t_tooltip_contenuto { position:fixed; z-index:110; } '+ ' .m1t_tooltip_contenuto { top:'+HELP_CENTER_POS_TOP+'rem ; } '+ ' .m1t_tooltip_contenuto { right:50% ; } '+ ' .m1t_tooltip_contenuto { margin-right:-25% ; } '+ ' .m1t_tooltip_contenuto { width:50% ; } '+ ' .m1t_tooltip_contenuto { height:50% ; } '+ ' .m1t_tooltip_contenuto { font-family:monospace; } '+ ' .m1t_tooltip_contenuto { background-color:orange; } '+ ' .m1t_tooltip_contenuto { border-radius:0.2rem; } '+ ' .m1t_tooltip_contenuto { overflow:auto; } '+ ' .m1t_tooltip_contenuto { border:solid 0.2rem orange ; } '+ ' '+ ' '+ //////////////////////////////////////////// ///////////////// icona tooltip '.m1t_help_center {'+ // ' position:fixed; '+ // ' top:'+HELP_CENTER_POS_TOP+'rem ;'+ // ' RIGHT:'+HELP_CENTER_POS_RIGHT+'% ; '+ // ' font-size:'+FONT_SIZE_HELP_CENTER+'rem ; '+ // ' } '+ //////////////////////////////////////////// /////////////// utility ' '+ ' .dissolvenza { '+ ' animation: fadeIn ease 2.5s; '+ ' -webkit-animation: fadeIn ease 2.5s; '+ ' -moz-animation: fadeIn ease 2.5s; '+ ' -o-animation: fadeIn ease 2.5s; '+ ' -ms-animation: fadeIn ease 2.5s; '+ ' } '+ ' @keyframes fadeIn { '+ ' 0% {opacity:0;} '+ ' 100% {opacity:1;} '+ ' } '+ ' '+ ////////////////////////////////////////// ' '+ ' '+ ' '+ ' '+ ' '+ ' '+ ' </style> ' + ' '+ // // inizia codice ' <section> '+ // ///////////// ' <header> '+ // ' <a href="#m1t" ' + 'class="m1t_announcement material-icons">'+ // ' announcement'+ // ' </a> '+ // ' </header> '+ ' '+ ' '+ ' '+ /////////////////////////////////// ' <div id="m1t" class="m1t m1t_contenitore"> '+ //////////////// ' <a href="#" class="m1t_close"> '+ // 'close'+ // ' </a> '+ // /////////////// ' <div class="m1t_tooltip_contenitore"> '+ //////////////// // ' <span class="m1t_help_center material-icons"> '+ // ' help_center '+ // ' </span> '+ // // //////////////////// contenuto TOOLTIP ini ' <div class="m1t_tooltip_contenuto dissolvenza"> '+ //////////////////// // ' <article> '+ // titolo del tooltip ' '+ ' <div style="text-align:center; "> '+ ' <span style="font-variant:small-caps; '+ ' ">'+ 'help center!'+ ' </span> '+ ' </div> '+ '<hr/> '+ // // refresh del modal box NON reload browser // '<a href="javascript:location.reload(true)" '+ ' class="material-icons"> '+ ' '+ 'autorenew'+ ' '+ '</a> '+ ' '+ '<hr/> '+ '<a href="http://odlanir.altervista.org/logoutagenda.php"> '+ ' <span class="material-icons"> '+ ' exit_to_app '+ '</span> '+ '</a> '+ '<hr/> '+ '<a href="https://twitter.com/odlanir"> '+ '<span class="fa fa-twitter"></span> '+ '</a> '+ ' '+ ' </article> '+ ' '+ //////////////////// ' </div> '+ /////////////////// contenuto TOOLTIP fin // // ' </div> '+ // contenitore TOOLTIP fin // // ' '+ ' '+ ' '+ ' '+ ' '+ ' '+ /////////////////////////////////// ' '+ ' <div class="m1t_contenuto"> '+ /////////////// ' '+ ' '+ ' '+ // // ' <aside id="elencoY"> '+ // ' </aside> '+ ' '+ ' '+ ' '+ ' </div> '+ ' </div> '+ ' '+ ' </section> '+ ' ' ; </script> <!-- * * elencoYhimd * * --> <script> ////////////////////////////////// // // elencoY_new.js // elencoY debuggato 20200830-1900 // // le misure sono per la // maggior parte calcolate // in funzione del font size // ////////////////////////////////// var pagina_vuota="http://edoraandiamo.altervista.org/bmu/base/paginavuota.html"; var spaceone="&nbsp;&nbsp;&nbsp;&nbsp;"; var idA001=[ ["Altervista",""], ["http://edoraandiamo.altervista.org/", "indice"], ["http://rinaldorasa.altervista.org/", "blog"], ["http://rasarinaldo.altervista.org/", "rasarinaldo"], ["http://beatsupernovarasa.altervista.org/", "beatsupernova"], ["http://veneziamestremarghera.altervista.org/", "veneziamestremarghera"], ["http://mestreveneziamarghera.altervista.org/", "mestreveneziamarghera"], ["http://margheraveneziamestre.altervista.org/", "margheraveneziamestre"], ["https://venexia.altervista.org/", "venexia"], ["http://venexiadue.altervista.org/", "venexiadue"], ["http://noteapiedipagina.altervista.org/", "noteapiedipagina"], ["http://venexiatre.altervista.org/", "venexiatre"], ["http://venexiaiv.altervista.org/", "venexiaiv"], ["https://veneziav.altervista.org/", "veneziav"], ["http://veneziavi.altervista.org/", "veneziavi"], ["http://odlanir.altervista.org/", "odlanir"], [pagina_vuota, spaceone], [pagina_vuota, spaceone], [pagina_vuota, spaceone], [pagina_vuota, spaceone], [pagina_vuota, spaceone] ]; var idA002=[ ["Agenda 1989-2010",""], ["http://odlanir.altervista.org/mok/testTIPOdue-1992.html","1992"], ["http://odlanir.altervista.org/mok/testTIPOuno-1993.html","1993"], ["http://odlanir.altervista.org/mok/testTIPOdue-1994.html","1994"], ["http://odlanir.altervista.org/mok/testTIPOuno-1995.html","1995"], ["http://odlanir.altervista.org/mok/testTIPOdue-1996.html","1996"], ["http://odlanir.altervista.org/mok/testTIPOuno-1997.html","1997"], ["http://odlanir.altervista.org/mok/testTIPOdue-1998.html","1998"], ["http://odlanir.altervista.org/mok/testTIPOuno-1999.html","1999"], ["http://odlanir.altervista.org/mok/testTIPOdue-2000.html","2000"], ["http://odlanir.altervista.org/mok/testTIPOuno-2001.html","2001"], ["http://odlanir.altervista.org/mok/testTIPOdue-2002.html","2002"], ["http://odlanir.altervista.org/mok/testTIPOuno-2003.html","2003"], ["http://odlanir.altervista.org/mok/testTIPOdue-2004.html","2004"], ["http://odlanir.altervista.org/mok/testTIPOuno-2005.html","2005"], ["http://odlanir.altervista.org/mok/testTIPOdue-2006.html","2006"], ["http://odlanir.altervista.org/mok/testTIPOuno-2007.html","2007"], ["http://odlanir.altervista.org/mok/testTIPOdue-2008.html","2008"], ["http://odlanir.altervista.org/mok/testTIPOuno-2009.html","2009"], ["http://odlanir.altervista.org/mok/testTIPOdue-2010.html","2010"], [pagina_vuota,spaceone] ]; var idA003=[ ["Fotografie Venezia",""], [pagina_vuota,spaceone], [pagina_vuota,spaceone], [pagina_vuota,spaceone], [pagina_vuota,spaceone], [pagina_vuota,spaceone], [pagina_vuota,spaceone], [pagina_vuota,spaceone], [pagina_vuota,spaceone], [pagina_vuota,spaceone], [pagina_vuota,spaceone], [pagina_vuota,spaceone], [pagina_vuota,spaceone], [pagina_vuota,spaceone], [pagina_vuota,spaceone], [pagina_vuota,spaceone], [pagina_vuota,spaceone], [pagina_vuota,spaceone], [pagina_vuota,spaceone], [pagina_vuota,spaceone], [pagina_vuota,spaceone] ]; var idA004=[ ["Nuovo elenco",""], [pagina_vuota,spaceone], [pagina_vuota,spaceone], [pagina_vuota,spaceone], [pagina_vuota,spaceone], [pagina_vuota,spaceone], [pagina_vuota,spaceone], [pagina_vuota,spaceone], [pagina_vuota,spaceone], [pagina_vuota,spaceone], [pagina_vuota,spaceone], [pagina_vuota,spaceone], [pagina_vuota,spaceone], [pagina_vuota,spaceone], [pagina_vuota,spaceone], [pagina_vuota,spaceone], [pagina_vuota,spaceone], [pagina_vuota,spaceone], [pagina_vuota,spaceone], [pagina_vuota,spaceone], [pagina_vuota,spaceone] ]; var immagine_cat=["","https://pbs.twimg.com/profile_images/1021387736446586881/ZL7JJFpZ_400x400.jpg"]; var imA001= [ ["",""], ["","https://pbs.twimg.com/profile_images/1021387736446586881/ZL7JJFpZ_400x400.jpg"] ] ///////////// variabili css // A_FONT_SIZE = 1.5; ASIDE_FONT_SIZE = A_FONT_SIZE; // BORDER_RADIUS = A_FONT_SIZE * 0.13; // BLOCKQUOTE_PADDING = A_FONT_SIZE * 0.1; TD_HEIGHT = A_FONT_SIZE; // rem TD_PADDING = TD_HEIGHT * 0.32 ; // REM TD_A_PADDING = A_FONT_SIZE * 0.13; // REM // SELEZ_BORDER_LEFT = A_FONT_SIZE * 0.33 ; SELEZ_BORDER_RIGHT = A_FONT_SIZE * 0.33 ; // IMMA_TOP_OFFSET = - A_FONT_SIZE * 0.16; // REM IMMA_MARGIN_TOP = A_FONT_SIZE * 0.33; IMMA_PADDING_TOP = 0; IMMA_LARGHEZZA = A_FONT_SIZE; IMMA_ALTEZZA = A_FONT_SIZE; // SEMAFORO_LARGHEZZA = A_FONT_SIZE * 0.5 ; SEMAFORO_ALTEZZA = A_FONT_SIZE * 0.5 ; SEMAFORO_BORDO = A_FONT_SIZE * 0.13; SEMAFORO_RADIUS = 50 ; // PERCENT // EFFETTO_NEBBIA = 0.6 ; // document.getElementById("elencoY").innerHTML= ' '+ '<meta charset="utf-8">'+ // '<style> ' + // ' aside * { color:black; '+ 'font-size:'+ASIDE_FONT_SIZE+'rem; '+ 'font-family:sans-serif; '+ // font x debugging // 'font-family:monospace; '+ '} '+ 'aside { overflow:auto; } ' + ' article { } '+ ' blockquote { text-align:center; } '+ ' blockquote span:nth-child(2) { padding:'+BLOCKQUOTE_PADDING+'rem; } '+ ' blockquote span:nth-child(2) { background-color:white; } '+ ' blockquote span:nth-child(2) { border-radius:0.2rem; } '+ // /////////////////// table // ' blockquote span:nth-child(3) { display:none; } '+ // // // // 'table{ table-layout:fixed; width:100%; } '+ // // // // // ' td { position:relative; } '+ // ' td { padding:'+TD_PADDING+'rem; } '+ // ' td { height:'+TD_HEIGHT+'rem; } '+ ' td { text-align:center; } '+ ' td { background-color:white; } '+ ' td { background-color:rgba(255,255,255,0.5); } '+ // cornice debugging ' td { border:solid 0rem green; } '+ // ' td { overflow:hidden; } '+ // ' td { overflow:auto; } '+ // ' td { text-overflow:ellipsis; } '+ // // neutralizza i settaggi di default // per il tag a 'td>a, td>a:link, td>a:visited ' + '{ ' + // 'padding:'+TD_A_PADDING+'rem; ' + 'background-color:rgba(128,0,0,0.5); ' + 'color:white; ' + 'text-decoration: none; ' + // 'border-radius:'+BORDER_RADIUS+'rem; ' + // cornice debugging 'border:solid 0rem black; ' + 'overflow:auto; ' + '} ' + ' ' + // 'td>a { font-size:'+A_FONT_SIZE+'rem; } '+ // // ' .immA { position:absolute; } '+ ' .immA { top:'+IMMA_TOP_OFFSET+'rem; } '+ ' .immA { margin-top:'+IMMA_MARGIN_TOP+'rem; } '+ ' .immA { padding-top:'+IMMA_PADDING_TOP+'rem; } '+ ' .immA { width:'+IMMA_LARGHEZZA+'rem; } '+ ' .immA { height:'+IMMA_ALTEZZA+'rem; } '+ // cornice debugging ' .immA { border:solid 0rem olive; } '+ // ' .txtA { } '+ // // ///////////////////////////////////////// /////////////////// selezionato // // gestito da jQuery memorizza la voce // selezionata ultima memoria dando in tal // modo una brevissima cronologia di navigazione '.selezionato { ' + ' border-radius:'+BORDER_RADIUS+'rem; ' + ' background-color:rgb(255,165,0,0.8) !important; ' + ' color: black !important; ' + ' border-left:solid '+SELEZ_BORDER_LEFT+'rem white !important ; '+ ' border-right:solid '+SELEZ_BORDER_RIGHT+'rem white !important ; '+ ' } ' + ' ' + // //////////////// semaforo // ' ' + // quando esistono maggiore di 1 articoli // occorre segnalare a quale tipo di articolo // appartiene il file visualizzato // utilizzando un semaforo verde acceso vicino // al titolo article '.semaforo_verde { ' + ' height:'+SEMAFORO_ALTEZZA+'rem; ' + ' width:'+SEMAFORO_LARGHEZZA+'rem; ' + ' background-color: green; ' + ' border:solid '+SEMAFORO_BORDO+'rem white; ' + ' border-radius:'+SEMAFORO_RADIUS+'%; ' + ' display: inline-block; ' + ' } ' + ' ' + // // // /////////////////////////// // effetto nebbia applicato // agli articoli senza // semaforo verde // ' .NEBBIA { background-color:gray; } '+ ' .NEBBIA { opacity:'+EFFETTO_NEBBIA+'; } '+ // // // // ********************* // LISTA DELLE ECCEZIONI // ********************* ' article#A001, article#A002, '+ ' article#A003, article#A004 '+ ' { display:block; }'+ // // // '</style> ' + // articolo 001 ini '<article id="A001"> ' + ' <blockquote> ' + ' <span id="semaforo_A001"></span> ' + ' <span>'+idA001[0][0]+'</span> ' + ' <span>A001</span> ' + ' </blockquote> ' + '<table> ' + ' ' + '<tr> ' + '<td id="A001_X_001" class="NULLA_X_001">'+ '<a class="NULLA001" id="A001_001" href="' +idA001[1][0]+ '" target="odlanir"> ' +idA001[1][1]+''+'</a>'+ '<img class="immA" src="'+imA001[1][0]+'" alt="" title="" />'+ '<span class="txtA">'+ '</span>'+ '</td> ' + '<td id="A001_X_002" class="NULLA_X_001">'+ '<a class="NULLA001" id="A001_002" href="' +idA001[2][0]+ '" target="odlanir"> ' +idA001[2][1]+''+'</a>'+ '<img class="immA" src="'+imA001[1][0]+'" alt="" title="" />'+ '<span class="txtA">'+ '</span>'+ '</td> ' + '<td id="A001_X_003" class="NULLA_X_001">'+ '<a class="NULLA001" id="A001_003" href="' +idA001[3][0]+ '" target="odlanir"> ' +idA001[3][1]+''+'</a>'+ '<img class="immA" src="'+imA001[1][1]+'" alt="" title="" />'+ '<span class="txtA">'+ '</span>'+ '</td> ' + '<td id="A001_X_004" class="NULLA_X_001">'+ '<a class="NULLA001" id="A001_004" href="' +idA001[4][0]+ '" target="odlanir"> ' +idA001[4][1]+''+'</a>'+ '<img class="immA" src="'+imA001[1][0]+'" alt="" title="" />'+ '<span class="txtA">'+ ' '+ '</span>'+ '</td> ' + '</tr> ' + '<tr> ' + '<td id="A001_X_005" class="NULLA_X_001">'+ '<a class="NULLA001" id="A001_005" href="' +idA001[5][0]+ '" target="odlanir"> ' +idA001[5][1]+''+'</a>'+ '<img class="immA" src="'+imA001[1][0]+'" alt="" title="" />'+ '<span class="txtA">'+ '</span>'+ '</td> ' + '<td id="A001_X_006" class="NULLA_X_001">'+ '<a class="NULLA001" id="A001_006" href="' +idA001[6][0]+ '" target="odlanir"> ' +idA001[6][1]+''+'</a>'+ '<img class="immA" src="'+imA001[1][0]+'" alt="" title="" />'+ '<span class="txtA">'+ '</span>'+ '</td> ' + '<td id="A001_X_007" class="NULLA_X_001">'+ '<a class="NULLA001" id="A001_007" href="' +idA001[7][0]+ '" target="odlanir"> ' +idA001[7][1]+''+'</a>'+ '<img class="immA" src="'+imA001[1][0]+'" alt="" title="" />'+ '<span class="txtA">'+ '</span>'+ '</td> ' + '<td id="A001_X_008" class="NULLA_X_001">'+ '<a class="NULLA001" id="A001_008" href="' +idA001[8][0]+ '" target="odlanir"> ' +idA001[8][1]+''+'</a>'+ '<img class="immA" src="'+imA001[1][0]+'" alt="" title="" />'+ '<span class="txtA">'+ '</span>'+ '</td> ' + '</tr> ' + '<tr> ' + '<td id="A001_X_009" class="NULLA_X_001">'+ '<a class="NULLA001" id="A001_009" href="' +idA001[9][0]+ '" target="odlanir"> ' +idA001[9][1]+''+'</a>'+ '<img class="immA" src="'+imA001[1][0]+'" alt="" title="" />'+ '<span class="txtA">'+ '</span>'+ '</td> ' + '<td id="A001_X_010" class="NULLA_X_001">'+ '<a class="NULLA001" id="A001_010" href="' +idA001[10][0]+ '" target="odlanir"> ' +idA001[10][1]+''+'</a>'+ '<img class="immA" src="'+imA001[1][0]+'" alt="" title="" />'+ '<span class="txtA">'+ '</span>'+ '</td> ' + '<td id="A001_X_011" class="NULLA_X_001">'+ '<a class="NULLA001" id="A001_011" href="' +idA001[11][0]+ '" target="odlanir"> ' +idA001[11][1]+''+'</a>'+ '<img class="immA" src="'+imA001[1][0]+'" alt="" title="" />'+ '<span class="txtA">'+ '</span>'+ '</td> ' + '<td id="A001_X_012" class="NULLA_X_001">'+ '<a class="NULLA001" id="A001_012" href="' +idA001[12][0]+ '" target="odlanir"> ' +idA001[12][1]+''+'</a>'+ '<img class="immA" src="'+imA001[1][0]+'" alt="" title="" />'+ '<span class="txtA">'+ '</span>'+ '</td> ' + '</tr> ' + '<tr> ' + '<td id="A001_X_013" class="NULLA_X_001">'+ '<a class="NULLA001" id="A001_013" href="' +idA001[13][0]+ '" target="odlanir"> ' +idA001[13][1]+''+'</a>'+ '<img class="immA" src="'+imA001[1][0]+'" alt="" title="" />'+ '<span class="txtA">'+ '</span>'+ '</td> ' + '<td id="A001_X_014" class="NULLA_X_001">'+ '<a class="NULLA001" id="A001_014" href="' +idA001[14][0]+ '" target="odlanir"> ' +idA001[14][1]+''+'</a>'+ '<img class="immA" src="'+imA001[1][0]+'" alt="" title="" />'+ '<span class="txtA">'+ '</span>'+ '</td> ' + '<td id="A001_X_015" class="NULLA_X_001">'+ '<a class="NULLA001" id="A001_015" href="' +idA001[15][0]+ '" target="odlanir"> ' +idA001[15][1]+''+'</a>'+ '<img class="immA" src="'+imA001[1][0]+'" alt="" title="" />'+ '<span class="txtA">'+ '</span>'+ '</td> ' + '<td id="A001_X_016" class="NULLA_X_001">'+ '<a class="NULLA001" id="A001_016" href="' +idA001[16][0]+ '" target="odlanir"> ' +idA001[16][1]+''+'</a>'+ '<img class="immA" src="'+imA001[1][0]+'" alt="" title="" />'+ '<span class="txtA">'+ '</span>'+ '</td> ' + '</tr> ' + '<tr> ' + '<td id="A001_X_017" class="NULLA_X_001">'+ '<a class="NULLA001" id="A001_017" href="' +idA001[17][0]+ '" target="odlanir"> ' +idA001[17][1]+''+'</a>'+ '<img class="immA" src="'+imA001[1][0]+'" alt="" title="" />'+ '<span class="txtA">'+ '</span>'+ '</td> ' + '<td id="A001_X_018" class="NULLA_X_001">'+ '<a class="NULLA001" id="A001_018" href="' +idA001[18][0]+ '" target="odlanir"> ' +idA001[18][1]+''+'</a>'+ '<img class="immA" src="'+imA001[1][0]+'" alt="" title="" />'+ '<span class="txtA">'+ '</span>'+ '</td> ' + '<td id="A001_X_019" class="NULLA_X_001">'+ '<a class="NULLA001" id="A001_019" href="' +idA001[19][0]+ '" target="odlanir"> ' +idA001[19][1]+''+'</a>'+ '<img class="immA" src="'+imA001[1][0]+'" alt="" title="" />'+ '<span class="txtA">'+ '</span>'+ '</td> ' + '<td id="A001_X_020" class="NULLA_X_001">'+ '<a class="NULLA001" id="A001_020" href="' +idA001[20][0]+ '" target="odlanir"> ' +idA001[20][1]+''+'</a>'+ '<img class="immA" src="'+imA001[1][0]+'" alt="" title="" />'+ '<span class="txtA">'+ '</span>'+ '</td> ' + '</tr> ' + ' ' + '</table> ' + ' ' + '</article> ' + ' ' + ' ' + // articolo 001 fin // articolo 002 ini '<article id="A002"> ' + ' <blockquote> ' + ' <span id="semaforo_A002"></span> ' + ' <span>'+idA002[0][0]+'</span> ' + ' <span>A002</span> ' + ' </blockquote> ' + '<table> ' + ' ' + '<tr> ' + '<td id="A002_X_001" class="NULLA_X_002">'+ '<a class="NULLA002" id="A002_001" href="' +idA002[1][0]+ '" target="odlanir"> ' +idA002[1][1]+''+'</a>'+ '<img class="immA" src="'+imA001[1][0]+'" alt="" title="" />'+ '<span class="txtA">'+ '</span>'+ '</td> ' + '<td id="A002_X_002" class="NULLA_X_002">'+ '<a class="NULLA002" id="A002_002" href="' +idA002[2][0]+ '" target="odlanir"> ' +idA002[2][1]+''+'</a>'+ '<img class="immA" src="'+imA001[1][0]+'" alt="" title="" />'+ '<span class="txtA">'+ '</span>'+ '</td> ' + '<td id="A002_X_003" class="NULLA_X_002">'+ '<a class="NULLA002" id="A002_003" href="' +idA002[3][0]+ '" target="odlanir"> ' +idA002[3][1]+''+'</a>'+ '<img class="immA" src="'+imA001[1][0]+'" alt="" title="" />'+ '<span class="txtA">'+ '</span>'+ '</td> ' + '<td id="A002_X_004" class="NULLA_X_002">'+ '<a class="NULLA002" id="A002_004" href="' +idA002[4][0]+ '" target="odlanir"> ' +idA002[4][1]+''+'</a>'+ '<img class="immA" src="'+imA001[1][0]+'" alt="" title="" />'+ '<span class="txtA">'+ '</span>'+ '</td> ' + '</tr> ' + '<tr> ' + '<td id="A002_X_005" class="NULLA_X_002">'+ '<a class="NULLA002" id="A002_005" href="' +idA002[5][0]+ '" target="odlanir"> ' +idA002[5][1]+''+'</a>'+ '<img class="immA" src="'+imA001[1][0]+'" alt="" title="" />'+ '<span class="txtA">'+ '</span>'+ '</td> ' + '<td id="A002_X_006" class="NULLA_X_002">'+ '<a class="NULLA002" id="A002_006" href="' +idA002[6][0]+ '" target="odlanir"> ' +idA002[6][1]+''+'</a>'+ '<img class="immA" src="'+imA001[1][0]+'" alt="" title="" />'+ '<span class="txtA">'+ '</span>'+ '</td> ' + '<td id="A002_X_007" class="NULLA_X_002">'+ '<a class="NULLA002" id="A002_007" href="' +idA002[7][0]+ '" target="odlanir"> ' +idA002[7][1]+''+'</a>'+ '<img class="immA" src="'+imA001[1][0]+'" alt="" title="" />'+ '<span class="txtA">'+ '</span>'+ '</td> ' + '<td id="A002_X_008" class="NULLA_X_002">'+ '<a class="NULLA002" id="A002_008" href="' +idA002[8][0]+ '" target="odlanir"> ' +idA002[8][1]+''+'</a>'+ '<img class="immA" src="'+imA001[1][0]+'" alt="" title="" />'+ '<span class="txtA">'+ '</span>'+ '</td> ' + '</tr> ' + '<tr> ' + '<td id="A002_X_009" class="NULLA_X_002">'+ '<a class="NULLA002" id="A002_009" href="' +idA002[9][0]+ '" target="odlanir"> ' +idA002[9][1]+''+'</a>'+ '<img class="immA" src="'+imA001[1][0]+'" alt="" title="" />'+ '<span class="txtA">'+ '</span>'+ '</td> ' + '<td id="A002_X_010" class="NULLA_X_002">'+ '<a class="NULLA002" id="A002_010" href="' +idA002[10][0]+ '" target="odlanir"> ' +idA002[10][1]+''+'</a>'+ '<img class="immA" src="'+imA001[1][0]+'" alt="" title="" />'+ '<span class="txtA">'+ '</span>'+ '</td> ' + '<td id="A002_X_011" class="NULLA_X_002">'+ '<a class="NULLA002" id="A002_011" href="' +idA002[11][0]+ '" target="odlanir"> ' +idA002[11][1]+''+'</a>'+ '<img class="immA" src="'+imA001[1][0]+'" alt="" title="" />'+ '<span class="txtA">'+ '</span>'+ '</td> ' + '<td id="A002_X_012" class="NULLA_X_002">'+ '<a class="NULLA002" id="A002_012" href="' +idA002[12][0]+ '" target="odlanir"> ' +idA002[12][1]+''+'</a>'+ '<img class="immA" src="'+imA001[1][0]+'" alt="" title="" />'+ '<span class="txtA">'+ '</span>'+ '</td> ' + '</tr> ' + '<tr> ' + '<td id="A002_X_013" class="NULLA_X_002">'+ '<a class="NULLA002" id="A002_013" href="' +idA002[13][0]+ '" target="odlanir"> ' +idA002[13][1]+''+'</a>'+ '<img class="immA" src="'+imA001[1][0]+'" alt="" title="" />'+ '<span class="txtA">'+ '</span>'+ '</td> ' + '<td id="A002_X_014" class="NULLA_X_002">'+ '<a class="NULLA002" id="A002_014" href="' +idA002[14][0]+ '" target="odlanir"> ' +idA002[14][1]+''+'</a>'+ '<img class="immA" src="'+imA001[1][0]+'" alt="" title="" />'+ '<span class="txtA">'+ '</span>'+ '</td> ' + '<td id="A002_X_015" class="NULLA_X_002">'+ '<a class="NULLA002" id="A002_015" href="' +idA002[15][0]+ '" target="odlanir"> ' +idA002[15][1]+''+'</a>'+ '<img class="immA" src="'+imA001[1][0]+'" alt="" title="" />'+ '<span class="txtA">'+ '</span>'+ '</td> ' + '<td id="A002_X_016" class="NULLA_X_002">'+ '<a class="NULLA002" id="A002_016" href="' +idA002[16][0]+ '" target="odlanir"> ' +idA002[16][1]+''+'</a>'+ '<img class="immA" src="'+imA001[1][0]+'" alt="" title="" />'+ '<span class="txtA">'+ '</span>'+ '</td> ' + '</tr> ' + '<tr> ' + '<td id="A002_X_017" class="NULLA_X_002">'+ '<a class="NULLA002" id="A002_017" href="' +idA002[17][0]+ '" target="odlanir"> ' +idA002[17][1]+''+'</a>'+ '<img class="immA" src="'+imA001[1][0]+'" alt="" title="" />'+ '<span class="txtA">'+ '</span>'+ '</td> ' + '<td id="A002_X_018" class="NULLA_X_002">'+ '<a class="NULLA002" id="A002_018" href="' +idA002[18][0]+ '" target="odlanir"> ' +idA002[18][1]+''+'</a>'+ '<img class="immA" src="'+imA001[1][0]+'" alt="" title="" />'+ '<span class="txtA">'+ '</span>'+ '</td> ' + '<td id="A002_X_019" class="NULLA_X_002">'+ '<a class="NULLA002" id="A002_019" href="' +idA002[19][0]+ '" target="odlanir"> ' +idA002[19][1]+''+'</a>'+ '<img class="immA" src="'+imA001[1][0]+'" alt="" title="" />'+ '<span class="txtA">'+ '</span>'+ '</td> ' + '<td id="A002_X_020" class="NULLA_X_002">'+ '<a class="NULLA002" id="A002_020" href="' +idA002[20][0]+ '" target="odlanir"> ' +idA002[20][1]+''+'</a>'+ '<img class="immA" src="'+imA001[1][0]+'" alt="" title="" />'+ '<span class="txtA">'+ '</span>'+ '</td> ' + '</tr> ' + ' ' + '</table> ' + ' ' + '</article> ' + ' ' + ' ' + // articolo 002 fin // articolo 003 ini '<article id="A003"> ' + ' <blockquote> ' + ' <span id="semaforo_A003"></span> ' + ' <span>'+idA003[0][0]+'</span> ' + ' <span>A003</span> ' + ' </blockquote> ' + '<table> ' + ' ' + '<tr> ' + '<td id="A003_X_001" class="NULLA_X_003">'+ '<a class="NULLA003" id="A003_001" href="' +idA003[1][0]+ '" target="odlanir"> ' +idA003[1][1]+''+'</a>'+ '<img class="immA" src="'+imA001[1][0]+'" alt="" title="" />'+ '<span class="txtA">'+ '</span>'+ '</td> ' + '<td id="A003_X_002" class="NULLA_X_003">'+ '<a class="NULLA003" id="A003_002" href="' +idA003[2][0]+ '" target="odlanir"> ' +idA003[2][1]+''+'</a>'+ '<img class="immA" src="'+imA001[1][0]+'" alt="" title="" />'+ '<span class="txtA">'+ '</span>'+ '</td> ' + '<td id="A003_X_003" class="NULLA_X_003">'+ '<a class="NULLA003" id="A003_003" href="' +idA003[3][0]+ '" target="odlanir"> ' +idA003[3][1]+''+'</a>'+ '<img class="immA" src="'+imA001[1][0]+'" alt="" title="" />'+ '<span class="txtA">'+ '</span>'+ '</td> ' + '<td id="A003_X_004" class="NULLA_X_003">'+ '<a class="NULLA003" id="A003_004" href="' +idA003[4][0]+ '" target="odlanir"> ' +idA003[4][1]+''+'</a>'+ '<img class="immA" src="'+imA001[1][0]+'" alt="" title="" />'+ '<span class="txtA">'+ '</span>'+ '</td> ' + '</tr> ' + '<tr> ' + '<td id="A003_X_005" class="NULLA_X_003">'+ '<a class="NULLA003" id="A003_005" href="' +idA003[5][0]+ '" target="odlanir"> ' +idA003[5][1]+''+'</a>'+ '<img class="immA" src="'+imA001[1][0]+'" alt="" title="" />'+ '<span class="txtA">'+ '</span>'+ '</td> ' + '<td id="A003_X_006" class="NULLA_X_003">'+ '<a class="NULLA003" id="A003_006" href="' +idA003[6][0]+ '" target="odlanir"> ' +idA003[6][1]+''+'</a>'+ '<img class="immA" src="'+imA001[1][0]+'" alt="" title="" />'+ '<span class="txtA">'+ '</span>'+ '</td> ' + '<td id="A003_X_007" class="NULLA_X_003">'+ '<a class="NULLA003" id="A003_007" href="' +idA003[7][0]+ '" target="odlanir"> ' +idA003[7][1]+''+'</a>'+ '<img class="immA" src="'+imA001[1][0]+'" alt="" title="" />'+ '<span class="txtA">'+ '</span>'+ '</td> ' + '<td id="A003_X_008" class="NULLA_X_003">'+ '<a class="NULLA003" id="A003_008" href="' +idA003[8][0]+ '" target="odlanir"> ' +idA003[8][1]+''+'</a>'+ '<img class="immA" src="'+imA001[1][0]+'" alt="" title="" />'+ '<span class="txtA">'+ '</span>'+ '</td> ' + '</tr> ' + '<tr> ' + '<td id="A003_X_009" class="NULLA_X_003">'+ '<a class="NULLA003" id="A003_009" href="' +idA003[9][0]+ '" target="odlanir"> ' +idA003[9][1]+''+'</a>'+ '<img class="immA" src="'+imA001[1][0]+'" alt="" title="" />'+ '<span class="txtA">'+ '</span>'+ '</td> ' + '<td id="A003_X_010" class="NULLA_X_003">'+ '<a class="NULLA003" id="A003_010" href="' +idA003[10][0]+ '" target="odlanir"> ' +idA003[10][1]+''+'</a>'+ '<img class="immA" src="'+imA001[1][0]+'" alt="" title="" />'+ '<span class="txtA">'+ '</span>'+ '</td> ' + '<td id="A003_X_011" class="NULLA_X_003">'+ '<a class="NULLA003" id="A003_011" href="' +idA003[11][0]+ '" target="odlanir"> ' +idA003[11][1]+''+'</a>'+ '<img class="immA" src="'+imA001[1][0]+'" alt="" title="" />'+ '<span class="txtA">'+ '</span>'+ '</td> ' + '<td id="A003_X_012" class="NULLA_X_003">'+ '<a class="NULLA003" id="A003_012" href="' +idA003[12][0]+ '" target="odlanir"> ' +idA003[12][1]+''+'</a>'+ '<img class="immA" src="'+imA001[1][0]+'" alt="" title="" />'+ '<span class="txtA">'+ '</span>'+ '</td> ' + '</tr> ' + '<tr> ' + '<td id="A003_X_013" class="NULLA_X_003">'+ '<a class="NULLA003" id="A003_013" href="' +idA003[13][0]+ '" target="odlanir"> ' +idA003[13][1]+''+'</a>'+ '<img class="immA" src="'+imA001[1][0]+'" alt="" title="" />'+ '<span class="txtA">'+ '</span>'+ '</td> ' + '<td id="A003_X_014" class="NULLA_X_003">'+ '<a class="NULLA003" id="A003_014" href="' +idA003[14][0]+ '" target="odlanir"> ' +idA003[14][1]+''+'</a>'+ '<img class="immA" src="'+imA001[1][0]+'" alt="" title="" />'+ '<span class="txtA">'+ '</span>'+ '</td> ' + '<td id="A003_X_015" class="NULLA_X_003">'+ '<a class="NULLA003" id="A003_015" href="' +idA003[15][0]+ '" target="odlanir"> ' +idA003[15][1]+''+'</a>'+ '<img class="immA" src="'+imA001[1][0]+'" alt="" title="" />'+ '<span class="txtA">'+ '</span>'+ '</td> ' + '<td id="A003_X_016" class="NULLA_X_003">'+ '<a class="NULLA003" id="A003_016" href="' +idA003[16][0]+ '" target="odlanir"> ' +idA003[16][1]+''+'</a>'+ '<img class="immA" src="'+imA001[1][0]+'" alt="" title="" />'+ '<span class="txtA">'+ '</span>'+ '</td> ' + '</tr> ' + '<tr> ' + '<td id="A003_X_017" class="NULLA_X_003">'+ '<a class="NULLA003" id="A003_017" href="' +idA003[17][0]+ '" target="odlanir"> ' +idA003[17][1]+''+'</a>'+ '<img class="immA" src="'+imA001[1][0]+'" alt="" title="" />'+ '<span class="txtA">'+ '</span>'+ '</td> ' + '<td id="A003_X_018" class="NULLA_X_003">'+ '<a class="NULLA003" id="A003_018" href="' +idA003[18][0]+ '" target="odlanir"> ' +idA003[18][1]+''+'</a>'+ '<img class="immA" src="'+imA001[1][0]+'" alt="" title="" />'+ '<span class="txtA">'+ '</span>'+ '</td> ' + '<td id="A003_X_019" class="NULLA_X_003">'+ '<a class="NULLA003" id="A003_019" href="' +idA003[19][0]+ '" target="odlanir"> ' +idA003[19][1]+''+'</a>'+ '<img class="immA" src="'+imA001[1][0]+'" alt="" title="" />'+ '<span class="txtA">'+ '</span>'+ '</td> ' + '<td id="A003_X_020" class="NULLA_X_003">'+ '<a class="NULLA003" id="A003_020" href="' +idA003[20][0]+ '" target="odlanir"> ' +idA003[20][1]+''+'</a>'+ '<img class="immA" src="'+imA001[1][0]+'" alt="" title="" />'+ '<span class="txtA">'+ '</span>'+ '</td> ' + '</tr> ' + ' ' + '</table> ' + ' ' + '</article> ' + ' ' + ' ' + // articolo 003 fin // articolo 004 ini '<article id="A004"> ' + ' <blockquote> ' + ' <span id="semaforo_A004"></span> ' + ' <span>'+idA004[0][0]+'</span> ' + ' <span>A004</span> ' + ' </blockquote> ' + '<table> ' + ' ' + '<tr> ' + '<td id="A004_X_001" class="NULLA_X_004">'+ '<a class="NULLA004" id="A004_001" href="' +idA004[1][0]+ '" target="odlanir"> ' +idA004[1][1]+''+'</a>'+ '<img class="immA" src="'+imA001[1][0]+'" alt="" title="" />'+ '<span class="txtA">'+ '</span>'+ '</td> ' + '<td id="A004_X_002" class="NULLA_X_004">'+ '<a class="NULLA004" id="A004_002" href="' +idA004[2][0]+ '" target="odlanir"> ' +idA004[2][1]+''+'</a>'+ '<img class="immA" src="'+imA001[1][0]+'" alt="" title="" />'+ '<span class="txtA">'+ '</span>'+ '</td> ' + '<td id="A004_X_003" class="NULLA_X_004">'+ '<a class="NULLA004" id="A004_003" href="' +idA004[3][0]+ '" target="odlanir"> ' +idA004[3][1]+''+'</a>'+ '<img class="immA" src="'+imA001[1][0]+'" alt="" title="" />'+ '<span class="txtA">'+ '</span>'+ '</td> ' + '<td id="A004_X_004" class="NULLA_X_004">'+ '<a class="NULLA004" id="A004_004" href="' +idA004[4][0]+ '" target="odlanir"> ' +idA004[4][1]+''+'</a>'+ '<img class="immA" src="'+imA001[1][0]+'" alt="" title="" />'+ '<span class="txtA">'+ '</span>'+ '</td> ' + '</tr> ' + '<tr> ' + '<td id="A004_X_005" class="NULLA_X_004">'+ '<a class="NULLA004" id="A004_005" href="' +idA004[5][0]+ '" target="odlanir"> ' +idA004[5][1]+''+'</a>'+ '<img class="immA" src="'+imA001[1][0]+'" alt="" title="" />'+ '<span class="txtA">'+ '</span>'+ '</td> ' + '<td id="A004_X_006" class="NULLA_X_004">'+ '<a class="NULLA004" id="A004_006" href="' +idA004[6][0]+ '" target="odlanir"> ' +idA004[6][1]+''+'</a>'+ '<img class="immA" src="'+imA001[1][0]+'" alt="" title="" />'+ '<span class="txtA">'+ '</span>'+ '</td> ' + '<td id="A004_X_007" class="NULLA_X_004">'+ '<a class="NULLA004" id="A004_007" href="' +idA004[7][0]+ '" target="odlanir"> ' +idA004[7][1]+''+'</a>'+ '<img class="immA" src="'+imA001[1][0]+'" alt="" title="" />'+ '<span class="txtA">'+ '</span>'+ '</td> ' + '<td id="A004_X_008" class="NULLA_X_004">'+ '<a class="NULLA004" id="A004_008" href="' +idA004[8][0]+ '" target="odlanir"> ' +idA004[8][1]+''+'</a>'+ '<img class="immA" src="'+imA001[1][0]+'" alt="" title="" />'+ '<span class="txtA">'+ '</span>'+ '</td> ' + '</tr> ' + '<tr> ' + '<td id="A004_X_009" class="NULLA_X_004">'+ '<a class="NULLA004" id="A004_009" href="' +idA004[9][0]+ '" target="odlanir"> ' +idA004[9][1]+''+'</a>'+ '<img class="immA" src="'+imA001[1][0]+'" alt="" title="" />'+ '<span class="txtA">'+ '</span>'+ '</td> ' + '<td id="A004_X_010" class="NULLA_X_004">'+ '<a class="NULLA004" id="A004_010" href="' +idA004[10][0]+ '" target="odlanir"> ' +idA004[10][1]+''+'</a>'+ '<img class="immA" src="'+imA001[1][0]+'" alt="" title="" />'+ '<span class="txtA">'+ '</span>'+ '</td> ' + '<td id="A004_X_011" class="NULLA_X_004">'+ '<a class="NULLA004" id="A004_011" href="' +idA004[11][0]+ '" target="odlanir"> ' +idA004[11][1]+''+'</a>'+ '<img class="immA" src="'+imA001[1][0]+'" alt="" title="" />'+ '<span class="txtA">'+ '</span>'+ '</td> ' + '<td id="A004_X_012" class="NULLA_X_004">'+ '<a class="NULLA004" id="A004_012" href="' +idA004[12][0]+ '" target="odlanir"> ' +idA004[12][1]+''+'</a>'+ '<img class="immA" src="'+imA001[1][0]+'" alt="" title="" />'+ '<span class="txtA">'+ '</span>'+ '</td> ' + '</tr> ' + '<tr> ' + '<td id="A004_X_013" class="NULLA_X_004">'+ '<a class="NULLA004" id="A004_013" href="' +idA004[13][0]+ '" target="odlanir"> ' +idA004[13][1]+''+'</a>'+ '<img class="immA" src="'+imA001[1][0]+'" alt="" title="" />'+ '<span class="txtA">'+ '</span>'+ '</td> ' + '<td id="A004_X_014" class="NULLA_X_004">'+ '<a class="NULLA004" id="A004_014" href="' +idA004[14][0]+ '" target="odlanir"> ' +idA004[14][1]+''+'</a>'+ '<img class="immA" src="'+imA001[1][0]+'" alt="" title="" />'+ '<span class="txtA">'+ '</span>'+ '</td> ' + '<td id="A004_X_015" class="NULLA_X_004">'+ '<a class="NULLA004" id="A004_015" href="' +idA004[15][0]+ '" target="odlanir"> ' +idA004[15][1]+''+'</a>'+ '<img class="immA" src="'+imA001[1][0]+'" alt="" title="" />'+ '<span class="txtA">'+ '</span>'+ '</td> ' + '<td id="A004_X_016" class="NULLA_X_004">'+ '<a class="NULLA004" id="A004_016" href="' +idA004[16][0]+ '" target="odlanir"> ' +idA004[16][1]+''+'</a>'+ '<img class="immA" src="'+imA001[1][0]+'" alt="" title="" />'+ '<span class="txtA">'+ '</span>'+ '</td> ' + '</tr> ' + '<tr> ' + '<td id="A004_X_017" class="NULLA_X_004">'+ '<a class="NULLA004" id="A004_017" href="' +idA004[17][0]+ '" target="odlanir"> ' +idA004[17][1]+''+'</a>'+ '<img class="immA" src="'+imA001[1][0]+'" alt="" title="" />'+ '<span class="txtA">'+ '</span>'+ '</td> ' + '<td id="A004_X_018" class="NULLA_X_004">'+ '<a class="NULLA004" id="A004_018" href="' +idA004[18][0]+ '" target="odlanir"> ' +idA004[18][1]+''+'</a>'+ '<img class="immA" src="'+imA001[1][0]+'" alt="" title="" />'+ '<span class="txtA">'+ '</span>'+ '</td> ' + '<td id="A004_X_019" class="NULLA_X_004">'+ '<a class="NULLA004" id="A004_019" href="' +idA004[19][0]+ '" target="odlanir"> ' +idA004[19][1]+''+'</a>'+ '<img class="immA" src="'+imA001[1][0]+'" alt="" title="" />'+ '<span class="txtA">'+ '</span>'+ '</td> ' + '<td id="A004_X_020" class="NULLA_X_004">'+ '<a class="NULLA004" id="A004_020" href="' +idA004[20][0]+ '" target="odlanir"> ' +idA004[20][1]+''+'</a>'+ '<img class="immA" src="'+imA001[1][0]+'" alt="" title="" />'+ '<span class="txtA">'+ '</span>'+ '</td> ' + '</tr> ' + ' ' + '</table> ' + ' ' + '</article> ' + ' ' + ' ' + // articolo 004 fin ' '+ ' ' ; jQuery('#A001_001').click( function() { jQuery('.NULLA001').removeClass('selezionato'); jQuery('#A001_001').addClass('selezionato'); }); jQuery('#A001_002').click( function() { jQuery('.NULLA001').removeClass('selezionato'); jQuery('#A001_002').addClass('selezionato'); }); jQuery('#A001_003').click( function() { jQuery('.NULLA001').removeClass('selezionato'); jQuery('#A001_003').addClass('selezionato'); }); jQuery('#A001_004').click( function() { jQuery('.NULLA001').removeClass('selezionato'); jQuery('#A001_004').addClass('selezionato'); }); jQuery('#A001_005').click( function() { jQuery('.NULLA001').removeClass('selezionato'); jQuery('#A001_005').addClass('selezionato'); }); jQuery('#A001_006').click( function() { jQuery('.NULLA001').removeClass('selezionato'); jQuery('#A001_006').addClass('selezionato'); }); jQuery('#A001_007').click( function() { jQuery('.NULLA001').removeClass('selezionato'); jQuery('#A001_007').addClass('selezionato'); }); jQuery('#A001_008').click( function() { jQuery('.NULLA001').removeClass('selezionato'); jQuery('#A001_008').addClass('selezionato'); }); jQuery('#A001_009').click( function() { jQuery('.NULLA001').removeClass('selezionato'); jQuery('#A001_009').addClass('selezionato'); }); jQuery('#A001_010').click( function() { jQuery('.NULLA001').removeClass('selezionato'); jQuery('#A001_010').addClass('selezionato'); }); jQuery('#A001_011').click( function() { jQuery('.NULLA001').removeClass('selezionato'); jQuery('#A001_011').addClass('selezionato'); }); jQuery('#A001_012').click( function() { jQuery('.NULLA001').removeClass('selezionato'); jQuery('#A001_012').addClass('selezionato'); }); jQuery('#A001_013').click( function() { jQuery('.NULLA001').removeClass('selezionato'); jQuery('#A001_013').addClass('selezionato'); }); jQuery('#A001_014').click( function() { jQuery('.NULLA001').removeClass('selezionato'); jQuery('#A001_014').addClass('selezionato'); }); jQuery('#A001_015').click( function() { jQuery('.NULLA001').removeClass('selezionato'); jQuery('#A001_015').addClass('selezionato'); }); jQuery('#A001_016').click( function() { jQuery('.NULLA001').removeClass('selezionato'); jQuery('#A001_016').addClass('selezionato'); }); jQuery('#A001_017').click( function() { jQuery('.NULLA001').removeClass('selezionato'); jQuery('#A001_017').addClass('selezionato'); }); jQuery('#A001_018').click( function() { jQuery('.NULLA001').removeClass('selezionato'); jQuery('#A001_018').addClass('selezionato'); }); jQuery('#A001_019').click( function() { jQuery('.NULLA001').removeClass('selezionato'); jQuery('#A001_019').addClass('selezionato'); }); jQuery('#A001_020').click( function() { jQuery('.NULLA001').removeClass('selezionato'); jQuery('#A001_020').addClass('selezionato'); }); $('.NULLA001').click( function(){ $('#semaforo_A001').addClass('semaforo_verde'); $('#semaforo_A002').removeClass('semaforo_verde'); $('#semaforo_A003').removeClass('semaforo_verde'); $('#semaforo_A004').removeClass('semaforo_verde'); $('#A001').removeClass('NEBBIA'); $('#A002').addClass('NEBBIA'); $('#A003').addClass('NEBBIA'); $('#A004').addClass('NEBBIA'); } ); jQuery('#A002_001').click( function() { jQuery('.NULLA002').removeClass('selezionato'); jQuery('#A002_001').addClass('selezionato'); }); jQuery('#A002_002').click( function() { jQuery('.NULLA002').removeClass('selezionato'); jQuery('#A002_002').addClass('selezionato'); }); jQuery('#A002_003').click( function() { jQuery('.NULLA002').removeClass('selezionato'); jQuery('#A002_003').addClass('selezionato'); }); jQuery('#A002_004').click( function() { jQuery('.NULLA002').removeClass('selezionato'); jQuery('#A002_004').addClass('selezionato'); }); jQuery('#A002_005').click( function() { jQuery('.NULLA002').removeClass('selezionato'); jQuery('#A002_005').addClass('selezionato'); }); jQuery('#A002_006').click( function() { jQuery('.NULLA002').removeClass('selezionato'); jQuery('#A002_006').addClass('selezionato'); }); jQuery('#A002_007').click( function() { jQuery('.NULLA002').removeClass('selezionato'); jQuery('#A002_007').addClass('selezionato'); }); jQuery('#A002_008').click( function() { jQuery('.NULLA002').removeClass('selezionato'); jQuery('#A002_008').addClass('selezionato'); }); jQuery('#A002_009').click( function() { jQuery('.NULLA002').removeClass('selezionato'); jQuery('#A002_009').addClass('selezionato'); }); jQuery('#A002_010').click( function() { jQuery('.NULLA002').removeClass('selezionato'); jQuery('#A002_010').addClass('selezionato'); }); jQuery('#A002_011').click( function() { jQuery('.NULLA002').removeClass('selezionato'); jQuery('#A002_011').addClass('selezionato'); }); jQuery('#A002_012').click( function() { jQuery('.NULLA002').removeClass('selezionato'); jQuery('#A002_012').addClass('selezionato'); }); jQuery('#A002_013').click( function() { jQuery('.NULLA002').removeClass('selezionato'); jQuery('#A002_013').addClass('selezionato'); }); jQuery('#A002_014').click( function() { jQuery('.NULLA002').removeClass('selezionato'); jQuery('#A002_014').addClass('selezionato'); }); jQuery('#A002_015').click( function() { jQuery('.NULLA002').removeClass('selezionato'); jQuery('#A002_015').addClass('selezionato'); }); jQuery('#A002_016').click( function() { jQuery('.NULLA002').removeClass('selezionato'); jQuery('#A002_016').addClass('selezionato'); }); jQuery('#A002_017').click( function() { jQuery('.NULLA002').removeClass('selezionato'); jQuery('#A002_017').addClass('selezionato'); }); jQuery('#A002_018').click( function() { jQuery('.NULLA002').removeClass('selezionato'); jQuery('#A002_018').addClass('selezionato'); }); jQuery('#A002_019').click( function() { jQuery('.NULLA002').removeClass('selezionato'); jQuery('#A002_019').addClass('selezionato'); }); jQuery('#A002_020').click( function() { jQuery('.NULLA002').removeClass('selezionato'); jQuery('#A002_020').addClass('selezionato'); }); $('.NULLA002').click( function(){ $('#semaforo_A001').removeClass('semaforo_verde'); $('#semaforo_A002').addClass('semaforo_verde'); $('#semaforo_A003').removeClass('semaforo_verde'); $('#semaforo_A004').removeClass('semaforo_verde'); $('#A001').addClass('NEBBIA'); $('#A002').removeClass('NEBBIA'); $('#A003').addClass('NEBBIA'); $('#A004').addClass('NEBBIA'); } ); jQuery('#A003_001').click( function() { jQuery('.NULLA003').removeClass('selezionato'); jQuery('#A003_001').addClass('selezionato'); }); jQuery('#A003_002').click( function() { jQuery('.NULLA003').removeClass('selezionato'); jQuery('#A003_002').addClass('selezionato'); }); jQuery('#A003_003').click( function() { jQuery('.NULLA003').removeClass('selezionato'); jQuery('#A003_003').addClass('selezionato'); }); jQuery('#A003_004').click( function() { jQuery('.NULLA003').removeClass('selezionato'); jQuery('#A003_004').addClass('selezionato'); }); jQuery('#A003_005').click( function() { jQuery('.NULLA003').removeClass('selezionato'); jQuery('#A003_005').addClass('selezionato'); }); jQuery('#A003_006').click( function() { jQuery('.NULLA003').removeClass('selezionato'); jQuery('#A003_006').addClass('selezionato'); }); jQuery('#A003_007').click( function() { jQuery('.NULLA003').removeClass('selezionato'); jQuery('#A003_007').addClass('selezionato'); }); jQuery('#A003_008').click( function() { jQuery('.NULLA003').removeClass('selezionato'); jQuery('#A003_008').addClass('selezionato'); }); jQuery('#A003_009').click( function() { jQuery('.NULLA003').removeClass('selezionato'); jQuery('#A003_009').addClass('selezionato'); }); jQuery('#A003_010').click( function() { jQuery('.NULLA003').removeClass('selezionato'); jQuery('#A003_010').addClass('selezionato'); }); jQuery('#A003_011').click( function() { jQuery('.NULLA003').removeClass('selezionato'); jQuery('#A003_011').addClass('selezionato'); }); jQuery('#A003_012').click( function() { jQuery('.NULLA003').removeClass('selezionato'); jQuery('#A003_012').addClass('selezionato'); }); jQuery('#A003_013').click( function() { jQuery('.NULLA003').removeClass('selezionato'); jQuery('#A003_013').addClass('selezionato'); }); jQuery('#A003_014').click( function() { jQuery('.NULLA003').removeClass('selezionato'); jQuery('#A003_014').addClass('selezionato'); }); jQuery('#A003_015').click( function() { jQuery('.NULLA003').removeClass('selezionato'); jQuery('#A003_015').addClass('selezionato'); }); jQuery('#A003_016').click( function() { jQuery('.NULLA003').removeClass('selezionato'); jQuery('#A003_016').addClass('selezionato'); }); jQuery('#A003_017').click( function() { jQuery('.NULLA003').removeClass('selezionato'); jQuery('#A003_017').addClass('selezionato'); }); jQuery('#A003_018').click( function() { jQuery('.NULLA003').removeClass('selezionato'); jQuery('#A003_018').addClass('selezionato'); }); jQuery('#A003_019').click( function() { jQuery('.NULLA003').removeClass('selezionato'); jQuery('#A003_019').addClass('selezionato'); }); jQuery('#A003_020').click( function() { jQuery('.NULLA003').removeClass('selezionato'); jQuery('#A003_020').addClass('selezionato'); }); $('.NULLA003').click( function(){ $('#semaforo_A001').removeClass('semaforo_verde'); $('#semaforo_A002').removeClass('semaforo_verde'); $('#semaforo_A003').addClass('semaforo_verde'); $('#semaforo_A004').removeClass('semaforo_verde'); $('#A001').addClass('NEBBIA'); $('#A002').addClass('NEBBIA'); $('#A003').removeClass('NEBBIA'); $('#A004').addClass('NEBBIA'); } ); jQuery('#A004_001').click( function() { jQuery('.NULLA004').removeClass('selezionato'); jQuery('#A004_001').addClass('selezionato'); }); jQuery('#A004_002').click( function() { jQuery('.NULLA004').removeClass('selezionato'); jQuery('#A004_002').addClass('selezionato'); }); jQuery('#A004_003').click( function() { jQuery('.NULLA004').removeClass('selezionato'); jQuery('#A004_003').addClass('selezionato'); }); jQuery('#A004_004').click( function() { jQuery('.NULLA004').removeClass('selezionato'); jQuery('#A004_004').addClass('selezionato'); }); jQuery('#A004_005').click( function() { jQuery('.NULLA004').removeClass('selezionato'); jQuery('#A004_005').addClass('selezionato'); }); jQuery('#A004_006').click( function() { jQuery('.NULLA004').removeClass('selezionato'); jQuery('#A004_006').addClass('selezionato'); }); jQuery('#A004_007').click( function() { jQuery('.NULLA004').removeClass('selezionato'); jQuery('#A004_007').addClass('selezionato'); }); jQuery('#A004_008').click( function() { jQuery('.NULLA004').removeClass('selezionato'); jQuery('#A004_008').addClass('selezionato'); }); jQuery('#A004_009').click( function() { jQuery('.NULLA004').removeClass('selezionato'); jQuery('#A004_009').addClass('selezionato'); }); jQuery('#A004_010').click( function() { jQuery('.NULLA004').removeClass('selezionato'); jQuery('#A004_010').addClass('selezionato'); }); jQuery('#A004_011').click( function() { jQuery('.NULLA004').removeClass('selezionato'); jQuery('#A004_011').addClass('selezionato'); }); jQuery('#A004_012').click( function() { jQuery('.NULLA004').removeClass('selezionato'); jQuery('#A004_012').addClass('selezionato'); }); jQuery('#A004_013').click( function() { jQuery('.NULLA004').removeClass('selezionato'); jQuery('#A004_013').addClass('selezionato'); }); jQuery('#A004_014').click( function() { jQuery('.NULLA004').removeClass('selezionato'); jQuery('#A004_014').addClass('selezionato'); }); jQuery('#A004_015').click( function() { jQuery('.NULLA004').removeClass('selezionato'); jQuery('#A004_015').addClass('selezionato'); }); jQuery('#A004_016').click( function() { jQuery('.NULLA004').removeClass('selezionato'); jQuery('#A004_016').addClass('selezionato'); }); jQuery('#A004_017').click( function() { jQuery('.NULLA004').removeClass('selezionato'); jQuery('#A004_017').addClass('selezionato'); }); jQuery('#A004_018').click( function() { jQuery('.NULLA004').removeClass('selezionato'); jQuery('#A004_018').addClass('selezionato'); }); jQuery('#A004_019').click( function() { jQuery('.NULLA004').removeClass('selezionato'); jQuery('#A004_019').addClass('selezionato'); }); jQuery('#A004_020').click( function() { jQuery('.NULLA004').removeClass('selezionato'); jQuery('#A004_020').addClass('selezionato'); }); $('.NULLA004').click( function(){ $('#semaforo_A001').removeClass('semaforo_verde'); $('#semaforo_A002').removeClass('semaforo_verde'); $('#semaforo_A003').removeClass('semaforo_verde'); $('#semaforo_A004').addClass('semaforo_verde'); $('#A001').addClass('NEBBIA'); $('#A002').addClass('NEBBIA'); $('#A003').addClass('NEBBIA'); $('#A004').removeClass('NEBBIA'); } ); </script> <!-- <script> var casuale = Math.random(); var esteso = casuale.toString(); esteso ="?"+esteso; var link_js_01 = document.createElement( "script" ); var nome_link_js_01 ="20200831-0945_elencoY_new.js"; nome_link_js_01 = nome_link_js_01+esteso; link_js_01.src = nome_link_js_01 ; document.getElementsByTagName( "head" )[0].appendChild( link_js_01 ); </script> --> </body> </html>
MokOfficialProject
forward step stairs 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 
Mok vers. LEIBNIZ (exempli)
|
|---#L_sessionStart ( php ) 
|
|
|---#L_docType
|
|----head
|---#L_meta
|
|---#L_title
|
|---#L_icon
|
|---#L_linkMaterial
|
|---#L_linkAwesome
|
|---#L_linkJQuery
|
|---style
|
|
|---#L_style
|
|
|
|---/style
|
|----/head
|
|---#L_linkBody
|
|
|---main
|
|---#L_toggleAgenda class view_agenda
|
|
|---#L_section class hidden-agenda
|
|
|---#L_announcementModal href #announcement 
|
|
|---------#L_announcementModal ID class announcement
|
|
|---------#L_viewListaModal class view_lista YM
|
|
|---------Elenco Y(K)
|
|---announcement fin
|
|
|---#L_viewListaModalID
|
|------Elenco YM (con link esterni per iframe)
|
|---viewLista fin
|
|
|
|---------#L_iframe
|
|
|
|---/section
|
|
|---JQuery view_agenda
|
|
|---#L_jqueryAgenda
|
|
|---/main
|
|
|---#L_AsincronoCss
|
|
|
|---#L_TuttoModale
|
|
|
|---#L_Temporizzatore
|
|
|
|---#L_COPYclipboard
|
|
|
|---#L_PROGRESS
|
|
|
|---#L_SPINNER
|
|
|
|---#L_fine
schema
php sessione html ini head ini body ini onoff1Lista ini modale ini logout ini posizioneLista INI indicatore progress bar clipboard copy body fin html fin 
/************************************
  1---definizione
  base del progetto--|
                     |---php sessione
                     |
                     |---html ini
                     |
                     |---head ini
                     |---stile 
                     |---script
                     |---head fin
                     |
  2---inserimento toggleLista
     |---body ini
     |
     |---main ini
     |---section ini
     |
     |---iframe
     |
     |---onoff1Lista ini
     |      (fornisce il pannello di
     |      controllo)
     |
     |------onoff2Lista
     |--------onoffLista
     |----------material-icons-map
     |
     |---onoff1Lista fin     
     |
     |
     |
     |---hidden-Lista ini
     |   (quando map cliccata
     |   visualizza il contenuto
     |   compreso in hidden) 
     |
     |
     |
     |------modale ini
     |
     |      CLASSES
     |      class modale
     |      fixed top 0 left 0 bottom 0 right 0
     |      pointer-events none
     |      opacity 0
     |      overflow auto
     |      zindex 100
     |
     |      class modale selector target
     |      pointer events auto
     |      opacity 1
     |
     |      class modale contenuto
     |      width 70% height 70%
     |      margin top 10% margin left    15%
     |      overflow auto
     |
     |      class posizione modale
     |      fixed top 1.5 left 10%
     |      margin padding 0
     |
     |     
     |------anchor ref tag modale ini  
     |------------icona menu material
     |------anchor fin
     |
     |      division ini class modale
     |                   id modale
     |
     |        chiudi modale ini tag top fin
     |
     |
     |        ... applicazioni del modale ...
     |
     |
     |      division fin class modale contenuto
     |
     |
     |------modale fin
     |
     |
     |
     |
     |------logout ini
     |      class posizione logout
     |------------icona exit_to_app material
     |------logout fin
     |
     |
     |     
     |---------posizioneLista INI
     |        (definisce la posizione
     |        della Lista dei contenuti
     |        targati nel frame odlanir)
     |        .---------------------------.
     |        | year002 mese01 mese02 ... |
     |        | year003  ''     ''    ''  |     
     |        | ...     ...    ...    ... |
     |        |                           |     
     |        |                           |
     |        |                           |     
     |        .---------------------------. 
     |
     |
     |---------posizioneLista FIN
     |
     |
     |
     |
     |
     |
     |---hidden-Lista fin
     |
     |
     |---section fin
     |---main fin
     |
     |
     |
     |
     |
     |---script indicatore progress bar
     |---script clipboard copy
     |
     |
     |
     |---body fin
     |
  3---html fin
     
 
 
 *************************************/
content_copy <?php session_start(); if(!isset($_SESSION['UserData']['Username'])){ header("location:/index.php"); exit; } ?>
content_copy <!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>
content_copy <script src= "http://edoraandiamo.altervista.org/t1/01/t101jquery.js"> </script> <script src= "http://edoraandiamo.altervista.org/t1/01/t101suijs.js"> </script> <link href= "https://fonts.googleapis.com/icon?family=Material+Icons" rel= "stylesheet"> <link rel= "stylesheet" href= "https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <!-- script esterni con aggiornamento forzato --> <script> var script01 = document.createElement('script'); var script02 = document.createElement('script'); var script03 = document.createElement('script'); var script04 = document.createElement('script'); numerocasuale = Math.floor(Math.random() * 10000) ; esteso=numerocasuale.toString() ; var nome01 = "http://veneziavi.altervista.org/t1/01/t1DM.js" ; var nome02 = "http://veneziavi.altervista.org/t1/01/t1showhide.js" ; var nome03 = "http://veneziavi.altervista.org/t1/01/t1L5indicatorescorrimentopagina.js" ; var nome04 = "http://veneziavi.altervista.org/t1/01/t1intestazionepiedipagina.js" ; nome01 = nome01 + "?" + esteso ; nome02 = nome02 + "?" + esteso ; nome03 = nome03 + "?" + esteso ; nome04 = nome04 + "?" + esteso ; script01.src = nome01 ; script02.src = nome02 ; script03.src = nome03 ; script04.src = nome04 ; document.head.appendChild(script01) ; document.head.appendChild(script02); document.head.appendChild(script03) ; document.head.appendChild(script04) ; </script> <!-- fogli di stile esterni con aggiornamento forzato --> <script> /* t1stiletest01.css */ /* t1stileagenda.css */ var elementstile01 = document.createElement("link") ; numerocasuale = Math.floor(Math.random() * 10000) ; esteso=numerocasuale.toString() ; var nomestile01 = "http://veneziavi.altervista.org/t1/01/t1stile.css" ; nomestile01 = nomestile01+"?"+esteso ; elementstile01.setAttribute("rel", "stylesheet") ; elementstile01.setAttribute("type", "text/css") ; elementstile01.setAttribute("href", nomestile01) ; document.getElementsByTagName("head")[0].appendChild(elementstile01) ; var elementstile02 = document.createElement("link") ; var nomestile02 = "http://veneziavi.altervista.org/t1/01/t1stileagenda.css" ; nomestile02 = nomestile02+"?"+esteso ; elementstile02.setAttribute("rel", "stylesheet") ; elementstile02.setAttribute("type", "text/css") ; elementstile02.setAttribute("href", nomestile02) ; document.getElementsByTagName("head")[0].appendChild(elementstile02) ; </script>
content_copy <body onload="attesa()"> <main> <section> <iframe id="vediodlanir" class="definizioneiframe help1iframe help2iframe" name="odlanir" > </iframe> <style> .definizioneiframe{ margin-top:2.5rem; margin-bottom:0rem; width:100%; height:100% !important; border:0px solid fuchsia; /* test */ } </style> <style> .posizionespinner{ position:fixed; top:0.4rem; left:3rem; /* visibility:hidden; */ } </style> <!-- avviso caricamento pagina in corso ini --> <!-- funzione attesa e bottone ui loading --> <div class="posizionespinner"> <div class= "ui mini primary loading button" id= "spinnerattivo"> </div> </div> <script> function attesa(){ if (document.all){ document.all["spinnerattivo"].style.visibility= "hidden"; } else if (document.getElementById){ node = document.getElementById("spinnerattivo").style.visibility='hidden'; } } </script> <!-- avviso caricamento pagina in corso fin -->
content_copy <div class="onoff1Lista"> <div class="onoff2Lista"> <a class="onoffLista"> <i class="material-icons"> map </i> </a> </div> </div> <article class="hidden-Lista helphidden-Lista"> <!-- *********************** Qui i contenuti visualizzati o nascosti dal toggle *********************** --> </article> <style> /******************************************/ .onoff1Lista, .onoff2Lista, .onoffLista { cursor:pointer; } .onoff1Lista { position:fixed; top:0.4rem; left:0; width:2rem; background-color:white; color:dodgerblue; border-radius:40%; border:solid 0px lime; } .onoff2Lista { text-align:center; border:solid 0px lime; } .onoffLista { border:solid 0px lime; } .hidden-Lista{ position:fixed; top:3rem; left:0; display:none; width:30rem; width:100%; /* test */ height:4.5rem; height:4.5rem; /* test */ background-color:burlywood; background-color:rgba(222,184,135,0.8) ; background-color:rgba(222,184,135,0.5) ; /* test */ border-radius:0.5rem; overflow:auto; } .helphidden-Lista { } /* *************************** */ </style> <!-- con jquery --> <script> $('.onoffLista').on('click',function(){ if ($(this).find('i').text() == 'visibility_off'){ $(this).find('i').text('map'); } else { $(this).find('i').text('visibility_off'); } }); $(".onoff2Lista").click(function(){ $(this).parent('.onoff1Lista').next('.hidden-Lista').slideToggle(5).toggleClass("active"); }); </script>
content_copy <!-- settore del modale ini --> <div class="helpmodale-attiva"> <a href="#modale" class="posizionemodale helpposizionemodale1 helpposizionemodale2" > <span class="material-icons material-icons-menu"> menu </span> </a> </div> <div class="helpmodale-attiva-contenuto"> <div class="modale helpmodale helpmodale1" id="modale"> <div class="modalecontenuto helpcontenutomodale1"> <div class="chiudimodale"> <a href="#" class="helpacontenutomodale helpacontenutomodale1"> <span class="material-icons material-icons-clear"> clear </span> </a> </div> <div><hr/></div> <div style="font-size:small;font-family:monospace; opacity:0.5;"> <span id="incremento"></span> <span>&#47;2400</span> <style> .posizioneLogoutX{float:right;} </style> <div class="posizioneLogoutX"> <a class="" href="http://odlanir.altervista.org/logoutagenda.php"> <span class="material-icons material-icons-exit_to_app"> exit_to_app </span> </a> </div> </div> <div class="versioneMok"> <span class="ui mini disabled button versioneMokspan"> versione Mok TABLEJAHR 20200703-2135 </span> <span> <a href="https://twitter.com/odlanir"> <i class="ui twitter icon"> </i> </a> </span> </div> <div><hr/></div> </div> </div> </div> <!-- settore del modale fin --> /************************* settore dialogo modale ini *************************/ .modale{ position:fixed; top:0;left:0;bottom:0;right:0; pointer-events:none;opacity:0; background-color:black; padding:1em; overflow:auto ; border-radius:0.0em; z-index:100; } .modale:target{ pointer-events:auto;opacity:1; } .helpmodale, .helpmodale1 { text-align:left; } .modalecontenuto{ width:70%;height:70%; margin-top:10%; margin-left:15%; padding:1em; background-color:oldlace; background-color:rgba(253,245,230,1) ; background-color:burlywood; background-color:rgba(222,184,135,1) ; border-radius:0.5em; overflow:auto; } .material-icons-clear{ background-color:rgba(253,245,230,0.5) ; border:solid 1px dodgerblue; border:solid 2px rgba(30,144,255,0) ; border-radius:50%; } .helpacontenutomodale { } .helpacontenutomodale1 { } .chiudimodale{ } /*********************************** posizione icona bars modale si riferisce alla icona non al contenuto del dialogo ***********************************/ .posizionemodale{ position:fixed; top:1.5rem; left:10%; top:0.5rem; left:5rem; /* test TABLEJAHR */ margin:0rem; padding:0; text-align:center; } .material-icons-menu{ background-color:rgba(253,245,230,0.5) ; border:solid 1px dodgerblue; border:solid 2px rgba(30,144,255,0) ; border-radius:50%; } .helpmodale-attiva { } .helpmodale-attiva-contenuto { } .versioneMok{ } .versioneMokspan{ cursor:default !important; color:black !important; } /************************* settore dialogo modale fin *************************/
content_copy <div style="font-size:small;font-family:monospace; opacity:0.5;"> <span id="incremento"></span> <span>&#47;2400</span> <style> .posizioneLogoutX{float:right;} </style> <div class="posizioneLogoutX"> <a class="" href="http://odlanir.altervista.org/logoutagenda.php"> <span class="material-icons material-icons-exit_to_app"> exit_to_app </span> </a> </div> </div> <script> /****************************** temporizzatore logout 40min ******************************/ var elem = document.getElementById("incremento"); var numero = 0; var intervallo = setInterval(frame, 1000); function frame() { numero=numero+1; elem.innerHTML = numero; if (numero==2400) { window.location.href="http://odlanir.altervista.org/logoutagenda.php" } } </script>
content_copy <!-- big table debugged ini --> <table><tr><td> <table id="x002" class="blocco__tipo-due blocco__x002 help__x002_1 help__x002_2 debuggingx002"> <tr><td> <p class="ui mini button BOTTONE_tipo-due help__BOTTONE_x002_1 help__BOTTONE_x002_2 "><span class="visu_titolo_tipo_due visu_titolo_generico"><a class="jahr jahrpari" href="http://odlanir.altervista.org/mokofficial/testTIPOdue-1992.html#01" target="odlanir">1992</a></span></p> </td> <td> <a id="x002_y001" class="ax002 ax002_ay001 help__ax002_ay001_1 help__ax002_ay001_2 xNNN_yNNN_generico xNNN_yNNN_generico_tipodue" href="http://odlanir.altervista.org/mokofficial/testTIPOdue-1992.html#01" target="odlanir">gen</a> <td> <a id="x002_y002" class="ax002 ax002_ay002 help__ax002_ay002_1 help__ax002_ay002_2 xNNN_yNNN_generico xNNN_yNNN_generico_tipodue" href="http://odlanir.altervista.org/mokofficial/testTIPOdue-1992.html#02" target="odlanir">feb</a> <td> <a id="x002_y003" class="ax002 ax002_ay003 help__ax002_ay003_1 help__ax002_ay003_2 xNNN_yNNN_generico xNNN_yNNN_generico_tipodue" href="http://odlanir.altervista.org/mokofficial/testTIPOdue-1992.html#03" target="odlanir">mar</a> <td> <a id="x002_y004" class="ax002 ax002_ay004 help__ax002_ay004_1 help__ax002_ay004_2 xNNN_yNNN_generico xNNN_yNNN_generico_tipodue" href="http://odlanir.altervista.org/mokofficial/testTIPOdue-1992.html#04" target="odlanir">apr</a> <td> <a id="x002_y005" class="ax002 ax002_ay005 help__ax002_ay005_1 help__ax002_ay005_2 xNNN_yNNN_generico xNNN_yNNN_generico_tipodue" href="http://odlanir.altervista.org/mokofficial/testTIPOdue-1992.html#05" target="odlanir">mag</a> <td> <a id="x002_y006" class="ax002 ax002_ay006 help__ax002_ay006_1 help__ax002_ay006_2 xNNN_yNNN_generico xNNN_yNNN_generico_tipodue" href="http://odlanir.altervista.org/mokofficial/testTIPOdue-1992.html#06" target="odlanir">giu</a> <td> <a id="x002_y007" class="ax002 ax002_ay007 help__ax002_ay007_1 help__ax002_ay007_2 xNNN_yNNN_generico xNNN_yNNN_generico_tipodue" href="http://odlanir.altervista.org/mokofficial/testTIPOdue-1992.html#07" target="odlanir">lug</a> <td> <a id="x002_y008" class="ax002 ax002_ay008 help__ax002_ay008_1 help__ax002_ay008_2 xNNN_yNNN_generico xNNN_yNNN_generico_tipodue" href="http://odlanir.altervista.org/mokofficial/testTIPOdue-1992.html#08" target="odlanir">ago</a> <td> <a id="x002_y009" class="ax002 ax002_ay009 help__ax002_ay009_1 help__ax002_ay009_2 xNNN_yNNN_generico xNNN_yNNN_generico_tipodue" href="http://odlanir.altervista.org/mokofficial/testTIPOdue-1992.html#09" target="odlanir">set</a> <td> <a id="x002_y010" class="ax002 ax002_ay010 help__ax002_ay010_1 help__ax002_ay010_2 xNNN_yNNN_generico xNNN_yNNN_generico_tipodue" href="http://odlanir.altervista.org/mokofficial/testTIPOdue-1992.html#10" target="odlanir">ott</a> <td> <a id="x002_y011" class="ax002 ax002_ay011 help__ax002_ay011_1 help__ax002_ay011_2 xNNN_yNNN_generico xNNN_yNNN_generico_tipodue" href="http://odlanir.altervista.org/mokofficial/testTIPOdue-1992.html#11" target="odlanir">nov</a> <td> <a id="x002_y012" class="ax002 ax002_ay012 help__ax002_ay012_1 help__ax002_ay012_2 xNNN_yNNN_generico xNNN_yNNN_generico_tipodue" href="http://odlanir.altervista.org/mokofficial/testTIPOdue-1992.html#12" target="odlanir">dic</a> </td> </tr> </table> <table id="x003" class="blocco__tipo-due blocco__x003 help__x003_1 help__x003_2 debuggingx003"> <tr><td> <p class="ui mini button BOTTONE_tipo-due help__BOTTONE_x003_1 help__BOTTONE_x003_2 "><span class="visu_titolo_tipo_uno visu_titolo_generico"><a class="jahr jahrdispari" href="http://odlanir.altervista.org/mokofficial/testTIPOuno-1993.html#01" target="odlanir">1993</a></span></p> </td> <td> <a id="x003_y001" class="ax003 ax003_ay001 help__ax003_ay001_1 help__ax003_ay001_2 xNNN_yNNN_generico xNNN_yNNN_generico_tipouno" href="http://odlanir.altervista.org/mokofficial/testTIPOuno-1993.html#01" target="odlanir">gen</a> <td> <a id="x003_y002" class="ax003 ax003_ay002 help__ax003_ay002_1 help__ax003_ay002_2 xNNN_yNNN_generico xNNN_yNNN_generico_tipouno" href="http://odlanir.altervista.org/mokofficial/testTIPOuno-1993.html#02" target="odlanir">feb</a> <td> <a id="x003_y003" class="ax003 ax003_ay003 help__ax003_ay003_1 help__ax003_ay003_2 xNNN_yNNN_generico xNNN_yNNN_generico_tipouno" href="http://odlanir.altervista.org/mokofficial/testTIPOuno-1993.html#03" target="odlanir">mar</a> <td> <a id="x003_y004" class="ax003 ax003_ay004 help__ax003_ay004_1 help__ax003_ay004_2 xNNN_yNNN_generico xNNN_yNNN_generico_tipouno" href="http://odlanir.altervista.org/mokofficial/testTIPOuno-1993.html#04" target="odlanir">apr</a> <td> <a id="x003_y005" class="ax003 ax003_ay005 help__ax003_ay005_1 help__ax003_ay005_2 xNNN_yNNN_generico xNNN_yNNN_generico_tipouno" href="http://odlanir.altervista.org/mokofficial/testTIPOuno-1993.html#05" target="odlanir">mag</a> <td> <a id="x003_y006" class="ax003 ax003_ay006 help__ax003_ay006_1 help__ax003_ay006_2 xNNN_yNNN_generico xNNN_yNNN_generico_tipouno" href="http://odlanir.altervista.org/mokofficial/testTIPOuno-1993.html#06" target="odlanir">giu</a> <td> <a id="x003_y007" class="ax003 ax003_ay007 help__ax003_ay007_1 help__ax003_ay007_2 xNNN_yNNN_generico xNNN_yNNN_generico_tipouno" href="http://odlanir.altervista.org/mokofficial/testTIPOuno-1993.html#07" target="odlanir">lug</a> <td> <a id="x003_y008" class="ax003 ax003_ay008 help__ax003_ay008_1 help__ax003_ay008_2 xNNN_yNNN_generico xNNN_yNNN_generico_tipouno" href="http://odlanir.altervista.org/mokofficial/testTIPOuno-1993.html#08" target="odlanir">ago</a> <td> <a id="x003_y009" class="ax003 ax003_ay009 help__ax003_ay009_1 help__ax003_ay009_2 xNNN_yNNN_generico xNNN_yNNN_generico_tipouno" href="http://odlanir.altervista.org/mokofficial/testTIPOuno-1993.html#09" target="odlanir">set</a> <td> <a id="x003_y010" class="ax003 ax003_ay010 help__ax003_ay010_1 help__ax003_ay010_2 xNNN_yNNN_generico xNNN_yNNN_generico_tipouno" href="http://odlanir.altervista.org/mokofficial/testTIPOuno-1993.html#10" target="odlanir">ott</a> <td> <a id="x003_y011" class="ax003 ax003_ay011 help__ax003_ay011_1 help__ax003_ay011_2 xNNN_yNNN_generico xNNN_yNNN_generico_tipouno" href="http://odlanir.altervista.org/mokofficial/testTIPOuno-1993.html#11" target="odlanir">nov</a> <td> <a id="x003_y012" class="ax003 ax003_ay012 help__ax003_ay012_1 help__ax003_ay012_2 xNNN_yNNN_generico xNNN_yNNN_generico_tipouno" href="http://odlanir.altervista.org/mokofficial/testTIPOuno-1993.html#12" target="odlanir">dic</a> </td> </tr> </table> </td></tr></table> <!-- big table debugged fin --> /*************************************** COLORI STANDARD background-color:burlywood; background-color:rgba(222,184,135,0.5) ; background-color:dodgerblue; background-color:rgba(30,144,255,1) ; background-color:oldlace; background-color:rgba(253,245,230,0.5) ; COLORI PERSONALIZZATI ***************************************/ body, main, section { width:100%; height:100%; background-color:rgba(253,245,230,1); } body { } main { } section { } /******************************************/ .xNNN_yNNN_generico, .visu_titolo_generico { padding:0.1rem; font-size:2vw; /* scalabile */ font-size:1rem; font-size:1.5rem; /* test */ font-family:monospace; /* default */ font-family:sans-serif; font-variant:small-caps; border-radius:0.2rem; } .visu_titolo_generico { font-size:1rem; } .jahrdispari, .jahrpari { border-bottom-style:solid; border-bottom-width:2px; color:black; } .jahrdispari { border-bottom-color:rgba(200,100,0,1); /* test */ } .jahrpari { border-bottom-color:rgba(50,128,52,1); /* test */ } .visu_titolo_tipo_uno, .xNNN_yNNN_generico_tipouno { background-color:rgba(222,184,135,0.5); background-color:rgba(222,184,135,0.5); color:rgba(30,20,10,0.25); /* test */ border-bottom-style:solid; border-bottom-width:2px; border-bottom-color:rgba(200,100,0,0.25); /* test */ } .visu_titolo_tipo_due, .xNNN_yNNN_generico_tipodue { background-color:rgba(253,245,230,1); background-color:rgba(253,245,230,0.5); /* test */ color:rgba(30,20,10,0.25); /* test */ border-bottom-style:solid; border-bottom-width:2px; border-bottom-color:rgba(50,128,52,0.25); /* test */ }
content_copy <!-- indicatore scorrimento pagina ini --> <div class="indicatore-container indicatore-container-off" > <div class="indicatore-bar" id="indicatore" > </div> </div> <script> /********************* indicatore scorrimento pagina *********************/ window.onscroll = function() {indicatore()}; function indicatore() { var winScroll = document.body.scrollTop || document.documentElement.scrollTop; var height = document.documentElement.scrollHeight - document.documentElement.clientHeight; var scrolled = (winScroll / height) * 100; document.getElementById("indicatore").style.width = scrolled + "%"; } </script> <!-- indicatore scorrimento pagina fin -->
content_copy <!-- copy to clipboard ini --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script> /* How to copy TEXT to Clipboard on Button-Click A Pen By Shaik Maqsood https://codepen.io/shaikmaqsood/pen/XmydxJ */ /******************************************************** <button onclick="copyToClipboard('#copytoclipboard')"> <i class="code paperclip icon" style="font-size:x-small !important;"> </i></button> ********************************************************/ function copyToClipboard(element) { var $temp = $("<input>"); $("body").append($temp); $temp.val($(element).text()).select(); document.execCommand("copy"); $temp.remove(); } </script> <!-- copy to clipboard fin -->
content_copy <div id="fine"></div> </body>
content_copy </html>
Agenda Applicazione del template1 help
  • elencoagenda #suptagagendaElenco

    Sono raggruppati i tagID per accedere ai file grafici delle pagine

  • articolo agenda #suptagagendaarticolo
    • articolo agenda doppia pagina#suptagagendaarticoloDoppiaPagina

      Raccoglie in un unico file diverse giornate di una frazione di mese tenendo conto del peso in MB della pagina. In tale modo si ottiene un compattamento riducendo il numero dei file-pagina. All'interno del file compact la individuazione dei giorni viene fatta tramite gli id i quali sono taggati nell'elenco. Qui viene riportato un esempio concreto.


  • php LOGIN #suptagagendalogin
    • LOGIN timer #suptagagendaloginTIMER

      Schema di login con temporizzatore. Il problema del login sessione sta ne fatto che user puo' dimenticarsi di eseguire il logout, cosi' facendo si crea un grave problema di sicurezza dei dati poiche' la sessione rimane aperta con possible invalidazione della sicurezza dei dati. Il tentativo messo qui in atto e' di inserire un intervallo di tempo limitato di accesso alla validita' della sessione scaduto il quale occorre reinserire la password. Sistema questo molto artigianale e da rivedere.

      var elem = document.getElementById("incremento"); var numero = 0; var intervallo = setInterval(frame, 1000); function frame() { numero=numero+1; elem.innerHTML = numero; if (numero==40) { window.location.href="http://odlanir.altervista.org/logoutagenda.php" } }

      Implementando lo script si ottiene una temporizzazione di 40 secondi utili allo user per inserire di dati di accreditamento. Lo snip e' utilizzato anche in altri contesti con temporizzazione differente al fine di forzare l'uscita in caso di mancato logout. Questo sistema contiene molto fault ma puo' essere utile.

suptagagendaElenco

<?php session_start(); /* Starts the session */ if(!isset($_SESSION['UserData']['Username'])){ header("location:/index.php"); exit; } ?> <!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>ELENCO_by_odlanir_20200505-2121</title> <!-- https://validator.w3.org1 --> <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> <script src= "https://github.com/Semantic-Org/Semantic-UI-React/blob/master/src/elements/Button/Button.js"> </script> <link rel= "stylesheet" href= "http://veneziavi.altervista.org/t1/01/t1stile.css" /> <style> /* reset debugging */ .bordomain, .bordosection, .bordoarticle, .bordoaside, .bordodiv, .bordop, .bordospan, .bordoimg{ border:transparent !important; border:solid 0.0rem maroon !important; } .bordosection{ border:solid 0.0rem maroon !important; } </style> <style> .cursoredefault{ cursor:default !important; background-color:transparent !important; font-weight:bold !important; font-size:1.5rem !important; } .annuitatem{} .mese{ background-color:oldlace !important; cursor:default !important; font-size:1.2rem !important;} .meseButton{ background-color:oldlace !important; cursor:default !important; font-size:1.2rem !important;} .mensisButton{ background-color:oldlace !important; cursor:default !important; font-size:1.2rem !important;} .giorno{ background-color:rgba(255,200,50,1) !important; color:black !important; cursor:pointer !important;} </style> </head> <body onload= "attesa()" class= "sfondo" style= ""> <main class= "ui container bordomain" > <section class= "bordosection" style= "position:relative;"> <article class= "ui internally celled grid bordoarticle"> <aside class= "row bordoaside"> <div class= "sixteen wide column bordodiv"> <ul> <li class="ui small button" style=" margin-bottom:1rem; cursor:default; background-color:rgba(50,128,52,0.2); color:black; font-size:1.2rem; font-variant:small-caps;"> Elenco dei file</li> <ul class="annuitatem" > <span id="1989" class="ui tiny button cursoredefault">1989</span> <ul> <span id="1989-10" class="ui tiny button mensisButton">mese </span> <ul> <li> <a id="1989-10-01" class="ui tiny button giorno"> giorno </a> </li> </ul> </ul> </ul> <ul class="annuitatem" > <span id="1990" class="ui tiny button cursoredefault"> 1990</span> <ul> <span id="1990-03" class="ui tiny button mensisButton">marzo</span> <ul> <li> <a id="1990-03-01" class="ui tiny button giorno" href="./1990/1990-03-01.html"> 01</a> </li> </ul> </ul> <ul> <span id="1990-08" class="ui tiny button mensisButton">agosto </span> <ul> <li> <a id="1990-08-25" class="ui tiny button giorno" href="./1990/1990-08-25.php"> 25</a> </li> </ul> </ul> <ul> <span id="1990-10" class="ui tiny button mensisButton">ottobre </span> <article class="ui internally celled grid"> <ul> <li> <a id="1990-10-01" class="ui tiny button giorno" href="./1990/1990-10-01.php"> 01</a> </li> </ul> <ul> <li> <a id="1990-10-27" class="ui tiny button giorno" href="./1990/1990-10-27.php"> 27</a> </li> </ul> </article> </ul> </ul> <ul class="annuitatem" > <span id="1991" class="ui tiny button cursoredefault"> 1991</span> <ul> <span id="1990-11" class="ui tiny button mensisButton">novembre </span> <article class="ui internally celled grid"> <ul> <li> <a id="1991-11-01" class="ui tiny button giorno" href="./1991/1991-11-01.php#1991-11-01"> 01</a> </li> </ul> <ul> <li> <a id="1991-11-14" class="ui tiny button giorno" href="./1991/1991-11-01.php#1991-11-14"> 14</a> </li> </ul> <ul> <li> <a id="1991-11-18" class="ui tiny button giorno" href="./1991/1991-11-01.php#1991-11-18"> 18</a> </li> </ul> <ul> <li> <a id="1991-11-20" class="ui tiny button giorno" href="./1991/1991-11-01.php#1991-11-20"> 20</a> </li> </ul> <ul> <li> <a id="1991-11-22" class="ui tiny button giorno" href="./1991/1991-11-01.php#1991-11-22"> 22</a> </li> </ul> <ul> <li> <a id="1991-11-25" class="ui tiny button giorno" href="./1991/1991-11-01.php#1991-11-25"> 25</a> </li> </ul> <ul> <li> <a id="1991-11-26" class="ui tiny button giorno" href="./1991/1991-11-01.php#1991-11-26"> 26</a> </li> </ul> <ul> <li> <a id="1991-11-28" class="ui tiny button giorno" href="./1991/1991-11-01.php#1991-11-28"> 28</a> </li> </ul> <ul> <li> <a id="1991-11-30" class="ui tiny button giorno" href="./1991/1991-11-01.php#1991-11-30"> 30</a> </li> </ul> </article> </ul> </ul> <ul class="annuitatem" style="visibility:hidden;"> <span id="anno" class="ui tiny button cursoredefault"> anno</span> <ul> <span id="mese" class="ui tiny button mensisButton">mese </span> <article class="ui internally celled grid"> <ul> <li> <a id="giorno1" class="ui tiny button giorno" href="./anno/anno-mese-01.php"> 01</a> </li> </ul> <ul> <li> <a id="giorno2" class="ui tiny button giorno" href="./anno/anno-mese-02.php"> 02</a> </li> </ul> </article> </ul> </ul> </ul> </div> </aside> </article> <article class= "ui internally celled grid bordoarticle"> <aside class= "row bordoaside"> <div class= "sixteen wide column bordodiv"> &#42;&#42;&#42; </div> </aside> </article> </section> </main> <!-- validazione della sessione --> <blockquote style="position:fixed; top:0.2rem; right:0%; margin:0; padding:0; z-index:100;"> <a class="ui mini button" href="http://odlanir.altervista.org/logoutagenda.php"> <i class="sign out alternate icon"></i> </a> </blockquote> <!-- parentesi angolari <blockquote style="position:fixed; top:50%; left:0%; margin:0; padding:0; "> <a class="" href="http://odlanir.altervista.org/logoutagenda.php"> <i class="chevron circle left icon"></i> </a> </blockquote> <blockquote style="position:fixed; top:50%; right:0%; margin:0; padding:0; "> <a class="" href="./agenda19892010/convalidato.php"> <i class="chevron circle right icon"></i> </a> </blockquote> --> <!-- revisione 20200428a ini --> <!-- rimozione dei codici interni al documento --> <article id= "intestazionepiedipagina"></article> <script type= "application/javascript" src= "http://veneziavi.altervista.org/t1/01/t1intestazionepiedipagina.js" async></script> <article id= "L5indicatorescorrimentopagina"></article> <script type= "application/javascript" src= "http://veneziavi.altervista.org/t1/01/t1L5indicatorescorrimentopagina.js" async></script> <article id= "DM"></article> <script type= "application/javascript" src= "http://veneziavi.altervista.org/t1/01/t1DM.js" async></script> <script type= "application/javascript" src= "http://veneziavi.altervista.org/t1/01/t1showhide.js" async></script> <article style= "position:fixed; top:0.5rem; left:0rem; background-color:transparent;"> <div class= "ui primary small loading button" id= "spinnerattivo" style= ""> </div> <script> function attesa(){ if (document.all){ document.all["spinnerattivo"].style.visibility= "hidden"; } else if (document.getElementById){ node = document.getElementById("spinnerattivo").style.visibility='hidden'; } } </script> <!-- logout in automatico dopo 600sec --> <p id="timeragenda" class="ui mini button" style="cursor:default !important; opacity:1 !important; "></p> <script> document.getElementById("timeragenda").innerHTML= ' <span id="incremento"> '+ ' '+ ' </span>'+ ' '+ ' <span> '+ ' &#47;2400 '+ ' </span>'+ ' ' ; var elem = document.getElementById("incremento"); var numero = 0; var intervallo = setInterval(frame, 1000); function frame() { numero=numero+1; elem.innerHTML = numero; if (numero==2400) { window.location.href="http://odlanir.altervista.org/logoutagenda.php" } } </script> </article> <!-- revisione 20200428a fin --> <?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('../text.txt', 'w'); fwrite($fp, $actual_link. " " .$oggi_est. " ". $oggi_est_time); fclose($fp); $myfile = fopen("../logs.txt", "a") or die("Unable to open file!"); // $actual_link = "cronologia"; fwrite($myfile, "\n". $actual_link. " " .$oggi_est. " ". $oggi_est_time); fclose($myfile); ?> <div id= "fine"></div> </body> </html>

suptagagendaarticoloDoppiaPagina

<?php session_start(); /* Starts the session */ if(!isset($_SESSION['UserData']['Username'])){ header("location:/index.php"); exit; } ?> <!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>1991-11-01_by_odlanir_20200505-1552</title> <!-- https://validator.w3.org/ --> <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> <script src= "https://github.com/Semantic-Org/Semantic-UI-React/blob/master/src/elements/Button/Button.js"> </script> <link rel= "stylesheet" href= "http://veneziavi.altervista.org/t1/01/t1stile.css" /> <style> /* reset debugging */ .bordomain, .bordosection, .bordoarticle, .bordoaside, .bordodiv, .bordop, .bordospan, .bordoimg{ border:transparent !important; border:solid 0.00025rem maroon !important; } .bordosection{ border:solid 0.00025rem maroon !important; } </style> <style> .cursoredefault{ cursor:default !important; background-color:transparent !important; } .mese{ background-color:oldlace !important; cursor:default !important;} .giorno{ background-color:rgba(255,200,50,1) !important; color:black !important; cursor:default !important;} </style> </head> <body onload= "attesa()" class= "sfondo" style= ""> <main class= "ui container bordomain" > <header class="ui centered header"> Agenda 1989-2010 </header> <section class= "bordosection" style= "position:relative;"> <article class= "ui internally celled grid bordoarticle"> <aside class= "row bordoaside"> <div class= "sixteen wide column bordodiv"> <p> 1991-11-01 <i class="caret down icon"></i> </p> </div> </aside> </article> <article id="1991-11-01" class= "ui internally celled grid bordoarticle"> <aside class= "row bordoaside"> <div class= "sixteen wide column bordodiv"> <img class="bordoimg" src= "../01/1991-11-01.jpg" alt="" title="" /> </div> </aside> </article> <article id="1991-11-01a" class= "ui internally celled grid bordoarticle"> <aside class= "row bordoaside"> <div class= "sixteen wide column bordodiv"> <p> 1991-11-01a <i class="caret down icon"></i> </p> </div> </aside> </article> <article class= "ui internally celled grid bordoarticle"> <aside class= "row bordoaside"> <div class= "sixteen wide column bordodiv"> <img class="bordoimg" src= "../01/1991-11-01a.jpg" alt="" title="" /> </div> </aside> </article> <article id="1991-11-14" class= "ui internally celled grid bordoarticle"> <aside class= "row bordoaside"> <div class= "sixteen wide column bordodiv"> <p> 1991-11-14 <i class="caret down icon"></i> </p> </div> </aside> </article> <article class= "ui internally celled grid bordoarticle"> <aside class= "row bordoaside"> <div class= "sixteen wide column bordodiv"> <img class="bordoimg" src= "../01/1991-11-14.jpg" alt="" title="" /> </div> </aside> </article> <article id="1991-11-14a" class= "ui internally celled grid bordoarticle"> <aside class= "row bordoaside"> <div class= "sixteen wide column bordodiv"> <p> 1991-11-14a <i class="caret down icon"></i> </p> </div> </aside> </article> <article class= "ui internally celled grid bordoarticle"> <aside class= "row bordoaside"> <div class= "sixteen wide column bordodiv"> <img class="bordoimg" src= "../01/1991-11-14a.jpg" alt="" title="" /> </div> </aside> </article> <article id="1991-11-14b" class= "ui internally celled grid bordoarticle"> <aside class= "row bordoaside"> <div class= "sixteen wide column bordodiv"> <p> 1991-11-14b <i class="caret down icon"></i> </p> </div> </aside> </article> <article class= "ui internally celled grid bordoarticle"> <aside class= "row bordoaside"> <div class= "sixteen wide column bordodiv"> <img class="bordoimg" src= "../01/1991-11-14b.jpg" alt="" title="" /> </div> </aside> </article> <article id="1991-11-18" class= "ui internally celled grid bordoarticle"> <aside class= "row bordoaside"> <div class= "sixteen wide column bordodiv"> <p> 1991-11-18 <i class="caret down icon"></i> </p> </div> </aside> </article> <article class= "ui internally celled grid bordoarticle"> <aside class= "row bordoaside"> <div class= "sixteen wide column bordodiv"> <img class="bordoimg" src= "../01/1991-11-18.jpg" alt="" title="" /> </div> </aside> </article> <article id="1991-11-20" class= "ui internally celled grid bordoarticle"> <aside class= "row bordoaside"> <div class= "sixteen wide column bordodiv"> <p> 1991-11-20 <i class="caret down icon"></i> </p> </div> </aside> </article> <article class= "ui internally celled grid bordoarticle"> <aside class= "row bordoaside"> <div class= "sixteen wide column bordodiv"> <img class="bordoimg" src= "../01/1991-11-20.jpg" alt="" title="" /> </div> </aside> </article> <article id="1991-11-22" class= "ui internally celled grid bordoarticle"> <aside class= "row bordoaside"> <div class= "sixteen wide column bordodiv"> <p> 1991-11-22 <i class="caret down icon"></i> </p> </div> </aside> </article> <article class= "ui internally celled grid bordoarticle"> <aside class= "row bordoaside"> <div class= "sixteen wide column bordodiv"> <img class="bordoimg" src= "../01/1991-11-22.jpg" alt="" title="" /> </div> </aside> </article> <article id="1991-11-22a" class= "ui internally celled grid bordoarticle"> <aside class= "row bordoaside"> <div class= "sixteen wide column bordodiv"> <p> 1991-11-22a <i class="caret down icon"></i> </p> </div> </aside> </article> <article class= "ui internally celled grid bordoarticle"> <aside class= "row bordoaside"> <div class= "sixteen wide column bordodiv"> <img class="bordoimg" src= "../01/1991-11-22a.jpg" alt="" title="" /> </div> </aside> </article> <article id="1991-11-25" class= "ui internally celled grid bordoarticle"> <aside class= "row bordoaside"> <div class= "sixteen wide column bordodiv"> <p> 1991-11-25 <i class="caret down icon"></i> </p> </div> </aside> </article> <article class= "ui internally celled grid bordoarticle"> <aside class= "row bordoaside"> <div class= "sixteen wide column bordodiv"> <img class="bordoimg" src= "../01/1991-11-25.jpg" alt="" title="" /> </div> </aside> </article> <article id="1991-11-26" class= "ui internally celled grid bordoarticle"> <aside class= "row bordoaside"> <div class= "sixteen wide column bordodiv"> <p> 1991-11-26 <i class="caret down icon"></i> </p> </div> </aside> </article> <article class= "ui internally celled grid bordoarticle"> <aside class= "row bordoaside"> <div class= "sixteen wide column bordodiv"> <img class="bordoimg" src= "../01/1991-11-26.jpg" alt="" title="" /> </div> </aside> </article> <article id="1991-11-28" class= "ui internally celled grid bordoarticle"> <aside class= "row bordoaside"> <div class= "sixteen wide column bordodiv"> <p> 1991-11-28 <i class="caret down icon"></i> </p> </div> </aside> </article> <article class= "ui internally celled grid bordoarticle"> <aside class= "row bordoaside"> <div class= "sixteen wide column bordodiv"> <img class="bordoimg" src= "../01/1991-11-28.jpg" alt="" title="" /> </div> </aside> </article> <article id="1991-11-28a" class= "ui internally celled grid bordoarticle"> <aside class= "row bordoaside"> <div class= "sixteen wide column bordodiv"> <p> 1991-11-28a <i class="caret down icon"></i> </p> </div> </aside> </article> <article class= "ui internally celled grid bordoarticle"> <aside class= "row bordoaside"> <div class= "sixteen wide column bordodiv"> <img class="bordoimg" src= "../01/1991-11-28a.jpg" alt="" title="" /> </div> </aside> </article> <article id="1991-11-30" class= "ui internally celled grid bordoarticle"> <aside class= "row bordoaside"> <div class= "sixteen wide column bordodiv"> <p> 1991-11-30 <i class="caret down icon"></i> </p> </div> </aside> </article> <article class= "ui internally celled grid bordoarticle"> <aside class= "row bordoaside"> <div class= "sixteen wide column bordodiv"> <img class="bordoimg" src= "../01/1991-11-30.jpg" alt="" title="" /> </div> </aside> </article> <article id="1991-11-30a" class= "ui internally celled grid bordoarticle"> <aside class= "row bordoaside"> <div class= "sixteen wide column bordodiv"> <p> 1991-11-30a <i class="caret down icon"></i> </p> </div> </aside> </article> <article class= "ui internally celled grid bordoarticle"> <aside class= "row bordoaside"> <div class= "sixteen wide column bordodiv"> <img class="bordoimg" src= "../01/1991-11-30a.jpg" alt="" title="" /> </div> </aside> </article> <article id="1991-11-30b" class= "ui internally celled grid bordoarticle"> <aside class= "row bordoaside"> <div class= "sixteen wide column bordodiv"> <p> 1991-11-30b <i class="caret down icon"></i> </p> </div> </aside> </article> <article class= "ui internally celled grid bordoarticle"> <aside class= "row bordoaside"> <div class= "sixteen wide column bordodiv"> <img class="bordoimg" src= "../01/1991-11-30b.jpg" alt="" title="" /> </div> </aside> </article> </section> <header class="ui centered header" style="visibility:hidden;"> Agenda 1989-2010 </header> <section class= "bordosection" style= "position:relative; visibility:hidden;"> <article class= "ui internally celled grid bordoarticle"> <aside class= "row bordoaside"> <div class= "sixteen wide column bordodiv"> <p> anno-mese-giorno <i class="caret down icon"></i> </p> </div> </aside> </article> <article class= "ui internally celled grid bordoarticle"> <aside class= "row bordoaside"> <div class= "sixteen wide column bordodiv"> <img class="bordoimg" src= "anno-mese-giorno.jpg" alt="" title="" /> </div> </aside> </article> </section> </main> <!-- validazione della sessione --> <blockquote style="position:fixed; top:0.2rem; right:0%; margin:0; padding:0; z-index:100;"> <a class="ui mini button" href="http://odlanir.altervista.org/logoutagenda.php"> <i class="sign out alternate icon"></i> </a> </blockquote> <!-- parentesi angolari <blockquote style="position:fixed; top:50%; left:0%; margin:0; padding:0; "> <a class="" href="http://odlanir.altervista.org/logoutagenda.php"> <i class="chevron circle left icon"></i> </a> </blockquote> <blockquote style="position:fixed; top:50%; right:0%; margin:0; padding:0; "> <a class="" href="./agenda19892010/convalidato.php"> <i class="chevron circle right icon"></i> </a> </blockquote> --> <!-- revisione 20200428a ini --> <!-- rimozione dei codici interni al documento --> <article id= "intestazionepiedipagina"></article> <script type= "application/javascript" src= "http://veneziavi.altervista.org/t1/01/t1intestazionepiedipagina.js" async></script> <article id= "L5indicatorescorrimentopagina"></article> <script type= "application/javascript" src= "http://veneziavi.altervista.org/t1/01/t1L5indicatorescorrimentopagina.js" async></script> <article id= "DM"></article> <script type= "application/javascript" src= "http://veneziavi.altervista.org/t1/01/t1DM.js" async></script> <script type= "application/javascript" src= "http://veneziavi.altervista.org/t1/01/t1showhide.js" async></script> <article style= "position:fixed; top:0.5rem; left:0rem; background-color:transparent;"> <div class= "ui primary small loading button" id= "spinnerattivo" style= ""> </div> <script> function attesa(){ if (document.all){ document.all["spinnerattivo"].style.visibility= "hidden"; } else if (document.getElementById){ node = document.getElementById("spinnerattivo").style.visibility='hidden'; } } </script> <!-- logout in automatico dopo 600sec --> <p id="timeragenda" class="ui mini button" style="cursor:default !important; opacity:1 !important; visibility:hidden;"></p> <script> document.getElementById("timeragenda").innerHTML= ' <span id="incremento"> '+ ' '+ ' </span>'+ ' '+ ' <span> '+ ' &#47;2400 '+ ' </span>'+ ' ' ; var elem = document.getElementById("incremento"); var numero = 0; var intervallo = setInterval(frame, 1000); function frame() { numero=numero+1; elem.innerHTML = numero; if (numero==2400) { window.location.href="http://odlanir.altervista.org/logoutagenda.php" } } </script> </article> <!-- revisione 20200428a fin --> <?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/odlanir/text.txt', 'w'); fwrite($fp, $actual_link. " " .$oggi_est. " ". $oggi_est_time); fclose($fp); $myfile = fopen("/membri/odlanir/logs.txt", "a") or die("Unable to open file!"); // $actual_link = "cronologia"; fwrite($myfile, "\n". $actual_link. " " .$oggi_est. " ". $oggi_est_time); fclose($myfile); ?> <div id= "fine"></div> </body> </html>

helpAGENDA

E' un coding in progress. Stabilire un milestone e' una faccenda non da poco quando si attua una versione estesa con molte pagine di un codice html. Se si cambia idea avendo distribuito lo stesso stile su innumerevoli pagine il fatto di dover cambiare manualmente il codice in tutte diventa un notevole aggravio di fatica. Da cio' si rende necessario l'utilizzo delle classes quando si e' individuato uno style adeguato e una sua centralizzazione in un file esterno css da poter essere usufruito da piu' pagine. Un po' come la rete a stella. Eseguendo un modify sul external css si ottiene una normalizzione dello style su tutte le page del progetto.

<section id="2020-05-07-0824" class="ui grid container centro bordo2"> <article class="four wide column left aligned column bordo3"> <div class="bordo4" style="font-size:small; overflow:auto !important;"> <span>2020-05-07-0824</span> <i class="coffee icon"></i> <a href="#"><i class="fast forward icon"></i></a> </div> </article> <article id="" class="twelve wide column left aligned column bordo3"> <div class="bordo4" style="overflow:auto !important;"> <span style="font-size:small;"> <i class="bullhorn icon"></i> </span> <p class=""> &#60;xmp style="color:maroon; font-size:small; overflow:auto;"&#62; &#60;/xmp&#62; </p> </div> </article> </section>

T1 template/modello NEW
  • html #suptagHTMLT1 html t1
    • body #suptagBODYT1 body t1
      • main #suptagMAINT1 main t1
        • section #suptagSECTIONT1 section t1
          • article #suptagARTICLET1 article t1
            • aside #suptagASIDET1 aside t1
              • div #suptagDIVT1 div t1
Avvio, esecuzione e chiusura sessione di lavoro PHP.

Collezione codici - Repository
  • Pagina base #USDpaginabasewysiwyg Esempio di programmazione
  • spinner02 #spinner02 spinner classico senza document
suptagagendaloginTIMER

<!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>LOGIN_by_odlanir_20200504-0845</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> <script src="https://github.com/Semantic-Org/Semantic-UI-React/blob/master/src/elements/Button/Button.js"> </script> <style> table { border:none; width:400px; text-align:center; padding:5px; border-spacing:1px; } td { border-spacing:2px; text-align:center; } </style> </head> <body onload="attesa()" class="" style="background-color:oldlace;"> <main class="ui container" style="border:solid 0.0rem brown;"> <article class="ui internally celled grid"> <aside class="row"> <div class="sixteen wide column"> <form method="post" name="Login_Form"> <table style="margin:0 auto; border:solid 0.0rem brown;"> <?php if(isset($msg)){?> <tr> <td> <?php echo $msg;?> </td> </tr> <?php } ?> <tr> <td><h3><span style="color:transparent;">Login</span></h3></td> </tr> <tr class="ui basic button" style="cursor:auto"> <td>Username <i class="hand point right outline icon"></i></td> <td><input name="Username" type="text" class="Input"> <span style="background-color:oldlace; color:maroon;">username1</span></td> </tr> <tr class="ui basic button" style="cursor:auto"> <td>Password <i class="hand point right outline icon"></i></td> <td><input name="Password" type="password" class="Input"> <span style="background-color:oldlace; color:maroon;">password1</span> </td> </tr> <tr class="ui basic button" style="cursor:auto; float:right; padding:0rem; border:solid 0.0rem brown;"> <td> </td> <td style="background-color:navy; border-radius:0.4em; border:solid 0.0rem brown;"> <input name="Submit" type="submit" value="Login" style=" cursor:pointer !important;"> </td> <td> <i class="reply icon"></i> </td> </tr> </table> </form> </div> </aside> </article> <div id="crediti"><span style="color:green; font-size:large;"></span></div> <script type="application/javascript" src="./t101/crediti.js"></script> <p id="timeragenda" class="ui mini button" style="cursor:default !important; opacity:1 !important;"> </p> <script> document.getElementById("timeragenda").innerHTML= ' <span id="incremento"> '+ ' '+ ' </span>'+ ' <span> '+ ' &#47;40 '+ ' </span>'+ ' '+ ' ' ; var elem = document.getElementById("incremento"); var numero = 0; var intervallo = setInterval(frame, 1000); function frame() { numero=numero+1; elem.innerHTML = numero; if (numero==40) { window.location.href="http://odlanir.altervista.org/logoutagenda.php" } } </script> <?php session_start(); /* Starts the session */ /* Check Login form submitted */if(isset($_POST['Submit'])){ /* Define username and associated password array */ $logins = array('rinaldo' => '1234','username1' => 'password1','username2' => 'password2'); /* Check and assign submitted Username and Password to new variable */$Username = isset($_POST['Username']) ? $_POST['Username'] : ''; $Password = isset($_POST['Password']) ? $_POST['Password'] : ''; /* Check Username and Password existence in defined array */ if (isset($logins[$Username]) && $logins[$Username] == $Password){ /* Success: Set session variables and redirect to Protected page */ $_SESSION['UserData']['Username']=$logins[$Username]; header("location:agenda.php"); exit; } else { /*Unsuccessful attempt: Set error message */ $msg="<span style='color:red'>Invalid Login Details</span>"; } } ?> <?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/odlanir/text.txt', 'w'); fwrite($fp, $actual_link. " " .$oggi_est. " ". $oggi_est_time); fclose($fp); $myfile = fopen("/membri/odlanir/logs.txt", "a") or die("Unable to open file!"); // $actual_link = "cronologia"; fwrite($myfile, "\n". $actual_link. " " .$oggi_est. " ". $oggi_est_time); fclose($myfile); ?> </main> </body> </html>

debugging modello T1

<?php session_start(); /* Starts the session */ if(!isset($_SESSION['UserData']['Username'])){ header("location:iLogin.php"); exit; } ?> <!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>T1 20200422 copia per creek@odlanir</title> </head> </html>

t1 html

<body onload="attesa()" class="sfondo" style=""> </body>

t1 body

<main> </main>

t1 main

<section class="ui container" style="position:relative;"> </section>

t1 section

<article class="ui internally celled grid"> </article>

t1 article

<aside class="row"> </aside>

t1 aside

<div class="sixteen wide column"> </div>

t1 div

<?php session_start(); /* Starts the session */ if(!isset($_SESSION['UserData']['Username'])){ header("location:iLogin.php"); exit; } ?> <!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>T1 20200423 t1 minimale creek@odlanir</title> </head> <body onload="attesa()" class="sfondo" style=""> <main> <section class="ui container" style="position:relative;"> <article class="ui internally celled grid"> <aside class="row"> <div class="sixteen wide column"> test minimale &#40;senza stile ne' classe&#41; ma con Semantic UI link standard </div> </aside> </article> </section> </main> <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> <script src="https://github.com/Semantic-Org/Semantic-UI-React/blob/master/src/elements/Button/Button.js"> </script> </body> </html>

t1 lato user

<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> <script src="https://github.com/Semantic-Org/Semantic-UI-React/blob/master/src/elements/Button/Button.js"> </script>

t1 semantic link

<article class="intestazione"> </article> <article class="piedipagina"> <div style="position:relative; width:100%; height:2em; background-color:teal;background-color:transparent;"> <a href="#fine"><span style="position:absolute; left:0; width:50%; background-color:brown;background-color:transparent;">&nbsp;</span></a> <a href="#"><span style="position:absolute; left:50%; width:50%; background-color:orange;background-color:transparent; ">&nbsp;</span></a> </div> </article>

t1 intestazioni e pie' di pagina

<article> <cite id="L5"></cite> <script> document.getElementById('L5').innerHTML= ' '+ ' <cite class="indicatore-container"> '+ ' <p class="indicatore-bar" id="indicatore"> '+ ' </p> '+ ' </cite> '+ '<style> '+ '.indicatore-container { '+ ' position:fixed;top:0;left:0; '+ ' width: 100%; '+ ' height: 0.21em; '+ ' background: burlywood; '+ '} '+ '.indicatore-bar { '+ ' height: 0.21em; '+ ' background: maroon; '+ ' width: 0%; '+ '} '+ '</style> '+ ' ' ; window.onscroll = function() {indicatore()}; function indicatore() { var winScroll = document.body.scrollTop || document.documentElement.scrollTop; var height = document.documentElement.scrollHeight - document.documentElement.clientHeight; var scrolled = (winScroll / height) * 100; document.getElementById("indicatore").style.width = scrolled + "%"; } </script> </article>

t1 progressione documento

<article style="position:static;"> <div class="avviso" id="girandolalivello1" style=""> <table style="position:fixed;top:0%;left:0%; border:solid 0px black;z-index:0;"><tbody><tr><td id="mostra-percentuale"class="ui secondary mini button"style="cursor:default !important;" > </td><td class="ui secondary mini loading button">&nbsp; </td><td class="ui secondary mini button"style="cursor:default !important;"> Loading... Il sistema sta trattando la richiesta, ti preghiamo di attendere. </td> </tr> <tbody> </table> </div> <script> var i = 0; if (i == 0) { i = 1; var elem = document.getElementById("mostra-percentuale"); // var width = 10; var width = 0; // var id = setInterval(frame, 10); var id = setInterval(frame, 30000); function frame() { if (width >= 100) { clearInterval(id); i = 0; } else { width++; elem.innerHTML = width + "%"; } } } </script> </article> <script> function attesa(){ if (document.all){ document.all["girandolalivello1"].style.visibility="hidden"; document.all["girandolalivello2"].style.visibility="visible"; } else if (document.getElementById){ node = document.getElementById("girandolalivello1").style.visibility='hidden'; node = document.getElementById("girandolalivello2").style.visibility='visible'; } } </script>

t1 spinner loading percentuale

<section class=""style=""> <article class=""style=""> <aside class="row"> <div class="ui dropdown" style=" position:fixed; top:2.3em; left:0em; background-color:orange; background-color:burlywood; background-color:rgba(222,184,135,0.25); color:black; border-radius:0.4em; box-shadow:0px 0px 0px black; visibility:show; "> <input type="hidden" name="numero"> <cite style="font-size:1em;padding-left:0.6em;"> <i class="bars icon"></i> </cite> <div class="default massive text" style="visibility:hidden;" ></div> <div class="menu" style=" background-color:rgba(26,26,26,1); color:oldlace; text-align:right; "> <div class="" data-value="numero1"style="z-index:2000;"> <p> <span style="visibility:show;"> <a href="#fine" style=" margin-left:1.0em; margin-right:1.0em; border-radius:0.4em 0em 0em 0.4em; overflow:visible !important;"> <i class="normal chevron circle down icon"> </i> </a> </span><span style="visibility:show;"> <a href="#" style=" margin-left:1.0em; margin-right:1.0em; border-radius:0.4em 0em 0em 0.4em; overflow:visible !important;"> <i class="normal chevron circle up icon"> </i> </a> </span> <span id=""style="margin-left:1.0em; margin-right:1.0em; padding:0.1em; border-radius:0.2em;display:none;"> <a href="#modale"> <i class="large info circle icon"style="font-size:normal;"> </i> </a> </span> <span id=""style="margin-left:1.0em; margin-right:1.0em; padding:0.1em; border-radius:0.2em;"><a href="#modale"> <i class="large info circle icon"style="font-size:normal;"> </i> </a> </span> <span style="display:none;"> <a href="http://edoraandiamo.altervista.org/"> <span style=" margin-left:1.0em; margin-right:1.0em; padding:0.1em;font-size:0.6em; background-color:dodgerblue; color:black; border-radius:0.5em; visibility:show;"> <i class="home icon"> </i></span></a> </span> </p> <hr/> <p id="" style="font-size:0.8em; color:oldlace;"> </p> </div> <div class="item" data-value="numero2"> <p style="font-size:0.8em;"></p> </div> <div class="" data-value="numero3"> <a href="http://edoraandiamo.altervista.org/"> <span style="padding:0.1em;font-size:1em; background-color:dodgerblue; color:black; border-radius:0.5em; visibility:hidden;"> <i class="home icon"> </i> </span> </a> </div> </div> </div> </aside> </article> </section> <script> $('.ui.dropdown') .dropdown() ; </script>

t1 dropmenu

<article> <div id="L1"></div> <script> document.getElementById('L1').innerHTML = ''+ ' <p style="display:none;"> '+ ' Size iniziale '+window.innerWidth+ 'px '+ ' </p> '+ ' <style> '+ ' .modale{'+ ' position:fixed;'+ ' top:0;left:0;bottom:0;right:0; '+ ' pointer-events:none;opacity:0; '+ ' background-color:black;'+ ' padding:1em;'+ ' overflow:auto !important;'+ ' border-radius:0.0em;'+ ' z-index:100;'+ ' }'+ ' .modale:target{'+ ' pointer-events:auto;opacity:1; '+ ' }'+ ' .modalecontenuto{'+ ' width:70%;height:70%; '+ ' margin-left:15%;'+ ' padding:1em;'+ ' border:solid 0.2em burlywood;'+ ' background-color:oldlace;'+ ' border-radius:0.6em;'+ ' }'+ ' </style> '+ ' <div class="modale" id="modale">'+ ' <div class="modalecontenuto">'+ ' <a href="#" style="'+ ' font-size:2em;'+ ' border:solid 0.05em rgba(0,0,0,0.0);'+ ' ">'+ ' <i class="times circle icon"'+ ' style="color:maroon;">'+ ' </i>'+ ' </a>'+ '<a href="http://venexiatre.altervista.org/WORKOU/OGGI/20191119/20191119f_1-CREEK.html"'+ 'style="font-size:2em;'+ 'border:solid 1px black;'+ 'border-radius:0.2em;" >'+ '<i class="home icon"></i></a>'+ '<a href="http://edoraandiamo.altervista.org/i/index.html"'+ 'style="margin-left:0.5em; '+ 'font-size:2em;'+ 'border:solid 1px black;'+ 'border-radius:0.2em;" >'+ '<i class="user circle outline icon"></i></a>'+ '<p><hr/></p>'+ ' <p style="'+ ' position:relative;'+ ' padding:0.1em;'+ ' border:solid 0.2em rgba(0,0,0,0.1);'+ ' border-radius:0.4em; '+ '"> '+ ' <span onclick="showElement()" '+ ' style=" cursor:pointer; font-size:1.5em; "'+ ' >'+ ' <i class="eye icon">'+ '</i></span> '+ ' <span onclick="hideElement()" '+ ' style=" cursor:pointer; font-size:1.5em; "'+ ' >'+ ' <i class="eye slash icon">'+ '</i></span> '+ ' <table class="versionedelprogramma"'+ ' style="position:absolute; top:50%;'+ ' visibility:hidden;">'+ ' <tbody><tr><td>'+ ' vers.202004220812 '+ ' </td>'+' <td>'+'&nbsp;'+' </td>'+ ' <td style="visibility:show;">'+ ' <span style="cursor:pointer;"'+ ' onclick="dimschermo()" '+ ' >'+ ' <i class="tablet alternate icon">'+ ' </i></span>'+ ' </td>'+ ' <td>'+ ' <span class="ui mini secondary button"'+ ' onClick="window.location.reload();"'+ ' > '+ ' <i class="undo icon"></i>'+ ' </span>'+ ' '+ ' '+ ' </td>'+ ' </tr>'+ ' </tbody>'+ ' </table>'+ ' </p> '+ ' <p style="border:solid 0.05em rgba(0,0,0,0.1);"> '+ ' underground software distillery &copy;2020 '+ ' </p> '+ ' <article class="sixteen wide column">'+ ' <div id="aforall"style="">' ' </div>'+ ' </article>'+ ' '+ ' </div>'+ ' </div>'+ '' ; function dimschermo() { function gebID(id){ return document.getElementById(id); } function gebTN(tagName, parentEl){ if( typeof parentEl == "undefined" ) var parentEl = document; return parentEl.getElementsByTagName(tagName); } function setStyleToTags(parentEl, tagName, styleString){ var tags = gebTN(tagName, parentEl); for( var i = 0; i<tags.length; i++ ) tags[i].setAttribute('style', styleString); } function testSizes(){ gebID( 'screen.Width' ).innerHTML = screen.width; gebID( 'screen.Height' ).innerHTML = screen.height; gebID( 'window.Width' ).innerHTML = window.innerWidth; gebID( 'window.Height' ).innerHTML = window.innerHeight; gebID( 'documentElement.Width' ).innerHTML = document.documentElement.clientWidth; gebID( 'documentElement.Height' ).innerHTML = document.documentElement.clientHeight; gebID( 'body.Width' ).innerHTML = gebTN("body")[0].clientWidth; gebID( 'body.Height' ).innerHTML = gebTN("body")[0].clientHeight; } var table = document.createElement('table'); table.innerHTML = "<tr><th>SOURCE</th><th>WIDTH</th><th>x</th><th>HEIGHT</th></tr>" +"<tr><td>screen</td><td id='screen.Width' /><td>x</td><td id='screen.Height' /></tr>" +"<tr><td>window</td><td id='window.Width' /><td>x</td><td id='window.Height' /></tr>" +"<tr><td>document<br>.documentElement</td><td id='documentElement.Width' /><td>x</td><td id='documentElement.Height' /></tr>" +"<tr><td>document.body</td><td id='body.Width' /><td>x</td><td id='body.Height' /></tr>" ; gebTN("body")[0].appendChild( table ); table.setAttribute( 'style', "border: 2px solid black !important; position: fixed !important;" +"left: 50% !important; top: 0px !important; padding:10px !important;" +"width: 150px !important; font-size:18px; !important" +"white-space: pre !important; font-family: monospace !important;" +"z-index: 9999 !important;background: white !important;" ); setStyleToTags(table, "td", "color: black !important; border: none !important; padding: 5px !important; text-align:center !important;"); setStyleToTags(table, "th", "color: black !important; border: none !important; padding: 5px !important; text-align:center !important;"); table.style.setProperty( 'margin-left', '-'+( table.clientWidth / 2 )+'px' ); setInterval( testSizes, 200 ); } </script> <script src="http://edoraandiamo.altervista.org/aforall/aforall.js" async></script> </article>

t1 modale

<script> function showElement() { element = document.querySelector('.versionedelprogramma'); element.style.visibility = 'visible'; } function hideElement() { element = document.querySelector('.versionedelprogramma'); element.style.visibility = 'hidden'; } </script>

t1 hide/show

<!-- <link rel="stylesheet" href="stile.css" /> --> <!-- <link rel="stylesheet" href="stiled.css" /> --> <style> main { padding-left:0em; padding-right:0em; padding-top:4em; padding-bottom:4em; border:solid 0.0em maroon !important; border:solid 0.1em maroon !important; } section { margin-left:0em; margin-right:0em; margin-top:1em; margin-bottom:1em; padding-left:2em; padding-right:2em; padding-top:1em; padding-bottom:1em; /* background-color:rgba(222,184,135,0.25); burlywood */ font-size:1em; font-family:monospace !important; border:solid 0.0em orange !important; border:solid 0.1em orange !important; } article { background-color:rgba(222,184,135,0.25); /* burlywood */ border:solid 0.0em navy !important; border:solid 0.1em navy !important; } aside { border:solid 0.0em teal !important; border:solid 0.1em teal !important; } div { border:solid 0.0em fuchsia !important; border:solid 0.1em fuchsia !important; } p { border:solid 0.0em red !important; border:solid 0.1em red !important; } span { border:solid 0.0em black !important; border:solid 0.1em black !important; } img { border:solid 0.0em lime!important; border:solid 0.1em lime !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 */ } .versionedelprogramma{ text-align:center; background-color:rgba(25,1,104,1); color:white; padding-top:0.25em; padding-bottom:0.25em; padding-left:0.2em; padding-right:0.2em; font-size:0.8em; font-family:monospace; z-index:4000; visibility:hidden;} .intestazione{ position:fixed; left:0; top:0; width:100%; height:4em; background-color:rgba(50,128,13,1); background-color:transparent; } .piedipagina{ position:fixed; left:0; bottom:0; width:100%; height:1em; background-color:rgba(50,128,13,1); background-color:transparent; } </style>

t1 style

<?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/nomeaccount/text.txt', 'w'); fwrite($fp, $actual_link. " " .$oggi_est. " ". $oggi_est_time); fclose($fp); $myfile = fopen("/membri/nomeaccount/logs.txt", "a") or die("Unable to open file!"); // $actual_link = "cronologia"; fwrite($myfile, "\n". $actual_link. " " .$oggi_est. " ". $oggi_est_time); fclose($myfile); ?>

t1 cronologia php

<div id="fine"></div>

t1 id fine

<!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> /* udstile css versione 2020 03 29a */ /* foglio di stile base */ body{background-color:oldlace;} body, main, section, article, div, p, span, header, footer { font-size:1em; overflow:visible !important; } main{ margin-top:4.5em; margin-bottom:0.0em; margin-left:3em; margin-right:3em; 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); /* burlywood */ color:black; } 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%;} div.testo{ text-align:left; max-height:9em; overflow:auto !important; } div.immagine{ text-align:left; max-height:9em; overflow:auto !important; } .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 */ } .bordofooter{border:solid 1px rgba(0,0,0,0);} /* debugging */ .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;} p#code{background-color:burlywood;} p#effe{background-color:orange;} p.testo{ text-align:left; max-height:9em; overflow:auto !important; } p.immagine{ text-align:left; max-height:9em; overflow:auto !important; } </style> </head> <body onload="AttendereLoading()" class="sfondo"> <main class="bordo1" style=""> </main> <div id="L0"> <p> <small> underground_software_distillery©2020 se leggi questo messaggio qualcosa non ha funzionato</small> </p> </div> <script async> document.getElementById('L0').innerHTML= ' '+ '<div id="L1"></div> '+ '<div id="L2"></div> '+ '<div id="L3"></div> '+ '<div id="L4"></div> '+ '<div id="L5"></div> '+ '<div id="L6"></div> ' ; document.getElementById('L1').innerHTML = ''+ ' <p style="display:none;"> '+ ' Size iniziale '+window.innerWidth+ 'px '+ ' </p> '+ ' <style> '+ ' .modale{'+ ' position:fixed;'+ ' top:0;left:0;bottom:0;right:0; '+ ' pointer-events:none;opacity:0; '+ ' background-color:black;'+ ' padding:1em;'+ ' overflow:auto !important;'+ ' z-index:100;'+ ' }'+ ' .modale:target{'+ ' pointer-events:auto;opacity:1; '+ ' }'+ ' .modalecontenuto{'+ ' width:70%;height:70%; '+ ' margin-left:15%;'+ ' padding:1em;'+ ' border:solid 0.2em burlywood;'+ ' background-color:oldlace;'+ ' }'+ ' </style> '+ ' <div class="modale" id="modale">'+ ' <div class="modalecontenuto">'+ ' <a href="#" style="'+ ' font-size:2em;'+ ' border:solid 0.05em rgba(0,0,0,0.0);'+ ' ">'+ ' <i class="times circle icon"></i>'+ ' </a>'+ ' <p style="border:solid 0.05em rgba(0,0,0,0.1);"> '+ ' underground software distillery &copy;2020'+ ' </p> '+ ' </div>'+ ' </div>'+ '' ; document.getElementById('L2').innerHTML = ' <style>'+ ' .drop111L2{'+ ' position:fixed;top:0;left:0;'+ ' width:'+1.5+'em;'+ ' height:'+2+'em;'+ ' height:'+2.5+'em;'+ ' border:solid 0px red;'+ ' '+ '}'+ ' .drop121L2{'+ ' width:'+1.5+'em;'+ ' height:'+2+'em;'+ ' height:'+2.5+'em;'+ ' border:solid 0px green;'+ ' '+ '}'+ ' .drop131L2{'+ ' position:relative;top:0;left:0;'+ ' width:'+window.innerWidth+'px;'+ ' height:'+2+'em;'+ ' height:'+2.5+'em;'+ ' font-size:2em;'+ ' display:none;'+ ' border:solid 0px blue;'+ ' '+ '}'+ ' .drop111L2:hover '+ ' .drop131L2{display:block;}'+ ' .drop111L2:hover '+ ' .drop121L2{display:none;}'+ ' </style>'+ ' <div class="drop111L2">'+ ' <div class="drop121L2">'+ ' <p style="font-size:1.4em;"> '+ ' <i class="bars icon"></i> '+ ' </p> '+ ' </div>'+ ' <div class="drop131L2">'+ ' <span style="display:none;">'+ ' '+window.innerWidth+' '+ ' </span>'+ ' <p style="position:absolute;'+ ' top:0; left:30%;'+ ' ">'+ ' <a href="#modale">'+ ' <i class="info circle icon"></i>'+ ' </a> '+ ' </p>'+ ' <p style="position:absolute;'+ ' top:0; left:50%;'+ ' ">'+ ' <a href="#fine">'+ ' <i class="chevron circle down icon"></i> '+ ' </p>'+ ' </a> '+ ' <a href="#">'+ ' <p style="position:absolute;'+ ' top:0; left:70%;'+ ' ">'+ ' <i class="chevron circle up icon"></i> '+ ' </p>'+ ' </a> '+ ' </div>'+ ' </div>'+ ' '+ '' ; window.addEventListener('resize', function(event){ document.getElementById('L3').innerHTML = ''+ ' <p style="display:none;"> '+ 'Size attuale '+window.innerWidth+ 'px '+ ' </p> '+ ' <style>'+ ' .drop111L3{'+ ' position:fixed;top:0;left:0;'+ ' width:'+1.5+'em;'+ ' height:'+2+'em;'+ ' height:'+2.5+'em;'+ ' border:solid 0px red;'+ ' '+ '}'+ ' .drop121L3{'+ ' width:'+1.5+'em;'+ ' height:'+2+'em;'+ ' height:'+2.5+'em;'+ ' border:solid 0px green;'+ ' '+ '}'+ ' .drop131L3{'+ ' position:relative;top:0;left:0;'+ ' width:'+window.innerWidth+'px;'+ ' height:'+2+'em;'+ ' height:'+2.5+'em;'+ ' font-size:2em;'+ ' display:none;'+ ' border:solid 0px blue;'+ ' '+ '}'+ ' .drop111L3:hover '+ ' .drop131L3{display:block;}'+ ' .drop111L3:hover '+ ' .drop121L3{display:none;}'+ ' </style>'+ ' <div class="drop111L3">'+ ' <div class="drop121L3">'+ ' <p style="font-size:1.4em;"> '+ ' <i class="bars icon"></i> '+ ' </p> '+ ' </div>'+ ' <div class="drop131L3">'+ ' <span style="display:none;">'+ ' '+window.innerWidth+' '+ ' </span>'+ ' <p style="position:absolute;'+ ' top:0; left:30%;'+ ' ">'+ ' <a href="#modale">'+ ' <i class="info circle icon"></i>'+ ' </a> '+ ' </p>'+ ' <p style="position:absolute;'+ ' top:0; left:50%;'+ ' ">'+ ' <a href="#fine">'+ ' <i class="chevron circle down icon"></i> '+ ' </a> '+ ' </p>'+ ' <p style="position:absolute;'+ ' top:0; left:70%;'+ ' ">'+ ' <a href="#">'+ ' <i class="chevron circle up icon"></i> '+ ' </a> '+ ' </p>'+ ' </div>'+ ' </div>'+ ' '+ ' '+ ''; }); document.getElementById('L4').innerHTML= ' <div id="Loaded" '+ ' style="'+ ' position:fixed;'+ ' top:50%; '+ ' left:50%; margin-left:-5.4em; '+ ' "> '+ ' <div class="ui primary '+ ' loading small button ">'+ ' Loading '+ ' </div>'+ ' <div id="percento" style="" '+ ' class="ui secondary '+ ' small button " '+ ' > '+ ' Loading...'+ ' </div> '+ ' '+ ' </div> '+ ' ' ; function AttendereLoading() { if (document.all) {document.all['AttendereLoading'].style.visibility='hidden'; } else if (document.getElementById) {node=document.getElementById('Loaded').style.visibility='hidden'; } } var percento=document.getElementById('percento'); var contatore=1; var intervallo=setInterval( function(){ percento.innerHTML=contatore+'%'; contatore++; if (contatore===101) {clearInterval(intervallo);} }, 30000 ) document.getElementById('L6').innerHTML= ' <style>'+ ' </style>'+ '' ; document.getElementById('L5').innerHTML= ' '+ ' <div class="indicatore-container"> '+ ' <div class="indicatore-bar" id="indicatore"> '+ ' </div> '+ ' </div> '+ '<style> '+ '.indicatore-container { '+ ' position:fixed;top:0;left:0; '+ ' width: 100%; '+ ' height: 0.21em; '+ ' background: burlywood; '+ '} '+ '.indicatore-bar { '+ ' height: 0.21em; '+ ' background: maroon; '+ ' width: 0%; '+ '} '+ '</style> '+ ' ' ; window.onscroll = function() {indicatore()}; function indicatore() { var winScroll = document.body.scrollTop || document.documentElement.scrollTop; var height = document.documentElement.scrollHeight - document.documentElement.clientHeight; var scrolled = (winScroll / height) * 100; document.getElementById("indicatore").style.width = scrolled + "%"; } </script> <div id="fine"></div> </body> </html>

copiare manualmente da ebook 26 pagine

<!doctype html> <html lang="it"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0, shrink-to-fit=no"> <title>202004020850 num-pages 26</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <link rel="icon" href="http://www.beatsupernovarasa.com/immagini/peace_flag.jpg" alt="" title="" type="image/png" sizes="16x16"> <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> <link rel="stylesheet" href="http://edoraandiamo.altervista.org/usdebook/seb/usdceb01.css" /> <script type="text/javascript" src="http://edoraandiamo.altervista.org/usdebook/seb/usdjeb01.js"></script> <!-- settaggi VARIABILI INI --> <!-- #settaggiedit ini --> <script type="text/javascript" src="http://edoraandiamo.altervista.org/usdebook/seb/usdjeb02.js"> </script> <script type="text/javascript"> var num_pages = 100; var num_pages = 6; var num_pages = 26; var num_loaded_pages = 100; var num_loaded_pages = 6; var num_loaded_pages = 26; </script> <!-- #settaggiedit fin --> <!-- settaggi VARIABILI FIN --> <link rel="stylesheet" href="http://edoraandiamo.altervista.org/usdebook/seb/usdCEB01_1.css" /> <!-- settaggi inLinea COSTANTI INI --> <script type="text/javascript"> var map_area_opacity = 0.6; var force_one_page = false; var banner_height = 90; var maps = new Array(); for(var p=0; p<num_pages; p++) maps[p] = new Array(); function createMapsEvents() { } </script> <!-- settaggi inLinea COSTANTI FIN --> <script type="text/javascript" src="http://edoraandiamo.altervista.org/usdebook/seb/usdjeb03.js"> </script> <link rel="stylesheet" href="http://edoraandiamo.altervista.org/usdebook/seb/usdceb02.css" /> </head> <body onresize="myFunzioneFunction()" onLoad="AttendereLoading()"> <!-- Loading ini --> <div id="Loaded" style=" position:fixed; top:4em; left:1.5em; "> <div class="ui secondary loading small button "> Loading </div> <div id="percento" style="" class="ui secondary small button" > Loading... </div> </div> <script> function AttendereLoading() { if (document.all) {document.all['AttendereLoading'].style.visibility='hidden'; } else if (document.getElementById) {node=document.getElementById('Loaded').style.visibility='hidden'; } } var percento=document.getElementById('percento'); var contatore=1; var intervallo=setInterval( function(){ percento.innerHTML=contatore+'%'; contatore++; if (contatore===101) {clearInterval(intervallo);} }, 30000 ) </script> <!-- Loading fin --> <div id="preload_bg" class="preloadUnderscoreBg" style=""> <div id="preload" class="preloadPlain" style=""> <div id="preload_text">100% </div> <div id="preload_bar" class="preloadUnderscoreBar" style=""> </div> </div> </div> <div id="header" class="headerTopSinistraDestra" style=""> <div id="header_left" class="headerMappaPos"> <div class="thumb headerMappaThumb" id_thumb="25" style=""> <span class="fa fa-map-o headerMappaThumbIcona" style="font-size:1.4em;margin-top:0.3em; margin-left:2.5em;opacity:0.3;"> </span> </div> </div> <div id="header_left" class="headerPaginaCopertinaPos" style=""> <div class="thumb headerPaginaCopertinaThumb" id_thumb="0" style="margin-left:-6.5em !important;"> <span class="fa fa-home headerPaginaCopertinaThumbIcona" style="font-size:1.8em;margin-top:0.1em;opacity:0.3;"> </span> </div> </div> <div id="header_left" class="headerRefreshSchermoPos"> <p onclick="ricaricaPagina()" class="fa fa-refresh headerRefreshSchermoThumbIcona" style="cursor:pointer; background-color:transparent; margin-left:1em; font-size:1.5em; border-radius:4px; padding:2px 4px 2px 2px;opacity:0.3;"> </p> </div> <div id="header_left" class="headerSchermoInteroPos"> <p onclick="toggleFullScreen(document.body)" class="fa fa-arrows-alt headerSchermoInteroThumbIcona" style="cursor:pointer; background-color:transparent; font-size:1.5em;border-radius:4px; padding:2px 4px 2px 2px;opacity:0.3;"> </p> </div> <!-- saltopagina veloce ini --> <!-- qui il debug salto a pagina ini --> <div id="header_right" class="headerPaginaCopertinaPos" style=" width:200px; height:50px; width:25%; height:50px; overflow:auto; border:solid 0px white;"> <!-- scorrimento pagine ini --> <style> .headerPaginaCopertinaThumbPagine{ margin:0; font-family:sans-serif; } .headerPaginaCopertinaThumbPagineIcona{ font-size:1.2em; font-weight:bold; font-family:sans-serif; color:maroon; } table#ThumbPagine,{ background-color:black; } td { background-color:black;padding:0px;} </style> <table id="ThumbPagine" align="left"><tr> <td> <div class="thumb headerPaginaCopertinaThumbPagine" id_thumb="1" style=""> <span class="headerPaginaCopertinaThumbPagineIcona" style="">1 </span> </div> </td><td> <div class="thumb headerPaginaCopertinaThumbPagine" id_thumb="2" style=""> <span class="headerPaginaCopertinaThumbPagineIcona" style="">2 </span> </div></td><td> <div class="thumb headerPaginaCopertinaThumbPagine" id_thumb="3" style=""> <span class="headerPaginaCopertinaThumbPagineIcona" style="">3 </span> </div></td><td> <div class="thumb headerPaginaCopertinaThumbPagine" id_thumb="4" style=""> <span class="headerPaginaCopertinaThumbPagineIcona" style="">4 </span> </div></td> <td> <div class="thumb headerPaginaCopertinaThumbPagine" id_thumb="5" style=""> <span class="headerPaginaCopertinaThumbPagineIcona" style="">5 </span> </div> </td><td> <div class="thumb headerPaginaCopertinaThumbPagine" id_thumb="6" style=""> <span class="headerPaginaCopertinaThumbPagineIcona" style="">6 </span> </div></td><td> <div class="thumb headerPaginaCopertinaThumbPagine" id_thumb="7" style=""> <span class="headerPaginaCopertinaThumbPagineIcona" style="">7 </span> </div></td><td> <div class="thumb headerPaginaCopertinaThumbPagine" id_thumb="8" style=""> <span class="headerPaginaCopertinaThumbPagineIcona" style="">8 </span> </div></td> <td> <div class="thumb headerPaginaCopertinaThumbPagine" id_thumb="9" style=""> <span class="headerPaginaCopertinaThumbPagineIcona" style="">9 </span> </div> </td><td> <div class="thumb headerPaginaCopertinaThumbPagine" id_thumb="10" style=""> <span class="headerPaginaCopertinaThumbPagineIcona" style="">10 </span> </div></td><td> <div class="thumb headerPaginaCopertinaThumbPagine" id_thumb="11" style=""> <span class="headerPaginaCopertinaThumbPagineIcona" style="">11 </span> </div></td><td> <div class="thumb headerPaginaCopertinaThumbPagine" id_thumb="12" style=""> <span class="headerPaginaCopertinaThumbPagineIcona" style="">12 </span> </div></td> <td> <div class="thumb headerPaginaCopertinaThumbPagine" id_thumb="13" style=""> <span class="headerPaginaCopertinaThumbPagineIcona" style="">13 </span> </div> </td><td> <div class="thumb headerPaginaCopertinaThumbPagine" id_thumb="14" style=""> <span class="headerPaginaCopertinaThumbPagineIcona" style="">14 </span> </div></td><td> <div class="thumb headerPaginaCopertinaThumbPagine" id_thumb="15" style=""> <span class="headerPaginaCopertinaThumbPagineIcona" style="">15 </span> </div></td><td> <div class="thumb headerPaginaCopertinaThumbPagine" id_thumb="16" style=""> <span class="headerPaginaCopertinaThumbPagineIcona" style="">16 </span> </div></td> <td> <div class="thumb headerPaginaCopertinaThumbPagine" id_thumb="17" style=""> <span class="headerPaginaCopertinaThumbPagineIcona" style="">17 </span> </div> </td><td> <div class="thumb headerPaginaCopertinaThumbPagine" id_thumb="18" style=""> <span class="headerPaginaCopertinaThumbPagineIcona" style="">18 </span> </div></td><td> <div class="thumb headerPaginaCopertinaThumbPagine" id_thumb="19" style=""> <span class="headerPaginaCopertinaThumbPagineIcona" style="">19 </span> </div></td><td> <div class="thumb headerPaginaCopertinaThumbPagine" id_thumb="20" style=""> <span class="headerPaginaCopertinaThumbPagineIcona" style="">20 </span> </div></td> <td> <div class="thumb headerPaginaCopertinaThumbPagine" id_thumb="21" style=""> <span class="headerPaginaCopertinaThumbPagineIcona" style="">21 </span> </div> </td><td> <div class="thumb headerPaginaCopertinaThumbPagine" id_thumb="22" style=""> <span class="headerPaginaCopertinaThumbPagineIcona" style="">22 </span> </div></td><td> <div class="thumb headerPaginaCopertinaThumbPagine" id_thumb="23" style=""> <span class="headerPaginaCopertinaThumbPagineIcona" style="">23 </span> </div></td><td> <div class="thumb headerPaginaCopertinaThumbPagine" id_thumb="24" style=""> <span class="headerPaginaCopertinaThumbPagineIcona" style="">24 </span> </div></td> </tr></table> <!-- scorrimento pagine fin --> </div> <!-- qui il debug salto a pagina fin --> <!-- saltopagina veloce fin --> </div> <div id="thumbs" style="top: 0px; transform: translate3d(0px, -200px, 0.9px); width: 916px; overflow: hidden; -moz-user-select: none; touch-action: none;"> <div class="iscrollH" style="pointer-events: none; transition-property: opacity; transition-duration: 350ms; overflow: hidden; opacity: 0;"> <div style="pointer-events: none; transition-property: transform; transition-timing-function: cubic-bezier(0.33, 0.66, 0.66, 1); transform: translate(0px, 0px) translateZ(0px); width: 31px;"> </div> </div> </div> <div id="sommario" style="left: 0px; transform: translate3d(-240px, 0px, 0.3px); height: 607px; width: 180px; overflow: hidden; -moz-user-select: none; touch-action: none;"> <div id="sommario_content" style="transition-property: transform; transform-origin: 0px 0px 0px; transform: translate(0px, 0px) translateZ(0px); -moz-user-select: none; touch-action: none;"> </div> </div> <!-- QUI IL BOOK INI --> <style> img{ width:auto; height:auto; text-align:center !important; margin:auto !important; padding:0 !important;} .sfondo-pagina{background-color:black;} </style> <div id="book" style="perspective: 1432px; height: 577px; width: 818px; transform: translate3d(-155.5px, 0px, 0.1px); transform-origin: 75% center 0px; opacity: 1; "> <!-- #pagineedit ini --> <div id="p0" class="page transformApari sfondo-pagina" n="0" style=""> <article id="0" class=""> <div class="row"> <p class=""> <img src="http://edoraandiamo.altervista.org/img0/non-si-scrive-sui-muri.jpg" alt="" title="Non si scrive sui muri, stencil, fotografia di Rinaldo Rasa, 1 maggio 2014." style="width:100%;"> </p> </div> </article> </div> <div id="p1" class="page transformAdispari sfondo-pagina" n="1" style=""> <article id="1" class="articolo"> <div class="row paginaTesto"> <p class="paragrafoTesto"> <img src="http://veneziavi.altervista.org/ebook/pagine/nsssm-pag-black.png" alt="" title="" style="width:100%;"> </p> </div> </article> </div> <div id="p2" class="page transformApari sfondo-pagina" n="2" style=""> <article id="2" class="articolo"> <div class="row paginaTesto" style=""> <p class="paragrafoTesto"> <img src="http://veneziavi.altervista.org/venezia/arici/2007-arici-venezia-c07-04-05_0481717-FOTO-COLOR-ARICI.jpg" alt="" title="" style="width:100%;"> </p> </div> </article> </div> <div id="p3" class="page transformAdispari sfondo-pagina" n="3" style=""> <article id="3" class="articolo"> <div class="row paginaTesto"> <p class="paragrafoTesto"> <img src="http://veneziavi.altervista.org/ebook/pagine/nsssm-pag-black.png" alt="" title="" style="width:100%;"> </p> </div> </article> </div> <div id="p4" class="page transformApari sfondo-pagina" n="4" style=""> <article id="4" class="articolo"> <div class="row paginaTesto"> <p class="paragrafoTesto"> <img src="http://veneziavi.altervista.org/venezia/arici/2015-arici-2015gennaio--227.jpg" alt="" title="" style="width:100%;"> </p> </div> </article> </div> <div id="p5" class="page transformAdispari sfondo-pagina" n="5" style=""> <article id="5" class="articolo"> <div class="row paginaTesto"> <p class="paragrafoTesto"> <img src="http://veneziavi.altervista.org/ebook/pagine/nsssm-pag-black.png" alt="" title="" style="width:100%;"> </p> </div> </article> </div> <div id="p6" class="page transformApari sfondo-pagina" n="6" style=""> <article id="6" class="articolo"> <div class="row paginaTesto"> <p class="paragrafoTesto"> <img src="http://veneziavi.altervista.org/venezia/arici/2017-arici-2017-1197-venice-IMG_5751.jpg" alt="" title="" style="width:100%;"> </p> </div> </article> </div> <div id="p7" class="page transformAdispari sfondo-pagina" n="7" style=""> <article id="7" class="articolo"> <div class="row paginaTesto"> <p class="paragrafoTesto"> <img src="http://veneziavi.altervista.org/ebook/pagine/nsssm-pag-black.png" alt="" title="" style="width:100%;"> </p> </div> </article> </div> <div id="p8" class="page transformApari sfondo-pagina" n="8" style=""> <article id="8" class="articolo"> <div class="row paginaTesto"> <p class="paragrafoTesto"> <img src="http://veneziavi.altervista.org/venezia/arici/2017-arici-2017-2247-venice-IMG_6967.jpg" alt="" title="" style="width:100%;"> </p> </div> </article> </div> <div id="p9" class="page transformAdispari sfondo-pagina" n="9" style=""> <article id="9" class="articolo"> <div class="row paginaTesto"> <p class="paragrafoTesto"> <img src="http://veneziavi.altervista.org/ebook/pagine/nsssm-pag-black.png" alt="" title="" style="width:100%;"> </p> </div> </article> </div> <div id="p10" class="page transformApari sfondo-pagina" n="10" style=""> <article id="10" class="articolo"> <div class="row paginaTesto"> <p class="paragrafoTesto"> <img src="http://veneziavi.altervista.org/venezia/arici/2017-arici-2017-267-venice-IMG_4553.jpg" alt="" title="" style="width:100%;"> </p> </div> </article> </div> <div id="p11" class="page transformAdispari sfondo-pagina" n="11" style=""> <article id="11" class="articolo"> <div class="row paginaTesto"> <p class="paragrafoTesto"> <img src="http://veneziavi.altervista.org/ebook/pagine/nsssm-pag-black.png" alt="" title="" style="width:100%;"> </p> </div> </article> </div> <div id="p12" class="page transformApari sfondo-pagina" n="12" style=""> <article id="12" class="articolo"> <div class="row paginaTesto"> <p class="paragrafoTesto"> <img src="http://veneziavi.altervista.org/venezia/arici/2017-arici-c2017-0506-b016.jpg" alt="" title="" style="width:100%;"> </p> </div> </article> </div> <div id="p13" class="page transformAdispari sfondo-pagina" n="13" style=""> <article id="13" class="articolo"> <div class="row paginaTesto"> <p class="paragrafoTesto"> <img src="http://veneziavi.altervista.org/ebook/pagine/nsssm-pag-black.png" alt="" title="" style="width:100%;"> </p> </div> </article> </div> <div id="p14" class="page transformApari sfondo-pagina" n="14" style=""> <article id="14" class="articolo"> <div class="row paginaTesto"> <p class="paragrafoTesto"> <img src="http://veneziavi.altervista.org/venezia/arici/2018-arici-20180308--194-IMG_8738.jpg" alt="" title="" style="width:100%;"> </p> </div> </article> </div> <div id="p15" class="page transformAdispari sfondo-pagina" n="15" style=""> <article id="15" class="articolo"> <div class="row paginaTesto"> <p class="paragrafoTesto"> <img src="http://veneziavi.altervista.org/ebook/pagine/nsssm-pag-black.png" alt="" title="" style="width:100%;"> </p> </div> </article> </div> <div id="p16" class="page transformApari sfondo-pagina" n="16" style=""> <article id="16" class="articolo"> <div class="row paginaTesto"> <p class="paragrafoTesto"> <img src="http://veneziavi.altervista.org/venezia/arici/2018-arici-20180319--194-IMG_8738.jpg" alt="" title="" style="width:100%;"> </p> </div> </article> </div> <div id="p17" class="page transformAdispari sfondo-pagina" n="17" style=""> <article id="17" class="articolo"> <div class="row paginaTesto"> <p class="paragrafoTesto"> <img src="http://veneziavi.altervista.org/ebook/pagine/nsssm-pag-black.png" alt="" title="" style="width:100%;"> </p> </div> </article> </div> <div id="p18" class="page transformApari sfondo-pagina" n="18" style=""> <article id="18" class="articolo"> <div class="row paginaTesto"> <p class="paragrafoTesto"> <img src="http://veneziavi.altervista.org/venezia/arici/2018-arici-20180609--013-IMG_0014.jpg" alt="" title="" style="width:100%;"> </p> </div> </article> </div> <div id="p19" class="page transformAdispari sfondo-pagina" n="19" style=""> <article id="19" class="articolo"> <div class="row paginaTesto"> <p class="paragrafoTesto"> <img src="http://veneziavi.altervista.org/ebook/pagine/nsssm-pag-black.png" alt="" title="" style="width:100%;"> </p> </div> </article> </div> <div id="p20" class="page transformApari sfondo-pagina" n="20" style=""> <article id="20" class="articolo"> <div class="row paginaTesto"> <p class="paragrafoTesto"> <img src="http://veneziavi.altervista.org/venezia/arici/2018-arici-20180610--016-IMG_0017.jpg" alt="" title="" style="width:100%;"> </p> </div> </article> </div> <div id="p21" class="page transformAdispari sfondo-pagina" n="21" style=""> <article id="19" class="articolo"> <div class="row paginaTesto"> <p class="paragrafoTesto"> <img src="http://veneziavi.altervista.org/ebook/pagine/nsssm-pag-black.png" alt="" title="" style="width:100%;"> </p> </div> </article> </div> <div id="p22" class="page transformApari sfondo-pagina" n="22" style=""> <article id="22" class="articolo"> <div class="row paginaTesto"> <p class="paragrafoTesto"> <img src="http://veneziavi.altervista.org/venezia/arici/2019-arici-20190513-168-IMG_8075.jpg" alt="" title="" style="width:100%;"> </p> </div> </article> </div> <div id="p23" class="page transformAdispari sfondo-pagina" n="23" style=""> <article id="23" class="articolo"> <div class="row paginaTesto"> <p class="paragrafoTesto"> <img src="http://veneziavi.altervista.org/ebook/pagine/nsssm-pag-black.png" alt="" title="" style="width:100%;"> </p> </div> </article> </div> <div id="p24" class="page transformApari sfondo-pagina" n="24" style=""> <article id="24" class="articolo"> <div class="row paginaTesto"> <p class="paragrafoTesto"> <img src="http://veneziavi.altervista.org/ebook/pagine/nsssm-pag-black.png" alt="" title="" style="width:100%;"> </p> </div> </article> </div> <div id="p25" class="page transformAdispari sfondo-pagina" n="25" style=""> <article id="25" class="articolo"> <div class="row paginaTesto"> <p class="paragrafoTesto"> <img src="http://veneziavi.altervista.org/ebook/pagine/nsssm-pag-oldlace.png" alt="" title="" style="width:100%;"> </p> </div> </article> </div> <!-- #pagineedit fin --> </div> <!-- QUI IL BOOK FIN --> <div id="arrow_left" style="opacity:1;"> <i class="fa fa-angle-left" style="position:fixed;left:0%;top:30%;color:#a00;font-size:4em;"> </i> </div> <div id="arrow_right" style="opacity:1;"> <i class="fa fa-angle-right" style="position:fixed;right:0%;top:30%;color:#a00;font-size:4em;"> </i> </div> </body> </html>

Implementazione

Questo codice risolve il problema del mancato sincronismo che invalida il loading avvertenza.
Quando un codice javascript è incluso in un document inner si ha un ritardo nell'avviso loading percentuale tale che l'user non viene aiutato.
L'unico modo per ovviare all'inconveniente è inserire il loading avviso nel codice stesso extrapolandolo dal document.inner

<div id="Loaded" style=" position:fixed; top:4em; left:1.5em; "> <div class="ui secondary loading small button "> Loading </div> <div id="percento" style="" class="ui secondary small button" > Loading... </div> </div> <script> function AttendereLoading() { if (document.all) {document.all['AttendereLoading'].style.visibility='hidden'; } else if (document.getElementById) {node=document.getElementById('Loaded').style.visibility='hidden'; } } var percento=document.getElementById('percento'); var contatore=1; var intervallo=setInterval( function(){ percento.innerHTML=contatore+'%'; contatore++; if (contatore===101) {clearInterval(intervallo);} }, 30000 ) </script>


Un altro esempio si può trovare in spinner classico che però non usa il semantic user interface

Altre implementazioni sono deprecate.

Repository elenco file css e js

http://edoraandiamo.altervista.org/usdebook/seb/usdceb01.css

http://edoraandiamo.altervista.org/usdebook/seb/usdjeb01.js

http://edoraandiamo.altervista.org/usdebook/seb/usdjeb02.js

http://edoraandiamo.altervista.org/usdebook/seb/usdCEB01_1.css

http://edoraandiamo.altervista.org/usdebook/seb/usdjeb03.js

http://edoraandiamo.altervista.org/usdebook/seb/usdceb02.css

Siti mirror /usdbook/seb/ su domini Altervista:

http://venexiatre.altervista.org/

http://veneziavi.altervista.org/

Siti mirror /usdbook/seb/ su altri domini:

https://ed-ora-andiamo.com/

http://beatsupernovarasa.com/

usdceb01.css usdjeb01.js usdjeb02.js vanno posizionati immediatamente dopo i files Semantic UI CND (in head)

usdCEB01_1.css va posizionato alla fine dello script dei settaggi num_pages num_loaded_pages

usdjeb03.js usdceb02.css vanno posizionati immediatamente prima di </head>

Il corretto posizionamento dei file css e javascript sono molto importanti per il funzionamento del programma.

Naturalmente non possono essere in alcun modo editati senza sapere esattamente che cosa si sta facendo. Una qualsiasi modificazione dei loro codici puo' portare al malfunzionamento dell'intero programma introducendo cosi' bug insidiosi da cui e' poi difficile uscire. Percio' molta cautela!

Tavolozza : composizione colori rgba base 1 1+1 1+1+1 fattore x min 0 max 255
combinazioni 123 132 213 231 312 321
copiare manualmente

<article style=""> <div class="avviso" id="girandolalivello1" style="margin:0 auto; text-align:center; padding:0px; background-color:rgba(0,0,0, 1); color:oldlace;"> <span style="padding-left:0.4em;padding-right:0.4em; "> Loading... Il sistema sta trattando la richiesta, ti preghiamo di attendere. </span> <div id="" style=""> <div class="ui secondary mini loading button"style="background-color:black !important;"> Loading </div> </div> <div id="mostra-percentuale" style="position:fixed; top:0; left:0px; padding-left:0.4em;padding-right:0.4em; background-color:black; color:white;"></div> </div> <script> var i = 0; if (i == 0) { i = 1; var elem = document.getElementById("mostra-percentuale"); // var width = 10; var width = 0; // var id = setInterval(frame, 10); var id = setInterval(frame, 30000); function frame() { if (width >= 100) { clearInterval(id); i = 0; } else { width++; // elem.style.width = width + "%"; // elem.style.width = width + "%"; // elem.innerHTML = width + "%"; // elem.innerHTML = width + "%"; elem.innerHTML = width + "%"; } } } </script> </article> <script> function attesa(){ if (document.all){ document.all["girandolalivello1"].style.visibility="hidden"; document.all["girandolalivello2"].style.visibility="visible"; } else if (document.getElementById){ node = document.getElementById("girandolalivello1").style.visibility='hidden'; node = document.getElementById("girandolalivello2").style.visibility='visible'; } } </script> <!-- spinner testuale con percentuale 50min fin -->

ricordarsi di inserire in body onload="attesa()"
copiare manualmente

<script type="text/javascript"> function showElement() { element = document.querySelector('.versionedelprogramma'); element.style.visibility = 'visible'; } function hideElement() { element = document.querySelector('.versionedelprogramma'); element.style.visibility = 'hidden'; } </script> <span onclick="hideElement()" style="position:fixed;bottom:1em;left:0;cursor:pointer; margin:0;padding:0;overflow:visible !important;"> <i class="eye slash icon"style="margin:0;padding:0;font-size:0.8em; "></i></span> <span onclick="showElement()" style="position:fixed;bottom:0;left:0;cursor:pointer; margin:0;padding:0;overflow:visible !important;"> <i class="eye icon"style="margin:0;padding:0;font-size:0.8em; "></i></span> <span class="versionedelprogramma" style="position:fixed;bottom:0;left:2em; background-color:rgba(25,1,104,1); color:white; padding-top:0.25em;padding-bottom:0.25em; font-size:0.8em;visibility:hidden;"> &nbsp;wysiwyg vers.yyyymmddhhmm </span>

seleziona poi copia&incolla (da effettuarsi manualmente)

<table class="ui table" style=""> <thead> <tr> <th colspan="2"> titolo </th> </tr> </thead> <tbody> <tr> <td data-label=""> <button class="mini ui button" style=";">row </button> </td> </tr> <tr> <td data-label=""> <button class="mini ui button" style=";">row </button> </td> </tr> </tbody> </table>

Uniformare le grid in un main container per evitare disallineamenti e margini fuori linea

<main class="ui grid container centro">

ui grid container uniforma mentre la  class centro   ha la stessa funzione del vecchio comando <center> considerato deprecabile

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

Celled grid

<section class="ui container"> <article class="ui internally celled grid"> <aside class="row"> <div class="three wide column"> </div> <div class="ten wide column"> <p class="testo"> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. </p> </div> <div class="three wide column"> <img src="http://placekitten.com/200/260"> </div> </aside> </article> </section>

ICONE SVG

Visualizzazione delle icone svg sprite

icone svg bootstrap italia link

<?xml version="1.0" encoding="utf-8"?> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs> <svg viewBox="0 0 24 24" id="it-arrow-down" xmlns="http://www.w3.org/2000/svg"><path d="M17.9 13.2l-5.4 5.3V3h-1v15.5l-5.4-5.3-.7.7 6.6 6.5 6.6-6.5zM12 19z"/><path fill="none" d="M0 0h24v24H0z"/></svg> <svg viewBox="0 0 24 24" id="it-arrow-down-circle" xmlns="http://www.w3.org/2000/svg"><path d="M15.6 13.2l.7.7-4.3 4.3-4.3-4.3.7-.7 3.1 3.1V7h1v9.2zM22 12A10 10 0 1112 2a10 10 0 0110 10zm-1 0a9 9 0 10-9 9 9 9 0 009-9z"/><path fill="none" d="M0 0h24v24H0z"/></svg> <svg viewBox="0 0 24 24" id="it-arrow-down-triangle" xmlns="http://www.w3.org/2000/svg"><path d="M9.2 12h5.6a1 1 0 01.7 1.7L12 17.3l-3.5-3.6a1 1 0 01.7-1.7z"/><path fill="none" d="M0 0h24v24H0z"/></svg> <svg viewBox="0 0 24 24" id="it-arrow-left" xmlns="http://www.w3.org/2000/svg"><path d="M21 11.5H5.5l5.3-5.4-.7-.7L3.6 12l6.5 6.6.7-.7-5.3-5.4H21zM5 12z"/><path fill="none" d="M0 0h24v24H0z"/></svg> <svg viewBox="0 0 24 24" id="it-arrow-left-circle" xmlns="http://www.w3.org/2000/svg"><path d="M7.7 11.5H17v1H7.8l3 3.1-.7.7L5.8 12l4.3-4.3.7.7zM22 12A10 10 0 1112 2a10 10 0 0110 10zm-1 0a9 9 0 10-9 9 9 9 0 009-9z"/><path fill="none" d="M0 0h24v24H0z"/></svg> <svg viewBox="0 0 24 24" id="it-arrow-left-triangle" xmlns="http://www.w3.org/2000/svg"><path d="M12 9.2v5.6a1 1 0 01-1.7.7L6.8 12l3.5-3.5a1 1 0 011.7.7z"/><path fill="none" d="M0 0h24v24H0z"/></svg> <svg viewBox="0 0 24 24" id="it-arrow-right" xmlns="http://www.w3.org/2000/svg"><path d="M13.9 5.4l-.7.7 5.3 5.4H3v1h15.5l-5.3 5.4.7.7 6.6-6.6zM19 12z"/><path fill="none" d="M0 0h24v24H0z"/></svg> <svg viewBox="0 0 24 24" id="it-arrow-right-circle" xmlns="http://www.w3.org/2000/svg"><path d="M13.9 7.7l4.3 4.3-4.3 4.3-.7-.7 3.1-3.1H7v-1h9.2l-3-3.1zM22 12A10 10 0 1112 2a10 10 0 0110 10zm-1 0a9 9 0 10-9 9 9 9 0 009-9z"/><path fill="none" d="M0 0h24v24H0z"/></svg> <svg viewBox="0 0 24 24" id="it-arrow-right-triangle" xmlns="http://www.w3.org/2000/svg"><path d="M12 14.8V9.2a1 1 0 011.7-.7l3.5 3.5-3.5 3.5a1 1 0 01-1.7-.7z"/><path fill="none" d="M0 0h24v24H0z"/></svg> <svg viewBox="0 0 24 24" id="it-arrow-up" xmlns="http://www.w3.org/2000/svg"><path d="M18.6 10.1L12 3.5l-6.6 6.6.7.7 5.4-5.3V21h1V5.5l5.4 5.3zM12 5z"/><path fill="none" d="M0 0h24v24H0z"/></svg> <svg viewBox="0 0 24 24" id="it-arrow-up-circle" xmlns="http://www.w3.org/2000/svg"><path d="M12 5.8l4.3 4.3-.7.7-3.1-3.1V17h-1V7.8l-3.1 3-.7-.7zM22 12A10 10 0 1112 2a10 10 0 0110 10zm-1 0a9 9 0 10-9 9 9 9 0 009-9z"/><path fill="none" d="M0 0h24v24H0z"/></svg> <svg viewBox="0 0 24 24" id="it-arrow-up-triangle" xmlns="http://www.w3.org/2000/svg"><path d="M14.8 12H9.2a1 1 0 01-.7-1.7L12 6.8l3.5 3.5a1 1 0 01-.7 1.7z"/><path fill="none" d="M0 0h24v24H0z"/></svg> <svg viewBox="0 0 24 24" id="it-behance" xmlns="http://www.w3.org/2000/svg"><path fill="none" d="M0 0h24v24H0z"/><path d="M7.83 5.75a8 8 0 011.6.15 3.38 3.38 0 011.24.51c.345.233.62.554.8.93.202.456.298.952.28 1.45a2.68 2.68 0 01-.42 1.54 3.05 3.05 0 01-1.25 1 2.92 2.92 0 011.68 1.15c.393.59.59 1.29.56 2a3.39 3.39 0 01-.32 1.59 3.08 3.08 0 01-1 1.11 4.27 4.27 0 01-1.4.64A6 6 0 018 18H2V5.75h5.83zm-.35 5a2 2 0 001.19-.35c.328-.27.5-.687.46-1.11A1.47 1.47 0 009 8.54a1.16 1.16 0 00-.42-.43A1.8 1.8 0 008 7.9a3.26 3.26 0 00-.7-.06H4.74v2.87l2.74.04zm.15 5.22c.252.003.503-.02.75-.07a2 2 0 00.62-.3 1.39 1.39 0 00.44-.49 1.73 1.73 0 00.16-.8A1.64 1.64 0 009.09 13a2.33 2.33 0 00-1.41-.4H4.74v3.38l2.89-.01zm8.54-.08a2.18 2.18 0 001.58.54 2.24 2.24 0 001.25-.37 1.6 1.6 0 00.65-.79h2.15a4.06 4.06 0 01-1.58 2.29 4.64 4.64 0 01-2.58.69 5.23 5.23 0 01-1.9-.33 4 4 0 01-2.33-2.44 5.25 5.25 0 01-.32-1.89 5.12 5.12 0 01.33-1.86 4.14 4.14 0 01.93-1.49 4.48 4.48 0 011.44-1 4.59 4.59 0 011.85-.36 4.31 4.31 0 012 .44A4 4 0 0121 10.5c.37.505.636 1.08.78 1.69a6.18 6.18 0 01.17 2h-6.38a2.5 2.5 0 00.6 1.7zM19 11.22a1.83 1.83 0 00-1.38-.49 2 2 0 00-1 .2 1.8 1.8 0 00-.62.49 1.62 1.62 0 00-.33.62 2.87 2.87 0 00-.11.59h4a2.4 2.4 0 00-.56-1.41zm-3.93-4.65h4.98v1.21h-4.98V6.57z"/></svg> <svg viewBox="0 0 24 24" id="it-burger" xmlns="http://www.w3.org/2000/svg"><path d="M22 5v1H2V5zM2 12.5h20v-1H2zM2 19h20v-1H2z"/><path fill="none" d="M0 0h24v24H0z"/></svg> <svg viewBox="0 0 24 24" id="it-calendar" xmlns="http://www.w3.org/2000/svg"><path d="M20.5 4H17V3h-1v1H8V3H7v1H3.5A1.5 1.5 0 002 5.5v13A1.5 1.5 0 003.5 20h17a1.5 1.5 0 001.5-1.5v-13A1.5 1.5 0 0020.5 4zm.5 14.5a.5.5 0 01-.5.5h-17a.5.5 0 01-.5-.5v-13a.5.5 0 01.5-.5H7v1h1V5h8v1h1V5h3.5a.5.5 0 01.5.5zM4 8h16v1H4z"/><path fill="none" d="M0 0h24v24H0z"/></svg> <svg viewBox="0 0 24 24" id="it-camera" xmlns="http://www.w3.org/2000/svg"><path d="M20.5 20h-17A1.5 1.5 0 012 18.5v-10A1.5 1.5 0 013.5 7h4.3l1.5-2.3a1.5 1.5 0 011.2-.7h3a1.5 1.5 0 011.2.7L16.2 7h4.3A1.5 1.5 0 0122 8.5v10a1.5 1.5 0 01-1.5 1.5zM3.5 8a.5.5 0 00-.5.5v10a.5.5 0 00.5.5h17a.5.5 0 00.5-.5v-10a.5.5 0 00-.5-.5h-4.8l-1.8-2.8-.4-.2h-3l-.4.2L8.3 8zM12 18a5 5 0 115-5 5 5 0 01-5 5zm0-9a4 4 0 104 4 4 4 0 00-4-4zM7 5H4v1h3z"/><path fill="none" d="M0 0h24v24H0z"/></svg> <svg viewBox="0 0 24 24" id="it-card" xmlns="http://www.w3.org/2000/svg"><path d="M20.5 5h-17A1.5 1.5 0 002 6.5v11A1.5 1.5 0 003.5 19h17a1.5 1.5 0 001.5-1.5v-11A1.5 1.5 0 0020.5 5zM3 9h18v3H3zm18 8.5a.5.5 0 01-.5.5h-17a.5.5 0 01-.5-.5V13h18zM3 8V6.5a.5.5 0 01.5-.5h17a.5.5 0 01.5.5V8zm5 7H4v-1h4z"/><path fill="none" d="M0 0h24v24H0z"/></svg> <svg viewBox="0 0 24 24" id="it-check" xmlns="http://www.w3.org/2000/svg"><path d="M9.6 16.9L4 11.4l.8-.7 4.8 4.8 8.5-8.4.7.7z"/><path fill="none" d="M0 0h24v24H0z"/></svg> <svg viewBox="0 0 24 24" id="it-check-circle" xmlns="http://www.w3.org/2000/svg"><path d="M17.1 7.9l.7.7-7.8 7.6-4.7-4.6.7-.7 4 3.9zM22 12A10 10 0 1112 2a10 10 0 0110 10zm-1 0a9 9 0 10-9 9 9 9 0 009-9z"/><path fill="none" d="M0 0h24v24H0z"/></svg> <svg viewBox="0 0 24 24" id="it-chevron-left" xmlns="http://www.w3.org/2000/svg"><path d="M14.6 17.2L9 11.6 14.6 6l.8.7-4.9 4.9 4.9 4.9z"/></svg> <svg viewBox="0 0 24 24" id="it-chevron-right" xmlns="http://www.w3.org/2000/svg"><path d="M9.8 17.2l-.8-.7 4.9-4.9L9 6.7l.8-.7 5.6 5.6z"/></svg> <svg viewBox="0 0 24 24" id="it-clip" xmlns="http://www.w3.org/2000/svg"><path d="M11 22a2.9 2.9 0 01-3-3V6a4 4 0 018 0v10h-1V6a3 3 0 00-6 0v13a2 2 0 004 0V8a1 1 0 00-2 0v8h-1V8a2 2 0 014 0v11a2.9 2.9 0 01-3 3z"/><path fill="none" d="M0 0h24v24H0z"/></svg> <svg viewBox="0 0 24 24" id="it-clock" xmlns="http://www.w3.org/2000/svg"><path d="M11.5 5h1v7.5H7v-1h4.5zM22 12A10 10 0 1112 2a10 10 0 0110 10zm-1 0a9 9 0 10-9 9 9 9 0 009-9z"/><path fill="none" d="M0 0h24v24H0z"/></svg> <svg viewBox="0 0 24 24" id="it-close" xmlns="http://www.w3.org/2000/svg"><path d="M12.7 12l3.7 3.6-.8.8-3.6-3.7-3.6 3.7-.8-.8 3.7-3.6-3.7-3.6.8-.8 3.6 3.7 3.6-3.7.8.8z"/><path fill="none" d="M0 0h24v24H0z"/></svg> <svg viewBox="0 0 24 24" id="it-close-big" xmlns="http://www.w3.org/2000/svg"><path d="M12.7 12l6.7 6.6-.8.8-6.6-6.7-6.6 6.7-.8-.8 6.7-6.6-6.7-6.6.8-.8 6.6 6.7 6.6-6.7.8.8z"/><path fill="none" d="M0 0h24v24H0z"/></svg> <svg viewBox="0 0 24 24" id="it-close-circle" xmlns="http://www.w3.org/2000/svg"><path d="M16.3 8.3L12.6 12l3.7 3.6-.7.7-3.7-3.6-3.6 3.6-.7-.7 3.6-3.6-3.6-3.7.7-.7 3.6 3.7 3.7-3.7zM22 12A10 10 0 1112 2a10 10 0 0110 10zm-1 0a9 9 0 10-9 9 9 9 0 009-9z"/><path fill="none" d="M0 0h24v24H0z"/></svg> <svg viewBox="0 0 24 24" id="it-code-circle" xmlns="http://www.w3.org/2000/svg"><path d="M19 12l-2.9 2.9-.7-.8 2.1-2.1-2.1-2.1.7-.8zM7.9 9.1L5 12l2.9 2.9.7-.8L6.5 12l2.1-2.1zM22 12A10 10 0 1112 2a10 10 0 0110 10zm-1 0a9 9 0 10-9 9 9 9 0 009-9zM9.6 16.5l1 .3 3.7-9.3-.9-.3z"/><path fill="none" d="M0 0h24v24H0z"/></svg> <svg viewBox="0 0 24 24" id="it-collapse" xmlns="http://www.w3.org/2000/svg"><path d="M16.5 15.4l-4.9-4.9-4.9 4.9-.7-.8L11.6 9l5.6 5.6z"/></svg> <svg viewBox="0 0 24 24" id="it-comment" xmlns="http://www.w3.org/2000/svg"><path d="M19 3H5a2 2 0 00-2 2v10a2 2 0 002 2h2v5.4l1.7-1.7 3.7-3.7H19a2 2 0 002-2V5a2 2 0 00-2-2zm1 12a.9.9 0 01-1 1h-7l-4 4v-4H5a.9.9 0 01-1-1V5a.9.9 0 011-1h14a.9.9 0 011 1zM9 10a.9.9 0 01-1 1 .9.9 0 01-1-1 .9.9 0 011-1 .9.9 0 011 1zm4 0a1 1 0 01-2 0 1 1 0 012 0zm4 0a1 1 0 01-2 0 1 1 0 012 0z"/><path fill="none" d="M0 0h24v24H0z"/></svg> <svg viewBox="0 0 24 24" id="it-copy" xmlns="http://www.w3.org/2000/svg"><path d="M19.5 4H18v-.6A1.5 1.5 0 0016.5 2h-11A1.5 1.5 0 004 3.4v15.2A1.5 1.5 0 005.5 20H7v.6A1.5 1.5 0 008.5 22h11a1.5 1.5 0 001.5-1.4V5.4A1.5 1.5 0 0019.5 4zM5 18.6V3.4a.5.5 0 01.5-.4h11a.5.5 0 01.5.4v15.2a.5.5 0 01-.5.4h-11a.5.5 0 01-.5-.4zm15 2a.5.5 0 01-.5.4h-11a.5.5 0 01-.5-.4V20h8.5a1.5 1.5 0 001.5-1.4V5h1.5a.5.5 0 01.5.4z"/><path fill="none" d="M0 0h24v24H0z"/></svg> <svg viewBox="0 0 24 24" id="it-designers-italia" xmlns="http://www.w3.org/2000/svg"><path d="M8.663 20.675V7.641H12.3v13.057H8.663v-.023zM22.952 10.61h-3.325v5.357c0 .534.024.882.048 1.113.024.21.12.395.289.557.169.162.434.232.795.232l2.072-.046.169 2.783c-1.205.255-2.145.394-2.771.394-1.639 0-2.747-.348-3.325-1.067-.603-.696-.892-1.994-.892-3.896V4h3.639v3.618h3.325v2.992h-.024zm-19.76.997c-.626 0-1.156-.209-1.565-.626A2.113 2.113 0 011 9.45c0-.604.217-1.114.602-1.531.41-.418.94-.603 1.567-.603.626 0 1.156.208 1.566.626.41.417.602.927.602 1.554 0 .626-.192 1.113-.602 1.53-.386.371-.892.58-1.542.58z"/></svg> <svg viewBox="0 0 24 24" id="it-download" xmlns="http://www.w3.org/2000/svg"><path d="M12 14.2L7.7 9.9l.7-.7 3.1 3.1V3h1v9.2l3.1-3 .7.7zm7-2.2v7.5a.5.5 0 01-.5.5h-13a.5.5 0 01-.5-.5V12H4v7.5A1.5 1.5 0 005.5 21h13a1.5 1.5 0 001.5-1.5V12z"/><path fill="none" d="M0 0h24v24H0z"/></svg> <svg viewBox="0 0 24 24" id="it-error" xmlns="http://www.w3.org/2000/svg"><path d="M11.5 14.2V5.7h1.2v8.5zm-.1 4.1h1.2v-1.8h-1.2zM22 7.9v8.3L16.1 22H7.9L2 16.2V7.9L7.9 2h8.2zm-1 .4L15.7 3H8.3L3 8.3v7.5L8.3 21h7.4l5.3-5.2z"/><path fill="none" d="M0 0h24v24H0z"/></svg> <svg viewBox="0 0 24 24" id="it-exchange-circle" xmlns="http://www.w3.org/2000/svg"><path d="M12 2a10 10 0 1010 10A10 10 0 0012 2zm0 19a9 9 0 119-9 9 9 0 01-9 9zm5.1-8.9l.8.8-4.3 4.3a1.5 1.5 0 01-1.1.4 1.5 1.5 0 01-1.1-.4L9 14.7V17H8v-4h4v1H9.7l2.4 2.5h.8zm-6-4.6l-4.2 4.4-.8-.8 4.3-4.3a1.5 1.5 0 011.1-.4 1.5 1.5 0 011.1.4L15 9.3V7h1v4h-4v-1h2.3l-2.4-2.5h-.8z"/><path fill="none" d="M0 0h24v24H0z"/></svg> <svg viewBox="0 0 24 24" id="it-expand" xmlns="http://www.w3.org/2000/svg"><path d="M11.6 15.4L6 9.8l.7-.8 4.9 4.9L16.5 9l.7.8z"/></svg> <svg viewBox="0 0 24 24" id="it-external-link" xmlns="http://www.w3.org/2000/svg"><path d="M21 3v6h-1V4.7l-7.6 7.7-.8-.8L19.3 4H15V3zm-4 16.5a.5.5 0 01-.5.5h-12a.5.5 0 01-.5-.5v-12a.5.5 0 01.5-.5H12V6H4.5A1.5 1.5 0 003 7.5v12A1.5 1.5 0 004.5 21h12a1.5 1.5 0 001.5-1.5V12h-1z"/><path fill="none" d="M0 0h24v24H0z"/></svg> <svg viewBox="0 0 24 24" id="it-facebook" xmlns="http://www.w3.org/2000/svg"><path fill="none" d="M0 0h24v24H0z"/><path d="M13.55 22v-9.11h3.07l.46-3.56h-3.53V7.05c0-1 .29-1.73 1.77-1.73h1.87V2.14A25.14 25.14 0 0014.45 2c-2.72 0-4.58 1.66-4.58 4.7v2.62H6.81v3.57h3.06V22h3.68z"/></svg> <svg viewBox="0 0 24 24" id="it-facebook-square" xmlns="http://www.w3.org/2000/svg"><path fill="none" d="M0 0h24v24H0z"/><path d="M20 3H4a1 1 0 00-1 1v16a1 1 0 001 1h8.63v-6.95h-2.37v-2.74h2.34v-2a3.28 3.28 0 013.5-3.6c.705 0 1.41.04 2.11.12v2.44h-1.44c-1.13 0-1.34.53-1.34 1.32v1.74h2.7l-.35 2.72h-2.35v7H20a1 1 0 001-1V4a1 1 0 00-1-1z"/></svg> <svg viewBox="0 0 24 24" id="it-file" xmlns="http://www.w3.org/2000/svg"><path d="M14.7 2H6.5A1.5 1.5 0 005 3.5v17A1.5 1.5 0 006.5 22h11a1.5 1.5 0 001.5-1.5V6.3zm.3 1.7L17.3 6h-1.8a.5.5 0 01-.5-.5zM17.5 21h-11a.5.5 0 01-.5-.5v-17a.5.5 0 01.5-.5H14v2.5A1.5 1.5 0 0015.5 7H18v13.5a.5.5 0 01-.5.5zM8 9h8v1H8zm0 2h8v1H8zm0 2h4v1H8z"/><path fill="none" d="M0 0h24v24H0z"/></svg> <svg viewBox="0 0 24 24" id="it-files" xmlns="http://www.w3.org/2000/svg"><path d="M15.7 2H7.5A1.5 1.5 0 006 3.5V4h-.5A1.5 1.5 0 004 5.5v15A1.5 1.5 0 005.5 22h11a1.5 1.5 0 001.5-1.5V20h.5a1.5 1.5 0 001.5-1.5V6.3zm.3 1.7L18.3 6h-1.8a.5.5 0 01-.5-.5zm1 16.8a.5.5 0 01-.5.5h-11a.5.5 0 01-.5-.5v-15a.5.5 0 01.5-.5H6v13.5A1.5 1.5 0 007.5 20H17zm1.5-1.5h-11a.5.5 0 01-.5-.5v-15a.5.5 0 01.5-.5H15v2.5A1.5 1.5 0 0016.5 7H19v11.5a.5.5 0 01-.5.5zM9 9h8v1H9zm0 2h8v1H9zm0 2h4v1H9z"/><path fill="none" d="M0 0h24v24H0z"/></svg> <svg viewBox="0 0 24 24" id="it-flickr" xmlns="http://www.w3.org/2000/svg"><path fill="none" d="M0 0h24v24H0z"/><circle cx="6.73" cy="12" r="4.73"/><circle cx="17.27" cy="12" r="4.73"/></svg> <svg viewBox="0 0 24 24" id="it-flickr-square" xmlns="http://www.w3.org/2000/svg"><path fill="none" d="M0 0h24v24H0z"/><path d="M20 4a3.26 3.26 0 00-2.38-1H6.38A3.26 3.26 0 004 4a3.26 3.26 0 00-1 2.37v11.25A3.26 3.26 0 004 20a3.26 3.26 0 002.39 1h11.24A3.38 3.38 0 0021 17.62V6.37A3.26 3.26 0 0020 4zm-9.56 9.77a2.5 2.5 0 01-3.51 0 2.49 2.49 0 010-3.52 2.5 2.5 0 013.51 0 2.49 2.49 0 010 3.52zm6.61 0A2.49 2.49 0 0112.82 12a2.49 2.49 0 014.24-1.76 2.49 2.49 0 010 3.52l-.01.01z"/></svg> <svg viewBox="0 0 24 24" id="it-folder" xmlns="http://www.w3.org/2000/svg"><path d="M20 6h-8l-2-2H4a2 2 0 00-2 2v12a2 2 0 002 2h16a2 2 0 002-2V8a2 2 0 00-2-2zm1 12a.9.9 0 01-1 1H4a.9.9 0 01-1-1V6a.9.9 0 011-1h5.6l1.7 1.7.3.3H20a.9.9 0 011 1zM4 8h16v1H4z"/><path fill="none" d="M0 0h24v24H0z"/></svg> <svg viewBox="0 0 24 24" id="it-github" xmlns="http://www.w3.org/2000/svg"><path fill="none" d="M0 0h24v24H0z"/><path d="M12 2a10 10 0 00-3.16 19.49c.5.09.68-.22.68-.48v-1.7C6.73 19.91 6.14 18 6.14 18A2.69 2.69 0 005 16.5c-.91-.62.07-.61.07-.61a2.13 2.13 0 011.53 1 2.14 2.14 0 002.91.83 2.16 2.16 0 01.63-1.34c-2.14-.21-4.52-1.07-4.52-4.9a3.89 3.89 0 011-2.69 3.57 3.57 0 01.1-2.64s.84-.27 2.75 1a9.63 9.63 0 015 0c1.91-1.29 2.75-1 2.75-1 .37.835.405 1.78.1 2.64a3.89 3.89 0 011 2.69c0 3.84-2.34 4.68-4.57 4.93.482.49.73 1.164.68 1.85v2.75c0 .33.18.58.69.48A10 10 0 0012 2z"/></svg> <svg viewBox="0 0 24 24" id="it-hearing" xmlns="http://www.w3.org/2000/svg"><path d="M20 9a6.8 6.8 0 01-3.5 6l-2 1.1a3.3 3.3 0 00-1.5 2.7A3.2 3.2 0 019.8 22h-.6a3.4 3.4 0 01-3-2.1l.9-.5A2.3 2.3 0 009.2 21h.6a2.1 2.1 0 001.6-.7 2 2 0 00.6-1.5 4 4 0 012-3.5l2-1.2A5.9 5.9 0 0019 9a6 6 0 00-6-6 6 6 0 00-4.8 2.4l-.8-.6A7 7 0 0113 2a7 7 0 017 7zM7.5 12A5.5 5.5 0 002 6.5v1a4.5 4.5 0 010 9v1A5.5 5.5 0 007.5 12zM5 12a2.9 2.9 0 00-3-3v1a2 2 0 010 4v1a2.9 2.9 0 003-3zm5 0a8 8 0 00-8-8v1a7 7 0 010 14v1a8 8 0 008-8zm5.9.3a4.5 4.5 0 001.2-3.2 4.5 4.5 0 00-1.2-3.2 4.5 4.5 0 00-3.2-1.4A4.8 4.8 0 009.5 6l-.3.3.2.3a8.8 8.8 0 011.3 3v.4h.4a1.5 1.5 0 010 3v1a2.5 2.5 0 002.5-2.5 2.6 2.6 0 00-2-2.5 8.5 8.5 0 00-1.1-2.6 3.9 3.9 0 012.2-.9 3.5 3.5 0 012.4 1 3.5 3.5 0 011 2.6 3.5 3.5 0 01-1 2.6z"/><path fill="none" d="M0 0h24v24H0z"/></svg> <svg viewBox="0 0 24 24" id="it-help" xmlns="http://www.w3.org/2000/svg"><path d="M12.8 22h-1.4v-2.1h1.4zm-.1-4.9h-1.2a9.7 9.7 0 01-.1-1.7 2.7 2.7 0 01.3-1.2 5.6 5.6 0 01.7-1.3l2.3-2.1a9.6 9.6 0 001.8-2.1 4.5 4.5 0 00.5-2.3 3 3 0 00-1.1-2.6 6.2 6.2 0 00-3.4-.7 22.9 22.9 0 00-3.6.5l-1 .3-.2-1.2h.1a18.1 18.1 0 014.7-.8 7.4 7.4 0 014.3 1 4.2 4.2 0 011.4 3.5 5 5 0 01-.5 2.7 8.6 8.6 0 01-1.9 2.2 19.7 19.7 0 00-1.8 1.6 6.2 6.2 0 00-.9 1.2 2.3 2.3 0 00-.4 1.4z"/><path fill="none" d="M0 0h24v24H0z"/></svg> <svg viewBox="0 0 24 24" id="it-help-circle" xmlns="http://www.w3.org/2000/svg"><path d="M12 2a10 10 0 1010 10A10 10 0 0012 2zm0 19a9 9 0 119-9 9 9 0 01-9 9zm-1.2-4.5H12v1.8h-1.2zm4.5-8a4.2 4.2 0 01-.3 1.8 5.4 5.4 0 01-1.3 1.4L12.3 13a2.8 2.8 0 00-.4 1.2v.6H11a3 3 0 01-.2-1 2.1 2.1 0 01.5-1.2 9 9 0 011.4-1.4 6.4 6.4 0 001.2-1.3 2.6 2.6 0 00.3-1.4 1.7 1.7 0 00-.6-1.4 3.5 3.5 0 00-2-.4L9.3 7h-.5v-.8a10.2 10.2 0 013-.5 4.9 4.9 0 012.7.6 2.7 2.7 0 01.8 2.2z"/><path fill="none" d="M0 0h24v24H0z"/></svg> <svg viewBox="0 0 24 24" id="it-horn" xmlns="http://www.w3.org/2000/svg"><path d="M5 9a3 3 0 000 6h.5L7 19.3A2.5 2.5 0 009.3 21h.2a1.4 1.4 0 001.2-.6 1.4 1.4 0 00.2-1.4l-1.3-4h1.8l8.6 3.8V4.7L11.4 9zm5 10.3a.7.7 0 01-.1.5l-.4.2h-.2a1.5 1.5 0 01-1.4-1l-1.3-4h1.9zM5 14a2 2 0 010-4h6v4zm14 3.2l-7-3V9.8l7-3.5zM22 9v6h-1V9z"/><path fill="none" d="M0 0h24v24H0z"/></svg> <svg viewBox="0 0 24 24" id="it-info-circle" xmlns="http://www.w3.org/2000/svg"><path d="M12 2a10 10 0 1010 10A10 10 0 0012 2zm0 19a9 9 0 119-9 9 9 0 01-9 9zm-.7-15h1.5v2h-1.5zm0 3h1.5v9h-1.5z"/><path fill="none" d="M0 0h24v24H0z"/></svg> <svg viewBox="0 0 24 24" id="it-instagram" xmlns="http://www.w3.org/2000/svg"><path fill="none" d="M0 0h24v24H0z"/><path d="M12 4.62l-.01.08H8.35a5.12 5.12 0 00-1.67.31c-.38.15-.72.382-1 .68-.298.28-.53.62-.68 1a5.12 5.12 0 00-.3 1.68v7.28c.01.57.114 1.134.31 1.67.15.38.382.72.68 1 .28.298.62.53 1 .68.536.196 1.1.3 1.67.31.95.05 1.24.05 3.64.05 2.4 0 2.64-.05 3.64-.05a5.12 5.12 0 001.67-.31A3.08 3.08 0 0019 17.31a5.12 5.12 0 00.3-1.68c.05-.95.05-1.24.05-3.64 0-2.4-.05-2.64-.05-3.64a5.12 5.12 0 00-.31-1.67 2.77 2.77 0 00-.68-1 2.77 2.77 0 00-1-.68 5.12 5.12 0 00-1.67-.38H12zM12 3v.05h3.71a6.9 6.9 0 012.19.42 4.64 4.64 0 012.68 2.63A6.9 6.9 0 0121 8.29c0 .96.05 1.27.05 3.71S21 14.71 21 15.71a6.9 6.9 0 01-.47 2.24 4.64 4.64 0 01-2.63 2.63 6.9 6.9 0 01-2.19.42c-.96.05-1.27.05-3.71.05S9.29 21 8.29 21a6.9 6.9 0 01-2.19-.47 4.64 4.64 0 01-2.63-2.63 6.9 6.9 0 01-.42-2.19V12 8.29a6.9 6.9 0 01.42-2.19A4.64 4.64 0 016.1 3.42 6.9 6.9 0 018.29 3H12zm0 4.38a4.62 4.62 0 110 9.24 4.62 4.62 0 010-9.24zM12 15a3 3 0 100-6 3 3 0 000 6zm4.8-6.72a1.08 1.08 0 110-2.16 1.08 1.08 0 010 2.16z"/></svg> <svg viewBox="0 0 24 24" id="it-key" xmlns="http://www.w3.org/2000/svg"><path d="M18 10a2 2 0 102 2 2 2 0 00-2-2zm0 3a1 1 0 111-1 .9.9 0 01-1 1zm-1-6a5.1 5.1 0 00-4.6 3H3.3l-2 2 3 3H7v-1h.3l1 1H11v-1h1.4a5.1 5.1 0 004.6 3 5 5 0 000-10zm0 9a4.1 4.1 0 01-3.8-2.7V13H10v1H8.7l-1-1H6v1H4.7l-2-2 1-1h9.4v-.3A4.1 4.1 0 0117 8a4 4 0 010 8z"/><path fill="none" d="M0 0h24v24H0z"/></svg> <svg viewBox="0 0 24 24" id="it-less-circle" xmlns="http://www.w3.org/2000/svg"><path d="M12 3a9 9 0 016.36 15.36A9 9 0 015.64 5.62 8.93 8.93 0 0112 3m0-1a10 10 0 107.07 2.93A9.93 9.93 0 0012 2z"/><rect x="7" y="11.25" width="10" height="1.5" rx=".75"/></svg> <svg viewBox="0 0 24 24" id="it-link" xmlns="http://www.w3.org/2000/svg"><path d="M13.4 13.4l-.7-.7a2.9 2.9 0 00.9-2.1 2.7 2.7 0 00-.9-2.1L9.2 4.9a3.2 3.2 0 00-4.3 0 3.2 3.2 0 000 4.3L7.8 12l-.7.7-2.9-2.8a4.2 4.2 0 010-5.7 4.2 4.2 0 015.7 0l3.5 3.6a3.6 3.6 0 011.2 2.8 3.6 3.6 0 01-1.2 2.8zm6.4 6.4a4.2 4.2 0 000-5.7l-2.9-2.8-.7.7 2.9 2.8a3.2 3.2 0 010 4.3 3.2 3.2 0 01-4.3 0l-3.5-3.6a2.7 2.7 0 01-.9-2.1 2.9 2.9 0 01.9-2.1l-.7-.7a3.6 3.6 0 00-1.2 2.8 3.6 3.6 0 001.2 2.8l3.5 3.6a3.8 3.8 0 002.8 1.1 3.9 3.9 0 002.9-1.1zm-6.7-6.7"/><path fill="none" d="M0 0h24v24H0z"/></svg> <svg viewBox="0 0 24 24" id="it-linkedin" xmlns="http://www.w3.org/2000/svg"><path fill="none" d="M0 0h24v24H0z"/><path d="M16.53 8.68A3.94 3.94 0 0013 10.62V9H9.37v12h3.73v-5.95c0-1.57.29-3.09 2.24-3.09 1.95 0 1.93 1.8 1.93 3.19V21H21v-6.6c0-3.23-.69-5.72-4.47-5.72zM5.16 3a2.17 2.17 0 102.16 2.18A2.16 2.16 0 005.16 3zM3.29 9v12H7V9H3.29zm13.24-.3A3.94 3.94 0 0013 10.62V9H9.37v12h3.73v-5.95c0-1.57.29-3.09 2.24-3.09 1.95 0 1.93 1.8 1.93 3.19V21H21v-6.6c0-3.23-.69-5.72-4.47-5.72v.02zM3.29 21H7V9H3.29v12zM5.16 3a2.17 2.17 0 102.16 2.18A2.16 2.16 0 005.16 3z"/></svg> <svg viewBox="0 0 24 24" id="it-linkedin-square" xmlns="http://www.w3.org/2000/svg"><path fill="none" d="M0 0h24v24H0z"/><path d="M19.67 3H4.33A1.32 1.32 0 003 4.3v15.4A1.32 1.32 0 004.33 21h15.34A1.32 1.32 0 0021 19.7V4.3A1.32 1.32 0 0019.67 3zM8.34 18.34H5.67V9.75h2.67v8.59zM7 8.57A1.55 1.55 0 118.55 7 1.54 1.54 0 017 8.57zm11.34 9.77h-2.67v-4.18c0-1 0-2.28-1.39-2.28s-1.6 1.09-1.6 2.21v4.25H10V9.75h2.56v1.17a2.83 2.83 0 012.53-1.39c2.7 0 3.2 1.78 3.2 4.1l.05 4.71z"/></svg> <svg viewBox="0 0 24 24" id="it-list" xmlns="http://www.w3.org/2000/svg"><path d="M4 12a.9.9 0 01-1 1 1 1 0 010-2 .9.9 0 011 1zM3 4.5a.9.9 0 00-1 1 .9.9 0 001 1 .9.9 0 001-1 .9.9 0 00-1-1zm0 13a1 1 0 000 2 1 1 0 000-2zM6 5v1h16V5zm0 7.5h16v-1H6zM6 19h16v-1H6z"/><path fill="none" d="M0 0h24v24H0z"/></svg> <svg viewBox="0 0 24 24" id="it-lock" xmlns="http://www.w3.org/2000/svg"><path d="M18.5 8.5H17V8A5 5 0 007 8v.5H5.5A1.5 1.5 0 004 10v8.5A1.5 1.5 0 005.5 20h13a1.5 1.5 0 001.5-1.5V10a1.5 1.5 0 00-1.5-1.5zM8 8a4 4 0 018 0v.5H8zm11 10.5a.5.5 0 01-.5.5h-13a.5.5 0 01-.5-.5V10a.5.5 0 01.5-.5h13a.5.5 0 01.5.5z"/><path d="M12 13.25a1 1 0 11-1 1 1 1 0 011-1m0-1a2 2 0 102 2 2 2 0 00-2-2z"/></svg> <svg viewBox="0 0 24 24" id="it-locked" xmlns="http://www.w3.org/2000/svg"><path d="M16.5 12H16V7a4 4 0 00-8 0v5h-.5a1.1 1.1 0 00-1.1 1.1v6.8A1.1 1.1 0 007.5 21h9a1.1 1.1 0 001.1-1.1v-6.8a1.1 1.1 0 00-1.1-1.1zM9 7a3 3 0 016 0v5H9zm7.6 12.9a.1.1 0 01-.1.1h-9a.1.1 0 01-.1-.1v-6.8h9.2zM13 15.5a.8.8 0 01-.5.8v1.5h-1v-1.5a.8.8 0 01-.5-.8 1 1 0 012 0z"/><path fill="none" d="M0 0h24v24H0z"/></svg> <svg viewBox="0 0 24 24" id="it-mail" xmlns="http://www.w3.org/2000/svg"><path d="M20.5 5h-17A1.5 1.5 0 002 6.5v11A1.5 1.5 0 003.5 19h17a1.5 1.5 0 001.5-1.5v-11A1.5 1.5 0 0020.5 5zm-.3 1l-7.1 7.2a1.6 1.6 0 01-2.2 0L3.8 6zM3 17.3V6.6L8.3 12zm.7.7L9 12.7l1.2 1.2a2.7 2.7 0 003.6 0l1.2-1.2 5.3 5.3zm12-6L21 6.6v10.7z"/><path fill="none" d="M0 0h24v24H0z"/></svg> <svg viewBox="0 0 24 24" id="it-medium" xmlns="http://www.w3.org/2000/svg"><path fill="none" d="M0 0h24v24H0z"/><path d="M5 7.63A.72.72 0 004.82 7L3.13 5v-.3h5.22l4 8.84 3.54-8.84h5V5l-1.42 1.4a.43.43 0 00-.16.4v10.12a.45.45 0 00.16.41l1.4 1.37v.3h-7v-.3l1.45-1.41c.14-.14.14-.18.14-.4V8.71L11.37 19h-.55L6.12 8.71v6.88a.93.93 0 00.26.79l1.89 2.29V19H2.91v-.3l1.89-2.32a.92.92 0 00.2-.79V7.63z"/></svg> <svg viewBox="0 0 24 24" id="it-medium-square" xmlns="http://www.w3.org/2000/svg"><path fill="none" d="M0 0h24v24H0z"/><path d="M3 3h18v18H3V3zm4.3 11.36a.64.64 0 01-.17.54l-1.27 1.54v.2h3.6v-.2L8.19 14.9a.67.67 0 01-.19-.54V9.74l3.16 6.9h.37l2.71-6.9v5.5c0 .15 0 .17-.09.27l-1 1v.2h4.74v-.2l-.89-.98a.27.27 0 01-.11-.27v-6.8a.28.28 0 01.11-.27l1-.93v-.2h-3.39L12.23 13 9.52 7.06H6v.2l1.14 1.36A.5.5 0 017.3 9v5.36z"/></svg> <svg viewBox="0 0 24 24" id="it-minus" xmlns="http://www.w3.org/2000/svg"><path d="M20 12.5H4v-1h16z"/><path fill="none" d="M0 0h24v24H0z"/></svg> <svg viewBox="0 0 24 24" id="it-minus-circle" xmlns="http://www.w3.org/2000/svg"><path d="M6.9 11.5h10v1h-10zM22 12A10 10 0 1112 2a10 10 0 0110 10zm-1 0a9 9 0 10-9 9 9 9 0 009-9z"/><path fill="none" d="M0 0h24v24H0z"/></svg> <svg viewBox="0 0 24 24" id="it-more-actions" xmlns="http://www.w3.org/2000/svg"><path d="M6 10a2 2 0 102 2 2 2 0 00-2-2zm0 3a1 1 0 010-2 1 1 0 010 2zm6-3a2 2 0 102 2 2 2 0 00-2-2zm0 3a1 1 0 111-1 .9.9 0 01-1 1zm6-3a2 2 0 102 2 2 2 0 00-2-2zm0 3a1 1 0 111-1 .9.9 0 01-1 1z"/><path fill="none" d="M0 0h24v24H0z"/></svg> <svg viewBox="0 0 24 24" id="it-more-items" xmlns="http://www.w3.org/2000/svg"><path d="M12 18a1 1 0 11-1 1 .9.9 0 011-1m0-1a2 2 0 102 2 2 2 0 00-2-2zm0-6a1 1 0 11-1 1 .9.9 0 011-1m0-1a2 2 0 102 2 2 2 0 00-2-2zm0-6a.9.9 0 011 1 1 1 0 01-2 0 .9.9 0 011-1m0-1a2 2 0 102 2 2 2 0 00-2-2z"/><path fill="none" d="M0 0h24v24H0z"/></svg> <svg viewBox="0 0 24 24" id="it-note" xmlns="http://www.w3.org/2000/svg"><path d="M18.5 4h-13A1.5 1.5 0 004 5.5v13A1.5 1.5 0 005.5 20h10.2l4.3-4.3V5.5A1.5 1.5 0 0018.5 4zM5 18.5v-13a.5.5 0 01.5-.5h13a.5.5 0 01.5.5V15h-2.5a1.5 1.5 0 00-1.5 1.5V19H5.5a.5.5 0 01-.5-.5zM18.3 16L16 18.3v-1.8a.5.5 0 01.5-.5zM16 9H8V8h8zm0 2H8v-1h8zm-2 1v1H8v-1z"/><path fill="none" d="M0 0h24v24H0z"/></svg> <svg viewBox="0 0 24 24" id="it-pa" xmlns="http://www.w3.org/2000/svg"><path d="M3 21h18v1H3zm0-1h18v-1H3zM22 9H2l10-7zM5.2 8h13.6L12 3.2zM6 18v-8H5v8zm4 0v-8H9v8zm5 0v-8h-1v8zm4 0v-8h-1v8z"/><path fill="none" d="M0 0h24v24H0z"/></svg> <svg viewBox="0 0 24 24" id="it-password-invisible" xmlns="http://www.w3.org/2000/svg"><path d="M15 12a3.2 3.2 0 00-.7-1.9l.4-1.1a4.2 4.2 0 011.3 3 4 4 0 01-3.9 4l.4-1.1A2.9 2.9 0 0015 12zM3.1 12A9.8 9.8 0 0112 6.5h.4l.4-.9H12a10.9 10.9 0 00-9.8 6L2 12l.2.5a11 11 0 006.1 5.3l.3-.9A9.8 9.8 0 013.1 12zm18.7-.5a11 11 0 00-6.1-5.3l-.3.9a9.8 9.8 0 015.5 4.9 9.8 9.8 0 01-8.9 5.5h-.4l-.4.9h.8a10.9 10.9 0 009.8-6l.2-.4zM11.5 9.1l.4-1.1A4 4 0 008 12a4.2 4.2 0 001.3 3l.4-1.1A3.2 3.2 0 019 12a2.9 2.9 0 012.5-2.9zm3.1-5.7L8.5 20.3l.9.3 6.1-16.9z"/><path fill="none" d="M0 0h24v24H0z"/></svg> <svg viewBox="0 0 24 24" id="it-password-visible" xmlns="http://www.w3.org/2000/svg"><path d="M21.8 11.5a11 11 0 00-19.6 0L2 12l.2.5a11 11 0 0019.6 0l.2-.5zm-9.8 6A9.8 9.8 0 013.1 12 9.8 9.8 0 0112 6.5a9.8 9.8 0 018.9 5.5 9.8 9.8 0 01-8.9 5.5zM12 8a4 4 0 104 4 4 4 0 00-4-4zm0 7a3 3 0 113-3 2.9 2.9 0 01-3 3z"/><path fill="none" d="M0 0h24v24H0z"/></svg> <svg viewBox="0 0 24 24" id="it-pencil" xmlns="http://www.w3.org/2000/svg"><path d="M20.5 3.5a2.9 2.9 0 00-2.1-.9 3.1 3.1 0 00-2.2.9L4.6 15.2l-1 5.2 5.2-1L20.5 7.8a3 3 0 000-4.3zm-5.7 2.8l.7-.7 2.9 2.9-.7.7zm-.7.8l1.1 1-8.4 8.4-1.1-1.1zM5.7 18.3a.7.7 0 00-.6-.3l.3-1.5 2.1 2.1-1.5.3a.7.7 0 00-.3-.6zm2.9 0l-1.1-1.1 8.4-8.4 1 1.1zM19.8 7.1l-.7.7-2.9-2.9.7-.7a2.2 2.2 0 011.5-.6 2 2 0 011.4.6 2.1 2.1 0 010 2.9z"/><path fill="none" d="M0 0h24v24H0z"/></svg> <svg viewBox="0 0 24 24" id="it-pin" xmlns="http://www.w3.org/2000/svg"><path d="M18.1 14L15 10.3V4.6L16.3 2H7.7L9 4.6v5.7L5.9 14h5.6v8h1v-8zM10 5h4v5h-4zm4.7-2l-.5 1H9.8l-.5-1zm-5 8h4.6l1.6 2H8.1z"/><path fill="none" d="M0 0h24v24H0z"/></svg> <svg viewBox="0 0 24 24" id="it-plus" xmlns="http://www.w3.org/2000/svg"><path d="M20 12.5h-7.5V20h-1v-7.5H4v-1h7.5V4h1v7.5H20z"/><path fill="none" d="M0 0h24v24H0z"/></svg> <svg viewBox="0 0 24 24" id="it-plus-circle" xmlns="http://www.w3.org/2000/svg"><path d="M12.4 11.5h4.5v1h-4.5V17h-1v-4.5H6.9v-1h4.5V7h1zm9.6.5A10 10 0 1112 2a10 10 0 0110 10zm-1 0a9 9 0 10-9 9 9 9 0 009-9z"/><path fill="none" d="M0 0h24v24H0z"/></svg> <svg viewBox="0 0 24 24" id="it-presentation" xmlns="http://www.w3.org/2000/svg"><path d="M4 5v10.6A2.4 2.4 0 006.4 18h3.1l-1.1 4h1l1.1-4h2.7l1.2 4h1l-1.2-4h3.5a2.3 2.3 0 002.3-2.3V5zm15 10.7a1.3 1.3 0 01-1.3 1.3H6.4A1.4 1.4 0 015 15.6V6h14zM21 3v1H3V3zm-9 13a4.5 4.5 0 10-4.5-4.5A4.5 4.5 0 0012 16zm-.5-7.9V11H8.6a3.4 3.4 0 012.9-2.9zm1 3.9V8a3.5 3.5 0 01-.5 7 3.4 3.4 0 01-3.4-3z"/><path fill="none" d="M0 0h24v24H0z"/></svg> <svg viewBox="0 0 24 24" id="it-print" xmlns="http://www.w3.org/2000/svg"><path d="M21 9.5A1.5 1.5 0 0019.5 8H17V3H7v5H4.5A1.5 1.5 0 003 9.5V16h2v3h2v2h10v-2h2v-3h2zM8 4h8v4H8zM6 18v-4h1v4zm10 2H8v-6h8v6zm2-2h-1v-4h1v4zm2-3h-1v-2H5v2H4V9.5a.5.5 0 01.5-.5h15a.5.5 0 01.5.5zM6 11h4v1H6z"/><path fill="none" d="M0 0h24v24H0z"/></svg> <svg viewBox="0 0 24 24" id="it-search" xmlns="http://www.w3.org/2000/svg"><path d="M21.9 21.1L16 15.3a8.3 8.3 0 002-5.3 8 8 0 10-8 8 8.3 8.3 0 005.3-2l5.8 5.9zM10 17a7 7 0 117-7 7 7 0 01-7 7z"/><path fill="none" d="M0 0h24v24H0z"/></svg> <svg viewBox="0 0 24 24" id="it-settings" xmlns="http://www.w3.org/2000/svg"><path d="M12 7.5a4.5 4.5 0 104.5 4.5A4.5 4.5 0 0012 7.5zm0 8a3.5 3.5 0 113.5-3.5 3.5 3.5 0 01-3.5 3.5zm9.8-1.6A12.3 12.3 0 0022 12a12.3 12.3 0 00-.2-1.9l-2.1-.3a8.7 8.7 0 00-.7-1.7l1.3-1.7a8.7 8.7 0 00-2.7-2.7L15.9 5l-1.7-.7-.3-2.1L12 2l-1.9.2-.3 2.1-1.7.7-1.7-1.3a8.7 8.7 0 00-2.7 2.7L5 8.1a8.7 8.7 0 00-.7 1.7l-2.1.3A12.3 12.3 0 002 12a12.3 12.3 0 00.2 1.9l2.1.3a8.7 8.7 0 00.7 1.7l-1.3 1.7a8.7 8.7 0 002.7 2.7L8.1 19l1.7.7.3 2.1 1.9.2 1.9-.2.3-2.1 1.7-.7 1.7 1.3a8.7 8.7 0 002.7-2.7L19 15.9a8.7 8.7 0 00.7-1.7zm-2.9-.7l-.2.7a3.9 3.9 0 01-.6 1.5l-.3.6.4.5.8 1.1a9.3 9.3 0 01-1.4 1.4l-1.1-.8-.5-.4-.6.3a3.9 3.9 0 01-1.5.6l-.7.2v.7l-.2 1.3h-2l-.2-1.3v-.7l-.7-.2a3.9 3.9 0 01-1.5-.6l-.6-.3-.5.4-1.1.8A9.3 9.3 0 015 17.6l.8-1.1.4-.5-.3-.6a3.9 3.9 0 01-.6-1.5l-.2-.7h-.7L3.1 13a3.4 3.4 0 01-.1-1 3.4 3.4 0 01.1-1l1.3-.2h.7l.2-.7a3.9 3.9 0 01.6-1.5l.3-.6-.4-.5L5 6.4 6.4 5l1.1.8.5.4.6-.3a3.9 3.9 0 011.5-.6l.7-.2v-.7l.2-1.3h2l.2 1.3v.7l.7.2a3.9 3.9 0 011.5.6l.6.3.5-.4 1.1-.8A9.3 9.3 0 0119 6.4l-.8 1.1-.4.5.3.6a3.9 3.9 0 01.6 1.5l.2.7h.7l1.3.2a3.4 3.4 0 01.1 1 3.4 3.4 0 01-.1 1l-1.3.2z"/><path fill="none" d="M0 0h24v24H0z"/></svg> <svg viewBox="0 0 24 24" id="it-share" xmlns="http://www.w3.org/2000/svg"><path d="M17.5 15a2.5 2.5 0 00-2 1l-7.6-3.4A1.3 1.3 0 008 12a1.3 1.3 0 00-.1-.6L15.5 8a2.5 2.5 0 10-.5-1.5 1.3 1.3 0 00.1.6l-7.6 3.4a2.5 2.5 0 100 3l7.6 3.4a1.3 1.3 0 00-.1.6 2.5 2.5 0 102.5-2.5zm0-10A1.5 1.5 0 0119 6.5a1.5 1.5 0 01-3 0A1.5 1.5 0 0117.5 5zm-12 8.5a1.5 1.5 0 010-3 1.5 1.5 0 010 3zm12 5.5a1.5 1.5 0 111.5-1.5 1.5 1.5 0 01-1.5 1.5z"/><path fill="none" d="M0 0h24v24H0z"/></svg> <svg viewBox="0 0 24 24" id="it-star-full" xmlns="http://www.w3.org/2000/svg"><path d="M12 1.7L9.5 9.2H1.6L8 13.9l-2.4 7.6 6.4-4.7 6.4 4.7-2.4-7.6 6.4-4.7h-7.9L12 1.7z"/><path fill="none" d="M0 0h24v24H0z"/></svg> <svg viewBox="0 0 24 24" id="it-star-outline" xmlns="http://www.w3.org/2000/svg"><path d="M12 4.9l1.5 4.6.2.7h5.7l-4 2.9-.6.4.2.7 1.5 4.7-3.9-2.9-.6-.4-.6.4-3.9 2.9L9 14.2l.2-.7-.6-.4-4-2.9h5.7l.2-.7L12 4.9m0-3.2L9.5 9.2H1.6L8 13.9l-2.4 7.6 6.4-4.7 6.4 4.7-2.4-7.6 6.4-4.7h-7.9L12 1.7z"/><path fill="none" d="M0 0h24v24H0z"/></svg> <svg viewBox="0 0 24 24" id="it-team-digitale" xmlns="http://www.w3.org/2000/svg"><path d="M23.648 24H.352A.353.353 0 010 23.648V.352C0 .158.158 0 .352 0h23.296c.194 0 .352.158.352.352v23.296a.353.353 0 01-.352.352zM5.814 11.792a1.596 1.596 0 100-3.192 1.596 1.596 0 000 3.192zM10 18.994V19h4.418C19.13 19 20 16.685 20 12.253 20 7.93 18.995 6 14.418 6H10v12.994zm4.418-10.702c2.586 0 2.838 1.11 2.838 3.955 0 2.89-.252 4.455-2.838 4.455h-1.756v-8.41h1.756z"/></svg> <svg viewBox="0 0 24 24" id="it-telephone" xmlns="http://www.w3.org/2000/svg"><path d="M5 3h.18M20 11.56A7.59 7.59 0 0012.48 4h-.06a.49.49 0 00-.49.48.5.5 0 00.49.51A6.61 6.61 0 0119 11.62a.51.51 0 00.54.46.49.49 0 00.45-.46s.01-.04.01-.06z"/><path d="M16.93 11.68a4.5 4.5 0 00-4.48-4.48.51.51 0 000 1 3.5 3.5 0 013.49 3.49.5.5 0 00.5.5.51.51 0 00.5-.51zM15.68 21.19a13.32 13.32 0 01-12.8-13.1.92.92 0 01.62-.88c1.74-.56 4-1 4.7.06a7.39 7.39 0 01.85 2.91v.21a1.48 1.48 0 01-.7 1.68.81.81 0 00-.49.71 12.55 12.55 0 003.38 3.51.88.88 0 00.48-.56c.09-.53.58-1 1.7-.85h.21a7 7 0 012.85.87c1 .72.62 3 .09 4.72a1 1 0 01-.89.72zM6.55 7.52a9.5 9.5 0 00-2.78.55 12.41 12.41 0 0011.91 12.22c.73-2.26.66-3.54.31-3.78a6.66 6.66 0 00-2.46-.72h-.22c-.32 0-.65 0-.68.12a1.9 1.9 0 01-1.27 1.34l-.21.07-.15-.15a13.44 13.44 0 01-3.9-4L7 13a1.68 1.68 0 011-1.7c.12-.07.33-.18.25-.75v-.22a6.84 6.84 0 00-.7-2.54c-.2-.18-.55-.27-1-.27z"/></svg> <svg viewBox="0 0 24 24" id="it-tool" xmlns="http://www.w3.org/2000/svg"><path d="M7.7 5a3.1 3.1 0 011.7.5 3.1 3.1 0 011.6 3 3 3 0 00.8 2.4l6.3 6.3a1 1 0 01.2 1.3 1 1 0 01-.8.5.9.9 0 01-.7-.3l-6.4-6.4a3 3 0 00-2.1-.8h-.6a2.8 2.8 0 01-2.2-1h2.7V6.4H5.1a2.7 2.7 0 011.1-1A2.8 2.8 0 017.7 5m0-1a4.6 4.6 0 00-2 .5 4.1 4.1 0 00-2.1 2.9h3.6v2.1H3.7a5.4 5.4 0 001 1.8 4.4 4.4 0 003 1.2h.6a2.4 2.4 0 011.4.5l6.4 6.4a2 2 0 001.4.6 1.9 1.9 0 001.6-.9 2 2 0 00-.3-2.6l-6.3-6.3a1.8 1.8 0 01-.5-1.6 4.4 4.4 0 00-2-4A4.6 4.6 0 007.7 4z"/><path fill="none" d="M0 0h24v24H0z"/></svg> <svg viewBox="0 0 24 24" id="it-twitter" xmlns="http://www.w3.org/2000/svg"><path fill="none" d="M0 0h24v24H0z"/><path d="M8.08 20a10.93 10.93 0 0011-11v-.5a8 8 0 001.92-2 7.85 7.85 0 01-2.22.61A3.89 3.89 0 0020.48 5a8 8 0 01-2.48.91 3.87 3.87 0 00-6.59 3.52 11 11 0 01-8-4 3.85 3.85 0 001.19 5.16 3.76 3.76 0 01-1.75-.48A3.87 3.87 0 006 13.91a3.73 3.73 0 01-1 .14 4.3 4.3 0 01-.73-.05 3.87 3.87 0 003.61 2.68 7.73 7.73 0 01-4.8 1.66 7 7 0 01-.92-.06A10.9 10.9 0 008.08 20"/></svg> <svg viewBox="0 0 24 24" id="it-twitter-square" xmlns="http://www.w3.org/2000/svg"><path fill="none" d="M0 0h24v24H0z"/><path d="M19.5 22h-15A2.5 2.5 0 012 19.5v-15A2.5 2.5 0 014.5 2h15A2.5 2.5 0 0122 4.5v15a2.5 2.5 0 01-2.5 2.5zm-9.82-4.92A7.24 7.24 0 0017 9.79v-.33a5.22 5.22 0 001.28-1.33 5.22 5.22 0 01-1.48.4 2.56 2.56 0 001.14-1.42 4.93 4.93 0 01-1.64.62 2.53 2.53 0 00-1.86-.81 2.57 2.57 0 00-2.57 2.57c.003.195.026.39.07.58a7.26 7.26 0 01-5.32-2.68 2.59 2.59 0 00.8 3.43 2.78 2.78 0 01-1.16-.32 2.57 2.57 0 002.05 2.52 2.46 2.46 0 01-1.15.04 2.55 2.55 0 002.39 1.78A5.13 5.13 0 016.37 16a6.08 6.08 0 01-.61 0 7.23 7.23 0 003.92 1.14v-.06z"/></svg> <svg viewBox="0 0 24 24" id="it-unlocked" xmlns="http://www.w3.org/2000/svg"><path d="M16.5 12H16V6a4 4 0 00-8 0v3h1V6a3 3 0 016 0v6H7.5a1.1 1.1 0 00-1.1 1.1v6.8A1.1 1.1 0 007.5 21h9a1.1 1.1 0 001.1-1.1v-6.8a1.1 1.1 0 00-1.1-1.1zm.1 7.9a.1.1 0 01-.1.1h-9a.1.1 0 01-.1-.1v-6.8h9.2zM13 15.5a.8.8 0 01-.5.8v1.5h-1v-1.5a.8.8 0 01-.5-.8 1 1 0 012 0z"/><path fill="none" d="M0 0h24v24H0z"/></svg> <svg viewBox="0 0 24 24" id="it-upload" xmlns="http://www.w3.org/2000/svg"><path d="M8.4 7.3l-.7-.7L12 2.3l4.3 4.3-.7.7-3.1-3.1v9.3h-1V4.2zM19 12v7.5a.5.5 0 01-.5.5h-13a.5.5 0 01-.5-.5V12H4v7.5A1.5 1.5 0 005.5 21h13a1.5 1.5 0 001.5-1.5V12z"/><path fill="none" d="M0 0h24v24H0z"/></svg> <svg viewBox="0 0 24 24" id="it-user" xmlns="http://www.w3.org/2000/svg"><path d="M12 13a4 4 0 004-4V6a4 4 0 00-8 0v3a4 4 0 004 4zM9 6a3 3 0 016 0v3a3 3 0 01-6 0zm11 16h-1a7 7 0 00-14 0H4a8 8 0 0116 0z"/><path fill="none" d="M0 0h24v24H0z"/></svg> <svg viewBox="0 0 24 24" id="it-video" xmlns="http://www.w3.org/2000/svg"><path d="M17.5 7.3V6A1.5 1.5 0 0016 4.5H5.5A1.5 1.5 0 004 6v8a1.5 1.5 0 001.5 1.5h3.4L7.4 21h1l1.6-5.5h1.8l1.6 5.5h1l-1.6-5.5H16a1.5 1.5 0 001.5-1.5v-1.3l4 1.5V5.8zm3 5.5l-4-1.5V14a.5.5 0 01-.5.5H5.5A.5.5 0 015 14V6a.5.5 0 01.5-.5H16a.5.5 0 01.5.5v2.7l4-1.5zM2 8h1v4H2z"/><path fill="none" d="M0 0h24v24H0z"/></svg> <svg viewBox="0 0 24 24" id="it-warning" xmlns="http://www.w3.org/2000/svg"><path d="M12.5 17h-1V2h1zm0 3h-1v2h1z"/><path fill="none" d="M0 0h24v24H0z"/></svg> <svg viewBox="0 0 24 24" id="it-warning-circle" xmlns="http://www.w3.org/2000/svg"><path d="M12 2a10 10 0 1010 10A10 10 0 0012 2zm0 19a9 9 0 119-9 9 9 0 01-9 9zm-.5-6.8V5.7h1.2v8.5zm-.1 2.3h1.2v1.8h-1.2z"/><path fill="none" d="M0 0h24v24H0z"/></svg> <svg viewBox="0 0 24 24" id="it-whatsapp" xmlns="http://www.w3.org/2000/svg"><path fill="none" d="M0 0h24v24H0z"/><path d="M19.09 4.63a10 10 0 00-15.68 12L2 21.8l5.28-1.38A10 10 0 0012 21.63a10 10 0 007.05-17h.04zM12 20a8.18 8.18 0 01-4.21-1.16l-.31-.18-3.13.83.84-3.06-.19-.36A8.28 8.28 0 1112 20zm4.54-6.2c-.25-.13-1.47-.73-1.7-.81-.23-.08-.39-.13-.56.12-.246.347-.51.68-.79 1-.14.16-.29.18-.54.06a6.92 6.92 0 01-2-1.23 7.27 7.27 0 01-1.38-1.73c-.15-.25 0-.38.11-.51s.25-.29.37-.43a1.51 1.51 0 00.25-.42.46.46 0 000-.43c-.04-.2-.54-1.42-.75-1.92-.21-.5-.4-.42-.56-.43h-.47a1 1 0 00-.67.31A2.81 2.81 0 007 9.45 4.73 4.73 0 008 12a11 11 0 004.25 3.76c.464.2.938.378 1.42.53a3.28 3.28 0 001.56.09 2.54 2.54 0 001.68-1.18 2.09 2.09 0 00.15-1.2c-.06-.07-.23-.13-.48-.25l-.04.05z"/></svg> <svg viewBox="0 0 24 24" id="it-whatsapp-square" xmlns="http://www.w3.org/2000/svg"><path fill="none" d="M0 0h24v24H0z"/><path d="M16 8.07a5.34 5.34 0 00-9.11 3.77 5.28 5.28 0 00.82 2.84l.12.2-.53 2 2-.53.2.11c.82.49 1.756.75 2.71.75A5.34 5.34 0 0016 8.07zm-.83 5.83a1.66 1.66 0 01-1.08.76 2.23 2.23 0 01-1-.06c-.23-.08-.53-.18-.91-.34a7.16 7.16 0 01-2.78-2.42 3.13 3.13 0 01-.66-1.66 1.83 1.83 0 01.56-1.34.59.59 0 01.43-.2H10c.1 0 .23 0 .36.27.13.27.45 1.11.49 1.19a.3.3 0 010 .28 1.2 1.2 0 01-.16.27c-.08.1-.17.21-.24.28-.07.07-.17.17-.07.33.239.413.54.787.89 1.11.38.34.816.612 1.29.8.16.08.25.06.34 0 .09-.06.4-.47.51-.63.11-.16.21-.14.36-.08.15.06.94.44 1.1.52.16.08.26.12.3.19a1.36 1.36 0 01-.03.73h.03z"/><path d="M21 7.09a8.26 8.26 0 00-.09-1.15 3.49 3.49 0 00-1.85-2.51 3.89 3.89 0 00-1-.32A8.36 8.36 0 0016.91 3H7.09a8.26 8.26 0 00-1.15.09A3.49 3.49 0 003.43 5a3.89 3.89 0 00-.32 1A8.36 8.36 0 003 7.09v9.82c.003.385.033.77.09 1.15A3.49 3.49 0 005 20.57a3.89 3.89 0 001 .32c.384.06.771.094 1.16.1h9.82a8.26 8.26 0 001.15-.09 3.49 3.49 0 002.51-1.85 3.89 3.89 0 00.32-1 8.36 8.36 0 00.1-1.16V7.57c-.06-.1-.06-.31-.06-.48zm-8.8 11.17a6.39 6.39 0 01-3.06-.78l-3.41.89.92-3.32a6.33 6.33 0 01-.86-3.21 6.41 6.41 0 0111-4.53 6.33 6.33 0 011.88 4.54 6.42 6.42 0 01-6.47 6.41z"/></svg> <svg viewBox="0 0 24 24" id="it-youtube" xmlns="http://www.w3.org/2000/svg"><path fill="none" d="M0 0h24v24H0z"/><path d="M21.56 7.2a2.5 2.5 0 00-1.76-1.77C18.24 5 12 5 12 5s-6.24 0-7.8.42A2.5 2.5 0 002.44 7.2 25.72 25.72 0 002 12c-.01 1.61.13 3.217.42 4.8a2.5 2.5 0 001.78 1.77C5.76 19 12 19 12 19s6.24 0 7.8-.42a2.5 2.5 0 001.76-1.77A25.72 25.72 0 0022 12a25.72 25.72 0 00-.44-4.8zM10 15V9l5.19 3L10 15z"/></svg> <svg viewBox="0 0 24 24" id="it-zoom-in" xmlns="http://www.w3.org/2000/svg"><path d="M10.4 9.5h3.3v1h-3.3v3.2h-1v-3.2H6.2v-1h3.2V6.2h1zm10.7 12.4L15.3 16a8.3 8.3 0 01-5.3 2 8 8 0 118-8 8.3 8.3 0 01-2 5.3l5.9 5.8zM17 10a7 7 0 10-7 7 7 7 0 007-7z"/><path fill="none" d="M0 0h24v24H0z"/></svg> <svg viewBox="0 0 24 24" id="it-zoom-out" xmlns="http://www.w3.org/2000/svg"><path d="M6.2 9.5h7.5v1H6.2zm14.9 12.4L15.3 16a8.3 8.3 0 01-5.3 2 8 8 0 118-8 8.3 8.3 0 01-2 5.3l5.9 5.8zM17 10a7 7 0 10-7 7 7 7 0 007-7z"/><path fill="none" d="M0 0h24v24H0z"/></svg> </defs></svg>

Le icone sprite sono molto ben delineate nel segno e rievocano lo stile delle icone microsoft windows10. Quelle presentate nel riquadro di sinistra sono riferite a boostrap italia con miei adattamenti. Il file che si trova al link offre un'idea di come studiare gli sprite. Come si può notare gli viewboxes hanno un id="nome semantico dello sprite" utilissimo per non frammentare e raccogliere in un unico file tutti gli sprite svg.
Purtroppo questa facilitazione funziona solo con il browser Edge/IExplorer. In sostanza si perde questa utilità se si usano altri browser.  Nel link trovate i file scompattati 
Conviene perciò estrarre gli sprite in modo singolo e poi trattarli come immagini <img> in questo caso fare molta attenzione a settare i giusti valori dei parametri width height
Le immagini degli sprite possono essere molto grandi e sforare le dimensioni della fruizione standard di una pagina web riguardo la semantica dei segni visivi.

copiare manualmente LOGIN PHP

Login

<!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> /* udstile css versione 2020 03 29a */ /* foglio di stile base */ body{background-color:oldlace;} body, main, section, article, div, p, span, header, footer { font-size:1em; overflow:visible !important; } main{ margin-top:4.5em; margin-bottom:0.0em; margin-left:3em; margin-right:3em; 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); /* burlywood */ color:black; } 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%;} div.testo{ text-align:left; max-height:9em; overflow:auto !important; } div.immagine{ text-align:left; max-height:9em; overflow:auto !important; } .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 */ } .bordofooter{border:solid 1px rgba(0,0,0,0);} /* debugging */ .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;} p#code{background-color:burlywood;} p#effe{background-color:orange;} p.testo{ text-align:left; max-height:9em; overflow:auto !important; } p.immagine{ text-align:left; max-height:9em; overflow:auto !important; } </style> </head> <body onload="AttendereLoading()" class="sfondo"> <main class="bordo1" style="border-radius:0.6em;"> <form action="" method="post" name="Login_Form"> <table width="400" border="0" align="center" cellpadding="5" cellspacing="1" class="Table"> <?php if(isset($msg)){?> <tr> <td colspan="2" align="center" valign="top"><?php echo $msg;?></td> </tr> <?php } ?> <tr> <td colspan="2" align="left" valign="top"><h3><span style="color:transparent;">Login</span></h3></td> </tr> <tr class="ui primary basic button"> <td align="right" valign="top">Username</td> <td><input name="Username" type="text" class="Input"></td> </tr> <tr class="ui primary basic button"> <td align="right">Password</td> <td><input name="Password" type="password" class="Input"></td> </tr> <tr class="ui primary basic button"> <td> </td> <td><input name="Submit" type="submit" value="Login"></td> </tr> </table> </form> </main> <?php session_start(); /* Starts the session */ /* Check Login form submitted */if(isset($_POST['Submit'])){ /* Define username and associated password array */$logins = array('rinaldo' => '1234','username1' => 'password1','username2' => 'password2'); /* Check and assign submitted Username and Password to new variable */$Username = isset($_POST['Username']) ? $_POST['Username'] : ''; $Password = isset($_POST['Password']) ? $_POST['Password'] : ''; /* Check Username and Password existence in defined array */if (isset($logins[$Username]) && $logins[$Username] == $Password){ /* Success: Set session variables and redirect to Protected page */$_SESSION['UserData']['Username']=$logins[$Username]; header("location:index.php"); exit; } else { /*Unsuccessful attempt: Set error message */$msg="<span style='color:red'>Invalid Login Details</span>"; } } ?> <div id="fine"></div> </body> </html>

Logout

<?php session_start(); /* Starts the session */session_destroy(); /* Destroy started session */header("location:login.php"); /* Redirect to login page */exit; ?>

Index

<?php session_start(); /* Starts the session */ if(!isset($_SESSION['UserData']['Username'])){ header("location:login.php"); exit; } ?> <a href="logout.php">Logout</a>

copiare manualmente

<section id="copiaremanualmente" class="ui grid container centro bordo2"> <article id="" class="twelve wide column left aligned column bordo3"> <div class="bordo4" style="overflow:auto !important;"> <span> <i class="bullhorn icon"></i>copiare manualmente </span> <p class=""> &#60;xmp style="color:green;overflow:auto;"&#62; &#60;&#47;xmp&#62; </p> </div> </article> <article class="four wide column left aligned column bordo3"> <div class="bordo4"> </div> </article> </section>

underground software distillery,2020   wysiwyg vers.2020-05-07-1000

https://twitter.com/odlanir

underground_software_distillery©2020 se leggi questo messaggio qualcosa non ha funzionato