ffmprovisr/index.html

<!DOCTYPE html>
<html>
  <head>
    <title>ffmprovisr</title>
    <meta charset="utf-8">

    <link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
    <link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
    <link href='http://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'>
    <link href='http://fonts.googleapis.com/css?family=Sanchez' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/css.css">
    <link href="css/jquery.steps.css" rel="stylesheet" >

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="js/forms.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
  </head>

  <div class="container">

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

<!-- BUTTONS! -->
<div class="row">

       <div class="well col-md-3 col-md-offset-0">
        <br>
          <h5>Making FFmpeg easier</h5>
          <p>FFmpeg is a powerful framework for manipulating audiovisual files. Unfortunately, it also has a steep learning curve, especially for users unfamiliar with the command line. 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 class="well col-md-6 col-md-offset-2">
          <h3>What do you want to do?</h3>
          <h5>Select from the following.</h5>
              <span id="show_display_info"><button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="Displays information about a media file">Display Info</button></span>
       </div>


</div> <!-- row -->

<!-- FORMS!-->
  <div id="formloader">

<!-- sample example -->
    <div class="display_info" style="display:none;">

      <div class="well">
        <h2>ffmpeg -i [sample file path]</h2>
      </div>

      <div class="well">
        <ul>
          <li>ffmpeg : starts the command</li>
          <li>-i : i for info dudes!</li>
          <li>[sample file path] : path to sample file</li>
        </ul>
      </div>

      <div class="well">
        <p>This is all about info! This is all about info! This is all about info! This is all about info! This is all about info! This is all about info! This is all about info! This is all about info! This is all about info! This is all about info! This is all about info! This is all about info! This is all about info! This is all about info! </p>
      </div>
    </div>


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


    <div class="footer text-center">
      <p>Made with ♥ at <a href="http://wiki.curatecamp.org/index.php/Association_of_Moving_Image_Archivists_%26_Digital_Library_Federation_Hack_Day_2015">AMIA #AVhack15</a></p>
    </div>
  </body>
</html>
refactor to one page 2015-03-21 01:32:55 +01:00			`<!DOCTYPE html>`
			`<html>`
			`<head>`
			`<title>ffmprovisr</title>`
			`<meta charset="utf-8">`

			`<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">`
			`<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">`
aesthetics 2015-03-21 03:33:41 +01:00			`<link href='http://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'>`
			`<link href='http://fonts.googleapis.com/css?family=Sanchez' rel='stylesheet' type='text/css'>`
refactor to one page 2015-03-21 01:32:55 +01:00			`<link rel="stylesheet" href="css/bootstrap.min.css">`
spacing please 2015-03-21 02:05:44 +01:00			`<link rel="stylesheet" href="css/css.css">`
refactor to one page 2015-03-21 01:32:55 +01:00			`<link href="css/jquery.steps.css" rel="stylesheet" >`

			`<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>`
			`<script src="js/forms.js"></script>`
			`<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>`
			`</head>`

			`<div class="container">`

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

text 2015-03-21 01:53:24 +01:00			`<!-- BUTTONS! -->`
refactor to one page 2015-03-21 01:32:55 +01:00			`<div class="row">`

a chill scroll 2015-03-21 05:15:06 +01:00			`<div class="well col-md-3 col-md-offset-0">`
a balancing act 2015-03-21 02:14:04 +01:00			`<br>`
a chill scroll 2015-03-21 05:15:06 +01:00			`<h5>Making FFmpeg easier</h5>`
aesthetics 2015-03-21 03:33:41 +01:00			`<p>FFmpeg is a powerful framework for manipulating audiovisual files. Unfortunately, it also has a steep learning curve, especially for users unfamiliar with the command line. 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>`

a chill scroll 2015-03-21 05:15:06 +01:00			`<div class="well col-md-6 col-md-offset-2">`
aesthetics 2015-03-21 03:33:41 +01:00			`<h3>What do you want to do?</h3>`
			`<h5>Select from the following.</h5>`
adds tooltips 2015-03-21 04:32:17 +01:00			`<span id="show_display_info"><button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="Displays information about a media file">Display Info</button></span>`
refactor to one page 2015-03-21 01:32:55 +01:00			`</div>`

aesthetics 2015-03-21 03:33:41 +01:00
refactor to one page 2015-03-21 01:32:55 +01:00			`</div> <!-- row -->`
text 2015-03-21 01:53:24 +01:00
			`<!-- FORMS!-->`
refactor to one page 2015-03-21 01:32:55 +01:00			`<div id="formloader">`

sample example 2015-11-18 19:39:56 +01:00			`<!-- sample example -->`
			`<div class="display_info" style="display:none;">`
refactor to one page 2015-03-21 01:32:55 +01:00
			`<div class="well">`
sample example 2015-11-18 19:39:56 +01:00			`<h2>ffmpeg -i [sample file path]</h2>`
two new commands 2015-03-22 19:54:44 +01:00			`</div>`

			`<div class="well">`
sample example 2015-11-18 19:39:56 +01:00			`<ul>`
attribution rules 2015-11-18 19:52:01 +01:00			`<li>ffmpeg : starts the command</li>`
			`<li>-i : i for info dudes!</li>`
			`<li>[sample file path] : path to sample file</li>`
sample example 2015-11-18 19:39:56 +01:00			`</ul>`
two new commands 2015-03-22 19:54:44 +01:00			`</div>`

			`<div class="well">`
sample example 2015-11-18 19:39:56 +01:00			`<p>This is all about info! This is all about info! This is all about info! This is all about info! This is all about info! This is all about info! This is all about info! This is all about info! This is all about info! This is all about info! This is all about info! This is all about info! This is all about info! This is all about info! </p>`
two new commands 2015-03-22 19:54:44 +01:00			`</div>`
			`</div>`

refactor to one page 2015-03-21 01:32:55 +01:00
			`</div> <!-- container -->`


a chill scroll 2015-03-21 05:15:06 +01:00			`<div class="footer text-center">`
attribution rules 2015-11-18 19:52:01 +01:00			`<p>Made with ♥ at <a href="http://wiki.curatecamp.org/index.php/Association_of_Moving_Image_Archivists_%26_Digital_Library_Federation_Hack_Day_2015">AMIA #AVhack15</a></p>`
refactor to one page 2015-03-21 01:32:55 +01:00			`</div>`
			`</body>`
			`</html>`