scrapple/commands/templates/home.html
<!DOCTYPE html>
<html>
<head>
<title>Scrapple Online</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="/static/css/bootstrap.min.css">
<script src="/static/js/jquery-1.11.2.min.js"></script>
<script src="/static/js/bootstrap.min.js"></script>
<style>
.level-0{
margin: 0px 0px 0px 10px;
}
.level-1{
margin: 0px 0px 0px 30px;
}
.level-2{
margin: 0px 0px 0px 60px;
}
.level-3{
margin: 0px 0px 0px 90px;
}
</style>
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<a class="navbar-brand" href="/">Scrapple</a>
<div class="btn-group" role="group" aria-label="...">
<!-- <button type="button" class="btn btn-default navbar-btn" onclick="writeformScraper();">Scraper</button> -->
</div>
</div>
</nav>
<br><br><br>
<div id="selform" style="display: block;" class="panel panel-default">
<div class="panel-heading" id="head-title">
<h3 class="panel-title">Scraper</h3>
</div>
<div id="newform" class="panel-body">
<form action="{{ url_for("home") }}" method="post" role="form" class="navbar-form navbar-left">
<div class="level-0">
<strong>{<br>
<div class="level-1">
Project_name: </strong><input type="text" name="project_name"><br><br><strong>
Selector_type: </strong><input type="text" name="selector_type"><br><br><strong>
scraping: {
<div id="data-field" class="level-2"><br>
url:</strong><input type="text" name="url"><br><br><strong>
data: [
<div id="input_fields_wraps">{
<div class="level-3">
field:</strong></strong><input type="text" name="field_1"><br><br><strong>
selector:</strong><input type="text" name="selector_1"><br><br><strong>
attribute:</strong><input type="text" name="attribute_1"><br><br><strong>
default:</strong><input type="text" name="default_1"><br>
</div>
<br><strong>}</strong><br>
</div>
<button type="button" name="add_Data_Btn" class="btn btn-default" onclick="addData();">Add Data</button>
<br><strong>]<br>
</div>
<br>}
</div>
<br>}
</div>
<br></strong><br><button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
</div>
<br><br>
<script type="text/javascript">
var j=2;
function addData(){
var fld="field_"+j.toString();
var slr="selector_"+j.toString();
var atr="attribute_"+j.toString();
var daa=document.createElement("div");
daa.innerHTML=
'<strong>field: </strong><input type="text" name="field_"><br><br><strong>selector: </strong><input type="text" name="selector_"><br><br><strong>attribute:</strong> <input type="text" name="attribute_"><br><br><strong>default: </strong><input type="text" name="default_"><br>';
var daa0=document.createElement("div");
daa.className='level-3';
daa0.innerHTML='<strong>,<br>{</strong><br>';
var daa2=document.createElement("div");
daa2.innerHTML='<br><strong>}</strong><br>';
document.getElementById('input_fields_wraps').appendChild(daa0);
document.getElementById('input_fields_wraps').appendChild(daa);
document.getElementById('input_fields_wraps').appendChild(daa2);
var x = document.getElementsByName("field_");
x[0].name+=j.toString();
x = document.getElementsByName("selector_");
x[0].name+=j.toString();
x = document.getElementsByName("attribute_");
x[0].name+=j.toString();
x = document.getElementsByName("default_");
x[0].name+=j.toString();
j++;
}
</script>
</body>
</html>