guido-x/sidepanel.html at main · genosse-c/guido-x · 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
84
85
86
87
<!doctype html>
<html>
  <head>
    <title>Guidde Extractor</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
    <link rel="stylesheet" href="stylesheets/styles.css">
  </head>
  <body>
    <h3>Guidde Extractor</h3>
    <p>Extracts video, screenshots, texts and titles from a Guidde presentation</p>
    <form action="#" id="guido_form">
      <button id="guido-x" type="submit" class="btn btn-primary ">Extract!</button>
      <label>
        Theme color:
        <input type="text" name="theme-color" value="#66ccff59"/>
      </label>
      <label>
        Select Font:
        <select name="font">
          <option value="Manrope" selected="true">Manrope</option>
          <option value="Lexend">Lexend</option>
          <option value="Montserrat">Montserrat</option>
          <option value="Roboto">Roboto</option>
          <option value="Open Sans">Open Sans</option>
          <option value="Quicksand">Quicksand</option>
          <option value="Hahmlet">Hahmlet</option>
          <option value="Sora">Sora</option>
        </select>
      </label>
      <label>
        Select form of presentation:
        <select name="presentation">
          <option value="plain">Video and Steps</option>
          <option value="plain-menu">Video and Steps with menu</option>"
          <option value="slideshow">Video and Slideshow</option>
          <option value="toggle" selected="true">Toggle between video and slideshow</option>
        </select>
      </label>
    </form>
    <div class="progress hide" id="progress_bar">
        <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%;">
        </div>
    </div>
    <p class="hide" id="result"></p>
    <template id="slide">
        <section class="slide">
          <h1 class="title"></h1>
          <figure>
            <img class="img"/>
            <figcaption class="caption"></figcaption>
          </figure>
        </section>
    </template>
    <template id="video">
        <section class="video">
          <figure>
            <video controls="true" src="video/video.mp4" poster="video/poster.png">
              <track default="" kind="captions" srclang="en" src="video/subtitles.vtt"/>
            </video>
          </figure>
        </section>
    </template>
    <template id="index">
      <htmlElement lang="en">
        <headElement>
          <meta charset="utf-8" />
          <meta name="creator" content="Generated with Guido-x Chrome Extension https://github.com/genosse-c/guido-x" />
          <title></title>
          <link rel="stylesheet" href="resources/styles.css">
          <link class="res-tiny-slider" rel="stylesheet" href="resources/tiny-slider.css">
          <script class="res-tiny-slider" type="text/javascript" src="resources/tiny-slider.js"></script>
          <script class="res-javascript" type="text/javascript" src="resources/javascript.js"></script>
          <style>:root {--theme-color: #66ccff59;}</style>
        </headElement>
        <bodyElement>
          <main class="slideshow"></main>
        </bodyElement>
      </htmlElement>
    </template>
  </body>
  <script type="text/javascript" src="javascripts/jszip.min.js"></script>
  <script type="text/javascript" src="javascripts/jszip-utils.min.js"></script>
  <script type="text/javascript" src="javascripts/FileSaver.js"></script>
  <script type="text/javascript" src="javascripts/helper.js"></script>
  <script type="text/javascript" src="javascripts/zip-creator.js"></script>
  <script type="text/javascript" src="javascripts/sidepanel.js" ></script>
</html>