Team:SJTU-Software2/test

From 2014.igem.org

(Difference between revisions)
Line 8: Line 8:
<p>
<p>
<style type="text/css"> body {background-image:url(https://static.igem.org/mediawiki/2014/5/57/Sjtu_software_background.jpg); background-repeat:no-repeat; background-attachment:fixed} </style>
<style type="text/css"> body {background-image:url(https://static.igem.org/mediawiki/2014/5/57/Sjtu_software_background.jpg); background-repeat:no-repeat; background-attachment:fixed} </style>
 +
<script type="text/javascript" src="https://2014.igem.org/Team:SJTU-Software/182min.js%20?action=raw&ctype=text/js"></script>
 +
<script type="text/javascript" src="https://2014.igem.org/Team:SJTU-Software/toolsmin.js%20?action=raw&ctype=text/js"></script>
 +
<script type="text/javascript" src="https://2014.igem.org/Team:SJTU-Software/main.js%20?action=raw&ctype=text/js"></script>
<style type="text/css">
<style type="text/css">
 +
ul.expmenu { width: 200px; }
 +
ul.expmenu * { list-style: none; }
 +
ul.expmenu > li > div.header { padding: 12px; border-bottom: 1px #396e9f solid; }
 +
ul.expmenu > li:last-child > div.header { border-bottom: none; }
 +
ul.expmenu > li ul li { background-color: #ececec; padding: 12px; border-bottom: 1px solid #dcdcdc; border-top: 1px solid #fff; color: #727272; text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.8); }
 +
ul.expmenu > li ul li:last-child { border-bottom: none; }
 +
ul.expmenu > li ul li.selected { background-color: #f4f4f4; }
 +
ul.expmenu div.header
 +
{
 +
color: #203f61;
 +
text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.2);
 +
background: #4d7fb8; /* Old browsers */
 +
background: -moz-linear-gradient(top, #4d7fb8 0%, #4572a5 100%); /* FF3.6+ */
 +
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#4d7fb8), color-stop(100%,#4572a5)); /* Chrome,Safari4+ */
 +
background: -webkit-linear-gradient(top, #4d7fb8 0%,#4572a5 100%); /* Chrome10+,Safari5.1+ */
 +
background: -o-linear-gradient(top, #4d7fb8 0%,#4572a5 100%); /* Opera 11.10+ */
 +
background: -ms-linear-gradient(top, #4d7fb8 0%,#4572a5 100%); /* IE10+ */
 +
background: linear-gradient(to bottom, #4d7fb8 0%,#4572a5 100%); /* W3C */
 +
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4d7fb8', endColorstr='#4572a5',GradientType=0 ); /* IE6-9 */
 +
}
 +
ul.expmenu > li > div.header > .label { padding-left: 24px; background: no-repeat; }
 +
ul.expmenu > li > div.header > .arrow { display: block; width: 16px; height: 16px; background: no-repeat center; float: right; }
 +
ul.expmenu > li > div.header > .arrow.up { background-image: url(../images/arrow_u.png); }
 +
ul.expmenu > li > div.header > .arrow.down { background-image: url(../images/arrow_d.png); }
 +
 +
/* Mouse Events */
 +
ul.expmenu div.header:hover
 +
{
 +
background: #4571a0; /* Old browsers */
 +
background: -moz-linear-gradient(top, #4d7fb8 0%, #4571a0 100%); /* FF3.6+ */
 +
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#4d7fb8), color-stop(100%,#4571a0)); /* Chrome,Safari4+ */
 +
background: -webkit-linear-gradient(top, #4d7fb8 0%,#4571a0 100%); /* Chrome10+,Safari5.1+ */
 +
background: -o-linear-gradient(top, #4d7fb8 0%,#4571a0 100%); /* Opera 11.10+ */
 +
background: -ms-linear-gradient(top, #4d7fb8 0%,#4571a0 100%); /* IE10+ */
 +
background: linear-gradient(to bottom, #4d7fb8 0%,#4571a0 100%); /* W3C */
 +
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4d7fb8', endColorstr='#4571a0',GradientType=0 ); /* IE6-9 */
 +
 +
cursor: pointer;
 +
}
 +
 +
ul.expmenu > li ul li:not(.selected):hover
 +
{
 +
background: #e7e7e7; /* Old browsers */
 +
 +
cursor: pointer;
 +
}
 +
ul.expmenu > li ul li:not(.selected):active
 +
{
 +
background: #f1f1f1; /* Old browsers */
 +
 +
cursor: pointer;
 +
}
 +
.slider
 +
{
 +
    background: #d5d5d5;
 +
    height: 7px;
 +
    position: relative;
 +
    cursor: pointer;
 +
    width: 100%;
 +
    clear: right;
 +
    top: 0px;
 +
    -moz-border-radius: 5px;
 +
    -webkit-border-radius: 5px;
 +
    -moz-box-shadow: inset 0 0 8px #000;
 +
    margin: 10px 0 10px 0;
 +
}
 +
 +
/* progress bar (enabled with progress: true) */
 +
.progress
 +
{
 +
    height: 7px;
 +
    position: relative;
 +
    background: #5389c5; /* Old browsers */
 +
background: -moz-linear-gradient(top, #5389c5 0%, #4775a9 100%); /* FF3.6+ */
 +
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#5389c5), color-stop(100%,#4775a9)); /* Chrome,Safari4+ */
 +
background: -webkit-linear-gradient(top, #5389c5 0%,#4775a9 100%); /* Chrome10+,Safari5.1+ */
 +
background: -o-linear-gradient(top, #5389c5 0%,#4775a9 100%); /* Opera 11.10+ */
 +
background: -ms-linear-gradient(top, #5389c5 0%,#4775a9 100%); /* IE10+ */
 +
background: linear-gradient(to bottom, #5389c5 0%,#4775a9 100%); /* W3C */
 +
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5389c5', endColorstr='#4775a9',GradientType=0 ); /* IE6-9 */
 +
    -moz-border-radius: 5px;
 +
    -webkit-border-radius: 5px;
 +
    top: 0px;
 +
    border: 1px solid #4b7bb1;
 +
 +
    -moz-box-shadow: inset 0 .7px 0 0 rgba(255, 255, 255, 0.3);
 +
-webkit-box-shadow: inset 0 .7px 0 0 rgba(255, 255, 255, 0.3);
 +
box-shadow: inset 0 .7px 0 0 rgba(255, 255, 255, 0.3);
 +
}
 +
 +
/* drag handle */
 +
.handle
 +
{
 +
    background: url(../images/handle.png) repeat-x center;
 +
    height: 16px;
 +
    width: 16px;
 +
    top: -5px;
 +
    position: absolute;
 +
    display: block;
 +
    margin-top: 1px;
 +
    cursor: pointer;
 +
 +
}
 +
 +
/* the input field */
 +
.range
 +
{
 +
    display: none;
 +
}
.container {
.container {
Line 111: Line 223:
     background: url('https://static.igem.org/mediawiki/2014/d/d5/Sjtu_software_lavalamp.png') no-repeat scroll 0 0 transparent;
     background: url('https://static.igem.org/mediawiki/2014/d/d5/Sjtu_software_lavalamp.png') no-repeat scroll 0 0 transparent;
     height: 16px;
     height: 16px;
-
     left: 17px;
+
     left: 111px;
     position: absolute;
     position: absolute;
     top: 0px;
     top: 0px;
Line 157: Line 269:
<style type="text/css">
<style type="text/css">
 +
.container{
 +
 +
}
.firstHeading {
.firstHeading {
width: 0px;  
width: 0px;  
Line 204: Line 319:
</style>
</style>
</p>
</p>
-
 
-
 
-
   
 
-
 
-
<!--<body style="background-image:url(https://static.igem.org/mediawiki/2014/3/3c/Sjtu_software_img100.png);background-position:center; background-repeat:repeat-y repeat-x">-->
 
-
 
-
 
-
 
-
 
Line 218: Line 324:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link href="https://2014.igem.org/Team:SJTU-Software/style.css%20?action=raw&ctype=text/css" rel="stylesheet" type="text/css" media="all"/>
<link href="https://2014.igem.org/Team:SJTU-Software/style.css%20?action=raw&ctype=text/css" rel="stylesheet" type="text/css" media="all"/>
-
<link href="https://2014.igem.org/Team:SJTU-Software/slider.css%20?action=raw&ctype=text/css" rel="stylesheet" type="text/css" media="all"/>
+
 
<script type="text/javascript" src="https://2014.igem.org/Team:SJTU-Software/min.js%20?action=raw&ctype=text/js"></script>
<script type="text/javascript" src="https://2014.igem.org/Team:SJTU-Software/min.js%20?action=raw&ctype=text/js"></script>
<script type="text/javascript" src="https://2014.igem.org/Team:SJTU-Software/easing.js%20?action=raw&ctype=text/js"></script>  
<script type="text/javascript" src="https://2014.igem.org/Team:SJTU-Software/easing.js%20?action=raw&ctype=text/js"></script>  
Line 273: Line 379:
         </div>
         </div>
 +
 +
<div align="center">
<div align="center">
-
    <div class="slider" style="width:71%;">        
+
    <div class="container2" style="height:700px;width:71%;background-color:#FFFFFF;">
-
<div class="fluid_container">
+
          <div align=left>
-
        <div class="camera_wrap camera_azure_skin" id="camera_wrap_1" >
+
          <div class="container2" style="height:700px;width:30%;background-color:#00FF00;float:left; display:inline" >
-
            <div data-thumb="https://static.igem.org/mediawiki/2014/6/6a/Sjtu_software_test.jpg" data-src="https://static.igem.org/mediawiki/2014/6/6a/Sjtu_software_test.jpg">   </div>
+
          <div id="content">
-
            <div data-thumb="https://static.igem.org/mediawiki/2014/6/6a/Sjtu_software_test.jpg" data-src="https://static.igem.org/mediawiki/2014/6/6a/Sjtu_software_test.jpg"> </div>
+
<ul id="expmenu-freebie">
-
          <div data-thumb="https://static.igem.org/mediawiki/2014/6/6a/Sjtu_software_test.jpg" data-src="https://static.igem.org/mediawiki/2014/6/6a/Sjtu_software_test.jpg">   </div>
+
<li>
-
            <div data-thumb="https://static.igem.org/mediawiki/2014/6/6a/Sjtu_software_test.jpg" data-src="https://static.igem.org/mediawiki/2014/6/6a/Sjtu_software_test.jpg"> </div>
+
<!-- Start Freebie -->
-
        </div>
+
<ul class="expmenu">
-
      </div>
+
<li>
-
        <div class="clear"></div>      
+
<div class="header">
-
    </div>
+
<span class="label" style="background-image: url(images/messages.png);">Messages</span>
-
  </div>
+
<span class="arrow up"></span>
-
</div>
+
</div>
-
      <div class="main" align="center"  >
+
<ul class="menu">
-
<div class="wrap" style="width:71%;background-color:#FFFFFF;" >
+
<li>Notification Settings</li>
-
<div class="services" >
+
<li class="selected">Email Alerts</li>
-
<div class="section group"style="width:100%;" >
+
<li>Privacy Settings</li>
-
                             
+
</ul>
-
<div class="listview_1_of_2 images_1_of_2" >
+
</li>
-
<div class="listimg listimg_2_of_1" >
+
<li>
-
  <img src="https://static.igem.org/mediawiki/2014/3/3c/Sjtu_software_img100.png" alt="" />
+
<div class="header">
-
</div>
+
<span class="label" style="background-image: url(images/user.png);">User Controls</span>
-
    <div class="text list_2_of_1" >
+
<span class="arrow up"></span>
-
<h3>Search</h3>
+
</div>
-
<p><div style="text-align:left;">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt  ut labore et dolore.Lorem ipsum dolor sit amet.</div></p>
+
<ul class="menu">
-
  </div>
+
<li><input type="range" name="range" min="0" max="100" value="35" style="width: 100%;" /></li>
-
  </div>
+
</ul>
-
<div class="listview_1_of_2 images_1_of_2" >
+
</li>
-
<div class="listimg listimg_2_of_1">
+
<li>
-
  <img src="https://static.igem.org/mediawiki/2014/3/3c/Sjtu_software_img100.png" alt="" />
+
<div class="header">
-
</div>
+
<span class="label" style="background-image: url(images/pc.png);">Screen Settings</span>
-
<div class="text list_2_of_1">
+
<span class="arrow down"></span>
-
  <h3>Present</h3>
+
</div>
-
  <p><div style="text-align:left;">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt  ut labore et dolore.Lorem ipsum dolor sit amet.</div></p>
+
<ul class="menu" style="display:none">
-
</div>
+
<li>Your settings</li>
-
</div>
+
</ul>
-
</div>
+
</li>
-
                       
+
<li>
-
<div class="section group" style="width:100%;">
+
<div class="header">
-
<div class="listview_1_of_2 images_1_of_2"   >
+
<span class="label" style="background-image: url(images/search.png);">Search</span>
-
<div class="listimg listimg_2_of_1">
+
</div>
-
  <img src="https://static.igem.org/mediawiki/2014/3/3c/Sjtu_software_img100.png" alt="">
+
</li>
-
</div>
+
</ul>
-
    <div class="text list_2_of_1">
+
<!-- End Freebie -->
-
<h3>Upload</h3>
+
</li>
-
                                               
+
</ul>
-
<p><div style="text-align:left;">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt  ut labore et dolore.Lorem ipsum dolor sit amet.</div></p>                                          
+
  </div>
-
  </div>
+
          </div>  
-
  </div>
+
         
-
<div class="listview_1_of_2 images_1_of_2" >
+
           
-
<div class="listimg listimg_2_of_1">
+
          <div class="container2" style="height:700px;width:70%;background-color:#FFFF00;float:left; display:inline" >
-
  <img src="https://static.igem.org/mediawiki/2014/3/3c/Sjtu_software_img100.png" alt="">
+
          </div>          
-
</div>
+
          </div>
-
<div class="text list_2_of_1" >
+
    </div>
-
  <h3>Compare</h3>
+
 
-
  <p><div style="text-align:left;">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt  ut labore et dolore.Lorem ipsum dolor sit amet.</div></p>
+
</div>    
-
                                       
+
   
-
</div>
+
<div align=center>
-
</div>
+
     <div class="copy-right"style="width:71%;" >
-
</div>
+
-
+
-
    </div>
+
-
</div>
+
-
     
+
-
+
-
     <div class="copy-right"style="width:71%;" align:center>
+
<div class="wrap">
<div class="wrap">
  <p class="copy">SJTU-Software</p><br>
  <p class="copy">SJTU-Software</p><br>
Line 348: Line 449:
</div>
</div>
</div>
</div>
 +
</div>
     <p id="back-to-top"><a href="#top"><span><img src="https://static.igem.org/mediawiki/2014/c/cc/Sjtu_software_teamlogo.png" alt="" /></span>back to top</a></p>
     <p id="back-to-top"><a href="#top"><span><img src="https://static.igem.org/mediawiki/2014/c/cc/Sjtu_software_teamlogo.png" alt="" /></span>back to top</a></p>
<div style="display:none"><script src='http://v7.cnzz.com/stat.php?id=155540&web_id=155540' language='JavaScript' charset='gb2312'></script></div>
<div style="display:none"><script src='http://v7.cnzz.com/stat.php?id=155540&web_id=155540' language='JavaScript' charset='gb2312'></script></div>

Revision as of 07:46, 12 October 2014


    • Messages
      • Notification Settings
      • Email Alerts
      • Privacy Settings
    • User Controls
    • Screen Settings
    • Search

SJTU-Software


Shanghai Jiao Tong University


800, Dongchuan Road


200240 Shanghai, China


back to top

Retrieved from "http://2014.igem.org/Team:SJTU-Software2/test"