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
This commit is contained in:
parent
24868f6801
commit
c623b1061c
1 changed files with 129 additions and 16 deletions
145
index.html
145
index.html
|
|
@ -7,7 +7,7 @@
|
||||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
|
<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'>
|
<link href='https://fonts.googleapis.com/css?family=Hammersmith+One' rel='stylesheet' type='text/css'>
|
||||||
<script>
|
<script>
|
||||||
var lunghezzaExec=1 //in millis
|
var lunghezzaExec=300 //in millis
|
||||||
var risorse = {
|
var risorse = {
|
||||||
file: new Array(5),
|
file: new Array(5),
|
||||||
stampante: 0,
|
stampante: 0,
|
||||||
|
|
@ -189,12 +189,22 @@
|
||||||
margin: 0;
|
margin: 0;
|
||||||
overflow-x: hidden;
|
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{
|
.logger{
|
||||||
overflow-y: scroll;
|
overflow-y: scroll;
|
||||||
height: 60vh;
|
height: 60vh;
|
||||||
background-color: black;
|
background-color: black;
|
||||||
width: calc(100vw - 13rem);
|
width: calc(100vw - 13rem);
|
||||||
float: left;
|
float: left;
|
||||||
|
margin-bottom: .5rem;
|
||||||
}
|
}
|
||||||
.logger > p{
|
.logger > p{
|
||||||
margin-top: 0;
|
margin-top: 0;
|
||||||
|
|
@ -223,17 +233,13 @@
|
||||||
display: table-cell;
|
display: table-cell;
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
font-weight: lighter;
|
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 {
|
.nav {
|
||||||
width: 8rem;
|
width: 8rem;
|
||||||
padding: .5rem;
|
padding: .5rem;
|
||||||
font-family: 'Hammersmith One', sans-serif;
|
font-family: 'Hammersmith One', sans-serif;
|
||||||
margin-left: .5rem;
|
margin-left: .5rem;
|
||||||
|
background: #cccccc;
|
||||||
float: left;
|
float: left;
|
||||||
font-weight: lighter;
|
font-weight: lighter;
|
||||||
}
|
}
|
||||||
|
|
@ -250,12 +256,15 @@
|
||||||
width: calc(100vw - 11rem);
|
width: calc(100vw - 11rem);
|
||||||
margin-bottom: 2rem;
|
margin-bottom: 2rem;
|
||||||
}
|
}
|
||||||
.section {
|
.sections > .section{
|
||||||
width: calc(100vw - 13rem);
|
width: calc(100vw - 13rem);
|
||||||
padding: .5rem;
|
padding: .5rem;
|
||||||
margin: .5rem;
|
margin-bottom: .5em;
|
||||||
margin-top: 0;
|
|
||||||
}
|
}
|
||||||
|
.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{
|
div.sections div.section:last-child{
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
}
|
}
|
||||||
|
|
@ -270,13 +279,93 @@
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
right: 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{
|
.section.teoria{
|
||||||
font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace;
|
font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace;
|
||||||
background: black;
|
background: black;
|
||||||
color: white;
|
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) {
|
@media screen and (max-width: 600px) {
|
||||||
.nav{
|
.nav{
|
||||||
|
|
@ -286,14 +375,19 @@
|
||||||
}
|
}
|
||||||
.sections{
|
.sections{
|
||||||
float: none;
|
float: none;
|
||||||
|
margin-left: .5rem;
|
||||||
width: calc(100vw - 1rem);
|
width: calc(100vw - 1rem);
|
||||||
|
margin-bottom: .5rem;
|
||||||
}
|
}
|
||||||
.section{
|
.sections > .section{
|
||||||
width: calc(100vw - 3rem);
|
width: calc(100vw - 3rem);
|
||||||
}
|
}
|
||||||
.footer{
|
.footer{
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
.sections > .section > .logger{
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
|
|
@ -308,21 +402,40 @@
|
||||||
</div>
|
</div>
|
||||||
<div class="sections">
|
<div class="sections">
|
||||||
<div class="section card teoria">
|
<div class="section card teoria">
|
||||||
|
<h2>Teoria</h2>
|
||||||
<p>In informatica lo scheduler (da to schedule letteralmente "mettere in lista", ovvero "pianificare") è un componente
|
<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 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
|
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
|
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>
|
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>
|
||||||
<div class="section card">
|
<div class="section card loggerSection">
|
||||||
|
<h2>Log dello scheduler</h2>
|
||||||
<div class="logger">
|
<div class="logger">
|
||||||
</div>
|
</div>
|
||||||
<div class="controls">
|
<div class="controls">
|
||||||
<button type="button" name="aggiungiProcesso" onclick="new Processo()">Aggiungi processo</button>
|
<div class="buttons">
|
||||||
<button type="button" name="toggleProcessi" onclick="toggleProcessiPronti()">Ferma/riprendi</button>
|
<button type="button" class="btn" name="aggiungiProcesso" onclick="new Processo()">Aggiungi processo</button>
|
||||||
<label>Velocità (in millisecondi):<input class="inputVel" type="number" onkeypress="cambiaVel(event,this)" value="500"/></label>
|
<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>
|
</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>
|
||||||
<div class="footer">
|
<div class="footer">
|
||||||
Creato da Claudio Maggioni, Federico Mainetti, Pamela Dardano, Fabio Brambilla
|
Creato da Claudio Maggioni, Federico Mainetti, Pamela Dardano, Fabio Brambilla
|
||||||
|
|
|
||||||
Reference in a new issue