API tools faq
paste
Advertisement
AdamBB

ProSliderV2_index

AdamBB
Dec 12th, 2020
598
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5 4.94 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.   <meta name="mobile-web-app-capable" content="yes">
  7.   <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8.   <link rel="stylesheet" href="style.css">
  9.   <title>ProSlider</title>
  10. </head>
  11. <body>
  12.   <div class="main-header">PROSLIDER!</div>
  13.  
  14.   <div class="section-btn-top btn-top-container">
  15.     <span class="btn btn-back hide">
  16.       BACK
  17.     </span>
  18.     <span class="btn btn-set-point-a">
  19.       SET POINT A
  20.     </span>
  21.     <span class="btn btn-set-point-b">
  22.       SET POINT B
  23.     </span>
  24.   </div>
  25.  
  26.   <!-- MAIN VIEW -->
  27.   <section class="section-set-position-a main-view">
  28.     <div class="group-header">
  29.       POSITION A
  30.     </div>
  31.     <div class="position-section">
  32.       <div class="left-column">SLIDE:</div><div class="right-column slide-value">0</div>
  33.       <div class="left-column">PAN:</div><div class="right-column pan-value">0</div>
  34.       <div class="left-column">TILT:</div><div class="right-column tilt-value">0</div>
  35.     </div>
  36.   </section>
  37.  
  38.   <section class="section-set-position-b main-view">
  39.     <div class="group-header">
  40.       POSITION B
  41.     </div>
  42.     <div class="position-section">
  43.       <div class="left-column">SLIDE:</div><div class="right-column slide-value">0</div>
  44.       <div class="left-column">PAN:</div><div class="right-column pan-value">0</div>
  45.       <div class="left-column">TILT:</div><div class="right-column tilt-value">0</div>
  46.     </div>
  47.   </section>
  48.  
  49.   <section class="current-position main-view">
  50.     <div class="group-header">
  51.       CURRENT POSITION
  52.     </div>
  53.     <div class="position-section">
  54.       <div class="left-column">SLIDE:</div><div class="right-column slide-value">0</div>
  55.       <div class="left-column">PAN:</div><div class="right-column pan-value">0</div>
  56.       <div class="left-column">TILT:</div><div class="right-column tilt-value">0</div>
  57.     </div>
  58.   </section>
  59.  
  60.   <section class="section-transition-time">
  61.     <div class="group-header">
  62.       TRANSITION TIME [s]
  63.     </div>
  64.     <div class="transition-section">
  65.       <div class="btn decrement-btn">-</div>
  66.       <input class="input-time" value="15" type="number" min="5">
  67.       <div class="btn increment-btn">+</div>
  68.     </div>
  69.   </section>
  70.  
  71.   <section class="section-btn-bottom">
  72.     <div class="btn-bottom-container">
  73.       <span class="btn go-to-point-a">
  74.         GO TO POINT A
  75.       </span>
  76.       <span class="btn go-to-point-b">
  77.         GO TO POINT B
  78.       </span>
  79.     </div>
  80.   </section>
  81.  
  82.   <!-- SET POSITION A / B VIEW -->
  83.   <section class="section-set-position-a set-point-a-view hide">
  84.     <div class="group-header">
  85.       SET POINT A
  86.     </div>
  87.     <div class="position-section">
  88.       <div class="left-column">SLIDE:</div><div class="right-column slide-value">0</div>
  89.       <div class="left-column">PAN:</div><div class="right-column pan-value">0</div>
  90.       <div class="left-column">TILT:</div><div class="right-column tilt-value">0</div>
  91.     </div>
  92.  
  93.     <div class="flex-center-container">
  94.       <span class="btn btn-primary btn-save-point-a">SAVE</span>
  95.     </div>
  96.   </section>
  97.  
  98.   <section class="section-set-position-b set-point-b-view hide">
  99.     <div class="group-header">
  100.       SET POINT B
  101.     </div>
  102.     <div class="position-section">
  103.       <div class="left-column">SLIDE:</div><div class="right-column slide-value">0</div>
  104.       <div class="left-column">PAN:</div><div class="right-column pan-value">0</div>
  105.       <div class="left-column">TILT:</div><div class="right-column tilt-value">0</div>
  106.     </div>
  107.  
  108.     <div class="flex-center-container">
  109.       <span class="btn btn-primary btn-save-point-b">SAVE</span>
  110.     </div>
  111.   </section>
  112.  
  113.   <section class="current-position set-positon-view">
  114.     <div class="group-header">
  115.       CURRENT POSITION
  116.     </div>
  117.     <div class="position-section">
  118.       <div class="left-column">SLIDE:</div><div class="right-column slide-value">0</div>
  119.       <div class="left-column">PAN:</div><div class="right-column pan-value">0</div>
  120.       <div class="left-column">TILT:</div><div class="right-column tilt-value">0</div>
  121.     </div>
  122.   </section>
  123.  
  124.   <section class="section-joy-control">
  125.     <div>
  126.       <div id="joyPanTilt" class="joy joy-pan-tilt"></div>
  127.       <div id="joySlide" class="joy joy-slide"></div>
  128.     </div>
  129.   </section>
  130.  
  131.   <!-- GO TO POINT A / B - TRANSITION -->
  132.  
  133.   <section class="section-transition hide">
  134.     <div class="group-header">
  135.       TRANSITION IN PROGRESS
  136.     </div>
  137.   </section>
  138.  
  139.   <section class="progress-bar-section hide">
  140.     <div class="progress-bar-background">
  141.       <div class="internal-bar"></div>
  142.       <span class="transition-precentage">0%</span>
  143.     </div>
  144.     <div class="flex-center-container">
  145.       <span class="btn btn-primary btn-cancel-transition">CANCEL</span>
  146.     </div>
  147.   </section>
  148.   <script src="joy.js"></script>
  149.   <script src="script.js"></script>
  150. </body>
  151. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!