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 { | |
height: 100px; | |
width: auto; | |
border-radius: 5px; | |
object-fit: cover; | |
} | |
.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 = 60; // 画像の数 | |
let imagesLoaded = 0; // 読み込まれた画像の数 | |
for (let i = 1; i <= number; i++) { | |
let imageBox = document.createElement('div'); | |
imageBox.className = 'image-box'; | |
let img = document.createElement('img'); | |
img.src = location.origin + "/marker/" + i + ".png"; | |
img.alt = "画像"; | |
img.onload = function() { | |
imagesLoaded++; | |
if (imagesLoaded === number) { | |
setTimeout(function() { | |
document.getElementById('loading').classList.add('hidden'); | |
}, 500); | |
} | |
}; | |
// ダウンロードリンクを作成(ループ内に配置) | |
let downloadLink = document.createElement('a'); | |
downloadLink.href = img.src; // 画像のURLを直接指定 | |
downloadLink.download = 'marker_' + i + '.png'; | |
downloadLink.className = 'download-button'; | |
downloadLink.textContent = 'ダウンロード'; | |
// コピーリンクボタンを作成(ループ内に配置) | |
let copyButton = document.createElement('button'); | |
copyButton.className = 'copy-button'; | |
copyButton.textContent = 'URLをコピー'; | |
copyButton.onclick = function() { | |
navigator.clipboard.writeText(img.src).then(function() { | |
alert('URLがコピーされました: \n' + img.src); | |
}).catch(function(err) { | |
alert('コピーに失敗しました: ' + err); | |
}); | |
}; | |
// 各要素を `imageBox` に追加 | |
imageBox.appendChild(img); | |
imageBox.appendChild(document.createElement('br')); | |
imageBox.appendChild(downloadLink); | |
imageBox.appendChild(document.createElement('br')); | |
imageBox.appendChild(copyButton); | |
// `body` に `imageBox` を追加 | |
document.body.appendChild(imageBox); | |
} | |
</script> | |
</body> | |
</html> | |