Turn audio into a shareable video. forked from nypublicradio/audiogram

theme.html 3.9KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <title>Audiogram / Theme Editor</title>
  5. <meta charset="utf-8" />
  6. <meta name="robots" content="noindex, nofollow" />
  7. <meta name="googlebot" content="noindex, nofollow" />
  8. <meta name="viewport" content="width=device-width, initial-scale=1">
  9. <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
  10. <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,300,600" rel="stylesheet" type="text/css">
  11. <link href="/css/base.css" rel="stylesheet" type="text/css">
  12. <link href="/css/editor.css" rel="stylesheet" type="text/css">
  13. <link href="/fonts/fonts.css" rel="stylesheet" type="text/css">
  14. </head>
  15. <body class="loading">
  16. <div class="container">
  17. <h1>Theme Editor</h1>
  18. <div>
  19. <a href="/">Go back</a>
  20. </div>
  21. <div id="loading">
  22. <div id="loading-bars">
  23. <div class="r1"></div><div class="r2"></div><div class="r3"></div><div class="r4"></div><div class="r5"></div>
  24. </div>
  25. <div id="loading-message">Loading...</div>
  26. </div>
  27. <div id="loaded">
  28. <div class="row form-row" id="row-theme">
  29. <label for="input-theme">Theme</label>
  30. <select id="input-theme" name="theme"></select>
  31. </div>
  32. <div class="row form-row" style="padding-bottom: 40px">
  33. <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>
  34. <button type="button" id="btn-save-theme" class="left" data-confirm="Are you sure you want to save changes?"><i class="fa fa-save"></i>Save</button>
  35. </div>
  36. <div id="preview">
  37. <div style="background-color: black;">
  38. <div id="canvas">
  39. <canvas width="640" height="360"></canvas>
  40. <div id="preview-label">Preview</div>
  41. </div>
  42. </div>
  43. <div id="minimap" class="hidden">
  44. <svg width="640" height="80" xmlns="http://www.w3.org/2000/svg">
  45. <defs>
  46. <clipPath id="clip">
  47. <rect height="80" width="640" x="0" y="0"></rect>
  48. </clipPath>
  49. </defs>
  50. <g class="waveform background">
  51. <line x1="0" x2="640" y1="40" y2="40"></line>
  52. <path></path>
  53. </g>
  54. <g class="waveform foreground" clip-path="url(#clip)">
  55. <line x1="0" x2="640" y1="40" y2="40"></line>
  56. <path></path>
  57. </g>
  58. <g class="brush"></g>
  59. <g class="time">
  60. <line x1="0" x2="0" y1="0" y2="80"></line>
  61. </g>
  62. </svg>
  63. </div>
  64. </div>
  65. <div class="row form-row" style="padding: 20px 0 10px 0">
  66. <p>
  67. Please note: Theme assets can be only of png or jpeg file format
  68. </p>
  69. </div>
  70. <div class="row form-row" id="row-new-theme" style="padding: 0 0 20px 0">
  71. <label for="input-new-theme">New theme</label>
  72. <input id="input-new-theme" name="new-theme" type="file" />
  73. </div>
  74. <div class="row form-row" id="row-caption">
  75. <label for="input-caption">
  76. Theme Name
  77. </label>
  78. <input id="input-new-caption" name="new-caption" type="text" autocomplete="off" placeholder="Add a new theme name" />
  79. </div>
  80. <div class="row form-row">
  81. <input type="checkbox" class="form-check-input" id="chkNoPattern">
  82. <label class="form-check-label" for="chkNoPattern">No pattern</label>
  83. </div>
  84. <div class="row form-row">
  85. <button type="button" id="btn-new-theme" class="left"><i class="fa fa-arrow-circle-up"></i>Add</button>
  86. </div>
  87. </div>
  88. </div>
  89. <script src="/js/bundle.js"></script>
  90. <script src="/fonts/fonts.js"></script>
  91. </body>
  92. </html>