RCGAProds.github.io/game-list.html at main · RCGAProds/RCGAProds.github.io · 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
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
<!DOCTYPE html>
<html lang="es">
  <head>
    <meta charset="UTF-8" />
    <title>Lista de Recomendaciones</title>
    <style>
      body {
        font-family: Arial, sans-serif;
        max-width: 1200px;
        margin: 0 auto;
        padding: 20px;
        background-color: #f4f4f4;
        transition: background-color 0.3s, color 0.3s;
      }
      body.dark-mode {
        background-color: #121212;
        color: #ffffff;
      }
      .header {
        display: flex;
        justify-content: space-between;
        align-items: center;
      }
      .game-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
        gap: 20px;
      }
      .game-card {
        background-color: white;
        border-radius: 10px;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        overflow: hidden;
        transition: transform 0.3s ease;
      }
      body.dark-mode .game-card {
        background-color: #1e1e1e;
      }
      .game-card:hover {
        transform: scale(1.05);
      }
      .game-card img {
        width: 100%;
        height: auto;
        aspect-ratio: 16 / 9;
        object-fit: cover;
      }
      .game-info {
        padding: 15px;
      }
      .game-price {
        color: green;
        font-weight: bold;
        text-decoration: none;
        margin-top: 10px;
      }
      body.dark-mode .game-price {
        color: #90ee90;
      }
      #last-update {
        text-align: center;
        margin-top: 20px;
        color: #666;
      }
      body.dark-mode #last-update {
        color: #aaaaaa;
      }
      .game-link {
        text-decoration: none;
        color: inherit;
        display: block;
      }
      #mode-toggle {
        background: none;
        border: none;
        cursor: pointer;
        font-size: 24px;
        transition: color 0.3s;
        padding: 10px;
        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
      }
      #mode-toggle .sun {
        display: none;
      }
      body.dark-mode #mode-toggle .sun {
        display: inline;
      }
      body.dark-mode #mode-toggle .moon {
        display: none;
      }
    </style>
  </head>
  <body>
    <div class="header">
      <h1>Lista de Recomendaciones</h1>
      <button id="mode-toggle">
        <span class="sun">☀️</span>
        <span class="moon">🌙</span>
      </button>
    </div>
    <div id="game-grid" class="game-grid"></div>
    <div id="last-update"></div>

    <script>
      // Lista de juegos con URLs de imágenes y IDs de Steam
      const games = [
        {
          name: "The Elder Scrolls IV: Oblivion Remastered",
          description:
            "Explora Cyrodiil como nunca con unos gráficos impresionantes y una jugabilidad mejorada en The Elder Scrolls IV: Oblivion™ Remastered.",
          genre: "Rol, Mundo abierto, Fantasía",
          platform: "Steam",
          steamAppId: 2623190,
          urlExtension: "/a7cee9165bb1bfc092c390c5cff215ce0e381dfc",
          price: "54.99€",
        },
        {
          name: "Assassin’s Creed Shadows",
          description:
            "¡Sumérgete en una épica historia de acción y aventura ambientada en el Japón feudal!",
          genre: "Acción, Aventura",
          platform: "Steam",
          steamAppId: 3159330,
          price: "69.99€",
        },
        {
          name: "Luto",
          description:
            "Luto es una experiencia de terror psicológico en la que asumes el papel de alguien incapaz de abandonar su hogar. Cada intento de escapar te adentrará más en lo desconocido, donde nada es lo que parece y todo pondrá a prueba tus sentidos.",
          genre: "Terror, Terror psicológico",
          platform: "Steam",
          steamAppId: 1729740,
          price: "19.99€",
        },
        {
          name: "Pieces of me",
          description:
            "'Pieces of Me' es un drama de suspenso psicológico en el género de 'walking simulator', que es un spin-off del juego 'September 7th'",
          genre: "Suspense, Drama, Terror psicológico",
          platform: "Steam",
          steamAppId: 2479740,
          price: "8.79€",
        },
        {
          name: "Choo-Choo Charles",
          description: "Juego de terror y supervivencia con un tren demoníaco",
          genre: "Terror, Supervivencia",
          platform: "Steam",
          steamAppId: 1766740,
          price: "19.50€",
        },
        {
          name: "Fears To Fathom",
          description: "Serie episódica de juegos de terror psicológico",
          genre: "Terror, Aventura",
          platform: "Steam",
          steamAppId: 1671340,
          price:
            "Gratuito (Episodio 1), 4,99€ (Episodio 2 y 3), 9,75€ (Episodio 4 y 5)",
        },
        {
          name: "Bring Me...",
          description:
            "Juega como una joven que ha estado cuidando de su padre enfermo. Observa tu entorno en busca de anomalías para encontrar una salida de esta pesadilla.",
          genre: "Terror, Aventura",
          platform: "Steam",
          steamAppId: 3168370,
          price: "3.99€",
        },
        {
          name: "Bad Parenting 1: Mr. Red Face",
          description:
            "Mr. Red Face, a fictional character created by adults to teach their children, suddenly becomes real..",
          genre: "Terror, Supervivencia",
          platform: "Steam",
          steamAppId: 3205080,
          price: "1.99€",
        },
        {
          name: "[Chilla's Art] Parasocial | パラソーシャル",
          description: "Juego de terror psicológico donde eres una streamer.",
          genre: "Terror, Aventura",
          platform: "Steam",
          steamAppId: 2314720,
          price: "7.79€",
        },
        {
          name: "The Bathhouse | 地獄銭湯 Restored Edition",
          description:
            "Juego de terror psicológico ambientado en un baño público",
          genre: "Terror, Aventura",
          platform: "Steam",
          steamAppId: 2989950,
          price: "7.79€",
        },
        {
          name: "[Chilla's Art] The Kidnap | 誘拐事件",
          description: "Juego de terror psicológico basado en un secuestro",
          genre: "Terror, Aventura",
          platform: "Steam",
          steamAppId: 2593900,
          price: "9.75€",
        },
        {
          name: "[Chilla's Art] The Karaoke | ヒトカラ🎤",
          description: "Juego de terror psicológico ambientado en un karaoke",
          genre: "Terror, Aventura",
          platform: "Steam",
          steamAppId: 2200190,
          price: "5.89€",
        },
      ]

      function displayGames() {
        const gameGrid = document.getElementById("game-grid")
        gameGrid.innerHTML = "" // Limpiar grid anterior

        for (const game of games) {
          const steamPath = `${game.steamAppId}${
            game.urlExtension ? game.urlExtension : ""
          }`

          // Crear tarjeta de juego
          const gameCard = document.createElement("div")
          gameCard.className = "game-card"

          // Crear enlace que redirige a la página del juego en Steam
          const gameLink = document.createElement("a")
          gameLink.href = `https://store.steampowered.com/app/${steamPath}/`
          gameLink.target = "_blank" // Abre en nueva pestaña
          gameLink.className = "game-link"

          // Imagen del juego
          const gameImage = document.createElement("img")
          gameImage.src = `https://shared.akamai.steamstatic.com/store_item_assets/steam/apps/${steamPath}/header.jpg`
          gameImage.alt = game.name

          // Información del juego
          const gameInfo = document.createElement("div")
          gameInfo.className = "game-info"

          gameInfo.innerHTML = `
            <h2>${game.name}</h2>
            <p><strong>Descripción:</strong> ${game.description}</p>
            <p><strong>Género:</strong> ${game.genre}</p>
            <p><strong>Plataforma:</strong> ${game.platform}</p>
            <p class="game-price"><strong>Precio:</strong> ${game.price}</p>
          `

          gameLink.appendChild(gameImage)
          gameLink.appendChild(gameInfo)
          gameCard.appendChild(gameLink)
          gameGrid.appendChild(gameCard)
        }
      }

      // Mostrar juegos al iniciar
      displayGames()

      // Modo oscuro / claro
      const modeToggle = document.getElementById("mode-toggle")
      modeToggle.addEventListener("click", () => {
        document.body.classList.toggle("dark-mode")
      })
    </script>
  </body>
</html>