ffmprovisr/app/views/forms/index.html.erb

<div class="container">

  <div class="text-center">
    <h1>➺ ffmproviser ❥</h1>
    <br/>
  </div>

<!-- form begins -->
<div class="row">

      <div class="well col-md-4 col-md-offset-1">
        <fieldset>
          <legend>What do you want to do?</legend>
          <h4>Select from the following.</h4>
          <br />
          <ul>
            <li>
              <div id="show_display_info"><button type="button" class="btn btn-default">Display Info</button></div><br/>
            </li>
            <li>
              <div id="show_add_subtitles"><button type="button" class="btn btn-default">Add subtitles track</button></div><br/>
            </li>
            <li>
              <div id="show_remove_audio_track"><button type="button" class="btn btn-default">Remove audio track</button></div><br/>
            </li>
            <li>
              <div id="show_add_audio_track"><button type="button" class="btn btn-default">Add audio track (replace)</button></div><br/>
            </li>
            <li>
              <div id="show_webm_for_web"><button type="button" class="btn btn-default">Export to webm for web</button></div><br/>
            </li>
            <li>
              <div id="show_h264_for_web"><button type="button" class="btn btn-default">Export to h264 for web</button></div><br/>
            </li>
          </ul>
        </fieldset>
       </div>

       <div class="well col-md-6 col-md-offset-1">

        <h3>Making ffmpeg easier</h3>
        <p>FFmpeg is a pretty powerful framework for audio-visual materials. Unfortunately, it also has a steep learning curve. This app helps users through the bash command generation process so that more people can reap the benefits of the ffmpeg library. </p>
        <p>This project is very much a work in progress. Each button displays a form to help fulfill a popular user request. To use, click on the button and fill out the form. After clicking the Generate button, a command line will appear in the box below. That line can be copied and pasted into a Terminal, with the assumption that the video file is located in the same directory that the user currently is in.</p>
        <p>For FFmpeg basics, check out their <a href="https://www.ffmpeg.org/">official website.</a></p>
        <p>For bash and command line basics, try the <a href="http://cli.learncodethehardway.org/book/">Command Line Crash Course</a></p>
    </div>

</div> <!-- row -->
  <div id="formloader">
    <div class="display_info" style="display:none;">
    <%= render "display_info" %>
    </div>
    <div class="web" style="display:none;">
    <%= render "web" %>
    </div>
    <div class="add_subtitles" style="display:none;">
    <%= render "add_subtitles" %>
    </div>
    <div class="remove_audio_track" style="display:none;">
    <%= render "remove_audio_track" %>
    </div>
    <div class="webm_for_web" style="display:none;">
    <%= render "webm_for_web" %>
    </div>
    <div class="h264_for_web" style="display:none;">
    <%= render "h264_for_web" %>
    </div>
    <div class="add_audio_track" style="display:none;">
    <%= render "add_audio_track" %>
    </div>

  </div>

      <div class="text-center">
        <div class="reload">
          <p><button type="button" class="btn btn-default">Start over!</button></p>
        </div>
      </div>

</div> <!-- container -->