Difference between revisions of "Team:USTC-Software"

Revision as of 07:37, 19 July 2017 (view source)

Leafz (Talk | contribs)

← Older edit

Revision as of 14:42, 22 October 2017 (view source)

Gloit (Talk | contribs)

Newer edit →

Line 1:

−

+

<!DOCTYPE html>

−

<~~html~~>

+

+

<head>

+

+

<title>wikiHome</title>

+

+

+

+

+

+

+

+

+

+

</head>

+

<body>

+

+

+

+

<div>

+

+

<a class="navbar-brand" href="index.html">Brand</a>

+

</div>

+

+

+

<li>

+

+

Team

+

+

</a>

+

+

+

<li><a href="#">Collaborations</a></li>

+

</ul>

+

</li>

+

<li>

+

+

Project

+

+

</a>

+

+

<li><a href="#">Description</a></li>

+

<li><a href="#">Design</a></li>

+

<li><a href="#">Experiments</a></li>

+

</ul>

+

</li>

+

<li><a href="#">Parts</a></li>

+

<li><a href="#">Safety</a></li>

+

<li><a href="#">Human Practices</a></li>

+

<li><a href="#">Awards</a></li>

+

<li><a href="#">Judging Form</a></li>

+

+

</ul>

+

</div>

+

</nav>

+

</div>

+

+

+

+

+

+

+

+

+

</div>

+

+

+

</div>

+

+

+

</div>

+

+

+

</div>

+

+

+

</div>

+

+

+

</div>

+

+

+

</div>

+

+

+

</div>

+

+

+

</div>

+

+

+

</div>

+

+

+

</div>

+

+

+

</div>

+

+

+

</div>

+

+

+

</div>

+

+

+

</div>

+

+

+

</div>

+

+

+

</div>

+

</div>

+

</div>

+

</div>

+

</article>

+

+

+

+

+

+

</div>

+

+

<p class="bio-text">forums</p>

+

</div>

+

</div>

+

</div>

+

</article>

+

+

+

+

+

<p class="bio-text">share your experience</p>

+

</div>

+

+

+

</div>

+

</div>

+

</div>

+

</article>

+

+

+

+

+

+

</div>

+

+

<p class="bio-text">search biobricks</p>

+

</div>

+

</div>

+

</div>

+

</article>

+

+

+

+

+

<p class="bio-text">a lot more plugins</p>

+

</div>

+

+

+

</div>

+

</div>

+

</div>

+

</article>

+

</div>

+

</section>

−

<~~div class="column full_size"~~ >

+

−

~~<h1> Welcome to USTC-Software iGEM 2017! </h1>~~

+

var fss

−

</~~div~~>

+

$(function () {

+

fss = new ddfullscreenslider({

+

sliderid: 'dowebok'

+

})

+

})

+

</script>

−

<~~div class="column full_size"~~ >

+

<style>

−

~~<h2>Project Description~~ </h2>

+

html {

−

<p>

+

overflow-x: hidden;

−

~~Welcome to BioHub 2.0! This is an open and fantastic platform with practical functions for synthetic biologists. For scientists whose goal is to make discoveries in biology~~, ~~steps using bioinformatics can be seen the most basic but rather troublesome part. To solve this~~, ~~our team created BioHub in 2016~~, ~~and we improved it this year.~~

+

font-size: 625%;

+

}

+

body {

+

min-width: 1020px;

+

}

+

.graphic-one {

+

margin-left:auto;

+

margin-right: auto;

+

width: 1020px;

+

}

+

</style>

+

+

var pageColors = ["#3498db", "white", "white", "white", "white"]

−

BioHub 2.0 is a platform with several plug-ins, which means that users can not only employ the functions we provide, but also develop new and useful ones which can meet their special needs, without caring for servers and network transmission. Others include iGemer forum, in which teams participating in the competition can communicate with each other, abacus 2.0, which could design amino acid sequence from the .pdb file provided by user, image processing, which can analyze the experimental results by the RGB of image, and other splendid functions.

+

var ddfullscreenslider = (function($){

−

~~The following is the introduction to some project module:~~

+

document.createElement('section')

−

~~</p>~~

+

document.createElement('article')

−

~~<h3>~~

+

−

1. ~~Forum~~

+

−

~~</h3>~~

+

−

~~<p>~~

+

−

~~In order to make communication in BioHub easier, we designed the~~ '~~Forum~~' ~~feature to provide users an area to communicate, view others' projects and write comments on them. They are also able to share different ideas and generate new thoughts.~~

+

−

~~In Forum, users can write, edit and remove his comments freely just like operating on any other forums~~. ~~They will harvest enlightenment as well as fun.~~

+

−

~~</p>~~

+

−

~~<h3>~~

+

−

~~2. BioBrick manager~~

+

−

~~</h3>~~

+

−

~~<p>~~

+

−

The iGEM Registry has over 20,000 documented parts organized by type, chassis, function and more. Recognizing that this is a great asset in the field of synthetic biology, we believe that it is necessary to let users explore BioBricks on BioHub. As a result, this function was implemented as an official plugin for BioHub. Users can search for BioBricks they desire and easily browse all the information about the searching results.

+

−

~~</p>~~

+

−

~~<h3>~~

+

−

~~3. ABACUS~~

+

−

~~</h3>~~

+

−

~~<p>~~

+

−

A plugin design to design amino acid sequence from the .pdb file provided by user. The uploaded .pdb file will be evaluated by several progress, with support of simulated annealing algorithm, then the server will generate a .zip file containing several .pdb files and .fasta files for user to download. It’s recommended to run this plugin on a high performance server, because the plugin will invoke computationally intensive programs. So please be patient while this plugin is running, it may take several hours to get results on a high performance server. You can press get status button to check if the calculation is done.

+

−

~~</p>~~

+

−

~~<h3>~~

+

−

~~4. Image processing~~

+

−

~~</h3>~~

+

−

~~<p>~~

+

−

In order to help wet students to complete the image processing work quickly, we created the image processing module. In this module, the user can get a series of information, including chemical element, which is converted from the experimental image.

+

−

~~</p>~~

+

−

~~<h3>~~

+

−

~~5. Plugins~~

+

−

~~</h3>~~

+

−

~~<p>~~

+

−

The great thing about BioHub is that we have designed a unified, extensible plugin platform, which not only have the powerful tools provided by the development team, but also is easy to learn and use by other developers to provide better features. Each specific feature of BioHub is provided by a plugin, whose developer do not need to care about details such as server and network requests. Plugins can just focus on performing their own tasks and manage user's design results. With BioHub’s plugin platform, once any of the latest tools or algorithms in the field of synthetic biology got programmed, developers can easily transform it into a BioHub plugin by studying the sample files we provide, making it a new blade of the powerful Swiss Saber - BioHub.

+

−

~~</p>~~

+

−

~~</div>~~

+

var defaults = {

+

addHash: true,

+

sliderstate: 'open', // reserved for future use

+

keycodeNavigation: [40, 38], // keyCode codes for down and up naivagion, respectively

+

transitionDuration: '0.5s',

+

swipeconfig: {peekamount: 100, mousedrag: true},

+

onslide: function($slide, index){

+

console.log(index)

+

var nav = document.getElementById("nav")

+

var options = document.getElementsByClassName("navbar-nav")[0]

+

nav.style.backgroundColor = pageColors[index]

+

var list = options.classList

+

list.forEach(function (x) {

+

if (x.startsWith("page-"))

+

list.remove(x)

+

})

+

options.classList.add("page-" + (index + 1))

+

}

+

}

+

var transformprop = '' // variable to contain browser supported version of "transform" property

+

function supportstranslate3d(){ // based on http://stackoverflow.com/a/12621264/4360074

+

if (!window.getComputedStyle) {

+

return false;

+

}

+

var $el = $('<div style="position:absolute" />').appendTo(document.body)

+

var has3d

+

$el.css('transform', 'translate3d(1px,1px,1px)')

+

has3d = $el.css('transform')

+

var findtransformprop = $el.get(0).style.cssText.match(/(\w|\-)*transform/i) // get "-vendor-transform" portion of CSS Text

+

transformprop = (findtransformprop)? findtransformprop[0] : 'transform'

+

$el.remove()

+

return (has3d !== undefined && has3d.length > 0 && has3d !== "none");

+

}

+

var $window = $(window)

+

var $root = $('html')

+

function ddfullscreenslider(setting){

+

var translatesupport = supportstranslate3d()

+

var s = $.extend({}, defaults, setting)

+

var $slider = $('#' + s.sliderid)

+

var $wrapper = $slider.find('div.slidewrapper').css({transitionDuration: s.transitionDuration})

+

var $slides = $()

+

var slideslength = 0

+

var $nav = $()

+

var thisslider = this

+

var selectedindx = 0

+

var hasharray = []

+

var mouseslidetimer

+

var swipeevts = {start:"", move:"", end:""}, swipestart = false, dy = 0, bounds = [,], scrollableclass = 'scrollable', bypassdrag = false

+

var initialrun= true // indicate whether this is first time slider has run. After page loads, variable becomes false

+

if (!translatesupport){

+

s.transitionDuration = parseFloat(s.transitionDuration) * 1000

+

}

+

/** Function to call always after a slide is shown */

+

function onslidealways($slide, index){

+

if (!initialrun && s.addHash){

+

var newhash = $nav.find('li').eq(selectedindx).find('a:eq(0)').attr('href')

+

if (history.replaceState){

+

history.replaceState(null, null, newhash)

+

}

+

else{

+

window.location.hash = newhash

+

}

+

}

+

s.onslide($slide, index) // user defined event handler

+

}

+

function hashtoselectedslide(hash){

+

for (var i=0; i<hasharray.length; i++){

+

if (hasharray[i][0] == hash){

+

return i

+

break

+

}

+

}

+

return 0

+

}

+

function applybounds(val, swipedir){

+

if (swipedir == "down"){

+

return (translatesupport)? Math.max(-parseInt(bounds[1]), val) : Math.max(-bounds[1], val)

+

}

+

else{

+

return (translatesupport)? Math.min(bounds[0], val) : Math.min(bounds[0], val)

+

}

+

}

+

function isscrollable($target){ // check element finger is on is contained inside a "scrollable" element that's actually scrollable (scrollHeight exceeds container height)

+

var $scrollel = $target.closest('.' + scrollableclass)

+

var scrollel

+

if ($scrollel.length == 1){

+

scrollel = $scrollel.get(0)

+

if (scrollel.offsetHeight < scrollel.scrollHeight){

+

return true

+

}

+

}

+

return false

+

}

+

/** Mousewheel and keyboard scroll related code. Requires jquery.mousewheel.min.js **/

+

function mouseslide(deltaY){

+

var targetindx = selectedindx

+

if (deltaY < 0) // mouse down

+

var targetindx = Math.min(slideslength-1, selectedindx+1)

+

else if (deltaY > 0)

+

var targetindx = Math.max(0, selectedindx-1)

+

if (targetindx != selectedindx)

+

thisslider.slideTo(targetindx)

+

}

+

$slider.on('mousewheel', function(event){

+

clearTimeout(mouseslidetimer)

+

var deltaY = event.deltaY

+

mouseslidetimer = setTimeout(function(){

+

mouseslide(deltaY)

+

}, 100)

+

return false

+

})

+

$(document).on('keyup', function(e){

+

var targetindx = selectedindx

+

if (e.keyCode == s.keycodeNavigation[0]) // key to go to next slide

+

var targetindx = Math.min(slideslength-1, selectedindx+1)

+

else if (e.keyCode == s.keycodeNavigation[1]) // key to go to previous slide

+

var targetindx = Math.max(0, selectedindx-1)

+

if (targetindx != selectedindx)

+

{

+

thisslider.slideTo(targetindx)

+

}

+

})

+

/** Swipe/ Mouse Drag scroll related code **/

+

swipeevts.start = 'touchstart' + (s.swipeconfig.mousedrag? ' mousedown' : '')

+

swipeevts.move = 'touchmove.dragmove' + s.sliderid + (s.swipeconfig.mousedrag? ' mousemove.dragmove' + s.sliderid : '')

+

swipeevts.end = 'touchend' + (s.swipeconfig.mousedrag? ' mouseup' : '')

+

if (s.swipeconfig.mousedrag){

+

$wrapper.bind('click', function(e){

+

if ($wrapper.data('dy') != 0) // if dragging on belt instead of clicking on it

+

e.preventDefault() // prevent default action

+

})

+

}

+

$wrapper.bind(swipeevts.start, function(e){

+

bypassdrag = false

+

var e = (e.type.indexOf('touch') != -1)? e.originalEvent.changedTouches[0] : e

+

if ( isscrollable( $(e.target) ) ){ // if target is contained inside a "scrollable" element

+

bypassdrag = true

+

return

+

}

+

swipestart = true

+

var mousey = e.pageY

+

dy = 0 // reset swipe amount

+

if (translatesupport){

+

$wrapper.css({transition: 'none'})

+

}

+

var initialy = -$window.outerHeight() * selectedindx

+

$wrapper.data({dy: dy})

+

$(document).bind(swipeevts.move, function(e){

+

if (bypassdrag){

+

return

+

}

+

var e = (e.type.indexOf('touch') != '-1')? e.originalEvent.changedTouches[0] : e

+

dy=e.pageY-mousey //distance to move horizontally

+

var newy=initialy+dy

+

newy = applybounds(newy, (dy < 0)? 'down' : 'up')

+

if (translatesupport){

+

$wrapper.css('transform', 'translate3d(0, ' + newy + 'px, 0)')

+

}

+

else{

+

$wrapper.css('top', newy)

+

}

+

$wrapper.data({dy: dy})

+

return false //cancel default drag action

+

})

+

if (e.type == "mousedown")

+

return false //cancel default drag action

+

})

+

$(document).bind(swipeevts.end, function(e){

+

$(document).unbind(swipeevts.move)

+

if (!swipestart || bypassdrag)

+

return

+

if (dy != 0){ // if actual swipe has occured

+

if (dy < 0 && dy < -s.swipeconfig.peekamount) // if swipe down and more than peek amount

+

var targetindx = Math.min(slideslength-1, selectedindx+1)

+

else if (dy > 0 && dy > s.swipeconfig.peekamount) // if swipe up and more than peek amount

+

var targetindx = Math.max(0, selectedindx-1)

+

else

+

targetindx = selectedindx

+

thisslider.slideTo(targetindx)

+

if (e.type == "mouseup")

+

return false

+

}

+

swipestart = false

+

})

+

/** CSS3 transition ontransitionend event set up */

+

$wrapper.on('transitionend webkitTransitionEnd', function(e){

+

if (/transform/i.test(e.originalEvent.propertyName)){ // check event fired on "transform" prop

+

// onslidealways($slides.eq(selectedindx), selectedindx)

+

}

+

})

+

/** Public functions **/

+

this.reloadSlides = function(){

+

$nav.remove()

+

hasharray = []

+

$nav = $('<ul class="fssnav" />')

+

$slides = $('article.slide').each(function(i){

+

var $curslide = $(this)

+

var anchorval = $curslide.attr('id') || 'slide' + (i+1)

+

anchorval = "#" + anchorval

+

hasharray.push([anchorval, i])

+

var title = $curslide.data('title') || anchorval

+

var $navli = $('<li><a href="' + anchorval +'" title="' + title +'">' + (i + 1) + '</a></li>').appendTo($nav)

+

var $navlink = $navli.find('a:eq(0)')

+

$navli.on('click touchstart', function(e){

+

thisslider.slideTo(i)

+

})

+

})

+

$nav.on('click touchstart touchend', function(e){

+

var e = (e.type.indexOf('touch') != '-1')? e.originalEvent.changedTouches[0] : e

+

return false

+

}).appendTo($slider)

+

slideslength = $slides.length

+

bounds = [0, $window.outerHeight() * (slideslength-1)]

+

}

+

this.openSlider = function(){

+

initialrun = false

+

bypassdrag = false

+

s.sliderstate = 'open'

+

$root.addClass('fssopen')

+

$slider.css('visibility', 'visible')

+

}

+

this.closeSlider = function(){

+

s.sliderstate = 'close'

+

bypassdrag = true

+

$root.removeClass('fssopen')

+

$slider.css({visibility:'hidden'})

+

}

+

this.slideTo = function(indx, noanimation){

+

onslidealways($slides.eq(selectedindx), indx)

+

var newy = $window.outerHeight() * indx

+

$nav.find('li').eq(selectedindx).removeClass('selected')

+

$nav.find('li').eq(indx).addClass('selected')

+

selectedindx = indx

+

if (translatesupport){

+

$wrapper.css({transition: (noanimation)? 'none' : transformprop + ' ' + s.transitionDuration})

+

$wrapper.css('transform', 'translate3d(0, -' + newy + 'px, 0)')

+

if (noanimation){ // run callback immediately

+

onslidealways($slides.eq(selectedindx), selectedindx)

+

}

+

}

+

else{

+

$wrapper.stop().animate({top: -newy}, (noanimation)? 0 : s.transitionDuration, function(){

+

onslidealways($slides.eq(selectedindx), selectedindx)

+

})

+

}

+

}

+

/** Initialize and show slider **/

+

this.reloadSlides()

+

selectedindx = hashtoselectedslide(window.location.hash)

+

this.slideTo(selectedindx, true)

+

if (s.sliderstate == 'open'){

+

this.openSlider()

+

}

+

$(window).on('resize', function(){

+

thisslider.slideTo(selectedindx, true)

+

bounds = [0, $window.outerHeight() * (slideslength-1)]

+

})

+

} // end fullscreenslider def

+

return ddfullscreenslider

+

})(jQuery)

+

</script>

+

</body>

</html>

@@ Line 1: / Line 1: @@
-{{USTC-Software}}
+<!DOCTYPE html>
-<html>
+<html lang="zh-CN">
+<head>
+    <meta charset="utf-8">
+    <title>wikiHome</title>
+    <script src="js/jquery.min.js"></script>
+    <script src="js/jquery.mousewheel.js"></script>
+    <script src="js/fullscreenslider.js"></script>
+    <script src="js/bootstrap.min.js"></script>
+    <link rel="stylesheet" href="css/bootstrap.min.css">
+    <link rel="stylesheet" href="css/fullscreenslider.css">
+    <link rel="stylesheet" href="css/navbar.css">
+    <link rel="stylesheet" href="css/style.css">
+    <link rel="stylesheet" href="css/index.css">
+</head>
+<body>
+<section id="dowebok" class="fullscreenslider">
+    <div style="position:relative; z-index:4">
+        <nav class="navbar navcolor" id="nav">
+            <div>
+                <div class="navbar-header">
+                    <a class="navbar-brand" href="index.html">Brand</a>
+                </div>
+                <ul class="nav navbar-nav navbar-right page-1">
+                    <li><a href="index.html">Home</a></li>
+                    <li>
+                        <a href="#">
+                            Team
+                            <b class="caret"></b>
+                        </a>
+                        <ul class="menu">
+                            <li><a href="#">Team</a></li>
+                            <li><a href="#">Collaborations</a></li>
+                        </ul>
+                    </li>
+                    <li>
+                        <a href="#">
+                            Project
+                            <b class="caret"></b>
+                        </a>
+                        <ul class="menu">
+                            <li><a href="#">Description</a></li>
+                            <li><a href="#">Design</a></li>
+                            <li><a href="#">Experiments</a></li>
+                        </ul>
+                    </li>
+                    <li><a href="#">Parts</a></li>
+                    <li><a href="#">Safety</a></li>
+                    <li><a href="#">Human Practices</a></li>
+                    <li><a href="#">Awards</a></li>
+                    <li><a href="#">Judging Form</a></li>
+                    <li><a></a></li>
+                </ul>
+            </div>
+        </nav>
+    </div>
+    <div class="slidewrapper">
+        <article class="slide" id="theme-graph">
+            <div class="container" style="background-color: #3498db; height: 100%; width: 100%;">
+                <div class="row">
+                    <div class="graphic-one">
+                        <img src="img/LOGO.png" style="opacity: 0.9;width: 270px; position: relative; left: 370px; top: 300px;">
+                        <div id="arrows-1" style="width: 100px; position: relative; left: 480px;top: -40px;height: 0">
+                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 276.33 217.25"><defs><style>.cls-1{fill:none;stroke:#3ba2d7;stroke-miterlimit:10;stroke-width:10px;}</style></defs><title>交换箭头</title><g id="图层_2" data-name="图层 2"><g id="图层_1-2" data-name="图层 1"><path class="cls-1" d="M266.33,52l-75-43.3V26.34a7,7,0,0,0-1.33-.13H17a7,7,0,0,0-7,7v87.54A11.82,11.82,0,0,0,27.73,131l27.36-15.8A11.82,11.82,0,0,0,61,105V77.21H190a7,7,0,0,0,1.33-.13V95.26Z"/><path class="cls-1" d="M10,165.29l75,43.3V190.9a7,7,0,0,0,1.33.13h173a7,7,0,0,0,7-7V96.5A11.82,11.82,0,0,0,248.6,86.26l-27.36,15.8a11.82,11.82,0,0,0-5.91,10.24V140h-129a7,7,0,0,0-1.33.13V122Z"/></g></g></svg>
+                        </div>
+                        <div id="arrows-2" style="width: 60px; position: relative; left: 360px;top: 180px;height:0">
+                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 276.33 217.25"><defs><style>.arrow-2{fill:none;stroke:#3ba2d7;stroke-miterlimit:10;stroke-width:13px;}</style></defs><title>交换箭头</title><g id="图层_2" data-name="图层 2"><g id="图层_1-2" data-name="图层 1"><path class="arrow-2" d="M266.33,52l-75-43.3V26.34a7,7,0,0,0-1.33-.13H17a7,7,0,0,0-7,7v87.54A11.82,11.82,0,0,0,27.73,131l27.36-15.8A11.82,11.82,0,0,0,61,105V77.21H190a7,7,0,0,0,1.33-.13V95.26Z"/><path class="arrow-2" d="M10,165.29l75,43.3V190.9a7,7,0,0,0,1.33.13h173a7,7,0,0,0,7-7V96.5A11.82,11.82,0,0,0,248.6,86.26l-27.36,15.8a11.82,11.82,0,0,0-5.91,10.24V140h-129a7,7,0,0,0-1.33.13V122Z"/></g></g></svg>
+                        </div>
+                        <div id="abacus-1" style="width: 130px; position: relative; left: 600px;top: 30px;height:0">
+                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 119"><defs><style>.cls-1,.cls-2{fill:none;stroke:#3ba2d7;stroke-miterlimit:10;}.cls-1{stroke-width:10px;}.cls-2{stroke-width:5px;}.cls-3{fill:#3ba2d7;}</style></defs><title>资源 2</title><g id="图层_2" data-name="图层 2"><g id="图层_1-2" data-name="图层 1"><rect class="cls-1" x="5" y="5" width="230" height="109" rx="7" ry="7"/><line class="cls-2" x1="120" y1="5" x2="120" y2="114"/><line class="cls-2" x1="157" y1="5" x2="157" y2="114"/><line class="cls-2" x1="195" y1="5" x2="195" y2="114"/><line class="cls-2" x1="83" y1="5" x2="83" y2="114"/><line class="cls-2" x1="42" y1="5" x2="42" y2="114"/><line class="cls-1" x1="5" y1="41" x2="235" y2="41"/><rect class="cls-3" x="30" y="28" width="25" height="7" rx="3.5" ry="3.5"/><rect class="cls-3" x="30" y="20" width="25" height="7" rx="3.5" ry="3.5"/><rect class="cls-3" x="30" y="101" width="25" height="7" rx="3.5" ry="3.5"/><rect class="cls-3" x="30" y="93" width="25" height="7" rx="3.5" ry="3.5"/><rect class="cls-3" x="30" y="85" width="25" height="7" rx="3.5" ry="3.5"/><rect class="cls-3" x="30" y="77" width="25" height="7" rx="3.5" ry="3.5"/><rect class="cls-3" x="30" y="69" width="25" height="7" rx="3.5" ry="3.5"/><rect class="cls-3" x="71" y="28" width="25" height="7" rx="3.5" ry="3.5"/><rect class="cls-3" x="71" y="20" width="25" height="7" rx="3.5" ry="3.5"/><rect class="cls-3" x="71" y="101" width="25" height="7" rx="3.5" ry="3.5"/><rect class="cls-3" x="71" y="93" width="25" height="7" rx="3.5" ry="3.5"/><rect class="cls-3" x="71" y="85" width="25" height="7" rx="3.5" ry="3.5"/><rect class="cls-3" x="71" y="77" width="25" height="7" rx="3.5" ry="3.5"/><rect class="cls-3" x="71" y="69" width="25" height="7" rx="3.5" ry="3.5"/><rect class="cls-3" x="108" y="28" width="25" height="7" rx="3.5" ry="3.5"/><rect class="cls-3" x="108" y="20" width="25" height="7" rx="3.5" ry="3.5"/><rect class="cls-3" x="108" y="101" width="25" height="7" rx="3.5" ry="3.5"/><rect class="cls-3" x="108" y="93" width="25" height="7" rx="3.5" ry="3.5"/><rect class="cls-3" x="108" y="85" width="25" height="7" rx="3.5" ry="3.5"/><rect class="cls-3" x="108" y="77" width="25" height="7" rx="3.5" ry="3.5"/><rect class="cls-3" x="108" y="69" width="25" height="7" rx="3.5" ry="3.5"/><rect class="cls-3" x="145" y="28" width="25" height="7" rx="3.5" ry="3.5"/><rect class="cls-3" x="145" y="20" width="25" height="7" rx="3.5" ry="3.5"/><rect class="cls-3" x="145" y="101" width="25" height="7" rx="3.5" ry="3.5"/><rect class="cls-3" x="145" y="93" width="25" height="7" rx="3.5" ry="3.5"/><rect class="cls-3" x="145" y="85" width="25" height="7" rx="3.5" ry="3.5"/><rect class="cls-3" x="145" y="77" width="25" height="7" rx="3.5" ry="3.5"/><rect class="cls-3" x="145" y="69" width="25" height="7" rx="3.5" ry="3.5"/><rect class="cls-3" x="183" y="28" width="25" height="7" rx="3.5" ry="3.5"/><rect class="cls-3" x="183" y="20" width="25" height="7" rx="3.5" ry="3.5"/><rect class="cls-3" x="183" y="101" width="25" height="7" rx="3.5" ry="3.5"/><rect class="cls-3" x="183" y="93" width="25" height="7" rx="3.5" ry="3.5"/><rect class="cls-3" x="183" y="85" width="25" height="7" rx="3.5" ry="3.5"/><rect class="cls-3" x="183" y="77" width="25" height="7" rx="3.5" ry="3.5"/><rect class="cls-3" x="183" y="69" width="25" height="7" rx="3.5" ry="3.5"/></g></g></svg>
+                        </div>
+                        <div id="abacus-2" style="width: 140px; position: relative; left: 420px;top: 265px;height: 0;">
+                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 119"><defs><style>.cls-1,.cls-2{fill:none;stroke:#3ba2d7;stroke-miterlimit:10;}.cls-1{stroke-width:10px;}.cls-2{stroke-width:5px;}.cls-3{fill:#3ba2d7;}</style></defs><title>资源 2</title><g id="图层_2" data-name="图层 2"><g id="图层_1-2" data-name="图层 1"><rect class="cls-1" x="5" y="5" width="230" height="109" rx="7" ry="7"/><line class="cls-2" x1="120" y1="5" x2="120" y2="114"/><line class="cls-2" x1="157" y1="5" x2="157" y2="114"/><line class="cls-2" x1="195" y1="5" x2="195" y2="114"/><line class="cls-2" x1="83" y1="5" x2="83" y2="114"/><line class="cls-2" x1="42" y1="5" x2="42" y2="114"/><line class="cls-1" x1="5" y1="41" x2="235" y2="41"/><rect class="cls-3" x="30" y="28" width="25" height="7" rx="3.5" ry="3.5"/><rect class="cls-3" x="30" y="20" width="25" height="7" rx="3.5" ry="3.5"/><rect class="cls-3" x="30" y="101" width="25" height="7" rx="3.5" ry="3.5"/><rect class="cls-3" x="30" y="93" width="25" height="7" rx="3.5" ry="3.5"/><rect class="cls-3" x="30" y="85" width="25" height="7" rx="3.5" ry="3.5"/><rect class="cls-3" x="30" y="77" width="25" height="7" rx="3.5" ry="3.5"/><rect class="cls-3" x="30" y="69" width="25" height="7" rx="3.5" ry="3.5"/><rect class="cls-3" x="71" y="28" width="25" height="7" rx="3.5" ry="3.5"/><rect class="cls-3" x="71" y="20" width="25" height="7" rx="3.5" ry="3.5"/><rect class="cls-3" x="71" y="101" width="25" height="7" rx="3.5" ry="3.5"/><rect class="cls-3" x="71" y="93" width="25" height="7" rx="3.5" ry="3.5"/><rect class="cls-3" x="71" y="85" width="25" height="7" rx="3.5" ry="3.5"/><rect class="cls-3" x="71" y="77" width="25" height="7" rx="3.5" ry="3.5"/><rect class="cls-3" x="71" y="69" width="25" height="7" rx="3.5" ry="3.5"/><rect class="cls-3" x="108" y="28" width="25" height="7" rx="3.5" ry="3.5"/><rect class="cls-3" x="108" y="20" width="25" height="7" rx="3.5" ry="3.5"/><rect class="cls-3" x="108" y="101" width="25" height="7" rx="3.5" ry="3.5"/><rect class="cls-3" x="108" y="93" width="25" height="7" rx="3.5" ry="3.5"/><rect class="cls-3" x="108" y="85" width="25" height="7" rx="3.5" ry="3.5"/><rect class="cls-3" x="108" y="77" width="25" height="7" rx="3.5" ry="3.5"/><rect class="cls-3" x="108" y="69" width="25" height="7" rx="3.5" ry="3.5"/><rect class="cls-3" x="145" y="28" width="25" height="7" rx="3.5" ry="3.5"/><rect class="cls-3" x="145" y="20" width="25" height="7" rx="3.5" ry="3.5"/><rect class="cls-3" x="145" y="101" width="25" height="7" rx="3.5" ry="3.5"/><rect class="cls-3" x="145" y="93" width="25" height="7" rx="3.5" ry="3.5"/><rect class="cls-3" x="145" y="85" width="25" height="7" rx="3.5" ry="3.5"/><rect class="cls-3" x="145" y="77" width="25" height="7" rx="3.5" ry="3.5"/><rect class="cls-3" x="145" y="69" width="25" height="7" rx="3.5" ry="3.5"/><rect class="cls-3" x="183" y="28" width="25" height="7" rx="3.5" ry="3.5"/><rect class="cls-3" x="183" y="20" width="25" height="7" rx="3.5" ry="3.5"/><rect class="cls-3" x="183" y="101" width="25" height="7" rx="3.5" ry="3.5"/><rect class="cls-3" x="183" y="93" width="25" height="7" rx="3.5" ry="3.5"/><rect class="cls-3" x="183" y="85" width="25" height="7" rx="3.5" ry="3.5"/><rect class="cls-3" x="183" y="77" width="25" height="7" rx="3.5" ry="3.5"/><rect class="cls-3" x="183" y="69" width="25" height="7" rx="3.5" ry="3.5"/></g></g></svg>
+                        </div>
+                        <div id="talk-1" style="width: 60px; position: relative; left: 640px;top: -50px;height: 0;-webkit-transform: scaleX(-1);-moz-transform: scaleX(-1);-ms-transform: scaleX(-1);-o-transform: scaleX(-1);transform: scaleX(-1);">
+                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 259 169.36"><defs><style>.talk-1{fill:none;stroke:#3ba2d7;stroke-miterlimit:10;stroke-width:14px;}.cls-2{fill:#3ba2d7;}</style></defs><title>对话框</title><g id="图层_2" data-name="图层 2"><g id="图层_1-2" data-name="图层 1"><path class="talk-1" d="M254,101.57V36.43A31.52,31.52,0,0,0,222.57,5H36.43A31.52,31.52,0,0,0,5,36.43v65.14A31.52,31.52,0,0,0,36.43,133H186.18l58.63,28.1-2.69-35A31.41,31.41,0,0,0,254,101.57Z"/><circle class="cls-2" cx="60.5" cy="70.5" r="15.5"/><circle class="cls-2" cx="126.5" cy="70.5" r="15.5"/><circle class="cls-2" cx="194.5" cy="70.5" r="15.5"/></g></g></svg>
+                        </div>
+                        <div id="talk-2" style="width: 100px; position: relative; left: 300px;top: 60px; height: 0;">
+                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 259 169.36"><defs><style>.cls-1{fill:none;stroke:#3ba2d7;stroke-miterlimit:10;stroke-width:10px;}.cls-2{fill:#3ba2d7;}</style></defs><title>对话框</title><g id="图层_2" data-name="图层 2"><g id="图层_1-2" data-name="图层 1"><path class="cls-1" d="M254,101.57V36.43A31.52,31.52,0,0,0,222.57,5H36.43A31.52,31.52,0,0,0,5,36.43v65.14A31.52,31.52,0,0,0,36.43,133H186.18l58.63,28.1-2.69-35A31.41,31.41,0,0,0,254,101.57Z"/><circle class="cls-2" cx="60.5" cy="70.5" r="15.5"/><circle class="cls-2" cx="126.5" cy="70.5" r="15.5"/><circle class="cls-2" cx="194.5" cy="70.5" r="15.5"/></g></g></svg>
+                        </div>
+                        <div id="wheel-1" style="width: 35px; position: relative; left: 530px;top: 0px; height: 0;stroke-width: 80px;">
+                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 127 127.11"><defs><style>.wheel-1{fill:none;stroke:#3ba2d7;stroke-miterlimit:10;stroke-width:10px;}</style></defs><title>齿轮_2</title><g id="图层_2" data-name="图层 2"><g id="图层_1-2" data-name="图层 1"><path class="wheel-1" d="M120.14,53.73l-8.3-2.86a8.72,8.72,0,0,0-1-.26c-.08-.29-.18-.58-.26-.87l-.16-.52c-.19-.61-.38-1.22-.59-1.82-.1-.29-.21-.58-.32-.87-.18-.48-.36-1-.55-1.43s-.36-.85-.54-1.28-.29-.66-.44-1c-.26-.56-.54-1.12-.82-1.67l-.28-.55c-.11-.21-.21-.42-.32-.62a8.93,8.93,0,0,0,.64-1.08L111.07,31c1.23-2.52,1-5.13-.53-6.69l-7.25-7.25c-1.55-1.55-4.16-1.76-6.69-.53L88.72,20.4a8.72,8.72,0,0,0-.88.5,48.73,48.73,0,0,0-10.53-4.45A9.06,9.06,0,0,0,77,15.15l-2.86-8.3C73.21,4.2,71.22,2.5,69,2.5H58.77c-2.19,0-4.19,1.7-5.1,4.36l-2.86,8.3a9.05,9.05,0,0,0-.29,1.1l-.11,0c-.5.14-1,.29-1.49.44l-1,.32-.59.19-.71.26-.69.26-1.18.47-.9.38L43,19l-.83.38-.27.14L41,20c-.34.18-.69.34-1,.53a9.13,9.13,0,0,0-1.18-.7l-7.89-3.85c-2.52-1.23-5.13-1-6.69.53L17,23.73c-1.55,1.55-1.76,4.16-.53,6.69L20.3,38.3a9,9,0,0,0,.55,1,48.76,48.76,0,0,0-4.49,10.5,8.93,8.93,0,0,0-1.22.31l-8.3,2.86C4.2,53.85,2.5,55.84,2.5,58V68.29c0,2.19,1.7,4.19,4.36,5.1l8.3,2.86a8.72,8.72,0,0,0,1,.26c.08.3.18.58.27.88l.15.51c.19.61.38,1.23.59,1.83.1.29.21.58.32.87.18.48.36,1,.55,1.43s.36.85.54,1.27.29.66.44,1c.26.56.54,1.11.82,1.66l.29.56c.11.21.21.41.32.62a8.94,8.94,0,0,0-.64,1.08L15.93,96.1c-1.23,2.52-1,5.13.53,6.69L23.71,110c1.55,1.55,4.16,1.76,6.69.53l7.89-3.85a8.73,8.73,0,0,0,.88-.5,48.73,48.73,0,0,0,10.53,4.45A9.06,9.06,0,0,0,50,112l2.86,8.3c.91,2.65,2.91,4.36,5.1,4.36H68.23c2.19,0,4.19-1.7,5.1-4.36l2.86-8.3a9.05,9.05,0,0,0,.29-1.1l.11,0c.5-.14,1-.29,1.48-.44l1-.32.58-.19.7-.26.7-.26,1.18-.47.89-.38.88-.4.82-.38.26-.14.9-.46c.34-.17.68-.34,1-.52a9.12,9.12,0,0,0,1.18.7l7.89,3.85c2.52,1.23,5.13,1,6.69-.53l7.25-7.25c1.55-1.55,1.76-4.16.53-6.69l-3.85-7.89a9,9,0,0,0-.55-1,48.76,48.76,0,0,0,4.49-10.5,8.94,8.94,0,0,0,1.22-.31l8.3-2.86c2.65-.91,4.36-2.91,4.36-5.1V58.83C124.5,56.64,122.8,54.64,120.14,53.73Z"/><circle class="cls-1" cx="64" cy="64.11" r="19"/></g></g></svg>
+                        </div>
+                        <div id="wheel-2" style="width: 30px; position: relative; left: 360px;top: 220px; height: 0;">
+                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 127 127.11"><defs><style>.wheel-2{fill:none;stroke:#3ba2d7;stroke-miterlimit:10;stroke-width:11px;}</style></defs><title>齿轮_2</title><g id="图层_2" data-name="图层 2"><g id="图层_1-2" data-name="图层 1"><path class="wheel-2" d="M120.14,53.73l-8.3-2.86a8.72,8.72,0,0,0-1-.26c-.08-.29-.18-.58-.26-.87l-.16-.52c-.19-.61-.38-1.22-.59-1.82-.1-.29-.21-.58-.32-.87-.18-.48-.36-1-.55-1.43s-.36-.85-.54-1.28-.29-.66-.44-1c-.26-.56-.54-1.12-.82-1.67l-.28-.55c-.11-.21-.21-.42-.32-.62a8.93,8.93,0,0,0,.64-1.08L111.07,31c1.23-2.52,1-5.13-.53-6.69l-7.25-7.25c-1.55-1.55-4.16-1.76-6.69-.53L88.72,20.4a8.72,8.72,0,0,0-.88.5,48.73,48.73,0,0,0-10.53-4.45A9.06,9.06,0,0,0,77,15.15l-2.86-8.3C73.21,4.2,71.22,2.5,69,2.5H58.77c-2.19,0-4.19,1.7-5.1,4.36l-2.86,8.3a9.05,9.05,0,0,0-.29,1.1l-.11,0c-.5.14-1,.29-1.49.44l-1,.32-.59.19-.71.26-.69.26-1.18.47-.9.38L43,19l-.83.38-.27.14L41,20c-.34.18-.69.34-1,.53a9.13,9.13,0,0,0-1.18-.7l-7.89-3.85c-2.52-1.23-5.13-1-6.69.53L17,23.73c-1.55,1.55-1.76,4.16-.53,6.69L20.3,38.3a9,9,0,0,0,.55,1,48.76,48.76,0,0,0-4.49,10.5,8.93,8.93,0,0,0-1.22.31l-8.3,2.86C4.2,53.85,2.5,55.84,2.5,58V68.29c0,2.19,1.7,4.19,4.36,5.1l8.3,2.86a8.72,8.72,0,0,0,1,.26c.08.3.18.58.27.88l.15.51c.19.61.38,1.23.59,1.83.1.29.21.58.32.87.18.48.36,1,.55,1.43s.36.85.54,1.27.29.66.44,1c.26.56.54,1.11.82,1.66l.29.56c.11.21.21.41.32.62a8.94,8.94,0,0,0-.64,1.08L15.93,96.1c-1.23,2.52-1,5.13.53,6.69L23.71,110c1.55,1.55,4.16,1.76,6.69.53l7.89-3.85a8.73,8.73,0,0,0,.88-.5,48.73,48.73,0,0,0,10.53,4.45A9.06,9.06,0,0,0,50,112l2.86,8.3c.91,2.65,2.91,4.36,5.1,4.36H68.23c2.19,0,4.19-1.7,5.1-4.36l2.86-8.3a9.05,9.05,0,0,0,.29-1.1l.11,0c.5-.14,1-.29,1.48-.44l1-.32.58-.19.7-.26.7-.26,1.18-.47.89-.38.88-.4.82-.38.26-.14.9-.46c.34-.17.68-.34,1-.52a9.12,9.12,0,0,0,1.18.7l7.89,3.85c2.52,1.23,5.13,1,6.69-.53l7.25-7.25c1.55-1.55,1.76-4.16.53-6.69l-3.85-7.89a9,9,0,0,0-.55-1,48.76,48.76,0,0,0,4.49-10.5,8.94,8.94,0,0,0,1.22-.31l8.3-2.86c2.65-.91,4.36-2.91,4.36-5.1V58.83C124.5,56.64,122.8,54.64,120.14,53.73Z"/><circle class="cls-1" cx="64" cy="64.11" r="19"/></g></g></svg>
+                        </div>
+                        <div id="wheel-3" style="width: 65px; position: relative; left: 620px;top: 130px;height: 0;">
+                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 127 127.11"><defs><style>.wheel-3{fill:none;stroke:#3ba2d7;stroke-miterlimit:10;stroke-width:8px;}</style></defs><title>齿轮_2</title><g id="图层_2" data-name="图层 2"><g id="图层_1-2" data-name="图层 1"><path class="wheel-3" d="M120.14,53.73l-8.3-2.86a8.72,8.72,0,0,0-1-.26c-.08-.29-.18-.58-.26-.87l-.16-.52c-.19-.61-.38-1.22-.59-1.82-.1-.29-.21-.58-.32-.87-.18-.48-.36-1-.55-1.43s-.36-.85-.54-1.28-.29-.66-.44-1c-.26-.56-.54-1.12-.82-1.67l-.28-.55c-.11-.21-.21-.42-.32-.62a8.93,8.93,0,0,0,.64-1.08L111.07,31c1.23-2.52,1-5.13-.53-6.69l-7.25-7.25c-1.55-1.55-4.16-1.76-6.69-.53L88.72,20.4a8.72,8.72,0,0,0-.88.5,48.73,48.73,0,0,0-10.53-4.45A9.06,9.06,0,0,0,77,15.15l-2.86-8.3C73.21,4.2,71.22,2.5,69,2.5H58.77c-2.19,0-4.19,1.7-5.1,4.36l-2.86,8.3a9.05,9.05,0,0,0-.29,1.1l-.11,0c-.5.14-1,.29-1.49.44l-1,.32-.59.19-.71.26-.69.26-1.18.47-.9.38L43,19l-.83.38-.27.14L41,20c-.34.18-.69.34-1,.53a9.13,9.13,0,0,0-1.18-.7l-7.89-3.85c-2.52-1.23-5.13-1-6.69.53L17,23.73c-1.55,1.55-1.76,4.16-.53,6.69L20.3,38.3a9,9,0,0,0,.55,1,48.76,48.76,0,0,0-4.49,10.5,8.93,8.93,0,0,0-1.22.31l-8.3,2.86C4.2,53.85,2.5,55.84,2.5,58V68.29c0,2.19,1.7,4.19,4.36,5.1l8.3,2.86a8.72,8.72,0,0,0,1,.26c.08.3.18.58.27.88l.15.51c.19.61.38,1.23.59,1.83.1.29.21.58.32.87.18.48.36,1,.55,1.43s.36.85.54,1.27.29.66.44,1c.26.56.54,1.11.82,1.66l.29.56c.11.21.21.41.32.62a8.94,8.94,0,0,0-.64,1.08L15.93,96.1c-1.23,2.52-1,5.13.53,6.69L23.71,110c1.55,1.55,4.16,1.76,6.69.53l7.89-3.85a8.73,8.73,0,0,0,.88-.5,48.73,48.73,0,0,0,10.53,4.45A9.06,9.06,0,0,0,50,112l2.86,8.3c.91,2.65,2.91,4.36,5.1,4.36H68.23c2.19,0,4.19-1.7,5.1-4.36l2.86-8.3a9.05,9.05,0,0,0,.29-1.1l.11,0c.5-.14,1-.29,1.48-.44l1-.32.58-.19.7-.26.7-.26,1.18-.47.89-.38.88-.4.82-.38.26-.14.9-.46c.34-.17.68-.34,1-.52a9.12,9.12,0,0,0,1.18.7l7.89,3.85c2.52,1.23,5.13,1,6.69-.53l7.25-7.25c1.55-1.55,1.76-4.16.53-6.69l-3.85-7.89a9,9,0,0,0-.55-1,48.76,48.76,0,0,0,4.49-10.5,8.94,8.94,0,0,0,1.22-.31l8.3-2.86c2.65-.91,4.36-2.91,4.36-5.1V58.83C124.5,56.64,122.8,54.64,120.14,53.73Z"/><circle class="cls-1" cx="64" cy="64.11" r="19"/></g></g></svg>
+                        </div>
+                        <div id="circuit-1" style="width: 230px; position: relative; left: 500px;top: 220px; height:0;">
+                            <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 560 288" style="enable-background:new 0 0 560 288;" xml:space="preserve"> <style type="text/css"> .circuit-1{fill:none;stroke:#3ba2d5;stroke-width:6;stroke-miterlimit:10;} </style> <image style="overflow:visible;" width="626" height="-626" xlink:href="A35BE092.jpg"  transform="matrix(1 0 0 1 -253 456)"> </image> <circle class="circuit-1" cx="308.6" cy="16.1" r="6.7"/> <polyline class="circuit-1" points="308.7,22.7 308.7,69.5 232.3,146.4 232.3,228.7 253.1,251.7 "/> <polyline class="circuit-1" points="322.3,22.7 322.3,69.5 245.9,146.4 245.9,228.7 266.7,251.7 "/> <polyline class="circuit-1" points="335.3,22.7 335.3,69.5 258.9,146.4 258.9,228.7 279.7,251.7 "/> <circle class="circuit-1" cx="255.1" cy="256.2" r="6.7"/> <polyline class="circuit-1" points="285.9,148.2 350.3,83.8 437.3,83.8 "/> <path class="circuit-1" d="M154.8,60.4"/> <polyline class="circuit-1" points="268.6,148.9 345.6,72 401.2,72 "/> <circle class="circuit-1" cx="406" cy="71.8" r="6.7"/> <circle class="circuit-1" cx="281" cy="154.4" r="6.7"/> <polyline class="circuit-1" points="308.6,144 355,95.7 424.4,95.7 "/> <circle class="circuit-1" cx="305.7" cy="149.2" r="6.7"/> <circle class="circuit-1" cx="444" cy="85.2" r="6.7"/> </svg>
+                        </div>
+                        <div id="circuit-2" style="width: 230px; position: relative; left: 150px;top: -10px; height:0;">
+                            <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 560 288" style="enable-background:new 0 0 560 288;" xml:space="preserve"> <style type="text/css"> .circuit-2{fill:none;stroke:#3ba2d5;stroke-width:6;stroke-miterlimit:10;} </style> <image style="overflow:visible;" width="626" height="-626" xlink:href="A35BE092.jpg"  transform="matrix(1 0 0 1 -253 456)"> </image> <circle class="circuit-2" cx="308.6" cy="16.1" r="6.7"/> <polyline class="circuit-2" points="308.7,22.7 308.7,69.5 232.3,146.4 232.3,228.7 253.1,251.7 "/> <polyline class="circuit-2" points="322.3,22.7 322.3,69.5 245.9,146.4 245.9,228.7 266.7,251.7 "/> <polyline class="circuit-2" points="335.3,22.7 335.3,69.5 258.9,146.4 258.9,228.7 279.7,251.7 "/> <circle class="circuit-2" cx="255.1" cy="256.2" r="6.7"/> <polyline class="circuit-2" points="285.9,148.2 350.3,83.8 437.3,83.8 "/> <path class="circuit-2" d="M154.8,60.4"/> <polyline class="circuit-2" points="268.6,148.9 345.6,72 401.2,72 "/> <circle class="circuit-2" cx="406" cy="71.8" r="6.7"/> <circle class="circuit-2" cx="281" cy="154.4" r="6.7"/> <polyline class="circuit-2" points="308.6,144 355,95.7 424.4,95.7 "/> <circle class="circuit-2" cx="305.7" cy="149.2" r="6.7"/> <circle class="circuit-2" cx="444" cy="85.2" r="6.7"/> </svg>
+                        </div>
+                        <div id="plugin-1" style="width: 630px; position: relative; left: 260px;top: 50px; height:0;">
+                            <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="290 0 560 288" style="enable-background:new 0 0 560 288;" xml:space="preserve"> <style type="text/css"> .st1{fill:none;stroke:#3ba2d5;stroke-width:5px;} </style> <path class="st1" d="M394.1,120.8h-19.7v-14.9h19.7c3.4,0,6.1-2.7,6.1-6.1s-2.7-6.1-6.1-6.1h-19.7v-4.9c0-5.6-4.6-10.3-10.2-10.1 c-2.3,0.1-4.6,0.3-6.8,0.8c-5,1-4.8,1.3-9.2,2.8c-5.6,1.9-9.1,6-9.4,10.4c-0.7-0.1-1.4-0.2-2.1-0.2h-3.9c-5.6,0-10.2,4.6-10.2,10.2 v3.2h-49.3v14.4h49.3v3.1c0,5.6,4.6,10.2,10.2,10.2h3.9c0.7,0,1.4-0.1,2.1-0.2c0.2,4.5,3.8,8.5,9.4,10.5c4.4,1.5,9.2,2.8,14.2,3.9 c0,0,0.1,0,0.1,0c6.2,1.3,11.9-3.6,11.9-9.9v-4.9h19.7c3.4,0,6.1-2.7,6.1-6.1C400.1,123.5,397.4,120.8,394.1,120.8z"/> </svg>
+                        </div>
+                        <div id="like-1" style="width: 200px; position: relative; left: 350px;top:-50px; height:0;">
+                            <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="100 30 120 84" style="enable-background:new 0 0 560 288;" xml:space="preserve"> <path fill="transparent" stroke="#3ba2d5" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d=" M146.3,80.1c-0.4,0.2-0.8,0.2-1.1,0c-8.1-4.3-13.6-10.4-13.4-17c0.1-6,4.2-8,7.3-7.9c3.1,0.1,5.8,2,6.7,3h0c0.9-1,3.6-3,6.7-3 c3.1-0.1,7.2,1.9,7.3,7.9C159.9,69.7,154.5,75.8,146.3,80.1z" style="opacity: 1; transform: translateX(0%) translateY(0%);"></path> </svg>
+                        </div>
+                        <div id="like-2" style="width: 150px; position: relative; left: 550px;top:-50px; height:0;">
+                            <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="100 30 120 84" style="enable-background:new 0 0 560 288;" xml:space="preserve"> <path fill="transparent" stroke="#3ba2d5" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d=" M146.3,80.1c-0.4,0.2-0.8,0.2-1.1,0c-8.1-4.3-13.6-10.4-13.4-17c0.1-6,4.2-8,7.3-7.9c3.1,0.1,5.8,2,6.7,3h0c0.9-1,3.6-3,6.7-3 c3.1-0.1,7.2,1.9,7.3,7.9C159.9,69.7,154.5,75.8,146.3,80.1z" style="opacity: 1; transform: translateX(0%) translateY(0%);"></path> </svg>
+                        </div>
+                        <div id="like-3" style="width: 320px; position: relative; left: 160px;top:170px; height:0;">
+                            <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="100 30 120 84" style="enable-background:new 0 0 560 288;" xml:space="preserve"> <path fill="transparent" stroke="#3ba2d5" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d=" M146.3,80.1c-0.4,0.2-0.8,0.2-1.1,0c-8.1-4.3-13.6-10.4-13.4-17c0.1-6,4.2-8,7.3-7.9c3.1,0.1,5.8,2,6.7,3h0c0.9-1,3.6-3,6.7-3 c3.1-0.1,7.2,1.9,7.3,7.9C159.9,69.7,154.5,75.8,146.3,80.1z" style="opacity: 1; transform: translateX(0%) translateY(0%);"></path> </svg>
+                        </div>
+                        <div id="brick-1" style="width: 80px; position: relative; left: 710px;top:170px; height:0;">
+                            <svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 54 54" style="enable-background:new 0 0 54 54;" xml:space="preserve"> <style type="text/css">.brick{fill:#3ba2d5;stroke:#3ba2d5;stroke-width: 0px;stroke-miterlimit: 10;}</style> <g> <g> <path class="brick" d="M1,18h24c0.552,0,1-0.448,1-1V5c0-0.552-0.448-1-1-1H1C0.448,4,0,4.448,0,5v12C0,17.552,0.448,18,1,18z M2,6h22v10H2V6z" /> <path class="brick" d="M25,36H1c-0.552,0-1,0.448-1,1v12c0,0.552,0.448,1,1,1h24c0.552,0,1-0.448,1-1V37C26,36.448,25.552,36,25,36z M24,48H2V38 h22V48z"/> <path class="brick" d="M53,4H29c-0.552,0-1,0.448-1,1v12c0,0.552,0.448,1,1,1h24c0.552,0,1-0.448,1-1V5C54,4.448,53.552,4,53,4z M52,16H30V6h22 V16z"/> <path class="brick" d="M53,36H29c-0.552,0-1,0.448-1,1v12c0,0.552,0.448,1,1,1h24c0.552,0,1-0.448,1-1V37C54,36.448,53.552,36,53,36z M52,48H30 V38h22V48z"/> <path class="brick" d="M14,21v12c0,0.552,0.448,1,1,1h24c0.552,0,1-0.448,1-1V21c0-0.552-0.448-1-1-1H15C14.448,20,14,20.448,14,21z M16,22h22 v10H16V22z"/> <path class="brick" d="M1,34h10c0.552,0,1-0.448,1-1V21c0-0.552-0.448-1-1-1H1c-0.552,0-1,0.448-1,1v12C0,33.552,0.448,34,1,34z M2,22h8v10H2V22 z"/> <path class="brick" d="M53,20H43c-0.552,0-1,0.448-1,1v12c0,0.552,0.448,1,1,1h10c0.552,0,1-0.448,1-1V21C54,20.448,53.552,20,53,20z M52,32h-8 V22h8V32z"/> </g> </g> </svg>
+                        </div>
+                        <div style="position: relative; left:270px;top:400px;font-size: 2em;">
+                            <img style="width: 500px;"  src="./img/brand.png">
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </article>
+        <article class="slide">
+            <div class="container">
+                <div class="row">
+                    <div class="col-xs-6" align="center">
+                        <img src="img/brand.png" width="350px" class="brand">
+                    </div>
+                    <div class="col-xs-6">
+                        <p class="bio-text">forums</p>
+                    </div>
+                </div>
+            </div>
+        </article>
+        <article class="slide">
+            <div class="container">
+                <div class="row">
+                    <div class="col-xs-6">
+                        <p class="bio-text">share your experience</p>
+                    </div>
+                    <div class="col-xs-6" align="center">
+                        <img src="img/brand.png" width="350px" class="brand">
+                    </div>
+                </div>
+            </div>
+        </article>
+        <article class="slide">
+            <div class="container">
+                <div class="row">
+                    <div class="col-xs-6" align="center">
+                        <img src="img/brand.png" width="350px" class="brand">
+                    </div>
+                    <div class="col-xs-6">
+                        <p class="bio-text">search biobricks</p>
+                    </div>
+                </div>
+            </div>
+        </article>
+        <article class="slide">
+            <div class="container">
+                <div class="row">
+                    <div class="col-xs-6">
+                        <p class="bio-text">a lot more plugins</p>
+                    </div>
+                    <div class="col-xs-6" align="center">
+                        <img src="img/brand.png" width="350px" class="brand">
+                    </div>
+                </div>
+            </div>
+        </article>
+    </div>
+</section>
-<div class="column full_size" >
+<script>
-<h1> Welcome to USTC-Software iGEM 2017! </h1>
+  var fss
-</div>
+  $(function () {
+    fss = new ddfullscreenslider({
+      sliderid: 'dowebok'
+    })
+  })
+</script>
-<div class="column full_size" >
+<style>
-<h2>Project Description </h2>
+    html {
-<p>
+        overflow-x: hidden;
-Welcome to BioHub 2.0! This is an open and fantastic platform with practical functions for synthetic biologists. For scientists whose goal is to make discoveries in biology, steps using bioinformatics can be seen the most basic but rather troublesome part. To solve this, our team created BioHub in 2016, and we improved it this year.
+        font-size: 625%;
+    }
+    body {
+        min-width: 1020px;
+    }
+    .graphic-one {
+        margin-left:auto;
+        margin-right: auto;
+        width: 1020px;
+    }
+</style>
+<script>
+var pageColors = ["#3498db", "white", "white", "white", "white"]
-BioHub 2.0 is a platform with several plug-ins, which means that users can not only employ the functions we provide, but also develop new and useful ones which can meet their special needs, without caring for servers and network transmission. Others include iGemer forum, in which teams participating in the competition can communicate with each other, abacus 2.0, which could design amino acid sequence from the .pdb file provided by user, image processing, which can analyze the experimental results by the RGB of image, and other splendid functions.
+var ddfullscreenslider = (function($){
-The following is the introduction to some project module:
+	document.createElement('section')
-</p>
+	document.createElement('article')
-<h3>
-.	Forum
-</h3>
-<p>
-In order to make communication in BioHub easier, we designed the 'Forum' feature to provide users an area to communicate, view others' projects and write comments on them. They are also able to share different ideas and generate new thoughts.
-In Forum, users can write, edit and remove his comments freely just like operating on any other forums. They will harvest enlightenment as well as fun.
-</p>
-<h3>
-.	BioBrick manager
-</h3>
-<p>
-The iGEM Registry has over 20,000 documented parts organized by type, chassis, function and more. Recognizing that this is a great asset in the field of synthetic biology, we believe that it is necessary to let users explore BioBricks on BioHub. As a result, this function was implemented as an official plugin for BioHub. Users can search for BioBricks they desire and easily browse all the information about the searching results.
-</p>
-<h3>
-.	ABACUS
-</h3>
-<p>
-A plugin design to design amino acid sequence from the .pdb file provided by user. The uploaded .pdb file will be evaluated by several progress, with support of simulated annealing algorithm, then the server will generate a .zip file containing several .pdb files and .fasta files for user to download. It’s recommended to run this plugin on a high performance server, because the plugin will invoke computationally intensive programs. So please be patient while this plugin is running, it may take several hours to get results on a high performance server. You can press get status button to check if the calculation is done.
-</p>
-<h3>
-.	Image processing
-</h3>
-<p>
-In order to help wet students to complete the image processing work quickly, we created the image processing module. In this module, the user can get a series of information, including chemical element, which is converted from the experimental image.
-</p>
-<h3>
-.	Plugins
-</h3>
-<p>
-The great thing about BioHub is that we have designed a unified, extensible plugin platform, which not only have the powerful tools provided by the development team, but also is easy to learn and use by other developers to provide better features. Each specific feature of BioHub is provided by a plugin, whose developer do not need to care about details such as server and network requests. Plugins can just focus on performing their own tasks and manage user's design results. With BioHub’s plugin platform, once any of the latest tools or algorithms in the field of synthetic biology got programmed, developers can easily transform it into a BioHub plugin by studying the sample files we provide, making it a new blade of the powerful Swiss Saber - BioHub.
-</p>
-</div>
+	var defaults = {
+		addHash: true,
+		sliderstate: 'open', // reserved for future use
+		keycodeNavigation: [40, 38], // keyCode codes for down and up naivagion, respectively
+		transitionDuration: '0.5s',
+		swipeconfig: {peekamount: 100, mousedrag: true},
+		onslide: function($slide, index){
+			console.log(index)
+      var nav = document.getElementById("nav")
+      var options = document.getElementsByClassName("navbar-nav")[0]
+			nav.style.backgroundColor = pageColors[index]
+			var list = options.classList
+			list.forEach(function (x) {
+					if (x.startsWith("page-"))
+						list.remove(x)
+			})
+			options.classList.add("page-" + (index + 1))
+		}
+	}
+	var transformprop = '' // variable to contain browser supported version of "transform" property
+	function supportstranslate3d(){ // based on http://stackoverflow.com/a/12621264/4360074
+	  if (!window.getComputedStyle) {
+	      return false;
+	  }
+	  var $el = $('<div style="position:absolute" />').appendTo(document.body)
+	  var has3d
+		$el.css('transform', 'translate3d(1px,1px,1px)')
+		has3d = $el.css('transform')
+		var findtransformprop = $el.get(0).style.cssText.match(/(\w|\-)*transform/i) // get "-vendor-transform" portion of CSS Text
+		transformprop = (findtransformprop)? findtransformprop[0] : 'transform'
+	  $el.remove()
+	  return (has3d !== undefined && has3d.length > 0 && has3d !== "none");
+	}
+	var $window = $(window)
+	var $root =  $('html')
+	function ddfullscreenslider(setting){
+		var translatesupport = supportstranslate3d()
+		var s = $.extend({}, defaults, setting)
+		var $slider = $('#' + s.sliderid)
+		var $wrapper = $slider.find('div.slidewrapper').css({transitionDuration: s.transitionDuration})
+		var $slides = $()
+		var slideslength = 0
+		var $nav = $()
+		var thisslider = this
+		var selectedindx = 0
+		var hasharray = []
+		var mouseslidetimer
+		var swipeevts = {start:"", move:"", end:""}, swipestart = false, dy = 0, bounds = [,], scrollableclass = 'scrollable', bypassdrag = false
+		var initialrun= true // indicate whether this is first time slider has run. After page loads, variable becomes false
+		if (!translatesupport){
+			s.transitionDuration = parseFloat(s.transitionDuration) * 1000
+		}
+		/** Function to call always after a slide is shown */
+		function onslidealways($slide, index){
+			if (!initialrun && s.addHash){
+				var newhash = $nav.find('li').eq(selectedindx).find('a:eq(0)').attr('href')
+				if (history.replaceState){
+					history.replaceState(null, null, newhash)
+				}
+				else{
+					window.location.hash = newhash
+				}
+			}
+      s.onslide($slide, index) // user defined event handler
+		}
+		function hashtoselectedslide(hash){
+			for (var i=0; i<hasharray.length; i++){
+				if (hasharray[i][0] == hash){
+					return i
+					break
+				}
+			}
+			return 0
+		}
+		function applybounds(val, swipedir){
+			if (swipedir == "down"){
+				return (translatesupport)? Math.max(-parseInt(bounds[1]), val) : Math.max(-bounds[1], val)
+			}
+			else{
+				return (translatesupport)? Math.min(bounds[0], val) : Math.min(bounds[0], val)
+			}
+		}
+		function isscrollable($target){ // check element finger is on is contained inside a "scrollable" element that's actually scrollable (scrollHeight exceeds container height)
+			var $scrollel = $target.closest('.' + scrollableclass)
+			var scrollel
+			if ($scrollel.length == 1){
+				scrollel = $scrollel.get(0)
+				if (scrollel.offsetHeight < scrollel.scrollHeight){
+					return true
+				}
+			}
+			return false
+		}
+		/** Mousewheel and keyboard scroll related code. Requires jquery.mousewheel.min.js **/
+		function mouseslide(deltaY){
+			var targetindx = selectedindx
+			if (deltaY < 0) // mouse down
+				var targetindx = Math.min(slideslength-1, selectedindx+1)
+		  else if (deltaY > 0)
+				var targetindx = Math.max(0, selectedindx-1)
+			if (targetindx != selectedindx)
+				thisslider.slideTo(targetindx)
+		}
+		$slider.on('mousewheel', function(event){
+			clearTimeout(mouseslidetimer)
+			var deltaY = event.deltaY
+			mouseslidetimer = setTimeout(function(){
+				mouseslide(deltaY)
+			}, 100)
+			return false
+		})
+		$(document).on('keyup', function(e){
+			var targetindx = selectedindx
+			if (e.keyCode == s.keycodeNavigation[0]) // key to go to next slide
+				var targetindx = Math.min(slideslength-1, selectedindx+1)
+			else if (e.keyCode == s.keycodeNavigation[1]) // key to go to previous slide
+				var targetindx = Math.max(0, selectedindx-1)
+			if (targetindx != selectedindx)
+			{
+				thisslider.slideTo(targetindx)
+      }
+		})
+		/** Swipe/ Mouse Drag scroll related code **/
+		swipeevts.start = 'touchstart' + (s.swipeconfig.mousedrag? ' mousedown' : '')
+		swipeevts.move = 'touchmove.dragmove' + s.sliderid + (s.swipeconfig.mousedrag? ' mousemove.dragmove' + s.sliderid : '')
+		swipeevts.end = 'touchend' + (s.swipeconfig.mousedrag? ' mouseup' : '')
+		if (s.swipeconfig.mousedrag){
+			$wrapper.bind('click', function(e){
+				if ($wrapper.data('dy') != 0) // if dragging on belt instead of clicking on it
+					e.preventDefault() // prevent default action
+			})
+		}
+  	$wrapper.bind(swipeevts.start, function(e){
+			bypassdrag = false
+  		var e = (e.type.indexOf('touch') != -1)? e.originalEvent.changedTouches[0] : e
+			if ( isscrollable( $(e.target) ) ){ // if target is contained inside a "scrollable" element
+				bypassdrag = true
+				return
+			}
+			swipestart = true
+			var mousey = e.pageY
+			dy = 0 // reset swipe amount
+			if (translatesupport){
+				$wrapper.css({transition: 'none'})
+			}
+			var initialy = -$window.outerHeight() * selectedindx
+			$wrapper.data({dy: dy})
+  		$(document).bind(swipeevts.move, function(e){
+				if (bypassdrag){
+					return
+				}
+  			var e = (e.type.indexOf('touch') != '-1')? e.originalEvent.changedTouches[0] : e
+  			dy=e.pageY-mousey //distance to move horizontally
+				var newy=initialy+dy
+				newy = applybounds(newy, (dy < 0)? 'down' : 'up')
+				if (translatesupport){
+					$wrapper.css('transform', 'translate3d(0, ' + newy + 'px, 0)')
+				}
+				else{
+	  			$wrapper.css('top', newy)
+				}
+				$wrapper.data({dy: dy})
+  			return false //cancel default drag action
+  		})
+			if (e.type == "mousedown")
+  			return false //cancel default drag action
+  	})
+  	$(document).bind(swipeevts.end, function(e){
+  		$(document).unbind(swipeevts.move)
+			if (!swipestart || bypassdrag)
+				return
+			if (dy != 0){ // if actual swipe has occured
+				if (dy < 0 && dy < -s.swipeconfig.peekamount) // if swipe down and more than peek amount
+					var targetindx = Math.min(slideslength-1, selectedindx+1)
+				else if (dy > 0 && dy > s.swipeconfig.peekamount) // if swipe up and more than peek amount
+					var targetindx = Math.max(0, selectedindx-1)
+				else
+					targetindx = selectedindx
+				thisslider.slideTo(targetindx)
+				if (e.type == "mouseup")
+					return false
+			}
+			swipestart = false
+  	})
+		/** CSS3 transition ontransitionend event  set up */
+		$wrapper.on('transitionend webkitTransitionEnd', function(e){
+			if (/transform/i.test(e.originalEvent.propertyName)){ // check event fired on "transform" prop
+				// onslidealways($slides.eq(selectedindx), selectedindx)
+			}
+		})
+		/** Public functions **/
+		this.reloadSlides = function(){
+			$nav.remove()
+			hasharray = []
+			$nav = $('<ul class="fssnav" />')
+			$slides = $('article.slide').each(function(i){
+				var $curslide = $(this)
+				var anchorval = $curslide.attr('id') || 'slide' + (i+1)
+				anchorval = "#" + anchorval
+				hasharray.push([anchorval, i])
+				var title = $curslide.data('title') || anchorval
+				var $navli = $('<li><a href="' + anchorval +'" title="' + title +'">' + (i + 1) + '</a></li>').appendTo($nav)
+				var $navlink = $navli.find('a:eq(0)')
+				$navli.on('click touchstart', function(e){
+					thisslider.slideTo(i)
+				})
+			})
+			$nav.on('click touchstart touchend', function(e){
+  			var e = (e.type.indexOf('touch') != '-1')? e.originalEvent.changedTouches[0] : e
+				return false
+			}).appendTo($slider)
+			slideslength = $slides.length
+			bounds = [0, $window.outerHeight() * (slideslength-1)]
+		}
+		this.openSlider = function(){
+			initialrun = false
+			bypassdrag = false
+			s.sliderstate = 'open'
+			$root.addClass('fssopen')
+			$slider.css('visibility', 'visible')
+		}
+		this.closeSlider = function(){
+			s.sliderstate = 'close'
+			bypassdrag = true
+			$root.removeClass('fssopen')
+			$slider.css({visibility:'hidden'})
+		}
+		this.slideTo = function(indx, noanimation){
+      onslidealways($slides.eq(selectedindx), indx)
+			var newy = $window.outerHeight() * indx
+			$nav.find('li').eq(selectedindx).removeClass('selected')
+			$nav.find('li').eq(indx).addClass('selected')
+			selectedindx = indx
+			if (translatesupport){
+				$wrapper.css({transition: (noanimation)? 'none' : transformprop + ' ' + s.transitionDuration})
+				$wrapper.css('transform', 'translate3d(0, -' + newy + 'px, 0)')
+				if (noanimation){ // run callback immediately
+					onslidealways($slides.eq(selectedindx), selectedindx)
+				}
+			}
+			else{
+				$wrapper.stop().animate({top: -newy}, (noanimation)? 0 : s.transitionDuration, function(){
+					onslidealways($slides.eq(selectedindx), selectedindx)
+				})
+			}
+		}
+		/** Initialize and show slider **/
+		this.reloadSlides()
+		selectedindx = hashtoselectedslide(window.location.hash)
+		this.slideTo(selectedindx, true)
+		if (s.sliderstate == 'open'){
+			this.openSlider()
+		}
+		$(window).on('resize', function(){
+			thisslider.slideTo(selectedindx, true)
+			bounds = [0, $window.outerHeight() * (slideslength-1)]
+		})
+	} // end fullscreenslider def
+	return ddfullscreenslider
+})(jQuery)
+</script>
+</body>
 </html>