index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="icon" href="DDCIRC.png">
    <title>電研數創一家親</title>
</head>

<body>
    <div class="container">
        <img id="icon" src="DDCIRC.png" />
        <p id="flag">
        <div class="wrap">
            <button class="copybutton">COPY</button>
        </div>
    </div>

    <style>
        body {
            margin: 0;
            padding: 0;

        }

        .container {
            height: 100vh;
            width: 100vw;
            display: flex;
            flex-flow: wrap;
            justify-content: center;
            align-items: center;
            background-color: rgb(50, 237, 203);
        }
        

        .container>* {
            margin: -20px;
        }

        .copybutton {
            background-color: #ffb6dc;
            border: none;
            color: white;
            padding: 27px 48px;
            text-align: center;
            text-decoration: none;
            display: inline-block;
            font-size: 16px;
            margin: 4px 2px;
            cursor: pointer;
            border-radius: 12px;
            box-shadow: 0 9px #999;
        }

        .copybutton:hover {
            background-color: #ffbcfc;
        }

        .copybutton:active {
            background-color: #ffb6dc;
            box-shadow: 0 5px #666;
            transform: translateY(4px);
        }

        #flag {
            width: 100vw;
            text-align: center;
            font-size: 150%;
            font-family: 'Courier New', Courier, monospace;
            font-weight: bolder;
            color: white;
            margin-top: -4vh;
        }

        #icon {
            height: 25%;
        }
    </style>
    <script>
        var hintText = `
        恭喜奪旗
        把旗子複製之後回報到discordㄅ
        `
        String.prototype.escape = function () {
            var tagsToReplace = {
                '&': '&amp;',
                '<': '&lt;',
                '>': '&gt;'
            };
            return this.replace(/[&<>]/g, function (tag) {
                return tagsToReplace[tag] || tag;
            });
        };
        const queryString = window.location.search;
        const urlParams = new URLSearchParams(queryString);
        const flag = urlParams.get('flag')

        document.getElementById('flag').innerHTML = flag.escape()
        
        const btnCopy = document.querySelector('.copybutton');

        btnCopy.addEventListener('click', function () {
            const value = flag;
            const el = document.createElement('textarea');
            el.value = value;
            document.body.appendChild(el);
            el.select();
            document.execCommand('copy');
            document.body.removeChild(el);
        });

    </script>
</body>

</html>