Spaces:
Running
Running
Update index.html
Browse files- index.html +106 -2
index.html
CHANGED
@@ -14,8 +14,6 @@
|
|
14 |
display: flex;
|
15 |
flex-direction: column;
|
16 |
align-items: center;
|
17 |
-
background-color: #0a0a12;
|
18 |
-
color: #00ffcc;
|
19 |
font-family: "M PLUS Rounded 1c", monospace;
|
20 |
padding: 20px;
|
21 |
margin: 0;
|
@@ -508,9 +506,115 @@
|
|
508 |
display: block;
|
509 |
}
|
510 |
</style>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
511 |
</head>
|
512 |
|
513 |
<body>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
514 |
<!-- ローディングオーバーレイ -->
|
515 |
<div class="loading-overlay" id="loadingOverlay">
|
516 |
<div class="spinner-box">
|
|
|
14 |
display: flex;
|
15 |
flex-direction: column;
|
16 |
align-items: center;
|
|
|
|
|
17 |
font-family: "M PLUS Rounded 1c", monospace;
|
18 |
padding: 20px;
|
19 |
margin: 0;
|
|
|
506 |
display: block;
|
507 |
}
|
508 |
</style>
|
509 |
+
<style>
|
510 |
+
body {
|
511 |
+
margin: 0;
|
512 |
+
padding: 0;
|
513 |
+
background-color: #0a192f; /* 暗い青 */
|
514 |
+
overflow: hidden;
|
515 |
+
height: 100vh;
|
516 |
+
}
|
517 |
+
|
518 |
+
.wave-container {
|
519 |
+
position: relative;
|
520 |
+
width: 100%;
|
521 |
+
height: 100%;
|
522 |
+
}
|
523 |
+
|
524 |
+
.wave {
|
525 |
+
position: absolute;
|
526 |
+
width: 100%;
|
527 |
+
height: 100%;
|
528 |
+
background: linear-gradient(
|
529 |
+
to bottom,
|
530 |
+
transparent,
|
531 |
+
rgba(100, 200, 255, 0.1) 20%, /* 水色 */
|
532 |
+
rgba(100, 200, 255, 0.3) 50%,
|
533 |
+
rgba(100, 200, 255, 0.1) 80%,
|
534 |
+
transparent
|
535 |
+
);
|
536 |
+
opacity: 0.7;
|
537 |
+
animation: waveFlow 4s linear infinite;
|
538 |
+
}
|
539 |
+
|
540 |
+
.wave:nth-child(2) {
|
541 |
+
animation-delay: 1s;
|
542 |
+
opacity: 0.5;
|
543 |
+
}
|
544 |
+
|
545 |
+
.wave:nth-child(3) {
|
546 |
+
animation-delay: 2s;
|
547 |
+
opacity: 0.3;
|
548 |
+
}
|
549 |
+
|
550 |
+
@keyframes waveFlow {
|
551 |
+
0% {
|
552 |
+
transform: translateY(-100%);
|
553 |
+
}
|
554 |
+
100% {
|
555 |
+
transform: translateY(100%);
|
556 |
+
}
|
557 |
+
}
|
558 |
+
|
559 |
+
/* テクノロジー風のグリッド線を追加 */
|
560 |
+
.grid-lines {
|
561 |
+
position: absolute;
|
562 |
+
top: 0;
|
563 |
+
left: 0;
|
564 |
+
width: 100%;
|
565 |
+
height: 100%;
|
566 |
+
background-image:
|
567 |
+
linear-gradient(rgba(100, 200, 255, 0.1) 1px, transparent 1px),
|
568 |
+
linear-gradient(90deg, rgba(100, 200, 255, 0.1) 1px, transparent 1px);
|
569 |
+
background-size: 50px 50px;
|
570 |
+
}
|
571 |
+
|
572 |
+
/* 点滅するドットでテクノロジー感を追加 */
|
573 |
+
.tech-dots {
|
574 |
+
position: absolute;
|
575 |
+
width: 100%;
|
576 |
+
height: 100%;
|
577 |
+
}
|
578 |
+
|
579 |
+
.tech-dot {
|
580 |
+
position: absolute;
|
581 |
+
width: 3px;
|
582 |
+
height: 3px;
|
583 |
+
background-color: rgba(100, 200, 255, 0.7);
|
584 |
+
border-radius: 50%;
|
585 |
+
animation: blink 2s infinite alternate;
|
586 |
+
}
|
587 |
+
|
588 |
+
@keyframes blink {
|
589 |
+
0% { opacity: 0.2; }
|
590 |
+
100% { opacity: 0.8; }
|
591 |
+
}
|
592 |
+
</style>
|
593 |
+
|
594 |
</head>
|
595 |
|
596 |
<body>
|
597 |
+
<div class="wave-container">
|
598 |
+
<div class="grid-lines"></div>
|
599 |
+
<div class="wave"></div>
|
600 |
+
<div class="wave"></div>
|
601 |
+
<div class="wave"></div>
|
602 |
+
<div class="tech-dots" id="techDots"></div>
|
603 |
+
</div>
|
604 |
+
<script>
|
605 |
+
// ランダムな位置にテクノロジードットを配置
|
606 |
+
const techDots = document.getElementById('techDots');
|
607 |
+
const dotCount = 50;
|
608 |
+
|
609 |
+
for (let i = 0; i < dotCount; i++) {
|
610 |
+
const dot = document.createElement('div');
|
611 |
+
dot.className = 'tech-dot';
|
612 |
+
dot.style.left = `${Math.random() * 100}%`;
|
613 |
+
dot.style.top = `${Math.random() * 100}%`;
|
614 |
+
dot.style.animationDelay = `${Math.random() * 2}s`;
|
615 |
+
techDots.appendChild(dot);
|
616 |
+
}
|
617 |
+
</script>
|
618 |
<!-- ローディングオーバーレイ -->
|
619 |
<div class="loading-overlay" id="loadingOverlay">
|
620 |
<div class="spinner-box">
|