Team:UCLondon/Templates/Content-Slide
From 2012e.igem.org
(Difference between revisions)
(179 intermediate revisions not shown) | |||
Line 30: | Line 30: | ||
</tr> | </tr> | ||
<tr> | <tr> | ||
- | <td style="font-size:11pt;">In the elevator pitch we describe the unique selling point of CUO and detail our plans on how we will | + | <td style="font-size:11pt;">In the elevator pitch we describe the unique selling point of CUO and detail our plans on how we will commercialize it using the open source platform.</td> |
- | <td style="font-size:11pt;">These tutorials demonstrate | + | <td style="font-size:11pt;">These tutorials demonstrate key features of CUO and help new users unleash its the awesome power.</td> |
- | <td style="font-size:11pt;">In the slide deck we describe the unique selling point of CUO and detail our plans on how we will | + | <td style="font-size:11pt;">In the slide deck we describe the unique selling point of CUO and detail our plans on how we will commercialize it using the open source platform</td> |
</tr> | </tr> | ||
<tr> | <tr> | ||
- | <td><br/><br/><span class="play blue-but">Pitch</span></td> | + | <td align="center"><br/><br/><span class="play blue-but">Draft Pitch</span></td> |
- | <td><br/><br/><span class=" | + | <td align="center"><br/><br/><span class="playTuts red-but">Tutorials</span></td> |
- | <td><br/><br/><span class="run-slides green-but">Slideshow</span></td> | + | <td align="center"><br/><br/><span class="run-slides green-but">Slideshow</span></td> |
</tr> | </tr> | ||
</table> | </table> | ||
Line 58: | Line 58: | ||
<p>Download</p> | <p>Download</p> | ||
- | <table width="200 border="0" align="left" style="font-size:10px; background-color:rgba(249, 249, 249, 0.4);"> | + | <table width="200" border="0" align="left" style="font-size:10px; background-color:rgba(249, 249, 249, 0.4); margin-left:10px; padding-left:20px; border 1px solid;"> |
<tbody> | <tbody> | ||
<tr> | <tr> | ||
Line 79: | Line 79: | ||
Operation Panel improved<br> | Operation Panel improved<br> | ||
Tutorials added<br> | Tutorials added<br> | ||
+ | </p> | ||
+ | </td> | ||
</tr> | </tr> | ||
</tbody> | </tbody> | ||
</table> | </table> | ||
- | <table width=" | + | <!--<img src="https://dl.dropbox.com/u/3703109/igeme/CUO_logo.png" width="40" />--> |
+ | |||
+ | |||
+ | <table width="550" border="0" align="right" style="font-size:10px; background-color:rgba(249, 249, 249, 0.9); margin-right:43px; position:relative; top:-23px;"> | ||
<tbody> | <tbody> | ||
<tr> | <tr> | ||
- | <td | + | <td align="center" style="line-height:0.8pt;"> |
- | + | <h3>release notes</h3> | |
- | + | </td> | |
- | + | ||
- | + | ||
- | + | ||
- | </td> | + | |
</tr> | </tr> | ||
+ | |||
<tr> | <tr> | ||
- | <td> | + | <td> |
- | <p> | + | <div style="height:203px; overflow-y:scroll; width:100%;"> |
- | + | <div style="float:left"><img src="https://dl.dropbox.com/u/3703109/igeme/CUO_logo.png" width="40" /></div> | |
- | + | <div style="float:left;"><div style="color:green;">CUO</div> beta0.92 released!</div> | |
- | + | <div style="clear:both; height:1px;"></div> | |
- | + | <p>I am delighted to announce the release of CUO beta0.92! | |
- | + | This release humbly marks the new era of CUO. The team had grown and sprouted like never before. With the recent recruitment of four professional bioinformaticians and a web developer into the dev team, the program is entering an accelerated development phase that was previously impossible. We even have a public engagement officer on board now to make the software more interactive from all aspects (check out our social networks :D ). | |
- | + | Many thanks again to all the people supporting, building and using CUO. The result presented here is an accumulation of efforts and help from everyone.</p> | |
- | + | ||
+ | <h3>Featuring:</h3> | ||
+ | <ul style="list-style-type:circle !important; list-style-image: none !important"> | ||
+ | <li>Kasuza Table parser in Processor, A new tool to parse and save tables from Kasuza Database at breeze.</li> | ||
+ | <li>Edit Table in Processor, Open up and edit any table you like, even make your own.</li> | ||
+ | <li>View Table in Processor, View multiple tables within split seconds.</li> | ||
+ | <li>Translator, New tool to translate, transcribe and get complementary strain of a sequence, no more alt+tab.</li> | ||
+ | <li>Graph in Motpimizer, CAI and CPI in Moptimizer now comes in graph forms, call it with the new little white button beside the overall CAI and CPI.</li> | ||
+ | <li>Improved Operation Panel, Project indea is integrated, we can now save/open a canvas, drag and drop fragments from browserpanel to the canvas.</li> | ||
+ | <li>Video Tutorials, Access the crash courses from Help in menubar or visit our youtube channel.</li> | ||
+ | <li>Restructured folders hierachy, The program folders is now even tidier and visually smoothing to navigate.</li> | ||
+ | <li>Launch of facebook page, twitter, youtube channel.</li> | ||
+ | </ul> | ||
+ | |||
+ | |||
+ | </div> | ||
+ | |||
+ | </td> | ||
</tr> | </tr> | ||
</tbody> | </tbody> | ||
Line 137: | Line 156: | ||
<div id="shadow4" style="display:none;" > | <div id="shadow4" style="display:none;" > | ||
<div id="close-box4" style="background:url(http://db.tt/N9CUKlnO) no-repeat 0 0; height:35px; width:35px; cursor:pointer; float:left;"></div> | <div id="close-box4" style="background:url(http://db.tt/N9CUKlnO) no-repeat 0 0; height:35px; width:35px; cursor:pointer; float:left;"></div> | ||
- | |||
- | <div id="box-content4" style="width:95%; height:95%; margin:auto;"> | + | <div id="fullscreen" class="tooltip" style="background:url(https://dl.dropbox.com/u/3703109/igeme/fullscreenButton.png) no-repeat 0 0; height:35px; width:35px; cursor:pointer; float:right;" udit="fullscreen"></div> |
+ | |||
+ | <div style="clear:both; width:99% height:1px;"></div> | ||
+ | |||
+ | <div id="box-content4" style="width:95%; height:95%; margin:auto; overflow:hidden;"> | ||
+ | |||
<div id="load2" style="background:url(http://db.tt/UTRvh0fQ) no-repeat center center; height:100px; width:100px; margin:auto;"></div> | <div id="load2" style="background:url(http://db.tt/UTRvh0fQ) no-repeat center center; height:100px; width:100px; margin:auto;"></div> | ||
</div> | </div> | ||
Line 150: | Line 173: | ||
<script type="text/javascript" src="http://dl.dropbox.com/u/3703109/igeme/slides.min.jquery.js"></script> | <script type="text/javascript" src="http://dl.dropbox.com/u/3703109/igeme/slides.min.jquery.js"></script> | ||
<script type="text/javascript" src="http://dl.dropbox.com/u/3703109/igeme/slide.js"></script> | <script type="text/javascript" src="http://dl.dropbox.com/u/3703109/igeme/slide.js"></script> | ||
+ | <script type="text/javascript" src="https://dl.dropbox.com/u/3703109/igeme/js/jmpress.js"></script> | ||
<script type="text/javascript"> | <script type="text/javascript"> | ||
Line 208: | Line 232: | ||
var openBox2 = function () { | var openBox2 = function () { | ||
$('#shadow2').center(); | $('#shadow2').center(); | ||
- | var input = '<iframe width="560" height="315" src="http://www.youtube.com/embed/ | + | var input = '<iframe width="560" height="315" src="http://www.youtube.com/embed/f9jEuo7HSvA" frameborder="0" allowfullscreen></iframe>'; |
$('#shadow2').toggle('slow', function() { | $('#shadow2').toggle('slow', function() { | ||
Line 222: | Line 246: | ||
} | } | ||
+ | |||
+ | /* TUTS */ | ||
+ | var openBox3 = function () { | ||
+ | $('#shadow2').center(); | ||
+ | var input = '<iframe width="560" height="315" src="http://www.youtube.com/embed/4xG939EeKns?list=PLtGCURRfxampHgpkl-tUkzSeZhItvY3_u&hl=en_US" frameborder="0" allowfullscreen></iframe>'; | ||
+ | |||
+ | $('#shadow2').toggle('slow', function() { | ||
+ | $(this).children('#box-content2').html(input); | ||
+ | }); | ||
+ | return false; | ||
+ | } | ||
- | /* | + | /* SLIDE show box */ |
+ | var started = false; | ||
var openBox4 = function () { | var openBox4 = function () { | ||
$('#shadow4').center(); | $('#shadow4').center(); | ||
- | var | + | |
+ | if (! started){ | ||
+ | |||
+ | var slide = document.createElement("div"); | ||
+ | slide.setAttribute("id", "jmpress"); | ||
+ | slide.setAttribute("style", "width: 100%; height:100%; margin:auto;"); | ||
+ | |||
+ | $(slide).append('</html>{{:Team:UCLondon/content/slide1}}<html>'); | ||
+ | |||
+ | |||
+ | var input = slide; | ||
+ | |||
+ | } | ||
$('#shadow4').toggle('slow', function() { | $('#shadow4').toggle('slow', function() { | ||
- | + | if (! started){ | |
+ | $(this).children('#box-content4').html(input); | ||
+ | $('#jmpress').jmpress( { | ||
+ | |||
+ | fullscreen : false, | ||
+ | viewPort: { | ||
+ | height: 800 | ||
+ | ,width: 800 | ||
+ | ,maxScale: 1 // do not scale up | ||
+ | } | ||
+ | //,hash: { use: false } | ||
+ | |||
+ | }); | ||
+ | started = true; | ||
+ | } | ||
+ | $('#jmpress').focus(); | ||
+ | |||
+ | |||
}); | }); | ||
return false; | return false; | ||
Line 236: | Line 301: | ||
var closeBox4 = function() { | var closeBox4 = function() { | ||
+ | |||
+ | var d = document; | ||
+ | if ( (d.fullScreen) || (d.webkitIsFullScreen) || (d.mozfullScreen) ){ | ||
+ | (d. cancelFullScreen == undefined) ? "" : d. cancelFullScreen(); | ||
+ | (d.webkitCancelFullScreen == undefined) ? "" : d.webkitCancelFullScreen(); | ||
+ | (d.mozCancelFullScreen == undefined) ? "" : d.mozCancelFullScreen(); | ||
+ | } | ||
+ | |||
+ | |||
$('#shadow4').toggle('slow', function() { | $('#shadow4').toggle('slow', function() { | ||
- | $(this).children('#box-content4').html(loading); | + | //$(this).children('#box-content4').html(loading); |
}); | }); | ||
+ | } | ||
+ | |||
+ | |||
+ | |||
+ | /* fullscreen functions */ | ||
+ | |||
+ | |||
+ | |||
+ | var fstoggle = function() { | ||
+ | var d = document; | ||
+ | |||
+ | if ( (d.fullScreen) || (d.webkitIsFullScreen) || (d.mozfullScreen) ){ | ||
+ | //$('#shadow4').children('#box-content4').html(loading); | ||
+ | (d. cancelFullScreen == undefined) ? "" : d. cancelFullScreen(); | ||
+ | (d.webkitCancelFullScreen == undefined) ? "" : d.webkitCancelFullScreen(); | ||
+ | (d.mozCancelFullScreen == undefined) ? "" : d.mozCancelFullScreen(); | ||
+ | } | ||
+ | else { | ||
+ | var e = document.getElementById('shadow4'); | ||
+ | (e.requestFullScreen == undefined) ? "" : e.requestFullScreen(); | ||
+ | (e.webkitRequestFullScreen == undefined) ? "" : e.webkitRequestFullScreen(); | ||
+ | (e.mozRequestFullScreen == undefined) ? "" : e.mozRequestFullScreen(); | ||
+ | |||
+ | |||
+ | |||
+ | |||
+ | } | ||
} | } | ||
Line 251: | Line 352: | ||
$('body').on('click', '#close-box2', closeBox2); | $('body').on('click', '#close-box2', closeBox2); | ||
+ | $('body').off('click', '.playTuts', openBox3); | ||
+ | $('body').on('click', '.playTuts', openBox3); | ||
- | + | /* slide deck box */ | |
$('body').off('click', '.run-slides', openBox4); | $('body').off('click', '.run-slides', openBox4); | ||
$('body').on('click', '.run-slides', openBox4); | $('body').on('click', '.run-slides', openBox4); | ||
Line 259: | Line 362: | ||
$('body').off('click', '#close-box4', closeBox4); | $('body').off('click', '#close-box4', closeBox4); | ||
$('body').on('click', '#close-box4', closeBox4); | $('body').on('click', '#close-box4', closeBox4); | ||
+ | |||
+ | /* fullscreen mode */ | ||
+ | $('body').off('click', '#fullscreen',fstoggle); | ||
+ | $('body').on('click', '#fullscreen', fstoggle); | ||
+ | |||
+ | |||
+ | $("#box-content4").click(function(event){ | ||
+ | $('#jmpress').jmpress('next'); | ||
+ | return false; | ||
+ | }) | ||
+ | |||
}); | }); | ||
+ | |||
+ | |||
+ | |||
Line 311: | Line 428: | ||
z-index: 999999; | z-index: 999999; | ||
} | } | ||
+ | |||
+ | |||
+ | #shadow4:-webkit-full-screen { width:100%; height: 100%; margin:1px 1px 1px 1px !important; left:0px !important; top:0px !important; } | ||
+ | #shadow4:-moz-full-screen { width:100%; height: 100%; margin:1px 1px 1px 1px !important; left:0px !important; top:0px !important; } | ||
+ | #shadow4:-ms-full-screen { width:100%; height: 100%; margin:1px 1px 1px 1px !important; left:0px !important; top:0px !important; } | ||
+ | #shadow4:-o-full-screen { width:100%; height: 100%; margin:1px 1px 1px 1px !important; left:0px !important; top:0px !important; } | ||
+ | #shadow4: full-screen { width:100%; height: 100%; margin:1px 1px 1px 1px !important; left:0px !important; top:0px !important; } | ||
+ | |||
+ | /* | ||
+ | #box-content4:-webkit-full-screen { width: 100% } | ||
+ | #box-content4:-moz-full-screen { width: 100% } | ||
+ | #box-content4:-ms-full-screen { width: 100% } | ||
+ | #box-content4:-o-full-screen { width: 100% } | ||
+ | #box-content4: full-screen { width: 100% } | ||
+ | */ | ||
Line 340: | Line 472: | ||
.red-but { | .red-but { | ||
cursor: pointer; | cursor: pointer; | ||
- | border: 1px solid # | + | border: 1px solid #800000; |
- | background: # | + | background: #ff0000; |
- | background: -webkit-gradient(linear, left top, left bottom, from(# | + | background: -webkit-gradient(linear, left top, left bottom, from(#ff6666), to(#ff0000)); |
- | background: -webkit-linear-gradient(top, # | + | background: -webkit-linear-gradient(top, #ff6666, #ff0000); |
- | background: -moz-linear-gradient(top, # | + | background: -moz-linear-gradient(top, #ff6666, #ff0000); |
- | background: -ms-linear-gradient(top, # | + | background: -ms-linear-gradient(top, #ff6666, #ff0000); |
- | background: -o-linear-gradient(top, # | + | background: -o-linear-gradient(top, #ff6666, #ff0000); |
- | background-image: -ms-linear-gradient(top, # | + | background-image: -ms-linear-gradient(top, #ff6666 0%, #ff0000 100%); |
padding: 10.5px 21px; | padding: 10.5px 21px; | ||
-webkit-border-radius: 6px; | -webkit-border-radius: 6px; | ||
Line 356: | Line 488: | ||
box-shadow: rgba(255,255,255,0.4) 0 0px 0, inset rgba(255,255,255,0.4) 0 1px 0; | box-shadow: rgba(255,255,255,0.4) 0 0px 0, inset rgba(255,255,255,0.4) 0 1px 0; | ||
text-shadow: #7ea4bd 0 1px 0; | text-shadow: #7ea4bd 0 1px 0; | ||
- | color: # | + | color: #800000; |
font-size: 14px; | font-size: 14px; | ||
font-family: helvetica, serif; | font-family: helvetica, serif; | ||
Line 365: | Line 497: | ||
.green-but { | .green-but { | ||
cursor: pointer; | cursor: pointer; | ||
- | border: 1px solid # | + | border: 1px solid #008040; |
- | background: # | + | background: #00b700; |
- | background: -webkit-gradient(linear, left top, left bottom, from(# | + | background: -webkit-gradient(linear, left top, left bottom, from(#80ff00), to(#00b700)); |
- | background: -webkit-linear-gradient(top, # | + | background: -webkit-linear-gradient(top, #80ff00, #00b700); |
- | background: -moz-linear-gradient(top, # | + | background: -moz-linear-gradient(top, #80ff00, #00b700); |
- | background: -ms-linear-gradient(top, # | + | background: -ms-linear-gradient(top, #80ff00, #00b700); |
- | background: -o-linear-gradient(top, # | + | background: -o-linear-gradient(top, #80ff00, #00b700); |
- | background-image: -ms-linear-gradient(top, # | + | background-image: -ms-linear-gradient(top, #80ff00 0%, #00b700 100%); |
padding: 10.5px 21px; | padding: 10.5px 21px; | ||
-webkit-border-radius: 6px; | -webkit-border-radius: 6px; | ||
Line 381: | Line 513: | ||
box-shadow: rgba(255,255,255,0.4) 0 0px 0, inset rgba(255,255,255,0.4) 0 1px 0; | box-shadow: rgba(255,255,255,0.4) 0 0px 0, inset rgba(255,255,255,0.4) 0 1px 0; | ||
text-shadow: #7ea4bd 0 1px 0; | text-shadow: #7ea4bd 0 1px 0; | ||
- | color: # | + | color: #008040; |
font-size: 14px; | font-size: 14px; | ||
font-family: helvetica, serif; | font-family: helvetica, serif; | ||
Line 388: | Line 520: | ||
} | } | ||
+ | </style> | ||
+ | <style> | ||
- | . | + | .red-but:active { |
- | + | ||
text-shadow: #1e4158 0 1px 0; | text-shadow: #1e4158 0 1px 0; | ||
- | background: # | + | border: 1px solid #800000; |
- | background: -webkit-gradient(linear, left top, left bottom, from(# | + | background: #ff6666; |
- | background: -webkit-linear-gradient(top, # | + | background: -webkit-gradient(linear, left top, left bottom, from(#ff0000), to(#ff6666)); |
- | background: -moz-linear-gradient(top, # | + | background: -webkit-linear-gradient(top, #ff0000, #ff6666); |
- | background: -ms-linear-gradient(top, # | + | background: -moz-linear-gradient(top, #ff0000, #ff6666); |
- | background: -o-linear-gradient(top, # | + | background: -ms-linear-gradient(top, #ff0000, #ff6666); |
- | background-image: -ms-linear-gradient(top, # | + | background: -o-linear-gradient(top, #ff0000, #ff6666); |
+ | background-image: -ms-linear-gradient(top, #ff0000 0%, #ff6666 100%); | ||
color: #fff; | color: #fff; | ||
- | + | } | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | .green-but:active { | |
- | + | ||
- | + | ||
- | + | ||
- | . | + | |
- | + | ||
text-shadow: #1e4158 0 1px 0; | text-shadow: #1e4158 0 1px 0; | ||
- | background: # | + | border: 1px solid #008040; |
- | background: -webkit-gradient(linear, left top, left bottom, from(# | + | background: #80ff00; |
- | background: -webkit-linear-gradient(top, # | + | background: -webkit-gradient(linear, left top, left bottom, from(#00b700), to(#80ff00)); |
- | background: -moz-linear-gradient(top, # | + | background: -webkit-linear-gradient(top, #00b700, #80ff00); |
- | background: -ms-linear-gradient(top, # | + | background: -moz-linear-gradient(top, #00b700, #80ff00); |
- | background: -o-linear-gradient(top, # | + | background: -ms-linear-gradient(top, #00b700, #80ff00); |
- | background-image: -ms-linear-gradient(top, # | + | background: -o-linear-gradient(top, #00b700, #80ff00); |
+ | background-image: -ms-linear-gradient(top, #00b700 0%, #80ff00 100%); | ||
color: #fff; | color: #fff; | ||
- | + | } | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | .blue-but:active { | |
- | + | ||
- | + | ||
- | . | + | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
text-shadow: #1e4158 0 1px 0; | text-shadow: #1e4158 0 1px 0; | ||
border: 1px solid #0a3c59; | border: 1px solid #0a3c59; | ||
Line 499: | Line 566: | ||
} | } | ||
+ | </style> | ||
+ | |||
+ | <style> | ||
Latest revision as of 15:47, 20 January 2013