Hugging Face's logo

Spaces:
soiz1
/
map-editor
Running

App Files Community
soiz1 commited on
Commit
93eee4d
·
verified ·
1 Parent(s): 9d5e934

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +643 -575
index.html CHANGED
@@ -11,668 +11,736 @@
11
  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.3/dist/leaflet.css">
12
  <script src="https://cdn.tailwindcss.com"></script>
13
  <style>
14
- :root {
15
- --hacker-primary: #00ffff;
16
- --hacker-secondary: #0088ff;
17
- --hacker-bg: #001a33;
18
- --hacker-text: #e0e0e0;
19
- --hacker-accent: #ff00ff;
20
- --hacker-border: #0066ff;
21
- }
22
 
23
- body {
24
- font-family: 'Source Code Pro', monospace;
25
- background-color: var(--hacker-bg);
26
- color: var(--hacker-text);
27
- background-image: radial-gradient(circle at 10% 20%, rgba(0, 180, 255, 0.05) 0%, rgba(0, 50, 100, 0.1) 90%);
28
- min-height: 100vh;
29
- overflow-x: hidden;
30
- }
31
 
32
- .hacker-header {
33
- background: linear-gradient(90deg, rgba(0, 40, 80, 0.8) 0%, rgba(0, 80, 160, 0.6) 100%);
34
- border-bottom: 1px solid var(--hacker-border);
35
- box-shadow: 0 0 15px rgba(0, 200, 255, 0.3);
36
- padding: 1rem;
37
- margin-bottom: 1rem;
38
- position: relative;
39
- overflow: hidden;
40
- }
41
 
42
- .hacker-header::before {
43
- content: "";
44
- position: absolute;
45
- top: 0;
46
- left: 0;
47
- width: 100%;
48
- height: 100%;
49
- background: linear-gradient(90deg,
50
- transparent 0%,
51
- rgba(0, 255, 255, 0.1) 50%,
52
- transparent 100%);
53
- animation: scanline 5s linear infinite;
54
- }
55
 
56
- @keyframes scanline {
57
- 0% { transform: translateX(-100%); }
58
- 100% { transform: translateX(100%); }
59
- }
60
 
61
- #map {
62
- height: 600px;
63
- width: 100%;
64
- border: 2px solid var(--hacker-border);
65
- box-shadow: 0 0 20px rgba(0, 200, 255, 0.4);
66
- filter: hue-rotate(0deg) saturate(1.2);
67
- transition: all 0.3s ease;
68
- }
69
 
70
- #map:hover {
71
- box-shadow: 0 0 30px rgba(0, 200, 255, 0.6);
72
- }
73
 
74
- #marker-editor {
75
- display: none;
76
- position: absolute;
77
- top: 10px;
78
- left: 10px;
79
- background: rgba(0, 20, 40, 0.9);
80
- padding: 1.5rem;
81
- border-radius: 0;
82
- border: 1px solid var(--hacker-border);
83
- box-shadow: 0 0 20px rgba(0, 200, 255, 0.4);
84
- z-index: 1000;
85
- cursor: move;
86
- font-family: 'Source Code Pro', monospace;
87
- color: var(--hacker-text);
88
- }
 
 
 
89
 
90
- #marker-editor h3 {
91
- color: var(--hacker-primary);
92
- text-shadow: 0 0 5px var(--hacker-primary);
93
- border-bottom: 1px solid var(--hacker-border);
94
- padding-bottom: 0.5rem;
95
- margin-bottom: 1rem;
96
- font-weight: 700;
97
- }
98
 
99
- #marker-editor label {
100
- color: var(--hacker-secondary);
101
- display: block;
102
- margin-bottom: 0.5rem;
103
- font-size: 0.9rem;
104
- }
105
 
106
- #marker-editor input,
107
- #marker-editor textarea {
108
- background: rgba(0, 10, 20, 0.8);
109
- border: 1px solid var(--hacker-border);
110
- color: var(--hacker-primary);
111
- padding: 0.5rem;
112
- margin-bottom: 1rem;
113
- width: 100%;
114
- font-family: 'Source Code Pro', monospace;
115
- transition: all 0.3s ease;
116
- }
117
 
118
- #marker-editor input:focus,
119
- #marker-editor textarea:focus {
120
- outline: none;
121
- border-color: var(--hacker-primary);
122
- box-shadow: 0 0 10px rgba(0, 255, 255, 0.5);
123
- }
124
 
125
- #marker-editor button {
126
- background: linear-gradient(180deg, rgba(0, 100, 200, 0.8) 0%, rgba(0, 50, 150, 0.8) 100%);
127
- color: white;
128
- border: 1px solid var(--hacker-border);
129
- padding: 0.75rem 1.5rem;
130
- margin: 0.5rem 0;
131
- cursor: pointer;
132
- font-family: 'Source Code Pro', monospace;
133
- font-weight: 700;
134
- text-transform: uppercase;
135
- letter-spacing: 1px;
136
- transition: all 0.3s ease;
137
- width: 100%;
138
- }
139
 
140
- #marker-editor button:hover {
141
- background: linear-gradient(180deg, rgba(0, 150, 255, 0.8) 0%, rgba(0, 80, 180, 0.8) 100%);
142
- box-shadow: 0 0 15px rgba(0, 200, 255, 0.6);
143
- transform: translateY(-2px);
144
- }
145
 
146
- #marker-editor button#delete-marker {
147
- background: linear-gradient(180deg, rgba(200, 0, 0, 0.8) 0%, rgba(150, 0, 0, 0.8) 100%);
148
- }
149
 
150
- #marker-editor button#delete-marker:hover {
151
- background: linear-gradient(180deg, rgba(255, 50, 50, 0.8) 0%, rgba(200, 0, 0, 0.8) 100%);
152
- }
153
 
154
- #icon-preview {
155
- display: none;
156
- margin: 1rem 0;
157
- border: 1px solid var(--hacker-border);
158
- max-width: 100%;
159
- box-shadow: 0 0 10px rgba(0, 200, 255, 0.3);
160
- }
161
 
162
- #icon-settings {
163
- display: none;
164
- margin-top: 1rem;
165
- border-top: 1px dashed var(--hacker-border);
166
- padding-top: 1rem;
167
- }
168
 
169
- #icon-settings label {
170
- color: var(--hacker-secondary);
171
- margin-bottom: 0.5rem;
172
- }
173
 
174
- input[type=range] {
175
- -webkit-appearance: none;
176
- width: 100%;
177
- height: 5px;
178
- background: rgba(0, 50, 100, 0.5);
179
- border-radius: 5px;
180
- margin: 1rem 0;
181
- }
182
 
183
- input[type=range]::-webkit-slider-thumb {
184
- -webkit-appearance: none;
185
- width: 15px;
186
- height: 15px;
187
- background: var(--hacker-primary);
188
- border-radius: 50%;
189
- cursor: pointer;
190
- box-shadow: 0 0 5px var(--hacker-primary);
191
- }
192
 
193
- input[type=number] {
194
- width: 60px;
195
- margin-left: 1rem;
196
- }
197
 
198
- .hacker-btn {
199
- background: linear-gradient(180deg, rgba(0, 100, 200, 0.8) 0%, rgba(0, 50, 150, 0.8) 100%);
200
- color: white;
201
- border: 1px solid var(--hacker-border);
202
- padding: 0.75rem 1.5rem;
203
- margin: 0.5rem;
204
- cursor: pointer;
205
- font-family: 'Source Code Pro', monospace;
206
- font-weight: 700;
207
- text-transform: uppercase;
208
- letter-spacing: 1px;
209
- transition: all 0.3s ease;
210
- }
211
 
212
- .hacker-btn:hover {
213
- background: linear-gradient(180deg, rgba(0, 150, 255, 0.8) 0%, rgba(0, 80, 180, 0.8) 100%);
214
- box-shadow: 0 0 15px rgba(0, 200, 255, 0.6);
215
- transform: translateY(-2px);
216
- }
217
 
218
- .hacker-btn.danger {
219
- background: linear-gradient(180deg, rgba(200, 0, 0, 0.8) 0%, rgba(150, 0, 0, 0.8) 100%);
220
- }
221
 
222
- .hacker-btn.danger:hover {
223
- background: linear-gradient(180deg, rgba(255, 50, 50, 0.8) 0%, rgba(200, 0, 0, 0.8) 100%);
224
- }
225
 
226
- .hacker-btn.secondary {
227
- background: linear-gradient(180deg, rgba(100, 0, 200, 0.8) 0%, rgba(50, 0, 150, 0.8) 100%);
228
- }
229
 
230
- .hacker-btn.secondary:hover {
231
- background: linear-gradient(180deg, rgba(150, 0, 255, 0.8) 0%, rgba(80, 0, 180, 0.8) 100%);
232
- }
233
 
234
- .hacker-container {
235
- background: rgba(0, 10, 20, 0.7);
236
- border: 1px solid var(--hacker-border);
237
- padding: 1.5rem;
238
- margin: 1rem 0;
239
- box-shadow: 0 0 15px rgba(0, 100, 200, 0.3);
240
- }
241
 
242
- .hacker-title {
243
- color: var(--hacker-primary);
244
- text-shadow: 0 0 5px var(--hacker-primary);
245
- font-weight: 700;
246
- margin-bottom: 1rem;
247
- border-bottom: 1px solid var(--hacker-border);
248
- padding-bottom: 0.5rem;
249
- }
250
 
251
- #output-html {
252
- background: rgba(0, 5, 10, 0.9);
253
- border: 1px solid var(--hacker-border);
254
- padding: 1rem;
255
- font-family: 'Source Code Pro', monospace;
256
- color: var(--hacker-primary);
257
- white-space: pre-wrap;
258
- word-break: break-all;
259
- max-height: 300px;
260
- overflow-y: auto;
261
- margin: 1rem 0;
262
- box-shadow: inset 0 0 10px rgba(0, 50, 100, 0.5);
263
- }
264
 
265
- #loading {
266
- position: fixed;
267
- top: 0;
268
- left: 0;
269
- width: 100%;
270
- height: 100%;
271
- background-color: rgba(0, 10, 20, 0.9);
272
- display: flex;
273
- flex-direction: column;
274
- align-items: center;
275
- justify-content: center;
276
- font-size: 1.5rem;
277
- z-index: 9999;
278
- color: var(--hacker-primary);
279
- text-shadow: 0 0 5px var(--hacker-primary);
280
- }
281
 
282
- .loader {
283
- width: 100px;
284
- aspect-ratio: 1;
285
- padding: 10px;
286
- box-sizing: border-box;
287
- display: grid;
288
- filter: blur(5px) contrast(10) hue-rotate(180deg);
289
- mix-blend-mode: lighten;
290
- }
291
 
292
- .loader:before,
293
- .loader:after {
294
- content: "";
295
- grid-area: 1/1;
296
- width: 40px;
297
- height: 40px;
298
- background: var(--hacker-primary);
299
- animation: l7 2s infinite;
300
- box-shadow: 0 0 5px var(--hacker-primary);
301
- }
302
 
303
- .loader:after {
304
- animation-delay: -1s;
305
- }
306
 
307
- @keyframes l7 {
308
- 0% { transform: translate(0, 0); }
309
- 25% { transform: translate(100%, 0); }
310
- 50% { transform: translate(100%, 100%); }
311
- 75% { transform: translate(0, 100%); }
312
- 100% { transform: translate(0, 0); }
313
- }
314
 
315
- .terminal-line {
316
- position: relative;
317
- padding-left: 1.5rem;
318
- margin-bottom: 0.5rem;
319
- }
320
 
321
- .terminal-line::before {
322
- content: ">";
323
- position: absolute;
324
- left: 0;
325
- color: var(--hacker-accent);
326
- text-shadow: 0 0 5px var(--hacker-accent);
327
- }
328
 
329
- .blink {
330
- animation: blink 1s step-end infinite;
331
- }
332
 
333
- @keyframes blink {
334
- from, to { opacity: 1; }
335
- 50% { opacity: 0; }
336
- }
337
 
338
- .glow-text {
339
- text-shadow: 0 0 5px currentColor;
340
- }
341
 
342
- .glow-box {
343
- box-shadow: 0 0 10px currentColor;
344
- }
345
 
346
- .hacker-divider {
347
- height: 1px;
348
- background: linear-gradient(90deg, transparent 0%, var(--hacker-border) 50%, transparent 100%);
349
- margin: 1rem 0;
350
- }
351
 
352
- body::-webkit-scrollbar {
353
- width: 8px;
354
- background-color: rgba(0, 50, 100, 0.3);
355
- }
356
 
357
- body::-webkit-scrollbar-thumb {
358
- background: var(--hacker-primary);
359
- border-radius: 4px;
360
- box-shadow: inset 0 0 5px rgba(0, 200, 255, 0.5);
361
- }
362
 
363
- /* ギャラリー用スタイル */
364
- #gallery-container {
365
- display: none;
366
- position: fixed;
367
- top: 0;
368
- left: 0;
369
- width: 100%;
370
- height: 100%;
371
- background-color: rgba(0, 10, 20, 0.95);
372
- z-index: 2000;
373
- overflow-y: auto;
374
- padding: 2rem;
375
- }
 
 
 
 
 
376
 
377
- .gallery-map-item {
378
- background: rgba(0, 20, 40, 0.8);
379
- border: 1px solid var(--hacker-border);
380
- padding: 1rem;
381
- margin-bottom: 1rem;
382
- transition: all 0.3s ease;
383
- }
 
384
 
385
- .gallery-map-item:hover {
386
- background: rgba(0, 40, 80, 0.8);
387
- box-shadow: 0 0 15px rgba(0, 200, 255, 0.4);
388
- }
 
389
 
390
- .gallery-map-title {
391
- color: var(--hacker-primary);
392
- font-weight: bold;
393
- margin-bottom: 0.5rem;
394
- cursor: pointer;
395
- padding: 0.25rem;
396
- border-radius: 3px;
397
- }
 
 
398
 
399
- .gallery-map-title:hover {
400
- background: rgba(0, 100, 200, 0.3);
401
- }
402
 
403
- .gallery-map-title.editing {
404
- background: rgba(0, 100, 200, 0.5);
405
- outline: 1px solid var(--hacker-primary);
406
- }
 
 
407
 
408
- .gallery-map-preview {
409
- height: 150px;
410
- background-color: rgba(0, 30, 60, 0.5);
411
- margin-bottom: 0.5rem;
412
- display: flex;
413
- align-items: center;
414
- justify-content: center;
415
- color: var(--hacker-secondary);
416
- font-size: 0.9rem;
417
- }
418
 
419
- .gallery-map-actions {
420
- display: flex;
421
- gap: 0.5rem;
422
- }
423
 
424
- .gallery-btn {
425
- flex: 1;
426
- padding: 0.5rem;
427
- font-size: 0.8rem;
428
- }
429
 
430
- #save-map-modal {
431
- display: none;
432
- position: fixed;
433
- top: 50%;
434
- left: 50%;
435
- transform: translate(-50%, -50%);
436
- background: rgba(0, 20, 40, 0.95);
437
- border: 1px solid var(--hacker-border);
438
- padding: 2rem;
439
- z-index: 2001;
440
- width: 80%;
441
- max-width: 500px;
442
- }
443
 
444
- #save-map-modal h3 {
445
- color: var(--hacker-primary);
446
- margin-bottom: 1rem;
447
- text-align: center;
448
- }
 
 
 
 
 
 
 
449
 
450
- #save-map-name {
451
- width: 100%;
452
- margin-bottom: 1rem;
453
- background: rgba(0, 10, 20, 0.8);
454
- border: 1px solid var(--hacker-border);
455
- color: var(--hacker-text);
456
- padding: 0.5rem;
457
- }
458
 
459
- .disabled {
460
- opacity: 0.5;
461
- pointer-events: none;
462
- cursor: not-allowed;
463
- }
 
 
464
 
465
- /* レイヤーエディタ用スタイル */
466
- #layer-editor {
467
- display: none;
468
- position: absolute;
469
- top: 10px;
470
- right: 10px;
471
- background: rgba(0, 20, 40, 0.9);
472
- padding: 1.5rem;
473
- border-radius: 0;
474
- border: 1px solid var(--hacker-border);
475
- box-shadow: 0 0 20px rgba(0, 200, 255, 0.4);
476
- z-index: 1000;
477
- cursor: move;
478
- font-family: 'Source Code Pro', monospace;
479
- color: var(--hacker-text);
480
- width: 350px;
481
- max-height: 80vh;
482
- overflow-y: auto;
483
- }
484
 
485
- #layer-editor h3 {
486
- color: var(--hacker-primary);
487
- text-shadow: 0 0 5px var(--hacker-primary);
488
- border-bottom: 1px solid var(--hacker-border);
489
- padding-bottom: 0.5rem;
490
- margin-bottom: 1rem;
491
- font-weight: 700;
492
- }
493
 
494
- .layer-tabs {
495
- display: flex;
496
- margin-bottom: 1rem;
497
- border-bottom: 1px solid var(--hacker-border);
498
- }
 
 
 
 
 
 
 
 
 
 
 
499
 
500
- .layer-tab {
501
- padding: 0.5rem 1rem;
502
- cursor: pointer;
503
- border: 1px solid transparent;
504
- margin-right: 0.5rem;
505
- }
 
506
 
507
- .layer-tab.active {
508
- border: 1px solid var(--hacker-border);
509
- border-bottom: 1px solid rgba(0, 20, 40, 0.9);
510
- margin-bottom: -1px;
511
- background: rgba(0, 100, 200, 0.3);
512
- }
 
 
513
 
514
- .layer-tab-content {
515
- display: none;
516
- }
517
 
518
- .layer-tab-content.active {
519
- display: block;
520
- }
 
521
 
522
- .layer-form-group {
523
- margin-bottom: 1rem;
524
- }
 
 
 
525
 
526
- .layer-form-group label {
527
- display: block;
528
- margin-bottom: 0.5rem;
529
- color: var(--hacker-secondary);
530
- }
 
531
 
532
- .layer-form-group input,
533
- .layer-form-group textarea,
534
- .layer-form-group select {
535
- width: 100%;
536
- padding: 0.5rem;
537
- background: rgba(0, 10, 20, 0.8);
538
- border: 1px solid var(--hacker-border);
539
- color: var(--hacker-text);
540
- font-family: 'Source Code Pro', monospace;
541
- }
542
 
543
- .layer-form-group input[type="color"] {
544
- height: 40px;
545
- padding: 0.2rem;
546
- }
 
 
547
 
548
- .layer-form-actions {
549
- margin-top: 1rem;
550
- display: flex;
551
- gap: 0.5rem;
552
- }
553
 
554
- .layer-form-actions button {
555
- flex: 1;
556
- }
 
 
 
 
 
 
 
557
 
558
- #plugin-manager {
559
- display: none;
560
- position: absolute;
561
- top: 50%;
562
- left: 50%;
563
- transform: translate(-50%, -50%);
564
- background: rgba(0, 20, 40, 0.95);
565
- border: 1px solid var(--hacker-border);
566
- padding: 2rem;
567
- z-index: 2002;
568
- width: 80%;
569
- max-width: 600px;
570
- }
571
 
572
- #plugin-manager h3 {
573
- color: var(--hacker-primary);
574
- margin-bottom: 1rem;
575
- text-align: center;
576
- }
 
577
 
578
- #plugin-url {
579
- width: 100%;
580
- margin-bottom: 1rem;
581
- background: rgba(0, 10, 20, 0.8);
582
- border: 1px solid var(--hacker-border);
583
- color: var(--hacker-text);
584
- padding: 0.5rem;
585
- }
586
 
587
- #plugin-list {
588
- max-height: 300px;
589
- overflow-y: auto;
590
- margin: 1rem 0;
591
- padding: 0.5rem;
592
- background: rgba(0, 10, 20, 0.5);
593
- border: 1px solid var(--hacker-border);
594
- }
 
 
 
 
 
595
 
596
- .plugin-item {
597
- padding: 0.5rem;
598
- margin-bottom: 0.5rem;
599
- background: rgba(0, 30, 60, 0.5);
600
- border-left: 3px solid var(--hacker-primary);
601
- }
 
602
 
603
- .plugin-item-actions {
604
- display: flex;
605
- gap: 0.5rem;
606
- margin-top: 0.5rem;
607
- }
608
 
609
- .plugin-item-actions button {
610
- flex: 1;
611
- padding: 0.25rem;
612
- font-size: 0.8rem;
613
- }
 
 
 
614
 
615
- /* レイヤーツリー用スタイル */
616
- #layer-tree {
617
- position: absolute;
618
- top: 10px;
619
- left: 10px;
620
- background: rgba(0, 20, 40, 0.9);
621
- padding: 1rem;
622
- border: 1px solid var(--hacker-border);
623
- box-shadow: 0 0 20px rgba(0, 200, 255, 0.4);
624
- z-index: 1000;
625
- max-height: 80vh;
626
- overflow-y: auto;
627
- font-size: 0.9rem;
628
- }
629
 
630
- #layer-tree h3 {
631
- color: var(--hacker-primary);
632
- margin-bottom: 0.5rem;
633
- font-size: 1rem;
634
- }
635
 
636
- .layer-tree-item {
637
- padding: 0.25rem 0;
638
- cursor: pointer;
639
- margin-left: 1rem;
640
- }
 
 
 
 
 
 
 
 
641
 
642
- .layer-tree-item:hover {
643
- color: var(--hacker-primary);
644
- }
 
645
 
646
- .layer-tree-item.selected {
647
- color: var(--hacker-primary);
648
- font-weight: bold;
649
- }
 
650
 
651
- .layer-tree-item::before {
652
- content: "▸";
653
- margin-right: 0.5rem;
654
- }
 
 
 
 
 
 
 
 
 
 
 
 
655
 
656
- .layer-tree-item.expanded::before {
657
- content: "▾";
658
- }
 
 
 
 
659
 
660
- .layer-tree-item-group {
661
- margin-left: 1rem;
662
- display: none;
663
- }
 
 
 
 
 
664
 
665
- .layer-tree-item-group.expanded {
666
- display: block;
667
- }
 
 
 
 
 
668
 
669
- .layer-tree-item-icon {
670
- width: 16px;
671
- height: 16px;
672
- display: inline-block;
673
- margin-right: 0.5rem;
674
- vertical-align: middle;
675
- }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
676
  </style>
677
  </head>
678
 
 
11
  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.3/dist/leaflet.css">
12
  <script src="https://cdn.tailwindcss.com"></script>
13
  <style>
14
+ :root {
15
+ --hacker-primary: #00ffff;
16
+ --hacker-secondary: #0088ff;
17
+ --hacker-bg: #001a33;
18
+ --hacker-text: #e0e0e0;
19
+ --hacker-accent: #ff00ff;
20
+ --hacker-border: #0066ff;
21
+ }
22
 
23
+ body {
24
+ font-family: 'Source Code Pro', monospace;
25
+ background-color: var(--hacker-bg);
26
+ color: var(--hacker-text);
27
+ background-image: radial-gradient(circle at 10% 20%, rgba(0, 180, 255, 0.05) 0%, rgba(0, 50, 100, 0.1) 90%);
28
+ min-height: 100vh;
29
+ overflow-x: hidden;
30
+ }
31
 
32
+ .hacker-header {
33
+ background: linear-gradient(90deg, rgba(0, 40, 80, 0.8) 0%, rgba(0, 80, 160, 0.6) 100%);
34
+ border-bottom: 1px solid var(--hacker-border);
35
+ box-shadow: 0 0 15px rgba(0, 200, 255, 0.3);
36
+ padding: 1rem;
37
+ margin-bottom: 1rem;
38
+ position: relative;
39
+ overflow: hidden;
40
+ }
41
 
42
+ .hacker-header::before {
43
+ content: "";
44
+ position: absolute;
45
+ top: 0;
46
+ left: 0;
47
+ width: 100%;
48
+ height: 100%;
49
+ background: linear-gradient(90deg,
50
+ transparent 0%,
51
+ rgba(0, 255, 255, 0.1) 50%,
52
+ transparent 100%);
53
+ animation: scanline 5s linear infinite;
54
+ }
55
 
56
+ @keyframes scanline {
57
+ 0% { transform: translateX(-100%); }
58
+ 100% { transform: translateX(100%); }
59
+ }
60
 
61
+ #map {
62
+ height: 600px;
63
+ width: 100%;
64
+ border: 2px solid var(--hacker-border);
65
+ box-shadow: 0 0 20px rgba(0, 200, 255, 0.4);
66
+ filter: hue-rotate(0deg) saturate(1.2);
67
+ transition: all 0.3s ease;
68
+ }
69
 
70
+ #map:hover {
71
+ box-shadow: 0 0 30px rgba(0, 200, 255, 0.6);
72
+ }
73
 
74
+ #marker-editor {
75
+ display: none;
76
+ position: absolute;
77
+ top: 10px;
78
+ left: 10px;
79
+ background: rgba(0, 20, 40, 0.95);
80
+ padding: 1.5rem;
81
+ border-radius: 0;
82
+ border: 2px solid var(--hacker-border);
83
+ box-shadow: 0 0 20px rgba(0, 200, 255, 0.5);
84
+ z-index: 1000;
85
+ cursor: move;
86
+ font-family: 'Source Code Pro', monospace;
87
+ color: var(--hacker-text);
88
+ width: 350px;
89
+ max-height: 80vh;
90
+ overflow-y: auto;
91
+ }
92
 
93
+ #marker-editor h3 {
94
+ color: var(--hacker-primary);
95
+ text-shadow: 0 0 5px var(--hacker-primary);
96
+ border-bottom: 1px solid var(--hacker-border);
97
+ padding-bottom: 0.5rem;
98
+ margin-bottom: 1rem;
99
+ font-weight: 700;
100
+ }
101
 
102
+ #marker-editor label {
103
+ color: var(--hacker-secondary);
104
+ display: block;
105
+ margin-bottom: 0.5rem;
106
+ font-size: 0.9rem;
107
+ }
108
 
109
+ #marker-editor input,
110
+ #marker-editor textarea {
111
+ background: rgba(0, 10, 20, 0.9);
112
+ border: 1px solid var(--hacker-border);
113
+ color: var(--hacker-primary);
114
+ padding: 0.5rem;
115
+ margin-bottom: 1rem;
116
+ width: 100%;
117
+ font-family: 'Source Code Pro', monospace;
118
+ transition: all 0.3s ease;
119
+ }
120
 
121
+ #marker-editor input:focus,
122
+ #marker-editor textarea:focus {
123
+ outline: none;
124
+ border-color: var(--hacker-primary);
125
+ box-shadow: 0 0 10px rgba(0, 255, 255, 0.5);
126
+ }
127
 
128
+ #marker-editor button {
129
+ background: linear-gradient(180deg, rgba(0, 100, 200, 0.8) 0%, rgba(0, 50, 150, 0.8) 100%);
130
+ color: white;
131
+ border: 1px solid var(--hacker-border);
132
+ padding: 0.75rem 1.5rem;
133
+ margin: 0.5rem 0;
134
+ cursor: pointer;
135
+ font-family: 'Source Code Pro', monospace;
136
+ font-weight: 700;
137
+ text-transform: uppercase;
138
+ letter-spacing: 1px;
139
+ transition: all 0.3s ease;
140
+ width: 100%;
141
+ }
142
 
143
+ #marker-editor button:hover {
144
+ background: linear-gradient(180deg, rgba(0, 150, 255, 0.8) 0%, rgba(0, 80, 180, 0.8) 100%);
145
+ box-shadow: 0 0 15px rgba(0, 200, 255, 0.6);
146
+ transform: translateY(-2px);
147
+ }
148
 
149
+ #marker-editor button#delete-marker {
150
+ background: linear-gradient(180deg, rgba(200, 0, 0, 0.8) 0%, rgba(150, 0, 0, 0.8) 100%);
151
+ }
152
 
153
+ #marker-editor button#delete-marker:hover {
154
+ background: linear-gradient(180deg, rgba(255, 50, 50, 0.8) 0%, rgba(200, 0, 0, 0.8) 100%);
155
+ }
156
 
157
+ #icon-preview {
158
+ display: none;
159
+ margin: 1rem 0;
160
+ border: 1px solid var(--hacker-border);
161
+ max-width: 100%;
162
+ box-shadow: 0 0 10px rgba(0, 200, 255, 0.3);
163
+ }
164
 
165
+ #icon-settings {
166
+ display: none;
167
+ margin-top: 1rem;
168
+ border-top: 1px dashed var(--hacker-border);
169
+ padding-top: 1rem;
170
+ }
171
 
172
+ #icon-settings label {
173
+ color: var(--hacker-secondary);
174
+ margin-bottom: 0.5rem;
175
+ }
176
 
177
+ input[type=range] {
178
+ -webkit-appearance: none;
179
+ width: 100%;
180
+ height: 5px;
181
+ background: rgba(0, 50, 100, 0.5);
182
+ border-radius: 5px;
183
+ margin: 1rem 0;
184
+ }
185
 
186
+ input[type=range]::-webkit-slider-thumb {
187
+ -webkit-appearance: none;
188
+ width: 15px;
189
+ height: 15px;
190
+ background: var(--hacker-primary);
191
+ border-radius: 50%;
192
+ cursor: pointer;
193
+ box-shadow: 0 0 5px var(--hacker-primary);
194
+ }
195
 
196
+ input[type=number] {
197
+ width: 60px;
198
+ margin-left: 1rem;
199
+ }
200
 
201
+ .hacker-btn {
202
+ background: linear-gradient(180deg, rgba(0, 100, 200, 0.8) 0%, rgba(0, 50, 150, 0.8) 100%);
203
+ color: white;
204
+ border: 1px solid var(--hacker-border);
205
+ padding: 0.75rem 1.5rem;
206
+ margin: 0.5rem;
207
+ cursor: pointer;
208
+ font-family: 'Source Code Pro', monospace;
209
+ font-weight: 700;
210
+ text-transform: uppercase;
211
+ letter-spacing: 1px;
212
+ transition: all 0.3s ease;
213
+ }
214
 
215
+ .hacker-btn:hover {
216
+ background: linear-gradient(180deg, rgba(0, 150, 255, 0.8) 0%, rgba(0, 80, 180, 0.8) 100%);
217
+ box-shadow: 0 0 15px rgba(0, 200, 255, 0.6);
218
+ transform: translateY(-2px);
219
+ }
220
 
221
+ .hacker-btn.danger {
222
+ background: linear-gradient(180deg, rgba(200, 0, 0, 0.8) 0%, rgba(150, 0, 0, 0.8) 100%);
223
+ }
224
 
225
+ .hacker-btn.danger:hover {
226
+ background: linear-gradient(180deg, rgba(255, 50, 50, 0.8) 0%, rgba(200, 0, 0, 0.8) 100%);
227
+ }
228
 
229
+ .hacker-btn.secondary {
230
+ background: linear-gradient(180deg, rgba(100, 0, 200, 0.8) 0%, rgba(50, 0, 150, 0.8) 100%);
231
+ }
232
 
233
+ .hacker-btn.secondary:hover {
234
+ background: linear-gradient(180deg, rgba(150, 0, 255, 0.8) 0%, rgba(80, 0, 180, 0.8) 100%);
235
+ }
236
 
237
+ .hacker-container {
238
+ background: rgba(0, 10, 20, 0.8);
239
+ border: 1px solid var(--hacker-border);
240
+ padding: 1.5rem;
241
+ margin: 1rem 0;
242
+ box-shadow: 0 0 15px rgba(0, 100, 200, 0.3);
243
+ }
244
 
245
+ .hacker-title {
246
+ color: var(--hacker-primary);
247
+ text-shadow: 0 0 5px var(--hacker-primary);
248
+ font-weight: 700;
249
+ margin-bottom: 1rem;
250
+ border-bottom: 1px solid var(--hacker-border);
251
+ padding-bottom: 0.5rem;
252
+ }
253
 
254
+ #output-html {
255
+ background: rgba(0, 5, 10, 0.9);
256
+ border: 1px solid var(--hacker-border);
257
+ padding: 1rem;
258
+ font-family: 'Source Code Pro', monospace;
259
+ color: var(--hacker-primary);
260
+ white-space: pre-wrap;
261
+ word-break: break-all;
262
+ max-height: 300px;
263
+ overflow-y: auto;
264
+ margin: 1rem 0;
265
+ box-shadow: inset 0 0 10px rgba(0, 50, 100, 0.5);
266
+ }
267
 
268
+ #loading {
269
+ position: fixed;
270
+ top: 0;
271
+ left: 0;
272
+ width: 100%;
273
+ height: 100%;
274
+ background-color: rgba(0, 10, 20, 0.9);
275
+ display: flex;
276
+ flex-direction: column;
277
+ align-items: center;
278
+ justify-content: center;
279
+ font-size: 1.5rem;
280
+ z-index: 9999;
281
+ color: var(--hacker-primary);
282
+ text-shadow: 0 0 5px var(--hacker-primary);
283
+ }
284
 
285
+ .loader {
286
+ width: 100px;
287
+ aspect-ratio: 1;
288
+ padding: 10px;
289
+ box-sizing: border-box;
290
+ display: grid;
291
+ filter: blur(5px) contrast(10) hue-rotate(180deg);
292
+ mix-blend-mode: lighten;
293
+ }
294
 
295
+ .loader:before,
296
+ .loader:after {
297
+ content: "";
298
+ grid-area: 1/1;
299
+ width: 40px;
300
+ height: 40px;
301
+ background: var(--hacker-primary);
302
+ animation: l7 2s infinite;
303
+ box-shadow: 0 0 5px var(--hacker-primary);
304
+ }
305
 
306
+ .loader:after {
307
+ animation-delay: -1s;
308
+ }
309
 
310
+ @keyframes l7 {
311
+ 0% { transform: translate(0, 0); }
312
+ 25% { transform: translate(100%, 0); }
313
+ 50% { transform: translate(100%, 100%); }
314
+ 75% { transform: translate(0, 100%); }
315
+ 100% { transform: translate(0, 0); }
316
+ }
317
 
318
+ .terminal-line {
319
+ position: relative;
320
+ padding-left: 1.5rem;
321
+ margin-bottom: 0.5rem;
322
+ }
323
 
324
+ .terminal-line::before {
325
+ content: ">";
326
+ position: absolute;
327
+ left: 0;
328
+ color: var(--hacker-accent);
329
+ text-shadow: 0 0 5px var(--hacker-accent);
330
+ }
331
 
332
+ .blink {
333
+ animation: blink 1s step-end infinite;
334
+ }
335
 
336
+ @keyframes blink {
337
+ from, to { opacity: 1; }
338
+ 50% { opacity: 0; }
339
+ }
340
 
341
+ .glow-text {
342
+ text-shadow: 0 0 5px currentColor;
343
+ }
344
 
345
+ .glow-box {
346
+ box-shadow: 0 0 10px currentColor;
347
+ }
348
 
349
+ .hacker-divider {
350
+ height: 1px;
351
+ background: linear-gradient(90deg, transparent 0%, var(--hacker-border) 50%, transparent 100%);
352
+ margin: 1rem 0;
353
+ }
354
 
355
+ body::-webkit-scrollbar {
356
+ width: 8px;
357
+ background-color: rgba(0, 50, 100, 0.3);
358
+ }
359
 
360
+ body::-webkit-scrollbar-thumb {
361
+ background: var(--hacker-primary);
362
+ border-radius: 4px;
363
+ box-shadow: inset 0 0 5px rgba(0, 200, 255, 0.5);
364
+ }
365
 
366
+ /* レイヤーエディターのスタイル */
367
+ #layer-editor {
368
+ display: none;
369
+ position: fixed;
370
+ top: 50%;
371
+ left: 50%;
372
+ transform: translate(-50%, -50%);
373
+ background: rgba(0, 20, 40, 0.97);
374
+ border: 2px solid var(--hacker-border);
375
+ box-shadow: 0 0 30px rgba(0, 200, 255, 0.5);
376
+ z-index: 2000;
377
+ width: 90%;
378
+ max-width: 600px;
379
+ max-height: 90vh;
380
+ overflow-y: auto;
381
+ padding: 1.5rem;
382
+ font-size: 0.95rem;
383
+ }
384
 
385
+ #layer-editor h3 {
386
+ color: var(--hacker-primary);
387
+ text-shadow: 0 0 5px var(--hacker-primary);
388
+ border-bottom: 2px solid var(--hacker-border);
389
+ padding-bottom: 0.5rem;
390
+ margin-bottom: 1.5rem;
391
+ font-weight: 700;
392
+ }
393
 
394
+ .layer-tabs {
395
+ display: flex;
396
+ margin-bottom: 1.5rem;
397
+ border-bottom: 2px solid var(--hacker-border);
398
+ }
399
 
400
+ .layer-tab {
401
+ padding: 0.5rem 1.2rem;
402
+ cursor: pointer;
403
+ border: 2px solid transparent;
404
+ margin-right: 0.5rem;
405
+ border-radius: 4px 4px 0 0;
406
+ transition: all 0.2s ease;
407
+ background: rgba(0, 50, 100, 0.3);
408
+ font-size: 0.9rem;
409
+ }
410
 
411
+ .layer-tab:hover {
412
+ background: rgba(0, 100, 200, 0.3);
413
+ }
414
 
415
+ .layer-tab.active {
416
+ background: rgba(0, 100, 200, 0.6);
417
+ border-color: var(--hacker-border);
418
+ border-bottom-color: rgba(0, 20, 40, 0.97);
419
+ margin-bottom: -2px;
420
+ }
421
 
422
+ .layer-tab-content {
423
+ padding: 1rem 0;
424
+ display: none;
425
+ }
 
 
 
 
 
 
426
 
427
+ .layer-tab-content.active {
428
+ display: block;
429
+ }
 
430
 
431
+ .layer-form-group {
432
+ margin-bottom: 1.2rem;
433
+ }
 
 
434
 
435
+ .layer-form-group label {
436
+ display: block;
437
+ margin-bottom: 0.5rem;
438
+ color: var(--hacker-secondary);
439
+ font-weight: bold;
440
+ font-size: 0.9rem;
441
+ }
 
 
 
 
 
 
442
 
443
+ .layer-form-group input,
444
+ .layer-form-group textarea,
445
+ .layer-form-group select {
446
+ width: 100%;
447
+ padding: 0.6rem;
448
+ background: rgba(0, 10, 20, 0.9);
449
+ border: 1px solid var(--hacker-border);
450
+ color: var(--hacker-text);
451
+ font-family: 'Source Code Pro', monospace;
452
+ transition: all 0.3s ease;
453
+ font-size: 0.9rem;
454
+ }
455
 
456
+ .layer-form-group textarea {
457
+ min-height: 100px;
458
+ resize: vertical;
459
+ }
 
 
 
 
460
 
461
+ .layer-form-group input:focus,
462
+ .layer-form-group textarea:focus,
463
+ .layer-form-group select:focus {
464
+ outline: none;
465
+ border-color: var(--hacker-primary);
466
+ box-shadow: 0 0 10px rgba(0, 255, 255, 0.5);
467
+ }
468
 
469
+ .layer-form-actions {
470
+ margin-top: 1.5rem;
471
+ display: flex;
472
+ gap: 0.8rem;
473
+ }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
474
 
475
+ .layer-form-actions button {
476
+ flex: 1;
477
+ padding: 0.75rem;
478
+ font-size: 0.9rem;
479
+ }
 
 
 
480
 
481
+ /* レイヤーツリーのスタイル */
482
+ #layer-tree {
483
+ display: none;
484
+ position: absolute;
485
+ top: 10px;
486
+ left: 10px;
487
+ background: rgba(0, 20, 40, 0.95);
488
+ border: 2px solid var(--hacker-border);
489
+ box-shadow: 0 0 20px rgba(0, 200, 255, 0.4);
490
+ z-index: 1000;
491
+ width: 300px;
492
+ max-height: 80vh;
493
+ overflow-y: auto;
494
+ padding: 1rem;
495
+ font-size: 0.9rem;
496
+ }
497
 
498
+ #layer-tree h3 {
499
+ color: var(--hacker-primary);
500
+ margin-bottom: 1rem;
501
+ font-size: 1.1rem;
502
+ border-bottom: 1px solid var(--hacker-border);
503
+ padding-bottom: 0.5rem;
504
+ }
505
 
506
+ .layer-tree-item {
507
+ padding: 0.5rem;
508
+ cursor: pointer;
509
+ display: flex;
510
+ align-items: center;
511
+ transition: all 0.2s ease;
512
+ border-bottom: 1px solid rgba(0, 66, 133, 0.3);
513
+ }
514
 
515
+ .layer-tree-item:hover {
516
+ background: rgba(0, 50, 100, 0.3);
517
+ }
518
 
519
+ .layer-tree-item.selected {
520
+ background: rgba(0, 100, 200, 0.3);
521
+ color: var(--hacker-primary);
522
+ }
523
 
524
+ .layer-tree-toggle {
525
+ margin-right: 0.5rem;
526
+ width: 1em;
527
+ display: inline-block;
528
+ text-align: center;
529
+ }
530
 
531
+ .layer-count {
532
+ margin-left: auto;
533
+ font-size: 0.8em;
534
+ color: var(--hacker-secondary);
535
+ opacity: 0.7;
536
+ }
537
 
538
+ .layer-tree-icon {
539
+ margin-right: 0.8rem;
540
+ font-size: 1.1em;
541
+ width: 1.2em;
542
+ text-align: center;
543
+ }
 
 
 
 
544
 
545
+ .layer-name {
546
+ flex-grow: 1;
547
+ overflow: hidden;
548
+ text-overflow: ellipsis;
549
+ white-space: nowrap;
550
+ }
551
 
552
+ .layer-tree-buttons {
553
+ margin-left: auto;
554
+ display: flex;
555
+ gap: 0.3rem;
556
+ }
557
 
558
+ .layer-tree-btn {
559
+ background: none;
560
+ border: none;
561
+ color: var(--hacker-text);
562
+ cursor: pointer;
563
+ padding: 0.2rem;
564
+ font-size: 0.9em;
565
+ opacity: 0.7;
566
+ transition: all 0.2s ease;
567
+ }
568
 
569
+ .layer-tree-btn:hover {
570
+ color: var(--hacker-primary);
571
+ opacity: 1;
572
+ transform: scale(1.1);
573
+ }
 
 
 
 
 
 
 
 
574
 
575
+ .layer-tree-item-group {
576
+ margin-left: 1.5rem;
577
+ display: none;
578
+ border-left: 1px dashed var(--hacker-border);
579
+ padding-left: 0.8rem;
580
+ }
581
 
582
+ .layer-tree-item-group.expanded {
583
+ display: block;
584
+ }
 
 
 
 
 
585
 
586
+ /* ギャラリー用スタイル */
587
+ #gallery-container {
588
+ display: none;
589
+ position: fixed;
590
+ top: 0;
591
+ left: 0;
592
+ width: 100%;
593
+ height: 100%;
594
+ background-color: rgba(0, 10, 20, 0.95);
595
+ z-index: 2000;
596
+ overflow-y: auto;
597
+ padding: 2rem;
598
+ }
599
 
600
+ .gallery-map-item {
601
+ background: rgba(0, 20, 40, 0.8);
602
+ border: 1px solid var(--hacker-border);
603
+ padding: 1rem;
604
+ margin-bottom: 1rem;
605
+ transition: all 0.3s ease;
606
+ }
607
 
608
+ .gallery-map-item:hover {
609
+ background: rgba(0, 40, 80, 0.8);
610
+ box-shadow: 0 0 15px rgba(0, 200, 255, 0.4);
611
+ }
 
612
 
613
+ .gallery-map-title {
614
+ color: var(--hacker-primary);
615
+ font-weight: bold;
616
+ margin-bottom: 0.5rem;
617
+ cursor: pointer;
618
+ padding: 0.25rem;
619
+ border-radius: 3px;
620
+ }
621
 
622
+ .gallery-map-title:hover {
623
+ background: rgba(0, 100, 200, 0.3);
624
+ }
 
 
 
 
 
 
 
 
 
 
 
625
 
626
+ .gallery-map-title.editing {
627
+ background: rgba(0, 100, 200, 0.5);
628
+ outline: 1px solid var(--hacker-primary);
629
+ }
 
630
 
631
+ .gallery-map-preview {
632
+ height: 150px;
633
+ background-color: rgba(0, 30, 60, 0.5);
634
+ margin-bottom: 0.5rem;
635
+ display: flex;
636
+ align-items: center;
637
+ justify-content: center;
638
+ color: var(--hacker-secondary);
639
+ font-size: 0.9rem;
640
+ white-space: pre-wrap;
641
+ line-height: 1.4;
642
+ overflow: hidden;
643
+ }
644
 
645
+ .gallery-map-actions {
646
+ display: flex;
647
+ gap: 0.5rem;
648
+ }
649
 
650
+ .gallery-btn {
651
+ flex: 1;
652
+ padding: 0.5rem;
653
+ font-size: 0.8rem;
654
+ }
655
 
656
+ /* プラグインマネージャー */
657
+ #plugin-manager {
658
+ display: none;
659
+ position: fixed;
660
+ top: 50%;
661
+ left: 50%;
662
+ transform: translate(-50%, -50%);
663
+ background: rgba(0, 20, 40, 0.95);
664
+ border: 2px solid var(--hacker-border);
665
+ padding: 2rem;
666
+ z-index: 2002;
667
+ width: 90%;
668
+ max-width: 600px;
669
+ max-height: 90vh;
670
+ overflow-y: auto;
671
+ }
672
 
673
+ #plugin-manager h3 {
674
+ color: var(--hacker-primary);
675
+ margin-bottom: 1.5rem;
676
+ text-align: center;
677
+ border-bottom: 1px solid var(--hacker-border);
678
+ padding-bottom: 0.5rem;
679
+ }
680
 
681
+ #plugin-url {
682
+ width: 100%;
683
+ margin-bottom: 1rem;
684
+ background: rgba(0, 10, 20, 0.8);
685
+ border: 1px solid var(--hacker-border);
686
+ color: var(--hacker-text);
687
+ padding: 0.75rem;
688
+ font-family: 'Source Code Pro', monospace;
689
+ }
690
 
691
+ #plugin-list {
692
+ max-height: 300px;
693
+ overflow-y: auto;
694
+ margin: 1.5rem 0;
695
+ padding: 0.5rem;
696
+ background: rgba(0, 10, 20, 0.5);
697
+ border: 1px solid var(--hacker-border);
698
+ }
699
 
700
+ .plugin-item {
701
+ padding: 0.8rem;
702
+ margin-bottom: 0.8rem;
703
+ background: rgba(0, 30, 60, 0.5);
704
+ border-left: 3px solid var(--hacker-primary);
705
+ }
706
+
707
+ .plugin-item-actions {
708
+ display: flex;
709
+ gap: 0.5rem;
710
+ margin-top: 0.8rem;
711
+ }
712
+
713
+ .plugin-item-actions button {
714
+ flex: 1;
715
+ padding: 0.4rem;
716
+ font-size: 0.8rem;
717
+ }
718
+
719
+ /* レスポンシブ対応 */
720
+ @media (max-width: 768px) {
721
+ #layer-editor, #plugin-manager {
722
+ width: 95%;
723
+ padding: 1rem;
724
+ }
725
+
726
+ .layer-tabs {
727
+ flex-wrap: wrap;
728
+ }
729
+
730
+ .layer-tab {
731
+ margin-bottom: 0.5rem;
732
+ }
733
+
734
+ #layer-tree {
735
+ width: 250px;
736
+ }
737
+
738
+ .hacker-btn {
739
+ padding: 0.5rem 1rem;
740
+ font-size: 0.8rem;
741
+ margin: 0.3rem;
742
+ }
743
+ }
744
  </style>
745
  </head>
746