mirror of
https://github.com/Lil-Carpi/LDM-ASIR.git
synced 2025-12-06 08:04:37 +00:00
Compare commits
4 Commits
7a8cdf64c6
...
2704f3832d
| Author | SHA1 | Date | |
|---|---|---|---|
| 2704f3832d | |||
| a852a31629 | |||
| 874eea708c | |||
|
bdcefc6c03 |
11
ajeno/Projecte_ICC/.project
Normal file
11
ajeno/Projecte_ICC/.project
Normal file
@@ -0,0 +1,11 @@
|
|||||||
|
<?xml version="1.0" encoding="UTF-8"?>
|
||||||
|
<projectDescription>
|
||||||
|
<name>Projecte_ICC</name>
|
||||||
|
<comment></comment>
|
||||||
|
<projects>
|
||||||
|
</projects>
|
||||||
|
<buildSpec>
|
||||||
|
</buildSpec>
|
||||||
|
<natures>
|
||||||
|
</natures>
|
||||||
|
</projectDescription>
|
||||||
114
ajeno/Projecte_ICC/Projecte_ICC/cercarICC.html
Normal file
114
ajeno/Projecte_ICC/Projecte_ICC/cercarICC.html
Normal file
@@ -0,0 +1,114 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>JocsMania Cercar</title>
|
||||||
|
<link rel="icon" href="img/logo.png">
|
||||||
|
<link rel="stylesheet" href="css/estils.css">
|
||||||
|
<!-- Autor: Izan C. Cercós Data: 22/11/2025 Resum: Pàgina amb cercador per cercar els videojocs amb els paràmetres com l'edat, temàtica o requisits tècnics, etc.-->
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<!-- capçalera amb logo, títol, menú i enllaç a xarxes socials -->
|
||||||
|
<header>
|
||||||
|
<div class="cabecera">
|
||||||
|
<a href="indexICC.html"><img class="logo" src="img/logo.png"></a>
|
||||||
|
<div class="title">JocsMania</div>
|
||||||
|
<div class="hamburger">☰</div>
|
||||||
|
<div class="menu">
|
||||||
|
<a href="indexICC.html">Inici</a>
|
||||||
|
<a href="videojocsICC.html">Videojocs</a>
|
||||||
|
<a href="cercarICC.html">Cercar</a>
|
||||||
|
<a href="registreICC.html">Socis</a>
|
||||||
|
</div>
|
||||||
|
<div class="socials">
|
||||||
|
<a href="https://www.tiktok.com/login" target="_blank"><img class="red" src="img/tiktok.png"></a>
|
||||||
|
<a href="https://www.instagram.com" target="_blank"><img class="red" src="img/instagram.png"></a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
<!-- bloc principal amb cercador per cercar els videojocs amb els paràmetres com l'edat, temàtica o requisits tècnics -->
|
||||||
|
<main>
|
||||||
|
<section class="formulari">
|
||||||
|
<h1>Cercador</h1>
|
||||||
|
<!-- formulari per pujar les dades al servidor (no implementat: mostra la pàgina inicial) -->
|
||||||
|
<form action="indexICC.html">
|
||||||
|
<div class="campo">
|
||||||
|
<label class="etiqueta" for="nom">Nom:</label>
|
||||||
|
<input type="text" id="nom" name="nom">
|
||||||
|
</div>
|
||||||
|
<div class="campo">
|
||||||
|
<label class="etiqueta" for="edat">Edat del jugador:</label>
|
||||||
|
<!-- barra amb mínim 6 i màxim 99 per definir l'edat -->
|
||||||
|
<input type="range" id="edat" name="edat" min="6" max="99" title="Edat entre 6 i 99 anys">
|
||||||
|
</div>
|
||||||
|
<div class="campo">
|
||||||
|
<label class="etiqueta">Temàtica:</label>
|
||||||
|
<div class="valors">
|
||||||
|
<div>
|
||||||
|
<input type="radio" id="tematica1" name="tematica" value="fantasia">
|
||||||
|
<label class="valor" for="tematica1">Fantasía</label>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<input type="radio" id="tematica2" name="tematica" value="ciencia-ficcion">
|
||||||
|
<label class="valor" for="tematica2">Ciencia ficción</label class="valor">
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<input type="radio" id="tematica3" name="tematica" value="terror">
|
||||||
|
<label class="valor" for="tematica3">Terror</label class="valor">
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<input type="radio" id="tematica4" name="tematica" value="aventura">
|
||||||
|
<label class="valor" for="tematica4">Aventura</label class="valor">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="campo">
|
||||||
|
<label class="etiqueta">Requisits:</label>
|
||||||
|
<div class="valors">
|
||||||
|
<div>
|
||||||
|
<input type="checkbox" id="requisit1" name="requisits" value="rato">
|
||||||
|
<label class="valor" for="requisit1">Rato</label class="valor">
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<input type="checkbox" id="requisit2" name="requisits" value="camara">
|
||||||
|
<label class="valor" for="requisit2">Camara</label class="valor">
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<input type="checkbox" id="requisit3" name="requisits" value="micro">
|
||||||
|
<label class="valor" for="requisit3">Micro</label class="valor">
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<input type="checkbox" id="requisit4" name="requisits" value="comandament">
|
||||||
|
<label class="valor" for="requisit4">Comandament</label class="valor">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="botones">
|
||||||
|
<input type="submit" value="Cercar">
|
||||||
|
<input type="reset" value="Esborrar">
|
||||||
|
<div class="campo">
|
||||||
|
</form>
|
||||||
|
</section>
|
||||||
|
</main>
|
||||||
|
<!-- peu de pàgina amb adreça, enllaç a política i enllaç a WhatsApp -->
|
||||||
|
<footer>
|
||||||
|
<div class="address">
|
||||||
|
<div class="addressTitle">Direcció</div>
|
||||||
|
<div>Ronda Frederic Mistral, 26</div>
|
||||||
|
<div>08304, Mataró </div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="enlaces">
|
||||||
|
<div class="politica">
|
||||||
|
<a href="politicaICC.html">Política de privacitat</a>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div class="mail"><a href="mailto:jocsmania@gmail.com">jocsmania@gmail.com</a></div class="mail">
|
||||||
|
<a href="https://www.whatsapp.com/?lang=es" target="_blank"><img class="red" src="img/whatsapp.png"></a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</footer class="pie">
|
||||||
|
<script src="js/script.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
435
ajeno/Projecte_ICC/Projecte_ICC/css/estils.css
Normal file
435
ajeno/Projecte_ICC/Projecte_ICC/css/estils.css
Normal file
@@ -0,0 +1,435 @@
|
|||||||
|
body {
|
||||||
|
background-image: url("../img/fondo.png");
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column; /* Apila los hijos (header, main, footer) verticalmente */
|
||||||
|
height: 100vh; /* Asegura que el cuerpo ocupe al menos toda la altura de la ventana */
|
||||||
|
margin: 0px;
|
||||||
|
}
|
||||||
|
|
||||||
|
header {
|
||||||
|
margin: 0px 10px;
|
||||||
|
min-height: 80px;
|
||||||
|
}
|
||||||
|
.navbar
|
||||||
|
{
|
||||||
|
position: fixed;
|
||||||
|
top: 1rem;
|
||||||
|
left: 1rem;
|
||||||
|
right: 1rem;
|
||||||
|
/*width: calc(100% - 2rem);*/
|
||||||
|
padding: 1rem 1.5rem;
|
||||||
|
border-radius: 20px;
|
||||||
|
z-index: 100;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.logoContainer a
|
||||||
|
{
|
||||||
|
color: white;
|
||||||
|
font-size: 1.125rem;
|
||||||
|
font-weight: bold;
|
||||||
|
margin-right: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 768px){
|
||||||
|
.logoContainer a { font-size: 1.25rem; }
|
||||||
|
|
||||||
|
.navbarLinks{
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-end;
|
||||||
|
align-items: center;
|
||||||
|
margin-right: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbarLinks li {
|
||||||
|
margin-left: 1.5rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.navbarLinks a
|
||||||
|
{
|
||||||
|
color: white;
|
||||||
|
transition: color 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbarLinks a:hover{
|
||||||
|
color: #00c3ff;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*=======Menu movil========*/
|
||||||
|
#menu-toggle {display: none;}
|
||||||
|
|
||||||
|
.hamburger-label
|
||||||
|
{
|
||||||
|
display: none;
|
||||||
|
font-size: 1.5rem;
|
||||||
|
color: white;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 767px){
|
||||||
|
.hamburger-label { display: block; }
|
||||||
|
|
||||||
|
.navbarLinks
|
||||||
|
{
|
||||||
|
position: absolute;
|
||||||
|
top: 6rem;
|
||||||
|
left: 1rem;
|
||||||
|
right: 1rem;
|
||||||
|
display: none;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
gap: 1.5rem;
|
||||||
|
padding: 2rem;
|
||||||
|
|
||||||
|
background: rgba(15, 23, 42, 0.95);
|
||||||
|
backdrop-filter: blur(20px);
|
||||||
|
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||||
|
border-radius: 20px;
|
||||||
|
box-shadow: 0 10px 30px rgba(0,0,0,0.5);
|
||||||
|
}
|
||||||
|
#menu-toggle:checked ~ .navbarLinks {
|
||||||
|
display: flex;
|
||||||
|
animation: fadeIn 0.4s ease forwards;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes fadeIn {
|
||||||
|
from { opacity: 0; transform: translateY(-10px); }
|
||||||
|
to { opacity: 1; transform: translateY(0); }
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
main {
|
||||||
|
/* CLAVE: Hace que MAIN ocupe todo el espacio sobrante, empujando el footer hacia abajo. */
|
||||||
|
flex-grow: 1;
|
||||||
|
overflow-x: hidden;
|
||||||
|
overflow-y: auto;
|
||||||
|
background-color: lightblue;
|
||||||
|
margin: 10px;
|
||||||
|
border:2px solid lightblue ;
|
||||||
|
border-radius: 10px;
|
||||||
|
color: midnightblue;
|
||||||
|
}
|
||||||
|
|
||||||
|
footer {
|
||||||
|
margin: 0px 10px;
|
||||||
|
min-height: 90px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-around;
|
||||||
|
color: white;
|
||||||
|
font-family: cursive;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.index main {
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cabecera {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
font-family: cursive;
|
||||||
|
}
|
||||||
|
|
||||||
|
.logo {
|
||||||
|
margin: 15px;
|
||||||
|
height: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.title {
|
||||||
|
color: plum;
|
||||||
|
font-size: 50px;
|
||||||
|
font-weight: bold;
|
||||||
|
text-align: left;
|
||||||
|
flex-grow: 1; /* Permite que el título ocupe el espacio disponible */
|
||||||
|
}
|
||||||
|
|
||||||
|
.menu {
|
||||||
|
min-width: 280px;
|
||||||
|
margin-right: 20px;
|
||||||
|
height: 15px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-evenly;
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: baseline;
|
||||||
|
gap: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hamburger {
|
||||||
|
display: none;
|
||||||
|
font-size: 25px;
|
||||||
|
color: white;
|
||||||
|
margin-right: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
color: white;
|
||||||
|
text-decoration: none;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.menu a {
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.red {
|
||||||
|
margin: 5px;
|
||||||
|
margin-left: auto;
|
||||||
|
height: 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.address {
|
||||||
|
margin: 5px;
|
||||||
|
margin-right:auto ;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.addressTitle {
|
||||||
|
font-weight: bold;
|
||||||
|
margin-bottom: 5px;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
.enlaces {
|
||||||
|
margin: 5px;
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
.politica {
|
||||||
|
margin-bottom: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mail {
|
||||||
|
margin-top: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.opinions {
|
||||||
|
margin-top: 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.opinion {
|
||||||
|
margin-left: 20px;
|
||||||
|
font-style: italic;
|
||||||
|
color: black;
|
||||||
|
}
|
||||||
|
|
||||||
|
.enllaç {
|
||||||
|
margin-left: 10%;
|
||||||
|
margin-bottom: 30px;
|
||||||
|
font-size: 30px;
|
||||||
|
font-family: cursive;
|
||||||
|
font-weight:bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.enllaç a {
|
||||||
|
color: midnightblue;
|
||||||
|
white-space: wrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.formulari {
|
||||||
|
margin-left: 20%;
|
||||||
|
margin-right: 20%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.formulari h1{
|
||||||
|
font-size: 40px;
|
||||||
|
font-family: cursive;
|
||||||
|
}
|
||||||
|
|
||||||
|
.formulari form {
|
||||||
|
background-color: steelblue;
|
||||||
|
border: 2px solid steelblue;
|
||||||
|
border-radius: 8px;
|
||||||
|
color: white;
|
||||||
|
padding: 40px;
|
||||||
|
min-width: 300px;
|
||||||
|
margin-top: 40px;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
font-size: 18px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.campo {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.valors {
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.campo .etiqueta {
|
||||||
|
margin-right: 15px;
|
||||||
|
font-weight: bold;
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
|
||||||
|
.campo .valor {
|
||||||
|
color: black;
|
||||||
|
}
|
||||||
|
|
||||||
|
.campo input {
|
||||||
|
margin-right: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.botones {
|
||||||
|
height: 15px;
|
||||||
|
margin-top: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.botones input{
|
||||||
|
margin-right: 10px;
|
||||||
|
background-color: skyblue;
|
||||||
|
border: skyblue;
|
||||||
|
border-radius: 2px;
|
||||||
|
padding: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type="text"], input[type="email"]{
|
||||||
|
width: 250px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.politica-text {
|
||||||
|
background-color: steelblue;
|
||||||
|
border: 2px solid steelblue;
|
||||||
|
border-radius: 8px;
|
||||||
|
color: white;
|
||||||
|
padding: 40px;
|
||||||
|
min-width: 300px;
|
||||||
|
margin-left: 10%;
|
||||||
|
margin-right: 10%;
|
||||||
|
margin-top: 40px;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.politica-text p {
|
||||||
|
color: black;
|
||||||
|
}
|
||||||
|
|
||||||
|
.joc-titol {
|
||||||
|
font-size: 40px;
|
||||||
|
font-family: cursive;
|
||||||
|
margin-left: 10%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.joc-targeta {
|
||||||
|
background-color: steelblue;
|
||||||
|
border: 2px solid steelblue;
|
||||||
|
border-radius: 8px;
|
||||||
|
color: white;
|
||||||
|
padding: 10px;
|
||||||
|
min-width: 400px;
|
||||||
|
margin-left: 10%;
|
||||||
|
margin-right: 10%;
|
||||||
|
margin-top: 10px;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
min-height: 330px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
}
|
||||||
|
|
||||||
|
.joc-targeta img {
|
||||||
|
height: 300px;
|
||||||
|
margin: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.joc-targeta .text {
|
||||||
|
color: black;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
header {
|
||||||
|
min-height: 50px;
|
||||||
|
}
|
||||||
|
|
||||||
|
footer {
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.menu {
|
||||||
|
display: none;
|
||||||
|
flex-direction: column;
|
||||||
|
position: absolute;
|
||||||
|
top: 50px;
|
||||||
|
left: 25%;
|
||||||
|
width: 50%;
|
||||||
|
background-color: skyblue;
|
||||||
|
text-align: center;
|
||||||
|
padding: 10px 0;
|
||||||
|
z-index: 1000;
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.menu a {
|
||||||
|
color: black;
|
||||||
|
}
|
||||||
|
|
||||||
|
.menu.active {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
.menu a {
|
||||||
|
padding: 15px;
|
||||||
|
display: block;
|
||||||
|
border-bottom: 1px solid rgba(255,255,255,0.3);
|
||||||
|
width: 100%;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hamburger {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.logo {
|
||||||
|
height: 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.title {
|
||||||
|
font-size: 30px;
|
||||||
|
flex-grow: 1; /* Permite que el título ocupe el espacio disponible */
|
||||||
|
}
|
||||||
|
|
||||||
|
.joc-titol {
|
||||||
|
font-size: 25px;
|
||||||
|
margin-left: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.joc-targeta {
|
||||||
|
min-width: 300px;
|
||||||
|
margin-left: 10px;
|
||||||
|
margin-right: 10px;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.enllaç {
|
||||||
|
margin-left: 10px;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
font-size: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.politica-text {
|
||||||
|
padding: 10px;
|
||||||
|
margin-left: 10px;
|
||||||
|
margin-right: 10px;
|
||||||
|
margin-top: 20px;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.formulari {
|
||||||
|
margin-left: 10px;
|
||||||
|
margin-right: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.formulari form {
|
||||||
|
padding: 40px;
|
||||||
|
min-width: 200px;
|
||||||
|
margin-top: 40px;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
font-size: 18px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
BIN
ajeno/Projecte_ICC/Projecte_ICC/img/assassins_creed_2.jpg
Normal file
BIN
ajeno/Projecte_ICC/Projecte_ICC/img/assassins_creed_2.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 77 KiB |
BIN
ajeno/Projecte_ICC/Projecte_ICC/img/battelfornt_2.jpg
Normal file
BIN
ajeno/Projecte_ICC/Projecte_ICC/img/battelfornt_2.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 112 KiB |
BIN
ajeno/Projecte_ICC/Projecte_ICC/img/elden_ring.jpg
Normal file
BIN
ajeno/Projecte_ICC/Projecte_ICC/img/elden_ring.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 638 KiB |
BIN
ajeno/Projecte_ICC/Projecte_ICC/img/far_cry_6.jpg
Normal file
BIN
ajeno/Projecte_ICC/Projecte_ICC/img/far_cry_6.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 74 KiB |
BIN
ajeno/Projecte_ICC/Projecte_ICC/img/fondo.png
Normal file
BIN
ajeno/Projecte_ICC/Projecte_ICC/img/fondo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 289 KiB |
BIN
ajeno/Projecte_ICC/Projecte_ICC/img/ghost_of_tsushima.jpg
Normal file
BIN
ajeno/Projecte_ICC/Projecte_ICC/img/ghost_of_tsushima.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 916 KiB |
BIN
ajeno/Projecte_ICC/Projecte_ICC/img/instagram.png
Normal file
BIN
ajeno/Projecte_ICC/Projecte_ICC/img/instagram.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 434 KiB |
BIN
ajeno/Projecte_ICC/Projecte_ICC/img/logo.png
Normal file
BIN
ajeno/Projecte_ICC/Projecte_ICC/img/logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 57 KiB |
BIN
ajeno/Projecte_ICC/Projecte_ICC/img/red_dead_redemption_2.jpg
Normal file
BIN
ajeno/Projecte_ICC/Projecte_ICC/img/red_dead_redemption_2.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 160 KiB |
BIN
ajeno/Projecte_ICC/Projecte_ICC/img/the_witcher_3.jpg
Normal file
BIN
ajeno/Projecte_ICC/Projecte_ICC/img/the_witcher_3.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 129 KiB |
BIN
ajeno/Projecte_ICC/Projecte_ICC/img/tiktok.png
Normal file
BIN
ajeno/Projecte_ICC/Projecte_ICC/img/tiktok.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
BIN
ajeno/Projecte_ICC/Projecte_ICC/img/whatsapp.png
Normal file
BIN
ajeno/Projecte_ICC/Projecte_ICC/img/whatsapp.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 102 KiB |
160
ajeno/Projecte_ICC/Projecte_ICC/indexICC.html
Normal file
160
ajeno/Projecte_ICC/Projecte_ICC/indexICC.html
Normal file
@@ -0,0 +1,160 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>JocsMania</title>
|
||||||
|
<link rel="icon" href="img/logo.png">
|
||||||
|
<link rel="stylesheet" href="css/estils.css">
|
||||||
|
<!-- Autor: Izan C. Cercós Data: 22/11/2025 Resum: Pàgina inicial amb el top tres dels videojocs més venuts amb algunes opinions i un enllaç a la pàgina de videojocs. -->
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
|
||||||
|
<!-- capçalera amb logo, títol, menú i enllaç a xarxes socials -->
|
||||||
|
|
||||||
|
<header>
|
||||||
|
<nav class="navbar">
|
||||||
|
<div class="logoContainer">
|
||||||
|
<a href="indexSAD.html"><i class="fa-solid fa-gamepad"></i></a>
|
||||||
|
<a href="indexSAD.html">JocsMania</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<input type="checkbox" id="menu-toggle">
|
||||||
|
|
||||||
|
<label for="menu-toggle" class="hamburger-label">
|
||||||
|
<i>☰</i>
|
||||||
|
</label>
|
||||||
|
|
||||||
|
<ul class="navbarLinks">
|
||||||
|
<li><a href="indexSAD.html">Inici</a></li>
|
||||||
|
<li><a href="videojocsSAD.html">Videojocs</a></li>
|
||||||
|
<li><a href="cercarSAD.html">Cercar</a></li>
|
||||||
|
<li><a href="socisSAD.html">Socis</a></li>
|
||||||
|
<li><a href="https://www.instagram.com/"><i class="fab fa-instagram"></i></a></li>
|
||||||
|
<li><a href="https://www.tiktok.com"><i class="fa-brands fa-tiktok"></i></a></li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
</header>
|
||||||
|
<!-- <header>
|
||||||
|
<div class="cabecera">
|
||||||
|
<a href="indexICC.html"><img class="logo" src="img/logo.png"></a>
|
||||||
|
<div class="title">JocsMania</div>
|
||||||
|
<div class="hamburger">☰</div>
|
||||||
|
<div class="menu">
|
||||||
|
<a href="indexICC.html">Inici</a>
|
||||||
|
<a href="videojocsICC.html">Videojocs</a>
|
||||||
|
<a href="cercarICC.html">Cercar</a>
|
||||||
|
<a href="registreICC.html">Socis</a>
|
||||||
|
</div>
|
||||||
|
<div class="socials">
|
||||||
|
<a href="https://www.tiktok.com/login" target="_blank"><img class="red" src="img/tiktok.png"></a>
|
||||||
|
<a href="https://www.instagram.com" target="_blank"><img class="red" src="img/instagram.png"></a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</header> -->
|
||||||
|
<!-- bloc principal amb top 3 de vendes amb opinions, i enllaç a la pàgina de videojocs -->
|
||||||
|
<main>
|
||||||
|
<section class="opinions">
|
||||||
|
<h1 class="joc-titol">Top Vendes</h1>
|
||||||
|
<!-- targeta de un videojoc amb imatge, títol i opinions -->
|
||||||
|
<div class="joc-targeta">
|
||||||
|
<div>
|
||||||
|
<!-- ancla amb enllaç a la página oficial amb imatge com contingut -->
|
||||||
|
<a href="https://www.ubisoft.com/es-es/game/assassins-creed/assassins-creed-II" target="_blank">
|
||||||
|
<img src="img/assassins_creed_2.jpg" alt="no funciona">
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h2>Assassin's Creed II</h2>
|
||||||
|
<div class="text">
|
||||||
|
<div>
|
||||||
|
<b>Mari Carmen Sanchez ⭐⭐⭐⭐⭐</b>
|
||||||
|
<p class="opinion">
|
||||||
|
Assassin's Creed II és un joc que segueix sent excel·lent fins i tot avui. A diferència del primer, que tenia bones idees, però era extremadament repetitiu, aquest joc millora tot i fa que sigui molt més divertit.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<b>Feliciano Pérez. ⭐⭐⭐⭐☆</b>
|
||||||
|
<p class="opinion">
|
||||||
|
Un clàssic d'Ubisoft, dels seus millors jocs tot i haver envellit regular. A dia d'avui segueix sense tenir èxits, quan a PS3 sí que els tenies ia més t'obliga a tenir l'Uplay obert en segon pla trencant les boles. En fi, francesos.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="joc-targeta">
|
||||||
|
<div>
|
||||||
|
<a href="https://www.ea.com/es/games/starwars/star-wars-battlefront-2" target="_blank">
|
||||||
|
<img src="img/battelfornt_2.jpg" alt="no funciona">
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h2>Battlefront II</h2>
|
||||||
|
<div class="text">
|
||||||
|
<div>
|
||||||
|
<b>Isabel la Catolica ⭐⭐⭐☆☆</b>
|
||||||
|
<p class="opinion">
|
||||||
|
És un fàstic jugar-lo actualment, és ple de cheaters i de gent amb egos alts que es creuen professionals en un joc que no té competitiu.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<b>Jordi Tarridas ⭐⭐⭐⭐⭐</b>
|
||||||
|
<p class="opinion">
|
||||||
|
Aquest joc és encara viu i té tot el sabor de star wars. A nivell gràfic encara es defensa bé i dóna unes partides molt divertides. Els poders jedi estan integrats magnificament i la possibilitat de fer servir una gran quantitat de vehicles i escenaris ho fa un joc gairebé atemporal.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="joc-targeta">
|
||||||
|
<div>
|
||||||
|
<a href="https://www.rockstargames.com/es/reddeadredemption2" target="_blank">
|
||||||
|
<img src="img/red_dead_redemption_2.jpg" alt="no funciona">
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h2>Red Dead Redemption II</h2>
|
||||||
|
<div class="text">
|
||||||
|
<div>
|
||||||
|
<b>Miguel Ángel Hornos ⭐⭐⭐⭐⭐</b>
|
||||||
|
<p class="opinion">
|
||||||
|
Red Dead Redemption 2 (RDR2) no és un videojoc; és un testament, una crònica èpica i un drama romàntic disfressat de western de món obert. Rockstar Games ha aconseguit el que semblava impossible: superar el seu propi estàndard d'excel·lència narrativa i tècnica, lliurant una obra que no només domina el seu gènere, sinó que estableix un nou pinacle d'immersió a la indústria.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<b>Nicolás Quesada ⭐⭐⭐⭐⭐</b>
|
||||||
|
<p class="opinion">
|
||||||
|
Belleza, el mejor juego que he jugado en mi vida, si mil veces lo juego, mil veces lo disfruto.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<!-- enllaç a la pàgina de videojocs -->
|
||||||
|
<section class="enllaç">
|
||||||
|
<a href="videojocsICC.html">Si vols conèixer tots els videojocs disponibles ...</a>
|
||||||
|
</section>
|
||||||
|
</main>
|
||||||
|
<!-- peu de pàgina amb adreça, enllaç a política i enllaç a WhatsApp -->
|
||||||
|
<footer>
|
||||||
|
<div class="address">
|
||||||
|
<div class="addressTitle">Direcció</div>
|
||||||
|
<div>Ronda Frederic Mistral, 26</div>
|
||||||
|
<div>08304, Mataró </div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="enlaces">
|
||||||
|
<div class="politica">
|
||||||
|
<a href="politicaICC.html">Política de privacitat</a>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div class="mail"><a href="mailto:jocsmania@gmail.com">jocsmania@gmail.com</a></div class="mail">
|
||||||
|
<a href="https://www.whatsapp.com/?lang=es" target="_blank"><img class="red" src="img/whatsapp.png"></a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</footer class="pie">
|
||||||
|
<script src="js/script.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
10
ajeno/Projecte_ICC/Projecte_ICC/js/script.txt
Normal file
10
ajeno/Projecte_ICC/Projecte_ICC/js/script.txt
Normal file
@@ -0,0 +1,10 @@
|
|||||||
|
document.addEventListener('DOMContentLoaded', () => {
|
||||||
|
const hamburger = document.querySelector('.hamburger');
|
||||||
|
const menu = document.querySelector('.menu');
|
||||||
|
|
||||||
|
if (hamburger && menu) {
|
||||||
|
hamburger.addEventListener('click', () => {
|
||||||
|
menu.classList.toggle('active');
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
93
ajeno/Projecte_ICC/Projecte_ICC/politicaICC.html
Normal file
93
ajeno/Projecte_ICC/Projecte_ICC/politicaICC.html
Normal file
@@ -0,0 +1,93 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>JocsMania Política</title>
|
||||||
|
<link rel="icon" href="img/logo.png">
|
||||||
|
<link rel="stylesheet" href="css/estils.css">
|
||||||
|
<!-- Autor: Izan C. Cercós Data: 22/11/2025 Resum: Pàgina amb la política de privacitat del nostre lloc.-->
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<!-- capçalera amb logo, títol, menú i enllaç a xarxes socials -->
|
||||||
|
<header>
|
||||||
|
<div class="cabecera">
|
||||||
|
<a href="indexICC.html"><img class="logo" src="img/logo.png"></a>
|
||||||
|
<div class="title">JocsMania</div>
|
||||||
|
<div class="hamburger">☰</div>
|
||||||
|
<div class="menu">
|
||||||
|
<a href="indexICC.html">Inici</a>
|
||||||
|
<a href="videojocsICC.html">Videojocs</a>
|
||||||
|
<a href="cercarICC.html">Cercar</a>
|
||||||
|
<a href="registreICC.html">Socis</a>
|
||||||
|
</div>
|
||||||
|
<div class="socials">
|
||||||
|
<a href="https://www.tiktok.com/login" target="_blank"><img class="red" src="img/tiktok.png"></a>
|
||||||
|
<a href="https://www.instagram.com" target="_blank"><img class="red" src="img/instagram.png"></a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
<!-- bloc principal amb la política de privacitat -->
|
||||||
|
<main>
|
||||||
|
<section>
|
||||||
|
<div class="politica-text">
|
||||||
|
<h1>POLÍTICA DE PRIVACITAT</h1>
|
||||||
|
<p>
|
||||||
|
Aquesta Política de Privadesa estableix els termes en què JocsMania utilitza i protegeix la informació proporcionada pels usuaris en el moment d'utilitzar el vostre lloc web. Aquesta companyia està compromesa amb la seguretat de les dades dels usuaris. Quan us demanem omplir els camps d'informació personal amb la qual pugueu ser identificat, ho fem assegurant que només s'emprarà d'acord amb els termes d'aquest document. No obstant això, aquesta Política de Privadesa pot canviar amb el temps o ser actualitzada pel que us recomanem i emfatitzem revisar contínuament aquesta pàgina per assegurar-se que està d'acord amb aquests canvis.
|
||||||
|
</p>
|
||||||
|
<h2>Informació que és recollida</h2>
|
||||||
|
<p>
|
||||||
|
El nostre lloc web podrà recollir informació personal per exemple: Nom, informació de contacte com la vostra adreça de correu electrònic i informació demogràfica. Així mateix quan sigui necessari podrà ser requerida informació específica per processar alguna comanda o fer un lliurament o facturació.
|
||||||
|
</p>
|
||||||
|
<h2>Ús de la informació recollida</h2>
|
||||||
|
<p>
|
||||||
|
El nostre lloc web empra la informació per tal de proporcionar el millor servei possible, particularment per mantenir un registre d'usuaris, de comandes en cas que apliqui, i millorar els nostres productes i serveis. És possible que siguin enviats correus electrònics periòdicament a través del nostre lloc amb ofertes especials, nous productes i altra informació publicitària que considerem rellevant per a vostè o que pugui oferir algun benefici, aquests correus electrònics seran enviats a l'adreça que vostè proporcioni i podran ser cancel·lats en qualsevol moment.
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
JocsMania està altament compromès per complir amb el compromís de mantenir la vostra informació segura. Fem servir els sistemes més avançats i els actualitzem constantment per assegurar-nos que no hi hagi cap accés no autoritzat.
|
||||||
|
</p>
|
||||||
|
<h2>Galetes</h2>
|
||||||
|
<p>
|
||||||
|
Una galeta es refereix a un fitxer que és enviat amb la finalitat de sol·licitar permís per emmagatzemar-se al vostre ordinador, en acceptar aquest fitxer es crea i la galeta serveix llavors per tenir informació respecte al trànsit web, i també facilita les futures visites a una web recurrent. Una altra funció que tenen les cookies és que amb elles les web et poden reconèixer individualment i per tant oferir-te el millor servei personalitzat de la seva web.
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
El nostre lloc web empra les galetes per poder identificar les pàgines que són visitades i la seva freqüència. Aquesta informació és emprada únicament per a anàlisi estadística i després la informació s'elimina de manera permanent. Vostè pot eliminar les galetes en qualsevol moment des del seu ordinador. No obstant això les cookies ajuden a proporcionar un millor servei dels llocs web, estàs no donen accés a informació del seu ordinador ni de vostè, llevat que vostè així ho vulgui i la proporcioni directament notícies. Vostè pot acceptar o negar l'ús de galetes, però la majoria de navegadors accepten galetes automàticament ja que serveix per tenir un millor servei web. També podeu canviar la configuració del vostre ordinador per declinar les cookies. Si es declinen és possible que no pugueu utilitzar alguns dels nostres serveis.
|
||||||
|
</p>
|
||||||
|
<h2>Enllaços a Tercers</h2>
|
||||||
|
<p>
|
||||||
|
Aquest lloc web pogués contenir en llaços altres llocs que poguessin ser del seu interès. Quan vostè de clic en aquests enllaços i abandoni la nostra pàgina, ja no tenim control sobre el lloc al qual és redirigit i per tant no som responsables dels termes o privadesa ni de la protecció de les seves dades en aquests altres llocs tercers. Aquests llocs estan subjectes a les seves pròpies polítiques de privadesa per la qual cosa és recomanable que els consulteu per confirmar que vostè està d'acord amb aquestes.
|
||||||
|
</p>
|
||||||
|
<h2>Control de la vostra informació personal</h2>
|
||||||
|
<p>
|
||||||
|
En qualsevol moment vostè pot restringir la recopilació o lús de la informació personal que és proporcionada al nostre lloc web. Cada vegada que se us demani omplir un formulari, com el d'alta d'usuari, podeu marcar o desmarcar l'opció de rebre informació per correu electrònic. En cas que hagueu marcat l'opció de rebre el nostre butlletí o publicitat podeu cancel·lar-la en qualsevol moment.
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
Aquesta companyia no vendrà, cedirà ni distribuirà la informació personal que és recopilada sense el seu consentiment, llevat que sigui requerit per un jutge amb un ordre judicial.
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
JocsMania Es reserva el dret de canviar els termes de la present Política de Privadesa en qualsevol moment.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</main>
|
||||||
|
<!-- peu de pàgina amb adreça, enllaç a política i enllaç a WhatsApp -->
|
||||||
|
<footer>
|
||||||
|
<div class="address">
|
||||||
|
<div class="addressTitle">Direcció</div>
|
||||||
|
<div>Ronda Frederic Mistral, 26</div>
|
||||||
|
<div>08304, Mataró </div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="enlaces">
|
||||||
|
<div class="politica">
|
||||||
|
<a href="politicaICC.html">Política de privacitat</a>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div class="mail"><a href="mailto:jocsmania@gmail.com">jocsmania@gmail.com</a></div class="mail">
|
||||||
|
<a href="https://www.whatsapp.com/?lang=es" target="_blank"><img class="red" src="img/whatsapp.png"></a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</footer class="pie">
|
||||||
|
<script src="js/script.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
82
ajeno/Projecte_ICC/Projecte_ICC/registreICC.html
Normal file
82
ajeno/Projecte_ICC/Projecte_ICC/registreICC.html
Normal file
@@ -0,0 +1,82 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>JocsMania Socis</title>
|
||||||
|
<link rel="icon" href="img/logo.png">
|
||||||
|
<link rel="stylesheet" href="css/estils.css">
|
||||||
|
<!-- Autor: Izan C. Cercós Data: 22/11/2025 Resum: Pàgina amb formulari per a registrar-se a la pàgina com a soci.-->
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<!-- capçalera amb logo, títol, menú i enllaç a xarxes socials -->
|
||||||
|
<header>
|
||||||
|
<div class="cabecera">
|
||||||
|
<a href="indexICC.html"><img class="logo" src="img/logo.png"></a>
|
||||||
|
<div class="title">JocsMania</div>
|
||||||
|
<div class="hamburger">☰</div>
|
||||||
|
<div class="menu">
|
||||||
|
<a href="indexICC.html">Inici</a>
|
||||||
|
<a href="videojocsICC.html">Videojocs</a>
|
||||||
|
<a href="cercarICC.html">Cercar</a>
|
||||||
|
<a href="registreICC.html">Socis</a>
|
||||||
|
</div>
|
||||||
|
<div class="socials">
|
||||||
|
<a href="https://www.tiktok.com/login" target="_blank"><img class="red" src="img/tiktok.png"></a>
|
||||||
|
<a href="https://www.instagram.com" target="_blank"><img class="red" src="img/instagram.png"></a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
<!-- bloc principal amb formulari per a registrar-se a la pàgina com a soci -->
|
||||||
|
<main>
|
||||||
|
<section class="formulari">
|
||||||
|
<h1>Fes-te soci</h1>
|
||||||
|
<form action="videojocsICC.html">
|
||||||
|
<div class="campo">
|
||||||
|
<label class="etiqueta" for="nom">Nom:</label>
|
||||||
|
<input type="text" id="nom" name="nom">
|
||||||
|
</div>
|
||||||
|
<div class="campo">
|
||||||
|
<label class="etiqueta" for="cognoms">Cognoms:</label>
|
||||||
|
<input type="text" id="cognoms" name="cognoms">
|
||||||
|
</div>
|
||||||
|
<div class="campo">
|
||||||
|
<label class="etiqueta" for="dni">DNI:</label>
|
||||||
|
<input type="text" id="dni" name="dni">
|
||||||
|
</div>
|
||||||
|
<div class="campo">
|
||||||
|
<label class="etiqueta" for="usuari">Usuari:</label>
|
||||||
|
<input type="text" id="usuari" name="usuari">
|
||||||
|
</div>
|
||||||
|
<div class="campo">
|
||||||
|
<label class="etiqueta" for="contrasenya">Contrasenya:</label>
|
||||||
|
<input type="password" id="contrasenya" name="contrasenya">
|
||||||
|
</div>
|
||||||
|
<div class="botones">
|
||||||
|
<input type="submit" value="Registre">
|
||||||
|
<input type="reset" value="Esborrar">
|
||||||
|
<div class="campo">
|
||||||
|
</form>
|
||||||
|
</section>
|
||||||
|
</main>
|
||||||
|
<!-- peu de pàgina amb adreça, enllaç a política i enllaç a WhatsApp -->
|
||||||
|
<footer>
|
||||||
|
<div class="address">
|
||||||
|
<div class="addressTitle">Direcció</div>
|
||||||
|
<div>Ronda Frederic Mistral, 26</div>
|
||||||
|
<div>08304, Mataró </div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="enlaces">
|
||||||
|
<div class="politica">
|
||||||
|
<a href="politicaICC.html">Política de privacitat</a>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div class="mail"><a href="mailto:jocsmania@gmail.com">jocsmania@gmail.com</a></div class="mail">
|
||||||
|
<a href="https://www.whatsapp.com/?lang=es" target="_blank"><img class="red" src="img/whatsapp.png"></a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</footer class="pie">
|
||||||
|
<script src="js/script.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
139
ajeno/Projecte_ICC/Projecte_ICC/videojocsICC.html
Normal file
139
ajeno/Projecte_ICC/Projecte_ICC/videojocsICC.html
Normal file
@@ -0,0 +1,139 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>JocsMania Videojocs</title>
|
||||||
|
<link rel="icon" href="img/logo.png">
|
||||||
|
<link rel="stylesheet" href="css/estils.css">
|
||||||
|
<!-- Autor: Izan C. Cercós Data: 22/11/2025 Resum: Pàgina amb el llistat de tots els nostres videojocs amb imatge títol i breu descripció amb un enllaç a la pàgina oficial. -->
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<!-- capçalera amb logo, títol, menú i enllaç a xarxes socials -->
|
||||||
|
<header>
|
||||||
|
<div class="cabecera">
|
||||||
|
<a href="indexICC.html"><img class="logo" src="img/logo.png"></a>
|
||||||
|
<div class="title">JocsMania</div>
|
||||||
|
<div class="hamburger">☰</div>
|
||||||
|
<div class="menu">
|
||||||
|
<a href="indexICC.html">Inici</a>
|
||||||
|
<a href="videojocsICC.html">Videojocs</a>
|
||||||
|
<a href="cercarICC.html">Cercar</a>
|
||||||
|
<a href="registreICC.html">Socis</a>
|
||||||
|
</div>
|
||||||
|
<div class="socials">
|
||||||
|
<a href="https://www.tiktok.com/login" target="_blank"><img class="red" src="img/tiktok.png"></a>
|
||||||
|
<a href="https://www.instagram.com" target="_blank"><img class="red" src="img/instagram.png"></a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
<!-- bloc principal amb llista de tots els videojocs amb imatge, títol i breu descripció -->
|
||||||
|
<main>
|
||||||
|
<h1 class="joc-titol">Videojocs</h1>
|
||||||
|
<!-- targeta de un videojoc amb imatge, títol i resum -->
|
||||||
|
<section class="joc-targeta">
|
||||||
|
<div>
|
||||||
|
<!-- ancla amb enllaç a la página oficial amb imatge com contingut -->
|
||||||
|
<a href="https://www.ubisoft.com/es-es/game/assassins-creed/assassins-creed-II" target="_blank">
|
||||||
|
<img src="img/assassins_creed_2.jpg" alt="no funciona">
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h2>Assassin's Creed II</h2>
|
||||||
|
<div class="text">
|
||||||
|
Assassin's Creed II presenta Ezio, un nou Assassin que continua el llegat letal dels seus avantpassats. Enfronta't a una història èpica de poder i corrupció en què poliràs les teves arts d'Assassin, i empunyaràs armes i instruments dissenyats pel mateix Leonardo da Vinci en aquesta continuació de la sèrie apassionant i mortal.
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<section class="joc-targeta">
|
||||||
|
<div>
|
||||||
|
<a href="https://www.ea.com/es/games/starwars/star-wars-battlefront-2" target="_blank">
|
||||||
|
<img src="img/battelfornt_2.jpg" alt="no funciona">
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h2>Battlefront II</h2>
|
||||||
|
<div class="text">
|
||||||
|
Embárcate en un viaje infinito de STAR WARS™ con la franquicia de videojuegos de STAR WARS™ más exitosa de todos los tiempos. Disfruta de exuberantes campos de batalla multijugador de las tres épocas: precuela, clásica y nueva; o álzate como un nuevo héroe y descubre una apasionante historia para un jugador que se desarrolla a lo largo de treinta años. Personaliza y mejora tus cazas estelares, héroes y soldados, dotados de habilidades exclusivas que puedes aprovechar en combate. Monta en tauntauns o pilota tanques y speeders. Usa la Fuerza para enfrentarte a personajes emblemáticos como Kylo Ren, Darth Maul o Han Solo, y participa en una experiencia de juego inspirada en cuarenta años de películas de Star Wars.
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<section class="joc-targeta">
|
||||||
|
<div>
|
||||||
|
<a href="https://www.rockstargames.com/es/reddeadredemption2" target="_blank">
|
||||||
|
<img src="img/red_dead_redemption_2.jpg" alt="no funciona">
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h2>Red Dead Redemption II</h2>
|
||||||
|
<div class="text">
|
||||||
|
América, 1899. El ocaso del Salvaje Oeste ha comenzado. Tras un desastroso atraco fallido en la ciudad de Blackwater, Arthur Morgan y la banda de Van der Linde se ven obligados a huir. Con agentes federales y los mejores cazarrecompensas de la nación pisándoles los talones, la banda deberá atracar, robar y luchar para sobrevivir en su camino por el escabroso territorio del corazón de América. Mientras las divisiones internas aumentan y amenazan con separarlos a todos, Arthur deberá elegir entre sus propios ideales y la lealtad a la banda que lo vio crecer.
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<section class="joc-targeta">
|
||||||
|
<div>
|
||||||
|
<a href="https://www.playstation.com/es-es/games/ghost-of-tsushima/pc/" target="_blank">
|
||||||
|
<img src="img/ghost_of_tsushima.jpg" alt="no funciona">
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h2>Ghost of Tsushima</h2>
|
||||||
|
<div class="text">
|
||||||
|
Ambientada en 1274 en la isla epónima de Tsushima, el juego gira en torno al samurái Jin Sakai (Daisuke Tsuji), uno de los pocos supervivientes de la primera invasión mongola a Japón. Jin tendrá que dominar un nuevo estilo de lucha, el camino del Fantasma, para derrotar a las fuerzas mongolas y luchar por la libertad de su pueblo y de la isla. Jin se ve envuelto en un conflicto moral, ya que según el estricto código samurái (Bushido) luchar sigilosamente es deshonroso. Tampoco recibe la aprobación de su tío, el señor de la isla de Tsushima, que es una figura paterna para él.
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<section class="joc-targeta">
|
||||||
|
<div>
|
||||||
|
<a href="https://es.bandainamcoent.eu/elden-ring/elden-ring" target="_blank">
|
||||||
|
<img src="img/elden_ring.jpg" alt="no funciona">
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h2>Elden Ring</h2>
|
||||||
|
<div class="text">
|
||||||
|
La Orden Dorada está rota.
|
||||||
|
Álzate, Sinluz, y que la gracia te guíe para abrazar el poder del Círculo de Elden y encumbrarte como señor del Círculo en las Tierras Intermedias.
|
||||||
|
En las Tierras Intermedias gobernadas por la Reina Márika, la Eterna, el Círculo de Elden, origen del Árbol Áureo, ha sido destruido.
|
||||||
|
Los descendientes de Márika, todos semidioses, reclamaron los fragmentos del Círculo de Elden conocidos como Grandes Runas. Fue entonces cuando la demencial corrupción de su renovada fuerza provocó una guerra: la Devastación.
|
||||||
|
Una guerra que supuso el abandono de la Voluntad Mayor. Y ahora, la gracia que nos guía recaerá sobre el Sinluz desdeñado por la gracia del oro y exiliado de las Tierras Intermedias. Tú que has muerto, pero vives, con tu gracia tiempo ha perdida, recorre la senda hacia las Tierras Intermedias más allá del neblinoso mar para postrarte ante el Círculo de Elden.
|
||||||
|
Y conviértete en el señor del Círculo.
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<section class="joc-targeta">
|
||||||
|
<div>
|
||||||
|
<a href="https://www.thewitcher.com/ge/es/witcher3" target="_blank">
|
||||||
|
<img src="img/the_witcher_3.jpg" alt="no funciona">
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h2>The Witcher 3: Wild Hunt</h2>
|
||||||
|
<div class="text">
|
||||||
|
Explora un siniestro mundo abierto de fantasía en la piel del cazador de monstruos Geralt de Rivia en The Witcher 3: Wild Hunt, uno de los juegos de rol más aclamados de todos los tiempos. Desde los turbios cenagales de Velen hasta la bulliciosa ciudad de Novigrado y las animadas islas Skellige, Geralt debe encontrar a su hija adoptiva Ciri antes de que los espectros de la cacería salvaje se hagan con su increíble poder.
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</main>
|
||||||
|
<!-- peu de pàgina amb adreça, enllaç a política i enllaç a WhatsApp -->
|
||||||
|
<footer>
|
||||||
|
<div class="address">
|
||||||
|
<div class="addressTitle">Direcció</div>
|
||||||
|
<div>Ronda Frederic Mistral, 26</div>
|
||||||
|
<div>08304, Mataró </div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="enlaces">
|
||||||
|
<div class="politica">
|
||||||
|
<a href="politicaICC.html">Política de privacitat</a>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div class="mail"><a href="mailto:jocsmania@gmail.com">jocsmania@gmail.com</a></div class="mail">
|
||||||
|
<a href="https://www.whatsapp.com/?lang=es" target="_blank"><img class="red" src="img/whatsapp.png"></a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</footer class="pie">
|
||||||
|
<script src="js/script.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@@ -644,3 +644,53 @@ body
|
|||||||
box-shadow: 0 0 15px rgba(0, 195, 255, 0.2);
|
box-shadow: 0 0 15px rgba(0, 195, 255, 0.2);
|
||||||
background: rgba(15, 23, 42, 0.9);
|
background: rgba(15, 23, 42, 0.9);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/*==============Pagina cercar============*/
|
||||||
|
.options-grid
|
||||||
|
{
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 1fr 1fr;
|
||||||
|
gap: 0.5rem;
|
||||||
|
margin-top: 0.5rem;
|
||||||
|
}
|
||||||
|
.option-label
|
||||||
|
{
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
color: #cbd5e1;
|
||||||
|
font-size: 0.9rem;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.option-label input
|
||||||
|
{
|
||||||
|
margin-right: 8px;
|
||||||
|
accent-color: #00c3ff;
|
||||||
|
}
|
||||||
|
.buttons-container
|
||||||
|
{
|
||||||
|
display: flex;
|
||||||
|
gap:1rem;
|
||||||
|
margin-top: 2rem;
|
||||||
|
}
|
||||||
|
.btn-reset
|
||||||
|
{
|
||||||
|
border-color: #ff4757;
|
||||||
|
color: #ff4757;
|
||||||
|
}
|
||||||
|
.btn-reset:hover
|
||||||
|
{
|
||||||
|
background: #ff4757;
|
||||||
|
color: white;
|
||||||
|
box-shadow: 0 0 20px rgba(255, 71, 87, 0.6);
|
||||||
|
}
|
||||||
|
|
||||||
|
output
|
||||||
|
{
|
||||||
|
display: block;
|
||||||
|
text-align: center;
|
||||||
|
color: #00c3ff;
|
||||||
|
font-weight: bold;
|
||||||
|
margin-top: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -35,11 +35,65 @@
|
|||||||
</header>
|
</header>
|
||||||
|
|
||||||
<main class="content">
|
<main class="content">
|
||||||
<div class="main-container">
|
<section>
|
||||||
|
<h2 class="section-title">Cercar <span class="highlight-neon">Videojocs</span></h2>
|
||||||
|
|
||||||
|
<div class="register-wrapper">
|
||||||
|
<div class="glass-form-card">
|
||||||
|
<form action="indexSAD.html" method="get">
|
||||||
|
|
||||||
|
<div class="form-group">
|
||||||
|
<label for="edat" class="form-label">Edat del jugador</label>
|
||||||
|
<input type="range" id="edat" name="edat" class="form-input" min="3" max="18" oninput="this.nextElementSibling.value = this.value + ' anys'">
|
||||||
|
<output>12 anys</output>
|
||||||
</div>
|
</div>
|
||||||
</main>
|
|
||||||
|
|
||||||
|
<div class="form-group">
|
||||||
|
<label class="form-label">Temàtica</label>
|
||||||
|
<div class="options-grid">
|
||||||
|
<label class="option-label">
|
||||||
|
<input type="radio" name="tematica" value="accio"> Acció
|
||||||
|
</label>
|
||||||
|
<label class="option-label">
|
||||||
|
<input type="radio" name="tematica" value="rpg"> RPG
|
||||||
|
</label>
|
||||||
|
<label class="option-label">
|
||||||
|
<input type="radio" name="tematica" value="esports"> Esports
|
||||||
|
</label>
|
||||||
|
<label class="option-label">
|
||||||
|
<input type="radio" name="tematica" value="accio"> Aventura
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="form-group">
|
||||||
|
<label class="form-label">Requisits de maquinari</label>
|
||||||
|
<div class="options-grid">
|
||||||
|
<label class="option-label">
|
||||||
|
<input type="checkbox" name="req" value="8gb_ram"> 8GB RAM
|
||||||
|
</label>
|
||||||
|
<label class="option-label">
|
||||||
|
<input type="checkbox" name="req" value="8gb_ram"> GPU Dedicada
|
||||||
|
</label>
|
||||||
|
<label class="option-label">
|
||||||
|
<input type="checkbox" name="req" value="8gb_ram"> Disc SSD
|
||||||
|
</label>
|
||||||
|
<label class="option-label">
|
||||||
|
<input type="checkbox" name="req" value="8gb_ram"> Windows 11
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="buttons-container">
|
||||||
|
<input type="reset" value="Esborrar" class="btn-neon btn-reset">
|
||||||
|
<input type="submit" name="Cercar" class="btn-neon">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</main>
|
||||||
|
|
||||||
<footer class="footer">
|
<footer class="footer">
|
||||||
<div class="container">
|
<div class="container">
|
||||||
|
|||||||
Reference in New Issue
Block a user