riff
/
audiogram


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130
							<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Audiogram / Theme Editor</title>
    <meta charset="utf-8" />
    <meta name="robots" content="noindex, nofollow" />
    <meta name="googlebot" content="noindex, nofollow" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
    <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,300,600" rel="stylesheet" type="text/css">
    <link href="/css/base.css" rel="stylesheet" type="text/css">
    <link href="/css/editor.css" rel="stylesheet" type="text/css">
    <link href="/fonts/fonts.css" rel="stylesheet" type="text/css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@simonwep/pickr/dist/themes/nano.min.css"/>
    <script src="https://cdn.jsdelivr.net/npm/@simonwep/pickr/dist/pickr.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@simonwep/pickr/dist/pickr.es5.min.js"></script>
  </head>
  <body class="loading">

    <div class="container">

      <h1>Theme Editor</h1>
      <div>
        <a href="/">Go back</a>
      </div>
      <div id="loading">
        <div id="loading-bars">
          <div class="r1"></div><div class="r2"></div><div class="r3"></div><div class="r4"></div><div class="r5"></div>
        </div>
        <div id="loading-message">Loading...</div>
      </div>

      <div id="loaded">

        <div class="row form-row" id="row-theme">
          <label for="input-theme">Theme</label>
          <select id="input-theme" name="theme"></select>
        </div>

        <div class="row form-row" style="padding-bottom: 40px">
          <button type="button" id="btn-delete-theme" class="left" data-confirm="Are you sure you want to delete this theme?"><i class="fa fa-trash"></i>Delete</button>
        </div>

        <div id="preview">
          <div>
            <div id="canvas">
              <canvas width="640" height="360"></canvas>
              <div id="preview-label">Preview</div>
            </div>
          </div>
          <div id="minimap" class="hidden">
            <svg width="640" height="80" xmlns="http://www.w3.org/2000/svg">
              <defs>
                <clipPath id="clip">
                  <rect height="80" width="640" x="0" y="0"></rect>
                </clipPath>
              </defs>
              <g class="waveform background">
                <line x1="0" x2="640" y1="40" y2="40"></line>
                <path></path>
              </g>
              <g class="waveform foreground" clip-path="url(#clip)">
                <line x1="0" x2="640" y1="40" y2="40"></line>
                <path></path>
              </g>
              <g class="brush"></g>
              <g class="time">
                <line x1="0" x2="0" y1="0" y2="80"></line>
              </g>
            </svg>
          </div>
        </div>

        <div class="row form-row" id="row-font">
          <label for="input-font">Font</label>
          <select id="input-font" name="font"></select>
        </div>

        <div class="row form-row">
          <div style="padding-bottom: 7px">No pattern</div>
          <input type="checkbox" class="form-check-input" id="chkNoPattern">
        </div>

        <div class="row form-row">
          <div style="padding-bottom: 10px">Caption color</div>
          <div style="border: thin solid; max-width: 40px">
            <div class="captionColorPicker"></div>
          </div>
        </div>

        <div class="row form-row">
          <div style="padding-bottom: 10px">Subtitle color</div>
          <div style="border: thin solid; max-width: 40px">
            <div class="subtitleColorPicker"></div>
          </div>
        </div>

        <div class="row form-row" style="padding: 20px 0 10px 0">
          <p>
            Please note: Theme assets can be only of png or jpeg file format
          </p>
        </div>

        <div class="row form-row" id="row-new-theme" style="padding: 0 0 20px 0">
          <label for="input-new-theme">New theme</label>
          <input id="input-new-theme" name="new-theme" type="file" />
        </div>

        <div class="row form-row" id="row-caption">
          <label for="input-caption">
            Theme Name
          </label>
          <input id="input-new-caption" name="new-caption" type="text" autocomplete="off" placeholder="Add a new theme name" />
        </div>

        <div class="row form-row">
          <button type="button" id="btn-new-theme" class="left"><i class="fa fa-arrow-circle-up"></i>Add</button>
        </div>
        
        

      </div>

    </div>

    <script src="/js/bundle.js"></script>
    <script src="/fonts/fonts.js"></script>
  </body>
</html>