soiz1 commited on
Commit
e5eb47d
·
verified ·
1 Parent(s): 89475fd

Update index.html

Browse files
Files changed (1) hide show
  1. 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">