From c623b1061c2050d9f5b13dd50c874624cae01263 Mon Sep 17 00:00:00 2001
From: Claudio Maggioni <maggioniclaudio1999@gmail.com>
Date: Thu, 12 May 2016 21:54:30 +0200
Subject: [PATCH] Aggiunta tabella fatta da Mainetti (il commit non era andato
 a buon fine). Ritocchi sullo stile con aggiunta del material design a bottoni
 e input

---
 index.html | 145 +++++++++++++++++++++++++++++++++++++++++++++++------
 1 file changed, 129 insertions(+), 16 deletions(-)

diff --git a/index.html b/index.html
index 735aaf9..b76bda3 100644
--- a/index.html
+++ b/index.html
@@ -7,7 +7,7 @@
         <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
         <link href='https://fonts.googleapis.com/css?family=Hammersmith+One' rel='stylesheet' type='text/css'>
         <script>
-    		var lunghezzaExec=1 //in millis
+    		var lunghezzaExec=300 //in millis
     		var risorse = {
     			file: new Array(5),
     			stampante: 0,
@@ -189,12 +189,22 @@
                 margin: 0;
                 overflow-x: hidden;
             }
+            h1,h2,h3,h4,h5,h6{
+                margin: 0;
+                margin-bottom: .5rem;
+                text-align: center;
+                width: 100%;
+            }
+            .section.card.loggerSection{
+                background: lightblue;
+            }
             .logger{
                 overflow-y: scroll;
                 height: 60vh;
                 background-color: black;
                 width: calc(100vw - 13rem);
                 float: left;
+                margin-bottom: .5rem;
             }
             .logger > p{
                 margin-top: 0;
@@ -223,17 +233,13 @@
                 display: table-cell;
                 vertical-align: middle;
                 font-weight: lighter;
-            }
-            .card {
-                background: #fff;
-                display: block;
-                box-shadow: 0 1px 3px rgba(0, 0, 0, 0.16), 0 1px 3px rgba(0, 0, 0, 0.23);
             }
 			.nav {
 				width: 8rem;
                 padding: .5rem;
                 font-family: 'Hammersmith One', sans-serif;
                 margin-left: .5rem;
+                background: #cccccc;
 				float: left;
                 font-weight: lighter;
 			}
@@ -250,12 +256,15 @@
                 width: calc(100vw - 11rem);
                 margin-bottom: 2rem;
             }
-			.section {
+			.sections > .section{
                 width: calc(100vw - 13rem);
 				padding: .5rem;
-                margin: .5rem;
-                margin-top: 0;
+                margin-bottom: .5em;
 			}
+            .card{
+                display: block;
+                box-shadow: 0 1px 3px rgba(0, 0, 0, 0.16), 0 1px 3px rgba(0, 0, 0, 0.23);
+            }
             div.sections div.section:last-child{
                 margin-bottom: 0;
             }
@@ -270,13 +279,93 @@
                 bottom: 0;
                 left: 0;
                 right: 0;
-                font-family: 'Hammersmith One', sans-serif;
-                font-weight: lighter;
 			}
+            .btn {
+                position: relative;
+                display: block;
+                margin-left: .5rem;
+                padding: .5rem;
+                overflow: hidden;
+                border-width: 0;
+                color: white;
+                float: left;
+                outline: none;
+                box-shadow: 0 1px 4px rgba(0, 0, 0, .6);
+                background-color: #2ecc71;
+                transition: background-color .3s;
+                font-size: 1em;
+            }
+            .btn:hover, .btn:focus {
+                background-color: #27ae60;
+            }
+            .btn > * {
+                position: relative;
+            }
+            .btn span {
+                display: block;
+                padding: 12px 24px;
+            }
+            .btn:before {
+                content: "";
+                position: absolute;
+                top: 50%;
+                left: 50%;
+                display: block;
+                width: 0;
+                padding-top: 0;
+                border-radius: 100%;
+                background-color: rgba(236, 240, 241, .3);
+                -webkit-transform: translate(-50%, -50%);
+                -moz-transform: translate(-50%, -50%);
+                -ms-transform: translate(-50%, -50%);
+                -o-transform: translate(-50%, -50%);
+                transform: translate(-50%, -50%);
+            }
+            .btn:active:before {
+                width: 120%;
+                padding-top: 120%;
+                transition: width .2s ease-out, padding-top .2s ease-out;
+            }
+            .buttons{
+                display: inline-block;
+                margin-bottom: .5rem;
+                width: 100%;
+            }
+            div.buttons button:first-child{
+                margin-left: 0px;
+            }
+            div.buttons button:last-child{
+                margin-right: 0px;
+            }
             .section.teoria{
                 font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace;
                 background: black;
                 color: white;
+            }
+            label,input,button,.footer,table,h1,h2,h3,h4,h5,h6{
+                font-family: 'Hammersmith One', sans-serif;
+                font-weight: lighter;
+            }
+            input{
+                border: 0;
+                border-bottom: 1px solid #2ecc71;
+                margin-left: .5rem;
+                background:  rgba(0,0,0,0);
+            }
+            td.memCell{
+                width: 3em;
+                height: 3em;
+                color: grey;
+                background: white;
+                text-align: center;
+                vertical-align: middle;
+            }
+            .memTable{
+                display: inline-block;
+            }
+            .section.card.memory{
+                text-align: center;
+                background: lightgreen;
             }
 			@media screen and (max-width: 600px) {
 				.nav{
@@ -286,14 +375,19 @@
 				}
 				.sections{
 					float: none;
+                    margin-left: .5rem;
 					width: calc(100vw - 1rem);
+                    margin-bottom: .5rem;
 				}
-				.section{
+				.sections > .section{
 					width: calc(100vw - 3rem);
 				}
 				.footer{
 					display: none;
 				}
+                .sections > .section > .logger{
+                    width: 100%;
+                }
 			}
     	</style>
     </head>
@@ -308,21 +402,40 @@
         </div>
         <div class="sections">
             <div class="section card teoria">
+                <h2>Teoria</h2>
                 <p>In informatica lo scheduler (da to schedule letteralmente "mettere in lista", ovvero "pianificare") è un componente
                 di un sistema operativo ovvero un programma che implementa un algoritmo di scheduling il quale, dato un insieme di richieste
                 di accesso ad una risorsa (tipicamente l'accesso al processore da parte di un processo da eseguire), stabilisce un ordinamento
                 temporale per l'esecuzione di tali richieste, privilegiando quelle che rispettano determinati parametri secondo una certa politica
                 di scheduling, in modo da ottimizzare l'accesso a tale risorsa e consentire così l'espletamento del servizio/istruzione o processo desiderato.</p>
             </div>
-            <div class="section card">
+            <div class="section card loggerSection">
+                <h2>Log dello scheduler</h2>
                 <div class="logger">
                 </div>
 				<div class="controls">
-					<button type="button" name="aggiungiProcesso" onclick="new Processo()">Aggiungi processo</button>
-					<button type="button" name="toggleProcessi" onclick="toggleProcessiPronti()">Ferma/riprendi</button>
-					<label>Velocità (in millisecondi):<input class="inputVel" type="number" onkeypress="cambiaVel(event,this)" value="500"/></label>
+                    <div class="buttons">
+		                  <button type="button" class="btn" name="aggiungiProcesso" onclick="new Processo()">Aggiungi processo</button>
+	                      <button type="button" class="btn" name="toggleProcessi" onclick="toggleProcessiPronti()">Ferma o riprendi</button>
+                    </div>
+                    <label>Tempo tra i cambi di contesto (in millisecondi):<input class="inputVel" type="number" onkeypress="cambiaVel(event,this)" value="300"/></label>
 				</div>
 			</div>
+            <div class="section card memory">
+                <h2>Memoria</h2>
+                <table class="memTable">
+                    <tbody>
+                        <script>
+                            for(var i=0; i<10; i++){
+                                document.write("<tr>")
+                                for(var j=0; j<10; j++){
+                                    document.write("<td class=\"card memCell\" style=\"display: table-cell\" id=\""+i+j+"\">"+(10*i+j)+"</td>");
+                                }
+                                document.write("</tr>")
+                            }
+                        </script>
+                    </tbody>
+                </table>
         </div>
         <div class="footer">
             Creato da Claudio Maggioni, Federico Mainetti, Pamela Dardano, Fabio Brambilla