implemented generation of pages for each data in json

This commit is contained in:
arnaucode
2017-05-31 20:32:00 +02:00
parent d6c359c1f4
commit 186d170ffd
23 changed files with 364 additions and 12 deletions

BIN
example/konstrui Executable file

Binary file not shown.

59
example/webInput/app.css Normal file
View File

@@ -0,0 +1,59 @@
.collection{
border: 0!important;
}
.collection-item{
background-color: rgba(0,0,0,0)!important;
border: 0px!important;
}
.collection-item:hover{
background-color: rgba(255,255,255,0.1)!important;
}
/* login */
.o_loginBackground{
position: absolute;
height: 100%!important;
width: 100%;
min-height: auto;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
-o-background-size: cover;
background-position: center;
background-image: url('img/loginBackground.jpg');
text-align: center;
/*color: white;*/
/* Create the parallax scrolling effect */
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
color: #ffffff;
}
@font-face {
font-family: 'Otterly Adorable';
src: url('fonts/fourHand_TRIAL.ttf');
}
.o_loginBackground h1{
color: #ffffff!important;
margin: 10px;
font-family: 'Otterly Adorable'
/*font-weight: bold;*/
}
.o_floatRight{
float: right;
}
.o_textRight{
text-align: right;
}
.o_badge{
border-radius: 8px;
margin: 5px;
padding: 2px 5px;
}

View File

@@ -0,0 +1,10 @@
<!DOCTYPE html>
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
<konstrui-template html="templates/userTemplate.html" data="templates/userTemplate.json"></konstrui-template>
</body>
</html>

View File

@@ -0,0 +1,15 @@
{
"title": "Prova web",
"author": "arnaucode",
"github": "github.com/arnaucode",
"website": "arnaucode.com",
"files": [
"index.html",
"projects.html",
"app.css"
],
"repeatPages": [{
"htmlPage": "projectPage.html",
"data": "templates/projectTemplate.json"
}]
}

View File

@@ -0,0 +1,11 @@
<!DOCTYPE html>
<html>
<title>{{title}} - {{author}}</title>
<body>
<h1>Project individual page</h1>
<h2>{{title}}</h2>
<p>{{author}}</p>
<p>{{description}}</p>
</body>
</html>

View File

@@ -0,0 +1,9 @@
<!DOCTYPE html>
<html>
<body>
<h1>Projects page</h1>
<konstrui-template html="templates/projectTemplate.html" data="templates/projectTemplate.json"></konstrui-template>
</body>
</html>

View File

@@ -0,0 +1,6 @@
<div class="class1">
<div id="{{idAuthor}}" class="class2">Project {{title}}</div>
<div class="classAuthor">Developed by: {{author}}</div>
<div class="class3">{{description}}</div>
<a href="{{link}}" target="_blank">View project page</a>
</div>

View File

@@ -0,0 +1,33 @@
[{
"title": "Smartphone App",
"idAuthor": "author1",
"author": "User1",
"description": "This is the first project",
"link": "https://github.com",
"pageName": "smartphoneApp"
},
{
"title": "Botnet",
"idAuthor": "author2",
"author": "User2",
"description": "This project is a botnet",
"link": "https://github.com",
"pageName": "botnet"
},
{
"title": "Webpage",
"idAuthor": "author3",
"author": "User1",
"description": "This project is a webpage",
"link": "https://github.com",
"pageName": "webpage"
},
{
"title": "Script",
"idAuthor": "author4",
"author": "User1",
"description": "This project is a script to save time",
"link": "https://github.com",
"pageName": "script"
}
]

View File

@@ -0,0 +1,5 @@
<div class="class1" id="user[[i]]">
<div id="username[[i]]" class="class2">{{username}}</div>
<div id="description[[i]]" class="class2">{{description}}</div>
<div class="class2">{{phone}}</div>
</div>

View File

@@ -0,0 +1,16 @@
[{
"username": "Michaela Doe",
"description": "Hi, I'm here to code",
"phone": "456456456"
},
{
"username": "John Doe",
"description": "Hi, I'm here",
"phone": "123456789"
},
{
"username": "Myself",
"description": "How are you",
"phone": "no phone"
}
]

59
example/webOutput/app.css Normal file
View File

@@ -0,0 +1,59 @@
.collection{
border: 0!important;
}
.collection-item{
background-color: rgba(0,0,0,0)!important;
border: 0px!important;
}
.collection-item:hover{
background-color: rgba(255,255,255,0.1)!important;
}
/* login */
.o_loginBackground{
position: absolute;
height: 100%!important;
width: 100%;
min-height: auto;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
-o-background-size: cover;
background-position: center;
background-image: url('img/loginBackground.jpg');
text-align: center;
/*color: white;*/
/* Create the parallax scrolling effect */
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
color: #ffffff;
}
@font-face {
font-family: 'Otterly Adorable';
src: url('fonts/fourHand_TRIAL.ttf');
}
.o_loginBackground h1{
color: #ffffff!important;
margin: 10px;
font-family: 'Otterly Adorable'
/*font-weight: bold;*/
}
.o_floatRight{
float: right;
}
.o_textRight{
text-align: right;
}
.o_badge{
border-radius: 8px;
margin: 5px;
padding: 2px 5px;
}

View File

@@ -0,0 +1,11 @@
<!DOCTYPE html>
<html>
<title>Botnet - User2</title>
<body>
<h1>Project individual page</h1>
<h2>Botnet</h2>
<p>User2</p>
<p>This project is a botnet</p>
</body>
</html>

View File

@@ -0,0 +1,16 @@
<!DOCTYPE html><html><body><h1>My First Heading</h1><p>My first paragraph.</p><div class="class1" id="user0">
<div id="username0" class="class2">Michaela Doe</div>
<div id="description0" class="class2">Hi, I'm here to code</div>
<div class="class2">456456456</div>
</div>
<div class="class1" id="user1">
<div id="username1" class="class2">John Doe</div>
<div id="description1" class="class2">Hi, I'm here</div>
<div class="class2">123456789</div>
</div>
<div class="class1" id="user2">
<div id="username2" class="class2">Myself</div>
<div id="description2" class="class2">How are you</div>
<div class="class2">no phone</div>
</div>
</body></html>

View File

@@ -0,0 +1,25 @@
<!DOCTYPE html><html><body><h1>Projects page</h1><div class="class1">
<div id="author1" class="class2">Project Smartphone App</div>
<div class="classAuthor">Developed by: User1</div>
<div class="class3">This is the first project</div>
<a href="https://github.com" target="_blank">View project page</a>
</div>
<div class="class1">
<div id="author2" class="class2">Project Botnet</div>
<div class="classAuthor">Developed by: User2</div>
<div class="class3">This project is a botnet</div>
<a href="https://github.com" target="_blank">View project page</a>
</div>
<div class="class1">
<div id="author3" class="class2">Project Webpage</div>
<div class="classAuthor">Developed by: User1</div>
<div class="class3">This project is a webpage</div>
<a href="https://github.com" target="_blank">View project page</a>
</div>
<div class="class1">
<div id="author4" class="class2">Project Script</div>
<div class="classAuthor">Developed by: User1</div>
<div class="class3">This project is a script to save time</div>
<a href="https://github.com" target="_blank">View project page</a>
</div>
</body></html>

View File

@@ -0,0 +1,11 @@
<!DOCTYPE html>
<html>
<title>Script - User1</title>
<body>
<h1>Project individual page</h1>
<h2>Script</h2>
<p>User1</p>
<p>This project is a script to save time</p>
</body>
</html>

View File

@@ -0,0 +1,11 @@
<!DOCTYPE html>
<html>
<title>Smartphone App - User1</title>
<body>
<h1>Project individual page</h1>
<h2>Smartphone App</h2>
<p>User1</p>
<p>This is the first project</p>
</body>
</html>

View File

@@ -0,0 +1,11 @@
<!DOCTYPE html>
<html>
<title>Webpage - User1</title>
<body>
<h1>Project individual page</h1>
<h2>Webpage</h2>
<p>User1</p>
<p>This project is a webpage</p>
</body>
</html>