Merge pull request #2 from acorbi/master

Wrapping and layout draft
hackers4peace · Sep 17, 2014 · 068b40d · 068b40d
2 parents d1775d7 + 2a269e0
commit 068b40d
Show file tree

Hide file tree

Showing 4 changed files with 227 additions and 16 deletions.
diff --git a/bower.json b/bower.json
@@ -2,12 +2,22 @@
   "name": "plp-generator",
   "version": "0.0.0",
   "authors": [
-    "elf Pavlik <[email protected]>"
+    "elf Pavlik <[email protected]>",
+    "Alex Corbi <[email protected]>"
   ],
   "license": "Unlicense",
   "private": true,
   "dependencies": {
-    "json-editor": "~0.7.6",
-    "bootstrap": "~3.2.0"
-  }
+    "json-editor": "~0.7.7",
+    "bootstrap": "~3.2.0",
+    "jquery": "~2.1.1"
+  },
+  "homepage": "https://github.com/elf-pavlik/plp-generator",
+  "ignore": [
+    "**/.*",
+    "node_modules",
+    "bower_components",
+    "test",
+    "tests"
+  ]
 }
diff --git a/creator.html b/creator.html
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<html>
+
+  <head>
+
+    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+
+	<title>PLP Generator</title>
+
+	<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css" />
+
+	<script src="bower_components/jquery/dist/jquery.js"></script>
+	<script src="bower_components/bootstrap/dist/js/bootstrap.js"></script>
+	<script src="bower_components/json-editor/dist/jsoneditor.js"></script>
+	<script src="app.js"></script>
+
+  </head>
+
+  <body>
+
+    <div class="row">
+
+      	<div class="col-md-4 col-md-offset-1">
+
+        	<h1>Profile editor</h1>
+
+      	</div>
+
+    </div>
+
+	<div class="row">
+
+		<div class="col-md-2 col-md-offset-1">
+
+		  	<h2>How to use it</h2>
+		    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris. Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit. Donec et mollis dolor. Praesent et diam eget libero egestas mattis sit amet vitae augue. Nam tincidunt congue enim, ut porta lorem lacinia consectetur.</p>
+
+		</div>
+
+		<div class="col-md-7">						
+
+			<div id="editor_holder" class="medium-12 columns"></div>
+
+			<a id="generate_btn" href="profile.html" class="btn btn-primary btn-lg">Generate your profile</a>
+
+		</div>
+
+  	</div>			     
+
+  </body>
+
+</html>
diff --git a/index.html b/index.html
@@ -1,16 +1,79 @@
+<!DOCTYPE html>
 <html>
-<head>
-  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
 
-  <title>PLP Generator</title>
-  <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css" />
+  	<head>
+
+	    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
 
-  <script src="bower_components/jquery/dist/jquery.js"></script>
-  <script src="bower_components/bootstrap/dist/js/bootstrap.js"></script>
-  <script src="bower_components/json-editor/dist/jsoneditor.js"></script>
-  <script src="app.js"></script>
-</head>
-<body>
-  <div id="editor_holder"></div>
-</body>
+		<title>PLP Generator</title>
+
+		<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css" />
+
+		<script src="bower_components/jquery/dist/jquery.js"></script>
+		<script src="bower_components/bootstrap/dist/js/bootstrap.js"></script>
+		<script src="bower_components/json-editor/dist/jsoneditor.js"></script>
+		<script src="app.js"></script>
+
+  	</head>
+
+  	<body>
+
+    	<div class="row">
+
+      		<div class="col-md-4 col-md-offset-1">
+
+        		<h1>Profile editor</h1>
+
+      		</div>
+
+    	</div>
+
+		<div class="row">
+
+			<div class="col-md-4 col-md-offset-1">
+
+			  	<h2>What is this?</h2>
+
+			    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris. Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit. Donec et mollis dolor. Praesent et diam eget libero egestas mattis sit amet vitae augue. Nam tincidunt congue enim, ut porta lorem lacinia consectetur.</p>
+
+			    <h2>What is it good for?</h2>
+
+			    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris. Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit. Donec et mollis dolor. Praesent et diam eget libero egestas mattis sit amet vitae augue. Nam tincidunt congue enim, ut porta lorem lacinia consectetur.</p>                     	      	
+
+			  	<h2>Spread the word</h2>
+
+			  	<p>Share it on FB / Twitter and so on....</p>
+
+			</div>
+
+			<div class="col-md-4 col-md-offset-1">
+
+				<h2>If you have already one</h2>	    
+
+		    	<form role="form">
+
+				 	<div class="form-group">
+
+				    	<label for="exampleInputEmail1">Input the URL where you have stored it. File will be parsed and editor initialised with data stored on it.</label>
+
+				    	<input type="text" class="form-control" id="profile_url" placeholder="http://">
+
+				  	</div>				  
+
+				  	<button type="submit" class="btn btn-primary btn-lg">Edit</button>
+
+				  	<h2>If not, create one</h2>
+
+				  	<p>This takes you to the profile creator</p>									
+
+				  	<a id="create_btn" href="creator.html" class="btn btn-primary btn-lg">Create or edit your profile</a>
+
+				</form>						
+
+			</div>				
+
+		</div>        
+
+  	</body>
+
 </html>
diff --git a/profile.html b/profile.html
@@ -0,0 +1,86 @@
+<!DOCTYPE html>
+<html>
+
+  <head>
+
+    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+
+	<title>PLP Generator</title>
+
+	<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css" />
+
+	<script src="bower_components/jquery/dist/jquery.js"></script>
+	<script src="bower_components/bootstrap/dist/js/bootstrap.js"></script>
+	<script src="bower_components/json-editor/dist/jsoneditor.js"></script>
+	<script src="app.js"></script>
+
+  </head>
+
+  <body>
+
+    <div class="row">
+
+      	<div class="col-md-4 col-md-offset-1">
+
+        	<h1>Profile editor</h1>
+
+      	</div>
+
+    </div>        	
+
+	<div class="row">
+
+		<div class="col-md-4 col-md-offset-1">
+
+			<h1> Here it is!</h1>
+
+			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris. Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit. Donec et mollis dolor. Praesent et diam eget libero egestas mattis sit amet vitae augue. Nam tincidunt congue enim, ut porta lorem lacinia consectetur.</p>
+
+			<ul class="nav nav-tabs" role="tablist">
+			  	<li class="active"><a href="#json" role="tab" data-toggle="tab">JSON</a></li>
+			  	<li><a href="#ld" role="tab" data-toggle="tab">LD</a></li>
+			  	<li><a href="#other" role="tab" data-toggle="tab">Other</a></li>
+			</ul>
+
+			<!-- Tab panes -->
+			<div class="tab-content">
+
+			  	<div class="tab-pane active" id="json">
+
+			  		<textarea class="form-control" rows="10">JSON profile</textarea>
+
+			 	</div>
+
+			 	<div class="tab-pane" id="ld">
+
+			  		<textarea class="form-control" rows="10">LD profile</textarea>
+
+			  	</div>
+
+			  	<div class="tab-pane" id="other">
+
+			  		<textarea class="form-control" rows="10">other formatst</textarea>
+
+			  	</div>
+
+			</div>
+
+		</div>
+
+		<div class="col-md-4 col-md-offset-1">
+
+			<h1>You can also download it</h1>
+
+			<a id="download_btn" href="#" class="btn btn-primary btn-lg">Download profile</a>
+
+			<h1>Or use the following URL</h1>
+
+			<input class="form-control" type="text" placeholder="http://ldpc/0EA5&FXCA.json" input>
+
+		</div>
+
+	</div>      
+
+  </body>
+
+</html>