First commit!

account/admin.py

@@ -0,0 +1,4 @@
+from django.contrib import admin
+from account.models import Member
+
+admin.site.register(Member)

account/apps.py

@@ -0,0 +1,5 @@
+from django.apps import AppConfig
+
+
+class AccountConfig(AppConfig):
+    name = 'account'

account/forms.py

@@ -0,0 +1,8 @@
+#-*- coding: utf-8 -*-
+
+from django.conf import settings
+from django import forms
+
+class LoginForm(forms.Form):
+    username = forms.CharField(label="Nom d'utilisateur", max_length=settings.USERNAME_LENGTH)
+    password = forms.CharField(label="Mot de passe", widget=forms.PasswordInput)

account/models.py

@@ -0,0 +1,16 @@
+#-*- coding: utf-8 -*-
+
+from django.db import models
+from django.contrib.auth.models import User
+
+class Member(models.Model):
+    user = models.OneToOneField(User)
+
+    website = models.URLField(null=True, blank=True)
+    # avatar = models.ImageField(null=True, blank=True, upload_to="avatars/")
+    signature = models.TextField(null=True, blank=True)
+
+    somedata = models.BooleanField(default=False)
+
+    def __str__(self):
+        return "Profil de {0}".format(self.user.username)

account/tests.py

@@ -0,0 +1,3 @@
+from django.test import TestCase
+
+# Create your tests here.

account/urls.py

@@ -0,0 +1,9 @@
+from django.conf.urls import patterns, url
+
+import account.views as v
+
+urlpatterns = [
+    url(r'^$', v.account), # Index
+    url(r'^login/$', v.login),
+    url(r'^logout/$', v.logout),
+]

account/views.py

@@ -0,0 +1,33 @@
+from django.shortcuts import render, redirect
+from django.contrib.auth import authenticate
+from django.contrib.auth import login as a_login, logout as a_logout
+from account.forms import LoginForm
+from django.core.urlresolvers import reverse
+
+from home.views import homepage
+
+def login(request):
+    error = False
+
+    if request.method == "POST":
+        form = LoginForm(request.POST)
+        if form.is_valid():
+            username = form.cleaned_data["username"]
+            password = form.cleaned_data["password"]
+            user = authenticate(username=username, password=password)
+            if user:
+                a_login(request, user)
+                return redirect(reverse(homepage))
+            else:
+                error = True
+    else:
+        form = LoginForm()
+
+    return render(request, 'account/login.html',locals())
+
+def logout(request):
+    a_logout(request)                                                                                     
+    return redirect(reverse(homepage))
+
+def account(request):
+    pass

forum/admin.py

@@ -0,0 +1,6 @@
+from django.contrib import admin
+from forum.models import *
+
+admin.site.register(Forum)
+admin.site.register(Topic)
+admin.site.register(Message)

forum/apps.py

@@ -0,0 +1,5 @@
+from django.apps import AppConfig
+
+
+class ForumConfig(AppConfig):
+    name = 'forum'

forum/migrations/0001_initial.py

@@ -0,0 +1,33 @@
+# -*- coding: utf-8 -*-
+# Generated by Django 1.9.9 on 2016-09-26 16:03
+from __future__ import unicode_literals
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    initial = True
+
+    dependencies = [
+    ]
+
+    operations = [
+        migrations.CreateModel(
+            name='Forum',
+            fields=[
+                ('id', models.AutoField(auto_created=True, primary_key=True, serialize=False, verbose_name='ID')),
+                ('name', models.CharField(max_length=100, verbose_name='Nom du forum')),
+                ('description', models.CharField(max_length=200, verbose_name='Description du forum')),
+            ],
+        ),
+        migrations.CreateModel(
+            name='Topic',
+            fields=[
+                ('id', models.AutoField(auto_created=True, primary_key=True, serialize=False, verbose_name='ID')),
+                ('title', models.CharField(max_length=100, verbose_name='Titre du topic')),
+                ('date', models.DateTimeField(auto_now_add=True, verbose_name='Date de création')),
+                ('m_date', models.DateTimeField(auto_now_add=True, verbose_name='Dernière date de modification')),
+            ],
+        ),
+    ]

forum/migrations/0002_auto_20160926_1811.py

@@ -0,0 +1,27 @@
+# -*- coding: utf-8 -*-
+# Generated by Django 1.9.9 on 2016-09-26 16:11
+from __future__ import unicode_literals
+
+from django.db import migrations, models
+import django.db.models.deletion
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('forum', '0001_initial'),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name='topic',
+            name='forum',
+            field=models.ForeignKey(default=1, on_delete=django.db.models.deletion.CASCADE, to='forum.Forum'),
+            preserve_default=False,
+        ),
+        migrations.AlterField(
+            model_name='topic',
+            name='m_date',
+            field=models.DateTimeField(auto_now=True, verbose_name='Dernière date de modification'),
+        ),
+    ]

forum/models.py

@@ -0,0 +1,36 @@
+#-*- coding: utf-8 -*-
+
+from django.db import models
+from account.models import Member
+
+class Forum(models.Model):
+    name = models.CharField(max_length=100, verbose_name="Nom du forum")
+    description = models.CharField(max_length=200, verbose_name="Description du forum")
+    canAccess = []
+
+    def __str__(self):
+        return "Forum : {}".format(self.name)
+
+class Topic(models.Model):
+    title = models.CharField(max_length=100, verbose_name="Titre du topic")
+    forum = models.ForeignKey(Forum)
+
+    # TODO : solve problem of OneToOne relation combined to ForeignKey
+
+    def __str__(self):
+        return "Topic : {}".format(self.title)
+
+class Message(models.Model):
+    topic = models.ForeignKey(Topic)
+    author = models.ForeignKey(Member, null=True)
+    pseudo = models.CharField(max_length=50, verbose_name="Nom de l'invité", null=True)
+
+    ip = models.GenericIPAddressField()
+    
+    date = models.DateTimeField(auto_now_add=True, auto_now=False, verbose_name="Date de création")
+    m_date = models.DateTimeField(auto_now_add=False, auto_now=True, verbose_name="Dernière date de modification")
+
+    content = models.TextField(null=True, blank=True)
+
+    def __str__(self):
+        return "Message : {}".format(self.content[0:50])

forum/tests.py

@@ -0,0 +1,3 @@
+from django.test import TestCase
+
+# Create your tests here.

forum/urls.py

@@ -0,0 +1,10 @@
+from django.conf.urls import patterns, url
+
+import forum.views as v
+
+urlpatterns = [
+    url(r'^$', v.index), # Index
+    url(r'^(?P<id_forum>\d+)/$', v.forum), # List of topics
+    url(r'^(?P<id_forum>\d+)/(?P<id_topic>\d+)/$', v.topic), # See a topic
+    url(r'^(?P<id_forum>\d+)/(?P<id_topic>\d+)/(?P<page>\d+|(last))/$', v.topic), # See a page of a topic
+]

forum/views.py

@@ -0,0 +1,22 @@
+#-*- coding: utf-8 -*-
+
+from django.http import Http404
+from django.shortcuts import render, get_object_or_404
+
+from forum.models import *
+
+def index(request):
+    return render(request, 'forum/index.html', {'forums': Forum.objects.all()})
+
+def forum(request, id_forum):
+    forum = get_object_or_404(Forum, id=id_forum)
+    return render(request, 'forum/forum.html', {'forum': forum})
+
+def topic(request, id_forum, id_topic, page = 1):
+    if page != 'last':
+        page = int(page)
+
+    topic = get_object_or_404(Topic, id=id_topic)
+
+    text = "Vous êtes sur la page {} du topic {} du forum {}.".format(page, id_topic, id_forum)
+    return HttpResponse(text)

home/admin.py

@@ -0,0 +1,3 @@
+from django.contrib import admin
+
+# Register your models here.

home/apps.py

@@ -0,0 +1,5 @@
+from django.apps import AppConfig
+
+
+class HomeConfig(AppConfig):
+    name = 'home'

home/models.py

@@ -0,0 +1,3 @@
+from django.db import models
+
+# Create your models here.

home/tests.py

@@ -0,0 +1,3 @@
+from django.test import TestCase
+
+# Create your tests here.

home/urls.py

@@ -0,0 +1,6 @@
+from django.conf.urls import patterns, url
+
+import home.views as v
+urlpatterns = [
+    url(r'^$', v.homepage),
+]

home/views.py

@@ -0,0 +1,6 @@
+#-*- coding: utf-8 -*-
+
+from django.shortcuts import render
+
+def homepage(request):
+    return render(request, 'home/homepage.html')

manage.py

@@ -0,0 +1,10 @@
+#!/usr/bin/env python
+import os
+import sys
+
+if __name__ == "__main__":
+    os.environ.setdefault("DJANGO_SETTINGS_MODULE", "planete_casio.settings")
+
+    from django.core.management import execute_from_command_line
+
+    execute_from_command_line(sys.argv)

planete_casio/settings.py

@@ -0,0 +1,148 @@
+"""
+Django settings for planete_casio project.
+
+Generated by 'django-admin startproject' using Django 1.9.9.
+
+For more information on this file, see
+https://docs.djangoproject.com/en/1.9/topics/settings/
+
+For the full list of settings and their values, see
+https://docs.djangoproject.com/en/1.9/ref/settings/
+"""
+
+import os
+
+# Build paths inside the project like this: os.path.join(BASE_DIR, ...)
+BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))
+
+# Quick-start development settings - unsuitable for production
+# See https://docs.djangoproject.com/en/1.9/howto/deployment/checklist/
+
+# SECURITY WARNING: keep the secret key used in production secret!
+SECRET_KEY = '-gud%6mib@5feg!)!q3ubk%gl3@yav2j!zycwwhdav8zqp5odo'
+
+# SECURITY WARNING: don't run with debug turned on in production!
+DEBUG = True
+
+ALLOWED_HOSTS = []
+# ALLOWED_HOSTS = ['172.0.0.1', 'localhost']
+
+
+# Application definition
+
+INSTALLED_APPS = [
+    'django.contrib.admin',
+    'django.contrib.auth',
+    'django.contrib.contenttypes',
+    'django.contrib.sessions',
+    'django.contrib.messages',
+    'django.contrib.staticfiles',
+    # User apps
+    'forum',
+    'home',
+    'account',
+]
+
+MIDDLEWARE_CLASSES = [
+    'django.middleware.security.SecurityMiddleware',
+    'django.contrib.sessions.middleware.SessionMiddleware',
+    'django.middleware.common.CommonMiddleware',
+    'django.middleware.csrf.CsrfViewMiddleware',
+    'django.contrib.auth.middleware.AuthenticationMiddleware',
+    'django.contrib.auth.middleware.SessionAuthenticationMiddleware',
+    'django.contrib.messages.middleware.MessageMiddleware',
+    'django.middleware.clickjacking.XFrameOptionsMiddleware',
+]
+
+ROOT_URLCONF = 'planete_casio.urls'
+
+TEMPLATES = [
+    {
+        'BACKEND': 'django.template.backends.django.DjangoTemplates',
+        'DIRS': [
+            '/home/darks/web/planete_casio/templates/',
+        ],
+        'APP_DIRS': True,
+        'OPTIONS': {
+            'context_processors': [
+                'django.template.context_processors.debug',
+                'django.template.context_processors.request',
+                'django.contrib.auth.context_processors.auth',
+                'django.contrib.messages.context_processors.messages',
+            ],
+        },
+    },
+]
+
+WSGI_APPLICATION = 'planete_casio.wsgi.application'
+
+
+# Database
+# https://docs.djangoproject.com/en/1.9/ref/settings/#databases
+
+DATABASES = {
+    'default': {
+        'ENGINE': 'django.db.backends.sqlite3',
+        'NAME': os.path.join(BASE_DIR, 'db.sqlite3'),
+    }
+}
+
+# DATABASES = {
+#     'default': {
+#         'ENGINE': 'django.db.backends.postgresql',
+#         'NAME': 'db_name',                      
+#         'USER': 'db_user',
+#         'PASSWORD': 'db_user_password',
+#         'HOST': '',
+#         'PORT': 'db_port_number',
+#     }
+# }
+
+# Password validation
+# https://docs.djangoproject.com/en/1.9/ref/settings/#auth-password-validators
+
+AUTH_PASSWORD_VALIDATORS = [
+    {
+        'NAME': 'django.contrib.auth.password_validation.UserAttributeSimilarityValidator',
+    },
+    {
+        'NAME': 'django.contrib.auth.password_validation.MinimumLengthValidator',
+    },
+    {
+        'NAME': 'django.contrib.auth.password_validation.CommonPasswordValidator',
+    },
+    {
+        'NAME': 'django.contrib.auth.password_validation.NumericPasswordValidator',
+    },
+]
+
+
+# Internationalization
+# https://docs.djangoproject.com/en/1.9/topics/i18n/
+
+LANGUAGE_CODE = 'fr-FR'
+
+TIME_ZONE = 'Europe/Paris'
+
+USE_I18N = True
+
+USE_L10N = True
+
+USE_TZ = True
+
+APPEND_SLASH = True
+
+
+# Static files (CSS, JavaScript, Images)
+# https://docs.djangoproject.com/en/1.9/howto/static-files/
+
+STATIC_URL = 'http://static.localhost/' # For dev css
+# STATIC_URL = '/static/' # For Django admin css
+
+# STATIC_ROOT = '/home/web/planete_casio/static/'
+
+STATICFILES_DIRS = (
+    "/home/web/planete_casio/sfiles/",
+)
+
+USERNAME_LENGTH = 30

planete_casio/urls.py

@@ -0,0 +1,25 @@
+"""planete_casio URL Configuration
+
+The `urlpatterns` list routes URLs to views. For more information please see:
+    https://docs.djangoproject.com/en/1.9/topics/http/urls/
+Examples:
+Function views
+    1. Add an import:  from my_app import views
+    2. Add a URL to urlpatterns:  url(r'^$', views.home, name='home')
+Class-based views
+    1. Add an import:  from other_app.views import Home
+    2. Add a URL to urlpatterns:  url(r'^$', Home.as_view(), name='home')
+Including another URLconf
+    1. Import the include() function: from django.conf.urls import url, include
+    2. Add a URL to urlpatterns:  url(r'^blog/', include('blog.urls'))
+"""
+from django.conf import settings
+from django.conf.urls import url, include
+from django.contrib import admin
+
+urlpatterns = [
+    url(r'^admin/', admin.site.urls),
+    url(r'^', include('home.urls')),
+    url(r'^forum/', include('forum.urls')),
+    url(r'^account/', include('account.urls')),
+]

planete_casio/views.py

@@ -0,0 +1,8 @@
+#-*- coding: utf-8 -*-
+
+from django.http import HttpResponse, Http404
+
+def home(request):
+    text = """<h1>Bienvenue sur Planète Casio !</h1>
+            <p>Vous êtes actuellement sur la page d'accueil.</p>"""
+    return HttpResponse(text)

planete_casio/wsgi.py

@@ -0,0 +1,16 @@
+"""
+WSGI config for planete_casio project.
+
+It exposes the WSGI callable as a module-level variable named ``application``.
+
+For more information on this file, see
+https://docs.djangoproject.com/en/1.9/howto/deployment/wsgi/
+"""
+
+import os
+
+from django.core.wsgi import get_wsgi_application
+
+os.environ.setdefault("DJANGO_SETTINGS_MODULE", "planete_casio.settings")
+
+application = get_wsgi_application()

sfiles/admin

@@ -0,0 +1 @@
+/usr/lib/python3.5/site-packages/django/contrib/admin/static/admin/

sfiles/container.css

@@ -0,0 +1,86 @@
+#container {
+	margin-left: 60px;
+}
+
+#container h1 {
+	margin-left: 5%;
+	font-family: Raleway; font-size: 24px;
+	font-weight: 200; color: #242424;
+}
+
+#container h2 {
+	margin-left: 5%;
+	font-family: Raleway; font-size: 20px;
+	font-weight: 200; color: #242424;
+}
+
+article > div {
+	margin: 5px 15px;
+	text-align: justify;
+}
+
+article .flex-container {
+	display: flex;
+}
+
+article .flex-container > * {
+	flex-grow: 1;
+	max-width: 500px;
+	margin: 5px 10px;
+}
+
+article .flex-container > * .more {
+	display: block; margin-left: 10px;
+	font-family: NotoSans; font-size: 12px;
+	color: #ba1203;
+	transition: .15s ease;
+}
+article .flex-container > * .more:hover {
+	padding-left: 1 5px;
+}
+
+article p {
+	margin-bottom: 10px;
+}
+
+
+/* tiles */
+.tile-container {
+	display: flex; flex-wrap: wrap;
+	justify-content: space-around;
+	align-items: stretch;
+}
+
+.tile-container > div {
+	flex-grow: 1;
+	min-width: 300px;
+	margin: 10px 15px; padding: 0 10px;
+	/*border: 1px solid #cccccc;*/
+	border-radius: 3px;
+	box-shadow: 0px 1px 3px rgba(0, 0, 0, .3);
+}
+
+
+.tile-container table {
+	width: 100%;
+}
+.tile-container table td {
+	padding: 3px 5px;
+	display: flex;
+}
+.tile-container table input[type="text"],
+.tile-container table input[type="date"] {
+	flex-grow: 1;
+	padding: 3px 10px;
+	border: 0; border-radius: 1px;
+	font-family: "Segoe UI", Helvetica, "Droid Sans", Arial,sans-serif;
+	box-shadow: 0 0 1px rgba(0, 0, 0, .4); transition: .15s ease;
+}
+.tile-container table input[type="text"]:focus,
+.tile-container table input[type="date"]:focus {
+	box-shadow: 0 0 4px rgba(0, 102, 255, .9);
+}
+}
+.tile-container table td:first-child {
+	/*text-align: right;*/
+}

sfiles/css/container.css

@@ -0,0 +1,86 @@
+#container {
+	margin-left: 60px;
+}
+
+#container h1 {
+	margin-left: 5%;
+	font-family: Raleway; font-size: 24px;
+	font-weight: 200; color: #242424;
+}
+
+#container h2 {
+	margin-left: 5%;
+	font-family: Raleway; font-size: 20px;
+	font-weight: 200; color: #242424;
+}
+
+article > div {
+	margin: 5px 15px;
+	text-align: justify;
+}
+
+article .flex-container {
+	display: flex;
+}
+
+article .flex-container > * {
+	flex-grow: 1;
+	max-width: 500px;
+	margin: 5px 10px;
+}
+
+article .flex-container > * .more {
+	display: block; margin-left: 10px;
+	font-family: NotoSans; font-size: 12px;
+	color: #ba1203;
+	transition: .15s ease;
+}
+article .flex-container > * .more:hover {
+	padding-left: 1 5px;
+}
+
+article p {
+	margin-bottom: 10px;
+}
+
+
+/* tiles */
+.tile-container {
+	display: flex; flex-wrap: wrap;
+	justify-content: space-around;
+	align-items: stretch;
+}
+
+.tile-container > div {
+	flex-grow: 1;
+	min-width: 300px;
+	margin: 10px 15px; padding: 0 10px;
+	/*border: 1px solid #cccccc;*/
+	border-radius: 3px;
+	box-shadow: 0px 1px 3px rgba(0, 0, 0, .3);
+}
+
+
+.tile-container table {
+	width: 100%;
+}
+.tile-container table td {
+	padding: 3px 5px;
+	display: flex;
+}
+.tile-container table input[type="text"],
+.tile-container table input[type="date"] {
+	flex-grow: 1;
+	padding: 3px 10px;
+	border: 0; border-radius: 1px;
+	font-family: "Segoe UI", Helvetica, "Droid Sans", Arial,sans-serif;
+	box-shadow: 0 0 1px rgba(0, 0, 0, .4); transition: .15s ease;
+}
+.tile-container table input[type="text"]:focus,
+.tile-container table input[type="date"]:focus {
+	box-shadow: 0 0 4px rgba(0, 102, 255, .9);
+}
+}
+.tile-container table td:first-child {
+	/*text-align: right;*/
+}

sfiles/css/global.css

@@ -0,0 +1,161 @@
+/*
+	fonts
+*/
+
+@font-face { font-family: NotoSans; src: url(../fonts/noto_sans.ttf); }
+@font-face { font-family: Raleway; font-weight: 200; src: url(../fonts/raleway_200.ttf); }
+@font-face { font-family: Raleway; font-weight: 300; src: url(../fonts/raleway_300.ttf); }
+
+
+
+/*
+	body
+*/
+
+body {
+	margin: 0;
+	background: #ffffff;
+	font-family: sans-serif;
+}
+
+
+/*
+	header
+*/
+
+header {
+	height: 50px; margin: 0; padding: 0 30px;
+	display: flex; align-items: center; justify-content: space-between;
+	background: #f8f8fa; border-bottom: 1px solid #d0d0d0;
+}
+
+
+header svg {
+	width: 24px; height: 24px; vertical-align: middle;
+	transition: .15s ease;
+}
+header a:hover > svg,  header a:focus > svg {
+	filter: brightness(.5);
+}
+
+header input[type="search"] {
+	width: 250px;
+	padding: 5px 35px 5px 10px;
+	border: 0; border-radius: 1px;
+	font-family: "Segoe UI", Helvetica, "Droid Sans", Arial,sans-serif;
+	box-shadow: 0 0 1px rgba(0, 0, 0, .4); transition: .15s ease;
+}
+header input[type="search"] ~ a {
+	position: relative; left: -33px;
+}
+header input[type="search"]:focus {
+	box-shadow: 0 0 4px rgba(0, 102, 255, .9);
+}
+header input[type="search"] ~ a > svg > path {
+	fill: #cccccc; transition: .15s ease;
+}
+header input[type="search"]:focus ~ a > svg > path {
+	fill: #333333;
+}
+
+#spotlight a {
+	padding: 8px 18px 6px 18px;
+	color: #727272; font-size: 15px;
+	border-bottom: 2px solid rgba(93, 123, 141, 0);
+	transition: border .15s ease;
+}
+#spotlight a:hover, header #spotlight a:focus {
+	border-bottom: 2px solid rgba(93, 123, 141, 1);
+}
+
+
+/*
+	links
+*/
+
+a {
+	text-decoration: none;
+}
+a:focus {
+	outline: none;
+}
+
+
+
+/*
+	alert overlay
+*/
+
+.alert {
+	position: fixed; left: 15%;
+	display: flex; align-items: center;
+	width: 70%; z-index: 10;
+	font-family: NotoSans; font-size: 14px; color: #212121;
+	background: #ffffff;
+	border-bottom: 5px solid #4caf50;
+	border-radius: 1px; box-shadow: 0 1px 12px rgba(0, 0, 0, 0.3);
+	transition: opacity .15s ease;
+}
+.alert.ok {
+	border-color: #4caf50;
+}
+.alert.error {
+	border-color: #f44336;
+}
+.alert span {
+	flex-grow: 1; margin: 15px 10px 10px 0;
+}
+.alert input[type="button"] {
+	margin: 3px 30px 0 0;
+}
+
+.alert svg {
+	margin: 15px 20px 10px 30px;
+}
+
+
+
+/*
+	buttons
+*/
+
+input[type="button"] {
+	font-family: NotoSans; font-size: 14px; /*font-weight: bold;*/
+	text-align: center;
+	padding: 5px 15px;
+	transition: .1s ease;
+}
+
+/* flat */
+input[type="button"].flat {
+	border: none;
+	background: rgba(0, 0, 0, 0); color: #727272;
+}
+input[type="button"].flat:hover {
+	background: rgba(0, 0, 0, .1);
+}
+input[type="button"].flat:focus {
+	background: rgba(0, 0, 0, .2);
+}
+
+/* raised */
+input[type="button"].raised {
+	border: none;
+	background: #e0e0e0; color: #212121;
+	box-shadow: 0 1px 2px rgba(0, 0, 0, .3);
+}
+input[type="button"].raised:hover,
+input[type="button"].raised:focus {
+	background: #d5d5d5;
+}
+input[type="button"].raised:active {
+	background: #d6d6d6;
+	box-shadow: 0 1px 8px rgba(0, 0, 0, .3);
+}
+
+/* Input text */
+input[type="text"]:focus,
+input[type="search"]:focus,
+input[type="password"]:focus {
+	
+}

sfiles/css/light.css

@@ -0,0 +1,256 @@
+/*
+	fonts
+*/
+
+@font-face { font-family: NotoSans; src: url(../fonts/noto_sans.ttf); }
+@font-face { font-family: Raleway; font-weight: 200; src: url(../fonts/raleway_200.ttf); }
+@font-face { font-family: Raleway; font-weight: 300; src: url(../fonts/raleway_300.ttf); }
+
+
+/* Global */
+
+body {
+	margin: 0;
+	background: #ffffff;
+	font-family: sans-serif;
+}
+
+nav a {
+	color: #ffffff; opacity: .7;
+	text-decoration: none;
+	transition: opacity .15s ease;
+}
+nav a:hover,
+nav a:focus {
+	opacity: 1;
+}
+
+.light-hidden {
+	display: none;
+}
+
+/* Menu */
+
+#light-menu {
+	list-style: none;
+	display: flex; flex-direction: row; align-items: center;
+	width: 100%; height: 40px;
+	overflow-x: auto; overflow-y: hidden;
+	margin: 0; padding: 0;
+	text-indent: 0;
+	background: #22292c; box-shadow: 0 0 2px rgba(0, 0, 0, 0.3);
+}
+
+#logo {
+	position: relative; display: block;
+	height: 100%; opacity: 1;
+	background: -moz-linear-gradient(left, #bf1c11, #ba1203);
+	background: -webkit-linear-gradient(left, #bf1c11, #ba1203);
+}
+/*#logo::after {
+	position: absolute; left: 100%; top: 50%;
+	height: 0; width: 0;
+	border: solid transparent; content: " ";
+	border-left-color: #ba1203;
+	border-width: 4px;
+	margin-top: -4px;
+}*/
+#logo img {
+	width: 40px;
+	margin: 0; padding: 0;
+	margin-bottom: -4.5px;
+	filter: drop-shadow(0 0 2px rgba(0, 0, 0, .0));
+	transition: filter .15s ease;
+}
+#logo:hover img,
+#logo:focus img {
+	filter: drop-shadow(0 0 2px rgba(0, 0, 0, .7));
+}
+
+#light-menu > li {
+	display: flex; flex-direction: column;
+	align-items: center; flex-grow: 1;
+	height: 100%;
+	text-align: center;
+	font-family: Raleway; font-size: 13px;
+	color: #ffffff;
+}
+#light-menu li {
+	padding: 0 2px;
+}
+#light-menu li > a {
+	display: flex; flex-direction: column;
+	align-items: center; justify-content: center;
+	width: 100%; height: 100%;
+}
+#light-menu li > a > div {
+	display: none;
+	font-size: 12px;
+}
+
+#light-menu li > a > svg {
+	display: block; width: 20px; flex-shrink: 0;
+	margin: 0 auto 5px auto;
+}
+
+#light-menu li span[notifications]:not([notifications="0"])::before {
+	content: attr(notifications);
+	display: inline-block; margin-right: 6px;
+	vertical-align: middle;
+	padding: 0 5px 0 4px; border-radius: 5px;
+	font-family: NotoSans;
+	background: #ffffff; color: #000000;
+}
+
+
+#menu {
+	width: 100%; height: 0; overflow-x: hidden;
+	font-family: NotoSans; font-size: 12px;
+	background: #22292c; box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
+	transition: .1s ease;
+}
+#menu.opened {
+	height: 100%;
+	overflow-y: auto;
+}
+
+#menu > div {
+	width: 100%;
+	display: none;
+}
+#menu > div.opened {
+	display: block;
+}
+#menu h2 {
+	margin: 10px 0 10px 40px;
+	font-family: Raleway; font-size: 15px;
+	color: #ffffff;
+}
+#menu h2 > svg {
+	width: 30px; vertical-align: middle;
+}
+#menu h2 > img {
+	width: 64px; margin-right: 10px;
+	vertical-align: middle; border-radius: 50%;
+}
+
+#menu h3 {
+	margin: 10px 0 10px 40px;
+	font-family: Raleway; font-size: 13px;
+	color: #ffffff;
+}
+#menu hr {
+	margin: 10px 15px 0 15px;
+	border: none;
+	border-bottom: 1px solid rgba(0, 0, 0, .15);
+}
+
+#menu > div > a,
+#menu span {
+	display: block; margin: 10px 15px;
+}
+#menu span {
+	/*font-style: italic;*/ color: #b8b8b8;
+	font-size: 10px;
+}
+#menu span > a {
+	display: inline;
+	margin: 0; font-style: normal;
+	font-size: 12px;
+}
+#menu a > img {
+	vertical-align: middle;
+	margin-right: 15px;
+}
+#menu a > svg {
+	width: 20px; height: 20px; vertical-align: middle;
+	margin-right: 10px;
+}
+#menu ul {
+	list-style: none;
+	margin: 10px 15px; padding: 0;
+	color: #b8b8b8;
+}
+#menu li {
+	margin: 5px 0;
+}
+
+@media all and (min-width: 550px) {
+	#light-menu {
+		height: 60px;
+	}
+	#logo img {
+		width: 60px;
+	}
+	#light-menu li > a > div {
+		display: block;
+	}
+}
+
+#menu form input {
+	display: block;
+	margin: 5px 15px; padding: 5px 10px;
+	font-size: 14px;
+	background: #e8e8e8; transition: background .15s ease;
+}
+#menu form input:focus {
+	background: #ffffff;
+}
+#menu form input:first-child {
+	margin-bottom: 0; border-bottom: none;
+	border-top-left-radius: 5px;
+	-webkit-border-top-left-radius: 5px;
+	-moz-border-top-left-radius: 5px;
+	border-top-right-radius: 5px;
+	-webkit-border-top-right-radius: 5px;
+	-moz-border-top-right-radius: 5px;
+}
+#menu form input:nth-child(2) {
+	margin-top: 0; border-top: 1px solid #dddddd;
+	border-bottom-left-radius: 5px;
+	-webkit-border-bottom-left-radius: 5px;
+	-moz-border-bottom-left-radius: 5px;
+	border-bottom-right-radius: 5px;
+	-webkit-border-bottom-right-radius: 5px;
+	-moz-border-bottom-right-radius: 5px;
+}
+#menu form a {
+	display: block; margin-left: 15px;
+}
+
+
+/* Header */
+
+header {
+	padding: 10px 10px 0px 10px;
+	background: #f8f8fa; border-bottom: 1px solid #d0d0d0;
+}
+header svg {
+	width: 24px; height: 24px; vertical-align: middle;
+	transition: .15s ease;
+}
+header a:hover > svg,  header a:focus > svg {
+	filter: brightness(.5);
+}
+
+header input[type="search"] {
+	width: 100%;
+	border: 0; border-radius: 1px;
+	font-family: "Segoe UI", Helvetica, "Droid Sans", Arial,sans-serif;
+	box-shadow: 0 0 1px rgba(0, 0, 0, .4); transition: .15s ease;
+}
+
+#spotlight {
+	display: flex;
+	align-items: center; justify-content: space-around;
+}
+#spotlight a {
+	padding: 5px 10px; margin: 5px 0;
+	color: #727272; font-size: 14px;
+	/*border-bottom: 2px solid rgba(93, 123, 141, .5);*/
+	transition: border .15s ease;
+	text-decoration: none;
+}
+#spotlight a:hover, header #spotlight a:focus {
+	color: #404040;
+}

sfiles/css/navbar.css

@@ -0,0 +1,196 @@
+nav a {
+	color: #ffffff;
+	opacity: .7;
+	cursor: pointer;
+}
+nav a:hover,
+nav a:focus {
+	opacity: 1;
+}
+
+
+/* Menu */
+
+#logo {
+	position: relative; display: block;
+	width: 100%;
+	margin-bottom: 10px;
+	opacity: 1;
+	background: -moz-linear-gradient(top, #bf1c11, #ba1203);
+	background: -webkit-linear-gradient(top, #bf1c11, #ba1203);
+	background: #bf1c11;
+	transition: .15s ease;
+}
+/* Flèche */
+/*nav #logo::after {
+	content: "";
+	position: absolute;
+	top: 100%; left: 50%;
+	height: 0; width: 0;
+	border: solid transparent;
+	border-top-color: #ba1203;
+	border-width: 12px; margin-left: -12px;
+}*/
+#logo img {
+	width: 100%;
+	margin: 0; padding: 0;
+	margin-bottom: -4.5px;
+	filter: drop-shadow(0 0 2px rgba(0, 0, 0, .0));
+	transition: filter .15s ease;
+}
+#logo:hover,
+#logo:focus {
+	background: #d72411;
+}
+
+#light-menu {
+	position: fixed; z-index: 10;
+	list-style: none;
+	width: 60px;
+	height: 100%; overflow-y: auto;
+	margin: 0; padding: 0;
+	text-indent: 0;
+	background: #22292c; box-shadow: 0 0 2px rgba(0, 0, 0, 0.3);
+}
+#light-menu li {
+	width: 100%; height: 45px;
+	text-align: center;
+	font-family: Raleway; font-size: 13px;
+	color: #ffffff;
+}
+#light-menu li > a {
+	display: flex; flex-direction: column; flex-grow: 1;
+	align-items: center; justify-content: center;
+	width: 100%; height: 100%;
+	-moz-transition: opacity .15s ease; /* because Chrome sucks */
+}
+
+#light-menu li > a > svg {
+	display: block; width: 35%; flex-shrink: 0;
+	margin: 0 auto 5px auto;
+}
+#light-menu li div {
+	display: none;
+}
+#light-menu li > a::after {
+	content: attr(label);
+	position: fixed; display: none;
+	padding: 4px 8px; margin-top: -28px; left: 63px;
+	font-family: NotoSans; border-radius: 3px;
+	background: rgba(0, 0, 0, 0.9);
+}
+#light-menu li > a:hover::after,
+#light-menu li > a:focus::after {
+	display: block;
+}
+
+/*nav li span[notifications]:not([notifications="0"])::before {
+	content: attr(notifications);
+	display: inline-block; margin-right: 6px;
+	vertical-align: middle;
+	padding: 0 5px 0 4px; border-radius: 5px;
+	font-family: NotoSans;
+	background: #ffffff; color: #000000;
+}*/
+
+
+/* Overlay */
+#menu {
+	position: fixed; left: 60px; z-index: 5;
+	width: 0; height: 100%; overflow-x: hidden; overflow-y: auto;
+	font-family: NotoSans; font-size: 14px;
+	background: #22292c; box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
+	transition: .2s ease;
+}
+/*@media all and (max-width: 1266px) {
+	#menu {
+		left: 30px;
+	}
+}*/
+
+#menu.opened {
+	width: 300px;
+}
+
+#menu > div {
+	width: 300px;
+	display: none;
+}
+#menu > div.opened {
+	display: block;
+}
+
+#menu h2 {
+	margin: 5% 0 20px 40px;
+	font-family: Raleway; font-size: 18px;
+	color: #ffffff;
+}
+#menu h2 > svg {
+	width: 42px; vertical-align: middle;
+}
+#menu h2 img {
+	width: 64px; border-radius: 50%; vertical-align: middle; margin-right: 10px;
+}
+
+#menu h3 {
+	margin: 20px 0 20px 40px;
+	font-family: Raleway; font-size: 14px;
+	color: #ffffff;
+}
+#menu hr {
+	margin: 15px;
+	border: none;
+	border-bottom: 1px solid rgba(0, 0, 0, .15);
+}
+
+#menu ul {
+	margin: 0; padding: 0; list-style: none;
+}
+#menu a,
+#menu li {
+	display: block; margin: 10px 15px;
+	transition: opacity .15s ease;
+}
+#menu li {
+	color: #b8b8b8;
+}
+#menu li > a {
+	display: inline;
+	margin: 0; font-style: normal;
+}
+#menu a > img {
+	vertical-align: middle;
+	margin-right: 15px;
+}
+#menu a > svg {
+	width: 20px; height: 20px; vertical-align: middle;
+	margin-right: 10px;
+}
+
+#menu form input {
+	display: block; width: 80%;
+	margin: 5px auto; padding: 5px 10px;
+	font-size: 14px;
+	background: #e8e8e8; transition: background .15s ease;
+}
+#menu form input:focus {
+	background: #ffffff;
+}
+#menu form input:first-child {
+	margin-bottom: 0; border-bottom: none;
+	border-top-left-radius: 5px;
+	-webkit-border-top-left-radius: 5px;
+	-moz-border-top-left-radius: 5px;
+	border-top-right-radius: 5px;
+	-webkit-border-top-right-radius: 5px;
+	-moz-border-top-right-radius: 5px;
+}
+#menu form input:nth-child(2) {
+	margin-top: 0; border-top: 1px solid #dddddd;
+	border-bottom-left-radius: 5px;
+	-webkit-border-bottom-left-radius: 5px;
+	-moz-border-bottom-left-radius: 5px;
+	border-bottom-right-radius: 5px;
+	-webkit-border-bottom-right-radius: 5px;
+	-moz-border-bottom-right-radius: 5px;
+}

sfiles/css/responsive.css

@@ -0,0 +1,42 @@
+/*
+	Responsives rules
+*/
+
+@media all and (max-width: 1399px) {
+	body {
+		font-size: 13px;
+	}
+
+	/*header form {
+		border-bottom: 1px solid #adb0b4;
+	}*/
+	header input[type="search"] {
+		font-size: 14px;
+	}
+
+	#menu li {
+	font-size: 10px;
+	}
+	#menu a {
+		font-size: 13px;
+	}
+}
+
+
+@media all and (min-width: 1400px) {
+	body {
+		font-size: 14px;
+	}
+
+	header input[type="search"] {
+		font-size: 14px;
+	}
+
+	#menu li {
+		font-size: 11px;
+	}
+	#menu a {
+		font-size: 14px;
+	}
+}
+

sfiles/global.css

@@ -0,0 +1,161 @@
+/*
+	fonts
+*/
+
+@font-face { font-family: NotoSans; src: url(../fonts/noto_sans.ttf); }
+@font-face { font-family: Raleway; font-weight: 200; src: url(../fonts/raleway_200.ttf); }
+@font-face { font-family: Raleway; font-weight: 300; src: url(../fonts/raleway_300.ttf); }
+
+
+
+/*
+	body
+*/
+
+body {
+	margin: 0;
+	background: #ffffff;
+	font-family: sans-serif;
+}
+
+
+/*
+	header
+*/
+
+header {
+	height: 50px; margin: 0; padding: 0 30px;
+	display: flex; align-items: center; justify-content: space-between;
+	background: #f8f8fa; border-bottom: 1px solid #d0d0d0;
+}
+
+
+header svg {
+	width: 24px; height: 24px; vertical-align: middle;
+	transition: .15s ease;
+}
+header a:hover > svg,  header a:focus > svg {
+	filter: brightness(.5);
+}
+
+header input[type="search"] {
+	width: 250px;
+	padding: 5px 35px 5px 10px;
+	border: 0; border-radius: 1px;
+	font-family: "Segoe UI", Helvetica, "Droid Sans", Arial,sans-serif;
+	box-shadow: 0 0 1px rgba(0, 0, 0, .4); transition: .15s ease;
+}
+header input[type="search"] ~ a {
+	position: relative; left: -33px;
+}
+header input[type="search"]:focus {
+	box-shadow: 0 0 4px rgba(0, 102, 255, .9);
+}
+header input[type="search"] ~ a > svg > path {
+	fill: #cccccc; transition: .15s ease;
+}
+header input[type="search"]:focus ~ a > svg > path {
+	fill: #333333;
+}
+
+#spotlight a {
+	padding: 8px 18px 6px 18px;
+	color: #727272; font-size: 15px;
+	border-bottom: 2px solid rgba(93, 123, 141, 0);
+	transition: border .15s ease;
+}
+#spotlight a:hover, header #spotlight a:focus {
+	border-bottom: 2px solid rgba(93, 123, 141, 1);
+}
+
+
+/*
+	links
+*/
+
+a {
+	text-decoration: none;
+}
+a:focus {
+	outline: none;
+}
+
+
+
+/*
+	alert overlay
+*/
+
+.alert {
+	position: fixed; left: 15%;
+	display: flex; align-items: center;
+	width: 70%; z-index: 10;
+	font-family: NotoSans; font-size: 14px; color: #212121;
+	background: #ffffff;
+	border-bottom: 5px solid #4caf50;
+	border-radius: 1px; box-shadow: 0 1px 12px rgba(0, 0, 0, 0.3);
+	transition: opacity .15s ease;
+}
+.alert.ok {
+	border-color: #4caf50;
+}
+.alert.error {
+	border-color: #f44336;
+}
+.alert span {
+	flex-grow: 1; margin: 15px 10px 10px 0;
+}
+.alert input[type="button"] {
+	margin: 3px 30px 0 0;
+}
+
+.alert svg {
+	margin: 15px 20px 10px 30px;
+}
+
+
+
+/*
+	buttons
+*/
+
+input[type="button"] {
+	font-family: NotoSans; font-size: 14px; /*font-weight: bold;*/
+	text-align: center;
+	padding: 5px 15px;
+	transition: .1s ease;
+}
+
+/* flat */
+input[type="button"].flat {
+	border: none;
+	background: rgba(0, 0, 0, 0); color: #727272;
+}
+input[type="button"].flat:hover {
+	background: rgba(0, 0, 0, .1);
+}
+input[type="button"].flat:focus {
+	background: rgba(0, 0, 0, .2);
+}
+
+/* raised */
+input[type="button"].raised {
+	border: none;
+	background: #e0e0e0; color: #212121;
+	box-shadow: 0 1px 2px rgba(0, 0, 0, .3);
+}
+input[type="button"].raised:hover,
+input[type="button"].raised:focus {
+	background: #d5d5d5;
+}
+input[type="button"].raised:active {
+	background: #d6d6d6;
+	box-shadow: 0 1px 8px rgba(0, 0, 0, .3);
+}
+
+/* Input text */
+input[type="text"]:focus,
+input[type="search"]:focus,
+input[type="password"]:focus {
+	
+}

sfiles/images/account-circle.svg

@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="24" height="24" viewBox="0 0 24 24"><path d="M12,19.2C9.5,19.2 7.29,17.92 6,16C6.03,14 10,12.9 12,12.9C14,12.9 17.97,14 18,16C16.71,17.92 14.5,19.2 12,19.2M12,5A3,3 0 0,1 15,8A3,3 0 0,1 12,11A3,3 0 0,1 9,8A3,3 0 0,1 12,5M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12C22,6.47 17.5,2 12,2Z" /></svg>

sfiles/images/email.svg

@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="24" height="24" viewBox="0 0 24 24"><path d="M20,8L12,13L4,8V6L12,11L20,6M20,4H4C2.89,4 2,4.89 2,6V18A2,2 0 0,0 4,20H20A2,2 0 0,0 22,18V6C22,4.89 21.1,4 20,4Z" /></svg>

sfiles/images/inbox.svg

@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="24" height="24" viewBox="0 0 24 24"><path d="M16,10H14V7H10V10H8L12,14M19,15H15A3,3 0 0,1 12,18A3,3 0 0,1 9,15H5V5H19M19,3H5C3.89,3 3,3.9 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5A2,2 0 0,0 19,3Z" /></svg>

sfiles/images/message-text.svg

@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="24" height="24" viewBox="0 0 24 24"><path d="M20,2H4A2,2 0 0,0 2,4V22L6,18H20A2,2 0 0,0 22,16V4A2,2 0 0,0 20,2M6,9H18V11H6M14,14H6V12H14M18,8H6V6H18" /></svg>

sfiles/light.css

@@ -0,0 +1,256 @@
+/*
+	fonts
+*/
+
+@font-face { font-family: NotoSans; src: url(../fonts/noto_sans.ttf); }
+@font-face { font-family: Raleway; font-weight: 200; src: url(../fonts/raleway_200.ttf); }
+@font-face { font-family: Raleway; font-weight: 300; src: url(../fonts/raleway_300.ttf); }
+
+
+/* Global */
+
+body {
+	margin: 0;
+	background: #ffffff;
+	font-family: sans-serif;
+}
+
+nav a {
+	color: #ffffff; opacity: .7;
+	text-decoration: none;
+	transition: opacity .15s ease;
+}
+nav a:hover,
+nav a:focus {
+	opacity: 1;
+}
+
+.light-hidden {
+	display: none;
+}
+
+/* Menu */
+
+#light-menu {
+	list-style: none;
+	display: flex; flex-direction: row; align-items: center;
+	width: 100%; height: 40px;
+	overflow-x: auto; overflow-y: hidden;
+	margin: 0; padding: 0;
+	text-indent: 0;
+	background: #22292c; box-shadow: 0 0 2px rgba(0, 0, 0, 0.3);
+}
+
+#logo {
+	position: relative; display: block;
+	height: 100%; opacity: 1;
+	background: -moz-linear-gradient(left, #bf1c11, #ba1203);
+	background: -webkit-linear-gradient(left, #bf1c11, #ba1203);
+}
+/*#logo::after {
+	position: absolute; left: 100%; top: 50%;
+	height: 0; width: 0;
+	border: solid transparent; content: " ";
+	border-left-color: #ba1203;
+	border-width: 4px;
+	margin-top: -4px;
+}*/
+#logo img {
+	width: 40px;
+	margin: 0; padding: 0;
+	margin-bottom: -4.5px;
+	filter: drop-shadow(0 0 2px rgba(0, 0, 0, .0));
+	transition: filter .15s ease;
+}
+#logo:hover img,
+#logo:focus img {
+	filter: drop-shadow(0 0 2px rgba(0, 0, 0, .7));
+}
+
+#light-menu > li {
+	display: flex; flex-direction: column;
+	align-items: center; flex-grow: 1;
+	height: 100%;
+	text-align: center;
+	font-family: Raleway; font-size: 13px;
+	color: #ffffff;
+}
+#light-menu li {
+	padding: 0 2px;
+}
+#light-menu li > a {
+	display: flex; flex-direction: column;
+	align-items: center; justify-content: center;
+	width: 100%; height: 100%;
+}
+#light-menu li > a > div {
+	display: none;
+	font-size: 12px;
+}
+
+#light-menu li > a > svg {
+	display: block; width: 20px; flex-shrink: 0;
+	margin: 0 auto 5px auto;
+}
+
+#light-menu li span[notifications]:not([notifications="0"])::before {
+	content: attr(notifications);
+	display: inline-block; margin-right: 6px;
+	vertical-align: middle;
+	padding: 0 5px 0 4px; border-radius: 5px;
+	font-family: NotoSans;
+	background: #ffffff; color: #000000;
+}
+
+
+#menu {
+	width: 100%; height: 0; overflow-x: hidden;
+	font-family: NotoSans; font-size: 12px;
+	background: #22292c; box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
+	transition: .1s ease;
+}
+#menu.opened {
+	height: 100%;
+	overflow-y: auto;
+}
+
+#menu > div {
+	width: 100%;
+	display: none;
+}
+#menu > div.opened {
+	display: block;
+}
+#menu h2 {
+	margin: 10px 0 10px 40px;
+	font-family: Raleway; font-size: 15px;
+	color: #ffffff;
+}
+#menu h2 > svg {
+	width: 30px; vertical-align: middle;
+}
+#menu h2 > img {
+	width: 64px; margin-right: 10px;
+	vertical-align: middle; border-radius: 50%;
+}
+
+#menu h3 {
+	margin: 10px 0 10px 40px;
+	font-family: Raleway; font-size: 13px;
+	color: #ffffff;
+}
+#menu hr {
+	margin: 10px 15px 0 15px;
+	border: none;
+	border-bottom: 1px solid rgba(0, 0, 0, .15);
+}
+
+#menu > div > a,
+#menu span {
+	display: block; margin: 10px 15px;
+}
+#menu span {
+	/*font-style: italic;*/ color: #b8b8b8;
+	font-size: 10px;
+}
+#menu span > a {
+	display: inline;
+	margin: 0; font-style: normal;
+	font-size: 12px;
+}
+#menu a > img {
+	vertical-align: middle;
+	margin-right: 15px;
+}
+#menu a > svg {
+	width: 20px; height: 20px; vertical-align: middle;
+	margin-right: 10px;
+}
+#menu ul {
+	list-style: none;
+	margin: 10px 15px; padding: 0;
+	color: #b8b8b8;
+}
+#menu li {
+	margin: 5px 0;
+}
+
+@media all and (min-width: 550px) {
+	#light-menu {
+		height: 60px;
+	}
+	#logo img {
+		width: 60px;
+	}
+	#light-menu li > a > div {
+		display: block;
+	}
+}
+
+#menu form input {
+	display: block;
+	margin: 5px 15px; padding: 5px 10px;
+	font-size: 14px;
+	background: #e8e8e8; transition: background .15s ease;
+}
+#menu form input:focus {
+	background: #ffffff;
+}
+#menu form input:first-child {
+	margin-bottom: 0; border-bottom: none;
+	border-top-left-radius: 5px;
+	-webkit-border-top-left-radius: 5px;
+	-moz-border-top-left-radius: 5px;
+	border-top-right-radius: 5px;
+	-webkit-border-top-right-radius: 5px;
+	-moz-border-top-right-radius: 5px;
+}
+#menu form input:nth-child(2) {
+	margin-top: 0; border-top: 1px solid #dddddd;
+	border-bottom-left-radius: 5px;
+	-webkit-border-bottom-left-radius: 5px;
+	-moz-border-bottom-left-radius: 5px;
+	border-bottom-right-radius: 5px;
+	-webkit-border-bottom-right-radius: 5px;
+	-moz-border-bottom-right-radius: 5px;
+}
+#menu form a {
+	display: block; margin-left: 15px;
+}
+
+
+/* Header */
+
+header {
+	padding: 10px 10px 0px 10px;
+	background: #f8f8fa; border-bottom: 1px solid #d0d0d0;
+}
+header svg {
+	width: 24px; height: 24px; vertical-align: middle;
+	transition: .15s ease;
+}
+header a:hover > svg,  header a:focus > svg {
+	filter: brightness(.5);
+}
+
+header input[type="search"] {
+	width: 100%;
+	border: 0; border-radius: 1px;
+	font-family: "Segoe UI", Helvetica, "Droid Sans", Arial,sans-serif;
+	box-shadow: 0 0 1px rgba(0, 0, 0, .4); transition: .15s ease;
+}
+
+#spotlight {
+	display: flex;
+	align-items: center; justify-content: space-around;
+}
+#spotlight a {
+	padding: 5px 10px; margin: 5px 0;
+	color: #727272; font-size: 14px;
+	/*border-bottom: 2px solid rgba(93, 123, 141, .5);*/
+	transition: border .15s ease;
+	text-decoration: none;
+}
+#spotlight a:hover, header #spotlight a:focus {
+	color: #404040;
+}

sfiles/navbar.css

@@ -0,0 +1,196 @@
+nav a {
+	color: #ffffff;
+	opacity: .7;
+	cursor: pointer;
+}
+nav a:hover,
+nav a:focus {
+	opacity: 1;
+}
+
+
+/* Menu */
+
+#logo {
+	position: relative; display: block;
+	width: 100%;
+	margin-bottom: 10px;
+	opacity: 1;
+	background: -moz-linear-gradient(top, #bf1c11, #ba1203);
+	background: -webkit-linear-gradient(top, #bf1c11, #ba1203);
+	background: #bf1c11;
+	transition: .15s ease;
+}
+/* Flèche */
+/*nav #logo::after {
+	content: "";
+	position: absolute;
+	top: 100%; left: 50%;
+	height: 0; width: 0;
+	border: solid transparent;
+	border-top-color: #ba1203;
+	border-width: 12px; margin-left: -12px;
+}*/
+#logo img {
+	width: 100%;
+	margin: 0; padding: 0;
+	margin-bottom: -4.5px;
+	filter: drop-shadow(0 0 2px rgba(0, 0, 0, .0));
+	transition: filter .15s ease;
+}
+#logo:hover,
+#logo:focus {
+	background: #d72411;
+}
+
+#light-menu {
+	position: fixed; z-index: 10;
+	list-style: none;
+	width: 60px;
+	height: 100%; overflow-y: auto;
+	margin: 0; padding: 0;
+	text-indent: 0;
+	background: #22292c; box-shadow: 0 0 2px rgba(0, 0, 0, 0.3);
+}
+#light-menu li {
+	width: 100%; height: 45px;
+	text-align: center;
+	font-family: Raleway; font-size: 13px;
+	color: #ffffff;
+}
+#light-menu li > a {
+	display: flex; flex-direction: column; flex-grow: 1;
+	align-items: center; justify-content: center;
+	width: 100%; height: 100%;
+	-moz-transition: opacity .15s ease; /* because Chrome sucks */
+}
+
+#light-menu li > a > svg {
+	display: block; width: 35%; flex-shrink: 0;
+	margin: 0 auto 5px auto;
+}
+#light-menu li div {
+	display: none;
+}
+#light-menu li > a::after {
+	content: attr(label);
+	position: fixed; display: none;
+	padding: 4px 8px; margin-top: -28px; left: 63px;
+	font-family: NotoSans; border-radius: 3px;
+	background: rgba(0, 0, 0, 0.9);
+}
+#light-menu li > a:hover::after,
+#light-menu li > a:focus::after {
+	display: block;
+}
+
+/*nav li span[notifications]:not([notifications="0"])::before {
+	content: attr(notifications);
+	display: inline-block; margin-right: 6px;
+	vertical-align: middle;
+	padding: 0 5px 0 4px; border-radius: 5px;
+	font-family: NotoSans;
+	background: #ffffff; color: #000000;
+}*/
+
+
+/* Overlay */
+#menu {
+	position: fixed; left: 60px; z-index: 5;
+	width: 0; height: 100%; overflow-x: hidden; overflow-y: auto;
+	font-family: NotoSans; font-size: 14px;
+	background: #22292c; box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
+	transition: .2s ease;
+}
+/*@media all and (max-width: 1266px) {
+	#menu {
+		left: 30px;
+	}
+}*/
+
+#menu.opened {
+	width: 300px;
+}
+
+#menu > div {
+	width: 300px;
+	display: none;
+}
+#menu > div.opened {
+	display: block;
+}
+
+#menu h2 {
+	margin: 5% 0 20px 40px;
+	font-family: Raleway; font-size: 18px;
+	color: #ffffff;
+}
+#menu h2 > svg {
+	width: 42px; vertical-align: middle;
+}
+#menu h2 img {
+	width: 64px; border-radius: 50%; vertical-align: middle; margin-right: 10px;
+}
+
+#menu h3 {
+	margin: 20px 0 20px 40px;
+	font-family: Raleway; font-size: 14px;
+	color: #ffffff;
+}
+#menu hr {
+	margin: 15px;
+	border: none;
+	border-bottom: 1px solid rgba(0, 0, 0, .15);
+}
+
+#menu ul {
+	margin: 0; padding: 0; list-style: none;
+}
+#menu a,
+#menu li {
+	display: block; margin: 10px 15px;
+	transition: opacity .15s ease;
+}
+#menu li {
+	color: #b8b8b8;
+}
+#menu li > a {
+	display: inline;
+	margin: 0; font-style: normal;
+}
+#menu a > img {
+	vertical-align: middle;
+	margin-right: 15px;
+}
+#menu a > svg {
+	width: 20px; height: 20px; vertical-align: middle;
+	margin-right: 10px;
+}
+
+#menu form input {
+	display: block; width: 80%;
+	margin: 5px auto; padding: 5px 10px;
+	font-size: 14px;
+	background: #e8e8e8; transition: background .15s ease;
+}
+#menu form input:focus {
+	background: #ffffff;
+}
+#menu form input:first-child {
+	margin-bottom: 0; border-bottom: none;
+	border-top-left-radius: 5px;
+	-webkit-border-top-left-radius: 5px;
+	-moz-border-top-left-radius: 5px;
+	border-top-right-radius: 5px;
+	-webkit-border-top-right-radius: 5px;
+	-moz-border-top-right-radius: 5px;
+}
+#menu form input:nth-child(2) {
+	margin-top: 0; border-top: 1px solid #dddddd;
+	border-bottom-left-radius: 5px;
+	-webkit-border-bottom-left-radius: 5px;
+	-moz-border-bottom-left-radius: 5px;
+	border-bottom-right-radius: 5px;
+	-webkit-border-bottom-right-radius: 5px;
+	-moz-border-bottom-right-radius: 5px;
+}

sfiles/responsive.css

@@ -0,0 +1,42 @@
+/*
+	Responsives rules
+*/
+
+@media all and (max-width: 1399px) {
+	body {
+		font-size: 13px;
+	}
+
+	/*header form {
+		border-bottom: 1px solid #adb0b4;
+	}*/
+	header input[type="search"] {
+		font-size: 14px;
+	}
+
+	#menu li {
+	font-size: 10px;
+	}
+	#menu a {
+		font-size: 13px;
+	}
+}
+
+
+@media all and (min-width: 1400px) {
+	body {
+		font-size: 14px;
+	}
+
+	header input[type="search"] {
+		font-size: 14px;
+	}
+
+	#menu li {
+		font-size: 11px;
+	}
+	#menu a {
+		font-size: 14px;
+	}
+}
+

sfiles/scripts/smartphone_patch.js

@@ -0,0 +1,11 @@
+/* Smartphone patch for menu                         */
+/* It don't work if links haven't any href attribute */
+
+var w = Math.max(document.documentElement.clientWidth, window.innerWidth || 0)
+
+if(w < 700) {
+	var buttons = document.getElementById('light-menu').getElementsByTagName('li');
+	for(var i = 0; i < buttons.length; i++) {
+		buttons[i].getElementsByTagName('a')[0].setAttribute('href', '#');
+	}
+}

sfiles/scripts/trigger_menu.js

@@ -0,0 +1,72 @@
+/* Trigger actions for the menu */
+
+/* Initialization */
+var b = document.getElementById('light-menu').getElementsByTagName('a')
+for(var i = 1; i < b.length; i++) {
+	b[i].setAttribute('onfocus', "this.setAttribute('f', 'true');");
+	b[i].setAttribute('onblur', "this.setAttribute('f', 'false');");
+}
+
+var trigger_menu = function(active) {
+	var display = function(element) {
+		element.classList.add('opened');
+	}
+	var hide = function(element) {
+		element.classList.remove('opened');
+	}
+
+	var menu = document.getElementById('menu');
+	var buttons = document.getElementById('light-menu').getElementsByTagName('li');
+	var menus = document.getElementById('menu').getElementsByTagName('div');
+
+	if(active == -1 || buttons[active].classList.contains('opened')) {
+		hide(menu);
+		for(i = 0; i < buttons.length; i++) {
+			hide(buttons[i]);
+		}
+	}
+	else {
+		for(i = 0; i < buttons.length; i++) {
+			if(i != active) {
+				hide(buttons[i]);
+				hide(menus[i]);
+			}
+		}
+		display(buttons[active]);
+		display(menus[active]);
+		display(menu);
+	}
+}
+
+var mouse_trigger = function(event) {
+	var menu = document.getElementById('menu');
+	var buttons = document.getElementById('light-menu').getElementsByTagName('li');
+
+	if(!menu.contains(event.target)) {
+		var active = -1;
+
+		for(i = 0; i < buttons.length; i++) {
+			if(buttons[i].contains(event.target))
+				active = i;
+			buttons[i].getElementsByTagName('a')[0].blur();
+		}
+
+		trigger_menu(active);
+	}
+}
+
+var keyboard_trigger = function(event) {
+	var menu = document.getElementById('menu');
+	var buttons = document.getElementById('light-menu').getElementsByTagName('li');
+
+	if(event.keyCode == 13) {
+		for(var i = 0; i < buttons.length; i++) {
+			if(buttons[i].getElementsByTagName('a')[0].getAttribute('f') == 'true') {
+				trigger_menu(i);
+			}
+		}
+	}
+}
+
+document.onclick = mouse_trigger;
+document.onkeypress = keyboard_trigger;

templates/account/login.html

@@ -0,0 +1,24 @@
+{% extends "base.html" %}
+
+{% block title %}Planète Casio — Connexion{% endblock %}
+
+{% block content %}
+<article>
+    <h1>Formulaire de connexion</h1>
+    <div>
+        {% if error %}
+        <p><strong>Utilisateur inexistant ou mauvais de mot de passe.</strong></p>
+        {% endif %}
+
+        {% if user.is_authenticated %}
+        Vous êtes connecté, {{ user.username }} !
+        {% else %}
+        <form method="post" action=".">
+               {% csrf_token %}
+               {{ form.as_p }}
+            <input type="submit"/>
+        </form>
+        {% endif %}
+    </div>
+</article>
+{% endblock %}

templates/base.html

@@ -0,0 +1,388 @@
+{% load static %}
+
+<!DOCTYPE html>
+<html lang="fr-FR">
+<head>
+	<title>{% block title %}Planète Casio : design template{% endblock %}</title>
+
+	<meta charset="utf-8" />
+	<meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+	<link rel="stylesheet" media="all and (min-width: 700px)" type="text/css" href="{% static 'css/global.css' %}">
+	<link rel="stylesheet" media="all and (min-width: 700px)" type="text/css" href="{% static 'css/navbar.css' %}">
+	<link rel="stylesheet" media="all and (min-width: 700px)" type="text/css" href="{% static 'css/container.css' %}">
+	<link rel="stylesheet" media="all and (min-width: 700px)" type="text/css" href="{% static 'css/responsive.css' %}">
+
+	<link rel="stylesheet" media="all and (max-width: 699px)" type="text/css" href="{% static 'css/light.css' %}">
+</head>
+<body>
+	<nav>
+		<ul id="light-menu">
+			<a id="logo" href="{% url 'home.views.homepage' %}">
+				<img src="{% static 'images/logo_noshadow.png' %}" alt="logo"/>
+			</a>
+
+			<li>
+				<a role="button" label="Compte" tabindex="0">
+					<svg viewBox="0 0 24 24">
+						<path fill="#ffffff" d="M12,19.2C9.5,19.2 7.29,17.92 6,16C6.03,14 10,12.9 12,12.9C14,12.9 17.97,14 18,16C16.71,17.92 14.5,19.2 12,19.2M12,5A3,3 0 0,1 15,8A3,3 0 0,1 12,11A3,3 0 0,1 9,8A3,3 0 0,1 12,5M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12C22,6.47 17.5,2 12,2Z"></path>
+					</svg>
+					<div>Compte</div>
+				</a>
+			</li>
+
+			<li>
+				<a role="button" label="Actualités" tabindex="0">
+					<svg viewBox="0 0 24 24">
+						<path fill="#ffffff" d="M20,11H4V8H20M20,15H13V13H20M20,19H13V17H20M11,19H4V13H11M20.33,4.67L18.67,3L17,4.67L15.33,3L13.67,4.67L12,3L10.33,4.67L8.67,3L7,4.67L5.33,3L3.67,4.67L2,3V19A2,2 0 0,0 4,21H20A2,2 0 0,0 22,19V3L20.33,4.67Z"></path>
+					</svg>
+					<div>Actualités</div>
+				</a>
+			</li>
+
+			<li>
+				<a role="button" label="Forum" tabindex="0">
+					<svg viewBox="0 0 24 24">
+						<path fill="#ffffff" d="M17,12V3A1,1 0 0,0 16,2H3A1,1 0 0,0 2,3V17L6,13H16A1,1 0 0,0 17,12M21,6H19V15H6V17A1,1 0 0,0 7,18H18L22,22V7A1,1 0 0,0 21,6Z"></path>
+					</svg>
+					<div>Forum</div>
+				</a>
+			</li>
+
+			<li>
+				<a role="button" label="Programmes" tabindex="0">
+					<svg viewBox="0 0 24 24">
+						<path fill="#ffffff" d="M8,3A2,2 0 0,0 6,5V9A2,2 0 0,1 4,11H3V13H4A2,2 0 0,1 6,15V19A2,2 0 0,0 8,21H10V19H8V14A2,2 0 0,0 6,12A2,2 0 0,0 8,10V5H10V3M16,3A2,2 0 0,1 18,5V9A2,2 0 0,0 20,11H21V13H20A2,2 0 0,0 18,15V19A2,2 0 0,1 16,21H14V19H16V14A2,2 0 0,1 18,12A2,2 0 0,1 16,10V5H14V3H16Z"></path>
+					</svg>
+					<div>Programmes</div>
+				</a>
+			</li>
+
+			<li>
+				<a role="button" label="Tutoriels" tabindex="0">
+					<svg viewBox="0 0 24 24">
+						<path fill="#ffffff" d="M12,3L1,9L12,15L21,10.09V17H23V9M5,13.18V17.18L12,21L19,17.18V13.18L12,17L5,13.18Z"></path>
+					</svg>
+					<div>Tutoriels</div>
+				</a>
+			</li>
+
+			<li>
+				<a role="button" label="Sprites" tabindex="0">
+					<svg viewBox="0 0 24 24">
+						<path fill="#ffffff" d="M20.71,4.63L19.37,3.29C19,2.9 18.35,2.9 17.96,3.29L9,12.25L11.75,15L20.71,6.04C21.1,5.65 21.1,5 20.71,4.63M7,14A3,3 0 0,0 4,17C4,18.31 2.84,19 2,19C2.92,20.22 4.5,21 6,21A4,4 0 0,0 10,17A3,3 0 0,0 7,14Z"></path>
+					</svg>
+					<div>Sprites</div>
+				</a>
+			</li>
+
+			<li>
+				<a href="#" label="Outils">
+					<svg viewBox="0 0 24 24">
+						<path fill="#ffffff" d="M22.7,19L13.6,9.9C14.5,7.6 14,4.9 12.1,3C10.1,1 7.1,0.6 4.7,1.7L9,6L6,9L1.6,4.7C0.4,7.1 0.9,10.1 2.9,12.1C4.8,14 7.5,14.5 9.8,13.6L18.9,22.7C19.3,23.1 19.9,23.1 20.3,22.7L22.6,20.4C23.1,20 23.1,19.3 22.7,19Z"></path>
+					</svg>
+					<div>Outils</div>
+				</a>
+			</li>
+		</ul>
+
+		<div id="menu">
+			{% if user.is_authenticated %}
+			<div>
+				<h2>
+					<img src="{% static 'images/3864.png' %}">
+					{{ user.username }}
+				</h2>
+				<a href="#">
+					<svg viewBox="0 0 24 24">
+						<path fill="#ffffff" d="M20,2A2,2 0 0,1 22,4V16A2,2 0 0,1 20,18H6L2,22V4C2,2.89 2.9,2 4,2H20M4,4V17.17L5.17,16H20V4H4M6,7H18V9H6V7M6,11H15V13H6V11Z"></path>
+					</svg>
+					Notifications
+				</a>
+				<a href="#">
+					<svg viewBox="0 0 24 24">
+						<path fill="#ffffff" d="M2,2V11C2,12 3,13 4,13H6.2C6.6,15 7.9,16.7 11,17V19.1C8.8,19.3 8,20.4 8,21.7V22H16V21.7C16,20.4 15.2,19.3 13,19.1V17C16.1,16.7 17.4,15 17.8,13H20C21,13 22,12 22,11V2H18C17.1,2 16,3 16,4H8C8,3 6.9,2 6,2H2M4,4H6V6L6,11H4V4M18,4H20V11H18V6L18,4M8,6H16V11.5C16,13.43 15.42,15 12,15C8.59,15 8,13.43 8,11.5V6Z"></path>
+					</svg>
+					Trophées
+				</a>
+				<a href="#">
+					<svg viewBox="0 0 24 24">
+						<path fill="#ffffff" d="M12,15.39L8.24,17.66L9.23,13.38L5.91,10.5L10.29,10.13L12,6.09L13.71,10.13L18.09,10.5L14.77,13.38L15.76,17.66M22,9.24L14.81,8.63L12,2L9.19,8.63L2,9.24L7.45,13.97L5.82,21L12,17.27L18.18,21L16.54,13.97L22,9.24Z"></path>
+					</svg>
+					Topics favoris
+				</a>
+				<a href="#">
+					<svg viewBox="0 0 24 24">
+						<path fill="#ffffff" d="M3,1H19A1,1 0 0,1 20,2V6A1,1 0 0,1 19,7H3A1,1 0 0,1 2,6V2A1,1 0 0,1 3,1M3,9H19A1,1 0 0,1 20,10V10.67L17.5,9.56L11,12.44V15H3A1,1 0 0,1 2,14V10A1,1 0 0,1 3,9M3,17H11C11.06,19.25 12,21.4 13.46,23H3A1,1 0 0,1 2,22V18A1,1 0 0,1 3,17M8,5H9V3H8V5M8,13H9V11H8V13M8,21H9V19H8V21M4,3V5H6V3H4M4,11V13H6V11H4M4,19V21H6V19H4M17.5,12L22,14V17C22,19.78 20.08,22.37 17.5,23C14.92,22.37 13,19.78 13,17V14L17.5,12M17.5,13.94L15,15.06V17.72C15,19.26 16.07,20.7 17.5,21.06V13.94Z"></path>
+					</svg>
+					Panel d'administration
+				</a>
+
+				<hr />
+
+				<a href="account.html">
+					<svg viewBox="0 0 24 24">
+						<path fill="#ffffff" d="M12,15.5A3.5,3.5 0 0,1 8.5,12A3.5,3.5 0 0,1 12,8.5A3.5,3.5 0 0,1 15.5,12A3.5,3.5 0 0,1 12,15.5M19.43,12.97C19.47,12.65 19.5,12.33 19.5,12C19.5,11.67 19.47,11.34 19.43,11L21.54,9.37C21.73,9.22 21.78,8.95 21.66,8.73L19.66,5.27C19.54,5.05 19.27,4.96 19.05,5.05L16.56,6.05C16.04,5.66 15.5,5.32 14.87,5.07L14.5,2.42C14.46,2.18 14.25,2 14,2H10C9.75,2 9.54,2.18 9.5,2.42L9.13,5.07C8.5,5.32 7.96,5.66 7.44,6.05L4.95,5.05C4.73,4.96 4.46,5.05 4.34,5.27L2.34,8.73C2.21,8.95 2.27,9.22 2.46,9.37L4.57,11C4.53,11.34 4.5,11.67 4.5,12C4.5,12.33 4.53,12.65 4.57,12.97L2.46,14.63C2.27,14.78 2.21,15.05 2.34,15.27L4.34,18.73C4.46,18.95 4.73,19.03 4.95,18.95L7.44,17.94C7.96,18.34 8.5,18.68 9.13,18.93L9.5,21.58C9.54,21.82 9.75,22 10,22H14C14.25,22 14.46,21.82 14.5,21.58L14.87,18.93C15.5,18.67 16.04,18.34 16.56,17.94L19.05,18.95C19.27,19.03 19.54,18.95 19.66,18.73L21.66,15.27C21.78,15.05 21.73,14.78 21.54,14.63L19.43,12.97Z"></path>
+					</svg>
+					Paramètres
+				</a>
+				<a href="{% url 'account.views.logout' %}">
+					<svg viewBox="0 0 24 24">
+						<path fill="#ffffff" d="M17,17.25V14H10V10H17V6.75L22.25,12L17,17.25M13,2A2,2 0 0,1 15,4V8H13V4H4V20H13V16H15V20A2,2 0 0,1 13,22H4A2,2 0 0,1 2,20V4A2,2 0 0,1 4,2H13Z"></path>
+					</svg>
+					Déconnexion
+				</a>
+			</div>
+			{% else %}
+			<div>
+				<h2>
+					Invité
+				</h2>
+				<a href="{% url 'account.views.login' %}">Connexion</a>
+				<a href="{% url 'account.views.login' %}">Inscription</a>
+			</div>
+			{% endif %}
+
+			<div>
+				<h2>
+					<svg viewBox="0 0 24 24">
+						<path fill="#ffffff" d="M20,11H4V8H20M20,15H13V13H20M20,19H13V17H20M11,19H4V13H11M20.33,4.67L18.67,3L17,4.67L15.33,3L13.67,4.67L12,3L10.33,4.67L8.67,3L7,4.67L5.33,3L3.67,4.67L2,3V19A2,2 0 0,0 4,21H20A2,2 0 0,0 22,19V3L20.33,4.67Z"></path>
+					</svg>
+					Actualités
+				</h2>
+				<a href="#">Casio</a>
+				<a href="#">Arduino</a>
+				<a href="#">Projets communautaires</a>
+				<a href="#">Divers</a>
+
+				<hr />
+
+				<h3>Derniers articles</h3>
+				<ul>
+					<li><a href="#">Un nouvel OS pour les Graph 75</a></li>
+					<li><a href="#">Les 7 Days CPC arrivent bientôt</a></li>
+					<li><a href="#">Résultats de jeu du mois de Février 2017</a></li>
+					<li><a href="#">Test du shield relai Sainsmart pour Arduino</a></li>
+					<li><a href="#">Un nouveau tutoriel sur le C-engine</a></li>
+				</ul>
+			</div>
+
+			<div>
+				<h2>
+					<svg viewBox="0 0 24 24">
+						<path fill="#ffffff" d="M17,12V3A1,1 0 0,0 16,2H3A1,1 0 0,0 2,3V17L6,13H16A1,1 0 0,0 17,12M21,6H19V15H6V17A1,1 0 0,0 7,18H18L22,22V7A1,1 0 0,0 21,6Z"></path>
+					</svg>
+					Forum
+				</h2>
+				<a href="#">Vie communautaire</a>
+				<a href="#">Projets de programmation</a>
+				<a href="#">Questions et problèmes</a>
+				<a href="#">Discussions</a>
+				<a href="#">Administration</a>
+				<a href="#">CreativeCalc</a>
+
+				<hr />
+
+				<h3>Derniers commentaires</h3>
+				<ul>
+					<li><a href="#">Legolas</a> sur <a href="#">Bugs de la v5</a></li>
+					<li><a href="#">Dark Storm</a> sur <a href="#">fxSDK support</a></li>
+					<li><a href="#">Gollum</a> sur <a href="#">Le nom de topic qui fout le bordel car il est trop long…</a></li>
+					<li><a href="#">Lephenixnoir</a> sur <a href="#">fxSDK support</a></li>
+					<li><a href="#">Kristaba</a> sur <a href="#">FiXos, le retour</a></li>
+				</ul>
+			</div>
+
+			<div>
+				<h2>
+					<svg viewBox="0 0 24 24">
+						<path fill="#ffffff" d="M8,3A2,2 0 0,0 6,5V9A2,2 0 0,1 4,11H3V13H4A2,2 0 0,1 6,15V19A2,2 0 0,0 8,21H10V19H8V14A2,2 0 0,0 6,12A2,2 0 0,0 8,10V5H10V3M16,3A2,2 0 0,1 18,5V9A2,2 0 0,0 20,11H21V13H20A2,2 0 0,0 18,15V19A2,2 0 0,1 16,21H14V19H16V14A2,2 0 0,1 18,12A2,2 0 0,1 16,10V5H14V3H16Z"></path>
+					</svg>
+					Programmes
+				</h2>
+				<a href="#">
+					<svg viewBox="0 0 24 24">
+						<path fill="#ffffff" d="M7,6H17A6,6 0 0,1 23,12A6,6 0 0,1 17,18C15.22,18 13.63,17.23 12.53,16H11.47C10.37,17.23 8.78,18 7,18A6,6 0 0,1 1,12A6,6 0 0,1 7,6M6,9V11H4V13H6V15H8V13H10V11H8V9H6M15.5,12A1.5,1.5 0 0,0 14,13.5A1.5,1.5 0 0,0 15.5,15A1.5,1.5 0 0,0 17,13.5A1.5,1.5 0 0,0 15.5,12M18.5,9A1.5,1.5 0 0,0 17,10.5A1.5,1.5 0 0,0 18.5,12A1.5,1.5 0 0,0 20,10.5A1.5,1.5 0 0,0 18.5,9Z"></path>
+					</svg>
+					Jeux
+				</a>
+				<a href="#">
+					<svg viewBox="0 0 24 24">
+						<path fill="#ffffff" d="M19,19H5V8H19M19,3H18V1H16V3H8V1H6V3H5C3.89,3 3,3.9 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5A2,2 0 0,0 19,3M16.53,11.06L15.47,10L10.59,14.88L8.47,12.76L7.41,13.82L10.59,17L16.53,11.06Z"></path>
+					</svg>
+					Utilitaires
+				</a>
+				<a href="#">
+					<svg viewBox="0 0 24 24">
+						<path fill="#ffffff" d="M21,16H3V4H21M21,2H3C1.89,2 1,2.89 1,4V16A2,2 0 0,0 3,18H10V20H8V22H16V20H14V18H21A2,2 0 0,0 23,16V4C23,2.89 22.1,2 21,2Z"></path>
+					</svg>
+					Logiciels
+				</a>
+				<a href="#">
+					<svg viewBox="0 0 24 24">
+						<path fill="#ffffff" d="M12,15.39L8.24,17.66L9.23,13.38L5.91,10.5L10.29,10.13L12,6.09L13.71,10.13L18.09,10.5L14.77,13.38L15.76,17.66M22,9.24L14.81,8.63L12,2L9.19,8.63L2,9.24L7.45,13.97L5.82,21L12,17.27L18.18,21L16.54,13.97L22,9.24Z"></path>
+					</svg>
+					Top 20
+				</a>
+
+				<hr />
+
+				<a href="#">
+					<svg viewBox="0 0 24 24">
+						<path fill="#ffffff" d="M9.5,3A6.5,6.5 0 0,1 16,9.5C16,11.11 15.41,12.59 14.44,13.73L14.71,14H15.5L20.5,19L19,20.5L14,15.5V14.71L13.73,14.44C12.59,15.41 11.11,16 9.5,16A6.5,6.5 0 0,1 3,9.5A6.5,6.5 0 0,1 9.5,3M9.5,5C7,5 5,7 5,9.5C5,12 7,14 9.5,14C12,14 14,12 14,9.5C14,7 12,5 9.5,5Z" />
+					</svg>
+					Recherche avancée
+				</a>
+
+				<hr />
+
+				<h3>Sélection de la semaine</h3>
+				<ul>
+					<li><a href="#"><img src="{% static 'images/fruit_ninja.gif' %}">Fruit Ninja</a></li>
+					<li><a href="#"><img src="{% static 'images/clonelab.gif' %}">Clonelab</a></li>
+					<li><a href="#"><img src="{% static 'images/gravity_duck.png' %}">Gravity Duck</a></li>
+					<li><a href="#"><img src="{% static 'images/calcraft.gif' %}">Calcraft</a></li>
+				</ul>
+
+				<hr />
+				<h3>Coup de cœur</h3>
+				<ul>
+					<li><a href="#"><img src="{% static 'images/fruit_ninja.gif' %}">Fruit Ninja</a></li>
+					<li><a href="#"><img src="{% static 'images/clonelab.gif' %}">Clonelab</a></li>
+					<li><a href="#"><img src="{% static 'images/gravity_duck.png' %}">Gravity Duck</a></li>
+					<li><a href="#"><img src="{% static 'images/calcraft.gif' %}">Calcraft</a></li>
+				</ul>
+			</div>
+
+			<div>
+				<h2>
+					<svg viewBox="0 0 24 24">
+						<path fill="#ffffff" d="M12,3L1,9L12,15L21,10.09V17H23V9M5,13.18V17.18L12,21L19,17.18V13.18L12,17L5,13.18Z"></path>
+					</svg>
+					Tutoriels
+				</h2>
+				<a href="#">Basic Casio</a>
+				<a href="#">C/C++ Casio</a>
+				<a href="#">Arduino</a>
+				<hr>
+				<a href="#">Foire aux questions (FAQ)</a>
+			</div>
+
+			<div>
+				<h2>
+					<svg viewBox="0 0 24 24">
+						<path fill="#ffffff" d="M20.71,4.63L19.37,3.29C19,2.9 18.35,2.9 17.96,3.29L9,12.25L11.75,15L20.71,6.04C21.1,5.65 21.1,5 20.71,4.63M7,14A3,3 0 0,0 4,17C4,18.31 2.84,19 2,19C2.92,20.22 4.5,21 6,21A4,4 0 0,0 10,17A3,3 0 0,0 7,14Z"></path>
+					</svg>
+					Sprites
+				</h2>
+				<a href="#">Personnages</a>
+				<a href="#">Environnement</a>
+				<a href="#">Objets</a>
+				<a href="#">Interfaces</a>
+				<a href="#">Générateur</a>
+			</div>
+
+			<div>
+				<h2>
+					<svg viewBox="0 0 24 24">
+						<path fill="#ffffff" d="M22.7,19L13.6,9.9C14.5,7.6 14,4.9 12.1,3C10.1,1 7.1,0.6 4.7,1.7L9,6L6,9L1.6,4.7C0.4,7.1 0.9,10.1 2.9,12.1C4.8,14 7.5,14.5 9.8,13.6L18.9,22.7C19.3,23.1 19.9,23.1 20.3,22.7L22.6,20.4C23.1,20 23.1,19.3 22.7,19Z"></path>
+					</svg>
+					Outils
+				</h2>
+
+				<a href="#">
+					<svg viewBox="0 0 24 24">
+						<path fill="#ffffff" d="M2.6,10.59L8.38,4.8L10.07,6.5C9.83,7.35 10.22,8.28 11,8.73V14.27C10.4,14.61 10,15.26 10,16A2,2 0 0,0 12,18A2,2 0 0,0 14,16C14,15.26 13.6,14.61 13,14.27V9.41L15.07,11.5C15,11.65 15,11.82 15,12A2,2 0 0,0 17,14A2,2 0 0,0 19,12A2,2 0 0,0 17,10C16.82,10 16.65,10 16.5,10.07L13.93,7.5C14.19,6.57 13.71,5.55 12.78,5.16C12.35,5 11.9,4.96 11.5,5.07L9.8,3.38L10.59,2.6C11.37,1.81 12.63,1.81 13.41,2.6L21.4,10.59C22.19,11.37 22.19,12.63 21.4,13.41L13.41,21.4C12.63,22.19 11.37,22.19 10.59,21.4L2.6,13.41C1.81,12.63 1.81,11.37 2.6,10.59Z"></path>
+					</svg>
+					Forge GitLab
+				</a>
+				<a href="#">
+					<svg viewBox="0 0 24 24">
+						<path fill="#ffffff" d="M14.97,18.95L12.41,12.92C11.39,14.91 10.27,17 9.31,18.95C9.3,18.96 8.84,18.95 8.84,18.95C7.37,15.5 5.85,12.1 4.37,8.68C4.03,7.84 2.83,6.5 2,6.5C2,6.4 2,6.18 2,6.05H7.06V6.5C6.46,6.5 5.44,6.9 5.7,7.55C6.42,9.09 8.94,15.06 9.63,16.58C10.1,15.64 11.43,13.16 12,12.11C11.55,11.23 10.13,7.93 9.71,7.11C9.39,6.57 8.58,6.5 7.96,6.5C7.96,6.35 7.97,6.25 7.96,6.06L12.42,6.07V6.47C11.81,6.5 11.24,6.71 11.5,7.29C12.1,8.53 12.45,9.42 13,10.57C13.17,10.23 14.07,8.38 14.5,7.41C14.76,6.76 14.37,6.5 13.29,6.5C13.3,6.38 13.3,6.17 13.3,6.07C14.69,6.06 16.78,6.06 17.15,6.05V6.47C16.44,6.5 15.71,6.88 15.33,7.46L13.5,11.3C13.68,11.81 15.46,15.76 15.65,16.2L19.5,7.37C19.2,6.65 18.34,6.5 18,6.5C18,6.37 18,6.2 18,6.05L22,6.08V6.1L22,6.5C21.12,6.5 20.57,7 20.25,7.75C19.45,9.54 17,15.24 15.4,18.95C15.4,18.95 14.97,18.95 14.97,18.95Z"></path>
+					</svg>
+					Casio Universal Wiki
+				</a>
+				<a href="#">
+					<svg viewBox="0 0 24 24">
+						<path fill="#ffffff" d="M19,8L15,12H18A6,6 0 0,1 12,18C11,18 10.03,17.75 9.2,17.3L7.74,18.76C8.97,19.54 10.43,20 12,20A8,8 0 0,0 20,12H23M6,12A6,6 0 0,1 12,6C13,6 13.97,6.25 14.8,6.7L16.26,5.24C15.03,4.46 13.57,4 12,4A8,8 0 0,0 4,12H1L5,16L9,12"></path>
+					</svg>
+					SH4 Compatibility Tool
+				</a>
+			</div>
+		</div>
+	</nav>
+
+	<div id="container">
+		<header>
+			<form>
+				<input type="search" placeholder="Recherche" />
+				<a role="button" onclick="this.parentNode.submit();" href="#" class="light-hidden">
+					<svg viewBox="0 0 24 24">
+						<path fill="#adb0b4"d="M9.5,3A6.5,6.5 0 0,1 16,9.5C16,11.11 15.41,12.59 14.44,13.73L14.71,14H15.5L20.5,19L19,20.5L14,15.5V14.71L13.73,14.44C12.59,15.41 11.11,16 9.5,16A6.5,6.5 0 0,1 3,9.5A6.5,6.5 0 0,1 9.5,3M9.5,5C7,5 5,7 5,9.5C5,12 7,14 9.5,14C12,14 14,12 14,9.5C14,7 12,5 9.5,5Z"></path>
+					</svg>
+				</a>
+			</form>
+
+			<div id="spotlight">
+				<a href="#">Concours</a>
+				<a href="#">Jeu du mois</a>
+			</div>
+		</header>
+
+		{% block content %}
+		<article>Lorem ipsum</article>
+		{% endblock %}
+
+	</div>
+
+	<!-- <div class="alert ok" style="top: 25px;" onclick="close_important(this)">
+		<svg style='width:24px;height:24px' viewBox='0 0 24 24'>
+			<path fill="#727272" d="M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22A10,10 0 0,1 2,12A10,10 0 0,1 12,2M12,4A8,8 0 0,0 4,12A8,8 0 0,0 12,20A8,8 0 0,0 20,12A8,8 0 0,0 12,4M11,16.5L6.5,12L7.91,10.59L11,13.67L16.59,8.09L18,9.5L11,16.5Z"></path>
+		</svg>
+		<span>
+			Votre message a bien été posté.
+		</span>
+		<input type="button" class="flat" value="MASQUER" onclick="setCookie('pc_notif', 'true');"></input>
+	</div>
+	<div class="alert error" style="top: 95px;" onclick="close_important(this)">
+		<svg style='width:24px;height:24px' viewBox='0 0 24 24'>
+			<path fill="#727272" d="M12,2L1,21H23M12,6L19.53,19H4.47M11,10V14H13V10M11,16V18H13V16"></path>
+		</svg>
+		<span>
+			Holy shit! Ceci est un grave problème ! Il faut s'en occuper dès que possible.
+		</span>
+		<input type="button" class="flat" value="MASQUER" onclick="setCookie('pc_notif_2', 'true');"></input>
+	</div> -->
+</body>
+
+<script type="text/javascript" src="{% static 'scripts/trigger_menu.js' %}"></script>
+<script type="text/javascript" src="{% static 'scripts/smartphone_patch.js' %}"></script>
+
+<script type="text/javascript">
+function setCookie(name, value) {
+	var end = new Date();
+	end.setTime( end.getTime() + 3600 * 1000 );
+	var str=name+"="+escape(value)+"; expires="+end.toGMTString()+"; path=/";
+	document.cookie = str;
+}
+function getCookie(name) {
+	var debut = document.cookie.indexOf(name);
+	if( debut == -1 )	return null;
+	var end = document.cookie.indexOf( ";", debut+name.length+1 );
+	if( end == -1 ) end = document.cookie.length;
+	return unescape( document.cookie.substring( debut+name.length+1, end ) );
+}
+
+if(getCookie('pc_notif') == 'true')
+	document.getElementsByClassName('alert')[0].parentNode.removeChild(document.getElementsByClassName('alert')[0]);
+if(getCookie('pc_notif_2') == 'true')
+	document.getElementsByClassName('alert')[0].parentNode.removeChild(document.getElementsByClassName('alert')[0]);
+
+function close_important(element) {
+	element.style.opacity = 0;
+	setTimeout(function(){ element.parentNode.removeChild(element); }, 200);
+}
+
+</script>
+
+</html>

templates/forum/forum.html

@@ -0,0 +1,12 @@
+{% extends "base.html" %}
+
+{% block title %}Planète Casio — {{ forum.name }}{% endblock %}
+
+{% block content %}
+<article>
+    <h1>Forum {{ forum.name }}</h1>
+	<div>
+		{{ forum.description }}
+	</div>
+</article>
+{% endblock %}

templates/forum/index.html

@@ -0,0 +1,21 @@
+{% extends "base.html" %}
+
+{% block title %}Planète Casio — Index des forums{% endblock %}
+
+{% block content %}
+<article>
+    <h1>Index des forums</h1>
+	<div>
+		<ul>
+			{% for f in forums %}
+			<li>
+				<h3>{{ f.name }}</h3>
+				{{ f.description }}
+			</li>
+			{% empty %}
+			<li><h3>Pas de forum disponible actuellement</h3></li>
+			{% endfor %}
+		</ul>
+	</div>
+</article>
+{% endblock %}

templates/home/homepage.html

@@ -0,0 +1,36 @@
+{% extends "base.html" %}
+
+{% block title %}Planète Casio — Jeux, cours et tutos{% endblock %}
+
+{% block content %}
+<article>
+    <h1>Informations sur le développement</h1>
+	<div>
+		<p>Tous les onglets sont fonctionnels, cliquez sur une icone pour afficher, sur une autre pour modifier, deux fois de suite pour fermer. Sinon cliquez à coté.</p>
+		<p>Les onglets Tutoriels et Sprites ne sont pas encore remplis, c'est normal qu'ils fassent un peu vide. L'avantage de ce menu est qu'on peut le remplir comme on veut, dans le pire des cas ça déclenche le scrolling (c'est pas exemple le cas pour l'onglet "Programmes", qui est beaucoup trop rempli). \o/</p>
+		<p>Le header contient une barre de recherche ainsi que des liens de type "spotlight" : ils servent à mettre en valeur un évènement ou une partie du site. On peut bien évidemment remplacer par autre chose, mais je trouvais que cela était intéressant de pouvoir attirer l'attention de cette manière.</p>
+		<p><strong>Ne faites pas attention au contenu principal de la page, il n'est absolument pas définitif !</strong> De même pour le positionnement des alertes. Toutefois, à part les entrées des sous-menus, ceux-ci sont en version quasi‑finale.</p>
+		<p><strong>Nous sommes ouverts à toute suggestion et amélioration !</strong> Si vous souhaitez participer au développement du site, n'hésitez pas à nous contacter à l'adresse suivante : <a href="mailto:contact@planet-casio.com">contact@planet-casio.com</a>. N'oubliez pas de préciser « [v5] » dans l'en-tête pour que nous puissions facilement traiter le message. Vous pouvez aussi ajouter des fichiers, tels que des exemples de html/css, des schémas d'organisation, ou encore des captures d'écran en cas de problème d'affichage. <strong>Dans le cas où vous signalez un bug, merci de préciser :</strong>
+			<ul>
+				<li>votre plateforme (PC, tablette ou smartphone)</li>
+				<li>votre système d'exploitation (nom et version)</li>
+				<li>votre navigateur (nom et version)</li>
+				<li>la taille de votre écran en pixel (pour les smartphones, essayez d'ajouter le viewport correspondant)</li>
+				<li>le problème rencontré</li>
+			</ul>
+		Merci pour votre participation !
+		</p>
+	</div>
+</article>
+
+<article>
+	<h1>Lorem ipsum</h1>
+	<div>
+		<p>Etiam ut metus mollis, molestie leo vel, finibus orci. Praesent in orci diam. Nullam laoreet rutrum elit, id luctus neque. Integer egestas, leo ut porta sodales, lacus enim sollicitudin risus, congue pharetra est dui ac arcu. Nunc egestas eu erat vitae volutpat. In non lorem cursus, viverra nisl vel, feugiat sem. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nunc lacinia, nibh vel vulputate aliquam, nunc diam blandit massa, vel imperdiet velit ante eget ligula. Suspendisse vestibulum purus quis ligula cursus semper. Quisque efficitur ultrices dignissim.</p>
+		<p>Maecenas vel mauris ligula. Proin faucibus, magna eget euismod ullamcorper, felis risus hendrerit dui, in ultrices nunc tortor at nulla. Mauris eu pharetra ligula. Aliquam at arcu leo. Donec ipsum felis, tristique nec bibendum nec, bibendum ut nisi. In hac habitasse platea dictumst. Duis in ante magna. Sed lacinia suscipit enim vitae tempus. Mauris porta orci at tortor faucibus, a volutpat ligula imperdiet. Cras nisi ex, consectetur in orci at, sollicitudin faucibus quam. Fusce eget leo accumsan, dictum nunc et, sodales nisl.</p>
+		<p>Nullam ut purus suscipit, elementum magna quis, molestie lorem. Integer erat dui, pellentesque nec odio dignissim, semper elementum nunc. Aenean nec tristique ex, et vehicula dolor. Quisque quis urna ut sapien tristique placerat. Nunc pellentesque tincidunt leo eu porta. Maecenas sollicitudin ullamcorper diam, vel ultricies elit. Praesent lorem risus, ornare eu malesuada vitae, accumsan in lacus.</p>
+		<p>Vivamus at tortor vel arcu scelerisque interdum a et sem. Morbi pellentesque, velit quis malesuada fringilla, risus turpis mollis magna, et mattis arcu orci sit amet mauris. Donec ac tincidunt ipsum. Mauris at quam sit amet nibh varius auctor. In dictum dui sed justo semper tempor. Vivamus vitae sem id nibh vulputate tincidunt. Praesent quis finibus metus. Nulla at imperdiet ex. Suspendisse potenti. Nullam nec tortor sapien. Vestibulum bibendum enim vel lectus cursus, id fringilla sapien malesuada. Sed vitae tellus eu lectus laoreet malesuada at nec dui. Mauris varius, purus at scelerisque accumsan, turpis magna vehicula diam, a suscipit erat metus at diam.</p>
+		<p>Aenean mattis in leo viverra rutrum. Etiam et nulla in ipsum ornare consectetur. Quisque bibendum, metus nec ultrices efficitur, dui risus rhoncus lectus, a imperdiet nibh elit ut ipsum. Quisque convallis lacus elementum dolor dignissim sollicitudin. Maecenas dapibus dolor quis tellus imperdiet, hendrerit vestibulum lacus tempor. Nam quis risus non nulla euismod semper. Suspendisse commodo aliquam aliquet. Nullam nec varius felis. Nullam velit erat, interdum ac vehicula nec, efficitur in enim. Morbi sodales ante quis nunc vehicula, non eleifend lacus congue. Maecenas a imperdiet nunc.</p>
+	</div>
+</article>
+{% endblock %}