Skip to content

Commit

Permalink
Create index.html
Browse files Browse the repository at this point in the history
  • Loading branch information
@andy64lol
andy64lol authored Dec 16, 2024
1 parent fd4492a commit 0fe034e
Showing 1 changed file with 206 additions and 0 deletions.
206 changes: 206 additions & 0 deletions index.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,206 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Andygames</title>
<link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;700&display=swap" rel="stylesheet">
<style>
body {
background: #000 url('https://images.app.goo.gl/Ai4LCSx69peVeaZY8') center center / cover no-repeat;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
font-family: 'Orbitron', sans-serif;
cursor: url('http://www.rw-designer.com/cursor-extern.php?id=218715'), auto;
}

.text-box {
background-color: rgba(0, 0, 0, 0.7);
padding: 20px;
border-radius: 10px;
text-align: center;
}

.white-text {
font-size: 9rem;
color: white;
background: linear-gradient(90deg, white, cyan);
-webkit-background-clip: text;
color: transparent;
animation: fadeInUp 2s ease-in-out forwards;
opacity: 0;
}

.gradient-text {
font-size: 6rem;
background: linear-gradient(90deg, cyan, magenta);
background-size: 200% 100%;
-webkit-background-clip: text;
color: transparent;
animation: fadeInUp 2s ease-in-out 1s forwards, shift 0.9s infinite alternate 4s;
opacity: 0;
}

button {
margin-top: 20px;
padding: 10px 20px;
font-size: 1.2rem;
font-weight: bold;
background-color: cyan;
border: none;
cursor: pointer;
border-radius: 5px;
transition: background 0.3s;
}

.small-button {
font-size: 1rem;
padding: 8px 16px;
}

button:hover {
background-color: magenta;
}

#embed-container, #credits-container {
display: none;
margin-top: 20px;
}

.credits-text {
font-size: 1.5rem;
color: white;
animation: fadeInUp 2s ease-in-out forwards;
}

.contact-text {
margin-top: 20px;
font-size: 1rem;
color: white;
}

@keyframes fadeInUp {
0% {
opacity: 0;
transform: translateY(30px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}

@keyframes shift {
0% {
background-position: 100% 0;
}
100% {
background-position: 0 0;
}
}
</style>
</head>
<body>
<div class="text-box">
<div class="text white-text">YOU'RE IN...</div>
<div class="text gradient-text">Andygames</div>
</div>
<button id="play-button">Play Project Hangout!!! 1.0 ver by Andyutlb</button>
<button id="play-button-2">Play Catch the Mouse!!! by Andyutlb</button>
<button id="credits-button" class="small-button">Credits</button>
<button id="discord-button" class="small-button">Join Discord Server</button>
<button id="youtube-button" class="small-button">Visit YouTube Channel</button>

<div id="embed-container">
<embed id="scratch-embed" src="" allowtransparency="true" width="485" height="402" frameborder="0" scrolling="no" allowfullscreen></embed>
<button id="back-button">Go Back</button>
</div>

<div id="credits-container">
<div class="credits-text">
Thanks to<br>
<strong>Creator & Webmaster:</strong> Andy64 / Andyutlb<br>
<strong>Game Development:</strong> All members of the Andygame Scratch Studio<br>
(too many to name individually - thank you all!)<br>
<strong>CSS Scripts:</strong> Unknown64<br>
<strong>JavaScript Scripts:</strong> Andy64 / Andyutlb, Unknown64, 4l3x64, Pixel8bit<br>
<strong>HTML Scripts:</strong> Andy64 / Andyutlb, Pixel8bit
</div>
<div class="contact-text">Report Bugs: <a href="mailto:andy64lolxd@gmail.com">andy64lolxd@gmail.com</a></div>
<button id="credits-back-button">Go Back</button>
</div>

<script>
const playButton = document.getElementById('play-button');
const playButton2 = document.getElementById('play-button-2');
const creditsButton = document.getElementById('credits-button');
const discordButton = document.getElementById('discord-button');
const youtubeButton = document.getElementById('youtube-button');
const embedContainer = document.getElementById('embed-container');
const creditsContainer = document.getElementById('credits-container');
const backButton = document.getElementById('back-button');
const creditsBackButton = document.getElementById('credits-back-button');
const scratchEmbed = document.getElementById('scratch-embed');

playButton.addEventListener('click', () => {
hideButtons();
embedContainer.style.display = 'flex';
embedContainer.style.flexDirection = 'column';
embedContainer.style.alignItems = 'center';
scratchEmbed.src = "https://scratch.mit.edu/projects/1097493338/embed";
});

playButton2.addEventListener('click', () => {
hideButtons();
embedContainer.style.display = 'flex';
embedContainer.style.flexDirection = 'column';
embedContainer.style.alignItems = 'center';
scratchEmbed.src = "https://scratch.mit.edu/projects/1111248213/embed";
});

creditsButton.addEventListener('click', () => {
hideButtons();
creditsContainer.style.display = 'block';
});

backButton.addEventListener('click', () => {
embedContainer.style.display = 'none';
scratchEmbed.src = '';
showButtons();
});

creditsBackButton.addEventListener('click', () => {
creditsContainer.style.display = 'none';
showButtons();
});

discordButton.addEventListener('click', () => {
window.open('https://discord.gg/vuhT7mpwAg', '_blank');
});

youtubeButton.addEventListener('click', () => {
window.open('https://www.youtube.com/@KaickES/featured', '_blank');
});

function hideButtons() {
playButton.style.display = 'none';
playButton2.style.display = 'none';
creditsButton.style.display = 'none';
discordButton.style.display = 'none';
youtubeButton.style.display = 'none';
}

function showButtons() {
playButton.style.display = 'block';
playButton2.style.display = 'block';
creditsButton.style.display = 'block';
discordButton.style.display = 'block';
youtubeButton.style.display = 'block';
}
</script>
</body>
</html>

0 comments on commit 0fe034e

Please sign in to comment.