Browse Source

Readme: link to a presentation; Mockup change: videoeditor

kudlav 1 year ago
parent
commit
fcd75ab74f
2 changed files with 59 additions and 42 deletions
  1. 3 1
      readme.md
  2. 56 41
      www/mockup/dashboard/video-editor.html

+ 3 - 1
readme.md

@@ -1,3 +1,5 @@
 # Prednasky.com
 
-Dokumentace v latexu zde: [https://www.overleaf.com/11538267kpnczwtfnmxn](https://www.overleaf.com/11538267kpnczwtfnmxn)
+* Dokumentace v latexu zde: [https://www.overleaf.com/11538267kpnczwtfnmxn](https://www.overleaf.com/11538267kpnczwtfnmxn)
+
+* Prezentace k zakončení IP1 (23. 1. 2018): https://docs.google.com/presentation/d/1id93K60Zgn4TimB9tAmN2ZTPbwO1f2H2yD0SedCM1AM/edit?usp=sharing

+ 56 - 41
www/mockup/dashboard/video-editor.html

@@ -85,6 +85,8 @@
               <div class="embed-responsive embed-responsive-4by3">
                 <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/i__1Z5a9Sak?autoplay=0" allowfullscreen=""> </iframe>
               </div>
+            </div>
+            <div class="col-md-6">
               <div class="form-group my-2"> <label><b>Subtitles:</b></label>
                 <div class="row">
                   <div class="col-md-12">
@@ -98,54 +100,67 @@
                 <a href="#" class="btn btn-outline-primary my-2">Remove slideshow</a>
               </div>
             </div>
-            <div class="col-md-6">
-              <h4 class="">Time: 3:27 / 50:32</h4>
-              <div class="row my-2">
-                <div class="col-md-4">
-                  <a href="#" class="btn btn-outline-primary">Start here</a>
-                </div>
-                <div class="col-md-4">
-                  <a href="#" class="btn btn-outline-primary">Split here</a>
-                </div>
-                <div class="col-md-4">
-                  <a href="#" class="btn btn-outline-primary">End here</a>
+          </div>
+          <div class="row py-3 bg-light text-dark">
+            <div class="col-md-4 align-bottom">
+              <h4 class="m-0 p-0">Time: 3:27 / 40:32</h4>
+              <a href="#" class="btn btn-outline-primary btn-sm mx-1 py-0">-1 frame</a>
+              <a href="#" class="btn btn-outline-primary btn-sm mx-1 py-0">+1 frame</a>
+            </div>
+            <div class="col-md-8">
+              <a href="#" class="btn btn-outline-primary">Start here</a>
+              <a href="#" class="btn btn-outline-primary mx-4">Split here</a>
+              <a href="#" class="btn btn-outline-primary">End here</a>
+            </div>
+          </div>
+          <div class="row pt-2 bg-light text-dark">
+            <div style="height:260px;width:2px;position:absolute;left:200px;z-index:5;" class="bg-danger"></div>
+            <div style="position:absolute;left:195px;z-index:5;box-sizing:border-box;" class="bg-danger text-light px-1">3:27</div>
+            <div class="col-md-4" style="border-right: 1px dotted #343a40;"> <i class="fa fa-lg fa-arrows"></i>
+              <img class="d-block img-fluid" src="https://pingendo.com/assets/photos/wireframe/photo-1.jpg">
+              <div class="row">
+                <div class="col-md-4"><i class="fa fa-times-circle fa-lg"></i></div>
+                <div class="col-md-8 text-right">
+                  <p class="text-right m-0">2:50</p>
                 </div>
               </div>
-              <div class="row my-3 py-2 bg-light">
-                <div class="col-md-4"> <i class="d-block  fa fa-lg fa-arrows"></i>
-                  <img class="d-block img-fluid" src="https://pingendo.com/assets/photos/wireframe/photo-1.jpg">
-                  <div class="row">
-                    <div class="col-md-4"><i class="d-block  fa fa-times-circle fa-lg"></i></div>
-                    <div class="col-md-8 text-right">
-                      <p class="text-right">2:50</p>
-                    </div>
-                  </div>
-                </div>
-                <div class="col-md-4"> <i class="d-block  fa fa-arrows fa-lg"></i>
-                  <img class="img-fluid d-block my-2" src="vid-thumb.PNG">
-                  <div class="row">
-                    <div class="col-md-6 text-center"><i class="d-block  fa fa-lg fa-times-circle"></i></div>
-                    <div class="col-md-6">
-                      <p class="">30:23</p>
-                    </div>
-                  </div>
-                </div>
-                <div class="col-md-4"> <i class="d-block  fa fa-lg fa-arrows"></i>
-                  <img class="img-fluid d-block" src="https://pingendo.com/assets/photos/wireframe/photo-1.jpg">
-                  <div class="row">
-                    <div class="col-md-6"><i class="d-block  fa fa-times-circle fa-lg"></i></div>
-                    <div class="col-md-5">
-                      <p class="">7:19</p>
-                    </div>
-                  </div>
+            </div>
+            <div class="col-md-4" style="border-right: 1px dotted #343a40;"> <i class="fa fa-arrows fa-lg"></i>
+              <img class="img-fluid d-block" src="vid-thumb.PNG">
+              <div class="row">
+                <div class="col-md-6"><i class="fa fa-lg fa-times-circle py-0"></i></div>
+                <div class="col-md-5">
+                  <p class="m-0 text-right">30:23</p>
                 </div>
               </div>
-              <div class="form-group"> <label><b>Insert file:</b></label>
-                <br>
-                <a href="pool.html" class="btn btn-outline-primary" target="_blank">Select file</a>
+            </div>
+            <div class="col-md-4"> <i class="fa fa-lg fa-arrows"></i>
+              <img class="img-fluid d-block" src="https://pingendo.com/assets/photos/wireframe/photo-1.jpg">
+              <div class="row">
+                <div class="col-md-6"><i class="fa fa-times-circle fa-lg"></i></div>
+                <div class="col-md-5">
+                  <p class="m-0 text-right">7:19</p>
+                </div>
               </div>
             </div>
           </div>
+          <div class="row bg-light text-muted">
+            <div class="col-md-3" style="border-left: 1px;">
+              <p class="m-0">0:00</p>
+            </div>
+            <div class="col-md-3">
+              <p class="m-0 px-5">2:50</p>
+            </div>
+            <div class="col-md-3 text-right">
+              <p class="m-0 px-4">33:13</p>
+            </div>
+            <div class="col-md-3 text-right">
+              <p class="m-0">40:32</p>
+            </div>
+          </div>
+          <div class="form-group my-3"><label><b>Insert file:</b></label>
+            <a href="pool.html" class="btn btn-outline-primary ml-2" target="_blank">Select file</a>
+          </div>
           <a href="edit-video.html">
             <button type="button" class="btn btn-primary my-3">Save changes</button>
           </a>