|
|
Line 3: |
Line 3: |
| <meta charset="utf-8"> | | <meta charset="utf-8"> |
| <title>wikiHome</title> | | <title>wikiHome</title> |
− | <script src="https://code.jquery.com/jquery-3.2.1.min.js"><script> | + | |
− | <link rel="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
| + | |
− | <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
| + | |
− | <script src="https://2017.igem.org/wiki/index.php?title=Team:USTC-Software/js/jquery-mouse-wheel&action=raw&ctype=text/javascript" type="text/javascript">
| + | |
− | <script src="https://2017.igem.org/wiki/index.php?title=Team:USTC-Software/js/slider&action=raw&ctype=text/javascript" type="text/javascript">
| + | |
− | | + | |
| <script> | | <script> |
| var pageColors = ["#3498db", "white", "white", "white", "white"] | | var pageColors = ["#3498db", "white", "white", "white", "white"] |
Line 19: |
Line 14: |
| }) | | }) |
| </script> | | </script> |
− | <style> | + | <!DOCTYPE html> |
− | .fssopen, .fssopen body { /* class added to HTML element when full screen slider is open to hide potential body scrollbars */
| + | <html lang="zh-CN"> |
− | width: 100%;
| + | <head> |
− | height: 100%; | + | <meta charset="utf-8"> |
− | top: 0;
| + | <title>wikiHome</title> |
− | left: 0;
| + | |
− | margin: 0;
| + | <script src="https://code.jquery.com/jquery-3.2.1.min.js"><script> |
− | overflow: hidden;
| + | <script src="https://2017.igem.org/wiki/index.php?title=Team:USTC-Software/js/jquery-mouse-wheel&action=raw&ctype=text/javascript" type="text/javascript"> |
− | }
| + | <script src="https://2017.igem.org/wiki/index.php?title=Team:USTC-Software/js/slider&action=raw&ctype=text/javascript" type="text/javascript"> |
− | | + | <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> |
− | .fullscreenslider {
| + | <link rel="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> |
− | position: fixed;
| + | <link rel="stylesheet" href="https://2017.igem.org/wiki/index.php?title=Team:USTC-Software/css/slider&action=raw&ctype=text/stylesheet"> |
− | left: 0;
| + | <link rel="stylesheet" href="https://2017.igem.org/wiki/index.php?title=Team:USTC-Software/css/navbar&action=raw&ctype=text/stylesheet"> |
− | top: 0;
| + | <link rel="stylesheet" href="https://2017.igem.org/wiki/index.php?title=Team:USTC-Software/css/index&action=raw&ctype=text/stylesheet"> |
− | width: 100%;
| + | <link rel="stylesheet" href="https://2017.igem.org/wiki/index.php?title=Team:USTC-Software/css/style&action=raw&ctype=text/stylesheet"> |
− | height: 100%;
| + | |
− | z-index: 2000;
| + | |
− | font-size: 16px; /* base font size */ | + | |
− | visibility: visible; | + | |
− | overflow: hidden;
| + | |
− | }
| + | |
− | | + | |
− | .slidewrapper { /* wrapper DIV that surrounds the ARTICLE elements inside .dd_fullscreenslider */
| + | |
− | width: 100%;
| + | |
− | height: 100%;
| + | |
− | position: absolute;
| + | |
− | top: 0;
| + | |
− | left: 0;
| + | |
− | -webkit-transform: translate3d(0, 0, 0); /* to prevent flickering in iOS */
| + | |
− | -moz-transition: -moz-transform 0.5s; /* actual duration controlled by script */
| + | |
− | -webkit-transition: -webkit-transform 0.5s;
| + | |
− | transition: transform 0.5s;
| + | |
− | }
| + | |
− | | + | |
− | .fssnav { /* UL list dynamically added by script for Slider navigation */ | + | |
− | list-style: none;
| + | |
− | margin: 0;
| + | |
− | position: absolute;
| + | |
− | top: 50%; /* vertically center menu */
| + | |
− | right: 80px; /* distance from right edge of screen */
| + | |
− | transform: translateY(-50%); /* vertically center menu */
| + | |
− | }
| + | |
− | | + | |
− | .fssnav li {
| + | |
− | margin-bottom: 15px;
| + | |
− | }
| + | |
− | | + | |
− | .fssnav li a {
| + | |
− | text-decoration: none;
| + | |
− | border: 2.5px solid #225378; /* border color of nav links */
| + | |
− | opacity: 0.8;
| + | |
− | border-radius: 50%;
| + | |
− | width: 16px; /* dimensions of nav links */
| + | |
− | height: 16px;
| + | |
− | display: block;
| + | |
− | position: relative;
| + | |
− | text-indent: -500px;
| + | |
− | outline: none;
| + | |
− | overflow: hidden;
| + | |
− | }
| + | |
− | | + | |
− | .fssnav li a::after { /* create "fill" element inside A */
| + | |
− | content: "";
| + | |
− | position: absolute;
| + | |
− | width: 100%;
| + | |
− | height: 100%;
| + | |
− | top: 100%;
| + | |
− | left: 0;
| + | |
− | background: #225378; /* color of "fill" element */
| + | |
− | opacity: 0.6;
| + | |
− | transition: top 0.5s; /* transition for "fill up" effect */
| + | |
− | }
| + | |
− | | + | |
− | .fssnav .selected a::after { | + | |
− | top: 0; /* fill up selected A element from bottom to top */
| + | |
− | }
| + | |
− | | + | |
− | .fullscreenslider .slide { /* CSS for each slide */ | + | |
− | width: 100%;
| + | |
− | height: 100%;
| + | |
− | display: block;
| + | |
− | font-family: 'Droid Sans', sans-serif; /* Use google font */
| + | |
− | font-size: 60px;
| + | |
− | line-height: 2em;
| + | |
− | color: #225378;
| + | |
− | overflow: hidden;
| + | |
− | -webkit-box-sizing: border-box; /* include padding/ border as part of declared menu width */
| + | |
− | -moz-box-sizing: border-box;
| + | |
− | z-index: 1000;
| + | |
− | background: white;
| + | |
− | -webkit-transform: translate3d(0, 0, 0); /* to prevent flickering in iOS */
| + | |
− | }
| + | |
− | | + | |
− | .fullscreenslider .slide h2 { /* H2 Header inside each slide */ | + | |
− | font-size: 3em;
| + | |
− | margin: 0;
| + | |
− | line-height: 1.1em;
| + | |
− | letter-spacing: 3px;
| + | |
− | }
| + | |
− | | + | |
− | .fullscreenslider .slide .scrollable { /* Assign this class to elements within a slide that should be scrollable */ | + | |
− | overflow: auto;
| + | |
− | }
| + | |
− | | + | |
− | .fullscreenslider .slide { | + | |
− | background: white;
| + | |
− | }
| + | |
− | | + | |
− | .fullscreenslider .closex { /* Large x close button inside Slider */ | + | |
− | width: 50px;
| + | |
− | height: 50px;
| + | |
− | overflow: hidden;
| + | |
− | display: block;
| + | |
− | position: fixed;
| + | |
− | cursor: pointer;
| + | |
− | text-indent: -1000px;
| + | |
− | opacity: 0.8;
| + | |
− | z-index: 1001;
| + | |
− | top: 5px;
| + | |
− | right: 3px;
| + | |
− | }
| + | |
− | | + | |
− | .fullscreenslider .closex::after { /* render large x inside close button */
| + | |
− | content: "";
| + | |
− | display: block;
| + | |
− | position: absolute;
| + | |
− | width: 100%;
| + | |
− | height: 6px;
| + | |
− | background: white; /* color of x button */
| + | |
− | top: 50%;
| + | |
− | margin-top: -3px;
| + | |
− | -ms-transform: rotate(-45deg);
| + | |
− | -webkit-transform: rotate(-45deg);
| + | |
− | transform: rotate(-45deg);
| + | |
− | }
| + | |
− | | + | |
− | .fullscreenslider .closex::after { /* render large cross inside close button */ | + | |
− | -ms-transform: rotate(-135deg);
| + | |
− | -webkit-transform: rotate(-135deg);
| + | |
− | transform: rotate(-135deg);
| + | |
− | }
| + | |
− | | + | |
− | .bio-text { | + | |
− | margin-top: 30%;
| + | |
− | font-size:30px;
| + | |
− | line-height: 40px;
| + | |
− | }
| + | |
− | .navbar {
| + | |
− | -webkit-transition: ease-in-out 0.5s;
| + | |
− | -moz-transition: ease-in-out 0.5s;
| + | |
− | -ms-transition: ease-in-out 0.5s;
| + | |
− | -o-transition: ease-in-out 0.5s;
| + | |
− | transition: ease-in-out 0.5s;
| + | |
− | background: white;
| + | |
− | border-radius: 0;
| + | |
− | min-height:45px !important;
| + | |
− | height: 48px;
| + | |
− | font-size: 20px;
| + | |
− | }
| + | |
− | | + | |
− | .navbar-brand {
| + | |
− | margin-left:2em;
| + | |
− | padding-top: 14px;
| + | |
− | padding-bottom: 10px;
| + | |
− | color: #555 !important;
| + | |
− | }
| + | |
− | | + | |
− | ul.nav {
| + | |
− | margin-right:2em;
| + | |
− | }
| + | |
− | | + | |
− | ul li {
| + | |
− | position: relative;
| + | |
− | list-style: none;
| + | |
− | }
| + | |
− | | + | |
− | ul.nav li:hover > ul {
| + | |
− | visibility: visible;
| + | |
− | opacity: 1;
| + | |
− | margin-top: 0;
| + | |
− | }
| + | |
− | | + | |
− | ul.nav ul {
| + | |
− | min-width: 120px;
| + | |
− | position: absolute;
| + | |
− | top: 100%;
| + | |
− | left: 0;
| + | |
− | visibility: hidden;
| + | |
− | opacity: 0;
| + | |
− | margin-top: -30px;
| + | |
− | }
| + | |
− | | + | |
− | | + | |
− | ul.nav > li > a {
| + | |
− | -webkit-transition: border-color ease-in-out 0.1s;
| + | |
− | -moz-transition: border-color ease-in-out 0.1s;
| + | |
− | -o-transition: border-color ease-in-out 0.1s;
| + | |
− | transition: border-color ease-in-out 0.1s;
| + | |
− | margin: 0px 12px 0px 12px;
| + | |
− | padding: 15px 0px 8px 0px;
| + | |
− | background: transparent !important;
| + | |
− | border-bottom: 4px solid transparent!important;
| + | |
− | color: #555 ;
| + | |
− | }
| + | |
− | | + | |
− | ul.nav > li > a:hover {
| + | |
− | border-bottom: 4px solid #ef4c3c;
| + | |
− | }
| + | |
− | | + | |
− | | + | |
− | ul.menu {
| + | |
− | background: white;
| + | |
− | width: auto;
| + | |
− | padding-left: 20px;
| + | |
− | padding-right:20px;
| + | |
− | z-index: 3;
| + | |
− | }
| + | |
− | | + | |
− | ul.menu li a, ul.menu li {
| + | |
− | padding-top: 4px !important;
| + | |
− | padding-bottom: 7px !important;
| + | |
− | color: #555;
| + | |
− | font-size: 18px;
| + | |
− | text-decoration: none;
| + | |
− | -webkit-transition: color ease-in-out 0.2s;
| + | |
− | -moz-transition: color ease-in-out 0.2s;
| + | |
− | -ms-transition: color ease-in-out 0.2s;
| + | |
− | -o-transition: color ease-in-out 0.2s;
| + | |
− | transition: color ease-in-out 0.2s;
| + | |
− | }
| + | |
− | | + | |
− | | + | |
− | .brand {
| + | |
− | margin-top: 5em;
| + | |
− | }
| + | |
− | ul.nav > li > a {
| + | |
− | color: #555;
| + | |
− | }
| + | |
− | ul.nav > li > a:hover {
| + | |
− | border-bottom: 4px solid #ef4c3c!important;
| + | |
− | }
| + | |
− | ul.nav ul.menu li a {
| + | |
− | color: #555;
| + | |
− | }
| + | |
− | ul.nav ul.menu li a:hover {
| + | |
− | color: #ef4c3c;
| + | |
− | }
| + | |
− | ul.nav ul.menu {
| + | |
− | background: #F3F7F2;
| + | |
− | }
| + | |
− | | + | |
− | #menu {
| + | |
− | position: fixed;
| + | |
− | z-index: 3000;
| + | |
− | left: 7%;
| + | |
− | top:20%;
| + | |
− | }
| + | |
− | | + | |
− | #menu ul li {
| + | |
− | height: 30px;
| + | |
− | line-height:30px;
| + | |
− | padding-left:10px;
| + | |
− | border-left: solid #c2c2c2 5px;
| + | |
− | }
| + | |
− | | + | |
− | #menu ul li a{
| + | |
− | display: block;
| + | |
− | font-size: 15px;
| + | |
− | color: #c2c2c2;
| + | |
− | width: 120px;
| + | |
− | text-decoration: none;
| + | |
− | outline:none;
| + | |
− | }
| + | |
− | | + | |
− | #menu ul li:hover {
| + | |
− | border-left: solid #ef4c3c 5px;
| + | |
− | }
| + | |
− | | + | |
− | #menu .focused {
| + | |
− | color: #ef4c3c;
| + | |
− | font-size: 17px;
| + | |
− | }
| + | |
− | | + | |
− | /*.scroll-img{ | + | |
− | position: fixed;
| + | |
− | z-index: 3000;
| + | |
− | width: 120px;
| + | |
− | left: 115px;
| + | |
− | bottom: 5%;
| + | |
− | }*/
| + | |
− | | + | |
− | #content {
| + | |
− | margin-left: 24%;
| + | |
− | width: 900px;
| + | |
− | margin-top: 100px;
| + | |
− | margin-bottom: 100px;
| + | |
− | }
| + | |
− | | + | |
− | #content .item {
| + | |
− | margin-top: 100px;
| + | |
− | padding: 20px;
| + | |
− | font-size: 16px;
| + | |
− | overflow: hidden;
| + | |
− | }
| + | |
− | | + | |
− | #content .item h2 {
| + | |
− | font-size: 36px;
| + | |
− | color: #555;
| + | |
− | }
| + | |
− | | + | |
− | .item ul li {
| + | |
− | float:left;
| + | |
− | margin-right:10px;
| + | |
− | margin-bottom:10px;
| + | |
− | display:inline;
| + | |
− | overflow:hidden;
| + | |
− | position:relative;
| + | |
− | }
| + | |
− | | + | |
− | .item ul li .photo {
| + | |
− | width:200px;
| + | |
− | height:200px;
| + | |
− | overflow:hidden;
| + | |
− | background-color: darkgray;
| + | |
− | }
| + | |
− | | + | |
− | .item .rsp {
| + | |
− | width:200px;
| + | |
− | height:200px;
| + | |
− | overflow:hidden;
| + | |
− | position: absolute;
| + | |
− | background:#000;
| + | |
− | top:0;
| + | |
− | left:0;
| + | |
− | }
| + | |
− | | + | |
− | .item .text {
| + | |
− | position:absolute;
| + | |
− | width:200px;
| + | |
− | height:200px;
| + | |
− | left:-200px;
| + | |
− | top:0;
| + | |
− | overflow:hidden;
| + | |
− | }
| + | |
− | | + | |
− | .item .text a {
| + | |
− | text-decoration:none
| + | |
− | }
| + | |
− | | + | |
− | .item .text p {
| + | |
− | color:#FFFFFF;
| + | |
− | font-size:18px;
| + | |
− | }
| + | |
− | | + | |
− | .item .box {
| + | |
− | padding:10px 0px 10px 0px;
| + | |
− | border-top: solid;
| + | |
− | border-left: solid;
| + | |
− | border-width:1px;
| + | |
− | border-color: #f1f1f1;
| + | |
− | box-shadow: 2px 2px 1px #e1e1e1;
| + | |
− | margin-left: 20px;
| + | |
− | }
| + | |
− | | + | |
− | .item .img {
| + | |
− | width: 160px;
| + | |
− | height: 160px;
| + | |
− | border-radius: 160px;
| + | |
− | text-align: center;
| + | |
− | border: solid;
| + | |
− | border-width:1px;"
| + | |
− | }
| + | |
− | | + | |
− | .item h3 {
| + | |
− | text-align: center;
| + | |
− | border-top: solid;
| + | |
− | font-size:15px;
| + | |
− | border-color: #e1e1e1;
| + | |
− | border-width:1px;
| + | |
− | padding:8px 0 8px;
| + | |
− | margin: 0px 0 0px;
| + | |
− | }
| + | |
− | | + | |
− | .item h5 {
| + | |
− | height: 50px;
| + | |
− | overflow: hidden;
| + | |
− | text-align: center;
| + | |
− | border-top: solid;
| + | |
− | border-color: #e1e1e1;
| + | |
− | border-width:1px;
| + | |
− | padding:22px 0 5px;
| + | |
− | margin: 0px 0 0px;
| + | |
− | }
| + | |
− | | + | |
− | #theme-graph svg {
| + | |
− | filter: brightness(90%);
| + | |
− | }
| + | |
− | | + | |
− | section,body {
| + | |
− | min-width: 1020px;
| + | |
− | }
| + | |
− | ul.page-1 > li > a {
| + | |
− | color: #ECF0F1; | + | |
− | }
| + | |
− | ul.page-1 > li > a:hover {
| + | |
− | border-bottom: 4px solid #ECF0F1!important;
| + | |
− | }
| + | |
− | ul.page-1 ul.menu li a {
| + | |
− | color: #ECF0F1;
| + | |
− | }
| + | |
− | ul.page-1 ul.menu li a:hover {
| + | |
− | color: #aaf;
| + | |
− | }
| + | |
− | ul.page-1 ul.menu {
| + | |
− | background: #2980b8;
| + | |
− | }
| + | |
− | | + | |
− | ul.page-2 > li > a {
| + | |
− | color: #555;
| + | |
− | }
| + | |
− | ul.page-2 > li > a:hover {
| + | |
− | border-bottom: 4px solid #ef4c3c!important;
| + | |
− | }
| + | |
− | ul.page-2 ul.menu li a {
| + | |
− | color: #555;
| + | |
− | }
| + | |
− | ul.page-2 ul.menu li a:hover {
| + | |
− | color: #ef4c3c;
| + | |
− | }
| + | |
− | ul.page-2 ul.menu {
| + | |
− | background: #ECF0F1;
| + | |
− | }
| + | |
− | | + | |
− | ul.page-3 > li > a {
| + | |
− | color: #555;
| + | |
− | }
| + | |
− | ul.page-3 > li > a:hover {
| + | |
− | border-bottom: 4px solid #ef4c3c!important;
| + | |
− | }
| + | |
− | ul.page-3 ul.menu li a {
| + | |
− | color: #555;
| + | |
− | }
| + | |
− | ul.page-3 ul.menu li a:hover {
| + | |
− | color: #ef4c3c;
| + | |
− | }
| + | |
− | ul.page-3 ul.menu {
| + | |
− | background: #ECF0F1;
| + | |
− | }
| + | |
− | | + | |
− | ul.page-4 > li > a {
| + | |
− | color: #555;
| + | |
− | }
| + | |
− | ul.page-4 > li > a:hover {
| + | |
− | border-bottom: 4px solid #ef4c3c!important;
| + | |
− | }
| + | |
− | ul.page-4 ul.menu li a {
| + | |
− | color: #555;
| + | |
− | }
| + | |
− | ul.page-4 ul.menu li a:hover {
| + | |
− | color: #ef4c3c;
| + | |
− | }
| + | |
− | ul.page-4 ul.menu {
| + | |
− | background: #ECF0F1;
| + | |
− | }
| + | |
− | | + | |
− | ul.page-5 > li > a {
| + | |
− | color: #555;
| + | |
− | }
| + | |
− | ul.page-5 > li > a:hover {
| + | |
− | border-bottom: 4px solid #ef4c3c!important;
| + | |
− | }
| + | |
− | ul.page-5 ul.menu li a {
| + | |
− | color: #555;
| + | |
− | }
| + | |
− | ul.page-5 ul.menu li a:hover {
| + | |
− | color: #ef4c3c;
| + | |
− | }
| + | |
− | ul.page-5 ul.menu {
| + | |
− | background: #ECF0F1;
| + | |
− | }
| + | |
− | | + | |
− | | + | |
− | | + | |
− | | + | |
− | | + | |
− | | + | |
− | | + | |
| | | |
− | </style>
| |
− |
| |
| </head> | | </head> |
| <body> | | <body> |
Line 664: |
Line 186: |
| | | |
| <script> | | <script> |
− |
| + | var fss |
| + | $(function () { |
| + | fss = new ddfullscreenslider({ |
| + | sliderid: 'dowebok' |
| + | }) |
| + | }) |
| </script> | | </script> |
| | | |