Mr. Wallaby - Character View

Info

Created On: July 11, 2023

Created By: @CalculatorTools

AI

Model: gpt-3.5-turbo-16k-0613

Time: 20 seconds

Prompt Tokens: 929

Completion Tokens: 1002

Total Token Cost: 1931

Get This App On Your Website

<iframe src="https://calculators.tools/prompt/d3739410fa4f3693c3d43bbc0e267fc0/iframe/" width="100%" height="100%" frameborder="0" scrolling="yes" allowfullscreen="true" webkitallowfullscreen="true" mozallowfullscreen="true" allow="midi; geolocation; microphone; camera; display-capture; encrypted-media; clipboard-read; clipboard-write; notifications; payment-handler; persistent-storage; background-sync; ambient-light-sensor; accessibility-events;" sandbox="allow-modals allow-forms allow-scripts allow-same-origin allow-popups allow-downloads allow-presentation allow-pointer-lock allow-orientation-lock" allowfullscreen="true" allowpaymentrequest="true" frameborder="0"></iframe><br><a href="https://calculator.tools/prompt/1375/" target="_blank" style="font-size: 12px; text-decoration: none;" alt="Create any app, calculator, tools, tracker, or game instantly using AI! - Calculator Tools" title="Create any app, calculator, tools, tracker, or game instantly using AI! - Calculator Tools">Powered by Calculator Tools</a>

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

                    <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>Mr. Wallaby - Character View</title>

    <meta name="description" content="Mr. Wallaby - Character View">

    <meta name="keywords" content="Mr. Wallaby, character view, Peppa Pig, Boomerang">



    <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">



    <!-- Built-In Functions for Apps -->

    <script type="text/javascript">

        var localStoragePrefix = "ct-168908462293016";

        var lastSave = 0;

        // save to localstorage

        function saveLocal(data) {

            if (Date.now() - lastSave < 1000) {

                return;

            }

            // save to cookie

            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();

        }



        // load from localstorage

        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">

        // App Javascript Goes Here

        function showCharacterView() {

            var characterView = `

                <div class="row">

                    <div class="col text-center">

                        <h1>Mr. Wallaby</h1>

                        <img src="https://image.freepik.com/free-vector/cute-kangaroo-holding-boomerang_45767-30.jpg" alt="Mr. Wallaby" width="300">

                    </div>

                </div>

                <div class="row mt-4">

                    <div class="col">

                        <h3>Appearance</h3>

                        <p>Mr. Wallaby has light brown skin with a medium blue shirt with dark brown glasses and kangaroo-like ears. He also has a brown mustache and a black nose with pink cheeks.</p>

                    </div>

                </div>

                <div class="row mt-4">

                    <div class="col">

                        <h3>Personality</h3>

                        <p>He is very polite.</p>

                    </div>

                </div>

                <div class="row mt-4">

                    <div class="col">

                        <h3>Trivia</h3>

                        <ul>

                            <li>All of his 3 house windows get broken by a boomerang, as shown in the episode Boomerang.</li>

                            <li>He is Daddy Kangaroo's neighbor.</li>

                        </ul>

                    </div>

                </div>

            `;

            $("#main-container").html(characterView);

        }



        $(document).ready(function() {

            showCharacterView();

        });

    </script>

    

    <style>

        /* App CSS Goes Here */

        body {

            background-color: #f9f9f9;

            font-family: 'Roboto', sans-serif;

            color: #333;

        }



        h1, h2, h3, h4, h5, h6 {

            color: #555;

        }



        .row {

            margin-bottom: 2rem;

        }



        img {

            max-width: 100%;

            height: auto;

        }

    </style>



	<link rel="canonical" href="https://calculator.tools/prompt/1375/">

	<meta charset="utf-8">

</head>

<body>

    <div id="main-container" class="container">

        <!-- App HTML Goes Here -->

    </div>

        <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>

Mr. Wallaby - Character View

Info

Tags

AI

Get This App On Your Website

Javascript, HTML, CSS Code

IMAGE TO APP (New!)

SCREENSHOT TO APP (New!)

FAQ

What is Calculator Tools?

What Do You Mean Make An App?

Does This Use ChatGPT?

Calculator Tools

Want Better Apps?