<!--
  MAIN IDEA:
  take my VHS overlay generator scriot i've written in BOTH bash and python, and write it AGAIN BUT IN JAVASCRIPT!
  though it will probably make me want to cry, it must be done

  THINGS I WANT IT TO DO:
  -[x] have basic settings for the overlay (inputs, buttons for generating and downloading, etc.)
  -[x] basic graphics (showing a preview of the currently configured overlay, progress bar when it's generating, basic notifications, etc.)
  -[x] get it to generate AT LEAST 1 basic image with the proper text, proper font, and maybe if im feeling fancy have it configured by variables
     -[x] get it to generate MULTIPLE images with stuff above
     -[x] get it to GENERATE ALL THE IMAGES NEEDED, AND THEN... ZIP THEM ALL INTO A ZIP FILE AND SAVE IT!!!! (fancy)
  -[x] code in the ability for it to count time (not fun but ill have to do it)
  -[x] put ALL THIS together and make it FANCY
  -[x] make a fancy debug console
  -[x] code the progress bar to work
  -[ ] nathaniel-proof it


  i will write down notes here as well

  if anyone find this
  
  hello


  [12-14-21; 12:58PM]
  hello welcome to the logs (tm)
  it is december 14th, the start of this project
  im going to try to predict the future and say that this is going to be extremely annoying and i will get very angry at this at some point
  fun
  can't wait
  anyways time to make the basic visuals of the page
  bye bye

  VHS RESOLUTION: 333x480

  bUT im not gonna use that because it *looks bad*

  so
  640x480 it is
  because it's 4:3 and it looks nice
  and that's the standard for what i use and to be honest if anyone else other than me uses this site that would be a miracle

  [1:23PM]
  i have figured out how to get the preview div to have the same aspect ratio, but will scale depending on the screen size.
  yay

  [4:30PM]
  im now figuring out the debug console
  very fun


  [12-5-21; 12:30PM]
  i forgot to write more messages yesterday
  i figured out how to set up date objects so that i can have a fancy library calculate the time that's displayed instead of having me code it myself because i've learned from trying to code my own time calculations that it's not really that good
  i also set up the preview of the overlay in the html, i havent got javascript to change it yet

  i need to set up one more time object for the time the overlay has been running

  so i'll do that
  
  
  [1:27PM]

  time calculaion is broken so im completely recoding it

  i love javascript


  [1:56PM]

  hello again

  so

  i managed to get it working i think better
  i found a new stack overflow posst which had better time calculation function thingy
  i also got it to display all the correct date and time information
  AND GET THIS
  IT DISPLAYS AM/PM HOW IT SHOULD BE
  it CONVERTS IT from a 24 hour clock
  TO A 12 HOUR AND 12 HOUR CLOCK I DONT KNOW WHAT ITS CALLED
  now i have to figure out the running time
  fun
  now


  [2:05PM]
  ok so technically when the counting up clock is running for over 24 hours it shouldnt roll back to 0, but i dont feel like coding a different hours variable, and i dont think anyone is insane enough to make one of these for longer than 12 hours, let alone an entire day so please dont break it


  [4:46PM]
  hello
  im back to coding after going home from school and decorating my christmas tree
  lets code in the timing for the length of the overlay 
  
  [5:32PM]

  YESSS i now have all the time stuff working, now i just gotta do the *image generation*
  this is probably going to take a while
  well here we go

  [7:37PM]

  hello im back with some added sad
  it took me forever to try and figure out why jszip wasnt working and with the help of my dad he figured out that i had them referenced in the wrong order


  [8:18PM]
  YES!!!!!!! I GOT IT TO SAVE ALL THE IMAGES TO A ZIP FILE AND IT WORKS!!!!! AAAAAAAAAAAAAAAAAAAA
  ALL I HAVE TO DO NOW IS MAKE IT LOOK A BIT NICER!!!
  YES!!!
  THEN UPLOAD TIME EHEEHHEHHEHEHHEHHEHEHHEHEHE

  actually imma make a seperate download buttoN

  then upload time EHEHEHHEHJGFKJSEfsebkfeszfkxnafsdbfjsJFslbfk


  [8:31PM]
  YOOOOO OK ITS ACTUALLY WORKING AND DONE!!!!
  TIME TO UPLOAD YAAAAAY

  i honestly am surprised it didnt take longer to make this but it didnt and im happy so yeah
    -->


<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8">
    <title>VHS Overlay Generator</title>
    <link rel="stylesheet" href="scrollbar.css">
    <style>
      @font-face {
        font-family: MerSans;
        src: url("font/MerriweatherSans-Bold.ttf");
      }
      @font-face {
        font-family: MerSansBolg;
        src: url("font/MerriweatherSans-ExtraBold.ttf");
      }
      @font-face {
        font-family: MerSansSemBolg;
        src: url("font/MerriweatherSans-SemiBold.ttf");
      }
      @font-face {
        font-family: VCR;
        src: url("font/VCR_OSD_MONO.ttf");
      }

      body {
        overflow-x: hidden;
        overflow-y: hidden;
        padding: 0px;
        border: 0px;
        margin: 0px;
        background-color: black;
        color: white;
        font-family: MerSans;
      }

      strong {
        font-family: MerSansBolg;
      }

      /* 640x480 */
      .vhs-preview {
        width: 48vw;
        height: 36vw;
        background-color: #1a1a1a;
        float: right;
        top: 0px;
        right: 0px;
        z-index: 50;
        position: absolute;
        overflow-y: scroll;
        color: black;
      }

      .controls-box {
        background-color: #1e1e1e;
        width: 50vw;
        height: 100vh;
        position: absolute;
        z-index: 200;
        overflow-y: scroll;
      }
      
      .inputs {
        text-align: right;
        padding-right: 5px;

      }

      .count-button {
        background-color: #4CAF50;
        border: none;
        color: white;
        padding: 15px 32px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 16px;
      }
      .apply-button {
        background-color: #4CAF50;
        border: none;
        color: white;
        padding: 15px 32px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 16px;
      }
      .console-button {
        background-color: #af4c4c;
        border: none;
        color: white;
        padding: 15px 32px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 16px;
      }
      .console-clear-button {
        background-color: #af4c4c;
        border: none;
        color: white;
        padding: 15px 32px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 16px;
      }
      .generate-button {
        background-color: #4c77af;
        border: none;
        color: white;
        padding: 15px 32px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 16px;
        margin-left: 5px;
      }

      .progressbar {
        background-color: #3284d0;
        height: 50px;
        width: 100vw;
        z-index: 300;
        position: absolute;
        left: 0px;
        bottom: 0px;

      }

      .actual-preview {
        font-family: VCR;
        color: white;
      }

      .vhs-canvas {
        
        background-color: blue;
        z-index: 500;
        left: 5px;
        margin-bottom: 100px;
      }

      .download-button {
        background-color: #3182c4;
        border: none;
        color: white;
        padding: 15px 32px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 16px;
        margin-left: 5px;
        margin-top: 5px;
      }

    </style>
  </head>
  <body>

    <div class="controls-box">
      <div style="text-align: center;">
        <h2>vcr overlay generator</h2>
      </div>
      <!--
        INPUTS:
        time of day/hour/minute/second: input type=time
        month/day/year: input type=date
        running time (hours): input type=number
        running time (minutes): input type=number
        running time (seconds): input type=number
        count (up/down): input type=????

      -->
  
      <div class="inputs">
        <h4 style="text-align: center;"><strong>time & date</strong></h4>
        <p style="padding-left: 20px">the time of day that the vhs footage would have been recorded at: <input type="time" style="margin-right: 10px;" id="timeinput"></p>
        <p style="padding-left: 20px">the date that the vhs footage would have been recorded at: <input type="date" style="margin-right: 10px;" id="dateinput"></p>
        <h4 style="text-align: center;"><strong>run time</strong></h4>
        <p style="padding-left: 20px">how many hours the vhs video will be (set to 0 if less than an hour) <input type="number" style="margin-right: 10px;" min="0" max="168" id="hoursinput"></p>
        <p style="padding-left: 20px">how many minutes the video will run for, in addition to previously set run time, (set to 0 if less than a minute) <input type="number" style="margin-right: 10px;" min="0" max="59" id="minutesinput"></p>
        <p style="padding-left: 20px">how many seconds the video will run for, in addition to previously set run time <input type="number" style="margin-right: 10px;" min="0" max="59" id="secondsinput"></p>
        <p style="padding-left: 20px">is the clock counting up or down? <button class="count-button" onclick="countingButton()" id="countbutton">down</button></p>
        <p style="text-align: center;"><button class="apply-button" onclick="applyButton()" id="applybutton">apply</button><button class="generate-button" onclick="generateButton()" id="generatebutton">generate</button><button class="download-button" onclick="saveImageTing()" id="downloadbutton">download</button></p>
        <p style="text-align: center;">debug console <button class="console-button" onclick="consoleButton()" id="consolebutton">disabled</button></p>
        <p style="text-align: center;"><button class="console-clear-button" onclick="consoleClearButton()" id="consoleclearbutton">clear console</button></p>
        <canvas id="vhscanvas" class="vhs-canvas" width="640" height="480"></canvas>
        <br><br><br><br><br><br>
        
      
      </div>

    </div>


    <div class="vhs-preview">
      
      <p id="debugconsole" style="padding-left: 5px; padding-right: 5px; color: red;"></p>
      <div class="actual-preview">
        <div style="position: absolute; padding-left: 10px; top: 5px;">
          <h1 style="position: fixed;" id="plaything">PLAY</h1>
        </div>
        <div style="position: absolute; right: 0px;padding-right: 10px; top: 5px; width: 200px;">
          <h1 style="position: fixed;" id="preview-time-playing">--:--:--</h1>
        </div>
        <div style="position: absolute; padding-left: 10px; bottom: 10px; width: 200px;">
          <h1 style="position: fixed; transform: translateY(-100px);" id="preview-time">AM 00:00</h1>
        </div>
        <div style="position: absolute; padding-left: 10px; bottom: 40px; width: 400px;">
          <h1 style="position: fixed; transform: translateY(-30px);" id="preview-date">Jan. 01 1970</h1>
        </div>
       
      </div>
    </div>


    <div class="progressbar" id="progressbar">
      <p style="position: absolute; padding-left: 5px; transform: translateY(-7px);"><span id="progressbar-text">progress...</span><span> | </span><span id="progressbar-percentage">0%</span></p>
    </div>

    
    <script src="dist/FileSaver.js"></script>
    <script src="dist/jszip.js"></script>
    <script src="inputs.js"></script>
    <script src="debug.js"></script>
    <script src="variables.js"></script>
    <script src="dateOperations.js"></script>
    <script src="imageSaving.js"></script>
    <script src="imageGeneration.js"></script>
    <script src="generate.js"></script>


  </body>
</html>