|
|
| Line 40: |
Line 40: |
| | background-color:transparent; | | background-color:transparent; |
| | } | | } |
| − |
| |
| − | #book {
| |
| − | background: url("https://static.igem.org/mediawiki/2015/0/0d/KU_Leuven_History_Book.png") no-repeat;
| |
| − | position: relative;
| |
| − | margin: 5% 0;
| |
| − | width: 830px;
| |
| − | height: 589px;
| |
| − | top: 50%;
| |
| − | -moz-transform:translateY(-50%);
| |
| − | -ms-transform:translateY(-50%);
| |
| − | -webkit-transform:translateY(-50%);
| |
| − | transform:translateY(-50%);
| |
| − | left:50%;
| |
| − | -moz-transform:translateX(-50%);
| |
| − | -ms-transform:translateX(-50%);
| |
| − | -webkit-transform:translateX(-50%);
| |
| − | transform:translateX(-50%);
| |
| − | }
| |
| − |
| |
| − | #pages section {
| |
| − | background: url("https://static.igem.org/mediawiki/2015/3/3e/KU_Leuven_History_Page.png") no-repeat;
| |
| − | display: block;
| |
| − | width: 400px;
| |
| − | height: 550px;
| |
| − | position: absolute;
| |
| − | left: 415px;
| |
| − | top:15px;
| |
| − | overflow: hidden;
| |
| − | }
| |
| − | #pages section>div {
| |
| − | display: block;
| |
| − | width: 400px;
| |
| − | height: 250px;
| |
| − | font-size: 12px;
| |
| − | }
| |
| − | #pages section p,
| |
| − | #pages section h2 {
| |
| − | padding: 3px 35px;
| |
| − | line-height: 1.4em;
| |
| − | text-align: justify;
| |
| − | }
| |
| − |
| |
| − | #pages section img {
| |
| − |
| |
| − | }
| |
| − |
| |
| − | #pages section #quote {
| |
| − | margin: 150px 35px;
| |
| − | line-height: 1.4em;
| |
| − | text-align: justify;
| |
| − | width:330px;
| |
| − | }
| |
| − |
| |
| − | #pages section h2{
| |
| − | margin: 15px 0 10px;
| |
| − | }
| |
| − |
| |
| − | #pageflip-canvas {
| |
| − | position: absolute;
| |
| − | z-index: 100;
| |
| − | }
| |
| − |
| |
| − | #c{
| |
| − | background-color:transparent;
| |
| − | position:absolute;
| |
| − | left:10%;
| |
| − | bottom:5%;
| |
| − | }
| |
| − | #overlay {
| |
| − | position: absolute;
| |
| − | width: 300px;
| |
| − | height: 300px;
| |
| − | left:10%;
| |
| − | bottom:5%;
| |
| − | background-image: radial-gradient(transparent 20%, white 69%);
| |
| − | }
| |
| − | #inp {
| |
| − | left:10%;
| |
| − | bottom:20%;
| |
| − | width:300px;
| |
| − | height:50px;
| |
| − | position:absolute;
| |
| − | color:white;
| |
| − | text-align:center;
| |
| − | font:20px Verdana;
| |
| − | visibility:hidden;
| |
| − | }
| |
| − | #alp{
| |
| − | width:300px;
| |
| − | }
| |
| − |
| |
| − | #bookcase {
| |
| − | display:table;
| |
| − | position:absolute;
| |
| − | }
| |
| − |
| |
| − |
| |
| − | </style>
| |
| − | <head>
| |
| − | <link rel="icon" href="https://static.igem.org/mediawiki/2015/9/9c/Ku_Leuven_Favicon.gif" />
| |
| − | <link rel="shortcut icon" href="https://static.igem.org/mediawiki/2015/9/9c/Ku_Leuven_Favicon.gif" /
| |
| − | </head>
| |
| − |
| |
| − | <div class="summaryheader">
| |
| − | <div class="summaryimg">
| |
| − | <img src="https://static.igem.org/mediawiki/2015/b/bb/KU_Leuven_Fossile3.PNG" width="100%">
| |
| − | <div class="head">
| |
| − | <h2>History</h2>
| |
| − | </div>
| |
| − | </div>
| |
| − |
| |
| − | <div id="book">
| |
| − | <canvas id="pageflip-canvas"></canvas>
| |
| − | <div id="pages">
| |
| − | <section>
| |
| − | <div>
| |
| − | <h2>iGEM Competition</h2>
| |
| − | <p> iGEM began in January of the year 2003 with a month-long course at MIT during the Independent Activities Period (IAP). Students designed biological systems to make cells blink. The course grew into a summer competition with 5 teams in 2004, 13 teams in 2005 - the first year that the competition spread internationally - 32 teams in 2006, 54 teams in 2007, 84 teams in 2008, 112 teams in 2009, 130 teams in 2010, and 165 teams in 2011. Designs range from a rainbow of pigmented bacteria, to banana and wintergreen smelling bacteria, arsenic biosensors, Bactoblood, buoyant bacteria, etc. </p> </div>
| |
| − | </section>
| |
| − | <section>
| |
| − | <div>
| |
| − | <h2>October</h2>
| |
| − | <p>The search for a new KU Leuven team has started. Ex-iGEM’mers introduced the iGEM competition showing a movie in auditoria.</p>
| |
| − | </div>
| |
| − | <div id="october">
| |
| − | <img src="https://static.igem.org/mediawiki/2015/d/dc/KU_Leuven_October.PNG" height="80%">
| |
| − | </div>
| |
| − | </section>
| |
| − | <section>
| |
| − | <div>
| |
| − |
| |
| − | <h2>November</h2>
| |
| − | <p>The ex-iGEM’mers and advisors organised information sessions on the 4<sup>th</sup>, 5<sup>th</sup>, 13<sup>th</sup> and 20<sup>th</sup> of November at different faculties. Candidates could apply until the 23<sup>rd</sup> of November by sending their CV and motivation letter.</p>
| |
| − | </div>
| |
| − | <div id="november>
| |
| − | <img src="https://static.igem.org/mediawiki/2015/8/86/KU_Leuven_November.PNG" height="80%">
| |
| − | </div>
| |
| − | </section>
| |
| − | <section>
| |
| − | <div>
| |
| − | <h2>December</h2>
| |
| − | <p>The interviews took place on the 10<sup>th</sup> and 11<sup>th</sup> of December and the ‘lucky 13’ team was formed. The first get-to-know-eachother meeting was organized on the 19<sup>th</sup> of December.</p>
| |
| − | </div>
| |
| − | <div id="december">
| |
| − | <img src="https://static.igem.org/mediawiki/2015/e/e1/KU_Leuven_December.jpg" height="80%">
| |
| − | </div>
| |
| − | </section>
| |
| − | <section>
| |
| − | <div>
| |
| − | <h2>January</h2>
| |
| − | <p>‘Exams, Exams, Exams’. January was a quiet month for iGEM, but we had a lovely team and a crazy summer to look forward too.</p>
| |
| − | </div>
| |
| − | <div id="january">
| |
| − | <img src="https://static.igem.org/mediawiki/2015/9/9b/KU_Leuven_January2.jpg" height="80%">
| |
| − | </div>
| |
| − | </section>
| |
| − | <section>
| |
| − | <div>
| |
| − | <h2>February</h2>
| |
| − | <p>Unleashing the bundled enthusiasm during our first brainstorm session on the 11<sup>th</sup> of February generated seventeen primary ideas for an unforgettable project. Eventually, we chose eight topics to further research.
| |
| − | </p>
| |
| − | </div>
| |
| − | <div id="february">
| |
| − | <img src="https://static.igem.org/mediawiki/2015/f/f2/KU_Leuven_February.jpg" height="80%">
| |
| − | </div>
| |
| − | </section>
| |
| − | <section>
| |
| − | <div>
| |
| − | <h2>March</h2>
| |
| − | <p>Researching and discussing those eight ideas enabled us to select three top notch projects. After working out these and with the hints of the advisors in our heads, the final topic was chosen. On the 31<sup>st</sup> of March, all our excitement converged into that one idea; Pattern formation.</p>
| |
| − | </div>
| |
| − | <div id="march">
| |
| − | <img src="https://static.igem.org/mediawiki/2015/a/a9/KU_Leuven_March.jpg" height="80%">
| |
| − | </div>
| |
| − | </section>
| |
| − | <section>
| |
| − | <div>
| |
| − | <h2>April</h2>
| |
| − | <p>On the 21<sup>st</sup> of April, we shared our topic with the advisors. We also organised ourselves into 11 subteams ranging from "Wet lab" and "Modelling" to "Design, photos and arts".</p>
| |
| − | </div>
| |
| − | <div id="april">
| |
| − | <img src="https://static.igem.org/mediawiki/2015/0/07/KU_Leuven_April.jpg" height="80%">
| |
| − | </div>
| |
| − | </section>
| |
| − | <section>
| |
| − | <div>
| |
| − | <h2>May</h2>
| |
| − | <p>The ’Opening Event’ took place on the 20<sup>th</sup> of May. Here we introduced ourselves and our topic to the broad public, advisors and potential sponsors.</p>
| |
| − | </div>
| |
| − | <div id="may">
| |
| − | <img src="https://static.igem.org/mediawiki/2015/3/32/KU_Leuven_May.JPG" height="80%">
| |
| − | </div>
| |
| − | </section>
| |
| − | <section>
| |
| − | <div>
| |
| − | <h2>June</h2>
| |
| − | <p>In June, the second exam period required our full attention. Nevertheless, some team members with few exams already explored literature and started looking for sponsors.</p>
| |
| − | </div>
| |
| − | <div id="june">
| |
| − | <img src="https://static.igem.org/mediawiki/2015/e/ee/KU_Leuven_June.JPG" height="80%">
| |
| − | </div>
| |
| − | </section>
| |
| − | <section>
| |
| − | <div>
| |
| − | <h2>July</h2>
| |
| − | <p>In July, the 'real' work began and the whole team reviewed literature. We theoretically constructed the plasmids and searched quantification methods for specific proteins. The wet lab team started generating double knockout strains and the first mathematical models were made. By developing the wiki and using social media, we kept everybody updated about our latest progress. The Education and outreach team started planning possible collaborations with other teams and was sitting on a bigger plan. On the 21<sup>st</sup> of July, we met the iGEM-team of Toulouse to discuss our projects. Also practical arrangements for the stay during the Giant Jamboree were made.
| |
| − | </p>
| |
| − | </div>
| |
| − | </section>
| |
| − | <section>
| |
| − | <div>
| |
| − | <h2>August</h2>
| |
| − | <p>-Assembly of plasmid
| |
| − | -Quantification of proteins
| |
| − | -Measurement Interlab Study
| |
| − | -Lab safety
| |
| − | -Bordeau meeting</p>
| |
| − | </div>
| |
| − | <div id="august">
| |
| − | <img src="https://static.igem.org/mediawiki/2015/d/dc/KU_Leuven_October.PNG" height="80%">
| |
| − | </div>
| |
| − | </section>
| |
| − | <section>
| |
| − | <div>
| |
| − | <h2>September</h2>
| |
| − | <p>-Symposium
| |
| − | -Visiting schools
| |
| − | - Deadline for Wiki freeze (09/18/15)
| |
| − | - iGEM 2015 Giant Jamboree (09/24/15 - 09/28/15)</p>
| |
| − | </div>
| |
| − | <div id="september">
| |
| − | <img src="https://static.igem.org/mediawiki/2015/d/dc/KU_Leuven_October.PNG" height="80%">
| |
| − | </div>
| |
| − | </section>
| |
| − | <section>
| |
| − | <div id="quote">
| |
| − | <q>If you want something you've never had, then you have to do what you have never done</q>
| |
| − | </div id="quote">
| |
| − | <div>
| |
| − | <canvas id=c></canvas>
| |
| − | <div id=overlay></div>
| |
| − | <div id="inp">
| |
| − | <p>
| |
| − | <input type=range min=0 max=100 step=1 id=alp value=10 />
| |
| − | </p>
| |
| − | </div>
| |
| − | </div>
| |
| − | </section>
| |
| − | </div>
| |
| − | </div>
| |
| − |
| |
| − | <div class="subsections">
| |
| − | <div class="subsectionwrapper">
| |
| − | <div class="subimgrow">
| |
| − | <div class="whitespaceside"></div>
| |
| − | <div class="subimg">
| |
| − | <a href="https://2015.igem.org/Team:KU_Leuven/Notebook/Newsfeed">
| |
| − | <img src="https://static.igem.org/mediawiki/2015/a/ad/KU_Leuven_Wiki_Button_-_Newsfeed2.png" width="100%" >
| |
| − | </a>
| |
| − | </div>
| |
| − |
| |
| − | <div class="whitespace">
| |
| − | </div>
| |
| − |
| |
| − | <div class="subimg">
| |
| − | <a href="https://2015.igem.org/Team:KU_Leuven/Notebook">
| |
| − | <img src="https://static.igem.org/mediawiki/2015/c/cb/KUL_Wiki_Button_-_Back.png" width="100%">
| |
| − | </a>
| |
| − | </div>
| |
| − | <div class="whitespaceside"></div>
| |
| − | </div>
| |
| − |
| |
| − | <div class="subtextrow">
| |
| − | <div class="whitespaceside"></div>
| |
| − | <div class="subtext">
| |
| − | <a href="https://2015.igem.org/Team:KU_Leuven/Notebook/Newsfeed">
| |
| − | <h2>Newsfeed</h2>
| |
| − | <p>Discover our latest updates on the project!</p>
| |
| − | </a>
| |
| − | </div>
| |
| − |
| |
| − | <div class="whitespace">
| |
| − | </div>
| |
| − |
| |
| − | <div class="subtext">
| |
| − | <a href="https://2015.igem.org/Team:KU_Leuven/Notebook">
| |
| − | <h2>Back</h2>
| |
| − | <p>Go back to the Notebook page<br/></p>
| |
| − | </a>
| |
| − | </div>
| |
| − | <div class="whitespaceside"></div>
| |
| − | </div>
| |
| − |
| |
| − | <div class="subimgreadmore">
| |
| − | <div class="whitespaceside"></div>
| |
| − |
| |
| − | <div class="subimgrm">
| |
| − | <a href="https://2015.igem.org/Team:KU_Leuven/Notebook/Newsfeed">
| |
| − | <div id="more">
| |
| − | <img src="https://static.igem.org/mediawiki/2015/7/73/KUL_Wiki_Button_-_Read_more.png" height="40%" width="85%" alt="Read more">
| |
| − | </div>
| |
| − | </a>
| |
| − | </div>
| |
| − |
| |
| − | <div class="whitespace">
| |
| − | </div>
| |
| − |
| |
| − | <div class="subimgrm">
| |
| − | <a href="https://2015.igem.org/Team:KU_Leuven/Notebook">
| |
| − | <div id="back">
| |
| − | <img src="https://static.igem.org/mediawiki/2015/7/73/KUL_Wiki_Button_-_Read_more.png" height="40%" width="85%" alt="Read more">
| |
| − | </div>
| |
| − | </a>
| |
| − | </div>
| |
| − | <div class="whitespaceside"></div>
| |
| − | </div>
| |
| − |
| |
| − | <div class="subimgrowm">
| |
| − | <div class="subimgm">
| |
| − | <a href="https://2015.igem.org/Team:KU_Leuven/Notebook/Newsfeed">
| |
| − | <b>Newsfeed</b>
| |
| − | <img src="https://static.igem.org/mediawiki/2015/1/1b/KU_Leuven_Fossile3Big.PNG" width="100%" >
| |
| − | </a>
| |
| − | </div>
| |
| − |
| |
| − | <div class="whitespace">
| |
| − | </div>
| |
| − |
| |
| − | <div class="subtextm">
| |
| − | <a href="https://2015.igem.org/Team:KU_Leuven/Notebook/Newsfeed">
| |
| − | <p>Discover our latest updates on the project!</p>
| |
| − | </a>
| |
| − | </div>
| |
| − | </div>
| |
| − |
| |
| − | <div class="subimgrowm">
| |
| − | <div class="whiterow">
| |
| − | </div>
| |
| − | </div>
| |
| − |
| |
| − | <div class="subimgrowm">
| |
| − | <div class="subimgm">
| |
| − | <a href="https://2015.igem.org/Team:KU_Leuven/Notebook">
| |
| − | <b>Back</b>
| |
| − | <img src="https://static.igem.org/mediawiki/2015/c/cb/KUL_Wiki_Button_-_Back.png" width="100%" >
| |
| − | </a>
| |
| − | </div>
| |
| − |
| |
| − | <div class="whitespace">
| |
| − | </div>
| |
| − |
| |
| − | <div class="subtextm">
| |
| − | <a href="https://2015.igem.org/Team:KU_Leuven/Notebook">
| |
| − | <p>Go back to the notebook page</p>
| |
| − | </a>
| |
| − | </div>
| |
| − | </div>
| |
| − | </div>
| |
| − | </div>
| |
| − |
| |
| − |
| |
| − | <div id="summarywrapper">
| |
| − | <div class="summary">
| |
| − | <h3> Contact </h3>
| |
| − | <p style="font-size:1.3em; text-align: center">
| |
| − | Address: Celestijnenlaan 200G room 00.08 - 3001 Heverlee<br>
| |
| − | Telephone: +32(0)16 32 73 19<br>
| |
| − | Email: igem@chem.kuleuven.be<br>
| |
| − | </p>
| |
| − | </div>
| |
| − | </div>
| |
| − |
| |
| − | <div class="whiterow"></div>
| |
| − |
| |
| − | <div id="footer">
| |
| − | <div class="rowfooter">
| |
| − | <div class="emptyfooter">
| |
| − | </div>
| |
| − | <div id="bioscenter">
| |
| − | <a href="http://www.kuleuven.be/bioscenter/"><img src="https://static.igem.org/mediawiki/2015/3/3c/KU_Leuven_Logo_BioSCENTer.png" alt="bioSCENTer" width="95%"></a>
| |
| − | </div>
| |
| − | <div class="emptyfooter">
| |
| − | </div>
| |
| − | </div>
| |
| − |
| |
| − | <div class="rowfooter">
| |
| − | <div id="lrd">
| |
| − | <a href="http://lrd.kuleuven.be/"><img src="https://static.igem.org/mediawiki/2015/b/b4/KU_Leuven_HR_LRD_CMYK_LOGO.jpg" alt="KU Leuven Research & Development" width="95%"></a>
| |
| − | </div>
| |
| − | <div id="youreca">
| |
| − | <a href="http://www.kuleuven.be/onderzoek/youreca/"><img src="https://static.igem.org/mediawiki/2015/4/4f/KU_Leuven_YOURECA.png" alt="YOURECA" width="95%"></a>
| |
| − | </div>
| |
| − | <div id="solvay">
| |
| − | <a href="http://www.solvay.com/"><img src="https://static.igem.org/mediawiki/2015/8/89/KU_Leuven_Solvay_Transparant.png" alt="SOLVAY" width="95%"></a>
| |
| − | </div>
| |
| − | <div id="medicine">
| |
| − | <a href="http://gbiomed.kuleuven.be/english"><img src="https://static.igem.org/mediawiki/2015/8/83/KU_Leuven_Biomedische_Wetenschappen_logo_.png" alt="Faculty of Medicine" width="95%"></a>
| |
| − | </div>
| |
| − | </div>
| |
| − |
| |
| − | <div class="rowfooter">
| |
| − | <div id="imec">
| |
| − | <a href="http://www2.imec.be/be_en/home.html"><img src="https://static.igem.org/mediawiki/2015/7/70/KU_Leuven_Imec_logo_transparant.png" alt="imec" width="95%"></a>
| |
| − | </div>
| |
| − | <div id="genzyme">
| |
| − | <a href="http://www.genzyme.be/"><img src="https://static.igem.org/mediawiki/2015/b/b7/KU_Leuven_Genzyme_logo_transparant.png" alt="Genzyme" width="95%"></a>
| |
| − | </div>
| |
| − | <div id="eppendorf">
| |
| − | <a href="https://www.eppendorf.com/BE-en/"><img src="https://static.igem.org/mediawiki/2015/9/96/KU_Leuven_Logo_Eppendorf_transparant.png" alt="Eppendorf" width="95%"></a>
| |
| − | </div>
| |
| − | <div id="kuleuven">
| |
| − | <a href="http://www.kuleuven.be/english"><img src="https://static.igem.org/mediawiki/2015/0/08/KULEUVEN_groot.png" alt="bioSCENTer" width="95%"></a>
| |
| − | </div>
| |
| − | <div class="spacefooter">
| |
| − | </div>
| |
| − | <div id="gips">
| |
| − | <a href="http://www.gipsmineral.de/"><img src="https://static.igem.org/mediawiki/2015/3/3d/KU_Leuven_Gips_Mineral_logo_transparant.png" alt="Gips Mineral" width="95%"></a>
| |
| − | </div>
| |
| − | <div id="kolo">
| |
| − | <a><img src="https://static.igem.org/mediawiki/2015/1/15/KUL_Ko-Lo_Instruments_logo_transparant.png" alt="Ko-Lo Instruments" width="95%"></a>
| |
| − | </div>
| |
| − | <div id="regensys">
| |
| − | <a href="http://regenesys.eu/"><img src="https://static.igem.org/mediawiki/2015/e/eb/KU_Leuven_Logo_Regenesys_Transparant.png" alt="Regenesys" width="95%"></a>
| |
| − | </div>
| |
| − | </div>
| |
| − |
| |
| − | <div class="rowfooter">
| |
| − | <div id="bioke">
| |
| − | <a href="https://www.bioke.com/"><img src="https://static.igem.org/mediawiki/2015/e/e1/KUL_Biok%C3%A9_logo_transparant.png" alt="Bioké" width="95%"></a>
| |
| − | </div>
| |
| − | <div id="thermofisher">
| |
| − | <a href="https://www.fishersci.com/us/en/home.html"><img src="https://static.igem.org/mediawiki/2015/a/aa/KUL_Fischer_Scientific_logo_transparant.png" alt="Thermo Fisher Scientific" width="95%"></a>
| |
| − | </div>
| |
| − | <div id="vwr">
| |
| − | <a href="https://be.vwr.com/store/?&_requestid=866148&_DARGS=/store/cms/be.vwr.com/nl_BE/header_20159241139103.jsp.1_AF&_dynSessConf=4047468000326453053&targetURL=/store/%3F%26_requestid%3D866148&lastLanguage=en&/vwr/userprofiling/EditPersonalInfoFormHandler.updateLocale=&_D%3AcurrentLanguage=+¤tLanguage=en&_D%3AlastLanguage=+&_D%3A/vwr/userprofiling/EditPersonalInfoFormHandler.updateLocale=+"><img src="https://static.igem.org/mediawiki/2015/8/8d/KU_Leuven_Logo_VWR_transparant_.png" alt="VWR" width="95%"></a>
| |
| − | </div>
| |
| − | <div id="footerimg">
| |
| − | <img src="https://static.igem.org/mediawiki/2015/b/b9/KU_Leuven_Zebra_spots_wiki_footer_main.png" width="95%">
| |
| − | </div>
| |
| − | <div id="gimv">
| |
| − | <a href="http://www.gimv.com/en"><img src="https://static.igem.org/mediawiki/2015/a/ac/KU_Leuven_Logo_Gimv_Transparant.png" alt="Gimv" width="95%"></a>
| |
| − | </div>
| |
| − | <div id="machery">
| |
| − | <a href="http://www.filterservice.be/"><img src="https://static.igem.org/mediawiki/2015/4/41/KU_Leuven_Macherey_Nagel_logo_transparant.png" alt="Machery Nagel" width="95%"></a>
| |
| − | </div>
| |
| − | <div class="logosmall">
| |
| − | <div id="sigma">
| |
| − | <a href="https://www.sigmaaldrich.com/belgium-nederlands.html"><img src="https://static.igem.org/mediawiki/2015/4/4b/KUL_Sigma-Aldrich_logo_transparant.png" alt="Sigma-Aldrich" width="95%"></a>
| |
| − | </div>
| |
| − | <div id="egilabo">
| |
| − | <a href="http://www.egilabo.be/"><img src="https://static.igem.org/mediawiki/2015/e/e9/KUL_Egilabo_logo_transparant.png" alt="Egilabo" width="95%"></a>
| |
| − | </div>
| |
| − | </div>
| |
| − | </div>
| |
| − |
| |
| − | <script>
| |
| − | (function() {
| |
| − |
| |
| − | // Dimensions of the whole book
| |
| − | var BOOK_WIDTH = 830;
| |
| − | var BOOK_HEIGHT = 589;
| |
| − |
| |
| − | // Dimensions of one page in the book
| |
| − | var PAGE_WIDTH = 400;
| |
| − | var PAGE_HEIGHT = 564;
| |
| − |
| |
| − | // Vertical spacing between the top edge of the book and the papers
| |
| − | var PAGE_Y = ( BOOK_HEIGHT - PAGE_HEIGHT ) / 2;
| |
| − |
| |
| − | // The canvas size equals to the book dimensions + this padding
| |
| − | var CANVAS_PADDING = 60;
| |
| − |
| |
| − | var page = 0;
| |
| − |
| |
| − | var canvas = document.getElementById( "pageflip-canvas" );
| |
| − | var context = canvas.getContext( "2d" );
| |
| − |
| |
| − | var mouse = { x: 0, y: 0 };
| |
| − |
| |
| − | var flips = [];
| |
| − |
| |
| − | var click = 0;
| |
| − |
| |
| − | var book = document.getElementById( "book" );
| |
| − |
| |
| − | // List of all the page elements in the DOM
| |
| − | var pages = book.getElementsByTagName( "section" );
| |
| − |
| |
| − | // Organize the depth of our pages and create the flip definitions
| |
| − | for( var i = 0, len = pages.length; i < len; i++ ) {
| |
| − | pages[i].style.zIndex = len - i;
| |
| − |
| |
| − | flips.push( {
| |
| − | // Current progress of the flip (left -1 to right +1)
| |
| − | progress: 1,
| |
| − | // The target value towards which progress is always moving
| |
| − | target: 1,
| |
| − | // The page DOM element related to this flip
| |
| − | page: pages[i],
| |
| − | // True while the page is being dragged
| |
| − | dragging: false
| |
| − | } );
| |
| − | }
| |
| − |
| |
| − |
| |
| − | // Resize the canvas to match the book size
| |
| − | canvas.width = BOOK_WIDTH + ( CANVAS_PADDING * 2 );
| |
| − | canvas.height = BOOK_HEIGHT + ( CANVAS_PADDING * 2 );
| |
| − |
| |
| − | // Offset the canvas so that it's padding is evenly spread around the book
| |
| − | canvas.style.top = -CANVAS_PADDING + "px";
| |
| − | canvas.style.left = -CANVAS_PADDING + "px";
| |
| − |
| |
| − | // Render the page flip 60 times a second
| |
| − | setInterval( render, 1000 / 60 );
| |
| − |
| |
| − | document.addEventListener( "mousemove", mouseMoveHandler, false );
| |
| − | document.addEventListener( "mousedown", mouseDownHandler, false );
| |
| − | document.addEventListener( "mouseup", mouseUpHandler, false );
| |
| − |
| |
| − | function mouseMoveHandler( event ) {
| |
| − | // Offset mouse position so that the top of the spine is 0,0
| |
| − | mouse.x = event.clientX - screen.width/2;
| |
| − | mouse.y = event.clientY - book.offsetTop;
| |
| − | }
| |
| − |
| |
| − | function mouseDownHandler( event ) {
| |
| − | if (Math.abs(mouse.x) < PAGE_WIDTH) {
| |
| − | if (mouse.x < 0){
| |
| − | if (page - 1 >= 0) {
| |
| − | flips[page - 1].dragging = true;
| |
| − | }
| |
| − | }
| |
| − | else if (mouse.x > 0){
| |
| − | if (page + 1 < flips.length) {
| |
| − | flips[page].dragging = true;
| |
| − | }
| |
| − | }
| |
| − | }
| |
| − |
| |
| − | // Prevents the text selection cursor from appearing when dragging
| |
| − | event.preventDefault();
| |
| − | }
| |
| − |
| |
| − | function mouseUpHandler( event ) {
| |
| − | for( var i = 0; i < flips.length; i++ ) {
| |
| − | // If this flip was being dragged we animate to its destination
| |
| − | if( flips[i].dragging ) {
| |
| − | // Figure out which page we should go to next depending on the flip direction
| |
| − | if( mouse.x < 0 ) {
| |
| − | flips[i].target = 1;
| |
| − | page = Math.max( page - 1, 0 );
| |
| − | }
| |
| − | else {
| |
| − | flips[i].target = -1;
| |
| − | page = Math.min( page + 1, flips.length );
| |
| − | }
| |
| − | }
| |
| − |
| |
| − | flips[i].dragging = false;
| |
| − | }
| |
| − | }
| |
| − |
| |
| − |
| |
| − | function render() {
| |
| − |
| |
| − | context.clearRect( 0, 0, canvas.width, canvas.height );
| |
| − |
| |
| − | for (var i = 0; i < flips.length; i++) {
| |
| − | var flip = flips[i];
| |
| − | if (click > 0) {
| |
| − | for (var m = Math.abs(mouse.x); m > 0; m++){
| |
| − | if( flip.dragging ) {
| |
| − | flip.target = Math.max( Math.min( mouse.x / PAGE_WIDTH, 1 ), -1 );
| |
| − | }
| |
| − | }
| |
| − | }
| |
| − | else {
| |
| − | if( flip.dragging ) {
| |
| − | flip.target = Math.max( Math.min( mouse.x / PAGE_WIDTH, 1 ), -1 );
| |
| − | }
| |
| − | }
| |
| − |
| |
| − | flip.progress += ( flip.target - flip.progress ) * 0.2;
| |
| − |
| |
| − | // If the flip is being dragged or is somewhere in the middle of the book, render it
| |
| − | if( flip.dragging || Math.abs( flip.progress ) < 0.997 ) {
| |
| − | drawFlip( flip );
| |
| − | }
| |
| − |
| |
| − | }
| |
| − |
| |
| − | }
| |
| − |
| |
| − | function drawFlip( flip ) {
| |
| − | // Strength of the fold is strongest in the middle of the book
| |
| − | var strength = 1 - Math.abs( flip.progress );
| |
| − |
| |
| − | // Width of the folded paper
| |
| − | var foldWidth = ( PAGE_WIDTH * 0.5 ) * ( 1 - flip.progress );
| |
| − |
| |
| − | // X position of the folded paper
| |
| − | var foldX = PAGE_WIDTH * flip.progress + foldWidth;
| |
| − |
| |
| − | // How far the page should outdent vertically due to perspective
| |
| − | var verticalOutdent = 20 * strength;
| |
| − |
| |
| − | // The maximum width of the left and right side shadows
| |
| − | var paperShadowWidth = ( PAGE_WIDTH * 0.5 ) * Math.max( Math.min( 1 - flip.progress, 0.5 ), 0 );
| |
| − | var rightShadowWidth = ( PAGE_WIDTH * 0.5 ) * Math.max( Math.min( strength, 0.5 ), 0 );
| |
| − | var leftShadowWidth = ( PAGE_WIDTH * 0.5 ) * Math.max( Math.min( strength, 0.5 ), 0 );
| |
| − |
| |
| − |
| |
| − | // Change page element width to match the x position of the fold
| |
| − | flip.page.style.width = Math.max(foldX, 0) + "px";
| |
| − |
| |
| − | context.save();
| |
| − | context.translate( CANVAS_PADDING + ( BOOK_WIDTH / 2 ), PAGE_Y + CANVAS_PADDING );
| |
| − |
| |
| − |
| |
| − | // Draw a sharp shadow on the left side of the page
| |
| − | context.strokeStyle = 'rgba(0,0,0,'+(0.05 * strength)+')';
| |
| − | context.lineWidth = 30 * strength;
| |
| − | context.beginPath();
| |
| − | context.moveTo(foldX - foldWidth, -verticalOutdent * 0.5);
| |
| − | context.lineTo(foldX - foldWidth, PAGE_HEIGHT + (verticalOutdent * 0.5));
| |
| − | context.stroke();
| |
| − |
| |
| − |
| |
| − | // Right side drop shadow
| |
| − | var rightShadowGradient = context.createLinearGradient(foldX, 0, foldX + rightShadowWidth, 0);
| |
| − | rightShadowGradient.addColorStop(0, 'rgba(0,0,0,'+(strength*0.2)+')');
| |
| − | rightShadowGradient.addColorStop(0.8, 'rgba(0,0,0,0.0)');
| |
| − |
| |
| − | context.fillStyle = rightShadowGradient;
| |
| − | context.beginPath();
| |
| − | context.moveTo(foldX, 0);
| |
| − | context.lineTo(foldX + rightShadowWidth, 0);
| |
| − | context.lineTo(foldX + rightShadowWidth, PAGE_HEIGHT);
| |
| − | context.lineTo(foldX, PAGE_HEIGHT);
| |
| − | context.fill();
| |
| − |
| |
| − |
| |
| − | // Left side drop shadow
| |
| − | var leftShadowGradient = context.createLinearGradient(foldX - foldWidth - leftShadowWidth, 0, foldX - foldWidth, 0);
| |
| − | leftShadowGradient.addColorStop(0, 'rgba(0,0,0,0.0)');
| |
| − | leftShadowGradient.addColorStop(1, 'rgba(0,0,0,'+(strength*0.15)+')');
| |
| − |
| |
| − | context.fillStyle = leftShadowGradient;
| |
| − | context.beginPath();
| |
| − | context.moveTo(foldX - foldWidth - leftShadowWidth, 0);
| |
| − | context.lineTo(foldX - foldWidth, 0);
| |
| − | context.lineTo(foldX - foldWidth, PAGE_HEIGHT);
| |
| − | context.lineTo(foldX - foldWidth - leftShadowWidth, PAGE_HEIGHT);
| |
| − | context.fill();
| |
| − |
| |
| − |
| |
| − | // Gradient applied to the folded paper (highlights & shadows)
| |
| − | var foldGradient = context.createLinearGradient(foldX - paperShadowWidth, 0, foldX, 0);
| |
| − | foldGradient.addColorStop(0.35, '#fafafa');
| |
| − | foldGradient.addColorStop(0.73, '#eeeeee');
| |
| − | foldGradient.addColorStop(0.9, '#fafafa');
| |
| − | foldGradient.addColorStop(1.0, '#e2e2e2');
| |
| − |
| |
| − | context.fillStyle = foldGradient;
| |
| − | context.strokeStyle = 'rgba(0,0,0,0.06)';
| |
| − | context.lineWidth = 0.5;
| |
| − |
| |
| − | // Draw the folded piece of paper
| |
| − | context.beginPath();
| |
| − | context.moveTo(foldX, 0);
| |
| − | context.lineTo(foldX, PAGE_HEIGHT);
| |
| − | context.quadraticCurveTo(foldX, PAGE_HEIGHT + (verticalOutdent * 2), foldX - foldWidth, PAGE_HEIGHT + verticalOutdent);
| |
| − | context.lineTo(foldX - foldWidth, -verticalOutdent);
| |
| − | context.quadraticCurveTo(foldX, -verticalOutdent * 2, foldX, 0);
| |
| − |
| |
| − | context.fill();
| |
| − | context.stroke();
| |
| − |
| |
| − |
| |
| − | context.restore();
| |
| − | }
| |
| − |
| |
| − | })();
| |
| − | </script>
| |
| − |
| |
| − | <script>
| |
| − | var w = c.width = 300,
| |
| − | h = c.height = 300,
| |
| − | ctx = c.getContext('2d'),
| |
| − |
| |
| − | tau = Math.PI*2,
| |
| − | delta = .004,
| |
| − | thickness = .2,
| |
| − |
| |
| − | frame = 0;
| |
| − |
| |
| − | function anim(){
| |
| − | window.requestAnimationFrame(anim);
| |
| − |
| |
| − | ++frame;
| |
| − |
| |
| − | ctx.fillStyle = 'rgba(0, 0, 0, repAl)'.replace('repAl', alp.value/100);
| |
| − | ctx.fillRect(0, 0, w, h);
| |
| − |
| |
| − | for(var i = 0; i < w; ++i){
| |
| − | ctx.strokeStyle = 'hsl(hue, 80%, 50%)'.replace('hue',
| |
| − | (360 / (w/3) * i - frame) % 360
| |
| − | );
| |
| − | ctx.beginPath();
| |
| − | ctx.arc(w/2, h/2, (i + frame)%w/2,
| |
| − | (frame*delta + i)%tau,
| |
| − | (delta*frame + thickness + i)%tau
| |
| − | );
| |
| − | ctx.stroke();
| |
| − | ctx.closePath();
| |
| − | }
| |
| − | }
| |
| − | anim();
| |
| − |
| |
| − | </script>
| |
| − |
| |
| − | </html>
| |
| − | {{KU_Leuven}}
| |
| − | {{KU_Leuven/css}}
| |
| − |
| |
| − | <html>
| |
| − |
| |
| − | <script>
| |
| − |
| |
| − | $(document).onload(function() {
| |
| − | $(".main-navm").hide();
| |
| − | }
| |
| − | </script>
| |
| − |
| |
| − | <style>
| |
| − |
| |
| − | #notebook{
| |
| − | background-color: transparent;
| |
| − | border-style: solid;
| |
| − | border: 0px solid transparent;
| |
| − | border-bottom: 5px solid #8b7a57;
| |
| − | }
| |
| − |
| |
| − | #centernav:hover #notebook { /* this is active when your mouse moves is over the item */
| |
| − | border: 0px solid transparent;
| |
| − | border-bottom: 0px solid transparent;
| |
| − | }
| |
| − |
| |
| − | .main-navm:hover #notebook { /* this is active when your mouse moves is over the item */
| |
| − | border: 0px solid transparent;
| |
| − | border-right: 0px solid transparent;
| |
| − | }
| |
| − |
| |
| − | @media screen and (max-width: 1000px) {
| |
| − | #notebook {
| |
| − | border-bottom: 5px solid transparent;
| |
| − | border-right: 5px solid #8b7a57;
| |
| − | }
| |
| − | }
| |
| − |
| |
| − | #content {
| |
| − | background-color:transparent;
| |
| − | }
| |
| − |
| |
| − | #book {
| |
| − | background: url("https://static.igem.org/mediawiki/2015/0/0d/KU_Leuven_History_Book.png") no-repeat;
| |
| − | position: relative;
| |
| − | margin: 5% 0;
| |
| − | width: 830px;
| |
| − | height: 589px;
| |
| − | top: 50%;
| |
| − | -moz-transform:translateY(-50%);
| |
| − | -ms-transform:translateY(-50%);
| |
| − | -webkit-transform:translateY(-50%);
| |
| − | transform:translateY(-50%);
| |
| − | left:50%;
| |
| − | -moz-transform:translateX(-50%);
| |
| − | -ms-transform:translateX(-50%);
| |
| − | -webkit-transform:translateX(-50%);
| |
| − | transform:translateX(-50%);
| |
| − | }
| |
| − |
| |
| − | #pages section {
| |
| − | background: url("https://static.igem.org/mediawiki/2015/3/3e/KU_Leuven_History_Page.png") no-repeat;
| |
| − | display: block;
| |
| − | width: 400px;
| |
| − | height: 550px;
| |
| − | position: absolute;
| |
| − | left: 415px;
| |
| − | top:15px;
| |
| − | overflow: hidden;
| |
| − | }
| |
| − | #pages section>div {
| |
| − | display: block;
| |
| − | width: 400px;
| |
| − | height: 250px;
| |
| − | font-size: 12px;
| |
| − | }
| |
| − | #pages section p,
| |
| − | #pages section h2 {
| |
| − | padding: 3px 35px;
| |
| − | line-height: 1.4em;
| |
| − | text-align: justify;
| |
| − | }
| |
| − |
| |
| − | #pages section img {
| |
| − |
| |
| − | }
| |
| − |
| |
| − | #pages section #quote {
| |
| − | margin: 150px 35px;
| |
| − | line-height: 1.4em;
| |
| − | text-align: justify;
| |
| − | width:330px;
| |
| − | }
| |
| − |
| |
| − | #pages section h2{
| |
| − | margin: 15px 0 10px;
| |
| − | }
| |
| − |
| |
| − | #pageflip-canvas {
| |
| − | position: absolute;
| |
| − | z-index: 100;
| |
| − | }
| |
| − |
| |
| − | #c{
| |
| − | background-color:transparent;
| |
| − | position:absolute;
| |
| − | left:10%;
| |
| − | bottom:5%;
| |
| − | }
| |
| − | #overlay {
| |
| − | position: absolute;
| |
| − | width: 300px;
| |
| − | height: 300px;
| |
| − | left:10%;
| |
| − | bottom:5%;
| |
| − | background-image: radial-gradient(transparent 20%, white 69%);
| |
| − | }
| |
| − | #inp {
| |
| − | left:10%;
| |
| − | bottom:20%;
| |
| − | width:300px;
| |
| − | height:50px;
| |
| − | position:absolute;
| |
| − | color:white;
| |
| − | text-align:center;
| |
| − | font:20px Verdana;
| |
| − | visibility:hidden;
| |
| − | }
| |
| − | #alp{
| |
| − | width:300px;
| |
| − | }
| |
| − |
| |
| − | #bookcase {
| |
| − | display:table;
| |
| − | position:absolute;
| |
| − | }
| |
| − |
| |
| | | | |
| | </style> | | </style> |
