Compare commits
12 Commits
bdcefc6c03
...
main
| Author | SHA1 | Date | |
|---|---|---|---|
| b9d16cd92b | |||
|
7ecd35ca73 | ||
| ab23e46e38 | |||
| 42739078b8 | |||
| df2eb1072d | |||
| bd3d6ff21d | |||
| 330f953cc4 | |||
| 1d86f90e6f | |||
| 0a4b6536a9 | |||
| 2704f3832d | |||
| a852a31629 | |||
| 874eea708c |
|
Before Width: | Height: | Size: 21 KiB After Width: | Height: | Size: 21 KiB |
|
Before Width: | Height: | Size: 21 KiB After Width: | Height: | Size: 21 KiB |
|
Before Width: | Height: | Size: 59 KiB After Width: | Height: | Size: 59 KiB |
|
Before Width: | Height: | Size: 159 KiB After Width: | Height: | Size: 159 KiB |
|
Before Width: | Height: | Size: 91 KiB After Width: | Height: | Size: 91 KiB |
|
Before Width: | Height: | Size: 162 KiB After Width: | Height: | Size: 162 KiB |
|
Before Width: | Height: | Size: 116 KiB After Width: | Height: | Size: 116 KiB |
|
Before Width: | Height: | Size: 150 KiB After Width: | Height: | Size: 150 KiB |
|
Before Width: | Height: | Size: 190 KiB After Width: | Height: | Size: 190 KiB |
|
Before Width: | Height: | Size: 295 KiB After Width: | Height: | Size: 295 KiB |
|
Before Width: | Height: | Size: 226 KiB After Width: | Height: | Size: 226 KiB |
|
Before Width: | Height: | Size: 194 KiB After Width: | Height: | Size: 194 KiB |
|
Before Width: | Height: | Size: 155 KiB After Width: | Height: | Size: 155 KiB |
|
Before Width: | Height: | Size: 174 KiB After Width: | Height: | Size: 174 KiB |
|
Before Width: | Height: | Size: 602 KiB After Width: | Height: | Size: 602 KiB |
|
Before Width: | Height: | Size: 146 KiB After Width: | Height: | Size: 146 KiB |
|
Before Width: | Height: | Size: 3.9 MiB After Width: | Height: | Size: 3.9 MiB |
|
Before Width: | Height: | Size: 58 KiB After Width: | Height: | Size: 58 KiB |
|
Before Width: | Height: | Size: 8.7 KiB After Width: | Height: | Size: 8.7 KiB |
|
Before Width: | Height: | Size: 25 KiB After Width: | Height: | Size: 25 KiB |
|
Before Width: | Height: | Size: 28 KiB After Width: | Height: | Size: 28 KiB |
|
Before Width: | Height: | Size: 174 KiB After Width: | Height: | Size: 174 KiB |
|
Before Width: | Height: | Size: 955 B After Width: | Height: | Size: 955 B |
|
Before Width: | Height: | Size: 9.2 KiB After Width: | Height: | Size: 9.2 KiB |
|
Before Width: | Height: | Size: 8.3 KiB After Width: | Height: | Size: 8.3 KiB |
|
Before Width: | Height: | Size: 9.3 KiB After Width: | Height: | Size: 9.3 KiB |
|
Before Width: | Height: | Size: 9.1 KiB After Width: | Height: | Size: 9.1 KiB |
|
Before Width: | Height: | Size: 15 KiB After Width: | Height: | Size: 15 KiB |
|
Before Width: | Height: | Size: 13 KiB After Width: | Height: | Size: 13 KiB |
|
Before Width: | Height: | Size: 19 KiB After Width: | Height: | Size: 19 KiB |
|
Before Width: | Height: | Size: 13 KiB After Width: | Height: | Size: 13 KiB |
|
Before Width: | Height: | Size: 7.0 KiB After Width: | Height: | Size: 7.0 KiB |
|
Before Width: | Height: | Size: 362 KiB After Width: | Height: | Size: 362 KiB |
@@ -10,6 +10,98 @@ 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. */
|
||||
|
Before Width: | Height: | Size: 77 KiB After Width: | Height: | Size: 77 KiB |
|
Before Width: | Height: | Size: 112 KiB After Width: | Height: | Size: 112 KiB |
|
Before Width: | Height: | Size: 638 KiB After Width: | Height: | Size: 638 KiB |
|
Before Width: | Height: | Size: 74 KiB After Width: | Height: | Size: 74 KiB |
|
Before Width: | Height: | Size: 289 KiB After Width: | Height: | Size: 289 KiB |
|
Before Width: | Height: | Size: 916 KiB After Width: | Height: | Size: 916 KiB |
|
Before Width: | Height: | Size: 434 KiB After Width: | Height: | Size: 434 KiB |
|
Before Width: | Height: | Size: 57 KiB After Width: | Height: | Size: 57 KiB |
|
Before Width: | Height: | Size: 160 KiB After Width: | Height: | Size: 160 KiB |
|
Before Width: | Height: | Size: 129 KiB After Width: | Height: | Size: 129 KiB |
|
Before Width: | Height: | Size: 12 KiB After Width: | Height: | Size: 12 KiB |
|
Before Width: | Height: | Size: 102 KiB After Width: | Height: | Size: 102 KiB |
@@ -9,8 +9,34 @@
|
||||
<!-- 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>
|
||||
@@ -26,7 +52,7 @@
|
||||
<a href="https://www.instagram.com" target="_blank"><img class="red" src="img/instagram.png"></a>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
</header> -->
|
||||
<!-- bloc principal amb top 3 de vendes amb opinions, i enllaç a la pàgina de videojocs -->
|
||||
<main>
|
||||
<section class="opinions">
|
||||
54
HTML-CSS/projecte-final/main/README.md
Normal file
@@ -0,0 +1,54 @@
|
||||
# Investigacions
|
||||
|
||||
En aquest README m'encarrego principalment de recopilar totes les coses noves que vagi aprenent mentre faig el projecte, així com noves idees per implementar-hi. Suposo que és una bona pràctica documentar allò que s'aprèn.
|
||||
|
||||
---
|
||||
|
||||
## 1. Estils Visuals i Efectes
|
||||
|
||||
### Glassmorfisme (Efecte Vidre)
|
||||
Efecte de tipus vidre opac, popularitzat per Apple i Windows Aero. En aquest projecte s'utilitza intensivament a la **Navbar**, el **Footer** i els **Formularis**.
|
||||
|
||||
**Com s'aconsegueix en CSS:**
|
||||
Per aconseguir aquest efecte "glass" sobre fons foscos, hem utilitzat tres propietats clau:
|
||||
1. **Color semi-transparent:** `background: rgba(255, 255, 255, 0.05);` (molt subtil).
|
||||
2. **Desenfocament del fons:** `backdrop-filter: blur(12px);` (això és el que fa que el que hi ha darrere es vegi borrós).
|
||||
3. **Borde subtil:** `border: 1px solid rgba(255, 255, 255, 0.2);` per delimitar el vidre.
|
||||
|
||||
### Efecte Neó (Glow)
|
||||
Per donar l'estètica "Gamer/Ciberpunk", s'utilitzen ombres de colors brillants sobre fons foscos.
|
||||
|
||||
* **En text:** `text-shadow: 0 0 10px #00c3ff;` (crea una resplendor al voltant de les lletres).
|
||||
* **En botons/caixes:** `box-shadow: 0 0 20px rgba(...);`.
|
||||
* **Enllaços:** Al fer *hover*, el color canvia a cian (`#00c3ff`) o verd, típic de neons.
|
||||
|
||||
---
|
||||
|
||||
## 2. Layout i Estructura (Maquetació)
|
||||
|
||||
### CSS Grid (Graella de Rànquing)
|
||||
Per a la secció de rànquings (`.ranking-grid`), hem utilitzat **CSS Grid** en lloc de Flexbox.
|
||||
* **Codi:** `grid-template-columns: repeat(3, 1fr);`
|
||||
* **Què fa:** Crea automàticament 3 columnes d'igual amplada.
|
||||
* **Responsive:** Amb una *Media Query*, quan la pantalla és petita (`max-width: 900px`), canviem a `grid-template-columns: 1fr;` perquè les targetes es posin una sota l'altra.
|
||||
|
||||
### Flexbox (Navbar i Footer)
|
||||
S'utilitza per a alineacions unidimensionals (una fila).
|
||||
* `justify-content: space-between;`: Separa el logo a l'esquerra i els enllaços a la dreta.
|
||||
* `align-items: center;`: Centra verticalment els elements.
|
||||
|
||||
---
|
||||
|
||||
## 3. Menú Hamburguesa sense JavaScript (El "Checkbox Hack")
|
||||
Aquesta és una de les parts més interessants. Hem creat un menú mòbil que s'obre i es tanca **només amb CSS**, sense utilitzar JavaScript.
|
||||
|
||||
**Com funciona?**
|
||||
1. Tenim un `<input type="checkbox" id="menu-toggle">` que està ocult (`display: none`).
|
||||
2. Tenim una `<label>` amb la icona de l'hamburguesa vinculada a aquest input.
|
||||
3. Utilitzem el selector de "germans" (`~`) per detectar quan el checkbox està marcat:
|
||||
|
||||
```css
|
||||
#menu-toggle:checked ~ .navbarLinks {
|
||||
display: flex;
|
||||
animation: fadeIn 0.4s ease forwards;
|
||||
}
|
||||
@@ -643,4 +643,112 @@ body
|
||||
border-color: #00c3ff;
|
||||
box-shadow: 0 0 15px rgba(0, 195, 255, 0.2);
|
||||
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;
|
||||
}
|
||||
|
||||
/*================Politica de privacitat==============*/
|
||||
.policy-container
|
||||
{
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
backdrop-filter: blur(12px) saturate(180%);
|
||||
-webkit-backdrop-filter: blur(12px) saturate(180%);
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.2);
|
||||
padding: 3rem;
|
||||
border-radius: 20px;
|
||||
width: 100%;
|
||||
max-width: 1000px; /* Más ancho para lectura cómoda */
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
|
||||
.policy-container::before
|
||||
{
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0; left: 0; right: 0; height: 2px;
|
||||
background: linear-gradient(90deg, transparent, #00c3ff, transparent);
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.policy-content h3
|
||||
{
|
||||
color: #00c3ff;
|
||||
margin-top: 2rem;
|
||||
margin-bottom: 1rem;
|
||||
font-size: 1.4rem;
|
||||
border-bottom: 1px solid rgba(255,255,255,0.1);
|
||||
padding-bottom: 5px;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.policy-content p
|
||||
{
|
||||
color: #cbd5e1;
|
||||
line-height: 1.8;
|
||||
margin-bottom: 1.2rem;
|
||||
text-align: justify;
|
||||
}
|
||||
|
||||
/* Ajustes para móviles en la política */
|
||||
@media (max-width: 768px) {
|
||||
.policy-container {
|
||||
padding: 1.5rem;
|
||||
}
|
||||
.policy-content h3 {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
.policy-content p {
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
}
|
||||
|
Before Width: | Height: | Size: 59 KiB After Width: | Height: | Size: 59 KiB |
BIN
HTML-CSS/projecte-final/main/assets/img/favicon.png
Normal file
|
After Width: | Height: | Size: 6.6 KiB |
|
Before Width: | Height: | Size: 76 KiB After Width: | Height: | Size: 76 KiB |
BIN
HTML-CSS/projecte-final/main/assets/img/gowr.jpg
Normal file
|
After Width: | Height: | Size: 46 KiB |
BIN
HTML-CSS/projecte-final/main/assets/img/mariokart8.jpg
Normal file
|
After Width: | Height: | Size: 141 KiB |
BIN
HTML-CSS/projecte-final/main/assets/img/spider-man2.webp
Normal file
|
After Width: | Height: | Size: 40 KiB |
|
Before Width: | Height: | Size: 9.4 MiB After Width: | Height: | Size: 9.4 MiB |
@@ -3,10 +3,11 @@
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title></title>
|
||||
<title>JocsMania - Cercar</title>
|
||||
<link href="assets/css/style.css" rel="stylesheet">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Manjari:wght@400;700&display=swap" rel="stylesheet">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
|
||||
<link rel="icon" href="assets/img/favicon.png">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
@@ -16,12 +17,13 @@
|
||||
<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 class="fa-solid fa-bars"></i>
|
||||
</label>
|
||||
|
||||
|
||||
<ul class="navbarLinks">
|
||||
<li><a href="indexSAD.html">Inici</a></li>
|
||||
<li><a href="videojocsSAD.html">Videojocs</a></li>
|
||||
@@ -34,12 +36,65 @@
|
||||
</header>
|
||||
|
||||
<main class="content">
|
||||
<section class="carrusel-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 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">
|
||||
<div class="container">
|
||||
<div class="footerRow">
|
||||
@@ -60,12 +115,13 @@
|
||||
</ul>
|
||||
</div>
|
||||
<div class="footerLinks">
|
||||
<h4>Redes sociales</h4>
|
||||
<h4>Xarxes socials</h4>
|
||||
<div class="socialLinks">
|
||||
<a href="https://www.whatsapp.com/"><i class="fab fa-whatsapp"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="creativeCommons">
|
||||
<a href="https://lilcarpi.xyz">lilcarpi.xyz</a> © 2025 by <a href="https://lilcarpi.xyz">Lil_Carpi</a> is licensed under <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/">CC BY-NC-SA 4.0</a><img src="https://mirrors.creativecommons.org/presskit/icons/cc.svg" alt="" style="max-width: 1em;max-height:1em;margin-left: .2em;"><img src="https://mirrors.creativecommons.org/presskit/icons/by.svg" alt="" style="max-width: 1em;max-height:1em;margin-left: .2em;"><img src="https://mirrors.creativecommons.org/presskit/icons/nc.svg" alt="" style="max-width: 1em;max-height:1em;margin-left: .2em;"><img src="https://mirrors.creativecommons.org/presskit/icons/sa.svg" alt="" style="max-width: 1em;max-height:1em;margin-left: .2em;">
|
||||
</div>
|
||||
@@ -7,6 +7,7 @@
|
||||
<link href="assets/css/style.css" rel="stylesheet">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Manjari:wght@400;700&display=swap" rel="stylesheet">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
|
||||
<link rel="icon" href="assets/img/favicon.png">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
@@ -77,7 +78,7 @@
|
||||
<i class="fa-solid fa-layer-group cta-icon"></i>
|
||||
<h3>Vols veure el catàleg complet?</h3>
|
||||
<p>Tenim una gran varietat de jocs per a tots els gustos.</p>
|
||||
<a href="" class="btn-neon">Veure Catàleg Complet</a>
|
||||
<a href="videojocsSAD.html" class="btn-neon">Veure Catàleg Complet</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
@@ -105,12 +106,13 @@
|
||||
</ul>
|
||||
</div>
|
||||
<div class="footerLinks">
|
||||
<h4>Redes sociales</h4>
|
||||
<h4>Xarxes socials</h4>
|
||||
<div class="socialLinks">
|
||||
<a href="https://www.whatsapp.com/"><i class="fab fa-whatsapp"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="creativeCommons">
|
||||
<a href="https://lilcarpi.xyz">lilcarpi.xyz</a> © 2025 by <a href="https://lilcarpi.xyz">Lil_Carpi</a> is licensed under <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/">CC BY-NC-SA 4.0</a><img src="https://mirrors.creativecommons.org/presskit/icons/cc.svg" alt="" style="max-width: 1em;max-height:1em;margin-left: .2em;"><img src="https://mirrors.creativecommons.org/presskit/icons/by.svg" alt="" style="max-width: 1em;max-height:1em;margin-left: .2em;"><img src="https://mirrors.creativecommons.org/presskit/icons/nc.svg" alt="" style="max-width: 1em;max-height:1em;margin-left: .2em;"><img src="https://mirrors.creativecommons.org/presskit/icons/sa.svg" alt="" style="max-width: 1em;max-height:1em;margin-left: .2em;">
|
||||
</div>
|
||||
131
HTML-CSS/projecte-final/main/politicaSAD.html
Normal file
@@ -0,0 +1,131 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="es">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>JocsMania - Politica</title>
|
||||
<link href="assets/css/style.css" rel="stylesheet">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Manjari:wght@400;700&display=swap" rel="stylesheet">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
|
||||
<link rel="icon" href="assets/img/favicon.png">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<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 class="fa-solid fa-bars"></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>
|
||||
|
||||
<main class="content">
|
||||
<section class="policy-section">
|
||||
<h2 class="section-title">Política de <span class="highlight-neon">Privacitat</span></h2>
|
||||
|
||||
<div class="policy-container">
|
||||
<div class="policy-content">
|
||||
<p><strong>POLÍTICA DE PRIVACITAT</strong></p>
|
||||
<p>
|
||||
Aquesta Política de Privacitat estableix els termes en què JocsMania utilitza i protegeix la informació que és proporcionada pels seus usuaris en el moment d'utilitzar el seu lloc web. Aquesta companyia està compromesa amb la seguretat de les dades dels seus usuaris. Quan li demanem omplir els camps d'informació personal amb la qual vostè pugui 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 Privacitat pot canviar amb el temps o ser actualitzada, per la qual cosa li recomanem i emfatitzem revisar contínuament aquesta pàgina per assegurar-se que està d'acord amb aquests canvis.
|
||||
</p>
|
||||
|
||||
<h3>Informació que es recull</h3>
|
||||
<p>
|
||||
El nostre lloc web podrà recollir informació personal, per exemple: Nom, informació de contacte com la seva 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 realitzar un lliurament o facturació.
|
||||
</p>
|
||||
|
||||
<h3>Ús de la informació recollida</h3>
|
||||
<p>
|
||||
El nostre lloc web empra la informació amb la finalitat 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 brindar-li 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 seva informació segura. Usem els sistemes més avançats i els actualitzem constantment per assegurar-nos que no existeixi cap accés no autoritzat.
|
||||
</p>
|
||||
|
||||
<h3>Cookies</h3>
|
||||
<p>
|
||||
Una cookie es refereix a un fitxer que és enviat amb la finalitat de sol·licitar permís per emmagatzemar-se al seu ordinador; en acceptar aquest fitxer es crea i la cookie serveix llavors per tenir informació respecte al trànsit web, i també facilita les futures visites a un web recurrent. Una altra funció que tenen les cookies és que amb elles els webs poden reconèixer-te individualment i per tant brindar-te el millor servei personalitzat del seu web.
|
||||
</p>
|
||||
<p>
|
||||
El nostre lloc web empra les cookies 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 forma permanent. Vostè pot eliminar les cookies en qualsevol moment des del seu ordinador. No obstant això, les cookies ajuden a proporcionar un millor servei dels llocs web; aquestes no donen accés a informació del seu ordinador ni de vostè, tret que vostè així ho vulgui i la proporcioni directament.
|
||||
</p>
|
||||
<p>
|
||||
Vostè pot acceptar o negar l'ús de cookies, tot i que la majoria de navegadors accepten cookies automàticament doncs serveix per tenir un millor servei web. També vostè pot canviar la configuració del seu ordinador per declinar les cookies. Si es declinen és possible que no pugui utilitzar alguns dels nostres serveis.
|
||||
</p>
|
||||
|
||||
<h3>Enllaços a Tercers</h3>
|
||||
<p>
|
||||
Aquest lloc web podria contenir enllaços a altres llocs que podrien ser del seu interès. Una vegada que vostè faci 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 privacitat 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 privacitat per la qual cosa és recomanable que els consulti per confirmar que vostè està d'acord amb aquestes.
|
||||
</p>
|
||||
|
||||
<h3>Control de la seva informació personal</h3>
|
||||
<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 li sol·liciti emplenar un formulari, com el d'alta d'usuari, pot marcar o desmarcar l'opció de rebre informació per correu electrònic. En cas que hagi marcat l'opció de rebre el nostre butlletí o publicitat vostè pot 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, excepte que sigui requerit per un jutge amb una ordre judicial.
|
||||
</p>
|
||||
<p>
|
||||
JocsMania es reserva el dret de canviar els termes de la present Política de Privacitat en qualsevol moment.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</main>
|
||||
|
||||
|
||||
<footer class="footer">
|
||||
<div class="container">
|
||||
<div class="footerRow">
|
||||
<div class="footerLinks">
|
||||
<h4>Contactes</h4>
|
||||
<ul>
|
||||
<li><a href="nosaltresSAD.html">Sobre nosaltres</a></li>
|
||||
<li><a href="https://maps.app.goo.gl/Eucdw56tTZbn8KnH7">A on som? (08304)</a></li>
|
||||
<li><a href="politicaSAD.html">Política de privadesa</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="footerLinks">
|
||||
<h4>Socis</h4>
|
||||
<ul>
|
||||
<li><a href="socisSAD.html">Vols ser-ne soci?</a></li>
|
||||
<li><a href="videojocsSAD.html">Qué oferim?</a></li>
|
||||
<li><a href="mailto:contacte@jocsmania.cat">Contacta amb nosaltres</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="footerLinks">
|
||||
<h4>Xarxes socials</h4>
|
||||
<div class="socialLinks">
|
||||
<a href="https://www.whatsapp.com/"><i class="fab fa-whatsapp"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="creativeCommons">
|
||||
<a href="https://lilcarpi.xyz">lilcarpi.xyz</a> © 2025 by <a href="https://lilcarpi.xyz">Lil_Carpi</a> is licensed under <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/">CC BY-NC-SA 4.0</a><img src="https://mirrors.creativecommons.org/presskit/icons/cc.svg" alt="" style="max-width: 1em;max-height:1em;margin-left: .2em;"><img src="https://mirrors.creativecommons.org/presskit/icons/by.svg" alt="" style="max-width: 1em;max-height:1em;margin-left: .2em;"><img src="https://mirrors.creativecommons.org/presskit/icons/nc.svg" alt="" style="max-width: 1em;max-height:1em;margin-left: .2em;"><img src="https://mirrors.creativecommons.org/presskit/icons/sa.svg" alt="" style="max-width: 1em;max-height:1em;margin-left: .2em;">
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -7,6 +7,7 @@
|
||||
<link href="assets/css/style.css" rel="stylesheet">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Manjari:wght@400;700&display=swap" rel="stylesheet">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
|
||||
<link rel="icon" href="assets/img/favicon.png">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
@@ -95,12 +96,13 @@
|
||||
</ul>
|
||||
</div>
|
||||
<div class="footerLinks">
|
||||
<h4>Redes sociales</h4>
|
||||
<h4>Xarxes socials</h4>
|
||||
<div class="socialLinks">
|
||||
<a href="https://www.whatsapp.com/"><i class="fab fa-whatsapp"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="creativeCommons">
|
||||
<a href="https://lilcarpi.xyz">lilcarpi.xyz</a> © 2025 by <a href="https://lilcarpi.xyz">Lil_Carpi</a> is licensed under <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/">CC BY-NC-SA 4.0</a><img src="https://mirrors.creativecommons.org/presskit/icons/cc.svg" alt="" style="max-width: 1em;max-height:1em;margin-left: .2em;"><img src="https://mirrors.creativecommons.org/presskit/icons/by.svg" alt="" style="max-width: 1em;max-height:1em;margin-left: .2em;"><img src="https://mirrors.creativecommons.org/presskit/icons/nc.svg" alt="" style="max-width: 1em;max-height:1em;margin-left: .2em;"><img src="https://mirrors.creativecommons.org/presskit/icons/sa.svg" alt="" style="max-width: 1em;max-height:1em;margin-left: .2em;">
|
||||
</div>
|
||||
BIN
HTML-CSS/projecte-final/main/video-demostratiuSAD.mp4
Normal file
147
HTML-CSS/projecte-final/main/videojocsSAD.html
Normal file
@@ -0,0 +1,147 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="es">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>JocsMania - Socis</title>
|
||||
<link href="assets/css/style.css" rel="stylesheet">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Manjari:wght@400;700&display=swap" rel="stylesheet">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
|
||||
<link rel="icon" href="assets/img/favicon.png">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<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 class="fa-solid fa-bars"></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>
|
||||
|
||||
<main class="content">
|
||||
|
||||
<section>
|
||||
<h2 class="section-title">Catàleg <span class="highlight-neon">Complet</span></h2>
|
||||
|
||||
<div class="ranking-grid">
|
||||
|
||||
<article class="rank-card">
|
||||
<a href="https://es.bandainamcoent.eu/elden-ring/elden-ring" target="_blank" style="display: contents">
|
||||
<img src="assets/img/elden_ring.jpg" alt="Elden Ring" class="card-img">
|
||||
</a>
|
||||
<div class="card-content">
|
||||
<span class="genre-tag">RPG / Acció</span>
|
||||
<h3>Elden Ring</h3>
|
||||
<p class="description">L'obra mestra de món obert. Un món vast i perillós on cada racó amaga un nou desafiament.</p>
|
||||
</div>
|
||||
</article>
|
||||
<article class="rank-card">
|
||||
<a href="https://www.ea.com/es-es/games/ea-sports-fc" target="_blank" style="display: contents">
|
||||
<img src="assets/img/fc24.jpg" alt="EA FC 24" class="card-img">
|
||||
</a>
|
||||
<div class="card-content">
|
||||
<span class="genre-tag">Esports / Simulació</span>
|
||||
<h3>EA FC 24</h3>
|
||||
<p class="description">El rei del futbol torna. Realisme pur amb HyperMotionV i integració total del futbol femení.</p>
|
||||
</div>
|
||||
</article>
|
||||
<article class="rank-card">
|
||||
<a href="https://www.nintendo.com/es-es/Juegos/Juegos-de-Nintendo-Switch/The-Legend-of-Zelda-Tears-of-the-Kingdom-1576884.html" target="_blank" style="display: contents">
|
||||
<img src="assets/img/zeldatotk.jpg" alt="Zelda: TOTK" class="card-img">
|
||||
</a>
|
||||
<div class="card-content">
|
||||
<span class="genre-tag">Aventura / Puzzle</span>
|
||||
<h3>The Legend of Zelda: Tears of The Kingdom</h3>
|
||||
<p class="description">Creativitat sense límits. Construeix, vola i explora Hyrule com mai abans.</p>
|
||||
</div>
|
||||
</article>
|
||||
<article class="rank-card">
|
||||
<a href="https://www.playstation.com/es-es/games/marvels-spider-man-2/" target="_blank" style="display: contents">
|
||||
<img src="assets/img/spider-man2.webp" alt="Spider-Man 2" class="card-img">
|
||||
</a>
|
||||
<div class="card-content">
|
||||
<span class="genre-tag">Acció / Món Obert</span>
|
||||
<h3>Spider-Man 2</h3>
|
||||
<p class="description">Peter Parker i Miles Morales tornen per enfrontar-se a la prova definitiva contra Venom.</p>
|
||||
</div>
|
||||
</article>
|
||||
<article class="rank-card">
|
||||
<a href="https://store.nintendo.es/es/mario-kart-8-deluxe-70010000000126" target="_blank" style="display: contents">
|
||||
<img src="assets/img/mariokart8.jpg" alt="Mario Kart 8 Deluxe" class="card-img">
|
||||
</a>
|
||||
<div class="card-content">
|
||||
<span class="genre-tag">Curses / Família</span>
|
||||
<h3>Mario Kart 8 Deluxe</h3>
|
||||
<p class="description">Competeix amb els teus amics en el joc de carreres més divertit i caòtic de la història.</p>
|
||||
</div>
|
||||
</article>
|
||||
<article class="rank-card">
|
||||
<a href="https://www.playstation.com/es-es/games/god-of-war-ragnarok/" target="_blank" style="display: contents">
|
||||
<img src="assets/img/gowr.jpg" alt="Elden Ring" class="card-img">
|
||||
</a>
|
||||
<div class="card-content">
|
||||
<span class="genre-tag">Acció / Aventura</span>
|
||||
<h3>God of War: Ragnarok</h3>
|
||||
<p class="description">Kratos i Atreus s'endinsen en els Nou Regnes a la recerca de respostes.</p>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</main>
|
||||
|
||||
|
||||
<footer class="footer">
|
||||
<div class="container">
|
||||
<div class="footerRow">
|
||||
<div class="footerLinks">
|
||||
<h4>Contactes</h4>
|
||||
<ul>
|
||||
<li><a href="nosaltresSAD.html">Sobre nosaltres</a></li>
|
||||
<li><a href="https://maps.app.goo.gl/Eucdw56tTZbn8KnH7">A on som? (08304)</a></li>
|
||||
<li><a href="politicaSAD.html">Política de privadesa</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="footerLinks">
|
||||
<h4>Socis</h4>
|
||||
<ul>
|
||||
<li><a href="socisSAD.html">Vols ser-ne soci?</a></li>
|
||||
<li><a href="videojocsSAD.html">Qué oferim?</a></li>
|
||||
<li><a href="mailto:contacte@jocsmania.cat">Contacta amb nosaltres</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="footerLinks">
|
||||
<h4>Xarxes socials</h4>
|
||||
<div class="socialLinks">
|
||||
<a href="https://www.whatsapp.com/"><i class="fab fa-whatsapp"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="creativeCommons">
|
||||
<a href="https://lilcarpi.xyz">lilcarpi.xyz</a> © 2025 by <a href="https://lilcarpi.xyz">Lil_Carpi</a> is licensed under <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/">CC BY-NC-SA 4.0</a><img src="https://mirrors.creativecommons.org/presskit/icons/cc.svg" alt="" style="max-width: 1em;max-height:1em;margin-left: .2em;"><img src="https://mirrors.creativecommons.org/presskit/icons/by.svg" alt="" style="max-width: 1em;max-height:1em;margin-left: .2em;"><img src="https://mirrors.creativecommons.org/presskit/icons/nc.svg" alt="" style="max-width: 1em;max-height:1em;margin-left: .2em;"><img src="https://mirrors.creativecommons.org/presskit/icons/sa.svg" alt="" style="max-width: 1em;max-height:1em;margin-left: .2em;">
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
Before Width: | Height: | Size: 59 KiB After Width: | Height: | Size: 59 KiB |
|
Before Width: | Height: | Size: 76 KiB After Width: | Height: | Size: 76 KiB |
|
Before Width: | Height: | Size: 9.4 MiB After Width: | Height: | Size: 9.4 MiB |
59
JavaScript/A01-SAD/assets/css/style.css
Normal file
@@ -0,0 +1,59 @@
|
||||
*
|
||||
{
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body
|
||||
{
|
||||
margin: 0;
|
||||
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
|
||||
background: var(--bg);
|
||||
color: var(--text);
|
||||
transition: background 0.2s ease, color 0.2s ease;
|
||||
}
|
||||
|
||||
:root
|
||||
{
|
||||
--bg: #ffffff;
|
||||
--bg-secondary: #f5f5f5;
|
||||
--text: #111111;
|
||||
--text-muted: #555555;
|
||||
--border: #e5e7eb;
|
||||
--accent: #2563eb;
|
||||
}
|
||||
|
||||
[data-theme="dark"]
|
||||
{
|
||||
--bg: #111827;
|
||||
--bg-secondary: #1f2937;
|
||||
--text: #e5e7eb;
|
||||
--text-muted: #9ca3af;
|
||||
--border: #374151;
|
||||
--accent: #60a5fa;
|
||||
}
|
||||
|
||||
.header
|
||||
{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 1rem;
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.content
|
||||
{
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.card
|
||||
{
|
||||
background: var(--bg-secondary);
|
||||
border: 1px solid var(--border);
|
||||
padding: 1rem;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
a
|
||||
{
|
||||
color: var(--accent);
|
||||
}
|
||||
15
JavaScript/A01-SAD/assets/js/index.js
Normal file
@@ -0,0 +1,15 @@
|
||||
const root = document.documentElement;
|
||||
const toggleBtn = document.getElementById("theme-toggle");
|
||||
|
||||
const savedTheme = localStorage.getItem("theme");
|
||||
if (savedTheme) {
|
||||
root.dataset.theme = savedTheme;
|
||||
}
|
||||
|
||||
toggleBtn.addEventListener("click", () => {
|
||||
const current = root.dataset.theme;
|
||||
const next = current === "dark" ? "light" : "dark";
|
||||
|
||||
root.dataset.theme = next;
|
||||
localStorage.setItem("theme", next);
|
||||
});
|
||||
25
JavaScript/A01-SAD/html.html
Normal file
@@ -0,0 +1,25 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" data-theme="light">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Que se yo</title>
|
||||
<link rel="stylesheet" href="assets/css/style.css">
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<header class="header">
|
||||
<h1>Testing</h1>
|
||||
<button id="theme-toggle">Cambiar tema</button>
|
||||
</header>
|
||||
|
||||
<main class="content">
|
||||
<div class="card">
|
||||
<h2>Titulo</h2>
|
||||
<p>Lorem Ipsum dolor sit amet</p>
|
||||
<a href="#">Enlace</a>
|
||||
</div>
|
||||
</main>
|
||||
<script src="assets/js/index.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,14 +0,0 @@
|
||||
# Investigacions
|
||||
En aquest README m'encarrego principalment de recopilar totes les coses noves que vagi aprenent mentre faig el projecte, així com noves idees per implementar-hi. Suposo que és una bona pràctica documentar allò que s'aprèn.
|
||||
|
||||
### Glassmorfisme
|
||||
Efecte de tipus vidre opac, popularitzat per Apple amb el seu entorn gràfic "Liquid Glass", un efecte que drena la bateria del telèfon a velocitat insana, i que ja era present des de Windows 7 amb Windows Aero.
|
||||
|
||||
|
||||
### iframe:
|
||||
Usos:
|
||||
- Serveix per incloure una part de un altre document html al document actual.
|
||||
## Exemple d'us:
|
||||
```<iframe src="*url*" title="description"></iframe>```
|
||||
|
||||
Bona practica: es una bona practica el sempre incloure un atribut **title** para el iframe. Aixo s'utilitza als lectors de pantalla per sapiguer-ne que es el que estem llegint o quin es el contingut del iframe.
|
||||
@@ -1,80 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="es">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title></title>
|
||||
<link href="assets/css/style.css" rel="stylesheet">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Manjari:wght@400;700&display=swap" rel="stylesheet">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<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 class="fa-solid fa-bars"></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>
|
||||
|
||||
<main class="content">
|
||||
<div class="main-container">
|
||||
|
||||
</div>
|
||||
</main>
|
||||
|
||||
|
||||
<footer class="footer">
|
||||
<div class="container">
|
||||
<div class="footerRow">
|
||||
<div class="footerLinks">
|
||||
<h4>Contactes</h4>
|
||||
<ul>
|
||||
<li><a href="nosaltresSAD.html">Sobre nosaltres</a></li>
|
||||
<li><a href="https://maps.app.goo.gl/Eucdw56tTZbn8KnH7">A on som? (08304)</a></li>
|
||||
<li><a href="politicaSAD.html">Política de privadesa</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="footerLinks">
|
||||
<h4>Socis</h4>
|
||||
<ul>
|
||||
<li><a href="socisSAD.html">Vols ser-ne soci?</a></li>
|
||||
<li><a href="videojocsSAD.html">Qué oferim?</a></li>
|
||||
<li><a href="mailto:contacte@jocsmania.cat">Contacta amb nosaltres</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="footerLinks">
|
||||
<h4>Redes sociales</h4>
|
||||
<div class="socialLinks">
|
||||
<a href="https://www.whatsapp.com/"><i class="fab fa-whatsapp"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="creativeCommons">
|
||||
<a href="https://lilcarpi.xyz">lilcarpi.xyz</a> © 2025 by <a href="https://lilcarpi.xyz">Lil_Carpi</a> is licensed under <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/">CC BY-NC-SA 4.0</a><img src="https://mirrors.creativecommons.org/presskit/icons/cc.svg" alt="" style="max-width: 1em;max-height:1em;margin-left: .2em;"><img src="https://mirrors.creativecommons.org/presskit/icons/by.svg" alt="" style="max-width: 1em;max-height:1em;margin-left: .2em;"><img src="https://mirrors.creativecommons.org/presskit/icons/nc.svg" alt="" style="max-width: 1em;max-height:1em;margin-left: .2em;"><img src="https://mirrors.creativecommons.org/presskit/icons/sa.svg" alt="" style="max-width: 1em;max-height:1em;margin-left: .2em;">
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,79 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="es">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title></title>
|
||||
<link href="assets/css/style.css" rel="stylesheet">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Manjari:wght@400;700&display=swap" rel="stylesheet">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<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 class="fa-solid fa-bars"></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>
|
||||
|
||||
<main class="content">
|
||||
<div class="main-container">
|
||||
|
||||
</div>
|
||||
</main>
|
||||
|
||||
|
||||
<footer class="footer">
|
||||
<div class="container">
|
||||
<div class="footerRow">
|
||||
<div class="footerLinks">
|
||||
<h4>Contactes</h4>
|
||||
<ul>
|
||||
<li><a href="nosaltresSAD.html">Sobre nosaltres</a></li>
|
||||
<li><a href="https://maps.app.goo.gl/Eucdw56tTZbn8KnH7">A on som? (08304)</a></li>
|
||||
<li><a href="politicaSAD.html">Política de privadesa</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="footerLinks">
|
||||
<h4>Socis</h4>
|
||||
<ul>
|
||||
<li><a href="socisSAD.html">Vols ser-ne soci?</a></li>
|
||||
<li><a href="videojocsSAD.html">Qué oferim?</a></li>
|
||||
<li><a href="mailto:contacte@jocsmania.cat">Contacta amb nosaltres</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="footerLinks">
|
||||
<h4>Redes sociales</h4>
|
||||
<div class="socialLinks">
|
||||
<a href="https://www.whatsapp.com/"><i class="fab fa-whatsapp"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="creativeCommons">
|
||||
<a href="https://lilcarpi.xyz">lilcarpi.xyz</a> © 2025 by <a href="https://lilcarpi.xyz">Lil_Carpi</a> is licensed under <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/">CC BY-NC-SA 4.0</a><img src="https://mirrors.creativecommons.org/presskit/icons/cc.svg" alt="" style="max-width: 1em;max-height:1em;margin-left: .2em;"><img src="https://mirrors.creativecommons.org/presskit/icons/by.svg" alt="" style="max-width: 1em;max-height:1em;margin-left: .2em;"><img src="https://mirrors.creativecommons.org/presskit/icons/nc.svg" alt="" style="max-width: 1em;max-height:1em;margin-left: .2em;"><img src="https://mirrors.creativecommons.org/presskit/icons/sa.svg" alt="" style="max-width: 1em;max-height:1em;margin-left: .2em;">
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,79 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="es">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title></title>
|
||||
<link href="assets/css/style.css" rel="stylesheet">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Manjari:wght@400;700&display=swap" rel="stylesheet">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<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 class="fa-solid fa-bars"></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>
|
||||
|
||||
<main class="content">
|
||||
<div class="main-container">
|
||||
</div>
|
||||
</main>
|
||||
|
||||
|
||||
<footer class="footer">
|
||||
<div class="container">
|
||||
<div class="footerRow">
|
||||
<div class="footerLinks">
|
||||
<h4>Contactes</h4>
|
||||
<ul>
|
||||
<li><a href="nosaltresSAD.html">Sobre nosaltres</a></li>
|
||||
<li><a href="https://maps.app.goo.gl/Eucdw56tTZbn8KnH7">A on som? (08304)</a></li>
|
||||
<li><a href="politicaSAD.html">Política de privadesa</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="footerLinks">
|
||||
<h4>Socis</h4>
|
||||
<ul>
|
||||
<li><a href="socisSAD.html">Vols ser-ne soci?</a></li>
|
||||
<li><a href="videojocsSAD.html">Qué oferim?</a></li>
|
||||
<li><a href="mailto:contacte@jocsmania.cat">Contacta amb nosaltres</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="footerLinks">
|
||||
<h4>Redes sociales</h4>
|
||||
<div class="socialLinks">
|
||||
<a href="https://www.whatsapp.com/"><i class="fab fa-whatsapp"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="creativeCommons">
|
||||
<a href="https://lilcarpi.xyz">lilcarpi.xyz</a> © 2025 by <a href="https://lilcarpi.xyz">Lil_Carpi</a> is licensed under <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/">CC BY-NC-SA 4.0</a><img src="https://mirrors.creativecommons.org/presskit/icons/cc.svg" alt="" style="max-width: 1em;max-height:1em;margin-left: .2em;"><img src="https://mirrors.creativecommons.org/presskit/icons/by.svg" alt="" style="max-width: 1em;max-height:1em;margin-left: .2em;"><img src="https://mirrors.creativecommons.org/presskit/icons/nc.svg" alt="" style="max-width: 1em;max-height:1em;margin-left: .2em;"><img src="https://mirrors.creativecommons.org/presskit/icons/sa.svg" alt="" style="max-width: 1em;max-height:1em;margin-left: .2em;">
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
</body>
|
||||
</html>
|
||||