Images
/
FBI.html

<!DOCTYPE html>
<html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link href='https://fonts.googleapis.com/css' rel='stylesheet'/>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<title>FBI WARNING</title>

<style type="text/css">
            p {
                margin: 0;
            }

            *, *::before, *::after {
                box-sizing: border-box;
            }

            .overlay, .scare {
                position: fixed;
                top: 0;
                left: 0;
                height: 100vh;
                width: 100vw;
            }

            p.overlay-title {
            	background-color: rgb(255, 0, 0);
                width: 175px;
                margin: 0 auto;
                font-size: 24px;
                font-weight: 500;
                color: white;
                line-height: 1.5;
                margin-bottom: 16px;
            }

            .overlay-button {
                display: inline-flex;
                align-items: center;
                height: 40px;
                padding-right: 24px;
                padding-left: 24px;
                font-size: 16px;
                font-weight: 500;
                line-height: 1;
                border-radius: 5px;
                margin: 8px;
                cursor: none;
            }

            .overlay-buttons-wrapper {
                margin: 24px -8px -8px;
            }

            #accept-button {
                background-color: rgb(255, 0, 000);
                color: white;
            }

            #decline-button {
                color: rgb(255, 255, 255);
                border: 1.75px solid rgb(255, 255, 255);
            }

            p.overlay-description {
                font-size: 16px;
                font-weight: 400;
                color: rgba(255, 255, 255);
                line-height: 1.25;
                margin-bottom: 16px;
            }

            a.overlay-link {
                display: inline-block;
                text-decoration: none;
                font-size: 16px;
                font-weight: 500;
                color: rgb(132, 94, 194);
                line-height: 1;
                position: relative;
                margin-top: 16px;
            }

            a.overlay-link::before {
                position: absolute;
                content: "";
                height: calc(50% + 4px);
                width: calc(100% + 8px);
                bottom: -4px;
                left: -4px;
                background-color: rgba(132, 94, 194, 0.1);
            }

            .overlay-body {
                max-width: 512px;
                text-align: center;
                font-family: "Inter", sans-serif;
            }

            .overlay[hidden] {
                display: none;
            }

            .overlay {
                z-index: 2;
                display: flex;
                align-items: center;
                justify-content: center;
                background-color: #000000;
                padding-right: 24px;
                padding-left: 24px;
            }

            .scare {
                z-index: 1;
            }

            video#video {
                height: 100%;
                width: 100%;
                object-fit: cover;
            }

            video#video::-webkit-media-controls-enclosure {
                display:none !important;
            }

            .footer {
				position: absolute;
     		   padding: 10px;
      		  text-align: center;
				left: 37.5%;
				bottom: 15%;
				color: white;
				height: 50px;
				width: 25%;
            }

        </style>
</head>
<body>
<div id="overlay" class="overlay">
<div class="overlay-body">
<p class="overlay-title">FBI WARNING</p>
<p class="overlay-description">Federal Law provides severe civil and criminal penalties for the unauthorized reproduction, distribution, or exhibition of copyrighted motion pictures (Title 17, United States Code, Sections 501 and 508). The Federal Bureau of Investigation investigates allegations of criminal copyright infringement (Title 17, United States Code, Section 506).
</p>

<div class="overlay-buttons-wrapper">
<div id="accept-button" class="overlay-button">ACCEPT</div>
<div id="decline-button" class="overlay-button">DECLINE</div>
<p>
<a class="footer" target="_blank" href="https://zgq-inc.github.io">
        个人主页
    </a>
</div>
</div>
</div>
<div class="scare">
<video id="video" class="video" src="https://vdse.bdstatic.com/192d9a98d782d9c74c96f09db9378d93.mp4" loop=""></video>
</div>
<script type="text/javascript">
            const video = document.getElementById("video");
            const overlay = document.getElementById("overlay");
            const declineButton = document.getElementById("decline-button");
            const acceptButton = document.getElementById("accept-button");

            let hasClicked;

            window.onbeforeunload = function( ) {
                if(hasClicked) return true;
            };

            function buttonClick(event) {
                event.preventDefault();
                if(!hasClicked) hasClicked = true;
                overlay.hidden = true;
                video.play();
                videoClick();
            }

            function videoClick(event) {
                if(event) event.preventDefault();
                // if not fullscreen
                const { documentElement } = document;
                if(documentElement.requestFullscreen) documentElement.requestFullscreen();
                else if(documentElement.mozRequestFullScreen) documentElement.mozRequestFullScreen();
                else if(documentElement.webkitRequestFullscreen) documentElement.webkitRequestFullscreen();
                else if(documentElement.msRequestFullscreen) documentElement.msRequestFullscreen();
            }

            acceptButton.addEventListener("click", buttonClick);
            declineButton.addEventListener("click", buttonClick);
            video.addEventListener("click", videoClick);
        </script>

</body>
</html>w