WebRepoDAW/index.html at master · 2cristo7/WebRepoDAW · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name = "description" content = "USC Predict es una plataforma de predicción de eventos">
    <meta name = "keywords" content = "USC, Predict, Eventos, Predicción">
    <meta name = "author" content = "Mateo Bodenlle y Diego Cristóbal">
    <meta http-equiv="Content-Security-Policy" content="default-src 'self'; style-src 'self' 'unsafe-inline' https://fonts.googleapis.com; font-src 'self' https://fonts.gstatic.com; script-src 'self' 'unsafe-inline'; img-src 'self' data:; connect-src 'self';">
    <title>USC Predict</title>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@200;300;400;500;600;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="./Css/styles.css">
    <link rel="stylesheet" href="./Css/index.css">
    <link rel="stylesheet" href="./Css/layoutComun.css">
    <link rel="stylesheet" href="./Css/Componentes/card.css">
    <link rel="stylesheet" href="./Css/Componentes/trendingList.css">
</head>
<body>

<!-- Encabezado principal del sitio -->
<header id="navbar">
    <nav>
        <div class="nav-left">
            <div class="logo">
                <a href="./index.html">
                    <img src="../../Resources/Logo.png" width="130px" alt="USC Predict Logo">
                </a>
            </div>
        </div>
        <div class="nav-center">
            <button onclick="location.href='Html/Busqueda.html'" id="navBarBusqueda">Búsqueda</button>
            <button onclick="location.href='Html/Resueltos.html'" id="navBarResueltos">Resueltos</button>
            <button onclick="location.href='Html/Watchlist.html'" id="navBarWatchlist">Watchlist</button>
        </div>
        <div class="nav-right">
            <button onclick="location.href='Html/About_Us.html'" id="navBarAboutUs">About us</button>
            <button onclick="location.href='Html/contacto.html'" id="navBarContacto">Contacto</button>
        </div>
    </nav>
</header>

<!-- Contenido principal -->

<main class="container">
    <!-- Título e introducción -->
    <header class="home-header">
        <h1>USC PREDICT</h1>
    </header>

    <!-- Tarjetas principales -->
    <section class="card-grid" id="contenedor-tarjetas"></section>

    <!-- Sección de listas Trending y Actividad -->
    <section class="trending-actividad-container">

        <article class="trending-box">
            <div class="trending-header">
                <span class="icon">📈</span>
                <h2>Trending 🔥</h2>
            </div>
            <div class="trending-list-wrapper">
                <ul class="trending-list">

                </ul>


                <div class="ver-mas" id="ver-mas-trending">
                    <a>Ver más...</a>
                </div>
            </div>
        </article>


        <section class="trending-box">
            <div class="trending-header">
                <span class="icon">📈</span>
                <h2>Actividad 🔥</h2>
            </div>
        <div class="trending-list-wrapper">
            <ul class="trending-list"></ul>


            <div class="ver-mas" id="ver-mas-trending2">
                <a>Ver más...</a>
            </div>
        </div>
        </section>
    </section>


</main>


<!-- Pie de página -->
<footer id="footer">
    <section class="footer-container">
        <section class="footer-column">
            <h3>Información</h3>
            <p><a href="../Html/About_Us.html">Quiénes somos</a></p>
            <p><a href="../Html/contacto.html">Contacto</a></p>
            <p><a href="../Html/TermsAndConditions.html">Política de privacidad</a></p>
        </section>
        <section class="footer-column">
            <h3>Soporte</h3>
            <p><a href="../Html/contacto.html">Ayuda</a></p>
            <p><a href="../Html/contacto.html">Preguntas frecuentes</a></p>
        </section>
        <section class="footer-column">
            <h3>Comunidad</h3>
            <p><a href="https://github.com/mateobodenlle/DAW_-_USC_Predict_Frontend" target="_blank">Instagram</a></p>
            <p><a href="https://github.com/mateobodenlle/DAW_-_USC_Predict_Frontend" target="_blank">X (Twitter)</a></p>
        </section>
        <section class="footer-column">
            <h3>Legal</h3>
            <p><a href="../Html/TermsAndConditions.html">Términos de uso</a></p>
        </section>
    </section>
</footer>


</body>

</html>
<script type="module">
    import { generarTarjetas } from './Js/loaderCards.js';

    // Callback para click en la tarjeta: redirige a la página de detalles pasando el id
    const onClick = (evento) => {
        window.location.href = `./Html/Detalles.html?id=${evento.id}`;
    };

    // Callbacks para botones "SI" y "NO"
    const onSi = (evento, tarjeta) => {
        window.location.href = `./Html/Detalles.html?id=${evento.id}&voto=si`;
    };
    const onNo = (evento, tarjeta) => {
        window.location.href = `./Html/Detalles.html?id=${evento.id}&voto=no`;
    };


    // Cargar el JSON con la información de los eventos
    fetch('./Resources/Data/eventos.json')
        .then(response => response.json())
        .then(eventos => {
            const contenedor = document.getElementById('contenedor-tarjetas');
            const eventosLimitados = eventos.slice(0, 6); // Limitar a 6 eventos
            generarTarjetas(contenedor, eventosLimitados, onClick, onSi, onNo);
        })
        .catch(error => console.error('Error al cargar el JSON:', error));
</script>

<script src="./Js/trendingListsIndex.js"> </script>