juice-shop

1
doctype html
2
html(lang='en')
3
    head
4
        title _title_
5
        meta(charset='utf-8')
6
        meta(name='description', content='')
7
        meta(name='keywords', content='')
8
        meta(name='viewport' content='width=device-width, initial-scale=1.0')
9
        link(rel='icon', type='image/x-icon', href='./assets/public/_favicon_')
10
        link(rel='stylesheet', href='https://code.getmdl.io/1.3.0/material.min.css')
11
        link(rel='stylesheet', href='https://fonts.googleapis.com/icon?family=Material+Icons')
12
        link(rel='stylesheet', href='http://fonts.googleapis.com/css?family=Roboto:300,400,500,700', type='text/css')
13
        script(src='//ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js')
14
        script(defer='', src='https://code.getmdl.io/1.3.0/material.min.js')
15
        style.
16
            video {
17
            min-width: 320px;
18
            width: 44vw;
19
            display: block;
20
            margin-left: auto;
21
            margin-right:auto;
22
            margin-bottom: 5px;
23
            height: 50vh;
24
            outline: none;
25
            }
26
            @media (max-width: 900px) {
27
              .mdl-layout-title {
28
                display: none !important;
29
              }
30
            }
31
    body(style='background: _bgColor_;color:_textColor_;')
32
        .mdl-layout.mdl-js-layout.mdl-layout--fixed-header
33
          header.mdl-layout__header.mdl-shadow--8dp(style= 'background: _navColor_; height: auto; min-width: 100%; padding-bottom: 5px; width: 100%;')
34
            .mdl-layout__header-row
35
              a(href='./#/' style='color: _textColor_; text-decoration:none; margin-left: -50px;')
36
                i(class='material-icons', style='display: block;margin-bottom: auto;margin-top: auto; margin-right: 10px;') arrow_back
37
              a(href='./#/' style='color: _textColor_; text-decoration:none;')
38
                span(style='margin-right: 20px;')
39
                  | Back
40
              // Logo
41
              a(href='./#/')
42
                img(src='assets/public/images/JuiceShop_Logo.png', style='max-height: 60px; width: auto;', alt='_title_ Logo')
43
              // Title
44
              a(href='./#/' style='color: _textColor_; text-decoration:none;')
45
               span.mdl-layout-title(style='font: 500 20px/32px Roboto,"Helvetica Neue",sans-serif;')
46
                 | _title_
47

48
        section.section--center.mdl-grid.mdl-grid--no-spacing
49
           .mdl-card#card.mdl-cell.mdl-cell--12-col.mdl-shadow--8dp(style='width: 45vw; min-width: 320px; height: 58vh; background: _primLight_; margin-bottom: 50px; margin-top: 110px; display: block; margin-left: auto; margin-right:auto; ')
50
            h1(style='color: _textColor_; font-size: 24px; line-height: 32px; margin-top: 16px; margin-bottom: 16px; font-weight: 400; margin-left: 16px;') Promotion Video
51
            video(width='85vw', height='240', controls='controls')
52
               source(src='./video', type='video/mp4')
53

54
        script#subtitle.
55

56

57
        script.
58
            function parse_timestamp(s) {
59
            var match = s.match(/^(?:([0-9]+):)?([0-5][0-9]):([0-5][0-9](?:[.,][0-9]{0,3})?)/);
60
            if (match == null) {
61
            throw 'Invalid timestamp format: ' + s;
62
            }
63
            var hours = parseInt(match[1] || "0", 10);
64
            var minutes = parseInt(match[2], 10);
65
            var seconds = parseFloat(match[3].replace(',', '.'));
66
            return seconds + 60 * minutes + 60 * 60 * hours;
67
            }
68
            function quick_and_dirty_vtt_or_srt_parser(vtt) {
69
            var lines = vtt.trim().replace('\\r\n', '\n').split(/[\r\n]/).map(function(line) {
70
            return line.trim();
71
            });
72
            var cues = [];
73
            var start = null;
74
            var end = null;
75
            var payload = null;
76
            for (var i = 0; i < lines.length; i++) {
77
            if (lines[i].indexOf('-->') >= 0) {
78
            var splitted = lines[i].split(/[ \\t]+-->[ \t]+/);
79
            if (splitted.length != 2) {
80
            throw 'Error when splitting "-->": ' + lines[i];
81
            }
82
            // Already ignoring anything past the "end" timestamp (i.e. cue settings).
83
            start = parse_timestamp(splitted[0]);
84
            end = parse_timestamp(splitted[1]);
85
            } else if (lines[i] == '') {
86
            if (start && end) {
87
            var cue = new VTTCue(start, end, payload);
88
            cues.push(cue);
89
            start = null;
90
            end = null;
91
            payload = null;
92
            }
93
            } else if(start && end) {
94
            if (payload == null) {
95
            payload = lines[i];
96
            } else {
97
            payload += '\\n' + lines[i];
98
            }
99
            }
100
            }
101
            if (start && end) {
102
            var cue = new VTTCue(start, end, payload);
103
            cues.push(cue);
104
            }
105
            return cues;
106
            }
107
            function init() {
108
            var video = document.querySelector('video');
109
            var subtitle = document.getElementById('subtitle');
110
            var track = video.addTextTrack('subtitles', subtitle.dataset.label, subtitle.dataset.lang);
111
            track.mode = "showing";
112
            quick_and_dirty_vtt_or_srt_parser(subtitle.innerHTML).map(function(cue) {
113
            track.addCue(cue);
114
            });
115
            }
116
            init();
117