Skip to content

Instantly share code, notes, and snippets.

@dmitry-vsl
Created October 30, 2023 02:04
Show Gist options
  • Save dmitry-vsl/8b9cdeb23dd93812181dc0f08cc3cd17 to your computer and use it in GitHub Desktop.
Save dmitry-vsl/8b9cdeb23dd93812181dc0f08cc3cd17 to your computer and use it in GitHub Desktop.
<!DOCTYPE html>
<html>
<head>
<title>Random Health Advice</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
#coin {
width: 100px;
height: 100px;
background-image: url('data:image/jpeg;base64,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');
background-size: cover;
animation: flip 1s linear;
transform-style: preserve-3d;
display: none; /* Initially hide the coin */
}
@keyframes flip {
0% {
transform: rotateY(0deg);
}
50% {
transform: rotateY(180deg);
}
100% {
transform: rotateY(360deg);
}
}
#adviceText {
font-size: 30px;
}
#selectedImage {
width: 200px;
height: auto;
}
@media (max-width: 768px) {
#selectedImage {
width: 100%; /* Set the image to 100% width for mobile screens */
}
#adviceText {
font-size: 40px; /* Increase font size for mobile screens */
}
#selectButton {
font-size: 24px; /* Increase button font size for mobile screens */
padding: 10px 20px; /* Increase button padding for mobile screens */
}
}
</style>
</head>
<body>
<h1>Random Health Advice</h1>
<button id="selectButton">Get Health Advice</button>
<div id="imageContainer" style="display: none;">
<p id="adviceText"></p>
<img id="selectedImage" src="" alt="Selected Image">
</div>
<div id="coin" style="display: none;"></div>
<script>
// URL of the coin image
// Array of human head and belly image URLs
const images = [
'https://img.freepik.com/premium-photo/human-head-with-glowing-neurons-brain-esoteric-meditation-concept-connection-with-other-worlds-creates-with-generative-ai_438099-11015.jpg',
'https://previews.123rf.com/images/icetray/icetray1905/icetray190500523/123270778-science-anatomy-scan-of-human-stomach-glowing.jpg'
];
// Advice messages
const adviceMessages = [
'у вас больная голова, массируйте ее по пять минут в день!',
'живот не в порядке, погладьте его по часовой стрелке'
];
// Get references to the button, coin, image, and advice elements
const selectButton = document.getElementById('selectButton');
const selectedImage = document.getElementById('selectedImage');
const coin = document.getElementById('coin');
const imageContainer = document.getElementById('imageContainer');
const adviceText = document.getElementById('adviceText');
// Add a click event listener to the button
selectButton.addEventListener('click', function () {
// Hide the image container
imageContainer.style.display = 'none';
// Generate a random index to select an image and advice message
const randomIndex = Math.floor(Math.random() * images.length);
// Set the advice text and font size
adviceText.textContent = adviceMessages[randomIndex];
adviceText.style.fontSize = '30px';
// Set the source of the selected image
selectedImage.src = images[randomIndex];
// Show the coin and add the flip animation
coin.style.display = 'block';
// Simulate a delay for the coin-flipping animation (1s in this example)
setTimeout(function () {
// Hide the coin animation
coin.style.display = 'none';
// Show the image container
imageContainer.style.display = 'block';
}, 1000); // 1s delay
});
</script>
</body>
</html>
@dmitry-vsl
Copy link
Author

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment