Toy Box
Info
Created On: July 12, 2023
Created By:
AI
Model: gpt-3.5-turbo-16k-0613
Time: 14 seconds
Prompt Tokens: 919
Completion Tokens: 1022
Total Token Cost: 1941
Get This App On Your Website
Copy Code
1. Copy the code above with the iframe and link.
2. Paste the code into your website.
3. Resize the iframe to fit your website.
Javascript, HTML, CSS Code
Copy
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript"> window.addEventListener('error', function(event) { var message = JSON.parse(JSON.stringify(event.message)); var source = event.filename; var lineno = event.lineno; var colno = event.colno; var error = event.error; window.parent.postMessage({ type: 'iframeError', details: { message: message, source: source, lineno: lineno, colno: colno, error: error ? error.stack : '' } }, '*'); }); window.addEventListener('unhandledrejection', function(event) { window.parent.postMessage({ type: 'iframePromiseRejection', details: { reason: event.reason } }, '*'); }); </script>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Toy Box</title>
<meta name="description" content="Open the toy box and get a surprise toy!">
<meta name="keywords" content="toy, box, surprise, game">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<style>
body {
font-family: 'Roboto', sans-serif;
background-color: #f9f9f9;
}
.toy-box {
margin-top: 100px;
text-align: center;
}
.toy-box img {
width: 200px;
height: auto;
}
.btn-open-box {
font-size: 24px;
padding: 10px 20px;
background-color: #ff6b6b;
color: #fff;
border: none;
border-radius: 8px;
cursor: pointer;
transition: background-color 0.3s ease;
}
.btn-open-box:hover {
background-color: #ff4f4f;
}
</style>
<link rel="canonical" href="https://calculator.tools/prompt/1486/">
<meta charset="utf-8">
</head>
<body>
<div id="main-container" class="container">
<div class="toy-box">
<img src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/160/apple/285/present_1f381.png" alt="Toy Box">
<button class="btn-open-box">Open the Toy Box!</button>
</div>
</div>
<script type="text/javascript">
$(document).ready(function() {
$('.btn-open-box').click(function() {
var toys = [
'https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/160/apple/285/banana_1f34c.png',
'https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/160/apple/285/balloon_1f388.png',
'https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/160/apple/285/car_1f697.png',
'https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/160/apple/285/dolphin_1f42c.png',
'https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/160/apple/285/guitar_1f3b8.png',
'https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/160/apple/285/lollipop_1f36d.png',
'https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/160/apple/285/microphone_1f3a4.png',
'https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/160/apple/285/panda_1f43c.png',
'https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/160/apple/285/rocket_1f680.png',
'https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/160/apple/285/unicorn_1f984.png',
'https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/160/apple/285/video-game_1f3ae.png',
'https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/160/apple/285/watermelon_1f349.png'
];
var randomIndex = Math.floor(Math.random() * toys.length);
var toyImg = $('<img>').attr('src', toys[randomIndex]);
$('.toy-box').empty().append(toyImg);
});
});
</script>
<script type="text/javascript"> var localStoragePrefix = "ct-{{ cachebreaker }}"; var lastSave = 0; function saveLocal(data) { if (Date.now() - lastSave < 1000) { return; } let cookie = localStoragePrefix + "=" + JSON.stringify(data) + "; path=" + window.location.pathname + "'; SameSite=Strict"; cookie += "; expires=" + new Date(Date.now() + 1000 * 60 * 60 * 24 * 365 * 1000).toUTCString(); document.cookie = cookie; lastSave = Date.now(); } function loadLocal() { var cookiePrefix = localStoragePrefix + "="; var cookieStart = document.cookie.indexOf(cookiePrefix); if (cookieStart > -1) { let cookieEnd = document.cookie.indexOf(";", cookieStart); if (cookieEnd == -1) { cookieEnd = document.cookie.length; } var cookieData = document.cookie.substring(cookieStart + cookiePrefix.length, cookieEnd); return JSON.parse(cookieData); } } </script>
<script type="text/javascript"> window.addEventListener('load', function() { var observer = new MutationObserver(function() { window.parent.postMessage({height: document.documentElement.scrollHeight || document.body.scrollHeight},"*"); }); observer.observe(document.body, {attributes: true, childList: true, subtree: true}); window.parent.postMessage({height: document.documentElement.scrollHeight || document.body.scrollHeight},"*"); }); </script>
</body>
</html>