Difference between revisions of "Team:SJTU-BioX-Shanghai/HP test page"

Line 1: Line 1:
−
{{SJTU-BioX-Shanghai}}
 
 
<html>
 
<html>
 +
    <meta name="viewport" content="width=device-width, target-densitydpi=160dpi, initial-scale=1.0, maximum-scale=1, user-scalable=no, minimal-ui">
 +
<style>
 +
/* Clear the default wiki settings */
 +
 +
#home_logo, #sideMenu { display:none; }
 +
#sideMenu, #top_title, .patrollink , #bars_item {display:none;}
 +
#content { width:100%; padding:0px;  margin-top:-7px; margin-left:0px;}
 +
body {background-color:white; }
 +
#bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5 { margin-bottom: 0px; }
 +
#globalWrapper{padding:0;}
 +
        p {margin:0}
 +
        #HQ_page p{text-align:inherit;}
 +
        #top_menu_inside #user_item{padding-top:0px;}
 +
#top_menu_inside{border-left:0px;border-right:0px;width:auto;}
 +
li{margin-bottom:0;}
 +
</style>
  
 +
    <link href="https://2017.igem.org/Template:SJTU-BioX-Shanghai/CSS/2048?action=raw&ctype=text/css" rel="stylesheet" type="text/css">
  
  
  
−
<div class="column full_size" >
 
−
<h1><p>2018 colorectal cancer molecular detection</p></h1>
 
−
<h3><p>Project description</p></h3>
 
−
 
−
 
−
 
−
</div>
 
  
−
<div>
+
    <div class="container">
−
<p>
+
        <div class="heading">
−
Testtesttesttest
+
            <div class="h1 title">2048</div>
 +
            <div class="scores-container">
 +
                <div class="score-container">0</div>
 +
                <div class="best-container">0</div>
 +
            </div>
 +
        </div>
  
−
</p>
+
        <div class="above-game">
 +
            <p class="game-intro">Color mixing version of <strong>2048</strong></p>
 +
            <a class="restart-button">New Game</a>
 +
        </div>
  
−
<p>testtesttest
+
        <div class="game-container">
−
</p>
+
            <div class="game-message">
−
</div>
+
                <p></p>
 +
                <div class="lower">
 +
                    <a class="keep-playing-button">Keep going</a>
 +
                    <a class="retry-button">Try again</a>
 +
                </div>
 +
            </div>
  
−
<div style="text-align: center;">
+
            <div class="grid-container">
−
<img id="bigPhotoSrc" src="/wiki/images/a/ad/T--SJTU-BioX-Shanghai--Nature_preface.jpg" />
+
                <div class="grid-row">
−
</div>
+
                    <div class="grid-cell"></div>
 +
                    <div class="grid-cell"></div>
 +
                    <div class="grid-cell"></div>
 +
                    <div class="grid-cell"></div>
 +
                </div>
 +
                <div class="grid-row">
 +
                    <div class="grid-cell"></div>
 +
                    <div class="grid-cell"></div>
 +
                    <div class="grid-cell"></div>
 +
                    <div class="grid-cell"></div>
 +
                </div>
 +
                <div class="grid-row">
 +
                    <div class="grid-cell"></div>
 +
                    <div class="grid-cell"></div>
 +
                    <div class="grid-cell"></div>
 +
                    <div class="grid-cell"></div>
 +
                </div>
 +
                <div class="grid-row">
 +
                    <div class="grid-cell"></div>
 +
                    <div class="grid-cell"></div>
 +
                    <div class="grid-cell"></div>
 +
                    <div class="grid-cell"></div>
 +
                </div>
 +
            </div>
  
 +
            <div class="tile-container">
  
 +
            </div>
 +
        </div>
  
  
 +
        <div class="btnbox">
 +
            <a class="cbutton" id="btn1" onclick="bt1()">Light Mode</a> <a class="cbutton active" id="btn2" onclick="bt2()">Pigment Mode</a>
 +
        </div>
  
 +
        <p class="game-explanation">
 +
            <strong class="important">How to play:</strong> Use your <strong>arrow keys</strong> to move the tiles. When two tiles with the same number touch, they <strong>merge into one!</strong>
 +
        </p>
 +
        <hr>
 +
        <p>
 +
            <strong class="important">Note:</strong> This is the special version of 2048 game to help people feel the rules of color mixing. Adapter is SJTU-Biox-Shanghai.
 +
        </p>
 +
        <hr>
 +
        <p>
 +
            Original 2048 game is created by <a href="http://gabrielecirulli.com" target="_blank">Gabriele Cirulli.</a> Based on <a href="https://itunes.apple.com/us/app/1024!/id823499224" target="_blank">1024 by Veewo Studio</a> and conceptually similar
 +
            to <a href="http://asherv.com/threes/" target="_blank">Threes by Asher Vollmer.</a>
 +
        </p>
 +
    </div>
  
 +
    <script src="https://2017.igem.org/Template:SJTU-BioX-Shanghai/Javascript/2048?
 +
action=raw&ctype=text/javascript"></script>
 +
<script>
 +
        var btn1=$("#btn1");
 +
        var btn2=$("#btn2");
 +
        function bt1(){
 +
                btn1.addClass("active");
 +
                btn2.removeClass("active");
 +
mergerule=0;
 +
        }
 +
        function bt2(){
 +
                btn2.addClass("active");
 +
                btn1.removeClass("active");
 +
mergerule=1;
 +
        }
  
 +
</script>
  
 
</html>
 
</html>

Revision as of 21:35, 13 August 2018

2048
0
0

Color mixing version of 2048

New Game

Keep going Try again
Light Mode Pigment Mode

How to play: Use your arrow keys to move the tiles. When two tiles with the same number touch, they merge into one!

Note: This is the special version of 2048 game to help people feel the rules of color mixing. Adapter is SJTU-Biox-Shanghai.

Original 2048 game is created by Gabriele Cirulli. Based on 1024 by Veewo Studio and conceptually similar to Threes by Asher Vollmer.