Skip to content

Instantly share code, notes, and snippets.

@r-malon

r-malon/index.html

Last active May 29, 2020 19:14
Show Gist options
  • Save r-malon/ccad8ead801f2a236e08fc4ca591a19f to your computer and use it in GitHub Desktop.
Save r-malon/ccad8ead801f2a236e08fc4ca591a19f to your computer and use it in GitHub Desktop.
Download ZIP
Demonstração para seminário de Web
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<title>Restaurante</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<script src="https://www.w3schools.com/lib/w3.js"></script>
<script src="https://www.w3schools.com/lib/w3codecolor.js"></script>
</head>
<body>
<div class="w3-container w3-center w3-teal">
<h1 class="w3-jumbo w3-animate-zoom">El Restaurante</h1>
<p class="text-slide">Pizza?</p>
<p class="text-slide">Bolos?</p>
<p class="text-slide">Almoço?</p>
<p class="text-slide">Aqui tem!</p>
</div>
<div class="w3-cell-row">
<div style="width: 40%;" class="w3-cell">
<table id="cardapio" class="w3-table-all">
<tr>
<th colspan="3" class="w3-center">Cardápio</th>
</tr>
<tr>
<td colspan="3">
<input oninput="w3.filterHTML('#cardapio', '.item', this.value)" class="w3-input" placeholder='Busque...'>
</td>
</tr>
<tr>
<th onclick="w3.sortHTML('#cardapio','.item', 'td:nth-child(1)')" style="cursor: pointer;">Prato &#8693;</th>
<th onclick="w3.sortHTML('#cardapio','.item', 'td:nth-child(2)')" style="cursor: pointer;">Tipo &#8693;</th>
<th>Preço</th>
</tr>
<tr w3-repeat="pratos" class="item">
<td>{{nome}}</td>
<td>{{tipo}}</td>
<td>{{custo}}</td>
</tr>
<tr>
<td></td>
<td></td>
<td colspan="3"><b>Total:</b> {{total}}</td>
</tr>
<tr>
<td></td>
<td></td>
<td colspan="3"><b>Média:</b> {{media}}</td>
</tr>
</table>
</div>
<div class="w3-cell">
<button id="botao" class="w3-button w3-border w3-margin" onclick="w3.toggleShow('#depoimentos');">Ver/Esconder depoimentos</button>
<div id="depoimentos" class="w3-margin" style="width: 60%;">
<div class="w3-panel w3-leftbar w3-hover-shadow w3-sand w3-serif">
<p><i>"Essa página mudou minha vida."</i></p>
<p>- John Doe</p>
</div>
<div class="w3-panel w3-leftbar w3-hover-shadow w3-sand w3-serif">
<p><i>"Essa página mudou minha vida."</i></p>
<p>- Mary Doe</p>
</div>
<div class="w3-panel w3-leftbar w3-hover-shadow w3-sand w3-serif">
<p><i>"Essa página mudou minha vida."</i></p>
<p>- Jack Doe</p>
</div>
</div>
</div>
</div>
<br>
<br>
<div style="margin-left: 40%;">
<div class="w3-cell-row w3-center">
<div class="w3-cell funcionario" style="width: 30%;">
<div class="w3-card">
<img src="avatar1.png" class="w3-image w3-opacity-min w3-hover-opacity-off" style="cursor: zoom-in;" onclick="abrir_modal(this)">
<div class="w3-container">
<h4><b>Antonio</b></h4>
<p>O pizzaiolo</p>
</div>
</div>
</div>
<div class="w3-cell funcionario" style="width: 30%;">
<div class="w3-card">
<img src="avatar1.png" class="w3-image w3-opacity-min w3-hover-opacity-off" style="cursor: zoom-in;" onclick="abrir_modal(this)">
<div class="w3-container">
<h4><b>Bruce</b></h4>
<p>O chefão</p>
</div>
</div>
</div>
<div class="w3-cell funcionario" style="width: 30%;">
<div class="w3-card">
<img src="avatar0.png" class="w3-image w3-opacity-min w3-hover-opacity-off" style="cursor: zoom-in;" onclick="abrir_modal(this)">
<div class="w3-container">
<h4><b>Maria</b></h4>
<p>A cozinheira</p>
</div>
</div>
</div>
</div>
<div style="margin-left: 5%;">
<button class="w3-button w3-border w3-margin" onclick="funcionarios.previous()">&#8678;</button>
<button class="w3-button w3-border w3-margin" onclick="funcionarios.next()">&#8680;</button>
</div>
</div>
<br>
<br>
<div class="w3-panel w3-card w3-light-grey" style="width: 30%; margin-left: 35%;">
<h4>Como fazer um alerta em JavaScript</h4>
<div class="w3-code jsHigh">
function popup() {<br>
var nome = "José";<br>
var idade = 32;<br>
alert("Bem-Vindo, ", nome);<br>
}
</div>
</div>
<div id="modal" class="w3-modal" onclick="this.style.display='none';">
<img class="w3-modal-content w3-animate-zoom w3-center" id="img_modal" style="width: 50%; height: 90%; margin-left: 25%; cursor: zoom-out;">
</div>
<script>
w3CodeColor();
w3.slideshow(".text-slide", 1500);
var funcionarios = w3.slideshow(".funcionario", 0);
//w3.getHttpObject("cardapio.json", preencher_tabela);
var cardapio = {
"pratos": [
{"nome": "Paella", "tipo": "Almoço", "custo": 8.99},
{"nome": "Camarão", "tipo": "Fruto do mar", "custo": 6.89},
{"nome": "Pizza", "tipo": "Massa", "custo": 15.49},
{"nome": "Borscht", "tipo": "Sopa", "custo": 6.29},
{"nome": "Salsichão", "tipo": "Carne", "custo": 2.99},
{"nome": "Feijoada", "tipo": "Ensopado", "custo": 18.99},
{"nome": "Caranguejo", "tipo": "Fruto do mar", "custo": 4.49},
{"nome": "Pastel", "tipo": "Massa", "custo": 15.49}
]
}
preencher_tabela(cardapio);
function preencher_tabela(obj) {
var total = 0;
for (var i = 0; i < obj.pratos.length; i++) {
total += obj.pratos[i].custo;
}
obj.total = total.toFixed(2);
obj.media = (obj.total / obj.pratos.length).toFixed(2);
w3.displayObject("cardapio", obj);
}
function abrir_modal(element) {
document.getElementById("img_modal").src = element.src;
document.getElementById("modal").style.display = "block";
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment