Hugging Face's logo

Spaces:
groqcin
/
Riffusion-Music-Song-And-Lyrics-Generator-Ai
Running

App Files Community
predatortoabuse commited on
Commit
d73a123
·
verified ·
1 Parent(s): a58aaef

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +242 -19
index.html CHANGED
@@ -1,19 +1,242 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+
4
+ <head>
5
+ <meta charset="UTF-8">
6
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
+ <title>Music Riffusion</title>
8
+ <style>
9
+ @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&display=swap');
10
+
11
+ body {
12
+ font-family: 'Poppins', sans-serif;
13
+ margin: 0;
14
+ overflow: hidden; /* Prevent scrolling while loading */
15
+ display: flex;
16
+ flex-direction: column;
17
+ min-height: 100vh;
18
+ }
19
+
20
+ .content {
21
+ flex: 1;
22
+ display: flex;
23
+ justify-content: center;
24
+ align-items: center;
25
+ width: 100vw;
26
+ height: 100vh;
27
+ position: relative;
28
+ }
29
+
30
+ .fullframe {
31
+ max-width: 100%;
32
+ max-height: 100%;
33
+ width: 100vw;
34
+ height: 100vh;
35
+ overflow: hidden;
36
+ display: none; /* Hide the iframe initially */
37
+ }
38
+
39
+ .iframe-element {
40
+ min-width: 100%;
41
+ min-height: 100%;
42
+ }
43
+
44
+ /* Centering loader */
45
+ .loader-container {
46
+ display: flex;
47
+ justify-content: center;
48
+ align-items: center;
49
+ width: 100vw;
50
+ height: 100vh;
51
+ position: absolute;
52
+ top: 0;
53
+ left: 0;
54
+ background: #f0f0f0; /* Light background color */
55
+ }
56
+
57
+ /* Loading animation styles */
58
+ .loader {
59
+ display: flex;
60
+ justify-content: space-around;
61
+ width: 100px;
62
+ }
63
+
64
+ .loader div {
65
+ width: 20px;
66
+ height: 20px;
67
+ background-color: #764bd1; /* Blue color */
68
+ border-radius: 50%;
69
+ animation: loader-animation 1.2s infinite ease-in-out;
70
+ }
71
+
72
+ .loader div:nth-child(1) {
73
+ animation-delay: -0.24s;
74
+ }
75
+
76
+ .loader div:nth-child(2) {
77
+ animation-delay: -0.12s;
78
+ }
79
+
80
+ .loader div:nth-child(3) {
81
+ animation-delay: 0s;
82
+ }
83
+
84
+ @keyframes loader-animation {
85
+ 0%, 80%, 100% {
86
+ transform: scale(0);
87
+ }
88
+
89
+ 40% {
90
+ transform: scale(1);
91
+ }
92
+ }
93
+
94
+ /* Footer styles */
95
+ footer {
96
+ background-color: #f1f1f1;
97
+ color: #333;
98
+ padding: 20px 0;
99
+ text-align: center;
100
+ border-top: 1px solid #ddd;
101
+ width: 100%;
102
+ position: relative;
103
+ display: none; /* Initially hidden */
104
+ }
105
+
106
+ .footer-container {
107
+ max-width: 800px;
108
+ margin: 0 auto;
109
+ padding: 0 20px;
110
+ display: flex;
111
+ flex-direction: column;
112
+ align-items: center;
113
+ }
114
+
115
+ .footer-links {
116
+ list-style: none;
117
+ padding: 0;
118
+ display: flex;
119
+ justify-content: center;
120
+ margin: 0;
121
+ margin-bottom: 10px;
122
+ }
123
+
124
+ .footer-links li {
125
+ margin: 0 15px;
126
+ }
127
+
128
+ .footer-links a {
129
+ color: #333;
130
+ text-decoration: none;
131
+ font-size: 13px;
132
+ }
133
+
134
+ .footer-links a:hover {
135
+ text-decoration: underline;
136
+ }
137
+
138
+ .footer-feedback {
139
+ margin-bottom: 10px;
140
+ font-size: 13px;
141
+ }
142
+
143
+ .footer-feedback a {
144
+ color: #333;
145
+ text-decoration: none;
146
+ }
147
+
148
+ .footer-feedback a:hover {
149
+ text-decoration: underline;
150
+ }
151
+
152
+ .footer-copyright {
153
+ font-size: 14px;
154
+ }
155
+
156
+ /* Floating button styles */
157
+ .floating-button {
158
+ position: fixed;
159
+ bottom: 80px;
160
+ right: 20px;
161
+ background-color: #7289da; /* Discord color */
162
+ color: #fff;
163
+ border: none;
164
+ border-radius: 50px;
165
+ padding: 15px 20px;
166
+ font-size: 16px;
167
+ cursor: pointer;
168
+ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
169
+ display: none; /* Initially hidden */
170
+ }
171
+
172
+ .floating-button:hover {
173
+ background-color: #677bc4; /* Darker Discord color on hover */
174
+ }
175
+ </style>
176
+ </head>
177
+
178
+ <body>
179
+ <!-- Loader container -->
180
+ <div id="loaderContainer" class="loader-container">
181
+ <div id="loader" class="loader">
182
+ <div></div>
183
+ <div></div>
184
+ <div></div>
185
+ </div>
186
+ </div>
187
+
188
+ <!-- Content and Iframe container -->
189
+ <div class="content">
190
+ <div id="iframeContainer" class="fullframe">
191
+ <iframe id="iframeElement" class="iframe-element" allowfullscreen="true" frameborder="0" src="https://app.riffusion.com/create">
192
+ </iframe>
193
+ </div>
194
+ </div>
195
+ <br>
196
+
197
+ <!-- Footer -->
198
+ <footer id="footer">
199
+ <div class="footer-container">
200
+ <ul class="footer-links">
201
+ <li><a href="https://catmrf-privacy-policy-demo.static.hf.space">Privacy</a></li>
202
+ <li><a href="https://catmrf-content-policy-demo.static.hf.space">Content Policy</a></li>
203
+ <li><a href="https://huggingface.co/groqcin">More Ai Tools</a></li>
204
+ </ul>
205
+ <div class="footer-feedback">
206
+ <a href="https://huggingface.co/predatortoabuse">Feedback</a>
207
+ </div>
208
+ <div class="footer-copyright">
209
+ &copy; 2024 Groqcin Technologies Inc.
210
+ </div>
211
+ </div>
212
+ </footer>
213
+
214
+ <!-- Floating button -->
215
+ <button id="discordButton" class="floating-button">Join Our Discord</button>
216
+
217
+ <script>
218
+ // JavaScript to handle loading animation and show iframe, footer, and button
219
+ window.addEventListener('load', function() {
220
+ var loaderContainer = document.getElementById('loaderContainer');
221
+ var iframeContainer = document.getElementById('iframeContainer');
222
+ var footer = document.getElementById('footer');
223
+ var discordButton = document.getElementById('discordButton');
224
+
225
+ // Show loading animation for 5 seconds
226
+ setTimeout(function() {
227
+ loaderContainer.style.display = 'none'; // Hide loader container
228
+ iframeContainer.style.display = 'block'; // Show iframe
229
+ footer.style.display = 'block'; // Show footer
230
+ discordButton.style.display = 'block'; // Show Discord button
231
+ document.body.style.overflow = 'auto'; // Restore scrolling
232
+ }, 5000); // 5000 milliseconds = 5 seconds
233
+ });
234
+
235
+ // Optional: Add a click event to the Discord button to navigate to your Discord link
236
+ document.getElementById('discordButton').addEventListener('click', function() {
237
+ window.location.href = 'https://discord.com/invite/cHqsKzz2'; // Replace with your actual Discord invite link
238
+ });
239
+ </script>
240
+ </body>
241
+
242
+ </html>