Difference between revisions of "Team:Hong Kong HKU/Protocol"
Louislo3412 (Talk | contribs) (Safety Pills added) |
Louislo3412 (Talk | contribs) (test) |
||
| Line 82: | Line 82: | ||
<li><a data-toggle="pill" href="#Safety">Safety</a></li> | <li><a data-toggle="pill" href="#Safety">Safety</a></li> | ||
</ul> | </ul> | ||
| + | |||
| + | <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="-2 -2 504 504" id="menu" style="transform-origin: 50% 50% 0px; transform: translate3d(0px, 0px, 0px); touch-action: none; -webkit-user-select: none;"> | ||
| + | <style>#menu{display:block;margin:0 auto;}a{cursor:pointer;outline:none;}.item .sector{transition:all .1s linear;fill:#fff;stroke:#111;}.item:hover .sector,.item:focus .sector{fill:#eee;}.menu-trigger{fill:#EA2A55;pointer-events:auto;}.menu-trigger:hover,.menu-trigger:focus{cursor:pointer;}symbol{overflow:visible;}</style> | ||
| + | <g id="symbolsContainer"> <symbol class="icon icon-" id="icon-1" viewBox="0 0 40 40"><!--Replace the contents of this symbol with the content of your icon--><rect fill="none" stroke="#111" stroke-width="1" width="100%" height="100%"></rect><text fill="#222" x="50%" y="50%" dy=".3em" text-anchor="middle" font-size="1.2em">1</text></symbol> | ||
| + | |||
| + | <symbol class="icon icon-" id="icon-2" viewBox="0 0 40 40"><!--Replace the contents of this symbol with the content of your icon--><rect fill="none" stroke="#111" stroke-width="1" width="100%" height="100%"></rect><text fill="#222" x="50%" y="50%" dy=".3em" text-anchor="middle" font-size="1.2em">2</text></symbol> | ||
| + | |||
| + | <symbol class="icon icon-" id="icon-3" viewBox="0 0 40 40"><!--Replace the contents of this symbol with the content of your icon--><rect fill="none" stroke="#111" stroke-width="1" width="100%" height="100%"></rect><text fill="#222" x="50%" y="50%" dy=".3em" text-anchor="middle" font-size="1.2em">3</text></symbol> | ||
| + | |||
| + | <symbol class="icon icon-" id="icon-4" viewBox="0 0 40 40"><!--Replace the contents of this symbol with the content of your icon--><rect fill="none" stroke="#111" stroke-width="1" width="100%" height="100%"></rect><text fill="#222" x="50%" y="50%" dy=".3em" text-anchor="middle" font-size="1.2em">4</text></symbol> | ||
| + | |||
| + | <symbol class="icon icon-" id="icon-5" viewBox="0 0 40 40"><!--Replace the contents of this symbol with the content of your icon--><rect fill="none" stroke="#111" stroke-width="1" width="100%" height="100%"></rect><text fill="#222" x="50%" y="50%" dy=".3em" text-anchor="middle" font-size="1.2em">5</text></symbol> | ||
| + | |||
| + | <symbol class="icon icon-" id="icon-6" viewBox="0 0 40 40"><!--Replace the contents of this symbol with the content of your icon--><rect fill="none" stroke="#111" stroke-width="1" width="100%" height="100%"></rect><text fill="#222" x="50%" y="50%" dy=".3em" text-anchor="middle" font-size="1.2em">6</text></symbol> | ||
| + | |||
| + | <symbol class="icon icon-" id="icon-7" viewBox="0 0 40 40"><!--Replace the contents of this symbol with the content of your icon--><rect fill="none" stroke="#111" stroke-width="1" width="100%" height="100%"></rect><text fill="#222" x="50%" y="50%" dy=".3em" text-anchor="middle" font-size="1.2em">7</text></symbol> | ||
| + | |||
| + | <symbol class="icon icon-" id="icon-8" viewBox="0 0 40 40"><!--Replace the contents of this symbol with the content of your icon--><rect fill="none" stroke="#111" stroke-width="1" width="100%" height="100%"></rect><text fill="#222" x="50%" y="50%" dy=".3em" text-anchor="middle" font-size="1.2em">8</text></symbol> | ||
| + | |||
| + | </g> | ||
| + | <g id="itemsContainer"> <a class="item" id="item-1" role="link" tabindex="0" xlink:href=" " xlink:title=" " transform="matrix(1,0,0,1,0,0)" data-svg-origin="250 250" style=""><path fill="none" stroke="#111" d="M375,250 l125,0 A250,250 0 0,0 426.7766952966369,73.22330470336314 l-88.38834764831842,88.38834764831844 A125,125 0 0,1 375,250" class="sector"></path><use xlink:href="#icon-1" width="40" height="40" x="387.05950927734375" y="164.94381713867188" transform="rotate(67.5 407.05950927734375 184.94381713867188)"></use></a> | ||
| + | <a class="item" id="item-2" role="link" tabindex="0" xlink:href=" " xlink:title=" " transform="matrix(0.7071,-0.7071,0.7071,0.7071,-103.55339059327378,249.99999999999997)" data-svg-origin="250 250" style=""><path fill="none" stroke="#111" d="M375,250 l125,0 A250,250 0 0,0 426.7766952966369,73.22330470336314 l-88.38834764831842,88.38834764831844 A125,125 0 0,1 375,250" class="sector"></path><use xlink:href="#icon-2" width="40" height="40" x="387.05950927734375" y="164.94381713867188" transform="rotate(67.5 407.05950927734375 184.94381713867188)"></use></a> | ||
| + | <a class="item" id="item-3" role="link" tabindex="0" xlink:href=" " xlink:title=" " transform="matrix(0,-1,1,0,0,500)" data-svg-origin="250 250" style=""><path fill="none" stroke="#111" d="M375,250 l125,0 A250,250 0 0,0 426.7766952966369,73.22330470336314 l-88.38834764831842,88.38834764831844 A125,125 0 0,1 375,250" class="sector"></path><use xlink:href="#icon-3" width="40" height="40" x="387.05950927734375" y="164.94381713867188" transform="rotate(67.5 407.05950927734375 184.94381713867188)"></use></a> | ||
| + | <a class="item" id="item-4" role="link" tabindex="0" xlink:href=" " xlink:title=" " transform="matrix(-0.7071,-0.7071,0.7071,-0.7071,249.99999999999997,603.5533905932738)" data-svg-origin="250 250" style=""><path fill="none" stroke="#111" d="M375,250 l125,0 A250,250 0 0,0 426.7766952966369,73.22330470336314 l-88.38834764831842,88.38834764831844 A125,125 0 0,1 375,250" class="sector"></path><use xlink:href="#icon-4" width="40" height="40" x="387.05950927734375" y="164.94381713867188" transform="rotate(67.5 407.05950927734375 184.94381713867188)"></use></a> | ||
| + | <a class="item" id="item-5" role="link" tabindex="0" xlink:href=" " xlink:title=" " transform="matrix(-1,0,0,-1,500,500)" data-svg-origin="250 250" style=""><path fill="none" stroke="#111" d="M375,250 l125,0 A250,250 0 0,0 426.7766952966369,73.22330470336314 l-88.38834764831842,88.38834764831844 A125,125 0 0,1 375,250" class="sector"></path><use xlink:href="#icon-5" width="40" height="40" x="387.05950927734375" y="164.94381713867188" transform="rotate(67.5 407.05950927734375 184.94381713867188)"></use></a> | ||
| + | <a class="item" id="item-6" role="link" tabindex="0" xlink:href=" " xlink:title=" " transform="matrix(-0.7071,0.7071,-0.7071,-0.7071,603.5533905932738,250.00000000000006)" data-svg-origin="250 250" style=""><path fill="none" stroke="#111" d="M375,250 l125,0 A250,250 0 0,0 426.7766952966369,73.22330470336314 l-88.38834764831842,88.38834764831844 A125,125 0 0,1 375,250" class="sector"></path><use xlink:href="#icon-6" width="40" height="40" x="387.05950927734375" y="164.94381713867188" transform="rotate(67.5 407.05950927734375 184.94381713867188)"></use></a> | ||
| + | <a class="item" id="item-7" role="link" tabindex="0" xlink:href=" " xlink:title=" " transform="matrix(0,1,-1,0,500.00000000000006,0)" data-svg-origin="250 250" style=""><path fill="none" stroke="#111" d="M375,250 l125,0 A250,250 0 0,0 426.7766952966369,73.22330470336314 l-88.38834764831842,88.38834764831844 A125,125 0 0,1 375,250" class="sector"></path><use xlink:href="#icon-7" width="40" height="40" x="387.05950927734375" y="164.94381713867188" transform="rotate(67.5 407.05950927734375 184.94381713867188)"></use></a> | ||
| + | <a class="item" id="item-8" role="link" tabindex="0" xlink:href=" " xlink:title=" " transform="matrix(0.7071,0.7071,-0.7071,0.7071,250.00000000000009,-103.55339059327378)" data-svg-origin="250 250" style=""><path fill="none" stroke="#111" d="M375,250 l125,0 A250,250 0 0,0 426.7766952966369,73.22330470336314 l-88.38834764831842,88.38834764831844 A125,125 0 0,1 375,250" class="sector"></path><use xlink:href="#icon-8" width="40" height="40" x="387.05950927734375" y="164.94381713867188" transform="rotate(67.5 407.05950927734375 184.94381713867188)"></use></a> | ||
| + | </g> | ||
| + | <g id="trigger" class="trigger menu-trigger" role="button"> | ||
| + | <circle cx="250" cy="250" r="30"></circle> | ||
| + | |||
| + | </g> | ||
| + | </svg> | ||
| + | |||
</div> | </div> | ||
Revision as of 07:31, 26 September 2016
