Spaces:
Running
Running
| <html lang="ja"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>境界線通信 - 世界と虚構の合間</title> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| :root { | |
| --primary: #2c3e50; | |
| --secondary: #34495e; | |
| --accent: #9b59b6; | |
| --text: #ecf0f1; | |
| --highlight: #e74c3c; | |
| } | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; | |
| } | |
| body { | |
| background: linear-gradient(135deg, #1a1a2e, #16213e); | |
| color: var(--text); | |
| min-height: 100vh; | |
| overflow-x: hidden; | |
| } | |
| header { | |
| position: relative; | |
| height: 100vh; | |
| display: flex; | |
| flex-direction: column; | |
| justify-content: center; | |
| align-items: center; | |
| text-align: center; | |
| padding: 2rem; | |
| overflow: hidden; | |
| } | |
| .header-overlay { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| background: rgba(0, 0, 0, 0.6); | |
| z-index: 1; | |
| } | |
| .header-content { | |
| position: relative; | |
| z-index: 2; | |
| max-width: 800px; | |
| } | |
| h1 { | |
| font-size: 4rem; | |
| margin-bottom: 1rem; | |
| background: linear-gradient(to right, var(--accent), #3498db); | |
| -webkit-background-clip: text; | |
| background-clip: text; | |
| color: transparent; | |
| text-shadow: 0 0 20px rgba(155, 89, 182, 0.3); | |
| animation: glow 2s ease-in-out infinite alternate; | |
| } | |
| @keyframes glow { | |
| from { | |
| text-shadow: 0 0 10px rgba(155, 89, 182, 0.3); | |
| } | |
| to { | |
| text-shadow: 0 0 20px rgba(155, 89, 182, 0.6), 0 0 30px rgba(155, 89, 182, 0.4); | |
| } | |
| } | |
| .tagline { | |
| font-size: 1.5rem; | |
| margin-bottom: 2rem; | |
| font-weight: 300; | |
| letter-spacing: 1px; | |
| } | |
| .nav-btn { | |
| display: inline-block; | |
| padding: 0.8rem 2rem; | |
| background: transparent; | |
| color: var(--accent); | |
| border: 2px solid var(--accent); | |
| border-radius: 50px; | |
| text-decoration: none; | |
| font-weight: bold; | |
| margin: 0 1rem; | |
| transition: all 0.3s ease; | |
| text-transform: uppercase; | |
| letter-spacing: 1px; | |
| } | |
| .nav-btn:hover { | |
| background: var(--accent); | |
| color: white; | |
| transform: translateY(-3px); | |
| box-shadow: 0 10px 20px rgba(155, 89, 182, 0.2); | |
| } | |
| .nav-btn:active { | |
| transform: translateY(-1px); | |
| } | |
| .float-particles { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| overflow: hidden; | |
| z-index: 0; | |
| } | |
| .particle { | |
| position: absolute; | |
| display: block; | |
| background: rgba(255, 255, 255, 0.1); | |
| border-radius: 50%; | |
| animation: float linear infinite; | |
| } | |
| @keyframes float { | |
| 0% { | |
| transform: translateY(0) rotate(0deg); | |
| opacity: 1; | |
| } | |
| 100% { | |
| transform: translateY(-1000px) rotate(720deg); | |
| opacity: 0; | |
| } | |
| } | |
| /* メインコンテンツ */ | |
| main { | |
| padding: 4rem 2rem; | |
| max-width: 1200px; | |
| margin: 0 auto; | |
| } | |
| .section-title { | |
| text-align: center; | |
| margin-bottom: 3rem; | |
| font-size: 2.5rem; | |
| position: relative; | |
| padding-bottom: 1rem; | |
| } | |
| .section-title::after { | |
| content: ""; | |
| position: absolute; | |
| bottom: 0; | |
| left: 50%; | |
| transform: translateX(-50%); | |
| width: 100px; | |
| height: 3px; | |
| background: linear-gradient(to right, var(--accent), #3498db); | |
| border-radius: 3px; | |
| } | |
| .articles-container { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fill, minmax(350px, 1fr)); | |
| gap: 2rem; | |
| margin-bottom: 4rem; | |
| } | |
| .article-card { | |
| background: rgba(255, 255, 255, 0.05); | |
| border-radius: 10px; | |
| overflow: hidden; | |
| transition: all 0.3s ease; | |
| box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); | |
| position: relative; | |
| backdrop-filter: blur(5px); | |
| border: 1px solid rgba(255, 255, 255, 0.1); | |
| } | |
| .article-card:hover { | |
| transform: translateY(-10px); | |
| box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2); | |
| border: 1px solid var(--accent); | |
| } | |
| .article-image { | |
| height: 200px; | |
| width: 100%; | |
| object-fit: cover; | |
| border-bottom: 1px solid rgba(255, 255, 255, 0.1); | |
| } | |
| .article-content { | |
| padding: 1.5rem; | |
| } | |
| .article-category { | |
| display: inline-block; | |
| background: var(--accent); | |
| color: white; | |
| padding: 0.3rem 0.8rem; | |
| border-radius: 50px; | |
| font-size: 0.8rem; | |
| margin-bottom: 1rem; | |
| text-transform: uppercase; | |
| letter-spacing: 1px; | |
| } | |
| .article-title { | |
| font-size: 1.5rem; | |
| margin-bottom: 1rem; | |
| line-height: 1.3; | |
| } | |
| .article-excerpt { | |
| color: rgba(255, 255, 255, 0.7); | |
| margin-bottom: 1.5rem; | |
| line-height: 1.6; | |
| font-size: 0.9rem; | |
| } | |
| .article-meta { | |
| display: flex; | |
| justify-content: space-between; | |
| color: rgba(255, 255, 255, 0.5); | |
| font-size: 0.8rem; | |
| border-top: 1px solid rgba(255, 255, 255, 0.1); | |
| padding-top: 1rem; | |
| } | |
| /* ニュースレターセクション */ | |
| .newsletter { | |
| background: linear-gradient(135deg, var(--primary), var(--secondary)); | |
| padding: 4rem 2rem; | |
| text-align: center; | |
| border-radius: 10px; | |
| margin-bottom: 4rem; | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .newsletter::before { | |
| content: ""; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| background: url('data:image/svg+xml;utf8,<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"><path fill="rgba(255,255,255,0.03)" d="M43.5,-56.2C55.6,-45.3,63.6,-30.9,66.7,-15.4C69.8,0.1,68.1,16.8,59,30.7C49.9,44.6,33.5,55.7,15,63.7C-3.5,71.8,-24.1,76.8,-40.4,68.9C-56.8,61,-68.9,40.2,-73.4,17.7C-77.8,-4.8,-74.6,-29,-62.2,-45.5C-49.8,-62.1,-28.1,-71,-8.9,-65.5C10.3,-60,20.6,-40.1,43.5,-56.2Z" transform="translate(100 100)" /></svg>') no-repeat; | |
| background-size: cover; | |
| opacity: 0.5; | |
| z-index: 0; | |
| } | |
| .newsletter-content { | |
| position: relative; | |
| z-index: 1; | |
| max-width: 600px; | |
| margin: 0 auto; | |
| } | |
| .newsletter-title { | |
| font-size: 2rem; | |
| margin-bottom: 1rem; | |
| } | |
| .newsletter-desc { | |
| margin-bottom: 2rem; | |
| color: rgba(255, 255, 255, 0.8); | |
| line-height: 1.6; | |
| } | |
| .newsletter-form { | |
| display: flex; | |
| max-width: 500px; | |
| margin: 0 auto; | |
| } | |
| .newsletter-input { | |
| flex: 1; | |
| padding: 0.8rem 1.5rem; | |
| border: none; | |
| border-radius: 50px 0 0 50px; | |
| background: rgba(255, 255, 255, 0.9); | |
| font-size: 1rem; | |
| } | |
| .newsletter-input:focus { | |
| outline: none; | |
| background: white; | |
| } | |
| .newsletter-btn { | |
| padding: 0.8rem 1.5rem; | |
| background: var(--accent); | |
| color: white; | |
| border: none; | |
| border-radius: 0 50px 50px 0; | |
| cursor: pointer; | |
| font-weight: bold; | |
| transition: all 0.3s ease; | |
| } | |
| .newsletter-btn:hover { | |
| background: #8e44ad; | |
| } | |
| /* 哲学的な引用 */ | |
| .philosophy-quote { | |
| text-align: center; | |
| padding: 4rem 2rem; | |
| position: relative; | |
| } | |
| .quote-text { | |
| font-size: 1.8rem; | |
| font-style: italic; | |
| margin-bottom: 1rem; | |
| line-height: 1.6; | |
| max-width: 800px; | |
| margin: 0 auto 1rem; | |
| position: relative; | |
| } | |
| .quote-text:before, | |
| .quote-text:after { | |
| content: '"'; | |
| font-size: 3rem; | |
| color: var(--accent); | |
| opacity: 0.5; | |
| } | |
| .quote-text:before { | |
| position: absolute; | |
| left: -40px; | |
| top: -20px; | |
| } | |
| .quote-text:after { | |
| position: absolute; | |
| right: -40px; | |
| bottom: -40px; | |
| } | |
| .quote-author { | |
| color: var(--accent); | |
| font-size: 1.1rem; | |
| margin-top: 2rem; | |
| } | |
| /* フッター */ | |
| footer { | |
| background: rgba(0, 0, 0, 0.3); | |
| padding: 3rem 2rem; | |
| text-align: center; | |
| position: relative; | |
| } | |
| .footer-logo { | |
| font-size: 2rem; | |
| margin-bottom: 1.5rem; | |
| background: linear-gradient(to right, var(--accent), #3498db); | |
| -webkit-background-clip: text; | |
| background-clip: text; | |
| color: transparent; | |
| } | |
| .footer-links { | |
| display: flex; | |
| justify-content: center; | |
| flex-wrap: wrap; | |
| gap: 1.5rem; | |
| margin-bottom: 2rem; | |
| } | |
| .footer-link { | |
| color: var(--text); | |
| text-decoration: none; | |
| transition: color 0.3s ease; | |
| } | |
| .footer-link:hover { | |
| color: var(--accent); | |
| } | |
| .social-links { | |
| display: flex; | |
| justify-content: center; | |
| gap: 1.5rem; | |
| margin-bottom: 2rem; | |
| } | |
| .social-link { | |
| color: var(--text); | |
| font-size: 1.5rem; | |
| transition: color 0.3s ease; | |
| } | |
| .social-link:hover { | |
| color: var(--accent); | |
| transform: translateY(-3px); | |
| } | |
| .copyright { | |
| color: rgba(255, 255, 255, 0.5); | |
| font-size: 0.9rem; | |
| } | |
| /* モーダル */ | |
| .modal { | |
| display: none; | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| background: rgba(0, 0, 0, 0.8); | |
| z-index: 100; | |
| justify-content: center; | |
| align-items: center; | |
| backdrop-filter: blur(5px); | |
| } | |
| .modal-content { | |
| background: linear-gradient(135deg, #1a1a2e, #16213e); | |
| padding: 2rem; | |
| border-radius: 10px; | |
| max-width: 800px; | |
| width: 90%; | |
| max-height: 90vh; | |
| overflow-y: auto; | |
| position: relative; | |
| box-shadow: 0 0 30px rgba(155, 89, 182, 0.3); | |
| border: 1px solid var(--accent); | |
| } | |
| .close-modal { | |
| position: absolute; | |
| top: 20px; | |
| right: 20px; | |
| color: rgba(255, 255, 255, 0.5); | |
| font-size: 1.5rem; | |
| cursor: pointer; | |
| transition: color 0.3s ease; | |
| } | |
| .close-modal:hover { | |
| color: var(--highlight); | |
| } | |
| .modal-article-title { | |
| font-size: 2rem; | |
| margin-bottom: 1.5rem; | |
| } | |
| .modal-article-image { | |
| width: 100%; | |
| height: 400px; | |
| object-fit: cover; | |
| border-radius: 5px; | |
| margin-bottom: 2rem; | |
| } | |
| .modal-article-text { | |
| line-height: 1.8; | |
| margin-bottom: 1.5rem; | |
| color: rgba(255, 255, 255, 0.8); | |
| } | |
| /* レスポンシブ */ | |
| @media (max-width: 768px) { | |
| h1 { | |
| font-size: 2.5rem; | |
| } | |
| .tagline { | |
| font-size: 1.2rem; | |
| } | |
| .section-title { | |
| font-size: 2rem; | |
| } | |
| .articles-container { | |
| grid-template-columns: 1fr; | |
| } | |
| .newsletter-form { | |
| flex-direction: column; | |
| } | |
| .newsletter-input { | |
| border-radius: 50px; | |
| margin-bottom: 1rem; | |
| width: 100%; | |
| } | |
| .newsletter-btn { | |
| border-radius: 50px; | |
| width: 100%; | |
| } | |
| .quote-text { | |
| font-size: 1.3rem; | |
| } | |
| } | |
| /* アニメーション */ | |
| @keyframes fadeIn { | |
| from { opacity: 0; transform: translateY(20px); } | |
| to { opacity: 1; transform: translateY(0); } | |
| } | |
| .fade-in { | |
| animation: fadeIn 1s ease-out forwards; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <header> | |
| <div class="header-overlay"></div> | |
| <div class="float-particles" id="particles"></div> | |
| <div class="header-content"> | |
| <h1>境界線通信</h1> | |
| <p class="tagline">世界と虚構の合間にある真実を探求する</p> | |
| <div> | |
| <a href="#articles" class="nav-btn">記事を読む</a> | |
| <a href="#" class="nav-btn" id="about-btn">私たちについて</a> | |
| </div> | |
| </div> | |
| </header> | |
| <main> | |
| <section id="articles"> | |
| <h2 class="section-title">最新の探求</h2> | |
| <div class="articles-container"> | |
| <!-- 記事カード1 --> | |
| <div class="article-card fade-in" style="animation-delay: 0.1s;"> | |
| <img src="https://source.unsplash.com/random/600x400/?dream" alt="夢想" class="article-image"> | |
| <div class="article-content"> | |
| <span class="article-category">認識論</span> | |
| <h3 class="article-title">「夢」はどこから生まれ、どこへ向かうのか</h3> | |
| <p class="article-excerpt">私たちが見る夢は単なる脳の副産物なのか、それとも別次元への窓なのか。夢研究の最前線と、古代から現代に至る夢解釈の変遷を追う...</p> | |
| <div class="article-meta"> | |
| <span><i class="far fa-calendar"></i> 2023.06.15</span> | |
| <span><i class="far fa-eye"></i> 4,382</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- 記事カード2 --> | |
| <div class="article-card fade-in" style="animation-delay: 0.2s;"> | |
| <img src="https://source.unsplash.com/random/600x400/?simulation" alt="シミュレーション" class="article-image"> | |
| <div class="article-content"> | |
| <span class="article-category">存在論</span> | |
| <h3 class="article-title">シミュレーション仮説: 私たちは誰かの夢の中にいるのか?</h3> | |
| <p class="article-excerpt">物理学者ニック・ボストロムが提唱したシミュレーション仮説の深淵に迫る。この宇宙が高度な文明によるシミュレーションである確率は?</p> | |
| <div class="article-meta"> | |
| <span><i class="far fa-calendar"></i> 2023.06.10</span> | |
| <span><i class="far fa-eye"></i> 8,715</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- 記事カード3 --> | |
| <div class="article-card fade-in" style="animation-delay: 0.3s;"> | |
| <img src="https://source.unsplash.com/random/600x400/?ai" alt="人工知能" class="article-image"> | |
| <div class="article-content"> | |
| <span class="article-category">テクノロジー</span> | |
| <h3 class="article-title">AIが獲得した「想像力」は本物の創造性と言えるか</h3> | |
| <p class="article-excerpt">最新の生成AIが生み出す芸術作品の深層を解析。人間の創造性と機械の生成行為の間に横たわる哲学的な問題とは...</p> | |
| <div class="article-meta"> | |
| <span><i class="far fa-calendar"></i> 2023.06.05</span> | |
| <span><i class="far fa-eye"></i> 6,293</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- 記事カード4 --> | |
| <div class="article-card fade-in" style="animation-delay: 0.4s;"> | |
| <img src="https://source.unsplash.com/random/600x400/?mythology" alt="神話" class="article-image"> | |
| <div class="article-content"> | |
| <span class="article-category">神話学</span> | |
| <h3 class="article-title">現代社会に息づく古代神話の原型 - 大衆文化の深層心理</h3> | |
| <p class="article-excerpt">マーベル映画からビデオゲームまで、21世紀の娯楽媒体に潜む神話的構造を精神分析学的に解読する試み...</p> | |
| <div class="article-meta"> | |
| <span><i class="far fa-calendar"></i> 2023.05.28</span> | |
| <span><i class="far fa-eye"></i> 5,642</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- 記事カード5 --> | |
| <div class="article-card fade-in" style="animation-delay: 0.5s;"> | |
| <img src="https://source.unsplash.com/random/600x400/?quantum" alt="量子物理" class="article-image"> | |
| <div class="article-content"> | |
| <span class="article-category">物理学</span> | |
| <h3 class="article-title">量子多重世界解釈 - すべての可能性が実在するパラレルワールド</h3> | |
| <p class="article-excerpt">観測されるまで決定されない量子状態は、実際にはすべての可能性が並行して存在しているという解釈の可能性を探る...</p> | |
| <div class="article-meta"> | |
| <span><i class="far fa-calendar"></i> 2023.05.20</span> | |
| <span><i class="far fa-eye"></i> 9,128</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- 記事カード6 --> | |
| <div class="article-card fade-in" style="animation-delay: 0.6s;"> | |
| <img src="https://source.unsplash.com/random/600x400/?virtualreality" alt="仮想現実" class="article-image"> | |
| <div class="article-content"> | |
| <span class="article-category">未来学</span> | |
| <h3 class="article-title">仮想現実が常態化する世界での「本物」の定義の変遷</h3> | |
| <p class="article-excerpt">メタバースの進展により、肉体を伴わないデジタル存在として生きることが可能になる未来。その時、私たちは何を「現実」と呼ぶのか...</p> | |
| <div class="article-meta"> | |
| <span><i class="far fa-calendar"></i> 2023.05.15</span> | |
| <span><i class="far fa-eye"></i> 7,451</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- ニュースレターセクション --> | |
| <section class="newsletter"> | |
| <div class="newsletter-content"> | |
| <h3 class="newsletter-title">境界線通信ニュースレター</h3> | |
| <p class="newsletter-desc">現実と虚構の境界を探求する最新の記事、独占インタビュー、特別コンテンツを毎週お届けします。メールアドレスを登録して、思考の冒険に参加しましょう。</p> | |
| <form class="newsletter-form"> | |
| <input type="email" placeholder="あなたのメールアドレス" class="newsletter-input" required> | |
| <button type="submit" class="newsletter-btn">購読する</button> | |
| </form> | |
| </div> | |
| </section> | |
| <!-- 哲学的引用 --> | |
| <section class="philosophy-quote"> | |
| <p class="quote-text">世界とは私の世界である。これは形而上学的主体が世界であるという事実において示されるのであり、世界と主体は一つであるという事実において示されるのだ。</p> | |
| <p class="quote-author">- ルートヴィヒ・ウィトゲンシュタイン『論理哲学論考』-</p> | |
| </section> | |
| </main> | |
| <footer> | |
| <div class="footer-logo">境界線通信</div> | |
| <div class="footer-links"> | |
| <a href="#" class="footer-link">ホーム</a> | |
| <a href="#" class="footer-link">記事一覧</a> | |
| <a href="#" class="footer-link">カテゴリー</a> | |
| <a href="#" class="footer-link">寄稿</a> | |
| <a href="#" class="footer-link">お問い合わせ</a> | |
| <a href="#" class="footer-link">プライバシーポリシー</a> | |
| </div> | |
| <div class="social-links"> | |
| <a href="#" class="social-link"><i class="fab fa-twitter"></i></a> | |
| <a href="#" class="social-link"><i class="fab fa-facebook-f"></i></a> | |
| <a href="#" class="social-link"><i class="fab fa-instagram"></i></a> | |
| <a href="#" class="social-link"><i class="fab fa-youtube"></i></a> | |
| <a href="#" class="social-link"><i class="fab fa-patreon"></i></a> | |
| </div> | |
| <p class="copyright">© 2023 境界線通信 - 世界と虚構の合間. All Rights Reserved.</p> | |
| </footer> | |
| <!-- モーダル --> | |
| <div class="modal" id="about-modal"> | |
| <div class="modal-content"> | |
| <span class="close-modal" id="close-modal">×</span> | |
| <h2 class="modal-article-title">境界線通信について</h2> | |
| <img src="https://source.unsplash.com/random/800x500/?philosophy" alt="哲学" class="modal-article-image"> | |
| <p class="modal-article-text"> | |
| 「境界線通信」は2023年、現実と虚構の境界に魅了された研究者、作家、アーティストの集団によって設立されました。私たちは日々のニュースを超えて、物事の本質を探求するジャーナリズムを目指しています。 | |
| </p> | |
| <p class="modal-article-text"> | |
| 現代社会では、虚構と現実の境界がますます曖昧になっています。映画やゲームの仮想世界は日々進化し、人工知能は人間の創造性を模倣し、量子物理学は私たちの現実認識に根本的な問いを投げかけます。こうした時代に、私たちは何を信じ、どのように世界と関わっていけば良いのでしょうか？ | |
| </p> | |
| <p class="modal-article-text"> | |
| 境界線通信は、こうした問いに正面から向き合い、多角的な視点から探求するメディアプラットフォームです。哲学、科学、芸術、テクノロジー、神話学など様々な分野を横断し、現実と虚構が交差するその瞬間を捉えようとしています。 | |
| </p> | |
| <p class="modal-article-text"> | |
| 私たちの使命は、単なる事実報道を超えて、読者とともに「知の冒険」に乗り出すことです。世界のあり方を問い直し、時空間を超えた知的な対話の場を創出したいと考えています。 | |
| </p> | |
| <p class="modal-article-text"> | |
| この旅に参加しませんか？境界の向こう側には、きっと驚くべき風景が広がっているはずです。 | |
| </p> | |
| </div> | |
| </div> | |
| <script> | |
| // パーティクルの生成 | |
| document.addEventListener('DOMContentLoaded', function() { | |
| const particlesContainer = document.getElementById('particles'); | |
| for (let i = 0; i < 50; i++) { | |
| const particle = document.createElement('div'); | |
| particle.classList.add('particle'); | |
| // ランダムなサイズ (3px ~ 10px) | |
| const size = Math.random() * 7 + 3; | |
| particle.style.width = `${size}px`; | |
| particle.style.height = `${size}px`; | |
| // ランダムな位置 | |
| particle.style.left = `${Math.random() * 100}%`; | |
| particle.style.top = `${Math.random() * 100}%`; | |
| // ランダムな不透明度 (0.2 ~ 0.8) | |
| particle.style.opacity = Math.random() * 0.6 + 0.2; | |
| // ランダムなアニメーション時間 (10s ~ 30s) と遅延 (0s ~ 5s) | |
| const duration = Math.random() * 20 + 10; | |
| const delay = Math.random() * 5; | |
| particle.style.animationDuration = `${duration}s`; | |
| particle.style.animationDelay = `${delay}s`; | |
| particlesContainer.appendChild(particle); | |
| } | |
| // モーダルの制御 | |
| const aboutBtn = document.getElementById('about-btn'); | |
| const aboutModal = document.getElementById('about-modal'); | |
| const closeModal = document.getElementById('close-modal'); | |
| aboutBtn.addEventListener('click', function(e) { | |
| e.preventDefault(); | |
| aboutModal.style.display = 'flex'; | |
| document.body.style.overflow = 'hidden'; | |
| }); | |
| closeModal.addEventListener('click', function() { | |
| aboutModal.style.display = 'none'; | |
| document.body.style.overflow = ''; | |
| }); | |
| window.addEventListener('click', function(e) { | |
| if (e.target === aboutModal) { | |
| aboutModal.style.display = 'none'; | |
| document.body.style.overflow = ''; | |
| } | |
| }); | |
| // フェードインアニメーションのトリガー | |
| const fadeElements = document.querySelectorAll('.fade-in'); | |
| const observer = new IntersectionObserver((entries) => { | |
| entries.forEach(entry => { | |
| if (entry.isIntersecting) { | |
| entry.target.style.opacity = 1; | |
| } | |
| }); | |
| }, { threshold: 0.1 }); | |
| fadeElements.forEach(el => { | |
| el.style.opacity = 0; | |
| observer.observe(el); | |
| }); | |
| }); | |
| </script> | |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <a href="https://enzostvs-deepsite.hf.space" style="color: #fff;" target="_blank" >DeepSite</a> <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;"></p></body> | |
| </html> |