1700 REGULAR TOGMENU 20210119

0004 Con l'ultima versione di BS è stato rimosso jQuery come dipendenza può succedere che in alfa un javascript funzioni mentre non in beta, mentre i css funzionano ancora bene e occorre solamente fare un minimo aggiustamento in aggiunta delle nuove funzionalità. Utilizzando il DGEBI si presuppone che client abbia già attivato l'interprete javascript potrebbe essere un drawback ma oramai nei browser javascript è attivato per default e la commistione html+css+javascript è talmente uno standard che difficilmente ci si troverà ad incontrare problemi a questo riguardo. Nella fase di compilazione del DGEBI ci possono essere dei problemi riguardanti il fatto che nello script ci sia un conflitto con caratteri speciali non approvati dallo script ma perfettamenti accettati da html. Risulta essere il caso del carattere ' (apice) il quale fa da delimitatore delle stringhe concatenate. Compilando il testo occorre istruire una conversione utilizzando i caratteri di escape \' (apice singolo) oppure \" (doppio apice) oppure \\ (barra inversa).

0021 Un ulteriore perfezionamento con interazioni html body e percentuale di caricamento (qui fissata in 15minuti)


<html id="html">

<style>
:root {background-color:rgba(255,170,0,0.5);}

body{ background-color:default; }
</style>


<body id="body" onload="pausa()" style="visibility:hidden;">



<div id="divpausa" style="position:fixed;
top:2.5rem;left:0;
top:50%;left:50%;
background-color:var(--bs-white) !important;
margin-left:-8.5rem !important; margin-top:-2rem !important; 
border-radius:0.2rem !important; visibility:visible !important;">
<span id="pausa" class="spinner-border text-warning"></span>

<span style="background-color:transparent !important;">
<span id="Loading"
style="color:var(--bs-indigo) !important; font-size:2rem !important;">
Loading...</span>
<span id="percento" 
style="color:var(--bs-indigo) !important;
font-size:2rem !important;font-variant:small-caps !important;">
</span>
</span>
</div> 





<script>

function pausa(){
if (document.all){} 
else if 
(document.getElementById)
{ 
document.getElementById("pausa").style.visibility="hidden";
document.getElementById("percento").style.visibility="hidden";
document.getElementById("Loading").style.visibility="hidden";
document.getElementById("divpausa").style.visibility="hidden";

document.getElementById("body").style.visibility="visible";
document.getElementById("body").style.backgroundColor = 'default';
document.getElementById("html").style.backgroundColor = 'transparent';

}

}

var percento=document.getElementById("percento");
var contatore=1; 
var intervallo=setInterval( function() { percento.innerHTML=contatore+"%"; 
contatore++; if (contatore===101) {clearInterval(intervallo);} 
} , 9000) 

</script>

0034 Molto interessante è il compattamento di tutti i link standard o di default. Con un unico script si caricano tutti i file necessari per user lasciando libero spazio al main e alle sezioni.




var postfisso = new Date(); 

var carica_script_JQUERY = document.createElement("script");
var nome_JQUERY = "https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js";
nome_JQUERY = nome_JQUERY + "?" + postfisso;
carica_script_JQUERY.src=nome_JQUERY;
document.getElementsByTagName("head")[0].appendChild(carica_script_JQUERY);

var carica_script_BSNR_KICKSTART_TEST = document.createElement("script");
var nome_BSNR_KICKSTART_TEST = "http://beatsupernovarasa.altervista.org/zap/bs/kickstart/bsnr_kickstart_test/default.js";
nome_BSNR_KICKSTART_TEST = nome_BSNR_KICKSTART_TEST + "?" + postfisso;
carica_script_BSNR_KICKSTART_TEST.src=nome_BSNR_KICKSTART_TEST;
document.getElementsByTagName("head")[0].appendChild(carica_script_BSNR_KICKSTART_TEST);

var carica_script_PIEDIPAGINA_MENU_TEST = document.createElement("script");
var nome_PIEDIPAGINA_MENU_TEST = "http://beatsupernovarasa.altervista.org/zap/bs/kickstart/piedipagina_menu_test/default.js";
nome_PIEDIPAGINA_MENU_TEST = nome_PIEDIPAGINA_MENU_TEST + "?" + postfisso;
carica_script_PIEDIPAGINA_MENU_TEST.src=nome_PIEDIPAGINA_MENU_TEST;
document.getElementsByTagName("head")[0].appendChild(carica_script_PIEDIPAGINA_MENU_TEST);

var carica_script_SHOW_HIDE = document.createElement("script");
var nome_SHOW_HIDE = "http://beatsupernovarasa.altervista.org/zap/bs/kickstart/show_hide/default.js";
nome_SHOW_HIDE = nome_SHOW_HIDE + "?" + postfisso;
carica_script_SHOW_HIDE.src=nome_SHOW_HIDE;
document.getElementsByTagName("head")[0].appendChild(carica_script_SHOW_HIDE);

var carica_link_TABLONE = document.createElement("link");
var nome_TABLONE = "http://beatsupernovarasa.altervista.org/zap/bs/tablone/default.css";
nome_TABLONE = nome_TABLONE + "?" + postfisso;
carica_link_TABLONE.href=nome_TABLONE;
carica_link_TABLONE.rel="stylesheet";
document.getElementsByTagName("head")[0].appendChild(carica_link_TABLONE);

Con un ulteriore passaggio si potrebbe avere un caricamento generico (un es. di script)


<script>

var radice_alfabeta="http://beatsupernovarasa.altervista.org/alfabeta/";
var adesso=new Date();
var postfisso_test="default.js?"+adesso;

var script_menu=document.createElement("script");
var nome_menu=radice_alfabeta+"/menu/"+postfisso_test;
script_menu.src=nome_menu; document.getElementsByTagName("head")[0].appendChild(script_menu);

</script>

Riferimenti concreti: jQuery bootstrap piedipagina show_hide tablone links bscompatto

0037 ascii code (da 32 a 127) visualizzati secondo font-family predisposta

	32		space
	33	!	exclamation mark
	34	"	quotation mark
	35	#	number sign
	36	$	dollar sign
	37	%	percent sign
	38	&	ampersand
	39	'	apostrophe
	40	(	left parenthesis
	41	)	right parenthesis
	42	*	asterisk
	43	+	plus sign
	44	,	comma
	45	-	hyphen-minus
	46	.	full stop
	47	/	solidus
	48	0	digit zero
	49	1	digit one
	50	2	digit two
	51	3	digit three
	52	4	digit four
	53	5	digit five
	54	6	digit six
	55	7	digit seven
	56	8	digit eight
	57	9	digit nine
	58	:	colon
	59	;	semicolon
	60	<	less-than sign
	61	=	equals sign
	62	>	greater-than sign
	63	?	question mark
	64	@	commercial at
	65	A	Latin capital letter A
	66	B	Latin capital letter B
	67	C	Latin capital letter C
	68	D	Latin capital letter D
	69	E	Latin capital letter E
	70	F	Latin capital letter F
	71	G	Latin capital letter G
	72	H	Latin capital letter H
	73	I	Latin capital letter I
	74	J	Latin capital letter J
	75	K	Latin capital letter K
	76	L	Latin capital letter L
	77	M	Latin capital letter M
	78	N	Latin capital letter N
	79	O	Latin capital letter O
	80	P	Latin capital letter P
	81	Q	Latin capital letter Q
	82	R	Latin capital letter R
	83	S	Latin capital letter S
	84	T	Latin capital letter T
	85	U	Latin capital letter U
	86	V	Latin capital letter V
	87	W	Latin capital letter W
	88	X	Latin capital letter X
	89	Y	Latin capital letter Y
	90	Z	Latin capital letter Z
	91	[	left square bracket
	92	\	reverse solidus
	93	]	right square bracket
	94	^	circumflex accent
	95	_	low line
	96	`	grave accent
	97	a	Latin small letter a
	98	b	Latin small letter b
	99	c	Latin small letter c
	100	d	Latin small letter d
	101	e	Latin small letter e
	102	f	Latin small letter f
	103	g	Latin small letter g
	104	h	Latin small letter h
	105	i	Latin small letter i
	106	j	Latin small letter j
	107	k	Latin small letter k
	108	l	Latin small letter l
	109	m	Latin small letter m
	110	n	Latin small letter n
	111	o	Latin small letter o
	112	p	Latin small letter p
	113	q	Latin small letter q
	114	r	Latin small letter r
	115	s	Latin small letter s
	116	t	Latin small letter t
	117	u	Latin small letter u
	118	v	Latin small letter v
	119	w	Latin small letter w
	120	x	Latin small letter x
	121	y	Latin small letter y
	122	z	Latin small letter z
	123	{	left curly bracket
	124	|	vertical line
	125	}	right curly bracket
	126	~	tilde
	127	DEL

0040


<div style="position:fixed; bottom:0; left:0;
width:100%; text-align:left; border:solid 0rem green;">

<button type="button" class="btn shadow-none bg-warning rounded" 
aria-expanded="false" data-toggle="collapse" data-target="#collapseMenu" 
style="position:fixed; top:2.5rem; right:0; "> 
<svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-back" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M0 2a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v2h2a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2v-2H2a2 2 0 0 1-2-2V2zm2-1a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1H2z"/>
</svg>
</button>

<div id="collapseMenu" class="collapse border-0">
<ul style="border:solid 0.25rem indigo !important;
height:11.5rem !important; 
overflow:auto !important; border-radius:0.2rem !important; ">

<a href="#">link_del_menu</a>

</ul>
</div>

</div>

Cliccando (toggle) sul bottone si produce la visualizzazione di un pop up.

0042 Il sign in rappresenta una richiesta di utenza e password per accedere al contenuto della pagina. Per ottenere questo effetto occorre usare il linguaggio php il quale usa essere dal lato server quindi funziona direttamente dal sito e il codice php non può essere visto quando si esegue il codice phpche lo lancia; tuttavia con un programma apposito si può eseguire il codice php in locale tramite xampp . Una volta installato eseguire il comando per attivare il control panel drive:\xampp\xampp-control.exe trovare la icona e cliccare. Quando appare il pannello di controllo xampp cliccare start e l'ambiente è in funzione come localhost dal quale con il comando localhost/file.php digitandolo dal browser si emula il comportamento da server. Fare attenzione a depositare il file php nella cartella htdocs. La combinazione user password permette di gestire una sessione di file php, una volta loggatoi successivi file controllano se user password sono corretti prima di evidenziare il loro contenuto .

0045 Il form accetta username password indi invia i dati al file file.php che controlla la validità del sign in ed esegue il codice se corrisponde altrimenti reinvia ad index.php. Ogni altro file della catena è vincolato dal login (sign in) anche se un client cerca di accedere senza usare la home page.





<form method="post" name="Login_Form">
<table>
<tr> <td><h3><span>Login</span></h3></td> <td></td> </tr>
<tr> <td>Username</td> <td><input name="Username" type="text" class="Input">
<span style="background-color:oldlace; color:maroon;">username1</span></td></tr>
<tr><td>Password </td><td><input name="Password" type="password" class="Input">
<span style="background-color:oldlace; color:maroon;">password1</span></td>
</tr>
<tr> <td><input name="Submit" type="submit" value="Login" style=" cursor:pointer !important;">
</td><td> </td></tr>
</table>
</form>

Porzione di codice html per inserire i dati username password necessari per php al fine di aprire una sessione di lavoro.

0044 L'uscita dalla sessione di lavoro viene eseguita dal codice di log out. La fase di logout può diventare molto importante dato che se una sessione viene lasciata aperta chiunque può accedere ai dati del file.php senza conoscere username e password. Per ovviare a questo inconveniente si può mettere un contatore a rovescio (ad esempio ogni secondo) a scandire la fine della sessione Da tenere presente che un vero fine sessione comporterebbe una interruzione quando l'user non esegue alcuna operazione per un determinato periodo di tempo. Qui invece la sessione viene staccata comunque vadano le cose. Per questo è utile inserire un visualizzatore del tempo rimanente affinché user non sia sorpreso dalla fine della sessione.




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

Il timer che fa scadere una sessione o un form




 var elem = document.getElementById("incremento");
 var numero = 0; 
 var intervallo = setInterval(contatore, 1000);
 function contatore() {
 numero=numero+1;
 elem.innerHTML = numero;
 
 if (numero==40) {
 window.location.href="test.php" 
 }
 }





<span id="timeragenda" 
style="cursor:default !important; opacity:1 !important;">
</span>
<script>
document.getElementById("timeragenda").innerHTML=
' <span id="incremento_timer"> '+
' '+
' </span>'+
' <span> '+
' /5 '+
' </span>'+
' '+
' ' ;

var elem_timer = document.getElementById("incremento_timer");
 var numero_timer = 0; 
 var intervallo_timer = setInterval(contatore_timer, 1000);
 function contatore_timer() {
 numero_timer=numero_timer+1;
 elem_timer.innerHTML = numero_timer;
 
 if (numero_timer==5) {
 // window.location.href="test.php" 
 clearInterval(intervallo_timer);
 }
 }	
</script>

0049 Il contenitore del codice. Qui inizia la sequenza di elementi html aventi la caratteristica di separatori o linee di serialità nella esecuzione del codice html considerare ogni elemento come una linea alla quale sono appesi come fogli dei comandi. Definire un width height di un div non significa altro che fornire una grandezza alla linea di appoggio dei comandi seguenti.


<head>

Rappresenta il posto nel quale si dovrebbero inserire i fogli di stile e altre dipendenze del programma html ad esempio i CDN come visto nella sezione asincrono tramite script si possono aggiungere a head i link necessari.


<meta charset="utf-8">

Molto importante per la decodifica dei caratteri europei.


<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

Necessario per il responsive e cross browser. Inoltre evita la simplified view in Chrome.


<title>

Titolo della pagina visualizzata


<link href="bs/kickstart/tablone_aggiunte_test/default.js" rel="stylesheet" />

Fogli di stile personalizzati

0054





<!DOCTYPE html>
<html lang="it" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

<title></title>

<link href="http://beatsupernovarasa.altervista.org/zap/bs/tablone/default.css" rel="stylesheet" />

<style>
html * {font-family: 'PT Mono', monospace !important;} 
</style>

</head>

<body style="border-right:solid 0.2rem indigo !important;">


<div id="bsnr_kickstart_test">bug bsnr_kickstart_test</div>
<script src="http://beatsupernovarasa.altervista.org/zap/bs/kickstart/bsnr_kickstart_test/default.js"></script>

<div id="piedipagina_menu_test">bug piedipagina_menu_test</div>
<script src="http://beatsupernovarasa.altervista.org/zap/bs/kickstart/piedipagina_menu_test/default.js"></script>


<div id="spinner" class="spinner-border text-warning" style="position:fixed; top:2.5rem; left:0; background-color:oldlace;"></div>

</body>

</html>

0058 Un ulteriore miglioramento avviene se i due pulsanti X e Y sono fatti visualmente coincidere effettuando un unico pulsante toggle ovvero attiva/disattiva




<span id="vedoXoY">bug vedoXoY</span>

<script>
document.getElementById("vedoXoY").innerHTML=
' '+
' '+
' <style> '+
' '+
' .posvedoXoY{'+
' position:fixed !important;'+
' right:0 !important;'+
' bottom:0 !important;'+
' color:transparent !important;'+
' margin-right: 0.5rem !important;'+
' margin-bottom: 1.0rem !important;'+

' '+
' }'+
' '+
' .vediY{ '+
' cursor:pointer !important;'+
' background-color:indigo !important;'+
' background-color:rgba(75,0,130,1) !important;'+
' border:solid 0.12rem rgba(75,0,130,1) !important;'+
' '+
' }'+
' '+
' .vediX{ '+
' cursor:pointer !important;'+
' background-color:orange !important;'+
' background-color:rgba(255,165,0,1) !important;'+
' border:solid 0.12rem rgba(75,0,130,1) !important;'+
' '+
' }'+

' '+
' '+
' '+
' </style> '+
' '+
' '+

'<span onclick="showElement()" class="vedi nascondiY vediY posvedoXoY">Y</span> '+

'<span onclick="hideElement()" class="nascondi nascondiX vediX posvedoXoY">X</span> '+

' '
;

function hideElement() { 
element = document.querySelector('.vedoXoY'); 
element.style.visibility = 'hidden'; 
element = document.querySelector('.nascondiX'); 
element.style.visibility = 'hidden'; 
element = document.querySelector('.vediY'); 
element.style.visibility = 'visible'; 

} 


function showElement() { 
element = document.querySelector('.vedoXoY'); 
element.style.visibility = 'visible';
element = document.querySelector('.vediX'); 
element.style.visibility = 'visible';
element = document.querySelector('.nascondiY'); 
element.style.visibility = 'hidden';

} 

</script>

0062 L'inserimento delle sections presuppone esse non forino la barriera del td è necessario avere attenzione per overflow. Fare molta attenzione ad un drawback in Chrome che riconosce (in modo errato) il segno meno come spazio e quindi non applica overflow. Da notare un possibile problema di rendering dato dalla comune idea che una string viene spezzata dal browser quando trova uno space il quale fa da separazione per individuare le parole in una proposizione. Ora appare un behavior non congruo con questo comportamento tra 0123456789-0123456789 e 01234567890123456789 oppure 0123456789 0123456789 , normalmente le prime due string sono una unica parola mentre la terza string è composta da due parole tuttavia nel browser Chrome la string uno è formata da due parole e solo la seconda è interpretata come una singola string. Comunque se Chrome si comporta in modo anomalo occorre segnalare che anche Firefox non manca di segnalare una barra di scorrimento se si esagera con gli overflow (es.un overflow in main)

0064




<!DOCTYPE html>
<html id="html" lang="it" xmlns="http://www.w3.org/1999/xhtml">
<head>

<meta charset="utf-8">
<meta name="generator" content="AlterVista - Editor HTML"/>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

<title> 

1600 hello thanks

</title>


</head>
<body id="body" onload="ATTESA()" style="visibility:hidden !important;">

<main id="main" class="mx-5">
<table id="tablone" class="table"> 
	<tbody> 
	<tr> 
	
	<td id="tablone-td-sinistra" class="p-0"> </td>
	
	<td id="tablone-td-destra" >
	
	<table id="tablette" class="table"> 
	<tr> 
	<td> 
	
	
	
	
	
	
	
	<aside id="argomento-0000" class="argomento"><span class="id">0000</span>
		<span class="articolo"></span>
		

<div>hello! </div>


<img src="http://beatsupernovarasa.altervista.org/immagini/nancybeatnik.png" 
class="img-fluid"  alt=""  />



<div class="mt-5" style="font-size:0.75rem !important;">
	Thankyou 
</div>

		 
	</span>
	</aside>
	
	
	
	
	
	
	</td> 
	</tr> 
	</table> 
	
	</td> 
	</tr> 
	</tbody> 
	</table> 
	
	
<div id="alfabeta_copyright_bsnr" class="text-center"></div>
<script src="http://beatsupernovarasa.altervista.org/alfabeta/copyright/bsnr/default.js"></script>


</main>


<span id="alfabeta_bs_bsnr">bug alfabeta_bs_bsnr</span>
<script src="http://beatsupernovarasa.altervista.org/alfabeta/bs/bsnr/default.js"></script>

<div id="alfabeta_menu_bsnr" class="vediXoY"></div>
<script src="http://beatsupernovarasa.altervista.org/alfabeta/menu/bsnr/default.js"></script>

<link rel="stylesheet" href="http://beatsupernovarasa.altervista.org/alfabeta/tablone/bsnr/default.css" />




<div id="SPINNERpausa" style="position:fixed;
top:2.5rem;left:0;
top:50%;left:50%;
background-color:var(--bs-white) !important;
margin-left:-8.5rem !important; margin-top:-2rem !important; 
border-radius:0.2rem !important; visibility:visible !important;">
<span id="pausa" class="spinner-border text-warning"></span>

<span style="background-color:transparent !important;">
<span id="Loading"
style="color:var(--bs-indigo) !important; font-size:2rem !important;">
Loading...</span>
<span id="percento" 
style="color:var(--bs-indigo) !important;
font-size:2rem !important;font-variant:small-caps !important;">
</span>
</span>
</div> 





<script>

function ATTESA(){
if (document.all){} 
else if 
(document.getElementById)
{ 
document.getElementById("pausa").style.visibility="hidden";
document.getElementById("percento").style.visibility="hidden";
document.getElementById("Loading").style.visibility="hidden";
document.getElementById("SPINNERpausa").style.visibility="hidden";

document.getElementById("body").style.visibility="visible";
document.getElementById("body").style.backgroundColor = 'default';
document.getElementById("html").style.backgroundColor = 'transparent';

}

}

var percento=document.getElementById("percento");
var contatore=1; 
var intervallo=setInterval( function() { percento.innerHTML=contatore+"%"; 
contatore++; if (contatore===101) {clearInterval(intervallo);} 
} , 9000) 

</script>



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

0066


	<!DOCTYPE html>
	<html id="html" lang="it" xmlns="http://www.w3.org/1999/xhtml">
	<head>
	
	<meta charset="utf-8">
	<meta name="generator" content="AlterVista - Editor HTML"/>
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
	
	<title> 1645 loremipsum TOGMenu 20210106 </title>
	
	
	</head>
	<body id="body" onload="pausa()" style="visibility:hidden !important;">
	
	<main id="main" class="mx-5">
	
	<table id="tablone" class="table"> 
	<tbody> 
	<tr> 
	
	<td id="tablone-td-sinistra" class="p-0"> </td>
	
	<td id="tablone-td-destra" >
	
	<table id="tablette" class="table"> 
	<tr> 
	<td> 
	
	
	
	
	
	
	
	<aside id="argomento-9999" class="argomento"><span class="id">9999</span>
		<span class="articolo">
		
		 [.....]
		 
	</span>
	</aside>
	
	
	
	
	
	
	</td> 
	</tr> 
	</table> 
	
	</td> 
	</tr> 
	</tbody> 
	</table> 
	
	
	</main>
	
	<span id="bsnr_kickstart_test">bug bsnr_kickstart_test</span>
	
	<script src="http://beatsupernovarasa.altervista.org/alfabeta/bs/default.js"></script>
	
	
	
	<div id="menu" class="vediXoY"></div>
	<script>
	/* menu (da togglare) class vediXoY */
	/* 20210102_1245 */
	/*
	
	per funzionare come menu collapse
	necessita di bootstrap alfabeta-bs
	html asterisk pt mono
	
	*/
	document.getElementById("menu").innerHTML=
	' <link href="https://fonts.googleapis.com/css2?family=PT+Mono&display=swap" rel="stylesheet"> '+
	
	
	' <div style=" '+
	' position:fixed !important; '+
	' bottom:0rem !important; '+
	' left:0rem !important; '+
	
	' margin-left:0.5% !important; '+
	' margin-right:0.5% !important; '+
	
	' background-color:oldlace !important; '+
	' background-color:rgba(253,245,230,0.95) !important; '+
	
	
	' width:99% !important; '+
	' height:auto !important; '+
	' font-size:1.1rem !important; '+
	' '+
	' '+
	' text-align:left !important; '+
	' '+
	' border:solid 0.2rem transparent !important; '+
	' '+
	' '+
	' "> '+
	
	
	
	' <button type="button" '+
	' class="btn shadow-none '+
	' bg-warning rounded" '+ 
	' data-toggle="collapse" '+
	' data-target="#COLLAPSE_MENU" '+ 
	' aria-expanded="false" '+ 
	' style="position:fixed !important; '+
	' top:2.5rem !important; right:0 !important; '+
	' top:5rem !important; right:0 !important; '+
	' font-size:1rem !important; '+
	' "> '+ 
	
	' '+ 
	' <svg width="1rem" height="1rem" '+
	' viewBox="0 0 16 16" '+
	' class="bi bi-back" '+
	' fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M0 2a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v2h2a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2v-2H2a2 2 0 0 1-2-2V2zm2-1a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1H2z"/> '+ 
	' </svg> '+ ' '+ 
	' </button> '+
	
	
	
	' <span style=" '+
	' margin-left:2.55rem !important; '+
	
	' padding:0.2rem !important;'+
	
	' background-color:oldlace !important; '+
	' background-color:rgba(253,245,230,1) !important; '+
	
	' font-size:1.1rem !important; '+
	
	' border-radius:0.4rem !important;'+
	' border:solid 0.05rem navy !important;"> '+ 
	
	' <a href="#fine"> '+ 
	' <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M0 0h24v24H0V0z" fill="none" /> <path fill="maroon" d="M20 12l-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8 8-8z"/> '+ 
	' </svg></a> '+ 
	
	
	
	' <span style="'+
	' visibility:hidden !important; '+
	' display:inline!important; '+
	' font-size:0.45rem !important; '+
	' border:solid 0.2rem transparent !important; '+
	' ">menu</span> '+ 
	' '+ 
	
	
	
	' <a href="#"> '+ 
	' <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"> <path d="M0 0h24v24H0V0z" fill="none"/> <path fill="maroon" d="M4 12l1.41 1.41L11 7.83V20h2V7.83l5.58 5.59L20 12l-8-8-8 8z"/> '+ 
	' </svg></a> '+ 
	' '+ 
	' </span> '+ 
	
	' '+
	
	
	
	
	
	
	
	
	
	' <div '+
	' id="COLLAPSE_MENU" '+
	' class="collapse dropdown-menuY border-0" '+
	' style=" '+
	' margin-left:2.41rem !important; '+
	' margin-right:2.41rem !important; '+
	' margin-bottom:2rem !important; '+
	' border:solid 0.2rem transparent !important;" > '+
	
	' '+
	
	' <ul style="'+
	' border:solid 0.25rem indigo !important; '+
	' border:solid 0.10rem rgba(75,0,130,1) !important; '+
	' height:11.5rem !important; '+
	' overflow:auto !important; '+
	' border-radius:0.2rem !important; ">'+
	
	
	
	' <div id="menu_argomento"></div> '+
	
	
	
	' <p class="my-1"><hr/></p> '+
	
	
	
	' <div id="menu_note"></div> '+
	
	
	
	' '+
	' '+
	' '+
	
	
	' '+ ' '+ 
	' </ul> '+
	
	
	' '+
	' '+
	' '+
	' <div id="menu_copyright"></div> '+
	' '+
	' '+
	' '+
	' '+
	' '+
	' </div> '+
	' </div> '+
	' '+
	
	' '
	;
	
	
	</script>
	
	
	
	
	<script>
	document.getElementById("menu_argomento").innerHTML=
	' '+
	' '+
	
	' <a class="btn rounded" '+ 
	' href="#argomento-0005"> '+ 
	' <span class="rounded p-1 fw-bold" '+
	' style=" '+
	' background-color:indigo !important; '+
	' color:oldlace !important; '+
	' font-size:small !important;'+
	' border:solid 0.1rem indigo !important; ">'+
	' utilizzo_generico_del_DGEBI</span></a> '+
	
	' <a class="btn rounded" '+ 
	' href="#argomento-0011"> '+ 
	' <span class="rounded p-1 fw-bold" '+
	' style=" '+
	' background-color:indigo !important; '+
	' color:oldlace !important; '+
	' font-size:small !important;'+
	' border:solid 0.1rem indigo !important; ">'+
	' spinner</span></a> '+
	
	
	' <a class="btn rounded" '+ 
	' href="#argomento-0023"> '+ 
	' <span class="rounded p-1 fw-bold" '+
	' style=" '+
	' background-color:indigo !important; '+
	' color:oldlace !important; '+
	' font-size:small !important;'+
	' border:solid 0.1rem indigo !important; ">'+
	' caricamenti_asincroni</span></a> '+
	
	
	' <a class="btn rounded" '+ 
	' href="#argomento-0035"> '+ 
	' <span class="rounded p-1 fw-bold" '+
	' style=" '+
	' background-color:indigo !important; '+
	' color:oldlace !important; '+
	' font-size:small !important;'+
	' border:solid 0.1rem indigo !important; ">'+
	' font</span></a> '+
	
	
	' <a class="btn rounded" '+ 
	' href="#argomento-0038"> '+ 
	' <span class="rounded p-1 fw-bold" '+
	' style=" '+
	' background-color:indigo !important; '+
	' color:oldlace !important; '+
	' font-size:small !important;'+
	' border:solid 0.1rem indigo !important; ">'+
	' collapse</span></a> '+
	
	
	' <a class="btn rounded" '+ 
	' href="#argomento-0041"> '+ 
	' <span class="rounded p-1 fw-bold" '+
	' style=" '+
	' background-color:indigo !important; '+
	' color:oldlace !important; '+
	' font-size:small !important;'+
	' border:solid 0.1rem indigo !important; ">'+
	' sign-in</span></a> '+
	
	
	' <a class="btn rounded" '+ 
	' href="#argomento-0046"> '+ 
	' <span class="rounded p-1 fw-bold" '+
	' style=" '+
	' background-color:indigo !important; '+
	' color:oldlace !important; '+
	' font-size:small !important;'+
	' border:solid 0.1rem indigo !important; ">'+
	' struttura</span></a> '+
	
	
	' <a class="btn rounded" '+ 
	' href="#argomento-0053"> '+ 
	' <span class="rounded p-1 fw-bold" '+
	' style=" '+
	' background-color:indigo !important; '+
	' color:oldlace !important; '+
	' font-size:small !important;'+
	' border:solid 0.1rem indigo !important; ">'+
	' composizione_struttura</span></a> '+
	
	
	' <a class="btn rounded" '+ 
	' href="#argomento-0060"> '+ 
	' <span class="rounded p-1 fw-bold" '+
	' style=" '+
	' background-color:indigo !important; '+
	' color:oldlace !important; '+
	' font-size:small !important;'+
	' border:solid 0.1rem indigo !important; ">'+
	' linee_guida_main</span></a> '+
	
	
	
	' <a class="btn rounded" '+ 
	' href="#argomento-0063"> '+ 
	' <span class="rounded p-1 fw-bold" '+
	' style=" '+
	' background-color:indigo !important; '+
	' color:oldlace !important; '+
	' font-size:small !important;'+
	' border:solid 0.1rem indigo !important; ">'+
	' framework_magic-patches</span></a> '+
	
	
	' <a class="btn rounded" '+ 
	' href="#argomento-0065"> '+ 
	' <span class="rounded p-1 fw-bold" '+
	' style=" '+
	' background-color:indigo !important; '+
	' color:oldlace !important; '+
	' font-size:small !important;'+
	' border:solid 0.1rem indigo !important; ">'+
	' codice attualmente in uso</span></a> '+
	
	
	
	' '+
	' ';
	</script>
	
	
	
	
	
	<script>
	document.getElementById("menu_note").innerHTML=
	' <span style=" '+
	' background-color:oldlace !important; '+
	' color:indigo !important; '+
	' '+
	' '+
	' font-size:small !important;'+
	' font-weight:bold !important; '+
	'">'+
	' note: </span> '+
	' '+
	
	' <a href="#argomento-0068" class="note mr-2"> '+
	' copy_to_clipboard </a> '+
	
	
	' <a href="#argomento-0037" class="note mr-2"> '+
	' ascii </a> '+
	
	
	' '+
	' ';
	</script>
	
	
	
	
	
	<script>
	document.getElementById("menu_copyright").innerHTML=
	' '+
	' <div style="font-size:small !important; '+
	' border:solid 0.2rem transparent !important; '+
	' "> '+
	' ©2021 alfabeta 20210105_1830 '+
	' </div> '+
	' '+
	' '+
	' ';
	</script>
	
	
	
	
	
	
	<span id="togglato"></span>
	<script>
	/*
	
	id togglato class vediXoY
	
	20210102_1245
	
	posizionato in linea con
	la nuova versione
	
	*/
	
	
	document.getElementById("togglato").innerHTML=
	' <style> ' + 
	' .togXbordo,.togYbordo { ' + 
	' position:fixed !important; ' + 
	' bottom:0rem !important; ' + 
	' right:1.0rem !important; ' + 
	' margin:0.5rem; ' +
	' margin-bottom:0.15rem; ' + 
	' margin-right:0rem; ' + 
	' cursor:pointer !important; ' + 
	' font-size:1rem !important; ' + 
	' font-family:monospace !important; ' + 
	' border-radius:0.20rem !important; ' + 
	' ' + 
	' } ' + 
	' ' + 
	' .togXbordo{ ' + 
	' border:solid 0.2rem indigo !important; ' + 
	' border:solid 0.10rem rgba(75,0,130,0.75) !important; ' + 
	' background-color:orange !important; ' + 
	' background-color:rgba(255,165,0,1) !important; ' + 
	' } ' + 
	' ' + 
	' .togYbordo{ ' + 
	' border:solid 0.10rem rgba(255,165,0,0.75) !important; ' + 
	' background-color:rgba(75,0,130,1) !important; ' + 
	' } ' + 
	' ' + 
	' </style> ' + 
	' ' + 
	' ' + 
	' ' + 
	' <span onclick="vedi()" class="togYbordo nascondiY vediY"> ' + 
	'   ' + 
	' </span> ' + 
	' <span onclick="nascondi()" class="togXbordo nascondiX vediX"> ' + 
	'   ' + 
	' </span> ' + 
	' ' + 
	' '
	;
	
	function nascondi(){
	elemento=document.querySelector(".vediXoY");
	elemento.style.visibility="hidden";
	elemento=document.querySelector(".nascondiX");
	elemento.style.visibility="hidden";
	elemento=document.querySelector(".vediY");
	elemento.style.visibility="visible";
	
	}
	
	function vedi(){
	elemento=document.querySelector(".vediXoY");
	elemento.style.visibility="visible";
	elemento=document.querySelector(".nascondiY");
	elemento.style.visibility="hidden";
	elemento=document.querySelector(".vediX");
	elemento.style.visibility="visible";
	
	}
	
	
	
	</script>
	
	<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
	*/
	
	function copyToClipboard(element) {
	var $temp = $("<input>");
	$("body").append($temp);
	$temp.val($(element).text()).select();
	document.execCommand("copy");
	$temp.remove();
	}
	</script> 
	
	
	
	
	<div id="divpausa" style="position:fixed;
	top:2.5rem;left:0;
	top:50%;left:50%;
	background-color:var(--bs-white) !important;
	margin-left:-8.5rem !important; margin-top:-2rem !important; 
	border-radius:0.2rem !important; visibility:visible !important;">
	<span id="pausa" class="spinner-border text-warning"></span>
	
	<span style="background-color:transparent !important;">
	<span id="Loading"
	style="color:var(--bs-indigo) !important; font-size:2rem !important;">
	Loading...</span>
	<span id="percento" 
	style="color:var(--bs-indigo) !important;
	font-size:2rem !important;font-variant:small-caps !important;">
	</span>
	</span>
	</div> 
	
	
	
	
	
	
	
	<style>
	/* tablone stile */
	/* 
	20210102 1845
	
	*/
	
	
	:root {
	--bsnr-giallo: rgba(255, 170, 0, 0.035);
	--bsnr-html: rgba(255, 170, 0, 0.035);
	--bsnr-oldlace: rgba(253,245,230,0.5);
	--bsnr-oldlace: rgba(253,245,230,0.275);
	
	background-color:rgba(255,170,0,0.5);
	
	letter-spacing:0.025rem !important;
	
	}
	
	
	html * {
	color:black !important;
	font-size:1.2rem !important;
	font-family: 'PT Mono', monospace !important;
	text-align:left !important;
	} 
	
	body{
	background-color:default; 
	background-color:oldlace;
	background-color:rgba(253,245,230,0.5);
	
	}
	
	main{
	margin-top:2.5rem !important;
	margin-bottom:18.5rem !important;
	border:solid 0.1rem rgba(255,0,0,0.15) !important;
	/* overflow:auto !important; */
	
	}
	
	
	table#tablone, table#tablette{ 
	table-layout:fixed !important;
	width:100% !important;
	border:solid 0.0rem green !important;
	}
	
	td#tablone-td-sinistra{
	width:0.5rem !important;
	border:solid 0.0rem grey !important;
	}
	
	td#tablone-td-destra{
	border:solid 0.0rem lawngreen !important;
	}
	
	
	
	aside{overflow:auto !important;}
	aside a{
	padding-left:0.2rem !important;
	padding-right:0.2rem !important;
	background-color:var(--bs-blue) !important;
	color:var(--bs-white) !important;
	font-size:1rem !important;
	box-shadow:0.1rem 0.1rem 0.2rem black !important;
	border-radius:0.2rem !important;
	}
	aside.argomento {
	margin-top:1.25rem !important;
	margin-bottom:1.25rem !important;
	font-size:1rem !important;
	text-align: justify !important;
	text-justify: inter-word !important;
	overflow:auto !important;
	display:block !important;
	}
	
	aside.argomento#argomento-0000 {
	/* TITOLO */
	font-size:1.75rem !important;
	font-weight: bold !important;
	}
	aside.argomento#argomento-0005,
	aside.argomento#argomento-0011,
	aside.argomento#argomento-0023,
	aside.argomento#argomento-0035,
	aside.argomento#argomento-0038,
	aside.argomento#argomento-0041,
	aside.argomento#argomento-0046,
	aside.argomento#argomento-0059,
	aside.argomento#argomento-0063
	{
	/* TITOLETTO */
	font-size:1.45rem !important;
	font-weight: bold !important;
	}
	aside.argomento#argomento-0006, 
	aside.argomento#argomento-0008
	{
	/* CODICE HTML TESTO */
	background-color: bisque !important;
	color:black !important;
	font-size:1.0rem !important;
	font-weight: bold !important;
	}
	aside.argomento pre{
	/* CODICE HTML PRE */
	background-color:oldlace !important;
	color:black !important;
	font-size:0.85rem !important;
	}
	span.id{
	background-color: beige !important;
	color:gray !important;
	font-size:0.5rem !important;
	display:inline !important;
	}
	
	
	
	.note{
	padding-left:0.2rem !important;
	padding-right:0.2rem !important;
	background-color: beige !important;
	color:black !important;
	font-size:0.95rem !important;
	border-radius:0.2rem !important;
	border:solid 0.1rem var(--bs-indigo) !important;
	}
	.span-block{display:block !important;
	}
	.span-block-fine{display:inline !important;
	}
	</style>
	
	
	
	
	<script>
	
	function pausa(){
	if (document.all){} 
	else if 
	(document.getElementById)
	{ 
	document.getElementById("pausa").style.visibility="hidden";
	document.getElementById("percento").style.visibility="hidden";
	document.getElementById("Loading").style.visibility="hidden";
	document.getElementById("divpausa").style.visibility="hidden";
	
	document.getElementById("body").style.visibility="visible";
	document.getElementById("body").style.backgroundColor = 'default';
	document.getElementById("html").style.backgroundColor = 'transparent';
	
	}
	
	}
	
	var percento=document.getElementById("percento");
	var contatore=1; 
	var intervallo=setInterval( function() { percento.innerHTML=contatore+"%"; 
	contatore++; if (contatore===101) {clearInterval(intervallo);} 
	} , 9000) 
	
	</script>
	
	
	
	
	
	<div id="fine"></div>
	</body>
	</html>