File size: 3,941 Bytes
3af080a |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 |
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>A.I. Songs</title>
<link rel="stylesheet" href="/static/css/bulma.min.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@1.0.2/css/bulma.min.css" />
<style>
.card {
/*overflow: hidden;*/
position: relative;
}
.card .card-image {
position: relative;
aspect-ratio: 1 / 1;
background-size: cover;
background-position: center;
background-size: 100%;
transition: background 0.4s ease-in-out;
}
.card .card-image-2 {
top: -40px;
left: -40px;
opacity: 0;
filter: blur(80px);
position: absolute;
width: calc(100% + 80px);
aspect-ratio: 1/1;
z-Index: -10;
transition: background 0.4s ease-in-out, filter 0.4s ease-out, opacity 0.4s ease-out;
}
.card:hover .card-image {
background-size: 110%;
}
.card:hover .card-image-2 {
background-size: 110%;
opacity: 0.2;
}
</style>
<script>
function copyURL(url) {
const encodedURL = encodeURI(url)
navigator.clipboard.writeText(encodedURL).then(() => {
alert("URL copied to clipboard!")
})
}
</script>
</head>
<body data-theme="dark">
<section class="section">
<div class="container">
<h1 class="title">Hier eine Quelle für (bald) alle von meinen A.I. Songs.</h1>
<p class="subtitle">Bisher noch alles unsortiert und nicht <strong>Schön</strong>!</p>
<div class="columns is-multiline">
<div class="column is-two-fifths">
<div class="card">
<div class="card-image" style="background-image: url(/static/images/image-2.png);"></div>
<div class="card-image-2" style="background-image: url(/static/images/image-2.png);"></div>
<div class="card-content">
<div class="media">
<div class="media-content">
<p class="title is-4">Ein neuer Zyklus (2025) (ist nur Computer-Code)</p>
</div>
</div>
<div class="content">
<p><strong>Genre:</strong> Blues, Soul</p>
<p><strong>Duration:</strong> 8:49</p>
<a class="button is-small is-primary" href="http://sebastiankay-files.hf.space/getfile/Ein neuer Zyklus (2025) (ist nur Computer-Code)(320k).mp3">Download</a>
<button class="button is-small" onclick="copyURL('http://sebastiankay-files.hf.space/getfile/Ein neuer Zyklus (2025) (ist nur Computer-Code)(320k).mp3')">Copy URL</button>
</div>
</div>
</div>
</div>
<div class="column is-two-fifths">
<div class="card">
<div class="card-image" style="background-image: url(/static/images/image-1.png);"></div>
<div class="card-image-2" style="background-image: url(/static/images/image-1.png);"></div>
<div class="card-content">
<div class="media">
<div class="media-content">
<p class="title is-4">Marco, König von Hagen (Finale Master)</p>
</div>
</div>
<div class="content">
<p><strong>Genre:</strong> Gregorian Chant, Techno, Trance</p>
<p><strong>Duration:</strong> 5:49</p>
<a class="button is-small is-primary" href="http://sebastiankay-files.hf.space/getfile/Marco, König von Hagen Finale (Master Full).wav">Download</a>
<button class="button is-small" onclick="copyURL('http://sebastiankay-files.hf.space/getfile/Marco, König von Hagen Finale (Master Full).wav')">Copy URL</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</body>
</html>
|