提交 ed7c546b 编写于 作者: K Kamran Ahmed

Update demo

上级 1d8f00b6
demo/images/driver.png

27.6 KB | W: | H:

demo/images/driver.png

45.0 KB | W: | H:

demo/images/driver.png
demo/images/driver.png
demo/images/driver.png
demo/images/driver.png
  • 2-up
  • Swipe
  • Onion skin
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="512px" height="512px" viewBox="0 0 512 512" enable-background="new 0 0 512 512" xml:space="preserve">
<g>
<g>
<g>
<path fill="#C56528" d="M246.5,197.8c-2.3-16.2-4.8-32.4-8.1-48.4c-3.2-15.1-7.2-30.1-9.2-45.4c-1.9-14.3-1-29.7-6.9-43.2
c-2.1-4.8-5.7-12.1-11.7-12.8c-4.9-0.5-8.6,4.1-10.7,7.9c-5.7,10.8-5.3,23.5-3.1,35.2c1.5,7.7,4.1,15.3,6.1,22.9
c1.9,7.3,3.6,14.6,5,21.9c6.1,30.1,19.4,58.2,28.3,87.5c4.1-1.8,8.5-3.1,13-4C248.8,212.3,247.5,205,246.5,197.8z"></path>
</g>
</g>
<g>
<g>
<path fill="#C56528" d="M214.6,246.3c-1.3,0.6-2.9,0.6-4.6-0.4c-5.5-3.3-10.9-6.8-16.1-10.6c-12.4-8.8-24.2-18.5-37-26.7
c-12.7-8.1-26.8-14.2-39.8-22c-11.7-7-24.1-15.1-37.5-18.4c-4.9-1.2-12.2-3-16.9,0c-5,3.3-3.8,8.1-0.5,12.3
c7.4,9.5,20.1,14.8,31.1,18.8c12.5,4.6,25.5,8,37.8,13.2c13.8,5.7,26.9,13,40.5,19.1c13.8,6.2,27.7,12.3,41,19.5
c0.6-1.1,1.3-2.1,2-3.1C214.5,247.5,214.5,246.9,214.6,246.3z"></path>
</g>
</g>
<g>
<g>
<path fill="#C56528" d="M191.5,114c-1.2-4.4-2.5-8.8-3.6-13.2c-9.1,3.8-17.9,8.2-26.1,13.7c-16.9,11.1-31.4,25.5-44.7,40.6
c-0.2,0.3-0.4,0.7-0.6,1c-3.3,4-6.5,8-9.6,12c7.5,4.1,14.8,8.5,22.2,12.8c2.8-3.9,5.7-7.8,8.8-11.5c5.6-6.7,11.4-13.3,17.6-19.7
c3.5-2.4,6.8-5,9.9-7.8c0.6-0.4,1.2-0.8,1.8-1.2c2.6-1.9,5.4-3.8,8.2-5.5c6.5-2.6,13-5.1,19.6-7.4
C193.8,123.2,192.7,118.6,191.5,114z"></path>
</g>
</g>
<g>
<g>
<path fill="#C56528" d="M373.7,62.3c-4.1-8.7-21.5,8.8-24.4,11.9c-17.9,19.2-22.2,46.1-31.4,69.8c-5.2,13.5-12.5,26.2-19.1,39.1
c-6.5,12.6-12.6,25.4-17.6,38.7c2.3,0.7,4.5,1.6,6.7,2.5c12-18.7,24.4-37.2,36.3-56.1c15-24,31.5-48.2,42.6-74.3
c2.5-6,5-12.1,6.5-18.5C374.2,71.5,375.5,66.3,373.7,62.3z"></path>
</g>
</g>
<g>
<g>
<path fill="#C56528" d="M304.4,249.8c-3.9-4.9-8.7-9.2-14.1-12.5c-2.6,0.4-5.4-1.1-6.3-3.4c-1.4-0.6-2.8-1.2-4.2-1.7
c-14.4-5-37.2-4.9-49,6.8c0.3,0.3,0.5,0.7,0.7,1c-3.4,2.8-6.1,7-8.3,10.6c-2.1,3.4-4.7,7.9-4.4,12.2c-5.4,13.9-3.5,29.9,8,41.6
c13.2,13.4,33.2,17.8,51.2,12.4c17.6-5.2,32.2-19.7,34-38.6C312.9,268,311,258,304.4,249.8z"></path>
</g>
</g>
<g>
<g>
<path fill="#C56528" d="M370.8,111.3c-3.9,7.6-8.2,15.1-12.6,22.5c5.2,3.3,10.3,6.9,15.1,10.8c18.6,15.2,33.2,34.4,43.3,55.7
c7.9-2.7,15.8-5.5,23.9-7.9C425.6,159.3,402,130.2,370.8,111.3z"></path>
</g>
</g>
<g>
<g>
<path fill="#C56528" d="M238.6,87.3c0.9,9.2,1.8,18.4,3.3,27.6c9-1.7,18.2-2.8,27.4-3.3c15.8-0.8,31.5,0.6,46.6,4.4
c2.7-8.2,5.6-16.3,9.2-23.9C297.1,84.4,267.2,83.2,238.6,87.3z"></path>
</g>
</g>
<g>
<g>
<path fill="#C56528" d="M94.5,271c1.4-19,6.3-37.5,14-54.8c-8.7-2.8-17.5-5.5-25.9-9.1c-8.1,17.8-13.4,37-15.1,56.5
c-1.6,17.9-1.7,36,1.1,53.7c0.6-0.1,1.1-0.2,1.7-0.4c7.9-1.7,16-2.5,23.9-4.2c1-0.2,2.1-0.5,3.1-0.7
C94.5,298.6,93.5,284.8,94.5,271z"></path>
</g>
</g>
<g>
<g>
<path fill="#C56528" d="M455.2,240.2c-5.9,1.1-11.8,1.8-17.6,3.2c-2.4,0.6-4.7,1.2-7.1,1.9c0.7,4.5,1.3,9.1,1.6,13.7
c1.8,25-2.2,49.9-11.2,72.9c8.8,2.4,17.7,4.8,26,8.2C457.7,307.8,460.9,273.6,455.2,240.2z"></path>
</g>
</g>
<g>
<g>
<path fill="#C56528" d="M396.1,375.2c-2.2,2.8-4.6,5.6-7,8.4c-15.2,17-33.7,30.8-54.1,40.7c4.4,11,9.7,21.6,13.6,32.7
c0.1,0.4,0.3,0.8,0.4,1.2c1.7-0.8,3.3-1.6,5-2.5c28.2-15,51.5-38.1,68.8-65C413.4,386.5,404.5,381,396.1,375.2z"></path>
</g>
</g>
<g>
<g>
<path fill="#C56528" d="M479.1,200.2c-8.6-4.2-19.7-1.8-28.5,0.8c-15.4,4.5-30.5,9.7-45.7,14.9c-30.1,10.2-61.1,17.8-90.7,29.8
c2.3,3.4,4.2,7,5.6,10.9c0.2,0.7,0.5,1.3,0.7,2c4.6-0.9,9.3-1.8,13.9-2.7c16-2.9,32.1-5.3,48-8.8c15.6-3.4,30.6-8.5,46-12.6
c14.8-3.9,30.8-4,44-12.6C478.7,217.8,490.5,205.8,479.1,200.2z"></path>
</g>
</g>
<g>
<g>
<path fill="#C56528" d="M458.5,359.8c-18.9-15.9-45-15.8-66.7-25.9c-24.8-11.6-46.8-29.5-73.7-36.6c-0.4-0.1-0.7-0.2-1-0.4
c-1,2.2-2.2,4.2-3.5,6.2c16.6,10.7,32.8,21.9,48.8,33.5c22.5,16.4,44.2,36,70.5,46.3c6.1,2.4,12.5,4.4,19,5.2
c4.5,0.5,11,1.3,15.1-1.3C477.3,380.1,464.7,364.9,458.5,359.8z"></path>
</g>
</g>
<g>
<g>
<path fill="#C56528" d="M146.3,397.5c-13.8-12.5-25.3-27.4-33.9-43.8c-2.8,1.2-5.6,2.5-8.4,3.9c-6,3-12,6.1-18.2,8.8
c4.7,8.3,10.3,16.1,16.7,23.4c14.7,16.6,32.3,30.2,51.4,41.4c2.8-5.5,5.8-10.8,9-16c0.6-1,1.3-2,2-3
C158.3,407.6,152.1,402.8,146.3,397.5z"></path>
</g>
</g>
<g>
<g>
<path fill="#C56528" d="M335.3,453.7c-6.3-14-12.5-28-16.4-42.9c-7.9-29.9-16.6-59.3-26.7-88.5c-4.1,2.2-8.5,3.9-13.1,5.1
c0.1,1.7,0.2,3.3,0.3,5c2.4,31.9,10.7,62.8,17.1,94c1.6,7.9,3.2,15.9,4.5,23.9c1,6.4,1.4,13.1,3.7,19.2c0.2,0.4,0.3,0.8,0.5,1.2
c0.4,0,0.7-0.1,1.1-0.1l1.1,4.4c5.2,8.6,14.7,16.1,24.9,11.3C345.5,480.2,339.7,463.5,335.3,453.7z"></path>
</g>
</g>
<g>
<g>
<path fill="#C56528" d="M208.9,296.3c-1.3-3.2-2.2-6.4-2.8-9.7c-9.7,3.5-19.6,6.6-29.6,9.6c-15.2,4.6-30.5,9.5-45.3,15.3
c-14.6,5.8-28.6,11-44.2,13.5c-12.3,2-26.8,3.5-37.2,11c-4.5,3.2-9.6,8.4-9,14.5c0.5,5.2,4.6,9.3,9.7,10.6
c12.9,3.2,26.6-2.6,38.1-8.2c12.5-6,24.4-12,37.5-16.4c29.2-9.8,56.1-25.3,85.7-34.1C210.8,300.4,209.8,298.4,208.9,296.3z"></path>
</g>
</g>
<g>
<g>
<path fill="#C56528" d="M228.2,319.2c-5.1,4.9-8.1,11.6-10.7,18c-5.2,13-10.6,25.9-16.7,38.5c-3.4,7-7.1,13.8-11.4,20.3
c-3.7,5.7-8.2,11-11.9,16.7c-8,12-15.4,24.7-20.5,38.3c-2,5.3-4.9,11.8-4.1,17.6c0.6,4.8,4.9,8,9.9,6.5
c12.5-3.8,19.6-19.1,25.3-29.7c7.2-13.4,13.6-27.5,17.8-42.2c3.9-13.8,7.4-27.3,12.9-40.6c5.4-13.1,11.4-25.9,15.5-39.5
c0-0.1,0.1-0.2,0.1-0.4C232.2,321.7,230.1,320.5,228.2,319.2z"></path>
</g>
</g>
<g>
<g>
<path fill="#C56528" d="M292,464.1c-1.6-8.2-2.9-16.4-4.3-24.6c-6,1-12.1,1.7-18.2,2c-21.3,1.2-42.8-2-63-8.9
c-1.2,2.7-2.4,5.3-3.7,7.9c-1.9,3.8-3.8,7.8-5.9,11.8c7.8,3.2,15.8,6.1,23.9,8.7c23.7,7.5,48.7,11.8,73.2,10.6
C293.1,469.2,292.4,466.7,292,464.1z"></path>
</g>
</g>
<g>
<g>
<path d="M486,191.6c-8.6-5.6-19.8-5-29.4-3.2c-2.4,0.4-4.8,1-7.1,1.5c-13.9-31.5-35.5-59.7-63.6-79.8c-3.6-2.6-7.2-4.9-11-7.2
c3.3-7.2,6.2-14.5,8.4-22.2c2.7-9.1,4.2-20.4-3.1-27.8c-8.4-8.4-21.9-1.1-29.3,4.8c-9.3,7.3-16.1,16.2-21.5,25.9
c-25.8-7.1-53.2-9.1-80-6.8c-3.9,0.3-7.8,0.8-11.7,1.3c-1.5-12.2-4.7-25.3-13.2-34.3c-7.6-8-19.1-9.2-27.6-1.9
c-9.2,8-12.2,20.9-12.7,32.6c-0.2,5.8,0.4,11.5,1.5,17.1c-6.1,2.5-12,5.2-17.8,8.3c-24.2,13-43.9,32.7-61.6,53.4
c-0.4,0.5-0.7,1-0.9,1.6c-2.4,2.9-4.7,5.8-7,8.8c-10.1-4.9-21.7-9.1-33-7.6c-11.9,1.5-19.8,11.8-16.1,23.6
c3.4,11,15.2,18.2,24.7,23.2c0.1,0.1,0.3,0.1,0.4,0.2c-2.2,4.7-4.2,9.6-6,14.4c-8.6,23.3-11.6,48.4-11.3,73.2
c0.1,9.7,1,19.3,2.6,28.8c-7.7,2.4-15,5.9-21.2,11.6c-8.7,8-11.5,21.1-4.7,31.1c7.1,10.4,21.2,11.8,32.6,9.9
c3.5-0.6,7-1.5,10.4-2.5c8.5,15.1,19.8,28.5,32.4,40.2c12.3,11.4,26.1,21.1,40.6,29.5c-2,4.6-3.9,9.4-5.5,14.2
c-3.3,9.7-4.9,22.2,4.6,29.1c10.8,7.9,23.6,1.4,31.8-6.8c4.5-4.5,8.3-9.9,11.7-15.5c12.7,5.3,25.6,9.8,38.9,13.3
c21.7,5.8,44.3,8.6,66.8,7.1c3.4,5.7,8,10.6,14.2,14.2c9.8,5.7,23.6,4.7,31.6-3.5c6.7-6.8,8.3-15.4,7.2-24.1
c3.9-1.8,7.8-3.8,11.6-5.9c28.3-15.9,51.2-39.8,68.5-67.2c6.8,2.5,13.9,4.3,21.2,5c10.8,1.1,23.6-0.7,28.2-12
c4.5-10.9-2.9-23-10-30.9c-4.5-5-9.7-8.9-15.3-12.1c11.8-34.1,15-70.7,8.8-106.2c10.5-3.4,20.9-9.7,26.9-19
C497,209.5,495.7,197.9,486,191.6z M440.5,192.4c-8,2.4-16,5.3-23.9,7.9c-10.1-21.4-24.7-40.5-43.3-55.7
c-4.8-4-9.9-7.6-15.1-10.8c4.4-7.4,8.7-14.8,12.6-22.5C402,130.2,425.6,159.3,440.5,192.4z M311.9,278.3
c-1.8,18.8-16.4,33.3-34,38.6c-17.9,5.3-38,1-51.2-12.4c-11.5-11.7-13.4-27.7-8-41.6c-0.3-4.3,2.3-8.8,4.4-12.2
c2.2-3.6,4.8-7.8,8.3-10.6c-0.2-0.4-0.4-0.7-0.7-1c11.8-11.7,34.6-11.8,49-6.8c1.4,0.5,2.8,1.1,4.2,1.7c0.9,2.3,3.7,3.7,6.3,3.4
c5.4,3.3,10.2,7.6,14.1,12.5C311,258,312.9,268,311.9,278.3z M382,365c1.8,1.4,3.7,2.8,5.6,4.1c-15.1,18.9-34.4,34.5-56.1,45.3
c-4.7-14.6-7.8-29.8-12.1-44.6c-5.3-18.1-11.4-35.9-17.6-53.7c1.8-1.4,3.5-2.9,5.1-4.4C332.7,328.3,357.4,346.5,382,365z
M283.7,418.7c0.8,3.5,1.5,7,2.1,10.5c-25.3,4-51.1,1.7-75.3-6.3c3.1-7.9,5.7-16.1,7.8-24.3c6.1-24.9,18.5-47.4,26.2-71.8
c3.7,1.1,7.5,1.9,11.3,2.4c4.1,0.5,8.3,0.5,12.5,0.1C270.1,359.6,277.3,389.2,283.7,418.7z M219.7,312.3c-7,7.4-11,17-14.7,26.7
c-5.1,13.5-11.4,27-18.2,39.7c-4.6,8.7-10.5,16.7-16.2,24.8c-20.4-13.8-37.1-32.3-48.6-53.7c7.2-2.7,14.6-5.2,21.9-8.1
c24.6-9.7,48.1-22.3,73.6-29.6c0.5-0.1,0.9-0.3,1.3-0.6C219.2,311.8,219.4,312.1,219.7,312.3z M215,236.1
c-13-7.8-24.9-17.2-37.1-26.1c-5.8-4.2-11.6-8.3-17.6-12.1c-6.6-4.2-13.8-7.4-20.7-11c-0.5-0.3-1-0.5-1.4-0.8
c9.9-13.8,21.3-26.5,33.6-37.8c0.2-0.2,0.4-0.4,0.5-0.6c8.1-3.3,16.4-6.6,24.8-9.6c1.5,7.1,3.1,14.2,5.2,21.2
c7.2,23.6,17.2,46.3,24.2,70c-3.6,2.8-6.6,6.2-8.9,10.1C217.2,238.1,216.4,236.9,215,236.1z M254,174
c-2.6-15.8-5.6-31.6-9.5-47.1c-0.2-0.6-0.3-1.3-0.5-1.9c20.8-3.9,42-4.8,63-0.7c1.9,0.4,3.8,0.8,5.8,1.3c-2,6.1-4,12.1-6.5,18
c-3.5,8.7-8.2,16.9-12.5,25.2c-8.5,16.3-16.9,32.7-23.1,50c-0.1,0.2-0.1,0.3-0.2,0.5c-3.3-0.5-6.8-0.8-10.3-0.8
C259.3,203.7,256.3,188.7,254,174z M309.2,235.8c-0.8,0.3-1.5,0.8-2,1.4c-2.9-2.8-6.2-5.4-9.6-7.6c15.9-24.8,32.2-49.3,47.5-74.4
c2.5-4.2,5.1-8.3,7.7-12.5c23.1,14.7,41.9,36.1,54,61c-12.1,4.1-24.2,8.2-36.5,11.8C349.6,221.4,329.1,227.7,309.2,235.8z
M349.3,74.3c2.9-3.1,20.3-20.6,24.4-11.9c1.9,3.9,0.5,9.2-0.4,13.2c-1.5,6.4-3.9,12.5-6.5,18.5c-11.1,26.1-27.6,50.3-42.6,74.3
c-11.8,18.9-24.3,37.3-36.3,56.1c-2.2-1-4.4-1.8-6.7-2.5c4.9-13.3,11.1-26.1,17.6-38.7c6.6-12.9,13.9-25.6,19.1-39.1
C327.1,120.4,331.3,93.5,349.3,74.3z M325.1,92c-3.6,7.7-6.5,15.8-9.2,23.9c-15.1-3.7-30.8-5.2-46.6-4.4
c-9.2,0.5-18.3,1.6-27.4,3.3c-1.6-9.1-2.5-18.3-3.3-27.6C267.2,83.2,297.1,84.4,325.1,92z M199.8,55.9c2.1-3.9,5.8-8.5,10.7-7.9
c6,0.7,9.6,8,11.7,12.8c5.9,13.5,5,28.9,6.9,43.2c2.1,15.4,6.1,30.3,9.2,45.4c3.3,16,5.8,32.2,8.1,48.4c1,7.2,2.3,14.4,2.8,21.7
c-4.5,0.8-8.9,2.1-13,4c-8.9-29.3-22.2-57.4-28.3-87.5c-1.5-7.4-3.1-14.7-5-21.9c-2-7.6-4.7-15.2-6.1-22.9
C194.5,79.4,194.1,66.7,199.8,55.9z M116.4,156.1c0.3-0.3,0.5-0.7,0.6-1c13.3-15.2,27.8-29.5,44.7-40.6c8.2-5.4,17-9.9,26.1-13.7
c1.1,4.4,2.4,8.8,3.6,13.2c1.3,4.6,2.3,9.2,3.3,13.8c-6.6,2.3-13.1,4.8-19.6,7.4c-2.8,1.7-5.5,3.6-8.2,5.5
c-0.6,0.4-1.2,0.8-1.8,1.2c-3.2,2.8-6.5,5.4-9.9,7.8c-6.1,6.3-12,13-17.6,19.7c-3.1,3.7-6,7.5-8.8,11.5
c-7.4-4.3-14.7-8.7-22.2-12.8C109.9,164.1,113.1,160.1,116.4,156.1z M62.2,180.7c-3.3-4.2-4.5-9,0.5-12.3c4.6-3,12-1.2,16.9,0
c13.4,3.3,25.7,11.4,37.5,18.4c13,7.7,27.1,13.9,39.8,22c12.8,8.2,24.6,17.9,37,26.7c5.2,3.7,10.6,7.3,16.1,10.6
c1.7,1,3.3,1,4.6,0.4c-0.1,0.6,0,1.3,0.1,1.8c-0.7,1-1.4,2.1-2,3.1c-13.4-7.1-27.2-13.3-41-19.5c-13.6-6.1-26.8-13.4-40.5-19.1
c-12.3-5.1-25.3-8.5-37.8-13.2C82.3,195.4,69.7,190.2,62.2,180.7z M208.1,261.2c-1.5,4.5-2.4,9.2-2.7,13.9
c-14.9,5.6-30.2,9.9-45.4,14.7c-15,4.7-29.7,10.4-44.3,16.1c-2.8,1.1-5.5,2.1-8.4,3.1c-1.1-5.4-1.9-10.9-2.3-16.5
c-2.1-25.6,3.3-50.2,13.5-72.8c10.7,4.1,20.8,9.1,31.2,14C169.2,243,189.1,251.1,208.1,261.2z M67.5,263.5
c1.7-19.5,7-38.7,15.1-56.5c8.4,3.6,17.2,6.3,25.9,9.1c-7.7,17.3-12.6,35.9-14,54.8c-1,13.8,0,27.6,2.7,41c-1,0.3-2,0.5-3.1,0.7
c-7.9,1.7-16,2.5-23.9,4.2c-0.6,0.1-1.1,0.2-1.7,0.4C65.8,299.5,65.9,281.5,67.5,263.5z M50.6,361.1c-5.1-1.3-9.2-5.4-9.7-10.6
c-0.6-6.1,4.5-11.3,9-14.5c10.4-7.5,25-9,37.2-11c15.6-2.5,29.6-7.7,44.2-13.5c14.8-5.9,30.1-10.7,45.3-15.3
c9.9-3,19.8-6.1,29.6-9.6c0.6,3.2,1.5,6.5,2.8,9.7c0.8,2.1,1.8,4.2,3,6.1c-29.5,8.8-56.5,24.3-85.7,34.1
c-13.1,4.4-25.1,10.4-37.5,16.4C77.2,358.5,63.6,364.3,50.6,361.1z M102.4,389.7c-6.4-7.3-12-15.1-16.7-23.4
c6.2-2.7,12.3-5.8,18.2-8.8c2.8-1.4,5.6-2.7,8.4-3.9c8.7,16.4,20.1,31.3,33.9,43.8c5.8,5.3,12,10.1,18.6,14.5c-0.7,1-1.3,2-2,3
c-3.3,5.2-6.3,10.5-9,16C134.7,419.9,117.1,406.3,102.4,389.7z M187.9,445.3c-5.7,10.6-12.9,25.9-25.3,29.7
c-5,1.5-9.2-1.7-9.9-6.5c-0.8-5.9,2.1-12.3,4.1-17.6c5.2-13.5,12.6-26.2,20.5-38.3c3.8-5.7,8.2-11,11.9-16.7
c4.3-6.5,8-13.3,11.4-20.3c6.2-12.6,11.5-25.5,16.7-38.5c2.6-6.4,5.7-13.2,10.7-18c2,1.3,4,2.5,6.1,3.5c0,0.1-0.1,0.2-0.1,0.4
c-4.2,13.6-10.1,26.4-15.5,39.5c-5.5,13.3-9,26.8-12.9,40.6C201.5,417.8,195.1,431.9,187.9,445.3z M220.7,461
c-8-2.5-16-5.4-23.9-8.7c2.1-4,4-7.9,5.9-11.8c1.3-2.6,2.5-5.3,3.7-7.9c20.2,6.9,41.7,10,63,8.9c6.1-0.3,12.2-1,18.2-2
c1.4,8.2,2.8,16.4,4.3,24.6c0.5,2.6,1.1,5.1,1.9,7.5C269.4,472.8,244.4,468.5,220.7,461z M332.3,486.3
c-10.2,4.7-19.7-2.7-24.9-11.3l-1.1-4.4c-0.4,0-0.7,0.1-1.1,0.1c-0.2-0.4-0.3-0.8-0.5-1.2c-2.3-6.2-2.7-12.8-3.7-19.2
c-1.3-8-2.9-15.9-4.5-23.9c-6.4-31.2-14.6-62.1-17.1-94c-0.1-1.7-0.2-3.3-0.3-5c4.5-1.2,8.9-2.9,13.1-5.1
c10.1,29.2,18.8,58.6,26.7,88.5c3.9,14.9,10.2,28.9,16.4,42.9C339.7,463.5,345.5,480.2,332.3,486.3z M353.9,455.7
c-1.6,0.9-3.3,1.7-5,2.5c-0.1-0.4-0.3-0.8-0.4-1.2c-3.9-11.2-9.2-21.7-13.6-32.7c20.4-9.9,38.9-23.8,54.1-40.7
c2.4-2.7,4.8-5.5,7-8.4c8.4,5.8,17.3,11.3,26.6,15.5C405.4,417.6,382.1,440.8,353.9,455.7z M458.5,359.8
c6.1,5.2,18.8,20.3,8.5,27c-4.1,2.6-10.6,1.9-15.1,1.3c-6.6-0.8-12.9-2.8-19-5.2c-26.3-10.3-47.9-29.9-70.5-46.3
c-16-11.6-32.2-22.8-48.8-33.5c1.3-2,2.5-4.1,3.5-6.2c0.3,0.1,0.6,0.3,1,0.4c26.8,7.1,48.8,25,73.7,36.6
C413.5,344,439.6,343.9,458.5,359.8z M322.6,269.2c31.1-6.4,62.5-10.4,93.1-19.6c1.6-0.5,3.2-1,4.8-1.4c4,27.2,0.7,55.3-9.5,80.9
c-1.6-0.5-3.1-0.9-4.7-1.4c-14.7-4.7-28-13.3-41.2-21.1c-14-8.2-28.4-15.7-44.1-20C322.4,281,323,275,322.6,269.2z M446.9,340.1
c-8.3-3.5-17.2-5.9-26-8.2c9-23,13-47.9,11.2-72.9c-0.3-4.6-0.9-9.2-1.6-13.7c2.4-0.7,4.7-1.3,7.1-1.9c5.8-1.4,11.7-2.1,17.6-3.2
C460.9,273.6,457.7,307.8,446.9,340.1z M472.5,221.8c-13.2,8.6-29.2,8.7-44,12.6c-15.4,4.1-30.4,9.1-46,12.6
c-15.9,3.5-32,5.9-48,8.8c-4.7,0.8-9.3,1.7-13.9,2.7c-0.2-0.7-0.4-1.3-0.7-2c-1.4-3.9-3.3-7.5-5.6-10.9
c29.6-11.9,60.5-19.5,90.7-29.8c15.2-5.1,30.3-10.3,45.7-14.9c8.8-2.6,19.9-5,28.5-0.8C490.5,205.8,478.7,217.8,472.5,221.8z"></path>
</g>
</g>
</g>
</svg>
\ No newline at end of file
......@@ -10,7 +10,7 @@ document.addEventListener('DOMContentLoaded', function () {
nextBtnText: 'Okay, Start!'
},
}, {
element: '#logo_emoji',
element: '#logo_img',
popover: {
title: 'Focus Anything',
description: 'You can use it to highlight literally anything, images, text, div, span, li etc.',
......
......@@ -8,6 +8,17 @@ img.emoji {
vertical-align: -0.1em;
}
.brand {
position: relative;
img {
height: 67px;
position: absolute;
top: -6px;
left: 55px;
}
}
.page-wrap {
max-width: 550px;
margin: 50px auto;
......
*{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;margin:0;padding:0}*,:after,:before{box-sizing:border-box}body,html{position:relative;margin:0;width:100%;height:100%}body{padding-top:1px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;font-size:16px;line-height:1.4;color:#fff;background-color:#2e2e30;overflow-x:hidden}label{display:block;margin-bottom:8px;font-size:14px;font-weight:500;cursor:pointer}p{margin-top:0;margin-bottom:20px;line-height:1.5}.hr,hr{display:block;margin:30px 0;border:0;border-bottom:1px solid #eaeaea;height:1px}.hr.hr__fancy,hr.hr__fancy{background:url("./separator.png") repeat-y;height:5px;background-size:cover}h1,h2,h3,h4,h5,h6{margin-top:0;margin-bottom:12px;font-weight:700;line-height:1.2}a,a:focus,a:visited{color:#fff;text-decoration:none;font-weight:600}.form-control{display:block;width:100%;background-color:#f9f9f9;padding:12px;border:1px solid #ddd;border-radius:2.5px;font-size:14px;-webkit-appearance:none;appearance:none;outline:none;margin-bottom:24px}.h1,h1{font-size:32px}.h2,h2{font-size:24px}.h3,h3{font-size:20px}.h4,h4{font-size:18px}.h5,h5{font-size:16px}.h6,h6{font-size:14px}ol li,ul li{list-style-type:none;line-height:1.5;margin-bottom:3px}blockquote{background:#f5f3f1;padding:10px;margin-bottom:35px;border-radius:10px}.top-20{margin-top:20px}.top-30{margin-top:30px}.zero-bottom{margin-bottom:0}.zero-top{margin-top:0}.text-center{text-align:center}div#driver-popover-item{display:none;position:absolute;background:#fff;color:#2d2d2d;margin:0;padding:15px;border-radius:5px;min-width:250px;max-width:300px;box-shadow:0 1px 10px rgba(0,0,0,.4);z-index:1000000000}div#driver-popover-item .driver-popover-tip{border:5px solid #fff;content:"";position:absolute}div#driver-popover-item .driver-popover-tip.bottom{bottom:-10px;border-top-color:#fff;border-right-color:transparent;border-bottom-color:transparent;border-left-color:transparent}div#driver-popover-item .driver-popover-tip.left{left:-10px;top:10px;border-top-color:transparent;border-right-color:#fff;border-bottom-color:transparent;border-left-color:transparent}div#driver-popover-item .driver-popover-tip.right{right:-10px;top:10px;border-top-color:transparent;border-right-color:transparent;border-bottom-color:transparent;border-left-color:#fff}div#driver-popover-item .driver-popover-tip.top{top:-10px;border-top-color:transparent;border-right-color:transparent;border-bottom-color:#fff;border-left-color:transparent}div#driver-popover-item .driver-popover-footer{display:block;clear:both;margin-top:5px}div#driver-popover-item .driver-popover-footer button{display:inline-block;padding:3px 10px;border:1px solid #d4d4d4;text-decoration:none;text-shadow:1px 1px 0 #fff;color:#2d2d2d;font:11px/normal sans-serif;cursor:pointer;outline:0;background-color:#f1f1f1;border-radius:2px;zoom:1;margin:10px 0 0;line-height:1.3}div#driver-popover-item .driver-popover-footer button.driver-disabled{color:gray;cursor:default;pointer-events:none}div#driver-popover-item .driver-popover-footer .driver-close-btn{float:left}div#driver-popover-item .driver-popover-footer .driver-btn-group{float:right}div#driver-popover-item .driver-popover-title{font:19px/normal sans-serif;margin:0 0 5px;font-weight:700;display:block;position:relative;line-height:1.5;zoom:1}div#driver-popover-item .driver-popover-description{margin-bottom:0;font:14px/normal sans-serif;line-height:1.5;color:#2d2d2d;font-weight:400;zoom:1}.driver-stage-no-animation{-webkit-transition:none!important;-moz-transition:none!important;-ms-transition:none!important;-o-transition:none!important;transition:none!important;background:transparent!important;outline:5000px solid rgba(0,0,0,.75)}div#driver-page-overlay{background:#000;position:fixed;bottom:0;right:0;display:block;width:100%;height:100%;zoom:1;filter:alpha(opacity=75);opacity:.75;z-index:100002!important}div#driver-highlighted-element-stage,div#driver-page-overlay{top:0;left:0;-webkit-transition:all .4s;-moz-transition:all .4s;-ms-transition:all .4s;-o-transition:all .4s;transition:all .4s}div#driver-highlighted-element-stage{position:absolute;height:50px;width:300px;background:#fff;z-index:100003!important;display:none;border-radius:2px}.driver-highlighted-element{z-index:100004!important}.driver-position-relative{position:relative!important}.driver-fix-stacking{z-index:auto!important;opacity:1!important;-webkit-transform:none!important;-moz-transform:none!important;-ms-transform:none!important;-o-transform:none!important;transform:none!important;-webkit-filter:none!important;-moz-filter:none!important;-ms-filter:none!important;-o-filter:none!important;filter:none!important;-webkit-perspective:none!important;-moz-perspective:none!important;-ms-perspective:none!important;-o-perspective:none!important;perspective:none!important;-webkit-transform-style:flat!important;-moz-transform-style:flat!important;-ms-transform-style:flat!important;transform-style:flat!important;-webkit-transform-box:border-box!important;-moz-transform-box:border-box!important;-ms-transform-box:border-box!important;-o-transform-box:border-box!important;transform-box:border-box!important;will-change:unset!important}img.emoji{height:1em;width:1em;margin:0 .05em 0 .1em;vertical-align:-.1em}.page-wrap{max-width:550px;margin:50px auto;background:#fff;padding:10px 30px;border-radius:5px;color:#1f1f1f}.page-wrap a,.page-wrap a:focus,.page-wrap a:visited{color:#1f1f1f;text-decoration:underline}.page-wrap a.btn__dark{text-decoration:none;color:#fff;background-color:#f44336;padding:0 18px;height:40px;line-height:40px;border-radius:8px;cursor:pointer;transition:background-color .2s,color .2s;font-weight:500;width:195px;font-size:17px;display:inline-block;margin-top:2px}.page-wrap a.btn__run-demo{text-decoration:none;background:#f54336;padding:5px;border-radius:20px;color:#fff;display:block;margin:15px 0 10px;text-align:center}section{margin-bottom:30px}.section__header{margin:10px 0 20px;text-align:center;display:block;padding:10px}.section__header h1{font-size:55px}.section__header h1 .emoji{font-size:45px;top:-4px;margin-right:3px;position:relative}.section__header .tagline{max-width:450px;margin:0 auto 25px;text-align:center}.section__examples .section__example{margin-bottom:20px}.section__examples #creation-input{margin-top:20px}.section__examples input{padding:10px;background-color:#fafbfc;border:3px solid #e1e4e8;border-radius:3px;box-shadow:inset 0 0 10px rgba(27,31,35,.05);margin-bottom:0;margin-top:7px}.position-btns a{text-decoration:none;font-size:13px;padding:10px 15px;background:#f54336;color:#fff!important;border-radius:6px}
\ No newline at end of file
*{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;margin:0;padding:0}*,:after,:before{box-sizing:border-box}body,html{position:relative;margin:0;width:100%;height:100%}body{padding-top:1px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;font-size:16px;line-height:1.4;color:#fff;background-color:#2e2e30;overflow-x:hidden}label{display:block;margin-bottom:8px;font-size:14px;font-weight:500;cursor:pointer}p{margin-top:0;margin-bottom:20px;line-height:1.5}.hr,hr{display:block;margin:30px 0;border:0;border-bottom:1px solid #eaeaea;height:1px}.hr.hr__fancy,hr.hr__fancy{background:url("./separator.png") repeat-y;height:5px;background-size:cover}h1,h2,h3,h4,h5,h6{margin-top:0;margin-bottom:12px;font-weight:700;line-height:1.2}a,a:focus,a:visited{color:#fff;text-decoration:none;font-weight:600}.form-control{display:block;width:100%;background-color:#f9f9f9;padding:12px;border:1px solid #ddd;border-radius:2.5px;font-size:14px;-webkit-appearance:none;appearance:none;outline:none;margin-bottom:24px}.h1,h1{font-size:32px}.h2,h2{font-size:24px}.h3,h3{font-size:20px}.h4,h4{font-size:18px}.h5,h5{font-size:16px}.h6,h6{font-size:14px}ol li,ul li{list-style-type:none;line-height:1.5;margin-bottom:3px}blockquote{background:#f5f3f1;padding:10px;margin-bottom:35px;border-radius:10px}.top-20{margin-top:20px}.top-30{margin-top:30px}.zero-bottom{margin-bottom:0}.zero-top{margin-top:0}.text-center{text-align:center}div#driver-popover-item{display:none;position:absolute;background:#fff;color:#2d2d2d;margin:0;padding:15px;border-radius:5px;min-width:250px;max-width:300px;box-shadow:0 1px 10px rgba(0,0,0,.4);z-index:1000000000}div#driver-popover-item .driver-popover-tip{border:5px solid #fff;content:"";position:absolute}div#driver-popover-item .driver-popover-tip.bottom{bottom:-10px;border-top-color:#fff;border-right-color:transparent;border-bottom-color:transparent;border-left-color:transparent}div#driver-popover-item .driver-popover-tip.left{left:-10px;top:10px;border-top-color:transparent;border-right-color:#fff;border-bottom-color:transparent;border-left-color:transparent}div#driver-popover-item .driver-popover-tip.right{right:-10px;top:10px;border-top-color:transparent;border-right-color:transparent;border-bottom-color:transparent;border-left-color:#fff}div#driver-popover-item .driver-popover-tip.top{top:-10px;border-top-color:transparent;border-right-color:transparent;border-bottom-color:#fff;border-left-color:transparent}div#driver-popover-item .driver-popover-footer{display:block;clear:both;margin-top:5px}div#driver-popover-item .driver-popover-footer button{display:inline-block;padding:3px 10px;border:1px solid #d4d4d4;text-decoration:none;text-shadow:1px 1px 0 #fff;color:#2d2d2d;font:11px/normal sans-serif;cursor:pointer;outline:0;background-color:#f1f1f1;border-radius:2px;zoom:1;margin:10px 0 0;line-height:1.3}div#driver-popover-item .driver-popover-footer button.driver-disabled{color:gray;cursor:default;pointer-events:none}div#driver-popover-item .driver-popover-footer .driver-close-btn{float:left}div#driver-popover-item .driver-popover-footer .driver-btn-group{float:right}div#driver-popover-item .driver-popover-title{font:19px/normal sans-serif;margin:0 0 5px;font-weight:700;display:block;position:relative;line-height:1.5;zoom:1}div#driver-popover-item .driver-popover-description{margin-bottom:0;font:14px/normal sans-serif;line-height:1.5;color:#2d2d2d;font-weight:400;zoom:1}.driver-stage-no-animation{-webkit-transition:none!important;-moz-transition:none!important;-ms-transition:none!important;-o-transition:none!important;transition:none!important;background:transparent!important;outline:5000px solid rgba(0,0,0,.75)}div#driver-page-overlay{background:#000;position:fixed;bottom:0;right:0;display:block;width:100%;height:100%;zoom:1;filter:alpha(opacity=75);opacity:.75;z-index:100002!important}div#driver-highlighted-element-stage,div#driver-page-overlay{top:0;left:0;-webkit-transition:all .4s;-moz-transition:all .4s;-ms-transition:all .4s;-o-transition:all .4s;transition:all .4s}div#driver-highlighted-element-stage{position:absolute;height:50px;width:300px;background:#fff;z-index:100003!important;display:none;border-radius:2px}.driver-highlighted-element{z-index:100004!important}.driver-position-relative{position:relative!important}.driver-fix-stacking{z-index:auto!important;opacity:1!important;-webkit-transform:none!important;-moz-transform:none!important;-ms-transform:none!important;-o-transform:none!important;transform:none!important;-webkit-filter:none!important;-moz-filter:none!important;-ms-filter:none!important;-o-filter:none!important;filter:none!important;-webkit-perspective:none!important;-moz-perspective:none!important;-ms-perspective:none!important;-o-perspective:none!important;perspective:none!important;-webkit-transform-style:flat!important;-moz-transform-style:flat!important;-ms-transform-style:flat!important;transform-style:flat!important;-webkit-transform-box:border-box!important;-moz-transform-box:border-box!important;-ms-transform-box:border-box!important;-o-transform-box:border-box!important;transform-box:border-box!important;will-change:unset!important}img.emoji{height:1em;width:1em;margin:0 .05em 0 .1em;vertical-align:-.1em}.brand{position:relative}.brand img{height:67px;position:absolute;top:-6px;left:55px}.page-wrap{max-width:550px;margin:50px auto;background:#fff;padding:10px 30px;border-radius:5px;color:#1f1f1f}.page-wrap a,.page-wrap a:focus,.page-wrap a:visited{color:#1f1f1f;text-decoration:underline}.page-wrap a.btn__dark{text-decoration:none;color:#fff;background-color:#f44336;padding:0 18px;height:40px;line-height:40px;border-radius:8px;cursor:pointer;transition:background-color .2s,color .2s;font-weight:500;width:195px;font-size:17px;display:inline-block;margin-top:2px}.page-wrap a.btn__run-demo{text-decoration:none;background:#f54336;padding:5px;border-radius:20px;color:#fff;display:block;margin:15px 0 10px;text-align:center}section{margin-bottom:30px}.section__header{margin:10px 0 20px;text-align:center;display:block;padding:10px}.section__header h1{font-size:55px}.section__header h1 .emoji{font-size:45px;top:-4px;margin-right:3px;position:relative}.section__header .tagline{max-width:450px;margin:0 auto 25px;text-align:center}.section__examples .section__example{margin-bottom:20px}.section__examples #creation-input{margin-top:20px}.section__examples input{padding:10px;background-color:#fafbfc;border:3px solid #e1e4e8;border-radius:3px;box-shadow:inset 0 0 10px rgba(27,31,35,.05);margin-bottom:0;margin-top:7px}.position-btns a{text-decoration:none;font-size:13px;padding:10px 15px;background:#f54336;color:#fff!important;border-radius:6px}
\ No newline at end of file
此差异已折叠。
......@@ -14,7 +14,10 @@
<body>
<div class="page-wrap">
<section class="section__header" id="driver-demo-head">
<h1><span id="logo_emoji" class="emoji">👨‍🔧️</span> <span id="name_driver">Driver</span></h1>
<h1 class="brand">
<img id="logo_img" src="./dist/demo/driver.png"/>
<span id="name_driver">Driver.js</span>
</h1>
<p class="text-muted tagline">Light-weight, no-dependency, vanilla JavaScript engine to drive user's focus across
the
page</p>
......
......@@ -72,6 +72,7 @@ module.exports = {
}),
new CopyWebpackPlugin([
'./demo/images/separator.png',
'./demo/images/driver.png',
]),
],
stats: {
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册