Skip to content

Pedro / practica1-daw

Go to a project
Commit 3428b7d6 by Pedro
Options

Primera versión - terminada

parent 04874c90
Inline Side-by-side
Showing with 58 additions and 125 deletions
src/public_html/index.html
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<script>
function mostrar() {
document.getElementById("sidebar").style.display = "none";
document.getElementById("main").style.display = "inline";
}
</script>
<script>
function ocultar(id) {
document.getElementById("sidebar").style.display = "block";
document.getElementById("main").style.display = "block";
}
</script>
<script>
function filtros() {
var cat1 = document.getElementById("todo");
var cat2 = document.getElementById("aceite");
var cat3 = document.getElementById("herramienta");
var checks = document.getElementsByClassName("aceitecont");
var checkss = document.getElementsByClassName("herramientacont");
if (cat1.checked) {
for (var i = 0; i < checks.length; i++) {
checks[i].style.display = "block";
}
for (var i = 0; i < checkss.length; i++) {
checkss[i].style.display = "block";
}
}
if (cat2.checked) {
for (var i = 0; i < checkss.length; i++) {
checkss[i].style.display = "none";
}
for (var i = 0; i < checks.length; i++) {
checks[i].style.display = "block";
}
}
if (cat3.checked) {
for (var i = 0; i < checkss.length; i++) {
checkss[i].style.display = "block";
}
for (var i = 0; i < checks.length; i++) {
checks[i].style.display = "none";
}
}
}
</script>
<head> <head>
<link rel="shortcut icon" href="./images/icon.ico"> <link rel="shortcut icon" href="./images/icon.ico">
<title>AgroVid Jaén - Productos</title> <title>AgroUja Jaén - Productos</title>
<script src="javascript.js"></script>
<link rel="stylesheet" href="css/estilo.css" /> <link rel="stylesheet" href="css/estilo.css" />
<meta charset="UTF-8"> <meta charset="UTF-8">
</head> </head>
...@@ -67,14 +15,14 @@ ...@@ -67,14 +15,14 @@
<ul> <ul>
<li><input type="button" onClick="ocultar()" value="ON"></li> <li><input type="button" onClick="ocultar()" value="ON"></li>
<li><input type="button" onClick="mostrar()" value="OFF"></li> <li><input type="button" onClick="mostrar()" value="OFF"></li>
<li><A href="./index.html"> Home</A></li> <li><A href="index.html"> Home</A></li>
<li><A href="./index.html"> Productos</A></li> <li><A href="index.html"> Productos</A></li>
<li><A href="./index.html"> Contacto</A> </li> <li><A href="index.html"> Contacto</A> </li>
</ul> </ul>
</nav> </nav>
</div> </div>
<div class="socialButtons"> <div class="socialButtons">
<A href="./index.html">Iniciar sesión</A> <A href="index.html">Iniciar sesión</A>
</div> </div>
</div> </div>
</header> </header>
...@@ -86,16 +34,11 @@ ...@@ -86,16 +34,11 @@
<div id="sidebarContent" style="background-color:rgba(0, 0, 0, 0);"> <div id="sidebarContent" style="background-color:rgba(0, 0, 0, 0);">
<aside > <aside >
<div style="background-color:rgba(0, 0, 0, 0);"> <div style="background-color:rgba(0, 0, 0, 0);">
<form> <center> <label>Filtros de búsqueda</label><br><br> </center>
<center> <label>Filtros de búsqueda</label><br><br>
</center>
</div> </div>
</aside> </aside>
<aside> <aside>
<div> <div>
<label>Seleccione categoría</label><hr> <label>Seleccione categoría</label><hr>
<input type="radio" id="todo" name="filtro"> <input type="radio" id="todo" name="filtro">
<label for="todo">Todos los elementos</label><br><br> <label for="todo">Todos los elementos</label><br><br>
...@@ -103,38 +46,29 @@ ...@@ -103,38 +46,29 @@
<label for="aceite">Aceites</label><br><br> <label for="aceite">Aceites</label><br><br>
<input type="radio" id="herramienta" name="filtro"> <input type="radio" id="herramienta" name="filtro">
<label for="herramienta">Herramientas</label> <br><br> <label for="herramienta">Herramientas</label> <br><br>
<center> <input type="button" onClick="filtros()" value="Buscar"></center>
<center> <input type="button" onClick="filtros()" value="a ver"></center>
</form>
</div> </div>
<div> <div>
<form>
<label>Seleccione marca:</label><hr> <label>Seleccione marca:</label><hr>
<input type="radio" id="todo" name="filtro"> <input type="radio" id="marca1" name="filtro">
<label for="todo">Todos los elementos</label><br><br> <label for="marca1">Marca 1</label><br><br>
<input type="radio" id="aceite" name="filtro"> <input type="radio" id="marca2" name="filtro">
<label for="aceite">Aceites</label><br><br> <label for="marca2">Marca 2</label><br><br>
<input type="radio" id="herramienta" name="filtro"> <input type="radio" id="marca3" name="filtro">
<label for="herramienta">Herramientas</label> <br><br> <label for="marca3">Marca 3</label> <br><br>
<center> <input type="button" onClick="filtros()" value="Buscar"></center>
<center> <input type="button" onClick="filtros()" value="a ver"></center>
</form>
</div> </div>
<div> <div>
<form>
<label>Seleccione rango de precios:</label><hr> <label>Seleccione rango de precios:</label><hr>
<input type="radio" id="todo" name="filtro"> <input type="radio" id="precio1" name="filtro">
<label for="todo">Todos los elementos</label><br><br> <label for="precio1">0 - 50 €</label><br><br>
<input type="radio" id="aceite" name="filtro"> <input type="radio" id="precio2" name="filtro">
<label for="aceite">Aceites</label><br><br> <label for="precio2">50 - 100 €</label><br><br>
<input type="radio" id="herramienta" name="filtro"> <input type="radio" id="precio3" name="filtro">
<label for="herramienta">Herramientas</label> <br><br> <label for="precio3">100 - 1000 €</label> <br><br>
<center> <input type="button" onClick="filtros()" value="a ver"></center> <center> <input type="button" onClick="filtros()" value="Buscar"></center>
</form>
</div> </div>
</aside> </aside>
</div> </div>
...@@ -149,86 +83,85 @@ ...@@ -149,86 +83,85 @@
<ul> <ul>
<li> <li>
<div class="aceitecont"> <div class="aceitecont">
<img alt="nose" height="100" width="150" src="images/aceite.png"><br><hr> <img alt="Producto 1" height="100" width="150" src="images/aceite.png"><br><hr>
<input type="checkbox" name="pro1" value="Bike"> <input type="checkbox" id="producto1" name="producto1">
<label for="vehicle1">Aceite - 0€</label> <label for="producto1">Aceite - 0€</label>
</div> </div>
</li> </li>
<li> <li>
<div class="aceitecont"> <div class="aceitecont">
<img alt="nose" height="100" width="150" src="images/aceite.png"><br> <hr> <img alt="Producto 2" height="100" width="150" src="images/aceite.png"><br> <hr>
<input type="checkbox" id="vehicle1" name="vehicle1" value="Bike"> <input type="checkbox" id="producto2" name="producto2">
<label for="vehicle1">Aceite - 0€</label> <label for="producto2">Aceite - 0€</label>
</div> </div>
</li> </li>
<li> <li>
<div class="aceitecont"> <div class="aceitecont">
<img alt="nose" height="100" width="150" src="images/aceite.png"><br><hr> <img alt="Producto 3" height="100" width="150" src="images/aceite.png"><br><hr>
<input type="checkbox" id="vehicle1" name="vehicle1" value="Bike"> <input type="checkbox" id="producto3" name="producto3">
<label for="vehicle1">Aceite - 0€</label> <label for="producto3">Aceite - 0€</label>
</div> </div>
</li> </li>
<li> <li>
<div class="aceitecont"> <div class="aceitecont">
<img alt="nose" height="100" width="150" src="images/aceite.png"><br><hr> <img alt="Producto 4" height="100" width="150" src="images/aceite.png"><br><hr>
<input type="checkbox" id="vehicle1" name="vehicle1" value="Bike"> <input type="checkbox" id="producto4" name="producto4">
<label for="vehicle1">Aceite - 0€</label> <label for="producto4">Aceite - 0€</label>
</div> </div>
</li> </li>
<li> <li>
<div class="aceitecont"> <div class="aceitecont">
<img alt="nose" height="100" width="150" src="images/aceite.png"><br><hr> <img alt="Producto 5" height="100" width="150" src="images/aceite.png"><br><hr>
<input type="checkbox" id="vehicle1" name="vehicle1" value="Bike"> <input type="checkbox" id="producto5" name="producto5">
<label for="vehicle1">Aceite - 0€</label> <label for="producto5">Aceite - 0€</label>
</div> </div>
</li> <li> </li> <li>
<div class="herramientacont"> <div class="herramientacont">
<img alt="nose" height="100" width="150" src="images/pala.png"><br><hr> <img alt="Producto 6" height="100" width="150" src="images/pala.png"><br><hr>
<input type="checkbox" id="vehicle1" name="vehicle1" value="Bike"> <input type="checkbox" id="producto6" name="producto6">
<label for="vehicle1">Pala - 0€</label> <label for="producto6">Pala - 0€</label>
</div> </div>
</li> <li> </li> <li>
<div class="herramientacont"> <div class="herramientacont">
<img alt="nose" height="100" width="150" src="images/pala.png"><br><hr> <img alt="Producto 7" height="100" width="150" src="images/pala.png"><br><hr>
<input type="checkbox" id="vehicle1" name="vehicle1" value="Bike"> <input type="checkbox" id="producto7" name="producto7">
<label for="vehicle1">Pala - 0€</label> <label for="producto7">Pala - 0€</label>
</div> </div>
</li> <li> </li> <li>
<div class="herramientacont"> <div class="herramientacont">
<img alt="nose" height="100" width="150" src="images/pala.png"><br><hr> <img alt="Producto 8" height="100" width="150" src="images/pala.png"><br><hr>
<input type="checkbox" id="vehicle1" name="vehicle1" value="Bike"> <input type="checkbox" id="producto8" name="producto8">
<label for="vehicle1">Pala - 0€</label> <label for="producto8">Pala - 0€</label>
</div> </div>
</li> <li> </li> <li>
<div class="herramientacont"> <div class="herramientacont">
<img alt="nose" height="100" width="150" src="images/pala.png"><br><hr> <img alt="Producto 9" height="100" width="150" src="images/pala.png"><br><hr>
<input type="checkbox" id="vehicle1" name="vehicle1" value="Bike"> <input type="checkbox" id="producto9" name="producto9">
<label for="vehicle1">Pala - 0€</label> <label for="producto9">Pala - 0€</label>
</div> </div>
</li> <li> </li> <li>
<div class="herramientacont"> <div class="herramientacont">
<img alt="nose" height="100" width="150" src="images/pala.png"><br><hr> <img alt="Producto 10" height="100" width="150" src="images/pala.png"><br><hr>
<input type="checkbox" id="vehicle1" name="vehicle1" value="Bike"> <input type="checkbox" id="producto10" name="producto10">
<label for="vehicle1">Pala - 0€</label> <label for="producto10">Pala - 0€</label>
</div> </div>
</li> <li> </li> <li>
<div class="herramientacont"> <div class="herramientacont">
<img alt="nose" height="100" width="150" src="images/pala.png"><br><hr> <img alt="Producto 11" height="100" width="150" src="images/pala.png"><br><hr>
<input type="checkbox" id="vehicle1" name="vehicle1" value="Bike"> <input type="checkbox" id="producto11" name="producto11">
<label for="vehicle1">Pala - 0€</label> <label for="producto11">Pala - 0€</label>
</div> </div>
</li> <li> </li> <li>
<div class="herramientacont"> <div class="herramientacont">
<img alt="nose" height="100" width="150" src="images/pala.png"><br><hr> <img alt="Producto 12" height="100" width="150" src="images/pala.png"><br><hr>
<input type="checkbox" id="vehicle1" name="vehicle1" value="Bike"> <input type="checkbox" id="producto12" name="producto12">
<label for="vehicle1">Pala - 0€</label> <label for="producto12">Pala - 0€</label>
</div> </div>
</li> </li>
</ul> </ul>
<center> <input type="submit" value="Comprar"></center> <center> <input type="submit" value="Comprar"></center>
</form> </form>
</section> </section>
</main> </main>
<footer> <footer>
</footer> </footer>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment