predatortoabuse commited on
Commit
d5f89d8
1 Parent(s): 86d9592

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +7 -192
index.html CHANGED
@@ -1,218 +1,33 @@
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>
 
1
  <!DOCTYPE html>
2
+ <html>
3
 
4
  <head>
5
+ <meta charset="utf-8" />
6
+ <meta name="viewport" content="width=device-width" />
7
+ <title>Stable Diffusion 3 Semi</title>
8
  <style>
 
 
9
  body {
 
10
  margin: 0;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
11
  }
 
12
  .fullframe {
13
  max-width: 100%;
14
  max-height: 100%;
15
  width: 100vw;
16
  height: 100vh;
17
  overflow: hidden;
 
18
  }
 
19
  .iframe-element {
20
  min-width: 100%;
21
  min-height: 100%;
22
  }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
23
  </style>
24
  </head>
25
 
26
  <body>
27
+ <div class="fullframe">
28
+ <iframe class="iframe-element" allowfullscreen="true" frameborder="0" src="https://stabilityai-stable-diffusion-3-medium.hf.space/">
29
+ </iframe>
 
 
 
 
 
 
 
 
30
  </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
31
  </body>
32
 
33
  </html>