-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
809 lines (731 loc) · 33.1 KB
/
index.html
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
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Comparte tus aperturas de ajedrez</title>
<style>
body {
background-color: #2E3A24;
color: #FFD700;
font-family: 'Times New Roman', Times, serif;
margin: 0;
padding: 20px;
}
h1 {
text-align: center;
border: 2px solid black;
padding: 10px;
}
.section {
margin-bottom: 40px;
}
.apertura, .gambito {
border: 1px solid yellow;
border-radius: 8px;
padding: 10px;
margin-bottom: 20px;
}
.register, .login {
border: 1px solid yellow;
border-radius: 8px;
padding: 10px;
margin-bottom: 20px;
background-color: #4E5D33;
}
.publicaciones {
border: 1px solid yellow;
border-radius: 8px;
padding: 10px;
background-color: #4E5D33;
}
.icon {
margin-right: 5px;
}
.search-bar {
margin: 20px 0;
}
</style>
</head>
<body>
<h1>Todo Apertura Ajedrez</h1>
<div class="section search-bar">
<input type="text" placeholder="Buscar apertura o técnica..." id="search">
<button onclick="search()">🔍 Buscar</button>
</div>
<div class="section">
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Aperturas de Ajedrez 📚</title>
<style>
body {
font-family: Arial, sans-serif;
}
.opening {
margin: 20px;
border: 1px solid #ccc;
padding: 10px;
border-radius: 5px;
}
#board {
width: 400px;
height: 400px;
margin: 20px auto;
}
</style>
</head>
<body>
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Aperturas de Ajedrez</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f9f9f9;
color: #333;
text-align: center;
margin: 0;
padding: 20px;
}
h1 {
color: #2c3e50;
margin-bottom: 20px;
}
#board {
margin: 20px auto;
border: 1px solid #333;
width: 400px;
height: 400px;
background-color: #fff;
}
select, button {
padding: 10px;
margin: 10px;
border-radius: 5px;
border: 1px solid #333;
font-size: 16px;
}
.apertura {
background-color: #ecf0f1;
border: 1px solid #bdc3c7;
border-radius: 10px;
padding: 15px;
margin: 10px auto;
width: 80%;
max-width: 600px;
}
.apertura h3 {
color: #2980b9;
}
img {
max-width: 100%;
height: auto;
}
</style>
</head>
<body>
<h1>Aperturas de Ajedrez 📚</h1>
<div id="board"></div>
<select id="openingSelect">
<option value="">Selecciona una apertura</option>
</select>
<button id="loadBoard">Cargar Tablero</button>
<div id="openingInfo"></div>
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Aperturas de Ajedrez</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f9f9f9;
color: #333;
text-align: center;
margin: 0;
padding: 20px;
}
h1 {
color: #2c3e50;
margin-bottom: 20px;
}
#board {
margin: 20px auto;
border: 1px solid #333;
width: 400px;
height: 400px;
background-color: #fff;
}
select, button {
padding: 10px;
margin: 10px;
border-radius: 5px;
border: 1px solid #333;
font-size: 16px;
}
.apertura {
background-color: #ecf0f1;
border: 1px solid #bdc3c7;
border-radius: 10px;
padding: 15px;
margin: 10px auto;
width: 80%;
max-width: 600px;
}
.apertura h3 {
color: #2980b9;
}
img {
max-width: 100%;
height: auto;
}
</style>
</head>
<body>
<h1>Aperturas de Ajedrez 📚</h1>
<div id="board"></div>
<select id="openingSelect">
<option value="">Selecciona una apertura</option>
</select>
<button id="loadBoard">Cargar Tablero</button>
<div id="openingInfo"></div>
<div class="apertura">
<h3>Defensa Siciliana 📖</h3>
<p><strong>Descripción:</strong> La Defensa Siciliana es una de las aperturas más populares y agresivas. Se inicia con 1.e4 c5. Esta apertura permite a las negras crear un juego desequilibrado y buscar contrajuego, lo que la hace una opción favorita entre los jugadores que prefieren el juego táctico. La Siciliana tiene muchas variantes, incluyendo la Variante Najdorf, la Variante Scheveningen y la Variante del Dragón, cada una ofreciendo diferentes posibilidades estratégicas.</p>
</div>
<div class="apertura">
<h3>Apertura Española 📖</h3>
<p><strong>Descripción:</strong> La Apertura Española (1.e4 e5 2.Nf3 Nc6 3.Bb5) es una de las más antiguas y reconocidas, favorecida por muchos campeones. Esta apertura busca presionar el punto f7 de las negras, lo que puede llevar a un juego estratégico profundo. Existen múltiples variantes, como la Defensa Morphy, la Defensa Berlín y la Defensa del Cambio, cada una con su propio carácter y estilo de juego.</p>
</div>
<div class="apertura">
<h3>Defensa Francesa 📖</h3>
<p><strong>Descripción:</strong> La Defensa Francesa (1.e4 e6) es conocida por su solidez y ha sido usada por muchos campeones. Este sistema permite a las negras establecer un sólido centro de peones y buscar contrajuego en el flanco de rey. Las principales líneas incluyen la Variante del Avance, la Variante del Cambio y la Variante Tarrasch.</p>
</div>
<div class="apertura">
<h3>Defensa Caro-Kann 📖</h3>
<p><strong>Descripción:</strong> La Defensa Caro-Kann (1.e4 c6) es una apertura sólida y popular entre los jugadores. Esta defensa busca un desarrollo armonioso de las piezas y una estructura de peones fuerte. Las principales variantes incluyen la Variante Clásica, la Variante Avance y la Variante Tartakower.</p>
</div>
<div class="apertura">
<h3>Apertura Italiana 📖</h3>
<p><strong>Descripción:</strong> La Apertura Italiana (1.e4 e5 2.Nf3 Nc6 3.Bc4) es una apertura clásica y estratégica. A menudo conduce a un juego abierto, donde ambos bandos buscan oportunidades tácticas. Variantes populares incluyen la Giuoco Piano y la Defensa de dos Caballos.</p>
</div>
<div class="apertura">
<h3>Defensa Nimzo-India 📖</h3>
<p><strong>Descripción:</strong> La Defensa Nimzo-India (1.d4 Nf6 2.c4 e6 3.Nc3 Bb4) es muy popular en el ajedrez moderno. Esta defensa permite a las negras controlar el centro y crear complicaciones en la estructura de peones de las blancas. Las ideas estratégicas suelen involucrar el intercambio del alfil en c3 para debilitar la estructura de peones de las blancas.</p>
</div>
<div class="apertura">
<h3>Apertura Inglesa 📖</h3>
<p><strong>Descripción:</strong> La Apertura Inglesa (1.c4) es conocida por su flexibilidad y opciones estratégicas. Permite a las blancas controlar el centro con un enfoque más posicional y puede transponer a otras aperturas. Las negras pueden optar por varias configuraciones, lo que lleva a un juego rico y complejo.</p>
</div>
<div class="apertura">
<h3>Defensa Grünfeld 📖</h3>
<p><strong>Descripción:</strong> La Defensa Grünfeld (1.d4 Nf6 2.c4 g6 3.Nc3 d5) es muy dinámica y popular. Esta apertura busca un juego activo y agresivo, desafiando a las blancas a establecer su centro de peones. Se asocia con posiciones tácticas y estratégicas muy complejas.</p>
</div>
<div class="apertura">
<h3>Defensa Moderna 📖</h3>
<p><strong>Descripción:</strong> La Defensa Moderna (1.e4 g6) es flexible y permite al jugador desarrollar sus piezas según las circunstancias. Este enfoque ofrece a las negras la oportunidad de crear un contrajuego en el centro y en los flancos, manteniendo una postura sólida y flexible.</p>
</div>
<div class="apertura">
<h3>Apertura del Youtuber Hikaru Nakamura 📖</h3>
<p><strong>Descripción:</strong> Hikaru suele jugar aperturas rápidas y agresivas, comenzando con 1.e4, buscando un juego táctico y emocionante. Su estilo se centra en la presión constante sobre su oponente, combinando creatividad y agresividad.</p>
</div>
<div class="apertura">
<h3>Apertura del Youtuber GothamChess 📖</h3>
<p><strong>Descripción:</strong> Levy, conocido como GothamChess, utiliza la Defensa Siciliana en sus videos, comenzando con 1.e4 c5. Su enfoque combina teoría con análisis de partidas, lo que lo hace accesible para jugadores de todos los niveles.</p>
</div>
<div class="apertura">
<h3>Apertura del Youtuber Agadmator 📖</h3>
<p><strong>Descripción:</strong> Agadmator es conocido por sus análisis de partidas y juega diversas aperturas, incluyendo la Apertura Española. Su estilo didáctico hace que el ajedrez sea comprensible y atractivo para todos.</p>
</div>
<div class="apertura">
<h3>Defensa Pirc 📖</h3>
<p><strong>Descripción:</strong> La Defensa Pirc (1.e4 d6) es una apertura que permite a las negras jugar de forma flexible y contrarrestar las ideas blancas. Suele conducir a un juego dinámico con muchas posibilidades estratégicas.</p>
</div>
<div class="apertura">
<h3>Apertura Benoni 📖</h3>
<p><strong>Descripción:</strong> La Apertura Benoni (1.d4 Nf6 2.c4 c5) es agresiva y da a las negras un juego activo. Se caracteriza por la lucha en el centro y el flanco de la dama, llevando a posiciones complejas y tácticas.</p>
</div>
<div class="apertura">
<h3>Defensa Holandesa 📖</h3>
<p><strong>Descripción:</strong> La Defensa Holandesa (1.d4 f5) es una apertura poco convencional pero efectiva, buscando un juego activo desde el principio. Este sistema permite a las negras establecer una sólida presencia en el centro y atacar las debilidades de las blancas.</p>
</div>
<div class="apertura">
<h3>Defensa Escandinava 📖</h3>
<p><strong>Descripción:</strong> La Defensa
<div class="apertura">
<h3>Defensa Siciliana 📖</h3>
<p><strong>Descripción:</strong> La Defensa Siciliana es una de las aperturas más populares y agresivas. Se inicia con 1.e4 c5.</p>
<p><strong>Piezas clave:</strong> Peón en c5 y Alfil de f8.</p>
<p><strong>Pros:</strong> Permite un juego dinámico y contrarresta la iniciativa blanca.</p>
<p><strong>Contras:</strong> Puede llevar a posiciones complicadas si no se conoce bien.</p>
</div>
<div class="apertura">
<h3>Apertura Española 📖</h3>
<p><strong>Descripción:</strong> La Apertura Española (1.e4 e5 2.Nf3 Nc6 3.Bb5) es una de las más antiguas y reconocidas, favorecida por muchos campeones.</p>
<p><strong>Piezas clave:</strong> Alfil de b5 y Caballo de c6.</p>
<p><strong>Pros:</strong> Ayuda a controlar el centro y permite un desarrollo rápido.</p>
<p><strong>Contras:</strong> Puede dar lugar a posiciones cerradas.</p>
</div>
<div class="apertura">
<h3>Defensa Francesa 📖</h3>
<p><strong>Descripción:</strong> La Defensa Francesa (1.e4 e6) es conocida por su solidez y ha sido usada por muchos campeones.</p>
<p><strong>Piezas clave:</strong> Peón de e6 y Alfil de c8.</p>
<p><strong>Pros:</strong> Permite una estructura de peones sólida y defensiva.</p>
<p><strong>Contras:</strong> Puede resultar pasiva si se juega de manera inadecuada.</p>
</div>
<div class="apertura">
<h3>Defensa Caro-Kann 📖</h3>
<p><strong>Descripción:</strong> La Defensa Caro-Kann (1.e4 c6) es una apertura sólida y popular entre los jugadores.</p>
<p><strong>Piezas clave:</strong> Peón de c6 y Caballo de d7.</p>
<p><strong>Pros:</strong> Ofrece una defensa sólida contra 1.e4.</p>
<p><strong>Contras:</strong> Puede dar lugar a posiciones estáticas.</p>
</div>
<div class="apertura">
<h3>Apertura Italiana 📖</h3>
<p><strong>Descripción:</strong> La Apertura Italiana (1.e4 e5 2.Nf3 Nc6 3.Bc4) es una apertura clásica y estratégica.</p>
<p><strong>Piezas clave:</strong> Alfil de c4 y Peón de e5.</p>
<p><strong>Pros:</strong> Permite un desarrollo rápido y ataque al f7.</p>
<p><strong>Contras:</strong> Puede ser vulnerable a defensas bien preparadas.</p>
</div>
<div class="apertura">
<h3>Defensa Nimzo-India 📖</h3>
<p><strong>Descripción:</strong> La Defensa Nimzo-India (1.d4 Nf6 2.c4 e6 3.Nc3 Bb4) es muy popular en el ajedrez moderno.</p>
<p><strong>Piezas clave:</strong> Caballo de c3 y Alfil de b4.</p>
<p><strong>Pros:</strong> Ofrece un juego dinámico y la opción de dobles peones.</p>
<p><strong>Contras:</strong> Puede ser compleja de manejar para principiantes.</p>
</div>
<div class="apertura">
<h3>Apertura Inglesa 📖</h3>
<p><strong>Descripción:</strong> La Apertura Inglesa (1.c4) es conocida por su flexibilidad y opciones estratégicas.</p>
<p><strong>Piezas clave:</strong> Peón de c4 y Alfil de f1.</p>
<p><strong>Pros:</strong> Permite un control central gradual.</p>
<p><strong>Contras:</strong> Puede ser lenta si no se tiene cuidado.</p>
</div>
<div class="apertura">
<h3>Defensa Grünfeld 📖</h3>
<p><strong>Descripción:</strong> La Defensa Grünfeld (1.d4 Nf6 2.c4 g6 3.Nc3 d5) es muy dinámica y popular.</p>
<p><strong>Piezas clave:</strong> Peón de d5 y los caballos.</p>
<p><strong>Pros:</strong> Ofrece juegos tácticos y de contraataque.</p>
<p><strong>Contras:</strong> Puede ser arriesgada si no se conoce bien la línea.</p>
</div>
<div class="apertura">
<h3>Apertura del Youtuber Hikaru Nakamura 📖</h3>
<p><strong>Descripción:</strong> Hikaru suele jugar aperturas rápidas y agresivas, comenzando con 1.e4, buscando un juego táctico y emocionante.</p>
<p><strong>Piezas clave:</strong> Peón en e4, Caballo en f3.</p>
<p><strong>Pros:</strong> Atrae a los oponentes a situaciones complejas rápidamente.</p>
<p><strong>Contras:</strong> Puede llevar a errores si no se está familiarizado con las líneas.</p>
</div>
<div class="apertura">
<h3>Apertura del Youtuber GothamChess 📖</h3>
<p><strong>Descripción:</strong> Levy, conocido como GothamChess, utiliza la Defensa Siciliana en sus videos, comenzando con 1.e4 c5.</p>
<p><strong>Piezas clave:</strong> Peón en c5, Caballo en f6.</p>
<p><strong>Pros:</strong> Fomenta un juego agresivo y táctico.</p>
<p><strong>Contras:</strong> Puede ser arriesgada si no se conoce bien la teoría.</p>
</div>
<div class="apertura">
<h3>Apertura del Youtuber Agadmator 📖</h3>
<p><strong>Descripción:</strong> Agadmator a menudo muestra la Defensa Francesa, comenzando con 1.e4 e6, destacando su solidez.</p>
<p><strong>Piezas clave:</strong> Peón en e6, Alfil en c8.</p>
<p><strong>Pros:</strong> Permite una sólida defensa contra 1.e4.</p>
<p><strong>Contras:</strong> Puede ser un poco pasiva si no se juega activamente.</p>
</div>
<div class="apertura">
<h3
</div>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Aperturas de Ajedrez</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
padding: 20px;
border: 1px solid #ccc;
}
#publications {
margin-top: 20px;
}
.publication {
border: 1px solid #ccc;
margin: 10px 0;
padding: 10px;
border-radius: 5px;
}
</style>
</head>
<body>
<h1>Aperturas de Ajedrez</h1>
<h2>Hacer una publicación de tu apertura</h2>
<form id="publicationForm">
<textarea id="publicationText" rows="4" cols="50" placeholder="Escribe tu apertura aquí..."></textarea><br>
<button type="submit">Publicar</button>
</form>
<div id="publications">
<h2>Publicaciones</h2>
<div id="publicationList"></div>
</div>
<script>
document.getElementById('publicationForm').addEventListener('submit', function(event) {
event.preventDefault(); // Evita el envío del formulario
// Obtén el texto de la publicación
const publicationText = document.getElementById('publicationText').value;
// Verifica que el campo no esté vacío
if (publicationText.trim() !== '') {
// Crea un nuevo elemento para la publicación
const publicationDiv = document.createElement('div');
publicationDiv.className = 'publication';
publicationDiv.innerText = publicationText;
// Agrega la nueva publicación a la lista
document.getElementById('publicationList').appendChild(publicationDiv);
// Limpia el campo de texto
document.getElementById('publicationText').value = '';
} else {
alert('Por favor, escribe algo antes de publicar.');
} <!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Aperturas de Ajedrez</title>
<style>
/* Estilos básicos */
body {
font-family: Arial, sans-serif;
margin: 20px;
}
.apertura {
margin: 20px 0;
}
.result {
display: none;
margin-top: 20px;
}
.hidden {
display: none;
}
</style>
</head>
<body>
<h1>Aperturas de Ajedrez</h1>
<!-- Barra de búsqueda -->
<div>
<input type="text" id="searchInput" placeholder="Buscar apertura..." />
<button onclick="searchApertura()">Buscar</button>
</div>
<!-- Sección de resultados -->
<div id="searchResult" class="result"></div>
<!-- Aperturas -->
<div class="apertura" data-name="Apertura Moderna">
<h3>Apertura Moderna 📖</h3>
<img src="URL_DE_IMAGEN_MODERNA" alt="Apertura Moderna" style="width: 100%; max-width: 400px;"/>
<p><strong>Descripción:</strong> La Apertura Moderna comienza con 1.e4 g6, permitiendo a las negras desarrollar su juego de manera flexible.</p>
<p><strong>Piezas clave:</strong> Peón en g6, Alfil en g7.</p>
<p><strong>Pros:</strong> Ofrece un juego dinámico y muchas oportunidades tácticas.</p>
<p><strong>Contras:</strong> Puede dar ventajas al blanco si no se maneja adecuadamente.</p>
</div>
<div class="apertura" data-name="Apertura Italiana">
<h3>Apertura Italiana 📖</h3>
<img src="URL_DE_IMAGEN_ITALIANA" alt="Apertura Italiana" style="width: 100%; max-width: 400px;"/>
<p><strong>Descripción:</strong> La Apertura Italiana comienza con 1.e4 e5 2.Nf3 Nc6 3.Bc4, buscando un rápido desarrollo de piezas.</p>
<p><strong>Piezas clave:</strong> Alfil en c4, Peón en e4.</p>
<p><strong>Pros:</strong> Permite un ataque rápido y directo al rey enemigo.</p>
<p><strong>Contras:</strong> Puede ser fácilmente contrarrestada por un buen juego defensivo negro.</p>
</div>
<!-- Agrega las otras aperturas aquí, asegurándote de añadir el atributo data-name -->
<div class="apertura" data-name="Apertura Escandinava">
<h3>Apertura Escandinava 📖</h3>
<img src="URL_DE_IMAGEN_ESCANDINAVA" alt="Apertura Escandinava" style="width: 100%; max-width: 400px;"/>
<p><strong>Descripción:</strong> Comienza con 1.e4 d5, buscando una lucha directa por el control del centro.</p>
<p><strong>Piezas clave:</strong> Peón en d5, Caballo en f6.</p>
<p><strong>Pros:</strong> Permite un juego agresivo y activo desde el inicio.</p>
<p><strong>Contras:</strong> Puede llevar a un desarrollo desfavorable si no se maneja bien.</p>
</div>
<!-- Incluye aquí más aperturas según sea necesario -->
<script>
function searchApertura() {
// Obtener el valor de búsqueda
const searchTerm = document.getElementById('searchInput').value.toLowerCase();
const resultDiv = document.getElementById('searchResult');
resultDiv.innerHTML = ''; // Limpiar resultados previos
// Obtener todas las aperturas
const aperturas = document.querySelectorAll('.apertura');
// Buscar aperturas que coincidan
let found = false;
aperturas.forEach(apertura => {
const name = apertura.getAttribute('data-name').toLowerCase();
if (name.includes(searchTerm)) {
resultDiv.innerHTML += apertura.outerHTML; // Añadir apertura a los resultados
found = true;
}
});
// Mostrar mensaje si no se encuentran resultados
if (!found) {
resultDiv.innerHTML = '<p>No se encontraron resultados.</p>';
} else {
resultDiv.style.display = 'block'; // Mostrar la sección de resultados
} <!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Compartir Aperturas de Ajedrez</title>
<style>
/* Estilos básicos */
body {
font-family: Arial, sans-serif;
margin: 20px;
}
#publicarSection {
margin-top: 40px;
display: none; /* Ocultar inicialmente */
}
.apertura {
margin: 20px 0;
border: 1px solid #ccc;
padding: 10px;
}
#tableroContainer {
display: flex;
flex-direction: column;
align-items: center;
margin-bottom: 20px;
}
</style>
</head>
<body>
<h1>Compartir Aperturas de Ajedrez</h1>
<!-- Sección de publicación -->
<div>
<button onclick="togglePublicar()">Cargar Tablero para Compartir Apertura</button>
</div>
<div id="publicarSection">
<div id="tableroContainer">
<h2>Tablero de Ajedrez</h2>
<!-- Aquí debería ir el tablero interactivo -->
<canvas id="chessboard" width="400" height="400" style="border: 1px solid black;"></canvas>
</div>
<textarea id="descripcion" rows="4" cols="50" placeholder="Descripción de la apertura..."></textarea>
<br>
<button onclick="publicarApertura()">Publicar</button>
</div>
<!-- Sección para mostrar aperturas publicadas -->
<div id="aperturasPublicadas"></div>
<script>
let tablero = document.getElementById('chessboard');
let ctx = tablero.getContext('2d');
// Función para mostrar/ocultar la sección de publicación
function togglePublicar() {
const section = document.getElementById('publicarSection');
section.style.display = section.style.display === 'none' ? 'block' : 'none';
}
// Función para dibujar el tablero de ajedrez
function drawBoard() {
const size = 50;
for (let row = 0; row < 8; row++) {
for (let col = 0; col < 8; col++) {
ctx.fillStyle = (row + col) % 2 === 0 ? '#FFF' : '#999';
ctx.fillRect(col * size, row * size, size, size);
}
}
}
// Llamar a la función para dibujar el tablero
drawBoard();
// Función para publicar la apertura
function publicarApertura() {
const descripcion = document.getElementById('descripcion').value;
const aperturasDiv = document.getElementById('aperturasPublicadas');
if (descripcion.trim() !== '') {
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Aperturas de Ajedrez</title>
<link rel="stylesheet" href="https://unpkg.com/@chrisoakman/chessboardjs@1.0.0/dist/chessboard-1.0.0.css">
<style>
#board {
width: 400px;
margin: 20px auto;
}
</style>
</head>
<body>
<h1>Aperturas de Ajedrez 📚</h1>
<button id="loadBoard">Cargar Tablero</button>
<div id="board" style="display:none;"></div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://unpkg.com/@chrisoakman/chessboardjs@1.0.0/dist/chessboard-1.0.0.js"></script>
<script>
var board = ChessBoard('board', {
draggable: true,
position: 'start',
onDragStart: function (source, piece, position, orientation) {
// no permitir mover las piezas blancas al lado negro
if (piece.search('w') !== -1 && orientation === 'black') return false;
// no permitir mover las piezas negras al lado blanco
if (piece.search('b') !== -1 && orientation === 'white') return false;
}
});
// Función para mostrar el tablero al hacer clic en el botón
document.getElementById('loadBoard').onclick = function () {
document.getElementById('board').style.display = 'block';
board.start();
}; <!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tablero de Ajedrez</title>
<link rel="stylesheet" href="https://unpkg.com/@chrisoakman/chessboardjs@1.0.0/dist/chessboard-1.0.0.min.css" />
<style>
#board {
width: 400px;
margin: 20px auto;
}
#board .square-55d63 {
background: #eee;
}
#board .square-55d63:nth-child(odd) {
background: #ddd;
}
</style>
</head>
<body> <!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tablero de Ajedrez Interactivo</title>
<link rel="stylesheet" href="https://unpkg.com/@chrisoakman/chessboardjs@1.0.0/dist/chessboard-1.0.0.min.css">
<style>
#board {
width: 400px; /* Tamaño del tablero */
margin: 20px auto; /* Centrar el tablero */
}
</style>
</head>
<body>
<h1>Tablero de Ajedrez Interactivo</h1>
<div id="board" style="width: 400px"></div>
<button id="startBtn">Empezar</button>
<button id="clearBtn">Limpiar</button>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://unpkg.com/@chrisoakman/chessboardjs@1.0.0/dist/chessboard-1.0.0.min.js"></script>
<script>
var board1 = ChessBoard('board', {
draggable: true,
position: 'start',
onDragStart: function (source, piece, position, orientation) {
// Evita que se muevan piezas de un color que no es el jugador
if ((piece.search('b') !== -1 && orientation === 'white') || (piece.search('w') !== -1 && orientation === 'black')) {
return false;
}
},
onDrop: function (source, target) {
// Aquí puedes añadir lógica para validar el movimiento
},
onSnapEnd: function () {
// Esto se ejecuta al terminar el movimiento
board1.position(board1.fen());
}
});
$('#startBtn').on('click', board1.start);
$('#clearBtn').on('click', board1.clear);
</script> <!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tablero de Ajedrez Interactivo</title>
<link rel="stylesheet" href="https://unpkg.com/@chrisoakman/chessboardjs@1.0.0/dist/chessboard-1.0.0.min.css">
<style>
#board {
width: 400px; /* Tamaño del tablero */
margin: 20px auto; /* Centrar el tablero */
}
</style>
<style>
.chessboard img {
width: 100%; /* Las imágenes de las piezas ocuparán el 100% de su celda */
height: auto; /* Mantiene la proporción de las imágenes */
}
</style>
</head>
<body>
<h1>Tablero de Ajedrez Interactivo</h1>
<div id="board" style="width: 400px"></div>
<button id="startBtn">Empezar</button>
<button id="clearBtn">Limpiar</button>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://unpkg.com/@chrisoakman/chessboardjs@1.0.0/dist/chessboard-1.0.0.min.js"></script>
<script>
// Configuración de imágenes para las piezas
const pieceSet = {
w: {
p: 'https://upload.wikimedia.org/wikipedia/commons/thumb/0/04/Chess_pawn_white.svg/100px-Chess_pawn_white.svg.png',
r: 'https://upload.wikimedia.org/wikipedia/commons/thumb/9/9c/Chess_rook_white.svg/100px-Chess_rook_white.svg.png',
n: 'https://upload.wikimedia.org/wikipedia/commons/thumb/3/3b/Chess_knight_white.svg/100px-Chess_knight_white.svg.png',
b: 'https://upload.wikimedia.org/wikipedia/commons/thumb/b/b1/Chess_bishop_white.svg/100px-Chess_bishop_white.svg.png',
q: 'https://upload.wikimedia.org/wikipedia/commons/thumb/1/15/Chess_queen_white.svg/100px-Chess_queen_white.svg.png',
k: 'https://upload.wikimedia.org/wikipedia/commons/thumb/4/42/Chess_king_white.svg/100px-Chess_king_white.svg.png'
},
b: {
p: 'https://upload.wikimedia.org/wikipedia/commons/thumb/c/c7/Chess_pawn_black.svg/100px-Chess_pawn_black.svg.png',
r: 'https://upload.wikimedia.org/wikipedia/commons/thumb/2/24/Chess_rook_black.svg/100px-Chess_rook_black.svg.png',
n: 'https://upload.wikimedia.org/wikipedia/commons/thumb/e/e1/Chess_knight_black.svg/100px-Chess_knight_black.svg.png',
b: 'https://upload.wikimedia.org/wikipedia/commons/thumb/9/98/Chess_bishop_black.svg/100px-Chess_bishop_black.svg.png',
q: 'https://upload.wikimedia.org/wikipedia/commons/thumb/4/49/Chess_queen_black.svg/100px-Chess_queen_black.svg.png',
k: 'https://upload.wikimedia.org/wikipedia/commons/thumb/3/3e/Chess_king_black.svg/100px-Chess_king_black.svg.png'
}
};
var board1 = ChessBoard('board', {
draggable: true,
position: 'start',
pieceTheme: pieceSet, // Se usa el conjunto de imágenes para las piezas
onDragStart: function (source, piece, position, orientation) {
// Evita que se muevan piezas de un color que no es el jugador
if ((piece.search('b') !== -1 && orientation === 'white') || (piece.search('w') !== -1 && orientation === 'black')) {
return false;
}
},
onDrop: function (source, target) {
// Aquí puedes añadir lógica para validar el movimiento
},
onSnapEnd: function () {
// Esto se ejecuta al terminar el movimiento
board1.position(board1.fen());
}
});
$('#startBtn').on('click', board1.start);
$('#clearBtn').on('click',
<footer>
<p>Este código es propiedad de <a href="https://lichess.org" target="_blank">lichess.org</a>. Todos los derechos reservados.</p>
</footer>
</body>
</html>
<p>Este código es propiedad de <a href="https://lichess.org" target="_blank">lichess.org</a>. Todos los derechos reservados.</p>
</footer>
</body>
</html>
</script>
</body>
</html>
}
</script>
</body>
</html>
});
</script>
</body>
</html>
</div>
</div>
</body>
</html>