davidteren
8/18/2019 - 5:27 PM

AWS IP & Region identifier

AWS IP & Region identifier

index.html
content_copyfile_download
<!doctype html>
<html class="no-js" lang="">

<head>
    <meta charset="utf-8">
    <title></title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">

    <style type="text/css">
        @import 'https://fonts.googleapis.com/css?family=Roboto+Mono:100';
        .dud {
            color: #38a169;
        }
    </style>
</head>

<body class="h-screen">
    <div class="bg-green-500 justify-center items-center ">
        <object height="55" type="text/plain" data="server_details.txt"></object>
    </div>
    <div class="bg-gray-900 h-screen font-sans">
        <div class="container mx-auto h-full flex justify-center items-center">
            <div class="text text-green-400 text-2xl font-hairline"></div>
        </div>
    </div>

    <script type="text/javascript">
        // ——————————————————————————————————————————————————
        // TextScramble - https://codepen.io/soulwire/pen/mErPAK
        // ——————————————————————————————————————————————————

        class TextScramble {
            constructor(el) {
                this.el = el
                this.chars = '!<>-_\\/[]{}—=+*^?#________'
                this.update = this.update.bind(this)
            }
            setText(newText) {
                const oldText = this.el.innerText
                const length = Math.max(oldText.length, newText.length)
                const promise = new Promise((resolve) => this.resolve = resolve)
                this.queue = []
                for (let i = 0; i < length; i++) {
                    const from = oldText[i] || ''
                    const to = newText[i] || ''
                    const start = Math.floor(Math.random() * 40)
                    const end = start + Math.floor(Math.random() * 40)
                    this.queue.push({
                        from, to, start, end
                    })
                }
                cancelAnimationFrame(this.frameRequest)
                this.frame = 0
                this.update()
                return promise
            }
            update() {
                let output = ''
                let complete = 0
                for (let i = 0, n = this.queue.length; i < n; i++) {
                    let {
                        from, to, start, end, char
                    } = this.queue[i]
                    if (this.frame >= end) {
                        complete++
                        output += to
                    } else if (this.frame >= start) {
                        if (!char || Math.random() < 0.28) {
                            char = this.randomChar()
                            this.queue[i].char = char
                        }
                        output += `<span class="dud">${char}</span>`
                    } else {
                        output += from
                    }
                }
                this.el.innerHTML = output
                if (complete === this.queue.length) {
                    this.resolve()
                } else {
                    this.frameRequest = requestAnimationFrame(this.update)
                    this.frame++
                }
            }
            randomChar() {
                return this.chars[Math.floor(Math.random() * this.chars.length)]
            }
        }

        // ——————————————————————————————————————————————————
        // Example
        // ——————————————————————————————————————————————————

        const phrases = [
            'Neo,',
            'sooner or later',
            'you\'re going to realize',
            'just as I did',
            'that there\'s a difference',
            'between knowing the path',
            'and walking the path'
        ]

        const el = document.querySelector('.text')
        const fx = new TextScramble(el)

        let counter = 0
        const next = () => {
            fx.setText(phrases[counter]).then(() => {
                setTimeout(next, 800)
            })
            counter = (counter + 1) % phrases.length
        }

        next()
    </script>
</body>

</html>