mirror of
https://github.com/amiaopensource/ffmprovisr.git
synced 2025-01-12 11:37:08 +01:00
abstracted form away for future form options
This commit is contained in:
ablwr
parent
181c4340f7
commit
13e897fca1
File diff suppressed because it is too large
Load Diff
6
app/assets/javascripts/jquery.steps.min.js
vendored
6
app/assets/javascripts/jquery.steps.min.js
vendored
File diff suppressed because one or more lines are too long
@ -1,382 +0,0 @@
|
|||||||
/*
|
|
||||||
Common
|
|
||||||
*/
|
|
||||||
|
|
||||||
.wizard,
|
|
||||||
.tabcontrol
|
|
||||||
{
|
|
||||||
display: block;
|
|
||||||
width: 100%;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
.wizard a,
|
|
||||||
.tabcontrol a
|
|
||||||
{
|
|
||||||
outline: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.wizard ul,
|
|
||||||
.tabcontrol ul
|
|
||||||
{
|
|
||||||
list-style: none !important;
|
|
||||||
padding: 0;
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.wizard ul > li,
|
|
||||||
.tabcontrol ul > li
|
|
||||||
{
|
|
||||||
display: block;
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Accessibility */
|
|
||||||
.wizard > .steps .current-info,
|
|
||||||
.tabcontrol > .steps .current-info
|
|
||||||
{
|
|
||||||
position: absolute;
|
|
||||||
left: -999em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.wizard > .content > .title,
|
|
||||||
.tabcontrol > .content > .title
|
|
||||||
{
|
|
||||||
position: absolute;
|
|
||||||
left: -999em;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
/*
|
|
||||||
Wizard
|
|
||||||
*/
|
|
||||||
|
|
||||||
.wizard > .steps
|
|
||||||
{
|
|
||||||
position: relative;
|
|
||||||
display: block;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.wizard.vertical > .steps
|
|
||||||
{
|
|
||||||
display: inline;
|
|
||||||
float: left;
|
|
||||||
width: 30%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.wizard > .steps .number
|
|
||||||
{
|
|
||||||
font-size: 1.429em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.wizard > .steps > ul > li
|
|
||||||
{
|
|
||||||
width: 25%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.wizard > .steps > ul > li,
|
|
||||||
.wizard > .actions > ul > li
|
|
||||||
{
|
|
||||||
float: left;
|
|
||||||
}
|
|
||||||
|
|
||||||
.wizard.vertical > .steps > ul > li
|
|
||||||
{
|
|
||||||
float: none;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.wizard > .steps a,
|
|
||||||
.wizard > .steps a:hover,
|
|
||||||
.wizard > .steps a:active
|
|
||||||
{
|
|
||||||
display: block;
|
|
||||||
width: auto;
|
|
||||||
margin: 0 0.5em 0.5em;
|
|
||||||
padding: 1em 1em;
|
|
||||||
text-decoration: none;
|
|
||||||
|
|
||||||
-webkit-border-radius: 5px;
|
|
||||||
-moz-border-radius: 5px;
|
|
||||||
border-radius: 5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.wizard > .steps .disabled a,
|
|
||||||
.wizard > .steps .disabled a:hover,
|
|
||||||
.wizard > .steps .disabled a:active
|
|
||||||
{
|
|
||||||
background: #eee;
|
|
||||||
color: #aaa;
|
|
||||||
cursor: default;
|
|
||||||
}
|
|
||||||
|
|
||||||
.wizard > .steps .current a,
|
|
||||||
.wizard > .steps .current a:hover,
|
|
||||||
.wizard > .steps .current a:active
|
|
||||||
{
|
|
||||||
background: #2184be;
|
|
||||||
color: #fff;
|
|
||||||
cursor: default;
|
|
||||||
}
|
|
||||||
|
|
||||||
.wizard > .steps .done a,
|
|
||||||
.wizard > .steps .done a:hover,
|
|
||||||
.wizard > .steps .done a:active
|
|
||||||
{
|
|
||||||
background: #9dc8e2;
|
|
||||||
color: #fff;
|
|
||||||
}
|
|
||||||
|
|
||||||
.wizard > .steps .error a,
|
|
||||||
.wizard > .steps .error a:hover,
|
|
||||||
.wizard > .steps .error a:active
|
|
||||||
{
|
|
||||||
background: #ff3111;
|
|
||||||
color: #fff;
|
|
||||||
}
|
|
||||||
|
|
||||||
.wizard > .content
|
|
||||||
{
|
|
||||||
background: #eee;
|
|
||||||
display: block;
|
|
||||||
margin: 0.5em;
|
|
||||||
min-height: 35em;
|
|
||||||
overflow: hidden;
|
|
||||||
position: relative;
|
|
||||||
width: auto;
|
|
||||||
|
|
||||||
-webkit-border-radius: 5px;
|
|
||||||
-moz-border-radius: 5px;
|
|
||||||
border-radius: 5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.wizard.vertical > .content
|
|
||||||
{
|
|
||||||
display: inline;
|
|
||||||
float: left;
|
|
||||||
margin: 0 2.5% 0.5em 2.5%;
|
|
||||||
width: 65%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.wizard > .content > .body
|
|
||||||
{
|
|
||||||
float: left;
|
|
||||||
position: absolute;
|
|
||||||
width: 95%;
|
|
||||||
height: 95%;
|
|
||||||
padding: 2.5%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.wizard > .content > .body ul
|
|
||||||
{
|
|
||||||
list-style: disc !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.wizard > .content > .body ul > li
|
|
||||||
{
|
|
||||||
display: list-item;
|
|
||||||
}
|
|
||||||
|
|
||||||
.wizard > .content > .body > iframe
|
|
||||||
{
|
|
||||||
border: 0 none;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.wizard > .content > .body input
|
|
||||||
{
|
|
||||||
display: block;
|
|
||||||
border: 1px solid #ccc;
|
|
||||||
}
|
|
||||||
|
|
||||||
.wizard > .content > .body input[type="checkbox"]
|
|
||||||
{
|
|
||||||
display: inline-block;
|
|
||||||
}
|
|
||||||
|
|
||||||
.wizard > .content > .body input.error
|
|
||||||
{
|
|
||||||
background: rgb(251, 227, 228);
|
|
||||||
border: 1px solid #fbc2c4;
|
|
||||||
color: #8a1f11;
|
|
||||||
}
|
|
||||||
|
|
||||||
.wizard > .content > .body label
|
|
||||||
{
|
|
||||||
display: inline-block;
|
|
||||||
margin-bottom: 0.5em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.wizard > .content > .body label.error
|
|
||||||
{
|
|
||||||
color: #8a1f11;
|
|
||||||
display: inline-block;
|
|
||||||
margin-left: 1.5em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.wizard > .actions
|
|
||||||
{
|
|
||||||
position: relative;
|
|
||||||
display: block;
|
|
||||||
text-align: right;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.wizard.vertical > .actions
|
|
||||||
{
|
|
||||||
display: inline;
|
|
||||||
float: right;
|
|
||||||
margin: 0 2.5%;
|
|
||||||
width: 95%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.wizard > .actions > ul
|
|
||||||
{
|
|
||||||
display: inline-block;
|
|
||||||
text-align: right;
|
|
||||||
}
|
|
||||||
|
|
||||||
.wizard > .actions > ul > li
|
|
||||||
{
|
|
||||||
margin: 0 0.5em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.wizard.vertical > .actions > ul > li
|
|
||||||
{
|
|
||||||
margin: 0 0 0 1em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.wizard > .actions a,
|
|
||||||
.wizard > .actions a:hover,
|
|
||||||
.wizard > .actions a:active
|
|
||||||
{
|
|
||||||
background: #2184be;
|
|
||||||
color: #fff;
|
|
||||||
display: block;
|
|
||||||
padding: 0.5em 1em;
|
|
||||||
text-decoration: none;
|
|
||||||
|
|
||||||
-webkit-border-radius: 5px;
|
|
||||||
-moz-border-radius: 5px;
|
|
||||||
border-radius: 5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.wizard > .actions .disabled a,
|
|
||||||
.wizard > .actions .disabled a:hover,
|
|
||||||
.wizard > .actions .disabled a:active
|
|
||||||
{
|
|
||||||
background: #eee;
|
|
||||||
color: #aaa;
|
|
||||||
}
|
|
||||||
|
|
||||||
.wizard > .loading
|
|
||||||
{
|
|
||||||
}
|
|
||||||
|
|
||||||
.wizard > .loading .spinner
|
|
||||||
{
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
/*
|
|
||||||
Tabcontrol
|
|
||||||
*/
|
|
||||||
|
|
||||||
.tabcontrol > .steps
|
|
||||||
{
|
|
||||||
position: relative;
|
|
||||||
display: block;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tabcontrol > .steps > ul
|
|
||||||
{
|
|
||||||
position: relative;
|
|
||||||
margin: 6px 0 0 0;
|
|
||||||
top: 1px;
|
|
||||||
z-index: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tabcontrol > .steps > ul > li
|
|
||||||
{
|
|
||||||
float: left;
|
|
||||||
margin: 5px 2px 0 0;
|
|
||||||
padding: 1px;
|
|
||||||
|
|
||||||
-webkit-border-top-left-radius: 5px;
|
|
||||||
-webkit-border-top-right-radius: 5px;
|
|
||||||
-moz-border-radius-topleft: 5px;
|
|
||||||
-moz-border-radius-topright: 5px;
|
|
||||||
border-top-left-radius: 5px;
|
|
||||||
border-top-right-radius: 5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tabcontrol > .steps > ul > li:hover
|
|
||||||
{
|
|
||||||
background: #edecec;
|
|
||||||
border: 1px solid #bbb;
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tabcontrol > .steps > ul > li.current
|
|
||||||
{
|
|
||||||
background: #fff;
|
|
||||||
border: 1px solid #bbb;
|
|
||||||
border-bottom: 0 none;
|
|
||||||
padding: 0 0 1px 0;
|
|
||||||
margin-top: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tabcontrol > .steps > ul > li > a
|
|
||||||
{
|
|
||||||
color: #5f5f5f;
|
|
||||||
display: inline-block;
|
|
||||||
border: 0 none;
|
|
||||||
margin: 0;
|
|
||||||
padding: 10px 30px;
|
|
||||||
text-decoration: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tabcontrol > .steps > ul > li > a:hover
|
|
||||||
{
|
|
||||||
text-decoration: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tabcontrol > .steps > ul > li.current > a
|
|
||||||
{
|
|
||||||
padding: 15px 30px 10px 30px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tabcontrol > .content
|
|
||||||
{
|
|
||||||
position: relative;
|
|
||||||
display: inline-block;
|
|
||||||
width: 100%;
|
|
||||||
height: 35em;
|
|
||||||
overflow: hidden;
|
|
||||||
border-top: 1px solid #bbb;
|
|
||||||
padding-top: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tabcontrol > .content > .body
|
|
||||||
{
|
|
||||||
float: left;
|
|
||||||
position: absolute;
|
|
||||||
width: 95%;
|
|
||||||
height: 95%;
|
|
||||||
padding: 2.5%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tabcontrol > .content > .body ul
|
|
||||||
{
|
|
||||||
list-style: disc !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tabcontrol > .content > .body ul > li
|
|
||||||
{
|
|
||||||
display: list-item;
|
|
||||||
}
|
|
||||||
30
app/views/forms/_web.html.erb
Normal file
30
app/views/forms/_web.html.erb
Normal file
@ -0,0 +1,30 @@
|
|||||||
|
<div id="file_names">
|
||||||
|
<div class="well">
|
||||||
|
<fieldset>
|
||||||
|
<legend>Input and Output</legend>
|
||||||
|
<div class="form-group">
|
||||||
|
<label class="control-label" for="input_name">Input</label>
|
||||||
|
<div class="controls">
|
||||||
|
<input type="text" name="input_name" id="input_name" placeholder="input" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<label class="control-label" for="output_name">Output</label>
|
||||||
|
<div class="controls">
|
||||||
|
<input type="text" name="output_name" id="output_name" placeholder="output" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<br/>
|
||||||
|
<input type="button" class="btn btn-large btn-primary" name="generate" id="generate" value="Generate" />
|
||||||
|
</fieldset>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="well">
|
||||||
|
<fieldset>
|
||||||
|
<legend>Your command line:</legend>
|
||||||
|
<textarea name="command_line" id="command_line" rows="3" cols="100"></textarea>
|
||||||
|
</fieldset>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div> <!-- container -->
|
||||||
@ -1,19 +1,3 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html>
|
|
||||||
<head>
|
|
||||||
<title>ffmproviser</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 rel="stylesheet" href="assets/bootstrap.min.css">
|
|
||||||
<link href="assets/jquery.steps.css" rel="stylesheet" >
|
|
||||||
|
|
||||||
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
|
|
||||||
<script src="assets/forms.js"></script>
|
|
||||||
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
|
|
||||||
</head>
|
|
||||||
|
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<h1>➺ ffmproviser ❥</h1>
|
<h1>➺ ffmproviser ❥</h1>
|
||||||
|
|
||||||
@ -34,39 +18,13 @@
|
|||||||
</fieldset>
|
</fieldset>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div id="file_names">
|
<!-- todo: yield for form depending on choice above -->
|
||||||
<div class="well">
|
|
||||||
<fieldset>
|
<%= render "web" %>
|
||||||
<legend>Input and Output</legend>
|
|
||||||
<div class="form-group">
|
|
||||||
<label class="control-label" for="input_name">Input</label>
|
|
||||||
<div class="controls">
|
|
||||||
<input type="text" name="input_name" id="input_name" placeholder="input" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="form-group">
|
|
||||||
<label class="control-label" for="output_name">Output</label>
|
|
||||||
<div class="controls">
|
|
||||||
<input type="text" name="output_name" id="output_name" placeholder="output" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<br/>
|
|
||||||
<input type="button" class="btn btn-large btn-primary" name="generate" id="generate" value="Generate" />
|
|
||||||
</fieldset>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="well">
|
|
||||||
<fieldset>
|
|
||||||
<legend>Your command line:</legend>
|
|
||||||
<textarea name="command_line" id="command_line" rows="3" cols="100"></textarea>
|
|
||||||
</fieldset>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div> <!-- container -->
|
|
||||||
|
|
||||||
<div class="footer">
|
<div class="footer">
|
||||||
<p>Made with ♥ by <a href="http://www.ashleyblewer.com">Ashley Blewer</a></p>
|
<p>Made with ♥ by <a href="http://www.ashleyblewer.com">Ashley Blewer</a></p>
|
||||||
</div>
|
</div>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
|
||||||
@ -1,14 +1,26 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html>
|
<html>
|
||||||
<head>
|
<head>
|
||||||
<title>Ffmprovisor</title>
|
<title>ffmproviser</title>
|
||||||
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %>
|
<meta charset="utf-8">
|
||||||
<%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
|
|
||||||
<%= csrf_meta_tags %>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
|
|
||||||
<%= yield %>
|
<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 rel="stylesheet" href="assets/bootstrap.min.css">
|
||||||
|
<link href="assets/jquery.steps.css" rel="stylesheet" >
|
||||||
|
|
||||||
</body>
|
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
|
||||||
|
<script src="assets/forms.js"></script>
|
||||||
|
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js">
|
||||||
|
</script>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<%= yield %>
|
||||||
|
|
||||||
|
<div class="footer">
|
||||||
|
<p>Made with ♥ by <a href="http://www.ashleyblewer.com">Ashley Blewer</a></p>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
7
css/bootstrap.min.css
vendored
7
css/bootstrap.min.css
vendored
File diff suppressed because one or more lines are too long
@ -1,382 +0,0 @@
|
|||||||
/*
|
|
||||||
Common
|
|
||||||
*/
|
|
||||||
|
|
||||||
.wizard,
|
|
||||||
.tabcontrol
|
|
||||||
{
|
|
||||||
display: block;
|
|
||||||
width: 100%;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
.wizard a,
|
|
||||||
.tabcontrol a
|
|
||||||
{
|
|
||||||
outline: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.wizard ul,
|
|
||||||
.tabcontrol ul
|
|
||||||
{
|
|
||||||
list-style: none !important;
|
|
||||||
padding: 0;
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.wizard ul > li,
|
|
||||||
.tabcontrol ul > li
|
|
||||||
{
|
|
||||||
display: block;
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Accessibility */
|
|
||||||
.wizard > .steps .current-info,
|
|
||||||
.tabcontrol > .steps .current-info
|
|
||||||
{
|
|
||||||
position: absolute;
|
|
||||||
left: -999em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.wizard > .content > .title,
|
|
||||||
.tabcontrol > .content > .title
|
|
||||||
{
|
|
||||||
position: absolute;
|
|
||||||
left: -999em;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
/*
|
|
||||||
Wizard
|
|
||||||
*/
|
|
||||||
|
|
||||||
.wizard > .steps
|
|
||||||
{
|
|
||||||
position: relative;
|
|
||||||
display: block;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.wizard.vertical > .steps
|
|
||||||
{
|
|
||||||
display: inline;
|
|
||||||
float: left;
|
|
||||||
width: 30%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.wizard > .steps .number
|
|
||||||
{
|
|
||||||
font-size: 1.429em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.wizard > .steps > ul > li
|
|
||||||
{
|
|
||||||
width: 25%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.wizard > .steps > ul > li,
|
|
||||||
.wizard > .actions > ul > li
|
|
||||||
{
|
|
||||||
float: left;
|
|
||||||
}
|
|
||||||
|
|
||||||
.wizard.vertical > .steps > ul > li
|
|
||||||
{
|
|
||||||
float: none;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.wizard > .steps a,
|
|
||||||
.wizard > .steps a:hover,
|
|
||||||
.wizard > .steps a:active
|
|
||||||
{
|
|
||||||
display: block;
|
|
||||||
width: auto;
|
|
||||||
margin: 0 0.5em 0.5em;
|
|
||||||
padding: 1em 1em;
|
|
||||||
text-decoration: none;
|
|
||||||
|
|
||||||
-webkit-border-radius: 5px;
|
|
||||||
-moz-border-radius: 5px;
|
|
||||||
border-radius: 5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.wizard > .steps .disabled a,
|
|
||||||
.wizard > .steps .disabled a:hover,
|
|
||||||
.wizard > .steps .disabled a:active
|
|
||||||
{
|
|
||||||
background: #eee;
|
|
||||||
color: #aaa;
|
|
||||||
cursor: default;
|
|
||||||
}
|
|
||||||
|
|
||||||
.wizard > .steps .current a,
|
|
||||||
.wizard > .steps .current a:hover,
|
|
||||||
.wizard > .steps .current a:active
|
|
||||||
{
|
|
||||||
background: #2184be;
|
|
||||||
color: #fff;
|
|
||||||
cursor: default;
|
|
||||||
}
|
|
||||||
|
|
||||||
.wizard > .steps .done a,
|
|
||||||
.wizard > .steps .done a:hover,
|
|
||||||
.wizard > .steps .done a:active
|
|
||||||
{
|
|
||||||
background: #9dc8e2;
|
|
||||||
color: #fff;
|
|
||||||
}
|
|
||||||
|
|
||||||
.wizard > .steps .error a,
|
|
||||||
.wizard > .steps .error a:hover,
|
|
||||||
.wizard > .steps .error a:active
|
|
||||||
{
|
|
||||||
background: #ff3111;
|
|
||||||
color: #fff;
|
|
||||||
}
|
|
||||||
|
|
||||||
.wizard > .content
|
|
||||||
{
|
|
||||||
background: #eee;
|
|
||||||
display: block;
|
|
||||||
margin: 0.5em;
|
|
||||||
min-height: 35em;
|
|
||||||
overflow: hidden;
|
|
||||||
position: relative;
|
|
||||||
width: auto;
|
|
||||||
|
|
||||||
-webkit-border-radius: 5px;
|
|
||||||
-moz-border-radius: 5px;
|
|
||||||
border-radius: 5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.wizard.vertical > .content
|
|
||||||
{
|
|
||||||
display: inline;
|
|
||||||
float: left;
|
|
||||||
margin: 0 2.5% 0.5em 2.5%;
|
|
||||||
width: 65%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.wizard > .content > .body
|
|
||||||
{
|
|
||||||
float: left;
|
|
||||||
position: absolute;
|
|
||||||
width: 95%;
|
|
||||||
height: 95%;
|
|
||||||
padding: 2.5%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.wizard > .content > .body ul
|
|
||||||
{
|
|
||||||
list-style: disc !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.wizard > .content > .body ul > li
|
|
||||||
{
|
|
||||||
display: list-item;
|
|
||||||
}
|
|
||||||
|
|
||||||
.wizard > .content > .body > iframe
|
|
||||||
{
|
|
||||||
border: 0 none;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.wizard > .content > .body input
|
|
||||||
{
|
|
||||||
display: block;
|
|
||||||
border: 1px solid #ccc;
|
|
||||||
}
|
|
||||||
|
|
||||||
.wizard > .content > .body input[type="checkbox"]
|
|
||||||
{
|
|
||||||
display: inline-block;
|
|
||||||
}
|
|
||||||
|
|
||||||
.wizard > .content > .body input.error
|
|
||||||
{
|
|
||||||
background: rgb(251, 227, 228);
|
|
||||||
border: 1px solid #fbc2c4;
|
|
||||||
color: #8a1f11;
|
|
||||||
}
|
|
||||||
|
|
||||||
.wizard > .content > .body label
|
|
||||||
{
|
|
||||||
display: inline-block;
|
|
||||||
margin-bottom: 0.5em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.wizard > .content > .body label.error
|
|
||||||
{
|
|
||||||
color: #8a1f11;
|
|
||||||
display: inline-block;
|
|
||||||
margin-left: 1.5em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.wizard > .actions
|
|
||||||
{
|
|
||||||
position: relative;
|
|
||||||
display: block;
|
|
||||||
text-align: right;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.wizard.vertical > .actions
|
|
||||||
{
|
|
||||||
display: inline;
|
|
||||||
float: right;
|
|
||||||
margin: 0 2.5%;
|
|
||||||
width: 95%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.wizard > .actions > ul
|
|
||||||
{
|
|
||||||
display: inline-block;
|
|
||||||
text-align: right;
|
|
||||||
}
|
|
||||||
|
|
||||||
.wizard > .actions > ul > li
|
|
||||||
{
|
|
||||||
margin: 0 0.5em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.wizard.vertical > .actions > ul > li
|
|
||||||
{
|
|
||||||
margin: 0 0 0 1em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.wizard > .actions a,
|
|
||||||
.wizard > .actions a:hover,
|
|
||||||
.wizard > .actions a:active
|
|
||||||
{
|
|
||||||
background: #2184be;
|
|
||||||
color: #fff;
|
|
||||||
display: block;
|
|
||||||
padding: 0.5em 1em;
|
|
||||||
text-decoration: none;
|
|
||||||
|
|
||||||
-webkit-border-radius: 5px;
|
|
||||||
-moz-border-radius: 5px;
|
|
||||||
border-radius: 5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.wizard > .actions .disabled a,
|
|
||||||
.wizard > .actions .disabled a:hover,
|
|
||||||
.wizard > .actions .disabled a:active
|
|
||||||
{
|
|
||||||
background: #eee;
|
|
||||||
color: #aaa;
|
|
||||||
}
|
|
||||||
|
|
||||||
.wizard > .loading
|
|
||||||
{
|
|
||||||
}
|
|
||||||
|
|
||||||
.wizard > .loading .spinner
|
|
||||||
{
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
/*
|
|
||||||
Tabcontrol
|
|
||||||
*/
|
|
||||||
|
|
||||||
.tabcontrol > .steps
|
|
||||||
{
|
|
||||||
position: relative;
|
|
||||||
display: block;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tabcontrol > .steps > ul
|
|
||||||
{
|
|
||||||
position: relative;
|
|
||||||
margin: 6px 0 0 0;
|
|
||||||
top: 1px;
|
|
||||||
z-index: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tabcontrol > .steps > ul > li
|
|
||||||
{
|
|
||||||
float: left;
|
|
||||||
margin: 5px 2px 0 0;
|
|
||||||
padding: 1px;
|
|
||||||
|
|
||||||
-webkit-border-top-left-radius: 5px;
|
|
||||||
-webkit-border-top-right-radius: 5px;
|
|
||||||
-moz-border-radius-topleft: 5px;
|
|
||||||
-moz-border-radius-topright: 5px;
|
|
||||||
border-top-left-radius: 5px;
|
|
||||||
border-top-right-radius: 5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tabcontrol > .steps > ul > li:hover
|
|
||||||
{
|
|
||||||
background: #edecec;
|
|
||||||
border: 1px solid #bbb;
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tabcontrol > .steps > ul > li.current
|
|
||||||
{
|
|
||||||
background: #fff;
|
|
||||||
border: 1px solid #bbb;
|
|
||||||
border-bottom: 0 none;
|
|
||||||
padding: 0 0 1px 0;
|
|
||||||
margin-top: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tabcontrol > .steps > ul > li > a
|
|
||||||
{
|
|
||||||
color: #5f5f5f;
|
|
||||||
display: inline-block;
|
|
||||||
border: 0 none;
|
|
||||||
margin: 0;
|
|
||||||
padding: 10px 30px;
|
|
||||||
text-decoration: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tabcontrol > .steps > ul > li > a:hover
|
|
||||||
{
|
|
||||||
text-decoration: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tabcontrol > .steps > ul > li.current > a
|
|
||||||
{
|
|
||||||
padding: 15px 30px 10px 30px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tabcontrol > .content
|
|
||||||
{
|
|
||||||
position: relative;
|
|
||||||
display: inline-block;
|
|
||||||
width: 100%;
|
|
||||||
height: 35em;
|
|
||||||
overflow: hidden;
|
|
||||||
border-top: 1px solid #bbb;
|
|
||||||
padding-top: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tabcontrol > .content > .body
|
|
||||||
{
|
|
||||||
float: left;
|
|
||||||
position: absolute;
|
|
||||||
width: 95%;
|
|
||||||
height: 95%;
|
|
||||||
padding: 2.5%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tabcontrol > .content > .body ul
|
|
||||||
{
|
|
||||||
list-style: disc !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tabcontrol > .content > .body ul > li
|
|
||||||
{
|
|
||||||
display: list-item;
|
|
||||||
}
|
|
||||||
72
index.html
72
index.html
@ -1,72 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html>
|
|
||||||
<head>
|
|
||||||
<title>ffmproviser</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 rel="stylesheet" href="css/bootstrap.min.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">
|
|
||||||
<h1>➺ ffmproviser ❥</h1>
|
|
||||||
|
|
||||||
<!-- form begins -->
|
|
||||||
|
|
||||||
<div class="well">
|
|
||||||
<fieldset>
|
|
||||||
<legend>First form</legend>
|
|
||||||
<!-- First we need a select question option... form or not? -->
|
|
||||||
<h4>What is your question?</h4>
|
|
||||||
<ul>
|
|
||||||
<li>Display info</li>
|
|
||||||
<li>Export for web</li>
|
|
||||||
<li>Add subtitles track</li>
|
|
||||||
<li>Remove audio track</li>
|
|
||||||
<li>Add audio track</li>
|
|
||||||
</ul>
|
|
||||||
</fieldset>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div id="file_names">
|
|
||||||
<div class="well">
|
|
||||||
<fieldset>
|
|
||||||
<legend>Input and Output</legend>
|
|
||||||
<div class="form-group">
|
|
||||||
<label class="control-label" for="input_name">Input</label>
|
|
||||||
<div class="controls">
|
|
||||||
<input type="text" name="input_name" id="input_name" placeholder="input" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="form-group">
|
|
||||||
<label class="control-label" for="output_name">Output</label>
|
|
||||||
<div class="controls">
|
|
||||||
<input type="text" name="output_name" id="output_name" placeholder="output" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<br/>
|
|
||||||
<input type="button" class="btn btn-large btn-primary" name="generate" id="generate" value="Generate" />
|
|
||||||
</fieldset>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="well">
|
|
||||||
<fieldset>
|
|
||||||
<legend>Your command line:</legend>
|
|
||||||
<textarea name="command_line" id="command_line" rows="3" cols="100"></textarea>
|
|
||||||
</fieldset>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div> <!-- container -->
|
|
||||||
|
|
||||||
<div class="footer">
|
|
||||||
<p>Made with ♥ by <a href="http://www.ashleyblewer.com">Ashley Blewer</a></p>
|
|
||||||
</div>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
@ -1,9 +0,0 @@
|
|||||||
$(document).ready(function() {
|
|
||||||
|
|
||||||
$('#generate').click(function(){
|
|
||||||
$('#command_line').val("ffmpeg" +
|
|
||||||
" -i " + $('#input_name').val() +
|
|
||||||
" -o " + $('#output_name').val())
|
|
||||||
});
|
|
||||||
|
|
||||||
});
|
|
||||||
2015
js/jquery.steps.js
2015
js/jquery.steps.js
File diff suppressed because it is too large
Load Diff
6
js/jquery.steps.min.js
vendored
6
js/jquery.steps.min.js
vendored
File diff suppressed because one or more lines are too long
Loading…
Reference in New Issue
Block a user