<html>

    <head>

        <meta charset="utf-8">

        <meta http-equiv="X-UA-Compatible" content="IE=edge">

        <meta name="viewport" content="width=device-width,initial-scale=1">



        <title>Rickroll</title>

        <meta name="description" content="Never Gonna Give You Up">

        <meta name="keywords" content="Rickroll, Never Gonna Give You Up">



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

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

            $(document).ready(function() {

                $("#rickroll-button").click(function() {

                    window.open("https://www.youtube.com/watch?v=dQw4w9WgXcQ");

                });

            });

        </script>

        

        <style>

            body {

                background-color: #000000;

                display: flex;

                align-items: center;

                justify-content: center;

                height: 100vh;

                margin: 0;

            }

            

            .rickroll-container {

                text-align: center;

                color: #ffffff;

            }

            

            .rickroll-container h1 {

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

                font-size: 48px;

                margin-bottom: 24px;

            }

            

            .rickroll-container button {

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

                font-size: 24px;

                padding: 12px 24px;

                border: none;

                border-radius: 4px;

                background-color: #ff0000;

                color: #ffffff;

                cursor: pointer;

                transition: background-color 0.3s;

            }

            

            .rickroll-container button:hover {

                background-color: #ff3333;

            }

        </style>

    </head>

    <body>

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

            <div class="rickroll-container">

                <h1>Click the button to get Rickrolled!</h1>

                <button id="rickroll-button">Rickroll Me!</button>

            </div>

        </div>

    </body>

</html>