Created
July 21, 2018 05:10
-
-
Save inoyatov/8079d1d25fb29ae4697c0effbdb36119 to your computer and use it in GitHub Desktop.
Client Video View page
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>Client View</title> | |
| <!-- Required meta tags --> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> | |
| <!-- Material Design for Bootstrap fonts and icons --> | |
| <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons"> | |
| <!-- Material Design for Bootstrap CSS --> | |
| <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/css/bootstrap-material-design.min.css" integrity="sha384-wXznGJNEXNG1NFsbm0ugrLFMQPWswR3lds2VeinahP8N0zJw9VWSopbjv2x7WCvX" crossorigin="anonymous"> | |
| <!-- Font awsome --> | |
| <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.1/css/all.css" integrity="sha384-O8whS3fhG2OnA5Kas0Y9l3cfpmYjapjI0E4theH4iuMD+pLhbf6JI0jIMfYcK3yZ" crossorigin="anonymous"> | |
| <style> | |
| #video { | |
| margin-top: 15px; | |
| margin-bottom: 15px; | |
| } | |
| hr { | |
| margin-top: 6px; | |
| margin-bottom: 6px; | |
| } | |
| img.mr-3 { | |
| border-radius: 32px; | |
| } | |
| .commenter { | |
| margin-top: 10px; | |
| } | |
| .commenter > .image { | |
| display: inline-block; | |
| } | |
| .commenter > .comment { | |
| display: inline-block; | |
| } | |
| .actions.like i.fa-thumbs-up { | |
| color: #3f51b5; | |
| } | |
| .actions.dislike i.fa-thumbs-down { | |
| color: #3f51b5; | |
| } | |
| .actions i.far { | |
| font-size: 32px; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <div class="row"> | |
| <div class="col-12"> | |
| <div id="video" class="embed-responsive embed-responsive-16by9"> | |
| <iframe width="560" height="315" src="https://www.youtube.com/embed/z6hQqgvGI4Y" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="row"> | |
| <div class="col-12"> | |
| <p id="video-title" class="h6">Video 001 - Title is so long ...</p> | |
| </div> | |
| </div> | |
| <div class="row"> | |
| <div class="col-6"> | |
| <span> | |
| <small class='text-muted'>3,443 View</small> | |
| </span> | |
| </div> | |
| <div class="col-6"> | |
| <span class='float-right'> | |
| <small class='text-muted'>June 8, 2018</small> | |
| </span> | |
| </div> | |
| </div> | |
| <div class="row"> | |
| <div class="col-12"> | |
| <hr> | |
| </div> | |
| </div> | |
| <div class="row"> | |
| <div class="col"> | |
| <div class="actions like"> | |
| <button id="like-action" class="btn"> | |
| <i class="far fa-thumbs-up"></i> | |
| </button> | |
| <button id="dislike-action" class="btn"> | |
| <i class="far fa-thumbs-down"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="row"> | |
| <div class="col-12"> | |
| <hr> | |
| </div> | |
| </div> | |
| <div class="row"> | |
| <div class="col-12"> | |
| <span> | |
| <small class='text-muted'>Comments 1,222</small> | |
| </span> | |
| </div> | |
| </div> | |
| <div class="row"> | |
| <div class="col"> | |
| <div class="commenter"> | |
| <div class="image"> | |
| <img class="mr-3" data-src="holder.js/48x48" alt="48x48" style="width: 48px; height: 48px;" src="data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2264%22%20height%3D%2264%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2064%2064%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_164baf3135c%20text%20%7B%20fill%3Argba(255%2C255%2C255%2C.75)%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A10pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_164baf3135c%22%3E%3Crect%20width%3D%2264%22%20height%3D%2264%22%20fill%3D%22%23777%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%2212.5546875%22%20y%3D%2236.5%22%3E64x64%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E" data-holder-rendered="true"> | |
| </div> | |
| <div class="comment"> | |
| <input type="text" class="form-control" id="comment" placeholder="Add a public comment ..."> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="row"> | |
| <div class="col-12"> | |
| <hr> | |
| </div> | |
| </div> | |
| <div class="row"> | |
| <div class="col-12"> | |
| <ul class="list-unstyled"> | |
| <li class="media"> | |
| <img class="mr-3" data-src="holder.js/48x48" alt="48x48" style="width: 48px; height: 48px;" src="data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2264%22%20height%3D%2264%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2064%2064%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_164baf3135c%20text%20%7B%20fill%3Argba(255%2C255%2C255%2C.75)%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A10pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_164baf3135c%22%3E%3Crect%20width%3D%2264%22%20height%3D%2264%22%20fill%3D%22%23777%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%2212.5546875%22%20y%3D%2236.5%22%3E64x64%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E" data-holder-rendered="true"> | |
| <div class="media-body"> | |
| <h5 class="mt-0 mb-1">Mashhur</h5> | |
| Amet amet fugiat repellendus deserunt corrupti ipsam. Excepturi est quidem culpa id maiores fugit odio tenetur officiis blanditiis dolor, quo tempore eius laborum. Magnam eos explicabo magni tenetur ullam facere. | |
| </div> | |
| </li> | |
| <li class="media my-4"> | |
| <img class="mr-3" data-src="holder.js/48x48" alt="48x48" style="width: 48px; height: 48px;" src="data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2264%22%20height%3D%2264%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2064%2064%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_164baf3135c%20text%20%7B%20fill%3Argba(255%2C255%2C255%2C.75)%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A10pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_164baf3135c%22%3E%3Crect%20width%3D%2264%22%20height%3D%2264%22%20fill%3D%22%23777%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%2212.5546875%22%20y%3D%2236.5%22%3E64x64%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E" data-holder-rendered="true"> | |
| <div class="media-body"> | |
| <h5 class="mt-0 mb-1">Khamidulla</h5> | |
| Dolor id deserunt necessitatibus temporibus laborum odio. Recusandae sint quas at nobis alias. Error in qui iure nam quaerat. Deleniti voluptatem itaque provident ipsam suscipit! Deserunt quam harum similique exercitationem. | |
| </div> | |
| </li> | |
| <li class="media"> | |
| <img class="mr-3" data-src="holder.js/48x48" alt="48x48" style="width: 48px; height: 48px;" src="data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2264%22%20height%3D%2264%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2064%2064%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_164baf3135c%20text%20%7B%20fill%3Argba(255%2C255%2C255%2C.75)%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A10pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_164baf3135c%22%3E%3Crect%20width%3D%2264%22%20height%3D%2264%22%20fill%3D%22%23777%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%2212.5546875%22%20y%3D%2236.5%22%3E64x64%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E" data-holder-rendered="true"> | |
| <div class="media-body"> | |
| <h5 class="mt-0 mb-1">Calvin</h5> | |
| Dolor cum placeat est praesentium harum. Ipsa ipsam nihil libero maiores harum. Autem dolore doloribus a obcaecati nemo cumque minus. Cupiditate consequuntur dolorum consectetur ab cupiditate eveniet eos! Laborum hic. | |
| </div> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Optional JavaScript --> | |
| <!-- jQuery first, then Popper.js, then Bootstrap JS --> | |
| <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> | |
| <script src="https://unpkg.com/[email protected]/dist/umd/popper.js" integrity="sha384-fA23ZRQ3G/J53mElWqVJEGJzU0sTs+SvzG8fXVWP+kJQ1lwFAOkcUOysnlKJC33U" crossorigin="anonymous"></script> | |
| <script src="https://unpkg.com/[email protected]/dist/js/bootstrap-material-design.js" integrity="sha384-CauSuKpEqAFajSpkdjv3z9t8E7RlpJ1UP0lKM/+NdtSarroVKu069AlsRPKkFBz9" crossorigin="anonymous"></script> | |
| <script>$(document).ready(function() { $('body').bootstrapMaterialDesign(); });</script> | |
| </body> | |
| </html> |
Author
Userspic auto generation and styling will be available after addition following to the server
https://github.com/LasseRafn/php-initial-avatar-generator
Update: Cannot use it since it dose not support Korean Language Support
Author
Please add following font to project for like and dislike buttons https://zurb.com/playground/foundation-icon-fonts-3
vuejs avatar generator used, foundation icon icluded.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
TODO: