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>
|
||||
<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,11 +256,14 @@
|
|||
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
|
||||
|
|
|
|||
Reference in a new issue