Hugging Face's logo

Spaces:
predatortoabuse
/
Anime-Flash-SDXL
Running

App Files Community
predatortoabuse commited on
Commit
86d9592
•
1 Parent(s): 135a0f8

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +218 -19
index.html CHANGED
@@ -1,19 +1,218 @@
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>Stable Diffusion Semi-Realism</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: center;
61
+ align-items: center;
62
+ width: 50px;
63
+ height: 50px;
64
+ border: 6px solid #f3f3f3; /* Light grey */
65
+ border-top: 6px solid #3498db; /* Blue */
66
+ border-radius: 50%;
67
+ animation: spin 1s linear infinite;
68
+ }
69
+
70
+ @keyframes spin {
71
+ 0% { transform: rotate(0deg); }
72
+ 100% { transform: rotate(360deg); }
73
+ }
74
+
75
+ /* Footer styles */
76
+ footer {
77
+ background-color: #f1f1f1;
78
+ color: #333;
79
+ padding: 20px 0;
80
+ text-align: center;
81
+ border-top: 1px solid #ddd;
82
+ width: 100%;
83
+ position: relative;
84
+ display: none; /* Initially hidden */
85
+ }
86
+
87
+ .footer-container {
88
+ max-width: 800px;
89
+ margin: 0 auto;
90
+ padding: 0 20px;
91
+ display: flex;
92
+ flex-direction: column;
93
+ align-items: center;
94
+ }
95
+
96
+ .footer-links {
97
+ list-style: none;
98
+ padding: 0;
99
+ display: flex;
100
+ justify-content: center;
101
+ margin: 0;
102
+ margin-bottom: 10px;
103
+ }
104
+
105
+ .footer-links li {
106
+ margin: 0 15px;
107
+ }
108
+
109
+ .footer-links a {
110
+ color: #333;
111
+ text-decoration: none;
112
+ font-size: 14px;
113
+ }
114
+
115
+ .footer-links a:hover {
116
+ text-decoration: underline;
117
+ }
118
+
119
+ .footer-feedback {
120
+ margin-bottom: 10px;
121
+ font-size: 14px;
122
+ }
123
+
124
+ .footer-feedback a {
125
+ color: #333;
126
+ text-decoration: none;
127
+ }
128
+
129
+ .footer-feedback a:hover {
130
+ text-decoration: underline;
131
+ }
132
+
133
+ .footer-copyright {
134
+ font-size: 14px;
135
+ }
136
+
137
+ /* Floating button styles */
138
+ .floating-button {
139
+ position: fixed;
140
+ bottom: 80px;
141
+ right: 20px;
142
+ background-color: #7289da; /* Discord color */
143
+ color: #fff;
144
+ border: none;
145
+ border-radius: 50px;
146
+ padding: 15px 20px;
147
+ font-size: 16px;
148
+ cursor: pointer;
149
+ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
150
+ display: none; /* Initially hidden */
151
+ }
152
+
153
+ .floating-button:hover {
154
+ background-color: #677bc4; /* Darker Discord color on hover */
155
+ }
156
+ </style>
157
+ </head>
158
+
159
+ <body>
160
+ <!-- Loader container -->
161
+ <div id="loaderContainer" class="loader-container">
162
+ <div id="loader" class="loader"></div>
163
+ </div>
164
+
165
+ <!-- Content and Iframe container -->
166
+ <div class="content">
167
+ <div id="iframeContainer" class="fullframe">
168
+ <iframe id="iframeElement" class="iframe-element" allowfullscreen="true" frameborder="0" src="https://stabilityai-stable-diffusion-3-medium.hf.space">
169
+ </iframe>
170
+ </div>
171
+ </div>
172
+
173
+ <!-- Footer -->
174
+ <footer id="footer">
175
+ <div class="footer-container">
176
+ <ul class="footer-links">
177
+ <li><a href="https://catmrf-privacy-policy-demo.static.hf.space">Privacy</a></li>
178
+ <li><a href="https://catmrf-content-policy-demo.static.hf.space">Content Policy</a></li>
179
+ <li><a href="https://huggingface.co/groqcin">All Ai Tools</a></li>
180
+ </ul>
181
+ <div class="footer-feedback">
182
+ <a href="https://huggingface.co/predatortoabuse">Feedback</a>
183
+ </div>
184
+ <div class="footer-copyright">
185
+ &copy; 2024 Groqcin Technologies Inc.
186
+ </div>
187
+ </div>
188
+ </footer>
189
+
190
+ <!-- Floating button -->
191
+ <button id="discordButton" class="floating-button">Join Our Discord</button>
192
+
193
+ <script>
194
+ // JavaScript to handle loading animation and show iframe, footer, and button
195
+ window.addEventListener('load', function () {
196
+ var loaderContainer = document.getElementById('loaderContainer');
197
+ var iframeContainer = document.getElementById('iframeContainer');
198
+ var footer = document.getElementById('footer');
199
+ var discordButton = document.getElementById('discordButton');
200
+
201
+ // Show loading animation for 5 seconds
202
+ setTimeout(function () {
203
+ loaderContainer.style.display = 'none'; // Hide loader container
204
+ iframeContainer.style.display = 'block'; // Show iframe
205
+ footer.style.display = 'block'; // Show footer
206
+ discordButton.style.display = 'block'; // Show Discord button
207
+ document.body.style.overflow = 'auto'; // Restore scrolling
208
+ }, 5000); // 5000 milliseconds = 5 seconds
209
+ });
210
+
211
+ // Optional: Add a click event to the Discord button to navigate to your Discord link
212
+ document.getElementById('discordButton').addEventListener('click', function () {
213
+ window.location.href = 'https://discord.com/invite/cHqsKzz2'; // Replace with your actual Discord invite link
214
+ });
215
+ </script>
216
+ </body>
217
+
218
+ </html>