Spaces:

predatortoabuse
/

Anime-Flash-SDXL

Running

App Files Files Community

Anime-Flash-SDXL / index.html

predatortoabuse

Update index.html

86d9592 verified 3 months ago

raw

history blame

No virus

6.66 kB

	<!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; /* Prevent scrolling while loading */
	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; /* Hide the iframe initially */
	}

	.iframe-element {
	min-width: 100%;
	min-height: 100%;
	}

	/* Centering loader */
	.loader-container {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100vw;
	height: 100vh;
	position: absolute;
	top: 0;
	left: 0;
	background: #f0f0f0; /* Light background color */
	}

	/* Loading animation styles */
	.loader {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 50px;
	height: 50px;
	border: 6px solid #f3f3f3; /* Light grey */
	border-top: 6px solid #3498db; /* Blue */
	border-radius: 50%;
	animation: spin 1s linear infinite;
	}

	@keyframes spin {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
	}

	/* Footer styles */
	footer {
	background-color: #f1f1f1;
	color: #333;
	padding: 20px 0;
	text-align: center;
	border-top: 1px solid #ddd;
	width: 100%;
	position: relative;
	display: none; /* Initially hidden */
	}

	.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 styles */
	.floating-button {
	position: fixed;
	bottom: 80px;
	right: 20px;
	background-color: #7289da; /* Discord color */
	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; /* Initially hidden */
	}

	.floating-button:hover {
	background-color: #677bc4; /* Darker Discord color on hover */
	}
	</style>
	</head>

	<body>
	<!-- Loader container -->
	<div id="loaderContainer" class="loader-container">
	<div id="loader" class="loader"></div>
	</div>

	<!-- Content and Iframe container -->
	<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 -->
	<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>

	<!-- Floating button -->
	<button id="discordButton" class="floating-button">Join Our Discord</button>

	<script>
	// JavaScript to handle loading animation and show iframe, footer, and button
	window.addEventListener('load', function () {
	var loaderContainer = document.getElementById('loaderContainer');
	var iframeContainer = document.getElementById('iframeContainer');
	var footer = document.getElementById('footer');
	var discordButton = document.getElementById('discordButton');

	// Show loading animation for 5 seconds
	setTimeout(function () {
	loaderContainer.style.display = 'none'; // Hide loader container
	iframeContainer.style.display = 'block'; // Show iframe
	footer.style.display = 'block'; // Show footer
	discordButton.style.display = 'block'; // Show Discord button
	document.body.style.overflow = 'auto'; // Restore scrolling
	}, 5000); // 5000 milliseconds = 5 seconds
	});

	// Optional: Add a click event to the Discord button to navigate to your Discord link
	document.getElementById('discordButton').addEventListener('click', function () {
	window.location.href = 'https://discord.com/invite/cHqsKzz2'; // Replace with your actual Discord invite link
	});
	</script>
	</body>

	</html>