chronos-youtube-highlighter/index.html at master · justinthec/chronos-youtube-highlighter · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Chronos YouTube Highlighter</title>
    <link href='http://fonts.googleapis.com/css?family=Cinzel+Decorative:900' rel='stylesheet' type='text/css'>
    <link href='http://fonts.googleapis.com/css?family=Montserrat+Subrayada:700' rel='stylesheet' type='text/css'>
    <link href='assets/stylesheets/bootstrap.min.css' rel='stylesheet' type='text/css'>
    <link href='assets/stylesheets/roboto.min.css' rel='stylesheet' type='text/css'>
    <link href='assets/stylesheets/material-custom.css' rel='stylesheet' type='text/css'>
    <link href='assets/stylesheets/ripples.min.css' rel='stylesheet' type='text/css'>
    <link href='assets/stylesheets/youtube-icon.css' rel='stylesheet' type='text/css'>
    <link href='assets/stylesheets/highlights.css' rel='stylesheet' type='text/css'>
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <div class="container-fluid">
      <div class="text-center">
        <h1><span class="logo"><a href="#">Chronos</a></span></h1>
        <h4><span class="sub-heading">Transform LoL eSports YouTube <span id='youtube'></span> videos into <span class="accent-fallback-color"><b>highlight reels</b></span>  using game data.</span></h4>
        <br/>
        <div class="well well-lg">
          <div class="form-group">
            <div id="fetch-container" data-toggle="popover" data-placement="top" data-content="Give me a YouTube link" data-animation="true" data-trigger="focus" class="input-group">
              <input class="form-control floating-label input-lg" id="url-field" type="text" placeholder="Paste a YouTube URL">
              <span class="input-group-btn">
                <a href="javascript:void(0)" id="fetch-button" class="btn btn-primary btn-md disabled">Fetch Video</a>
              </span>
            </div>
            <br />

            <div id="highlights-container" data-toggle="popover" data-placement="left" data-content="Pass in the game info..." data-animation="true" data-trigger="focus">
              <h5>Game Info</h5>
              <form class="form-inline">
                <div id="highlight-inputs-container">
                  <div class="form-group highlight">
                    <input class="form-control" type="text" id="gamedataurl" placeholder="Raw Game Data">
                  </div>
                  <div class="form-group highlight">
                    <input class="form-control" id="gameoffset" type="text" placeholder="Game Time Offset (sec)">
                  </div>
                </div>
<!--                 <div class="add-highlight-button-container">
                  <a href="javascript:void(0)" id="process-highlights-button" class="btn btn-success btn-sm">Prepare Highlights</a>
                </div>
 -->              </form>
            </div>
            <br/>
          </div>

          <!-- 16:9 aspect ratio -->
          <div id="player-container" data-toggle="popover" data-placement="left" data-content="...and press Play!" data-animation="true" data-trigger="focus" class="embed-responsive embed-responsive-16by9">
            <div id="player"></div>
          </div>
        </div>
      </div>
    </div>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="assets/javascripts/bootstrap.min.js"></script>
    <script src="assets/javascripts/ripples.min.js"></script>
    <script src="assets/javascripts/material.min.js"></script>
    <script src="assets/javascripts/chronos.js"></script>
    <script src="assets/javascripts/highlights.js"></script>
    <script>
      $(document).ready(function() {
          // This command is used to initialize some elements and make them work properly
          $.material.init();
      });
    </script>

  </body>
</html>