gekitz · November 8, 2021 07:12 · gekitz · Nov 8, 2021
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>Sample Site</title>

  <!-- Script for showing/hiding thte modal -->
  <script>
    window.onload = function() {
        // check if user uses a mobile device
        var isMobile = /iPhone|iPad|iPod|Android/i.test(navigator.userAgent);
        if (!isMobile) {
            return;
        }

        // Get the modal
        var modal = document.getElementById("myModal");
    
        // Get the <span> element that closes the modal
        var button = document.getElementById("close");
    
        setTimeout(() => {
            modal.style.display = "block";
        }, 1000);
    
        // When the user clicks on <span> (x), close the modal
        button.onclick = function() {
            modal.style.display = "none";
        }
    
        // When the user clicks anywhere outside of the modal, close it
        window.onclick = function(event) {
            if (event.target == modal) {
                modal.style.display = "none";
            }
        }
    }
    
    </script>

    <!-- Design/Layout of the modal -->
    <style>
        .modal {
            font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif;
            display: none; /* Hidden by default */
            position: fixed; /* Stay in place */
            z-index: 1000; /* Sit on top */
            left: 0;
            top: 0;
            width: 100%; /* Full width */
            height: 100%; /* Full height */
            overflow: auto; /* Enable scroll if needed */
            background-color: rgb(0,0,0); /* Fallback color */
            background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
        }
    
        /* Modal Content/Box */
        .modal-content {
            background-color: #fefefe;
            margin: 15% auto; /* 15% from the top and centered */
            padding: 20px;
            border: 1px solid #888;
            width: 80%; /* Could be more or less, depending on screen size */
            max-width: 320px;
            border-radius: 4px;
        }
    
        /* The Close Button */
        .close {
            color: #aaa;
            float: right;
            font-size: 28px;
            font-weight: bold;
            margin-top: -8px;
        }
    
        .close:hover,
        .close:focus {
            color: black;
            text-decoration: none;
            cursor: pointer;
        }
    
        .section-title {
            margin: 0 0 5px;
            font-weight: 700;
            font-size: 2.7em;
            font-size: 24px;
            line-height: 1.3em;
            color: rgba(57, 64, 70, 1.0);
            font-weight: 600;
        } 
    
        .message {
            color: rgba(108, 124, 147, 1.0);
            font-weight: 400;
        }
    
        .modal-footer {
            display: flex;
            align-items: flex-end;
            flex-direction: column;
        } 
    
        .button {
            color: rgb(255, 255, 255);
            background-color: rgb(117, 204, 74);
            margin: 5px;
            box-shadow: 0 1px 3px rgba(0,0,0,.171);
            transition: box-shadow .2s ease;
            font-size: 12px;
            display: inline-flex;
            justify-content: center;
            align-items: center;
            text-decoration: none;
            padding: 0 .7em;
            height: 2.4em;
            line-height: 2.4em;
            border: none;
            outline: none;
            border-radius: 3px;
            font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif;
            font-weight: 500;
            cursor: pointer;
            /* background: transparent; */
        }
        .button svg:last-child {
            margin-left: 7px;
        }
    </style>
 </head>
 <body>
    <h1>Normal Website Content</h1>

    <!-- modal content -->
    <div id="myModal" class="modal">
        <div class="modal-content">
            <h2 class="section-title">Corona Information</h2>
            <p class="message">In der aktuellen Zeit macht es Corona der Gastronomie besonders schwer.<br /><br /> Wir helfen euch mit unserem digitalen Kellner <b>kontaktlose Bestellungen</b> abzugeben, damit <b>schütz ihr eure Gäste und euer Personal</b> so gut es geht.<br /><br />Wir können dir auch beim Aufbau deines eigenen <b>Lieferservices</b> helfen.</b></p>
            <div class="modal-footer">
                <button id="close" class=button>Alles klar<svg width="13" height="12" xmlns="http://www.w3.org/2000/svg"><path d="M9.6 7H1a1 1 0 1 1 0-2h8.6L7 2.4A1 1 0 0 1 8.4 1l4.3 4.2c.2.3.3.5.3.8 0 .3-.1.5-.3.7L8.4 11A1 1 0 1 1 7 9.5L9.6 7z" fill="rgba(255, 255, 255, 1.0)"></path></svg></button>
            </div>
        </div>
    </div>

 </body>
 </html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>Sample Site</title>

	<!-- Script for showing/hiding thte modal -->
	<script>
	window.onload = function() {
	// check if user uses a mobile device
	var isMobile = /iPhone\|iPad\|iPod\|Android/i.test(navigator.userAgent);
	if (!isMobile) {
	return;
	}

	// Get the modal
	var modal = document.getElementById("myModal");

	// Get the <span> element that closes the modal
	var button = document.getElementById("close");

	setTimeout(() => {
	modal.style.display = "block";
	}, 1000);

	// When the user clicks on <span> (x), close the modal
	button.onclick = function() {
	modal.style.display = "none";
	}

	// When the user clicks anywhere outside of the modal, close it
	window.onclick = function(event) {
	if (event.target == modal) {
	modal.style.display = "none";
	}
	}
	}

	</script>

	<!-- Design/Layout of the modal -->
	<style>
	.modal {
	font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif;
	display: none; /* Hidden by default */
	position: fixed; /* Stay in place */
	z-index: 1000; /* Sit on top */
	left: 0;
	top: 0;
	width: 100%; /* Full width */
	height: 100%; /* Full height */
	overflow: auto; /* Enable scroll if needed */
	background-color: rgb(0,0,0); /* Fallback color */
	background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
	}

	/* Modal Content/Box */
	.modal-content {
	background-color: #fefefe;
	margin: 15% auto; /* 15% from the top and centered */
	padding: 20px;
	border: 1px solid #888;
	width: 80%; /* Could be more or less, depending on screen size */
	max-width: 320px;
	border-radius: 4px;
	}

	/* The Close Button */
	.close {
	color: #aaa;
	float: right;
	font-size: 28px;
	font-weight: bold;
	margin-top: -8px;
	}

	.close:hover,
	.close:focus {
	color: black;
	text-decoration: none;
	cursor: pointer;
	}

	.section-title {
	margin: 0 0 5px;
	font-weight: 700;
	font-size: 2.7em;
	font-size: 24px;
	line-height: 1.3em;
	color: rgba(57, 64, 70, 1.0);
	font-weight: 600;
	}

	.message {
	color: rgba(108, 124, 147, 1.0);
	font-weight: 400;
	}

	.modal-footer {
	display: flex;
	align-items: flex-end;
	flex-direction: column;
	}

	.button {
	color: rgb(255, 255, 255);
	background-color: rgb(117, 204, 74);
	margin: 5px;
	box-shadow: 0 1px 3px rgba(0,0,0,.171);
	transition: box-shadow .2s ease;
	font-size: 12px;
	display: inline-flex;
	justify-content: center;
	align-items: center;
	text-decoration: none;
	padding: 0 .7em;
	height: 2.4em;
	line-height: 2.4em;
	border: none;
	outline: none;
	border-radius: 3px;
	font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif;
	font-weight: 500;
	cursor: pointer;
	/* background: transparent; */
	}
	.button svg:last-child {
	margin-left: 7px;
	}
	</style>
	</head>
	<body>
	<h1>Normal Website Content</h1>

	<!-- modal content -->
	<div id="myModal" class="modal">
	<div class="modal-content">
	<h2 class="section-title">Corona Information</h2>
	<p class="message">In der aktuellen Zeit macht es Corona der Gastronomie besonders schwer.<br /><br /> Wir helfen euch mit unserem digitalen Kellner <b>kontaktlose Bestellungen</b> abzugeben, damit <b>schütz ihr eure Gäste und euer Personal</b> so gut es geht.<br /><br />Wir können dir auch beim Aufbau deines eigenen <b>Lieferservices</b> helfen.</b></p>
	<div class="modal-footer">
	<button id="close" class=button>Alles klar<svg width="13" height="12" xmlns="http://www.w3.org/2000/svg"><path d="M9.6 7H1a1 1 0 1 1 0-2h8.6L7 2.4A1 1 0 0 1 8.4 1l4.3 4.2c.2.3.3.5.3.8 0 .3-.1.5-.3.7L8.4 11A1 1 0 1 1 7 9.5L9.6 7z" fill="rgba(255, 255, 255, 1.0)"></path></svg></button>
	</div>
	</div>
	</div>

	</body>
	</html>