IT-Jeroen/index.html Secret

## index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        :root {
            --card-width: 7em;
            --card-height: calc(7em * 1.4467);
            --width-height-offset: calc(7em * 0.4467 * 0.5);
        }

        @media screen and (max-width: 768px) {
            :root {
                --card-width: 3em;
                --card-height: calc(3em*1.4467);
                --width-height-offset: calc(3em * 0.4467 * 0.5);
            }
        }

        body {
            padding: 0px;
            margin: 0px;
        }

        #table {
            position: relative;
            height: 100vh;
            margin: 1em;
        }

        .quater-screen {
            position:absolute;
            width: 50%;
            height: 50%;
            background-color: blue;
        }

        .card{
            width: var(--card-width);
            height: var(--card-height);
            border: 2px black solid;
            border-radius: 10%;
            background-color: brown;
            transition: left 0.3s ease-in-out,
                    right 0.3s ease-in-out,
                    top 0.3s ease-in-out,
                    bottom 0.3s ease-in-out,
                    transform 0.3s ease-in-out;
        }

        /* .nord {
            position: absolute;
            top: 0rem;
            left: calc(50% - 0.5 * var(--card-width) - 2em);
        }

        .nord ~ .nord{
            position: absolute;
            top: 0rem;
            left: calc(50% - 0.5 * var(--card-width));
        }

        .nord ~ .nord ~ .nord {
            position: absolute;
            top: 0rem;
            left: calc(50% - 0.5 * var(--card-width) + 2em);
        } */

        .nord-l {
            position: absolute;
            top: 0rem;
            left: calc(50% - 0.5 * var(--card-width) - 2em);
            z-index: 1;
        }

        .nord-c{
            position: absolute;
            top: 0rem;
            left: calc(50% - 0.5 * var(--card-width));
            z-index: 2;
        }

        .nord-r {
            position: absolute;
            top: 0rem;
            left: calc(50% - 0.5 * var(--card-width) + 2em);
            z-index: 3;
        }


        /* .west {
            position: absolute;
            left: var(--width-height-offset);
            top: calc(50% - 0.5 * var(--card-height) - 2em);
            transform: rotate(90deg)
        }

        .west ~ .west{
            position: absolute;
            left: var(--width-height-offset);
            top: calc(50% - 0.5 * var(--card-height));
            transform: rotate(90deg)
        }

        .west ~ .west ~ .west{
            position: absolute;
            left: var(--width-height-offset);
            top: calc(50% - 0.5 * var(--card-height) + 2em);
            transform: rotate(90deg)
        } */

        .west-l {
            position: absolute;
            left: var(--width-height-offset);
            top: calc(50% - 0.5 * var(--card-height) - 2em);
            transform: rotate(90deg);
            z-index: 1;
        }

        .west-c{
            position: absolute;
            left: var(--width-height-offset);
            top: calc(50% - 0.5 * var(--card-height));
            transform: rotate(90deg);
            z-index: 2;
        }

        .west-r{
            position: absolute;
            left: var(--width-height-offset);
            top: calc(50% - 0.5 * var(--card-height) + 2em);
            transform: rotate(90deg);
            z-index: 3;
        }
    </style>
</head>
<body>
    <div id="table">
        <div class="quater-screen"></div>
            <div class="card nord-l"></div>
            <div class="card nord-c"></div>
            <div class="card nord-r"></div>
            <div class="card west-l"></div>
            <div class="card west-c"></div>
            <div class="card west-r"></div>
    </div>
    <script>
        function swap(){
            // const westCards = document.getElementsByClassName('west')[0]
            // const nordCards = document.getElementsByClassName('nord')[0]

            const westCards = document.querySelectorAll('[ class*="west-" ]')[0]
            const nordCards = document.querySelectorAll('[ class*="nord-" ]')[0]

            const westClasses = westCards.className;
            const nordClasses = nordCards.className;

            westCards.className = nordClasses;
            nordCards.className = westClasses;
        }
    </script>
</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
	:root {
	--card-width: 7em;
	--card-height: calc(7em * 1.4467);
	--width-height-offset: calc(7em * 0.4467 * 0.5);
	}

	@media screen and (max-width: 768px) {
	:root {
	--card-width: 3em;
	--card-height: calc(3em*1.4467);
	--width-height-offset: calc(3em * 0.4467 * 0.5);
	}
	}

	body {
	padding: 0px;
	margin: 0px;
	}

	#table {
	position: relative;
	height: 100vh;
	margin: 1em;
	}

	.quater-screen {
	position:absolute;
	width: 50%;
	height: 50%;
	background-color: blue;
	}

	.card{
	width: var(--card-width);
	height: var(--card-height);
	border: 2px black solid;
	border-radius: 10%;
	background-color: brown;
	transition: left 0.3s ease-in-out,
	right 0.3s ease-in-out,
	top 0.3s ease-in-out,
	bottom 0.3s ease-in-out,
	transform 0.3s ease-in-out;
	}

	/* .nord {
	position: absolute;
	top: 0rem;
	left: calc(50% - 0.5 * var(--card-width) - 2em);
	}

	.nord ~ .nord{
	position: absolute;
	top: 0rem;
	left: calc(50% - 0.5 * var(--card-width));
	}

	.nord ~ .nord ~ .nord {
	position: absolute;
	top: 0rem;
	left: calc(50% - 0.5 * var(--card-width) + 2em);
	} */

	.nord-l {
	position: absolute;
	top: 0rem;
	left: calc(50% - 0.5 * var(--card-width) - 2em);
	z-index: 1;
	}

	.nord-c{
	position: absolute;
	top: 0rem;
	left: calc(50% - 0.5 * var(--card-width));
	z-index: 2;
	}

	.nord-r {
	position: absolute;
	top: 0rem;
	left: calc(50% - 0.5 * var(--card-width) + 2em);
	z-index: 3;
	}


	/* .west {
	position: absolute;
	left: var(--width-height-offset);
	top: calc(50% - 0.5 * var(--card-height) - 2em);
	transform: rotate(90deg)
	}

	.west ~ .west{
	position: absolute;
	left: var(--width-height-offset);
	top: calc(50% - 0.5 * var(--card-height));
	transform: rotate(90deg)
	}

	.west ~ .west ~ .west{
	position: absolute;
	left: var(--width-height-offset);
	top: calc(50% - 0.5 * var(--card-height) + 2em);
	transform: rotate(90deg)
	} */

	.west-l {
	position: absolute;
	left: var(--width-height-offset);
	top: calc(50% - 0.5 * var(--card-height) - 2em);
	transform: rotate(90deg);
	z-index: 1;
	}

	.west-c{
	position: absolute;
	left: var(--width-height-offset);
	top: calc(50% - 0.5 * var(--card-height));
	transform: rotate(90deg);
	z-index: 2;
	}

	.west-r{
	position: absolute;
	left: var(--width-height-offset);
	top: calc(50% - 0.5 * var(--card-height) + 2em);
	transform: rotate(90deg);
	z-index: 3;
	}
	</style>
	</head>
	<body>
	<div id="table">
	<div class="quater-screen"></div>
	<div class="card nord-l"></div>
	<div class="card nord-c"></div>
	<div class="card nord-r"></div>
	<div class="card west-l"></div>
	<div class="card west-c"></div>
	<div class="card west-r"></div>
	</div>
	<script>
	function swap(){
	// const westCards = document.getElementsByClassName('west')[0]
	// const nordCards = document.getElementsByClassName('nord')[0]

	const westCards = document.querySelectorAll('[ class*="west-" ]')[0]
	const nordCards = document.querySelectorAll('[ class*="nord-" ]')[0]

	const westClasses = westCards.className;
	const nordClasses = nordCards.className;

	westCards.className = nordClasses;
	nordCards.className = westClasses;
	}
	</script>
	</body>
	</html>