api-ix commited on
Commit
c94943b
·
verified ·
1 Parent(s): 8a0305e

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +239 -574
index.html CHANGED
@@ -3,646 +3,311 @@
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>SentinelGuard | Enterprise Cyber Security Solutions</title>
7
- <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;700&family=Inter:wght@300;400;600;800&display=swap" rel="stylesheet">
8
- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
 
10
  <style>
11
- /* --- CSS VARIABLES & RESET --- */
12
  :root {
13
- --primary-color: #00ff88; /* Cyber Green */
14
- --secondary-color: #00d2ff; /* Cyber Blue */
15
- --bg-dark: #0a0b10;
16
- --bg-card: #14161f;
17
- --text-main: #e0e0e0;
18
- --text-muted: #94a3b8;
19
- --font-main: 'Inter', sans-serif;
20
- --font-code: 'JetBrains Mono', monospace;
21
- --transition: all 0.3s ease;
22
- }
23
-
24
- * {
25
- margin: 0;
26
- padding: 0;
27
- box-sizing: border-box;
28
  }
29
 
30
  body {
31
- font-family: var(--font-main);
32
- background-color: var(--bg-dark);
33
- color: var(--text-main);
34
- line-height: 1.6;
35
- overflow-x: hidden;
 
 
 
36
  }
37
 
38
- a { text-decoration: none; color: inherit; }
39
- ul { list-style: none; }
40
 
41
- /* --- UTILITIES --- */
42
  .container {
43
- max-width: 1200px;
44
- margin: 0 auto;
45
- padding: 0 20px;
46
- }
47
-
48
- .btn {
49
- display: inline-block;
50
- padding: 12px 28px;
51
- border-radius: 4px;
52
- font-weight: 600;
53
- text-transform: uppercase;
54
- letter-spacing: 1px;
55
- cursor: pointer;
56
- transition: var(--transition);
57
- font-size: 0.9rem;
58
- }
59
-
60
- .btn-primary {
61
- background: transparent;
62
- border: 1px solid var(--primary-color);
63
- color: var(--primary-color);
64
- box-shadow: 0 0 10px rgba(0, 255, 136, 0.1);
65
- }
66
-
67
- .btn-primary:hover {
68
- background: var(--primary-color);
69
- color: var(--bg-dark);
70
- box-shadow: 0 0 20px rgba(0, 255, 136, 0.4);
71
- }
72
-
73
- .section-title {
74
- text-align: center;
75
- margin-bottom: 60px;
76
- }
77
-
78
- .section-title h2 {
79
- font-size: 2.5rem;
80
- margin-bottom: 15px;
81
- }
82
-
83
- .section-title span {
84
- color: var(--primary-color);
85
- font-family: var(--font-code);
86
- font-size: 0.9rem;
87
- }
88
-
89
- /* --- HEADER --- */
90
- header {
91
- position: fixed;
92
- top: 0;
93
- width: 100%;
94
- background: rgba(10, 11, 16, 0.9);
95
- backdrop-filter: blur(10px);
96
- z-index: 1000;
97
- border-bottom: 1px solid rgba(255,255,255,0.05);
98
- }
99
-
100
- nav {
101
  display: flex;
102
- justify-content: space-between;
103
- align-items: center;
104
- height: 80px;
 
 
105
  }
106
 
107
- .logo {
108
- font-size: 1.5rem;
109
- font-weight: 800;
110
- color: white;
111
- display: flex;
112
- align-items: center;
113
- gap: 10px;
114
  }
115
 
116
- .logo i { color: var(--primary-color); }
117
-
118
- .nav-links {
 
 
 
119
  display: flex;
120
- gap: 30px;
 
121
  }
122
 
123
- .nav-links a {
124
- font-size: 0.95rem;
125
- font-weight: 500;
126
- color: var(--text-muted);
127
- transition: var(--transition);
128
  }
129
 
130
- .nav-links a:hover { color: var(--primary-color); }
 
131
 
132
- .mobile-menu-btn {
133
- display: none;
134
- color: white;
135
- font-size: 1.5rem;
136
- cursor: pointer;
137
  }
138
 
139
- /* --- HERO SECTION --- */
140
- .hero {
141
- height: 100vh;
142
  display: flex;
143
- align-items: center;
144
- justify-content: center;
145
- text-align: center;
146
- background: radial-gradient(circle at center, #1a1d29 0%, var(--bg-dark) 70%);
147
- padding-top: 80px;
148
- position: relative;
149
  }
150
 
151
- /* Background Grid Effect */
152
- .hero::before {
153
- content: '';
154
- position: absolute;
155
- top: 0; left: 0; width: 100%; height: 100%;
156
- background-image: linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
157
- linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
158
- background-size: 50px 50px;
159
- pointer-events: none;
160
  }
161
 
162
- .hero-content {
163
- z-index: 1;
164
- max-width: 800px;
165
- animation: fadeIn 1s ease-out;
166
- }
167
 
168
- .status-badge {
169
  display: inline-block;
170
- background: rgba(0, 255, 136, 0.1);
171
- color: var(--primary-color);
172
- padding: 5px 15px;
173
- border-radius: 20px;
174
- font-family: var(--font-code);
175
- font-size: 0.8rem;
176
- margin-bottom: 20px;
177
- border: 1px solid rgba(0, 255, 136, 0.2);
178
- }
179
-
180
- .hero h1 {
181
- font-size: 3.5rem;
182
- margin-bottom: 20px;
183
- line-height: 1.2;
184
- }
185
-
186
- .hero p {
187
- color: var(--text-muted);
188
- font-size: 1.1rem;
189
- margin-bottom: 30px;
190
  }
 
 
191
 
192
- /* --- SERVICES SECTION --- */
193
- .services {
194
- padding: 100px 0;
195
- }
196
-
197
- .services-grid {
198
- display: grid;
199
- grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
200
- gap: 30px;
201
- }
202
-
203
- .service-card {
204
- background: var(--bg-card);
205
- padding: 40px;
206
- border-radius: 8px;
207
- border: 1px solid rgba(255,255,255,0.05);
208
- transition: var(--transition);
209
- position: relative;
210
- overflow: hidden;
211
- }
212
-
213
- .service-card:hover {
214
- transform: translateY(-5px);
215
- border-color: var(--primary-color);
216
- }
217
-
218
- .service-card i {
219
- font-size: 2.5rem;
220
- color: var(--secondary-color);
221
- margin-bottom: 25px;
222
- }
223
 
224
- .service-card h3 {
225
- margin-bottom: 15px;
226
- font-size: 1.3rem;
227
- }
228
 
229
- .service-card p {
230
- color: var(--text-muted);
231
- font-size: 0.95rem;
232
- }
233
 
234
- /* --- STATS SECTION --- */
235
- .stats {
236
- background: linear-gradient(90deg, #0f1118 0%, #161922 100%);
237
- padding: 60px 0;
238
- border-top: 1px solid rgba(255,255,255,0.05);
239
- border-bottom: 1px solid rgba(255,255,255,0.05);
240
- }
241
 
242
- .stats-container {
243
- display: flex;
244
- justify-content: space-around;
245
- flex-wrap: wrap;
246
- text-align: center;
247
- }
248
 
249
- .stat-item h3 {
250
- font-size: 2.5rem;
251
- color: white;
252
- margin-bottom: 5px;
253
- }
254
 
255
- .stat-item p {
256
- color: var(--primary-color);
257
- font-family: var(--font-code);
258
- font-size: 0.9rem;
259
- }
260
 
261
- /* --- ABOUT/WHY US --- */
262
- .about {
263
- padding: 100px 0;
264
- display: flex;
265
- align-items: center;
266
- }
 
 
 
267
 
268
- .about-grid {
269
- display: grid;
270
- grid-template-columns: 1fr 1fr;
271
- gap: 50px;
272
- align-items: center;
273
- }
274
 
275
- .about-image {
276
- background: #14161f;
277
- height: 400px;
278
- border-radius: 8px;
279
- position: relative;
280
- border: 1px solid rgba(255,255,255,0.1);
281
- display: flex;
282
- align-items: center;
283
- justify-content: center;
284
- }
285
-
286
- /* Simulated Terminal Graphics */
287
- .terminal-window {
288
- width: 80%;
289
- background: #000;
290
- border-radius: 5px;
291
- padding: 15px;
292
- font-family: var(--font-code);
293
- font-size: 0.8rem;
294
- box-shadow: 0 0 20px rgba(0,0,0,0.5);
295
- }
296
 
297
- .code-line { margin-bottom: 5px; display: block;}
298
- .green-text { color: var(--primary-color); }
299
- .blue-text { color: var(--secondary-color); }
300
-
301
- .about-content ul {
302
- margin-top: 20px;
303
- }
304
-
305
- .about-content li {
306
- margin-bottom: 15px;
307
- display: flex;
308
- align-items: center;
309
- gap: 10px;
310
- }
311
-
312
- .about-content li i {
313
- color: var(--primary-color);
314
- }
315
-
316
- /* --- CONTACT SECTION --- */
317
- .contact {
318
- padding: 100px 0;
319
- background: #0e0f14;
320
- }
321
-
322
- .contact-container {
323
- max-width: 600px;
324
- margin: 0 auto;
325
- background: var(--bg-card);
326
- padding: 40px;
327
- border-radius: 8px;
328
- border: 1px solid rgba(255,255,255,0.05);
329
  }
330
 
331
- .form-group {
332
- margin-bottom: 20px;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
333
  }
334
 
335
- .form-group label {
336
- display: block;
337
- margin-bottom: 8px;
338
- font-size: 0.9rem;
339
- font-family: var(--font-code);
 
 
 
 
 
 
 
 
340
  }
341
 
342
- .form-control {
343
- width: 100%;
344
- padding: 12px;
345
- background: var(--bg-dark);
346
- border: 1px solid rgba(255,255,255,0.1);
347
- color: white;
348
- border-radius: 4px;
349
- font-family: var(--font-main);
350
- }
351
 
352
- .form-control:focus {
353
- outline: none;
354
- border-color: var(--primary-color);
 
 
355
  }
356
 
357
- /* --- FOOTER --- */
358
- footer {
359
- padding: 50px 0 20px;
360
- border-top: 1px solid rgba(255,255,255,0.05);
361
- text-align: center;
362
- }
 
363
 
364
- .footer-logo {
365
- font-size: 1.5rem;
366
- font-weight: bold;
367
- margin-bottom: 20px;
368
- display: block;
369
- }
370
 
371
- .social-links {
372
- margin-bottom: 20px;
373
  }
374
 
375
- .social-links a {
376
- margin: 0 10px;
377
- font-size: 1.2rem;
378
- color: var(--text-muted);
379
- transition: var(--transition);
380
  }
381
 
382
- .social-links a:hover { color: var(--primary-color); }
383
-
384
- .copyright {
385
- color: var(--text-muted);
386
- font-size: 0.8rem;
387
- }
388
 
389
- /* --- RESPONSIVE --- */
390
- @media (max-width: 768px) {
391
- .hero h1 { font-size: 2.5rem; }
392
- .nav-links {
393
- display: none;
394
- flex-direction: column;
395
- position: absolute;
396
- top: 80px;
397
- left: 0;
398
- width: 100%;
399
- background: var(--bg-card);
400
- padding: 20px;
401
- text-align: center;
402
  }
403
- .nav-links.active { display: flex; }
404
- .mobile-menu-btn { display: block; }
405
- .about-grid { grid-template-columns: 1fr; }
406
- .stats-container { gap: 30px; }
407
- }
408
 
409
- /* --- ANIMATION --- */
410
- @keyframes fadeIn {
411
- from { opacity: 0; transform: translateY(20px); }
412
- to { opacity: 1; transform: translateY(0); }
413
  }
414
- </style>
415
- </head>
416
- <body>
417
-
418
- <header>
419
- <div class="container">
420
- <nav>
421
- <a href="#" class="logo">
422
- <i class="fa-solid fa-shield-halved"></i> SentinelGuard
423
- </a>
424
- <ul class="nav-links">
425
- <li><a href="#services">Services</a></li>
426
- <li><a href="#about">About</a></li>
427
- <li><a href="#stats">Impact</a></li>
428
- <li><a href="#contact" style="color: var(--primary-color);">Contact Us</a></li>
429
- </ul>
430
- <div class="mobile-menu-btn">
431
- <i class="fa-solid fa-bars"></i>
432
- </div>
433
- </nav>
434
- </div>
435
- </header>
436
-
437
- <section class="hero">
438
- <div class="container hero-content">
439
- <span class="status-badge"><i class="fa-solid fa-circle-check"></i> Systems Operational</span>
440
- <h1>Fortify Your Digital Infrastructure</h1>
441
- <p>Advanced penetration testing, real-time threat monitoring, and enterprise compliance solutions. We protect your data so you can focus on your business.</p>
442
- <a href="#contact" class="btn btn-primary">Secure Your Assets</a>
443
- </div>
444
- </section>
445
-
446
- <section class="stats" id="stats">
447
- <div class="container stats-container">
448
- <div class="stat-item">
449
- <h3>500+</h3>
450
- <p>Vulnerabilities Patched</p>
451
- </div>
452
- <div class="stat-item">
453
- <h3>24/7</h3>
454
- <p>SOC Monitoring</p>
455
- </div>
456
- <div class="stat-item">
457
- <h3>100%</h3>
458
- <p>Compliance Rate</p>
459
- </div>
460
- </div>
461
- </section>
462
-
463
- <section class="services" id="services">
464
- <div class="container">
465
- <div class="section-title">
466
- <span>/ OUR CAPABILITIES</span>
467
- <h2>Defense Mechanisms</h2>
468
- </div>
469
- <div class="services-grid">
470
- <div class="service-card">
471
- <i class="fa-solid fa-bug"></i>
472
- <h3>Penetration Testing</h3>
473
- <p>Our ethical hackers simulate real-world attacks to identify weak points in your web apps, mobile apps, and network infrastructure before bad actors do.</p>
474
- </div>
475
- <div class="service-card">
476
- <i class="fa-solid fa-network-wired"></i>
477
- <h3>Network Security</h3>
478
- <p>Implementation of next-gen firewalls, intrusion detection systems (IDS), and secure architecture design to harden your internal perimeter.</p>
479
- </div>
480
- <div class="service-card">
481
- <i class="fa-solid fa-file-shield"></i>
482
- <h3>Compliance & Audit</h3>
483
- <p>Full-scale consultancy for GDPR, HIPAA, SOC2, and ISO 27001 compliance. We generate detailed reports to satisfy auditors and regulators.</p>
484
- </div>
485
- <div class="service-card">
486
- <i class="fa-solid fa-tower-broadcast"></i>
487
- <h3>Incident Response</h3>
488
- <p>A rapid-response team on standby 24/7. When a breach occurs, we contain the threat, eradicate the malware, and recover your data.</p>
489
- </div>
490
- <div class="service-card">
491
- <i class="fa-solid fa-user-secret"></i>
492
- <h3>Phishing Simulations</h3>
493
- <p>Train your employees to recognize social engineering attacks through customized, safe email phishing campaigns and educational workshops.</p>
494
- </div>
495
- <div class="service-card">
496
- <i class="fa-solid fa-cloud-lock"></i>
497
- <h3>Cloud Security</h3>
498
- <p>Specialized security configurations for AWS, Azure, and Google Cloud environments, ensuring your S3 buckets and instances are locked down.</p>
499
- </div>
500
- </div>
501
- </div>
502
- </section>
503
-
504
- <section class="about" id="about">
505
- <div class="container">
506
- <div class="about-grid">
507
- <div class="about-image">
508
- <div class="terminal-window">
509
- <span class="code-line blue-text">root@sentinel:~#</span> <span class="code-line">./scan_network.sh -v</span>
510
- <br>
511
- <span class="code-line">Initializing scan... [OK]</span>
512
- <span class="code-line">Checking firewall ports... <span class="green-text">SECURE</span></span>
513
- <span class="code-line">Analyzing traffic patterns... <span class="green-text">NORMAL</span></span>
514
- <span class="code-line">Detecting anomalies... <span class="green-text">NONE FOUND</span></span>
515
- <br>
516
- <span class="code-line blue-text">root@sentinel:~#</span> <span class="code-line">_</span>
517
- </div>
518
- </div>
519
- <div class="about-content">
520
- <div class="section-title" style="text-align: left; margin-bottom: 20px;">
521
- <span>/ WHO WE ARE</span>
522
- <h2>Elite Cyber Intelligence</h2>
523
- </div>
524
- <p>SentinelGuard was founded by former military intelligence officers and Fortune 500 security architects. We don't just use tools; we understand the psychology of the attacker.</p>
525
- <ul>
526
- <li><i class="fa-solid fa-check"></i> Certified Ethical Hackers (CEH)</li>
527
- <li><i class="fa-solid fa-check"></i> CISSP Certified Consultants</li>
528
- <li><i class="fa-solid fa-check"></i> Military-Grade Encryption Standards</li>
529
- </ul>
530
- </div>
531
- </div>
532
- </div>
533
- </section>
534
-
535
- <section class="contact" id="contact">
536
- <div class="container">
537
- <div class="section-title">
538
- <span>/ GET IN TOUCH</span>
539
- <h2>Request a Consultation</h2>
540
- </div>
541
- <div class="contact-container">
542
- <form id="contactForm">
543
- <div class="form-group">
544
- <label>Company Name</label>
545
- <input type="text" class="form-control" placeholder="e.g. Acme Corp" required>
546
- </div>
547
- <div class="form-group">
548
- <label>Email Address</label>
549
- <input type="email" class="form-control" placeholder="security@acme.com" required>
550
- </div>
551
- <div class="form-group">
552
- <label>Service of Interest</label>
553
- <select class="form-control">
554
- <option>Penetration Testing</option>
555
- <option>Compliance Audit</option>
556
- <option>Incident Response Retainer</option>
557
- <option>General Inquiry</option>
558
- </select>
559
- </div>
560
- <div class="form-group">
561
- <label>Message</label>
562
- <textarea class="form-control" rows="4" placeholder="Briefly describe your security needs..."></textarea>
563
- </div>
564
- <button type="submit" class="btn btn-primary" style="width: 100%;">Initialize Comm Link</button>
565
- </form>
566
- </div>
567
- </div>
568
- </section>
569
-
570
- <footer>
571
- <div class="container">
572
- <a href="#" class="footer-logo">SentinelGuard</a>
573
- <div class="social-links">
574
- <a href="#"><i class="fa-brands fa-linkedin"></i></a>
575
- <a href="#"><i class="fa-brands fa-twitter"></i></a>
576
- <a href="#"><i class="fa-brands fa-github"></i></a>
577
- </div>
578
- <p class="copyright">&copy; 2023 SentinelGuard Security Inc. All Systems Operational.</p>
579
- </div>
580
- </footer>
581
-
582
- <script>
583
- // Mobile Menu Toggle
584
- const mobileBtn = document.querySelector('.mobile-menu-btn');
585
- const navLinks = document.querySelector('.nav-links');
586
-
587
- mobileBtn.addEventListener('click', () => {
588
- navLinks.classList.toggle('active');
589
- });
590
 
591
- // Smooth Scrolling for Anchors
592
- document.querySelectorAll('a[href^="#"]').forEach(anchor => {
593
- anchor.addEventListener('click', function (e) {
594
- e.preventDefault();
595
- navLinks.classList.remove('active'); // Close menu on click
596
- document.querySelector(this.getAttribute('href')).scrollIntoView({
597
- behavior: 'smooth'
598
- });
599
- });
600
- });
601
-
602
- // Simple Form Handler (Prevents refresh for demo)
603
- document.getElementById('contactForm').addEventListener('submit', function(e) {
604
- e.preventDefault();
605
- const btn = this.querySelector('button');
606
- const originalText = btn.innerText;
607
-
608
- btn.innerText = "Transmitting...";
609
- btn.style.opacity = "0.7";
610
-
611
- setTimeout(() => {
612
- btn.innerText = "Message Sent Successfully";
613
- btn.style.background = "var(--primary-color)";
614
- btn.style.color = "var(--bg-dark)";
615
- this.reset();
616
-
617
- setTimeout(() => {
618
- btn.innerText = originalText;
619
- btn.style.background = "transparent";
620
- btn.style.color = "var(--primary-color)";
621
- btn.style.opacity = "1";
622
- }, 3000);
623
- }, 1500);
624
  });
625
 
626
- // Scroll Animation (Fade Up)
627
- const observerOptions = {
628
- threshold: 0.1
629
- };
630
 
631
- const observer = new IntersectionObserver((entries) => {
632
- entries.forEach(entry => {
633
- if (entry.isIntersecting) {
634
- entry.target.style.opacity = "1";
635
- entry.target.style.transform = "translateY(0)";
636
- }
637
- });
638
- }, observerOptions);
639
 
640
- document.querySelectorAll('.service-card, .section-title, .about-grid').forEach(el => {
641
- el.style.opacity = "0";
642
- el.style.transform = "translateY(20px)";
643
- el.style.transition = "all 0.6s ease-out";
644
- observer.observe(el);
645
- });
646
  </script>
647
  </body>
648
  </html>
 
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Arcane Chess Analyzer</title>
7
+
8
+ <link rel="stylesheet" href="https://unpkg.com/@chrisoakman/chessboardjs@1.0.0/dist/chessboard-1.0.0.min.css">
9
 
10
  <style>
 
11
  :root {
12
+ --bg-color: #212121;
13
+ --text-color: #e0e0e0;
14
+ --accent-color: #4caf50;
15
+ --danger-color: #f44336;
 
 
 
 
 
 
 
 
 
 
 
16
  }
17
 
18
  body {
19
+ font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
20
+ background-color: var(--bg-color);
21
+ color: var(--text-color);
22
+ display: flex;
23
+ flex-direction: column;
24
+ align-items: center;
25
+ margin: 0;
26
+ padding: 20px;
27
  }
28
 
29
+ h1 { margin-bottom: 10px; }
 
30
 
 
31
  .container {
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
32
  display: flex;
33
+ flex-wrap: wrap;
34
+ gap: 20px;
35
+ justify-content: center;
36
+ max-width: 900px;
37
+ width: 100%;
38
  }
39
 
40
+ #board {
41
+ width: 400px;
 
 
 
 
 
42
  }
43
 
44
+ .panel {
45
+ flex: 1;
46
+ min-width: 300px;
47
+ background: #333;
48
+ padding: 20px;
49
+ border-radius: 8px;
50
  display: flex;
51
+ flex-direction: column;
52
+ gap: 15px;
53
  }
54
 
55
+ .stats-box {
56
+ background: #444;
57
+ padding: 10px;
58
+ border-radius: 5px;
59
+ border-left: 4px solid var(--accent-color);
60
  }
61
 
62
+ .stats-label { font-size: 0.85em; color: #aaa; display: block; margin-bottom: 5px; }
63
+ .stats-value { font-size: 1.1em; font-weight: bold; }
64
 
65
+ #best-line {
66
+ font-family: monospace;
67
+ color: #81c784;
 
 
68
  }
69
 
70
+ .controls {
 
 
71
  display: flex;
72
+ gap: 10px;
73
+ margin-top: auto;
 
 
 
 
74
  }
75
 
76
+ button {
77
+ padding: 10px 20px;
78
+ border: none;
79
+ border-radius: 4px;
80
+ cursor: pointer;
81
+ font-weight: bold;
82
+ transition: opacity 0.2s;
 
 
83
  }
84
 
85
+ button:hover { opacity: 0.9; }
86
+
87
+ #analyzeBtn { background-color: var(--accent-color); color: white; }
88
+ #resetBtn { background-color: #555; color: white; }
89
+ #flipBtn { background-color: #555; color: white; }
90
 
91
+ .status-indicator {
92
  display: inline-block;
93
+ width: 10px;
94
+ height: 10px;
95
+ border-radius: 50%;
96
+ background-color: #ccc;
97
+ margin-right: 5px;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
98
  }
99
+ .status-indicator.ready { background-color: var(--accent-color); }
100
+ .status-indicator.thinking { background-color: #ffeb3b; animation: pulse 1s infinite; }
101
 
102
+ @keyframes pulse { 0% { opacity: 1; } 50% { opacity: 0.5; } 100% { opacity: 1; } }
103
+ </style>
104
+ </head>
105
+ <body>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
106
 
107
+ <h1>♟️ Arcane Chess Analyzer</h1>
 
 
 
108
 
109
+ <div class="container">
110
+ <div id="board"></div>
 
 
111
 
112
+ <div class="panel">
113
+ <div style="display: flex; align-items: center; justify-content: space-between;">
114
+ <h3>Engine Analysis</h3>
115
+ <div><span id="engineStatus" class="status-indicator"></span><span id="engineText">Loading...</span></div>
116
+ </div>
 
 
117
 
118
+ <div class="stats-box">
119
+ <span class="stats-label">Evaluation</span>
120
+ <span class="stats-value" id="evaluation">0.00</span>
121
+ </div>
 
 
122
 
123
+ <div class="stats-box">
124
+ <span class="stats-label">Best Route (Best Move & Continuation)</span>
125
+ <span class="stats-value" id="best-line">WAITING FOR MOVE...</span>
126
+ </div>
 
127
 
128
+ <div class="stats-box">
129
+ <span class="stats-label">Game Status</span>
130
+ <span class="stats-value" id="gameStatus">White to move</span>
131
+ </div>
 
132
 
133
+ <div class="controls">
134
+ <button id="resetBtn">Reset Board</button>
135
+ <button id="flipBtn">Flip Board</button>
136
+ </div>
137
+ <p style="font-size: 0.8em; color: #777; margin-top: 10px;">
138
+ Drag pieces to play. The engine analyzes automatically.
139
+ </p>
140
+ </div>
141
+ </div>
142
 
143
+ <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
144
+ <script src="https://unpkg.com/@chrisoakman/chessboardjs@1.0.0/dist/chessboard-1.0.0.min.js"></script>
145
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/chess.js/0.10.3/chess.min.js"></script>
 
 
 
146
 
147
+ <script>
148
+ // --- CONFIGURATION ---
149
+ const STOCKFISH_PATH = 'https://cdnjs.cloudflare.com/ajax/libs/stockfish.js/10.0.0/stockfish.js';
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
150
 
151
+ let board = null;
152
+ let game = new Chess();
153
+ let engine = null;
154
+ let evaluation = 0;
155
+
156
+ // --- UI ELEMENTS ---
157
+ const $status = $('#gameStatus');
158
+ const $fen = $('#fen');
159
+ const $evaluation = $('#evaluation');
160
+ const $bestLine = $('#best-line');
161
+ const $engineStatus = $('#engineStatus');
162
+ const $engineText = $('#engineText');
163
+
164
+ // --- INITIALIZATION ---
165
+ function initGame() {
166
+ // Initialize Board
167
+ const config = {
168
+ draggable: true,
169
+ position: 'start',
170
+ onDragStart: onDragStart,
171
+ onDrop: onDrop,
172
+ onSnapEnd: onSnapEnd
173
+ };
174
+ board = Chessboard('board', config);
175
+
176
+ // Initialize Engine
177
+ initStockfish();
178
+
179
+ updateStatus();
 
 
 
180
  }
181
 
182
+ // --- STOCKFISH ENGINE LOGIC ---
183
+ function initStockfish() {
184
+ // Note: Web Workers require the file to be served, not local file://
185
+ try {
186
+ engine = new Worker(STOCKFISH_PATH);
187
+
188
+ engine.onmessage = function(event) {
189
+ const line = event.data;
190
+
191
+ // Allow the engine to start
192
+ if (line === 'uciok') {
193
+ $engineStatus.addClass('ready');
194
+ $engineText.text('Engine Ready');
195
+ }
196
+
197
+ // Parse Analysis info (Depth, Score, PV)
198
+ if (line.startsWith('info') && line.includes('score cp')) {
199
+ const matchScore = line.match(/score cp (-?\d+)/);
200
+ const matchMate = line.match(/score mate (-?\d+)/);
201
+ const matchPv = line.match(/ pv (.+)/);
202
+
203
+ if (matchMate) {
204
+ $evaluation.text(`Mate in ${Math.abs(matchMate[1])}`);
205
+ $evaluation.css('color', '#f44336');
206
+ } else if (matchScore) {
207
+ // Centipawns to standard pawn value
208
+ const score = parseInt(matchScore[1]) / 100;
209
+ // If black to move, negate score for absolute evaluation
210
+ const finalScore = game.turn() === 'b' ? -score : score;
211
+ $evaluation.text(finalScore > 0 ? `+${finalScore}` : finalScore);
212
+ $evaluation.css('color', finalScore >= 0 ? '#4caf50' : '#f44336');
213
+ }
214
+
215
+ if (matchPv) {
216
+ $bestLine.text(matchPv[1]);
217
+ }
218
+ }
219
+ };
220
+
221
+ engine.postMessage('uci');
222
+ engine.postMessage('isready');
223
+
224
+ } catch (e) {
225
+ console.error("Stockfish failed to load. Are you running on a local server?");
226
+ $engineText.text('Engine Error (CORS)');
227
+ }
228
  }
229
 
230
+ function analyzePosition() {
231
+ if (!engine) return;
232
+
233
+ $engineStatus.removeClass('ready').addClass('thinking');
234
+ $engineText.text('Calculating...');
235
+
236
+ // Get current FEN
237
+ const fen = game.fen();
238
+
239
+ // Send to Stockfish
240
+ engine.postMessage(`position fen ${fen}`);
241
+ // Search to depth 15 (good balance of speed/strength for web)
242
+ engine.postMessage('go depth 15');
243
  }
244
 
245
+ // --- CHESS LOGIC (Chess.js) ---
246
+ function onDragStart(source, piece, position, orientation) {
247
+ // Do not pick up pieces if the game is over
248
+ if (game.game_over()) return false;
 
 
 
 
 
249
 
250
+ // Only pick up pieces for the side to move
251
+ if ((game.turn() === 'w' && piece.search(/^b/) !== -1) ||
252
+ (game.turn() === 'b' && piece.search(/^w/) !== -1)) {
253
+ return false;
254
+ }
255
  }
256
 
257
+ function onDrop(source, target) {
258
+ // see if the move is legal
259
+ const move = game.move({
260
+ from: source,
261
+ to: target,
262
+ promotion: 'q' // NOTE: always promote to a queen for simplicity
263
+ });
264
 
265
+ // illegal move
266
+ if (move === null) return 'snapback';
 
 
 
 
267
 
268
+ updateStatus();
269
+ analyzePosition(); // Trigger analysis after move
270
  }
271
 
272
+ function onSnapEnd() {
273
+ board.position(game.fen());
 
 
 
274
  }
275
 
276
+ function updateStatus() {
277
+ let status = '';
278
+ let moveColor = 'White';
279
+ if (game.turn() === 'b') {
280
+ moveColor = 'Black';
281
+ }
282
 
283
+ if (game.in_checkmate()) {
284
+ status = 'Game over, ' + moveColor + ' is in checkmate.';
285
+ } else if (game.in_draw()) {
286
+ status = 'Game over, drawn position';
287
+ } else {
288
+ status = moveColor + ' to move';
289
+ if (game.in_check()) {
290
+ status += ', ' + moveColor + ' is in check';
291
+ }
 
 
 
 
292
  }
 
 
 
 
 
293
 
294
+ $status.text(status);
 
 
 
295
  }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
296
 
297
+ // --- BUTTONS ---
298
+ $('#resetBtn').on('click', function() {
299
+ game.reset();
300
+ board.start();
301
+ $bestLine.text('...');
302
+ $evaluation.text('0.00');
303
+ updateStatus();
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
304
  });
305
 
306
+ $('#flipBtn').on('click', board.flip);
 
 
 
307
 
308
+ // Start everything
309
+ $(document).ready(initGame);
 
 
 
 
 
 
310
 
 
 
 
 
 
 
311
  </script>
312
  </body>
313
  </html>