"Demo release"

This commit is contained in:
Doug Le Tough 2017-11-25 09:18:10 +01:00
parent e0eb103c7a
commit 42393a60cd
8 changed files with 263 additions and 97 deletions

View File

@ -182,3 +182,7 @@ input[type="image"]:hover {
background-color: var(--coloured-bg);
cursor: pointer;
}
strong {
cursor: pointer;
}

View File

@ -0,0 +1,64 @@
{% extends "index.html" %}
{% block main %}
<article class='right'>
<h3>This is the title</h3>
<img src='/static/images/dummy_pic.png' alt='dummy pic' title='dummy pic'/>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore
</p>
<p>This <a href='/plop.html'>link</a> will lead to an error page</p>
<p>
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
officia desers unt mollit anim id est laborum.
</p>
<ul>
<li>plop</li>
<li>plap</li>
<li>plip</li>
</ul>
<ol>
<li>plop</li>
<li>plap</li>
<li>plip</li>
</ol>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
officia deserunt mollit anim id est laborum.
</p>
</article>
<article class='left'>
<h3>The title is back again and is angry</h3>
<img src='/static/images/dummy_pic.png' alt='dummy pic' title='dummy pic'/>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore
</p>
<p>
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
officia deserunt mollit anim id est laborum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
officia deserunt mollit anim id est laborum.
</p>
</article>
{% endblock %}

View File

@ -0,0 +1,54 @@
{% extends "index.html" %}
{% block main %}
<article class='right'>
<h3>Basics</h3>
<p>
Thanks to <a href='http://flask.pocoo.org/'>Python/Flask</a> with <strong>TetaWebApp</strong> most of the output things come to life via
<a href='http://jinja.pocoo.org/docs/2.10/'>Jinja2 HTML templates</a>
and is 100% <strong title='Bulshit inside'>HTML5 ready©</strong>.
</p>
<p>
Colors and fonts are managed from a separated CSS files letting you easily
change the default theme to your favorite colors and icon set.
</p>
<pre>
@font-face {
font-family: "Roboto Condensed";
font-style: normal;
font-weight: 400;
src: var(--font-normal);
}
@font-face {
font-family: "Roboto Condensed";
font-style: normal;
font-weight: 700;
src: var(--font-bold);
}
</pre>
<pre>
:root {
--coloured-bg: #FF5D00;
--light-coloured-bg: #FFB387;
--clear-bg: #E5E5E5;
--mid-bg: #BBBBBB;
--dark-bg: #2B2B2B;
--dark-border: #888888;
--text-color: #555555;
--white: #FFFFFF;
--black: #000000;
--font-normal: url("/static/fonts/RobotoCondensed-Regular.ttf") format("truetype");
--font-bold: url("/static/fonts/RobotoCondensed-Bold.ttf") format("truetype");
--banner-logo: url(/static/images/logo.png);
--add_icon: url(/static/images/add.png);
--edit_icon: url(/static/images/edit.png);
--login_icon: url(/static/images/login.png);
--logout_icon: url(/static/images/logout.png);
--refresh_icon: url(/static/images/refresh.png);
--save_icon: url(/static/images/save.png);
--search_icon: url(/static/images/search.png);
--trash_icon: url(/static/images/trash.png);
}
</pre>
</article>
{% endblock %}

View File

@ -0,0 +1,11 @@
{% extends "index.html" %}
{% block main %}
<article class='right'>
<h3>Accessing database</h3>
<p>
Even if using <a href='http://flask-sqlalchemy.pocoo.org/2.3/'>Flask-SQLAlchemy</a> to retrieve data
stored in <strong>Postgres</strong> databases is the recommended way to use <strong>TetaWebApp</strong>,
you're free to use the database connector that suit your need.
</p>
</article>
{% endblock %}

View File

@ -30,100 +30,28 @@
<main>
{% block main %}
<article class='right'>
<h3>Le putain de titre</h3>
<img src='/static/images/dummy_pic.png' alt='dummy pic' title='dummy pic'/>
<h3>TetaWebApp demo</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore
</p>
<p>This <a href='/plop.html'>link</a> may lead to an error page</p>
<p>
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
officia deserunt mollit anim id est laborum.
Welcome to the <strong>TetaWebApp</strong> demo
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
officia deserunt mollit anim id est laborum.
</p>
</article>
<article class='left'>
<h3>Le putain de titre 2</h3>
<img src='/static/images/dummy_pic.png' alt='dummy pic' title='dummy pic'/>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore
TetaWebApp is a basic web application template based on Python/Flask made by <a href='https://www.tetalab.org'>Tetalab</a>.
</p>
<p>
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
officia deserunt mollit anim id est laborum.
The goal of this project is to provide a canvas to make any web application you need.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
officia deserunt mollit anim id est laborum.
You can <strong title='bullshit inside'>virtually</strong> do any app you want with TetaWebApp.
</p>
<p>
But be sure that you <strong>still</strong> need work to make it work ;-)
</p>
<p>
Get a copy of <strong>TetaWebApp</strong>:<br/>
<pre>
git clone git://tetalab.org/tetalab/tetawebapp
</pre>
</p>
</article>
<article>
<h3>Inputs demo</h3>
<ul>
<li>plop</li>
<li>plap</li>
<li>plip</li>
</ul>
<ol>
<li>plop</li>
<li>plap</li>
<li>plip</li>
</ol>
<input type='text'/>
<button>Click me</button>
<br/>
<textarea cols='25'></textarea>
<br/>
<select>
{% for item in menu %}
<option>{{ item[0] }}</option>
{% endfor %}
</select>
<input type='submit' value='Click me too'/>
<br/>
<input type='button' value='And me !' />
<br/>
<input type='image' value='' src='/static/images/add.png' title='add' alt='add'/>
<input type='image' value='' src='/static/images/edit.png' title='edit' alt='edit'/>
<input type='image' value='' src='/static/images/login.png' title='login' alt='login'/>
<input type='image' value='' src='/static/images/logout.png' title='logout' alt='logout'/>
<input type='image' value='' src='/static/images/refresh.png' title='refresh' alt='refresh'/>
<input type='image' value='' src='/static/images/save.png' title='save' alt='save'/>
<input type='image' value='' src='/static/images/search.png' title='search' alt='search'/>
<input type='image' value='' src='/static/images/trash.png' title='trash' alt='trash'/>
<br/>
<pre>
#!/bin/sh
# This is code sample
while [ 1 ]
do
echo "Tits or GTFO !"
sleep .1
done
</pre>
</article>
{% endblock %}
</main>

View File

@ -0,0 +1,41 @@
{% extends "index.html" %}
{% block main %}
<article class='right'>
<h3>The input collection</h3>
<p>
Have a look to the input collection:
</p>
<input type='text'/>
<button>Click me</button>
<br/>
<textarea cols='25'></textarea>
<br/>
<select>
{% for item in menu %}
<option>{{ item[0] }}</option>
{% endfor %}
</select>
<input type='submit' value='Click me too'/>
<br/>
<input type='button' value='And me !' />
<br/>
<input type='image' src='/static/images/add.png' title='add' alt='add'/>
<input type='image' src='/static/images/edit.png' title='edit' alt='edit'/>
<input type='image' src='/static/images/login.png' title='login' alt='login'/>
<input type='image' src='/static/images/logout.png' title='logout' alt='logout'/>
<input type='image' src='/static/images/refresh.png' title='refresh' alt='refresh'/>
<input type='image' src='/static/images/save.png' title='save' alt='save'/>
<input type='image' src='/static/images/search.png' title='search' alt='search'/>
<input type='image' src='/static/images/trash.png' title='trash' alt='trash'/>
<br/>
<pre>
#!/bin/sh
# This is code sample
while [ 1 ]
do
echo "Tits or GTFO !"
sleep .1
done
</pre>
</article>
{% endblock %}

View File

@ -0,0 +1,11 @@
{% extends "index.html" %}
{% block main %}
<article class='right'>
<h3>TODO list</h3>
<ul>
<li>Menu management</li>
<li>Installation wizard</li>
<li>Back office for basic content management</li>
</ul>
</article>
{% endblock %}

View File

@ -24,16 +24,6 @@ app.secret_key = 'ce1d1c9ff0ff388a838b3a1e3207dd27'
# Feel free to use SQLAlchemy (or not)
db = SQLAlchemy(app)
app.menu = [('accueil', '/plap.html', 0),
('Motherfuckisme', '/plap.html', 1 ),
('We make porn', '/plap.html', 0 ),
('mes couilles sur la comode3', '/plap.html', 0 ),
('mes couilles sur la comode4', '/plap.html', 0 ),
('mes couilles sur la comode5', '/plap.html', 0 ),
('mes couilles sur la comode6', '/plap.html', 0 ),
('mes couilles sur la comode7', '/plap.html', 0 )
]
########################################################################
# Routes
########################################################################
@ -45,9 +35,72 @@ def page_not_found(e):
@app.route("/", methods=['GET', 'POST'])
def index():
app.menu = [('Accueil', '/', 1),
('Articles', '/articles', 0),
('Basics', '/basics', 0),
('Inputs', '/inputs', 0),
('Database', '/database', 0),
('Todo', '/todo', 0),
]
return render_template('index.html', menu=app.menu)
@app.route("/articles", methods=['GET', 'POST'])
def articles():
app.menu = [('Accueil', '/', 0),
('Articles', '/articles', 1),
('Basics', '/basics', 0),
('Inputs', '/inputs', 0),
('Database', '/database', 0),
('Todo', '/todo', 0),
]
return render_template('articles.html', menu=app.menu)
@app.route("/basics", methods=['GET', 'POST'])
def basics():
app.menu = [('Accueil', '/', 0),
('Articles', '/articles', 0),
('Basics', '/basics', 1),
('Inputs', '/inputs', 0),
('Database', '/database', 0),
('Todo', '/todo', 0),
]
return render_template('basics.html', menu=app.menu)
@app.route("/inputs", methods=['GET', 'POST'])
def inputs():
app.menu = [('Accueil', '/', 0),
('Articles', '/articles', 0),
('Basics', '/basics', 0),
('Inputs', '/inputs', 1),
('Database', '/database', 0),
('Todo', '/todo', 0),
]
return render_template('inputs.html', menu=app.menu)
@app.route("/database", methods=['GET', 'POST'])
def database():
app.menu = [('Accueil', '/', 0),
('Articles', '/articles', 0),
('Basics', '/basics', 0),
('Inputs', '/inputs', 0),
('Database', '/database', 1),
('Todo', '/todo', 0),
]
return render_template('database.html', menu=app.menu)
@app.route("/todo", methods=['GET', 'POST'])
def todo():
app.menu = [('Accueil', '/', 0),
('Articles', '/articles', 0),
('Basics', '/basics', 0),
('Inputs', '/inputs', 0),
('Database', '/database', 0),
('Todo', '/todo', 1),
]
return render_template('todo.html', menu=app.menu)
########################################################################
# Main