mystxmomo raw

<!--
    - commission for @mystxmomo by skye southcodes.tumblr.com
    - modify as you please but please do not touch the credit
    - any errors? need help? have questions? let me know!
    southcodes.tumblr.com/inbox

    - normalize css by https://github.com/necolas
    - fonts by google
    - icon font by http://fontawesome.io/icons/
    - multiple popups https://jsfiddle.net/JKurcik/WGPhG/1124/
    - tabs within tabs https://stackoverflow.com/a/48081117
    - modified tabs and popups by @https://egg.design/

-->

<!DOCTYPE html>
<html>

<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# blog: http://ogp.me/ns/blog#">
    <title>terrors</title>

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

    <style>
        figure {
            margin: 0
        }

        .tmblr-iframe {
            position: absolute
        }

        .tmblr-iframe.hide {
            display: none
        }

        .tmblr-iframe--amp-cta-button {
            visibility: hidden;
            position: fixed;
            bottom: 10px;
            left: 50%;
            transform: translateX(-50%);
            z-index: 100
        }

        .tmblr-iframe--amp-cta-button.tmblr-iframe--loaded {
            visibility: visible;
            animation: iframe-app-cta-transition .2s ease-out
        }
    </style>
    <link rel="stylesheet" media="screen"
        href="https://assets.tumblr.com/client/prod/standalone/blog-network-npf/index.build.css?_v=f085dde138e244526309d4673db67b4c">
    <link rel="shortcut icon"
        href="https://64.media.tumblr.com/05dcc6f47fb157a069b0de026c92a315/7951a2bd5ebbdefe-66/s128x128u_c1/1bca196d517938438f835ed534c94a4094d5a0c9.pnj">
    <meta name="description" content="" />

    <!-- fonts -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link
        href="https://fonts.googleapis.com/css2?family=Karla:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400;1,500;1,600;1,700;1,800&family=Montserrat:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap"
        rel="stylesheet">

    <!-- normalize -->
    <link href="https://necolas.github.io/normalize.css/7.0.0/normalize.css" rel="stylesheet">

    <link rel="stylesheet" type="text/css" href="mystxmomo.css">

    <style>
        :root {
            --background: #ffffff;
            --text: #333;
            --links: #8cb3db;
            --links-hover: #36608c;
            --borders: #eee;
            --icons: #36608c;
            --buttons: lightblue
        }

        .tmblr-iframe {
            margin: .7rem;
            opacity: .6;
            -ms-transform: scale(0.85);
            -webkit-transform: scale(0.85);
            /* Safari */
            transform: scale(0.85);
        }

        .tmblr-iframe:hover {
            opacity: .8;
        }

        ::-webkit-scrollbar-thumb:vertical {
            border-left: 2px solid var(--borders);
        }

        ::-webkit-scrollbar {
            width: 6px
        }

        ::-webkit-scrollbar-track-piece {
            margin: 5px 0;
        }

        pre {
            font-family: consolas;
            white-space: pre-wrap;
            /* css-3 */
            white-space: -moz-pre-wrap;
            /* Mozilla, since 1999 */
            white-space: -pre-wrap;
            /* Opera 4- */
            white-space: -o-pre-wrap;
            /* Opera 7 */
            word-wrap: break-word;
        }

        /* Internet Explorer 5.5+ */

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        p {
            margin: 1rem 0
        }

        body,
        figure {
            margin: 0;
            padding: 0;
        }

        html {
            font: 16px 'Karla', sans-serif;
        }

        body {
            font-size: 14px;
            color: var(--text);
            background: var(--background);
            font-family: var(--font-family);
            font-size: var(--font-size);
        }

        a {
            text-decoration: none;
            color: var(--links);
            word-break: break-word;
        }

        a:hover {
            color: var(--links-hover);
        }

        blockquote {
            margin: 0;
            padding: 0;
        }

        img {
            max-width: 100%;
            height: auto;
            display: block;
            margin: 0
        }

        hr {
            border: 0;
            border-top: 1px solid var(--borders);
            margin: 0;
        }

        ol,
        ul,
        li {
            list-style-type: none;
            margin: 0;
            padding: 0;
        }

        button {
            border: none;
            outline: none;
            cursor: pointer;
            transition: 0.2s;
            background-color: transparent;
            font-family: inherit;
        }

        .tab {
            overflow: hidden;
        }

        .active-tab {
            background-color: var(--buttons);
        }

        .tabcontent {
            display: none;
            inset: 0;
        }

        .tabcontent.active {
            display: block;
        }

        .popup {
            position: fixed;
            inset: 15%;
            background-color: rgb(252, 235, 235);
        }

        .show {
            opacity: 1;
            transition: opacity 200ms ease-in-out;
        }

        .hide {
            opacity: 0;
            transition: opacity 200ms ease-in-out;
            z-index: -1;
        }


        /* MEDIA */

        @media only screen and (min-width:0) and (max-width:1400px) {}
    </style>

    <script defer type="application/javascript" id="bilmur" data-provider="tumblr.com" data-service="blognetwork"
        data-customproperties='{"theme": ""}' nonce="9s2TZa7lsZZmAZjNQ2yOpKn3y4"
        src="https://s0.wp.com/wp-content/js/bilmur.min.js?m=202501"></script>
    <script
        src="https://assets.tumblr.com/assets/scripts/tumblelog_post_message_queue.js?_v=a8fadfa499d8cb7c3f8eefdf0b1adfdd"></script>
    <link rel="stylesheet" type="text/css" href="https://assets.tumblr.com/fonts/calluna/stylesheet.css?v=3">
</head>

<body>

    <div class="tab main-tabs">

        <button id="active-tab" class="active-tab tablinks" data-tab="pop">POP</button>
        <button id="second-tab" class="tablinks" data-tab="pop1">POP1</button>
    </div>



    <div id="pop" class="tabcontent active">
        <h1>POP</h1>

        <button onClick="openPopup('div1');">open div1</button>

        <div id="div1" class="popup hide" style="display: none;">
            This is a test message div1

            <div class="tab">
                <button class="tablinks active-tab" data-tab="doel1">Doel 1</button>
                <button class="tablinks" data-tab="doel2">Doel 2</button>
            </div>

            <div id="doel1" class="tabcontent active">
                Div 1 tab 1
            </div>

            <div id="doel2" class="tabcontent">
                Div 1 tab 2
            </div>
            <div class="cancel">CLOSE</div>
        </div>


        <button onClick="openPopup('div2');">open div2</button>

        <div id="div2" class="popup hide" style="display: none;">
            This is a test message div2

            <div class="tab">
                <button class="tablinks active-tab" data-tab="doela">Doel 1</button>
                <button class="tablinks" data-tab="doelb">Doel 2</button>
            </div>

            <div id="doela" class="tabcontent active">
                Div 2 tab 1
            </div>

            <div id="doelb" class="tabcontent">
                Div 2 tab 2
            </div>
            <div class="cancel">CLOSE</div>
        </div>

    </div>




    <div id="pop1" class="tabcontent">
        minor

    </div>



    <!-- do not touch -->
    <div
        style="position:fixed;bottom:2rem;right:2rem;z-index:999999999999999999999!important;font-size:.7rem;letter-spacing:.03rem;">
        <a href="https://southcodes.tumblr.com" title="coded by southcodes" target="_blank">SC</a>
    </div>


    <!-- icons font -->

    <script>
        // stores default active tabs for popups
        const defaultTabs = Array.from(document.querySelectorAll('.tabcontent.active'));
        // listens for clicks on tablinks and cancel buttons
        document.addEventListener('click', (e) => {
            if (e.target.closest('.tablinks')) {
                const tabId = e.target.dataset.tab;
                if (!tabId) return;
                const parent = e.target.closest('.popup, .main-tabs')?.parentElement;
                if (parent == null) return;

                const tablinks = parent.querySelectorAll('.tablinks');
                const tabcontents = parent.querySelectorAll('.tabcontent');
                if (tablinks.length === 0 || tabcontents.length === 0) return;

                // Remove this if you want to keep popups open when switching the main tabs
                if (e.target.parentElement.closest('.main-tabs')) {
                    closePopup();
                }

                clearActiveStates(parent);
                addActiveStates(parent, tabId, e.target);
            }

            if (e.target.closest('.cancel')) {
                closePopup();
            }
        })

        // clears active states from from tabs when switching between popups or main tabs
        function clearActiveStates(parent) {
            const tablinks = parent.querySelectorAll('.tablinks');
            const tabcontents = parent.querySelectorAll('.tabcontent');

            for (const tablink of tablinks) {
                tablink.classList.remove('active-tab');
            }
            for (const content of tabcontents) {
                content.classList.remove('active');
            }
        }

        // adds active states to selected tab and tablink
        function addActiveStates(parent, tabId, tablink) {
            const tabcontent = parent.querySelector(`#${tabId}`);
            if (tabcontent) tabcontent.classList.add('active');
            if (tablink) tablink.classList.add('active-tab');
        }

        // opens popup and sets default tab
        function openPopup(id) {
            // close any open popups first
            closePopup();
            const popup = document.getElementById(id)
            if (popup == null) return;
            popup.style.display = '';
            const defaultTab = defaultTabs.find(tab => tab.closest(`#${id}`));
            // get default tab id and link
            const defaultTabId = defaultTab?.id;
            const defaultTabLink = popup.querySelector(`.tablinks[data-tab="${defaultTabId}"]`);
            clearActiveStates(popup);
            addActiveStates(popup, defaultTabId, defaultTabLink);
            // clear existing timeout so animations don't overlap
            clearTimeout(popup.dataset.timeoutId);
            // set timeout for animations
            popup.dataset.timeoutId = setTimeout(() => {
                popup.classList.remove('hide');
                popup.classList.add('show');
            }, 200);
        }

        // closes all open popups
        function closePopup() {
            const popups = document.querySelectorAll('.popup');
            for (const popup of popups) {
                popup.classList.remove('show');
                popup.classList.add('hide');
            }
        }
    </script>
</body>

</html>