index.html

<!DOCTYPE html>
<html>
<head>
<!-- Basic Page Needs
  –––––––––––––––––––––––––––––––––––––––––––––––––– -->
  <meta charset="utf-8">
  <meta http-equiv="content-language" content="en" />
  <title>Markdown File Converter</title>
  <meta name="description" content="This tool converts markdown files to HTML, PDF, EPUB, and DOCX formats and allows styling of each via CSS.">
  <meta name="author" content="Cody Taylor">

  <!-- Mobile Specific Metas
  –––––––––––––––––––––––––––––––––––––––––––––––––– -->
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <!-- FONT
  –––––––––––––––––––––––––––––––––––––––––––––––––– -->
  <link href='//fonts.googleapis.com/css?family=Raleway:400,300,600' rel='stylesheet' type='text/css'>

  <!-- Page CSS
  –––––––––––––––––––––––––––––––––––––––––––––––––– -->
  <link rel="stylesheet" type="text/css" href="normalize.css">
  <link rel="stylesheet" type="text/css" href="skeleton.css">
  <link rel="stylesheet" type="text/css" href="custom.css">

  <!-- Preview CSS
  –––––––––––––––––––––––––––––––––––––––––––––––––– -->
  <link rel="stylesheet" type="text/css" href="preview/ieee.css">
  <link rel="stylesheet" type="text/css" href="preview/acm.css">
  <link rel="stylesheet" type="text/css" href="preview/typebase.css">
  <link rel="stylesheet" type="text/css" href="preview/getaway.css">

  <!-- Preview Javascript (changes the style of the "preview document" based on radio buttons)
  –––––––––––––––––––––––––––––––––––––––––––––––––– -->
  <script>
  function preview(stylesheet){
    switch(stylesheet){
      case 'custom':
        document.getElementById('preview-container').style.display="none";
        break;
      default:
        /*classList selector is not widely supported by modern browsers.
          using className instead. className expects a space delimited
          list of class names.*/
        document.getElementById('preview-container').style.display="block";
        document.getElementById('preview').className='twleve'+' '+'columns'; /*Removes all active CSS classes*/
        document.getElementById('preview').className+=' '+stylesheet; /*Applies all classes of slected style*/
        document.getElementById("stylesheets").scrollIntoView();
    }
  }

  function convert(state){
    switch(state){
      case 'alert':
        document.getElementById('form-container').style.display="none";
        document.getElementById('form-container-title').style.display="none";
        document.getElementById('preview-container').style.display="none";
        document.getElementById('reference-container').style.display="none";
        document.getElementById('alert').style.display="block";
        break;
      default:
        document.getElementById('alert').style.display="none";
        document.getElementById('form-container').style.display="block";
        document.getElementById('form-container-title').style.display="block";
        //document.getElementById('preview-container').style.display="block";
        document.getElementById('reference-container').style.display="block";
    }
  }

  function toggle(id) {
    var element = document.getElementById(id);
    if (element) {
      var display = element.style.display;
      if (display == "none") {
          element.style.display = "block";
      } else {
          element.checked = false;
          element.style.display = "none";
      }
    }
  }

  </script>

  <!-- MathJax Include, of course. -for prefiew
  –––––––––––––––––––––––––––––––––––––––––––––––––– -->
  <script type="text/javascript" async src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-MML-AM_CHTML"></script>

</head>
<body>
  <!-- Beta Banner -->
  <a href="http://github.com/OKCody/Pandoc-Web-Interface"><p style="height: 25px; width: 300px; position: fixed; top: 35px; right: -100px; background-color: orange; transform: rotate(45deg); text-align: center; box-shadow: 0px 0px 10px rgba(0,0,0,0.3); color: white; font-weight: bold; z-index: 1;">Beta</p></a>
  <!-- /Beta Banner -->
  <div class="container">
    <div class="row" id="title">
      <div class="twelve columns">
        <h1>Markdown File Converter</h1>
      </div>
    </div>
    <div class="row" id="menu">
      <div class="four columns">
        <a href="/">Converter</a>
      </div>
      <div class="four columns">
        <a href="#">Tutorials</a>
      </div>
      <div class="four columns">
        <a href="beta.html">Terms</a>
      </div>
    </div>
    <div id="form-container-title" class="row">
      <div class="twelve columns">
        <h2>Parameters</h2>
      </div>
    </div>
    <form id="form-container" class="form" action="upload.php" method="post" enctype="multipart/form-data">
      <div class="row">
        <div class="twelve columns">
          <h6>File to Upload:</h6>
        </div>
      </div>
      <div class="twelve columns options">
        <div class="twelve columns">
          <input type="file" name="fileToUpload" id="fileToUpload"></input>
        </div>
      </div>
      <div class="row">
        <div class="twelve columns uploadForm">
          <h6>Output Formats:</h6>
        </div>
      </div>
      <div class="row options">
        <div class="three columns">
          <div style="min-width: 100px;">
            <input type="checkbox" id="HTML" name="HTML" value="HTML" onclick="toggle('option-Stand-Alone');">
            <label for="HTML">HTML</label>
          </div>
          <div id="option-Stand-Alone" style="display: none;">
            <input type="checkbox" id="Stand-Alone" name="Stand-Alone" value="Stand-Alone" onclick="toggle('stylesheets'); toggle('stylesheet-options');">
            <label for="Stand-Alone">Stand-Alone</label>
          </div>
        </div>
        <div class="three columns">
          <input type="checkbox" id="PDF" name="PDF" value="PDF">
          <label for="PDF">PDF</label>
        </div>
        <div class="three columns">
          <input type="checkbox" id="EPUB" name="EPUB" value="EPUB">
          <label for="EPUB">EPUB</label>
        </div>
        <div class="three columns">
          <input type="checkbox" id="DOCX" name="DOCX" value="DOCX">
          <label for="DOCX">DOCX</label>
        </div>
      </div>
      <div id="stylesheets" class="row">
        <div class="twelve columns uploadForm">
          <h6>Stylesheet: </h6>
        </div>
      </div>
      <div id="stylesheet-options" class="row options">
        <!--"Custom" selection should indeed invoke a vanilla stylesheet for
              preview. -one that matches Pandoc's default formatting-->
        <div class="three columns">
          <input type="radio" id ="custom" name="stylesheet" value="custom" checked="checked" onclick="preview('custom');">
          <label for="custom">Custom</label>
        </div>
        <div class="three columns">
          <input type="radio" id="IEEE" name="stylesheet" value="IEEE" onclick="preview('ieee');">
          <label for="IEEE">IEEE.css</label>
        </div>
        <div class="three columns">
          <input type="radio" id="ACM" name="stylesheet" value="ACM" onclick="preview('acm');">
          <label for="ACM">ACM.css</label>
        </div>
        <div class="three columns">
          <input type="radio" id="Typebase" name="stylesheet" value="Typebase" onclick="preview('typebase');">
          <label for="Typebase">Typebase.css</label>
        </div>
        <div class="three columns:first-child">
          <input type="radio" id="Getaway" name="stylesheet" value="Getaway" onclick="preview('getaway');">
          <label for="Getaway">Getaway.css</label>
        </div>
      </div>
      <!--hidden row of stylesheet options-->
      <div id="more-options" class="row options">
        <div class="three columns">
          <input type="radio" id="Typebase" name="stylesheet" value="Typebase" onclick="preview('typebase');">
          <label for="Typebase">Typebase.css</label>
        </div>
        <div class="three columns">
          <input type="radio" id="Getaway" name="stylesheet" value="Getaway" onclick="preview('getaway');">
          <label for="Getaway">Getaway.css</label>
        </div>
      </div>
      <div class="row">
        <div class="twelve columns">
          <input type="submit" value="Convert" name="submit" onclick="convert('alert');"></input>
        </div>
      </div>
    </form>
    <div id="alert" class="alert border">
      <h2>Converting ...</h2>
      <p>Your file will be downloaded momentraily.</p>
      <input type="submit" value="OK" name="submit" onclick="convert('default');"></input>
    </div>
    <div id="preview-container">
      <div class="row">
        <div class="twelve columns">
          <h2>Preview</h2>
        </div>
      </div>
      <div class="row border">
        <div id="preview" class="twelve columns">
          <h1 id="this-is-a-heading">This is a heading</h1>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
          <p><span class="math display">\[\int 1 = x + C\]</span> <span class="math display">\[\int x = \frac{x^2}{2} + C\]</span> <span class="math display">\[\int x^2 = \frac{x^3}{3} + C\]</span></p>
          <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
          <pre><code>for filename in *
          do
          echo $filename &gt;&gt; files.txt
          done</code></pre>
          <h2 id="this-is-a-subheading">This is a subheading</h2>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<a href="#fn1" class="footnoteRef" id="fnref1"><sup>1</sup></a> Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
          <ul>
          <li>Item one</li>
          <li>Item two</li>
          <li>Item three</li>
          </ul>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
          <blockquote>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
          </blockquote>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
          <div class="footnotes">
          <hr />
          <ol>
          <li id="fn1"><p>This is a footnote.<a href="#fnref1">↩</a></p></li>
          </ol>
          </div>
        </div>
      </div>
    </div>
    <div id="reference-container">
      <div class="row">
        <div class="twelve columns">
          <h2>Reference</h2>
        </div>
      </div>
      <div class="row border">
        <div id="reference" class="twelve columns">
          <p>Paragraph text requires no syntax.</p>
          <pre><code>Paragraph text requires no syntax.</code></pre>
          <p><em>Italic</em></p>
          <pre><code>*Italic*</code></pre>
          <p><strong>Bold</strong></p>
          <pre><code>**Bold**</code></pre>
          <p><a href="http://libraries.ou.edu">OU Libraries</a></p>
          <pre><code>[OU Libraries](http://libraries.ou.edu)</code></pre>
          <div class="figure">
          <img src="https://libraries.ou.edu/sites/all/themes/oulib_bootstrap/img/ou_lib_logo.png" alt="This text is a caption." />
          <p class="caption">This text is a caption.</p>
          </div>
          <pre><code>![Image](https://libraries.ou.edu/sites/all/themes/oulib_bootstrap/img/ou_lib_logo.png)</code></pre>
          <h1 id="heading-1">Heading 1</h1>
          <h2 id="heading-2">Heading 2</h2>
          <h3 id="heading-3">Heading 3</h3>
          <h4 id="heading-4">Heading 4</h4>
          <h5 id="heading-5">Heading 5</h5>
          <h6 id="heading-6">Heading 6</h6>
          <pre><code># Heading 1
          ## Heading 2
          ### Heading 3
          #### Heading 4
          ##### Heading 5
          ###### Heading 6</code></pre>
          <blockquote>
          <p>Blockquote</p>
          </blockquote>
          <blockquote>
          <blockquote>
          <p>Nested blockquote</p>
          </blockquote>
          </blockquote>
          <pre><code>&gt; Blockquote

          &gt;&gt; Nested Blockquote</code></pre>
          <hr />
          <pre><code>---</code></pre>
          <p><code>Inline code</code> with backticks</p>
          <pre><code>`Inline code` with backticks</code></pre>
          <pre><code>// This is a codeblock
          print(&quot;3 backticks or&quot;);
          print(&quot;indent 4 spaces&quot;);</code></pre>
          <pre><code>    // This is a codeblock
              print(&quot;3 backticks or&quot;);
              print(&quot;indent 4 spaces&quot;);</code></pre>
        </div>
      </div>
    </div>
    <div id="footer" class="row">
      <div class="twelve columns">
        <div id="octocat">
          <a href="http://github.com/OKCody/Pandoc-Web-Interface"><img src="assets/mark-github.svg"></img></a>
        </div>
      </div>
    </div>
  </div>

</body>
</html>