mirror of
https://github.com/amiaopensource/ffmprovisr.git
synced 2024-09-19 23:32:38 +02: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">
|
||||
<h1>➺ ffmproviser ❥</h1>
|
||||
|
||||
@ -34,39 +18,13 @@
|
||||
</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>
|
||||
<!-- todo: yield for form depending on choice above -->
|
||||
|
||||
<div class="well">
|
||||
<fieldset>
|
||||
<legend>Your command line:</legend>
|
||||
<textarea name="command_line" id="command_line" rows="3" cols="100"></textarea>
|
||||
</fieldset>
|
||||
</div>
|
||||
<%= render "web" %>
|
||||
|
||||
|
||||
</div> <!-- container -->
|
||||
|
||||
<div class="footer">
|
||||
<p>Made with ♥ by <a href="http://www.ashleyblewer.com">Ashley Blewer</a></p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
</body>
|
||||
@ -1,14 +1,26 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Ffmprovisor</title>
|
||||
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %>
|
||||
<%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
|
||||
<%= csrf_meta_tags %>
|
||||
</head>
|
||||
<body>
|
||||
<head>
|
||||
<title>ffmproviser</title>
|
||||
<meta charset="utf-8">
|
||||
|
||||
<%= 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>
|
||||
|
||||
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