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