Spaces:
Running
Running
| <html lang="ja"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>画像ダウンロード</title> | |
| <style> | |
| body { | |
| font-family: Arial, sans-serif; | |
| background-color: #f4f4f9; | |
| margin: 0; | |
| padding: 0; | |
| display: flex; | |
| flex-wrap: wrap; | |
| justify-content: center; | |
| gap: 20px; | |
| padding: 20px; | |
| } | |
| .image-box { | |
| border: 2px solid #ddd; | |
| border-radius: 10px; | |
| padding: 15px; | |
| background-color: #fff; | |
| box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); | |
| text-align: center; | |
| max-width: 300px; | |
| transition: transform 0.2s ease, box-shadow 0.2s ease; | |
| } | |
| .image-box:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); | |
| } | |
| .image-box img { | |
| max-width: 100%; | |
| height: auto; | |
| border-radius: 5px; | |
| object-fit: cover; | |
| /* 画像の小さい方を200pxに合わせる */ | |
| mix-height: 200px; | |
| mix-width: 200px; | |
| } | |
| .download-button, .copy-button { | |
| margin-top: 10px; | |
| display: inline-block; | |
| padding: 12px 25px; | |
| background-color: #4CAF50; | |
| color: white; | |
| text-decoration: none; | |
| border-radius: 25px; | |
| font-size: 16px; | |
| transition: background-color 0.3s ease, transform 0.2s ease; | |
| } | |
| .copy-button{ | |
| background-color: #4287f5 ; | |
| cursor: pointer; | |
| } | |
| .download-button:hover, .copy-button:hover { | |
| background-color: #45a049; | |
| transform: translateY(-2px); | |
| } | |
| #loading { | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| background-color: rgba(255, 255, 255, 0.8); | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| font-size: 24px; | |
| color: #333; | |
| z-index: 1000; | |
| transition: opacity 1s ease, visibility 1s ease; /* フェードアウトのためのスタイル */ | |
| } | |
| #loading.hidden { | |
| opacity: 0; | |
| visibility: hidden; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <!-- ローディング表示 --> | |
| <div id="loading">Loading...</div> | |
| <script> | |
| let number = 5; // 画像の数 | |
| let imagesLoaded = 0; // 読み込まれた画像の数 | |
| for (let i = 1; i <= number; i++) { | |
| // 新しいdiv要素を作成 | |
| let imageBox = document.createElement('div'); | |
| imageBox.className = 'image-box'; | |
| // 画像要素を作成 | |
| let img = document.createElement('img'); | |
| img.src = location.href + "/marker/" + i + ".png"; // 画像のパスを動的に設定 | |
| img.alt = "画像"; | |
| // 画像の読み込み完了イベントを設定 | |
| img.onload = function() { | |
| imagesLoaded++; | |
| if (imagesLoaded === number) { | |
| // 全ての画像が読み込まれたらローディング画面をフェードアウトさせる | |
| setTimeout(function() { | |
| document.getElementById('loading').classList.add('hidden'); | |
| }, 500); // 少し遅らせてからフェードアウト開始 | |
| } | |
| }; | |
| // divに画像を追加 | |
| imageBox.appendChild(img); | |
| document.body.appendChild(imageBox); // 画像をbodyに追加 | |
| } | |
| // ダウンロードリンクを作成 | |
| let downloadLink = document.createElement('a'); | |
| downloadLink.href = location.href + "/marker/" + i + ".png"; | |
| downloadLink.download = ''; | |
| downloadLink.className = 'download-button'; | |
| downloadLink.textContent = 'ダウンロード'; | |
| // コピーリンクボタンを作成 | |
| let copyButton = document.createElement('button'); | |
| copyButton.className = 'copy-button'; | |
| copyButton.textContent = 'URLをコピー'; | |
| // コピーボタンのクリックイベント | |
| copyButton.onclick = function() { | |
| const imageUrl = location.href + "/marker/" + i + ".png"; | |
| navigator.clipboard.writeText(imageUrl).then(function() { | |
| alert('URLがコピーされました: \n' + imageUrl); | |
| }, function(err) { | |
| alert('コピーに失敗しました: ', err); | |
| }); | |
| }; | |
| // divに画像、ダウンロードボタン、コピーリンクを追加 | |
| imageBox.appendChild(img); | |
| imageBox.appendChild(document.createElement('br')); | |
| imageBox.appendChild(downloadLink); | |
| imageBox.appendChild(document.createElement('br')); | |
| imageBox.appendChild(copyButton); | |
| // bodyにdivを追加 | |
| document.body.appendChild(imageBox); | |
| </script> | |
| </body> | |
| </html> | |