mirror of
https://github.com/arnaucube/konstrui.git
synced 2026-02-07 03:26:43 +01:00
implemented generation of pages for each data in json
This commit is contained in:
BIN
example/konstrui
Executable file
BIN
example/konstrui
Executable file
Binary file not shown.
59
example/webInput/app.css
Normal file
59
example/webInput/app.css
Normal 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;
|
||||
}
|
||||
10
example/webInput/index.html
Normal file
10
example/webInput/index.html
Normal 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>
|
||||
15
example/webInput/konstruiConfig.json
Normal file
15
example/webInput/konstruiConfig.json
Normal 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"
|
||||
}]
|
||||
}
|
||||
11
example/webInput/projectPage.html
Normal file
11
example/webInput/projectPage.html
Normal 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>
|
||||
9
example/webInput/projects.html
Normal file
9
example/webInput/projects.html
Normal 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>
|
||||
6
example/webInput/templates/projectTemplate.html
Normal file
6
example/webInput/templates/projectTemplate.html
Normal 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>
|
||||
33
example/webInput/templates/projectTemplate.json
Normal file
33
example/webInput/templates/projectTemplate.json
Normal 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"
|
||||
}
|
||||
]
|
||||
5
example/webInput/templates/userTemplate.html
Normal file
5
example/webInput/templates/userTemplate.html
Normal 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>
|
||||
16
example/webInput/templates/userTemplate.json
Normal file
16
example/webInput/templates/userTemplate.json
Normal 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
59
example/webOutput/app.css
Normal 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;
|
||||
}
|
||||
11
example/webOutput/botnetPage.html
Normal file
11
example/webOutput/botnetPage.html
Normal 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>
|
||||
16
example/webOutput/index.html
Normal file
16
example/webOutput/index.html
Normal 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>
|
||||
25
example/webOutput/projects.html
Normal file
25
example/webOutput/projects.html
Normal 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>
|
||||
11
example/webOutput/scriptPage.html
Normal file
11
example/webOutput/scriptPage.html
Normal 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>
|
||||
11
example/webOutput/smartphoneAppPage.html
Normal file
11
example/webOutput/smartphoneAppPage.html
Normal 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>
|
||||
11
example/webOutput/webpagePage.html
Normal file
11
example/webOutput/webpagePage.html
Normal 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>
|
||||
Reference in New Issue
Block a user