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

Line 1: Line 1:
 +
 
<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">
+
<head>
 +
<meta http-equiv="refresh" content="1800;URL='pigeondone.html'">
 +
</head>
  
 +
<body bgcolor="#ffffff">
  
 +
<script type="text/javascript">
  
 +
  var _gaq = _gaq || [];
 +
  _gaq.push(['_setAccount', 'UA-40053177-1']);
 +
  _gaq.push(['_trackPageview']);
  
−
     <div class="container">
+
  (function() {
−
        <div class="heading">
+
     var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
−
            <div class="h1 title">2048</div>
+
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
−
            <div class="scores-container">
+
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
−
                <div class="score-container">0</div>
+
  })();
−
                <div class="best-container">0</div>
+
−
            </div>
+
−
        </div>
+
  
−
        <div class="above-game">
+
</script>
−
            <p class="game-intro">Color mixing version of <strong>2048</strong></p>
+
−
            <a class="restart-button">New Game</a>
+
−
        </div>
+
  
−
        <div class="game-container">
+
<font face = "Arial">
−
            <div class="game-message">
+
<center>
−
                <p></p>
+
<hr width=25%>
−
                <div class="lower">
+
<img src=sbolpicgen.png width=475>
−
                    <a class="keep-playing-button">Keep going</a>
+
<h1>
−
                    <a class="retry-button">Try again</a>
+
    Pigeon
−
                </div>
+
</h1>
−
            </div>
+
<h3>
 +
Design Visualizer for Synthetic Biology
 +
</h3>
 +
<hr width=25%>
 +
</center>
  
−
            <div class="grid-container">
+
<center>
−
                <div class="grid-row">
+
<table width=900>
−
                    <div class="grid-cell"></div>
+
<tr><td>
−
                    <div class="grid-cell"></div>
+
Syntax:
−
                    <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>
+
A list of
−
        </div>
+
<em>type [name] [color] [nl]</em>  
  
 +
where <em>type</em> is one of <em>p, P, c, r, t, T, s, o, >, <, | or - </em>;
  
−
        <div class="btnbox">
+
a blank line;
−
            <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">
+
followed by  
−
            <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?
+
<em> name ind | rep name</em>
−
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;
+
−
        }
+
  
 +
There are 14 colors labeled 1 to 14. These appear as the third item in each line.
 +
Even numbers are darker versions of the odd numbered colors in the following order of hues: blue, green, red, orange,
 +
purple, yellow, and black.
 +
 +
 +
An ``nl'' as a fourth item removes the label for that element.
 +
 +
Characters < and > before p and c give inverse p and c.
 +
 +
<br>
 +
<h3>
 +
Color codes:
 +
</h3>
 +
<center>
 +
<img src=colorcode.png width=600>
 +
</center>
 +
<br>
 +
<h3>
 +
Glyph codes:
 +
</h3>
 +
<center>
 +
<img src=pigeonlist.png width=1300>
 +
</center>
 +
 +
<br>
 +
<br>
 +
 +
<center>
 +
 +
<p>
 +
<b>TIP: You can access Pigeon via Perl using <a href = pigget.txt target = blank>pigget.pl</a>.</b>
 +
</p>
 +
 +
<p>
 +
<b>TIP: <font color="#aa0000">You can provide feedback on Pigeon through the Pigeon Forum <a href=feedback.html target=blank>here</a>.</font></b>
 +
</p>
 +
 +
<p>
 +
<b>TIP: You can find Pigeon examples <a href=pigeonHelp.html target=blank>here</a>.</b>
 +
</p>
 +
<p>
 +
<b>TIP: You can read about Pigeon  <a href=http://pubs.acs.org/doi/abs/10.1021/sb400024s target=blank>here</a>.</b>
 +
</p>
 +
 +
<p>
 +
<b>TIP: <font color="#00cc00"> Try out the new Pigeon GUI <a href=http://pigeon.synbiotools.org target=blank>here</a>.</font></b>
 +
</p>
 +
 +
<br>
 +
<br>
 +
 +
    <p>You are connecting from 137.122.64.159:37698.</p>
 +
 +
<form action = "pigeon.php" method = "post" >
 +
 +
    <p>
 +
        <textarea name = "desc" rows=10 cols=75/>
 +
o A 1
 +
<t t
 +
<c c2 2
 +
<r r1 1
 +
<p p1 6
 +
s spacer 9
 +
p p2 2
 +
r r2 5
 +
c c1 6
 +
t t
 +
o B 1
 +
z ori 1
 +
? Amp 1
 +
v KanR 1
 +
# Arcs
 +
c1 rep p1
 +
c2 rep p2
 +
y rep c1-p1
 +
x rep c2-p2
 +
</textarea>
 +
 +
    <p>
 +
        <!-Top arcs only: <input type = "checkbox" checked = "Checked" name = "topOnly" value = "Yes"/>
 +
       
 +
        <input type = "submit" value = "Pigeon!"/>
 +
    </p>
 +
 +
</form>
 +
<td><tr>
 +
</table>
 +
</center>
 +
 +
<center>
 +
<a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/3.0/"><img alt="Creative Commons License" style="border-width:0" src="http://i.creativecommons.org/l/by-nc-sa/3.0/88x31.png" /></a><br />This work is licensed under a <a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/3.0/">Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported License</a>.
 +
</center>
 +
 +
 +
<!-- Start of StatCounter Code for Default Guide -->
 +
<!-- Default Statcounter code for Synbiotools.org
 +
http://synbiotools.org -->
 +
<script type="text/javascript">
 +
var sc_project=10903722;
 +
var sc_invisible=0;
 +
var sc_security="6fd33081";
 +
var scJsHost = (("https:" == document.location.protocol) ?
 +
"https://secure." : "http://www.");
 +
document.write("<sc"+"ript type='text/javascript' src='" +
 +
scJsHost+
 +
"statcounter.com/counter/counter.js'></"+"script>");
 
</script>
 
</script>
 +
<noscript><div class="statcounter"><a title="Web Analytics"
 +
href="http://statcounter.com/" target="_blank"><img
 +
class="statcounter"
 +
src="//c.statcounter.com/10903722/0/6fd33081/0/" alt="Web
 +
Analytics"></a></div></noscript>
 +
<!-- End of Statcounter Code -->
 +
<a
 +
href="http://statcounter.com/p10903722/?guest=1">stats</a>
 +
</body>
 +
  
 
</html>
 
</html>

Revision as of 21:43, 13 August 2018

Pigeon

Design Visualizer for Synthetic Biology

Syntax: A list of type [name] [color] [nl] where type is one of p, P, c, r, t, T, s, o, >, <, | or - ; a blank line; followed by name ind | rep name There are 14 colors labeled 1 to 14. These appear as the third item in each line. Even numbers are darker versions of the odd numbered colors in the following order of hues: blue, green, red, orange, purple, yellow, and black. An ``nl'' as a fourth item removes the label for that element. Characters < and > before p and c give inverse p and c.

Color codes:


Glyph codes:



TIP: You can access Pigeon via Perl using pigget.pl.

TIP: You can provide feedback on Pigeon through the Pigeon Forum here.

TIP: You can find Pigeon examples here.

TIP: You can read about Pigeon here.

TIP: Try out the new Pigeon GUI here.



You are connecting from 137.122.64.159:37698.

Creative Commons License
This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported License.
stats