Commit 236801be authored by BERJON Matthieu's avatar BERJON Matthieu

Update of the templates

At the moment, we decided to remove all unecessary css and keep only the
HTML architecture with bootstrap structure.
Signed-off-by: BERJON Matthieu's avatarMatthieu Berjon <matthieu.berjon@inria.fr>
parent 5012effd
......@@ -12,5 +12,4 @@ urlpatterns = [
{'template_name': 'login.html'},
name='login'),
url(r'^logout/$', auth_views.logout, name='logout'),
url(r'^signup/', views.signup, name='signup'),
]
......@@ -38,3 +38,60 @@ header {
.footer img {
height: 43px;
}
/*
* Home
*/
h1.homepage {
font-size: 350%;
}
#allgo-presentation {
font-weight: bold;
font-size: 1.5em;
margin: 1.5em 0;
}
.presentation {
margin-bottom: 4em;
}
.corner-ribbon{
width: 200px;
background: #e43;
position: absolute;
top: 25px;
left: -50px;
text-align: center;
line-height: 50px;
letter-spacing: 1px;
color: #f0f0f0;
transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
font-weight: bold;
}
/* Custom styles */
.corner-ribbon.sticky{
position: fixed;
}
.corner-ribbon.shadow{
box-shadow: 0 0 3px rgba(0,0,0,.3);
}
/*
.corner-ribbon.top-left{
top: 25px;
left: -50px;
transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
}
*/
.corner-ribbon.top-right{
top: 25px;
right: -50px;
left: auto;
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
}
.corner-ribbon.blue{background: #39d;}
......@@ -11,7 +11,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="{% static 'css/allgo.css' %}" media="all" charset="utf-8">
<!-- <link rel="stylesheet" type="text/css" href="{% static 'css/allgo.css' %}" media="all" charset="utf-8"> -->
</head>
......
......@@ -3,48 +3,35 @@
{% block title %}Home{% endblock %}
{% block content %}
<style media="screen" type="text/css">
.alert {
position: absolute;
min-width: 300px;
}
div {
color:#2c3e50;
}
</style>
<div class="presentation">
<div class="container">
<div class="text-center">
<!-- <div class="text-center" style="color: yellow;transform-origin: 50% 100%;transform: perspective(300px) rotateX(25deg);"> -->
<h1 class="brand">A||GO</h1>
<br />
<h3 id="main-text">
Allgo is a platform for building deploying apps that analyze massive data in Linux containers, it has been specifically designed for use in scientific applications.
</h3>
<br />
<a href="#" class="btn btn-lg btn-success">Get Started</a>
<br />
<br />
<p class="text-muted">
Currently in Beta
</p>
</div>
<div class="container">
<div class="text-center">
<h1>A||GO</h1>
<p>
Allgo is a platform for building deploying apps that analyze massive
data in Linux containers, it has been specifically designed for use in
scientific applications.
</p>
<p><a href="#" class="btn btn-lg btn-success">Get Started</a></p>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-lg-4">
<h3><i class="glyphicon glyphicon-share-alt"></i> Easy Sharing</h3>
<p>You don't need to spend hours packaging your algorithms anymore thanks to Allgo. End users can immediately use your application.</p>
<h3><i class="fas fa-share-alt"></i> Easy Sharing</h3>
<p>You don't need to spend hours packaging your algorithms anymore thanks
to Allgo. End users can immediately use your application.</p>
</div>
<div class="col-lg-4">
<h3><i class="glyphicon glyphicon-floppy-saved"></i> Backup your app</h3>
<p>We are using Linux container technology to run your applications. They can be launched several years after the initial deployement without any upgrade of your source code.</p>
<h3><i class="fas fa-save"></i> Backup your app</h3>
<p>We are using Linux container technology to run your applications. They
can be launched several years after the initial deployement without any
upgrade of your source code.</p>
</div>
<div class="col-lg-4">
<h3><i class="glyphicon glyphicon-console"></i> Command Line Interface</h3>
<p>Thanks to our easy to use HTTP REST API, you can do your own scripts using our platform.</p>
<h3><i class="fas fa-terminal"></i> Command Line Interface</h3>
<p>Thanks to our easy to use HTTP REST API, you can do your own scripts
using our platform.</p>
</div>
</div>
</div>
......
......@@ -3,10 +3,12 @@
{% block title %}Login{% endblock %}
{% block content %}
<h2>Login</h2>
<form method="post">
{% csrf_token %}
<h2>Login</h2>
<form method="post">
{% csrf_token %}
<div class="form-group">
{{ form.as_p }}
<button type="submit">Login</button>
</form>
</div>
<button class="btn btn-primary" type="submit">Login</button>
</form>
{% endblock %}
{% load static %}
<footer class="footer">
<div class="container">
<div class="row">
<div class="col">
<img class="img-responsive" src="{% static 'images/credit.png' %}" alt="inria">
<img src="{% static 'images/credit.png' %}" alt="inria">
</div>
<div class="col">
<p class="text-center">{% now "Y" %}</p>
......
<header class="container-fluid">
<div class="container">
<nav class="allgo-main-nav navbar navbar-expand-lg navbar-light">
<a class="navbar-brand brand" href="{% url 'poc_home' %}">A||GO</a>
<nav class="navbar navbar-expand-lg navbar-light">
<a class="navbar-brand" href="{% url 'poc_home' %}">A||GO</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
......@@ -15,7 +15,7 @@
</li>
{% if not user.is_authenticated %}
<li class="nav-item">
<a class="nav-link" href="{% url 'login' %}"><i class="fas fa-sign-in-alt"></i></i> Login</a>
<a class="nav-link" href="{% url 'login' %}"><i class="fas fa-sign-in-alt"></i> Login</a>
</li>
{% else %}
<li class="nav-item">
......
{% for message in messages %}
<div class="alert {{ message.tags }} alert-dismissible" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
{{ message }}
</div>
<div class="alert alert-{{ message.tags }} alert-dismissible fade show" role="alert">
{{ message }}
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
{% comment %}
To enable it, need to add this javascript somewhere in the page
$('.alert').alert()
{% endcomment %}
</div>
{% endfor %}
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment