| | <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 {
|
| |
|
| | 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>
|
| |
|
