Difference between revisions of "Team:CPU CHINA/Awards"

(Created page with "<html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-sca...")
 
 
(3 intermediate revisions by the same user not shown)
Line 1: Line 1:
 
<html lang="en">
 
<html lang="en">
 +
 
<head>
 
<head>
 
     <meta charset="UTF-8">
 
     <meta charset="UTF-8">
 
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
−
     <title>Document</title>
+
     <link rel="stylesheet"
 +
        href="https://2017.igem.org/wiki/index.php?title= Template:SCU_China/default_CSS &action=raw&ctype=text/css">
 
     <style>
 
     <style>
−
         video{
+
         #header #load {
 +
            position: fixed;
 +
            top: 0;
 +
            left: 0;
 +
            display: flex;
 +
            width: 100%;
 +
            height: 100%;
 +
            background-color: white;
 +
            align-items: center;
 +
            justify-content: center;
 +
            z-index: 20;
 +
        }
 +
 
 +
        #header #load img {
 +
            width: 50vmin;
 +
        }
 +
 
 +
        #award {
 
             position: absolute;
 
             position: absolute;
 
             left: 0;
 
             left: 0;
 
             top: 0;
 
             top: 0;
−
             width: 100vw;
+
             width: 100%;
 
         }
 
         }
 
     </style>
 
     </style>
 
</head>
 
</head>
 +
 
<body>
 
<body>
−
     <video autoplay loop>
+
     <header id="header">
−
         <source src="https://static.igem.org/mediawiki/2021/4/46/T--CPU_CHINA--award.gif" type="video/mp4">
+
        <div id="load" v-show="loading"><img src="https://static.igem.org/mediawiki/2021/c/c4/T--CPU_CHINA--loading.gif"
−
     </video>
+
                alt=""></div>
 +
    </header>
 +
    <img id="award" src="https://static.igem.org/mediawiki/2021/d/db/T--CPU_CHINA--Award.gif" alt="">
 +
    <!-- <video autoplay="true" loop="true" preload="auto">
 +
         <source src="https://static.igem.org/mediawiki/2021/3/34/T--CPU_CHINA--Award.mp4" type="video/mp4">
 +
     </video> -->
 +
    <script
 +
        src="https://2021.igem.org/wiki/index.php?title= Template:CPU_CHINA/VueJS &action=raw&amp;ctype=text/javascript">
 +
        </script>
 +
    <script
 +
        src="https://2021.igem.org/wiki/index.php?title= Template:CPU_CHINA/Jquery &action=raw&amp;ctype=text/javascript">
 +
        </script>
 +
    <script>
 +
        let load = new Vue({
 +
            el: "#header",
 +
            data: {
 +
                loading: true
 +
            },
 +
            beforeCreate() {
 +
                this.loading = true;
 +
            },
 +
            mounted() {
 +
                this.$nextTick(function () {
 +
                    setTimeout(() => {
 +
                        this.loading = false;
 +
                    }, 1100)
 +
                })
 +
            }
 +
        })
 +
    </script>
 
</body>
 
</body>
 +
 
</html>
 
</html>

Latest revision as of 06:19, 23 November 2021