|
<!DOCTYPE html> |
|
<html lang="en"> |
|
|
|
<head> |
|
<meta charset="UTF-8"> |
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
<title>Stable Diffusion Semi-Realism</title> |
|
<style> |
|
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&display=swap'); |
|
|
|
body { |
|
font-family: 'Poppins', sans-serif; |
|
margin: 0; |
|
overflow: hidden; |
|
display: flex; |
|
flex-direction: column; |
|
min-height: 100vh; |
|
} |
|
|
|
.content { |
|
flex: 1; |
|
display: flex; |
|
justify-content: center; |
|
align-items: center; |
|
width: 100vw; |
|
height: 100vh; |
|
position: relative; |
|
} |
|
|
|
.fullframe { |
|
max-width: 100%; |
|
max-height: 100%; |
|
width: 100vw; |
|
height: 100vh; |
|
overflow: hidden; |
|
display: none; |
|
} |
|
|
|
.iframe-element { |
|
min-width: 100%; |
|
min-height: 100%; |
|
} |
|
|
|
|
|
.loader-container { |
|
display: flex; |
|
justify-content: center; |
|
align-items: center; |
|
width: 100vw; |
|
height: 100vh; |
|
position: absolute; |
|
top: 0; |
|
left: 0; |
|
background: #f0f0f0; |
|
} |
|
|
|
|
|
.loader { |
|
display: flex; |
|
justify-content: center; |
|
align-items: center; |
|
width: 50px; |
|
height: 50px; |
|
border: 6px solid #f3f3f3; |
|
border-top: 6px solid #3498db; |
|
border-radius: 50%; |
|
animation: spin 1s linear infinite; |
|
} |
|
|
|
@keyframes spin { |
|
0% { transform: rotate(0deg); } |
|
100% { transform: rotate(360deg); } |
|
} |
|
|
|
|
|
footer { |
|
background-color: #f1f1f1; |
|
color: #333; |
|
padding: 20px 0; |
|
text-align: center; |
|
border-top: 1px solid #ddd; |
|
width: 100%; |
|
position: relative; |
|
display: none; |
|
} |
|
|
|
.footer-container { |
|
max-width: 800px; |
|
margin: 0 auto; |
|
padding: 0 20px; |
|
display: flex; |
|
flex-direction: column; |
|
align-items: center; |
|
} |
|
|
|
.footer-links { |
|
list-style: none; |
|
padding: 0; |
|
display: flex; |
|
justify-content: center; |
|
margin: 0; |
|
margin-bottom: 10px; |
|
} |
|
|
|
.footer-links li { |
|
margin: 0 15px; |
|
} |
|
|
|
.footer-links a { |
|
color: #333; |
|
text-decoration: none; |
|
font-size: 14px; |
|
} |
|
|
|
.footer-links a:hover { |
|
text-decoration: underline; |
|
} |
|
|
|
.footer-feedback { |
|
margin-bottom: 10px; |
|
font-size: 14px; |
|
} |
|
|
|
.footer-feedback a { |
|
color: #333; |
|
text-decoration: none; |
|
} |
|
|
|
.footer-feedback a:hover { |
|
text-decoration: underline; |
|
} |
|
|
|
.footer-copyright { |
|
font-size: 14px; |
|
} |
|
|
|
|
|
.floating-button { |
|
position: fixed; |
|
bottom: 80px; |
|
right: 20px; |
|
background-color: #7289da; |
|
color: #fff; |
|
border: none; |
|
border-radius: 50px; |
|
padding: 15px 20px; |
|
font-size: 16px; |
|
cursor: pointer; |
|
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); |
|
display: none; |
|
} |
|
|
|
.floating-button:hover { |
|
background-color: #677bc4; |
|
} |
|
</style> |
|
</head> |
|
|
|
<body> |
|
|
|
<div id="loaderContainer" class="loader-container"> |
|
<div id="loader" class="loader"></div> |
|
</div> |
|
|
|
|
|
<div class="content"> |
|
<div id="iframeContainer" class="fullframe"> |
|
<iframe id="iframeElement" class="iframe-element" allowfullscreen="true" frameborder="0" src="https://stabilityai-stable-diffusion-3-medium.hf.space"> |
|
</iframe> |
|
</div> |
|
</div> |
|
|
|
|
|
<footer id="footer"> |
|
<div class="footer-container"> |
|
<ul class="footer-links"> |
|
<li><a href="https://catmrf-privacy-policy-demo.static.hf.space">Privacy</a></li> |
|
<li><a href="https://catmrf-content-policy-demo.static.hf.space">Content Policy</a></li> |
|
<li><a href="https://huggingface.co/groqcin">All Ai Tools</a></li> |
|
</ul> |
|
<div class="footer-feedback"> |
|
<a href="https://huggingface.co/predatortoabuse">Feedback</a> |
|
</div> |
|
<div class="footer-copyright"> |
|
© 2024 Groqcin Technologies Inc. |
|
</div> |
|
</div> |
|
</footer> |
|
|
|
|
|
<button id="discordButton" class="floating-button">Join Our Discord</button> |
|
|
|
<script> |
|
|
|
window.addEventListener('load', function () { |
|
var loaderContainer = document.getElementById('loaderContainer'); |
|
var iframeContainer = document.getElementById('iframeContainer'); |
|
var footer = document.getElementById('footer'); |
|
var discordButton = document.getElementById('discordButton'); |
|
|
|
|
|
setTimeout(function () { |
|
loaderContainer.style.display = 'none'; |
|
iframeContainer.style.display = 'block'; |
|
footer.style.display = 'block'; |
|
discordButton.style.display = 'block'; |
|
document.body.style.overflow = 'auto'; |
|
}, 5000); |
|
}); |
|
|
|
|
|
document.getElementById('discordButton').addEventListener('click', function () { |
|
window.location.href = 'https://discord.com/invite/cHqsKzz2'; |
|
}); |
|
</script> |
|
</body> |
|
|
|
</html> |