From 750a1dca949fff3a1fe84d264da95ae5fd3261d1 Mon Sep 17 00:00:00 2001
From: Arthur REITER <arthur.reiter231@gmail.com>
Date: Mon, 3 May 2021 15:20:41 +0200
Subject: [PATCH 1/7] Background system is recoded

---
 src/components/Background.vue | 102 ++++++++++++++++++++++------------
 1 file changed, 66 insertions(+), 36 deletions(-)

diff --git a/src/components/Background.vue b/src/components/Background.vue
index 902ed27..f04894b 100644
--- a/src/components/Background.vue
+++ b/src/components/Background.vue
@@ -1,58 +1,88 @@
+<template>
+  Photo par <a target="_blank" v-bind:href="currentBackground.link">{{ currentBackground.author }}</a> / <a target="_blank" v-bind:href="currentBackground.siteurl">{{currentBackground.site}}</a>
+</template>
+
 <script>
 export default {
   name: 'Background',
   data() {
     return {
-      currentBackgroundImage: {
-            url: null,
-            link: null,
-            author: null,
-            site: null,
-            siteurl: null
-        },
-        theme: null,
-        backgrounds: [
-            {
-            "url": "https://images.pexels.com/photos/1072179/pexels-photo-1072179.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260",
-            "link": "https://www.pexels.com/fr-fr/photo/feuilles-vertes-1072179/",
-            "user": "Cátia Matos",
-            "site": "Pexel",
-            "siteurl": "https://www.pexels.com/"
-            }
-        ],
+      background_source: 0, // 0 => Random from the default list | 1 => Fixed from default list | 2 => Uploaded
+      backgroundId: null, // The id of the backgroud in the default backgrounds list if the user choose one
+      theme: null,
+      currentBackground: { // Data from the current loaded background
+        url: null,
+        link: null,
+        author: null,
+        site: null,
+        siteurl: null
+      },
+      backgrounds: [
+        {
+        "url": "https://images.pexels.com/photos/1072179/pexels-photo-1072179.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260",
+        "link": "https://www.pexels.com/fr-fr/photo/feuilles-vertes-1072179/",
+        "user": "Cátia Matos",
+        "site": "Pexel",
+        "siteurl": "https://www.pexels.com/"
+        }
+      ],
     };
   },
   methods: {
-    setBackground: function(id) {
+    /**
+     * Set a background from an ID 
+     * in the default background list
+     */
+    setBackgroundFromId: function(id) {
         let bg = this.backgrounds[id];
-        console.log("Background Choose : ");
-        console.log(bg);
-
-        this.currentBackgroundImage.url = bg.url;
-        this.currentBackgroundImage.link = bg.link;
-        this.currentBackgroundImage.author = bg.user;
-        this.currentBackgroundImage.site = bg.site;
-        this.currentBackgroundImage.siteurl = bg.siteurl;
-        sessionStorage["bg_url"] = this.currentBackgroundImage.url;
-        sessionStorage["bg_link"] = this.currentBackgroundImage.link;
-        sessionStorage["bg_author"] = this.currentBackgroundImage.author;
-        sessionStorage["site"] = this.currentBackgroundImage.site;
-        sessionStorage["siteurl"] = this.currentBackgroundImage.siteurl;
 
-        this.applyBackground();
+        this.currentBackground.url = bg.url;
+        this.currentBackground.link = bg.link;
+        this.currentBackground.author = bg.user;
+        this.currentBackground.site = bg.site;
+        this.currentBackground.siteurl = bg.siteurl;
+        sessionStorage["bg_url"] = this.currentBackground.url;
+        sessionStorage["bg_link"] = this.currentBackground.link;
+        sessionStorage["bg_author"] = this.currentBackground.author;
+        sessionStorage["site"] = this.currentBackground.site;
+        sessionStorage["siteurl"] = this.currentBackground.siteurl;
     },
+    /**
+     * Apply the background stored in 
+     * currentBackground to the HTML DOM
+     */
     applyBackground: function () {
-        document.getElementById("app").style.background = "url(" + this.currentBackgroundImage.url + ") no-repeat center fixed";
+        document.getElementById("app").style.background = "url(" + this.currentBackground.url + ") no-repeat center fixed";
         document.getElementById("app").style.backgroundSize = "cover";
     },
+    /**
+     * Get a random background ID from the
+     * default background list
+     */
+    getRandomIdFromDefaultList: function() {
+      let nbBackgroundsInList = this.backgrounds.length;
+      let randomID = Math.floor(Math.random() * nbBackgroundsInList);
+      return randomID;
+    }
   },
   created() {
-    this.setBackground(0);
-        console.log(this.backgrounds)
+    switch (this.background_source) {
+      case 0: // Random from the default list
+        this.setBackgroundFromId(this.getRandomIdFromDefaultList())
+        break;
+
+      case 1: // Fixed from default list
+        this.setBackgroundFromId(this.backgroundId);
+        break; 
+
+      case 2: // Uploaded
+        //TODO make functions for upload a background
+        break; 
+    }
+    this.applyBackground();
   }
 }
 </script>
 
 <style scoped>
-
 </style>

From 45134ec87c4d24ba7fd2abcab0e9d0abb756f066 Mon Sep 17 00:00:00 2001
From: Arthur REITER <arthur.reiter231@gmail.com>
Date: Mon, 3 May 2021 15:39:12 +0200
Subject: [PATCH 2/7] Fix css, colors & font

---
 public/index.html             | 23 +----------------------
 src/App.vue                   |  6 +++++-
 src/assets/css/colors.css     | 10 ++++++++++
 src/assets/css/style.css      | 13 +++++++++++++
 src/components/Background.vue |  2 +-
 5 files changed, 30 insertions(+), 24 deletions(-)
 create mode 100644 src/assets/css/colors.css
 create mode 100644 src/assets/css/style.css

diff --git a/public/index.html b/public/index.html
index 4bfbc3b..5134b3b 100644
--- a/public/index.html
+++ b/public/index.html
@@ -5,14 +5,6 @@
   <meta charset="utf-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1" />
   <title>Menu Web</title>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.2/css/bulma.min.css">
-  <link rel="stylesheet" href="src/css/animate.css" />
-  <link rel="stylesheet" href="src/css/style.css" />
-  <script src="https://kit.fontawesome.com/269b5f41a7.js" crossorigin="anonymous"></script>
-  <!-- development version, includes helpful console warnings -->
-  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
-  <!-- production version, optimized for size and speed --
-  <script src="https://cdn.jsdelivr.net/npm/vue"></script>-->
 </head>
   <body>
     <noscript>
@@ -21,17 +13,4 @@
     <div id="app"></div>
     <!-- built files will be auto injected -->
   </body>
-</html>
-
-<style>
-/* Hide Scrollbar */
-body::-webkit-scrollbar {
-    width: 0 !important
-}
-body {
-    overflow: -moz-scrollbars-none;
-}
-body {
-    -ms-overflow-style: none;
-}
-</style>
\ No newline at end of file
+</html>
\ No newline at end of file
diff --git a/src/App.vue b/src/App.vue
index a641cc9..048f502 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -55,7 +55,11 @@
   }
 </script>
 
-<style scope>
+<style>
+  @import "./assets/css/colors.css";
+  @import "./assets/css/style.css";
+
+
   #app {
     margin: 0;
     padding: 0;
diff --git a/src/assets/css/colors.css b/src/assets/css/colors.css
new file mode 100644
index 0000000..f597d1f
--- /dev/null
+++ b/src/assets/css/colors.css
@@ -0,0 +1,10 @@
+:root {
+    --bg: rgba(15, 28, 45, 0.925);
+    --bg-lighter: rgba(27, 51, 83, 0.750);
+
+    --text: #f8f9fa;
+    --text-lighter: red;
+    --text-darker: red;
+
+    --primary: #f07d1b
+}
\ No newline at end of file
diff --git a/src/assets/css/style.css b/src/assets/css/style.css
new file mode 100644
index 0000000..5695270
--- /dev/null
+++ b/src/assets/css/style.css
@@ -0,0 +1,13 @@
+/* Hide Scrollbar */
+body::-webkit-scrollbar {
+    width: 0 !important
+}
+body {
+    overflow: -moz-scrollbars-none;
+    -ms-overflow-style: none;
+    margin: 0;
+    color: var(--text);
+    font-family: Quicksand,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
+}
+
+
diff --git a/src/components/Background.vue b/src/components/Background.vue
index f04894b..a259ca7 100644
--- a/src/components/Background.vue
+++ b/src/components/Background.vue
@@ -84,5 +84,5 @@ export default {
 }
 </script>
 
-<style scoped>
+<style scope>
 </style>

From 092914bcb6b4fd986883b77bdb9f255857d5d0ae Mon Sep 17 00:00:00 2001
From: Arthur REITER <arthur.reiter231@gmail.com>
Date: Mon, 3 May 2021 15:51:19 +0200
Subject: [PATCH 3/7] Add background credits

---
 src/assets/css/colors.css     |  6 +++---
 src/components/Background.vue | 16 +++++++++++++++-
 2 files changed, 18 insertions(+), 4 deletions(-)

diff --git a/src/assets/css/colors.css b/src/assets/css/colors.css
index f597d1f..be67f50 100644
--- a/src/assets/css/colors.css
+++ b/src/assets/css/colors.css
@@ -2,9 +2,9 @@
     --bg: rgba(15, 28, 45, 0.925);
     --bg-lighter: rgba(27, 51, 83, 0.750);
 
-    --text: #f8f9fa;
-    --text-lighter: red;
-    --text-darker: red;
+    --text: #F8F9FA;
+    --text-lighter: #FCFDFF;
+    --text-darker: #C5C6C6;
 
     --primary: #f07d1b
 }
\ No newline at end of file
diff --git a/src/components/Background.vue b/src/components/Background.vue
index a259ca7..1d3eab3 100644
--- a/src/components/Background.vue
+++ b/src/components/Background.vue
@@ -1,5 +1,11 @@
 <template>
-  Photo par <a target="_blank" v-bind:href="currentBackground.link">{{ currentBackground.author }}</a> / <a target="_blank" v-bind:href="currentBackground.siteurl">{{currentBackground.site}}</a>
+  <p v-if="currentBackground.link != '' && currentBackground.author != ''">
+    Photo par <a target="_blank" v-bind:href="currentBackground.link">{{ currentBackground.author }}</a> 
+
+    <span v-if="currentBackground.site != '' && currentBackground.siteurl != ''">
+      / <a target="_blank" v-bind:href="currentBackground.siteurl">{{currentBackground.site}}</a>
+    </span>
+  </p>
 </template>
 
 <script>
@@ -85,4 +91,12 @@ export default {
 </script>
 
 <style scope>
+  a, p {
+    transition-duration: 0.2s;
+    color: var(--text-darker);
+    text-decoration: none;
+  }
+  a:hover {
+    color: var(--text);
+  }
 </style>

From 59b3d5ba2308a239951acc9555d6cf0344273f46 Mon Sep 17 00:00:00 2001
From: Arthur REITER <arthur.reiter231@gmail.com>
Date: Mon, 3 May 2021 16:05:31 +0200
Subject: [PATCH 4/7] Fix alignement system

---
 src/App.vue                       | 14 ++++++++++----
 src/components/Background.vue     |  6 +++---
 src/components/Clock.vue          |  2 +-
 src/components/Quotes.vue         |  2 +-
 src/components/Search.vue         |  2 +-
 src/components/Settings.vue       |  2 +-
 src/components/Weather.vue        |  2 +-
 src/components/WelcomeMessage.vue |  2 +-
 8 files changed, 19 insertions(+), 13 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 048f502..d08cc69 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -23,7 +23,7 @@
       <Background />
     </aside>
 
-    <aside class="center upped">
+    <aside class="center">
       <Quotes />
     </aside>
 
@@ -71,12 +71,12 @@
     min-height: 100vh;
     flex-direction: column;
     margin: 0;
-    padding: 1vh;
   }
 
   header, footer, aside {
     display: flex;
     flex: 1;
+    padding: 1vh;
   }
 
   header {
@@ -102,12 +102,18 @@
     align-items: flex-end;
   }
 
+  footer > aside {
+    flex: 1;
+    flex-direction: column;
+  }
+
   .left {
     justify-content:flex-start;
   }
 
   .center {
     justify-content:center;
+    align-items: center;
   }
 
   .right {
@@ -117,12 +123,12 @@
   .main {
     display: flex;
     flex: 3;
-    flex-flow: column wrap;
+    flex-direction: column;
     justify-content:center;
     align-items: center;
   }
 
-  .upped {
+  footer > .center {
     padding-bottom: 5vh;
   }
 </style>
\ No newline at end of file
diff --git a/src/components/Background.vue b/src/components/Background.vue
index 1d3eab3..5acaee8 100644
--- a/src/components/Background.vue
+++ b/src/components/Background.vue
@@ -1,11 +1,11 @@
 <template>
-  <p v-if="currentBackground.link != '' && currentBackground.author != ''">
+  <span v-if="currentBackground.link != '' && currentBackground.author != ''">
     Photo par <a target="_blank" v-bind:href="currentBackground.link">{{ currentBackground.author }}</a> 
 
     <span v-if="currentBackground.site != '' && currentBackground.siteurl != ''">
       / <a target="_blank" v-bind:href="currentBackground.siteurl">{{currentBackground.site}}</a>
     </span>
-  </p>
+  </span>
 </template>
 
 <script>
@@ -91,7 +91,7 @@ export default {
 </script>
 
 <style scope>
-  a, p {
+  a, span {
     transition-duration: 0.2s;
     color: var(--text-darker);
     text-decoration: none;
diff --git a/src/components/Clock.vue b/src/components/Clock.vue
index 70981d2..a044a4d 100644
--- a/src/components/Clock.vue
+++ b/src/components/Clock.vue
@@ -1,5 +1,5 @@
 <template>
-  <p>Clock</p>
+  <span>Clock</span>
 </template>
 
 <script>
diff --git a/src/components/Quotes.vue b/src/components/Quotes.vue
index 57c3409..69b8aa8 100644
--- a/src/components/Quotes.vue
+++ b/src/components/Quotes.vue
@@ -1,3 +1,3 @@
 <template>
-  <p>Quotes</p>
+  <span>Quotes</span>
 </template>
\ No newline at end of file
diff --git a/src/components/Search.vue b/src/components/Search.vue
index 8f496df..1fafc37 100644
--- a/src/components/Search.vue
+++ b/src/components/Search.vue
@@ -1,3 +1,3 @@
 <template>
-  <p>Search</p>
+  <span>Search</span>
 </template>
\ No newline at end of file
diff --git a/src/components/Settings.vue b/src/components/Settings.vue
index 7f5c139..942c745 100644
--- a/src/components/Settings.vue
+++ b/src/components/Settings.vue
@@ -1,3 +1,3 @@
 <template>
-  <p>Settings</p>
+  <span>Settings</span>
 </template>
\ No newline at end of file
diff --git a/src/components/Weather.vue b/src/components/Weather.vue
index 6c6f4de..dbcb42e 100644
--- a/src/components/Weather.vue
+++ b/src/components/Weather.vue
@@ -1,3 +1,3 @@
 <template>
-  <p>Weather</p>
+  <span>Weather</span>
 </template>
\ No newline at end of file
diff --git a/src/components/WelcomeMessage.vue b/src/components/WelcomeMessage.vue
index 0ad0011..6077132 100644
--- a/src/components/WelcomeMessage.vue
+++ b/src/components/WelcomeMessage.vue
@@ -1,3 +1,3 @@
 <template>
-  <p>WelcomeMessage</p>
+  <span>WelcomeMessage</span>
 </template>
\ No newline at end of file

From 45af248f94c96b916e21616367bf4f52b7b6b597 Mon Sep 17 00:00:00 2001
From: Arthur REITER <arthur.reiter231@gmail.com>
Date: Mon, 3 May 2021 16:09:58 +0200
Subject: [PATCH 5/7] Make credits smaller

---
 src/components/Background.vue | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/components/Background.vue b/src/components/Background.vue
index 5acaee8..7db167b 100644
--- a/src/components/Background.vue
+++ b/src/components/Background.vue
@@ -90,11 +90,12 @@ export default {
 }
 </script>
 
-<style scope>
+<style scoped>
   a, span {
     transition-duration: 0.2s;
-    color: var(--text-darker);
     text-decoration: none;
+    color: var(--text-darker);
+    font-size: 0.8rem;
   }
   a:hover {
     color: var(--text);

From d142c04f0e9983fb6b51424991bd3eaa8bedd98b Mon Sep 17 00:00:00 2001
From: Arthur REITER <arthur.reiter231@gmail.com>
Date: Wed, 5 May 2021 17:07:07 +0200
Subject: [PATCH 6/7] Add backgrounds and code sessionStorage system

---
 src/components/Background.vue | 125 +++++++++++++++++++++++++++++++---
 1 file changed, 117 insertions(+), 8 deletions(-)

diff --git a/src/components/Background.vue b/src/components/Background.vue
index 7db167b..a61ea32 100644
--- a/src/components/Background.vue
+++ b/src/components/Background.vue
@@ -25,13 +25,111 @@ export default {
       },
       backgrounds: [
         {
-        "url": "https://images.pexels.com/photos/1072179/pexels-photo-1072179.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260",
-        "link": "https://www.pexels.com/fr-fr/photo/feuilles-vertes-1072179/",
-        "user": "Cátia Matos",
-        "site": "Pexel",
-        "siteurl": "https://www.pexels.com/"
-        }
-      ],
+            "url": "https://images.unsplash.com/photo-1516528387618-afa90b13e000?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1350&q=80",
+            "link": "https://unsplash.com/photos/jqgsM3B9Fpo",
+            "user": "Yoal Desurmont",
+            "site": "Unsplash",
+            "siteurl": "https://unsplash.com/?utm_source=urn:ietf:wg:oauth:2.0:oob&utm_medium=referral"
+        },
+        {
+            "url": "https://images.pexels.com/photos/1072179/pexels-photo-1072179.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260",
+            "link": "https://www.pexels.com/fr-fr/photo/feuilles-vertes-1072179/",
+            "user": "Cátia Matos",
+            "site": "Pexel",
+            "siteurl": "https://www.pexels.com/"
+        },
+        {
+            "url": "https://images.unsplash.com/photo-1531156992292-d36397ee9184?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1350&q=80",
+            "link": "https://unsplash.com/photos/_1UF_3TlKcQ",
+            "user": "Mykyta Martynenko",
+            "site": "Unsplash",
+            "siteurl": "https://unsplash.com/?utm_source=urn:ietf:wg:oauth:2.0:oob&utm_medium=referral"
+        },
+        {
+            "url": "https://images.unsplash.com/photo-1566050980594-f65e237a2e98?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max&ixid=eyJhcHBfaWQiOjEyNjI0MH0",
+            "link": "https://unsplash.com/photos/4iapyjvm714",
+            "user": "Andy Holmes",
+            "site": "Unsplash",
+            "siteurl": "https://unsplash.com/?utm_source=urn:ietf:wg:oauth:2.0:oob&utm_medium=referral"
+        },
+        {
+            "url": "https://images.unsplash.com/photo-1580218102234-490e83efd85b?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max&ixid=eyJhcHBfaWQiOjEyNjI0MH0",
+            "link": "https://unsplash.com/photos/HI5rD5zbU2o",
+            "user": "Willian Justen de Vasconcellos",
+            "site": "Unsplash",
+            "siteurl": "https://unsplash.com/?utm_source=urn:ietf:wg:oauth:2.0:oob&utm_medium=referral"
+        },
+        {
+            "url": "https://images.unsplash.com/photo-1597661905942-8d50e4ab6fc8?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max&ixid=eyJhcHBfaWQiOjEyNjI0MH0",
+            "link": "https://unsplash.com/photos/_F2T1OyB7K0",
+            "user": "Annie Spratt",
+            "site": "Unsplash",
+            "siteurl": "https://unsplash.com/?utm_source=urn:ietf:wg:oauth:2.0:oob&utm_medium=referral"
+        },
+        {
+            "url": "https://images.unsplash.com/photo-1578915424189-f3d4297b385a?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max&ixid=eyJhcHBfaWQiOjEyNjI0MH0",
+            "link": "https://unsplash.com/photos/jJ2pHxn5mXw",
+            "user": "Federico Bottos",
+            "site": "Unsplash",
+            "siteurl": "https://unsplash.com/?utm_source=urn:ietf:wg:oauth:2.0:oob&utm_medium=referral"
+        },
+        {
+            "url": "https://images.pexels.com/photos/3875821/pexels-photo-3875821.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260",
+            "link": "https://www.pexels.com/fr-fr/photo/vue-aerienne-des-batiments-de-la-ville-3875821/",
+            "user": "Peter Olexa",
+            "site": "Pexel",
+            "siteurl": "https://www.pexels.com/"
+        },
+        {
+            "url": "https://images.pexels.com/photos/4512439/pexels-photo-4512439.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260",
+            "link": "https://www.pexels.com/fr-fr/photo/volant-de-voiture-noir-pendant-la-nuit-4512439/",
+            "user": "Aleksandar Pasaric",
+            "site": "Pexel",
+            "siteurl": "https://www.pexels.com/"
+        },
+        {
+            "url": "https://images.pexels.com/photos/4004374/pexels-photo-4004374.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260",
+            "link": "https://www.pexels.com/fr-fr/photo/collection-de-plumes-delicates-sur-fond-noir-4004374/",
+            "user": "Evie Shaffer",
+            "site": "Pexel",
+            "siteurl": "https://www.pexels.com/"
+        },
+        {
+            "url": "https://images.pexels.com/photos/3075993/pexels-photo-3075993.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260",
+            "link": "https://www.pexels.com/fr-fr/photo/photo-d-horizon-la-nuit-3075993/",
+            "user": "Sanaan Mazhar",
+            "site": "Pexel",
+            "siteurl": "https://www.pexels.com/"
+        },
+        {
+            "url": "https://images.pexels.com/photos/1105666/pexels-photo-1105666.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260",
+            "link": "https://www.pexels.com/fr-fr/photo/personnes-au-concert-1105666/",
+            "user": "Vishnu R Nair",
+            "site": "Pexel",
+            "siteurl": "https://www.pexels.com/"
+        },
+        {
+            "url": "https://images.pexels.com/photos/1114900/pexels-photo-1114900.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260",
+            "link": "https://www.pexels.com/fr-fr/photo/eclipse-lunaire-1114900/",
+            "user": "Johannes Plenio",
+            "site": "Pexel",
+            "siteurl": "https://www.pexels.com/"
+        },
+        {
+            "url": "https://images.pexels.com/photos/1183021/pexels-photo-1183021.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260",
+            "link": "https://www.pexels.com/fr-fr/photo/montagnes-derriere-la-pleine-lune-1183021/",
+            "user": "Eberhard Grossgasteiger",
+            "site": "Pexel",
+            "siteurl": "https://www.pexels.com/"
+        },
+        {
+            "url": "https://images.pexels.com/photos/949193/pexels-photo-949193.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260",
+            "link": "https://www.pexels.com/fr-fr/photo/homme-en-veste-rouge-debout-a-l-exterieur-de-la-grotte-en-face-de-trois-montagnes-949193/",
+            "user": "S Migaj",
+            "site": "Pexel",
+            "siteurl": "https://www.pexels.com/"
+        },
+    ],
     };
   },
   methods: {
@@ -69,12 +167,23 @@ export default {
       let nbBackgroundsInList = this.backgrounds.length;
       let randomID = Math.floor(Math.random() * nbBackgroundsInList);
       return randomID;
+    },
+    loadSessionStorageBackground: function() {
+      this.currentBackground.url = sessionStorage["bg_url"];
+      this.currentBackground.link = sessionStorage["bg_link"];
+      this.currentBackground.author = sessionStorage["bg_author"];
+      this.currentBackground.site = sessionStorage["site"];
+      this.currentBackground.siteurl = sessionStorage["siteurl"]; 
     }
   },
   created() {
     switch (this.background_source) {
       case 0: // Random from the default list
-        this.setBackgroundFromId(this.getRandomIdFromDefaultList())
+        if (sessionStorage["bg_url"] !== undefined) {
+          this.loadSessionStorageBackground();
+        } else {
+          this.setBackgroundFromId(this.getRandomIdFromDefaultList())
+        }
         break;
 
       case 1: // Fixed from default list

From 142883bf728c0c702152142f33d88702610ba7bf Mon Sep 17 00:00:00 2001
From: Arthur REITER <arthur.reiter231@gmail.com>
Date: Wed, 5 May 2021 17:23:49 +0200
Subject: [PATCH 7/7] Move backgrounds in an external json file

---
 src/assets/backgrounds.json   | 107 +++++++++++++++++++++++++++++++
 src/components/Background.vue | 115 ++--------------------------------
 2 files changed, 111 insertions(+), 111 deletions(-)
 create mode 100644 src/assets/backgrounds.json

diff --git a/src/assets/backgrounds.json b/src/assets/backgrounds.json
new file mode 100644
index 0000000..b66a85f
--- /dev/null
+++ b/src/assets/backgrounds.json
@@ -0,0 +1,107 @@
+[
+    {
+        "url": "https://images.unsplash.com/photo-1516528387618-afa90b13e000?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1350&q=80",
+        "link": "https://unsplash.com/photos/jqgsM3B9Fpo",
+        "user": "Yoal Desurmont",
+        "site": "Unsplash",
+        "siteurl": "https://unsplash.com/?utm_source=urn:ietf:wg:oauth:2.0:oob&utm_medium=referral"
+    },
+    {
+        "url": "https://images.pexels.com/photos/1072179/pexels-photo-1072179.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260",
+        "link": "https://www.pexels.com/fr-fr/photo/feuilles-vertes-1072179/",
+        "user": "Cátia Matos",
+        "site": "Pexel",
+        "siteurl": "https://www.pexels.com/"
+    },
+    {
+        "url": "https://images.unsplash.com/photo-1531156992292-d36397ee9184?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1350&q=80",
+        "link": "https://unsplash.com/photos/_1UF_3TlKcQ",
+        "user": "Mykyta Martynenko",
+        "site": "Unsplash",
+        "siteurl": "https://unsplash.com/?utm_source=urn:ietf:wg:oauth:2.0:oob&utm_medium=referral"
+    },
+    {
+        "url": "https://images.unsplash.com/photo-1566050980594-f65e237a2e98?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max&ixid=eyJhcHBfaWQiOjEyNjI0MH0",
+        "link": "https://unsplash.com/photos/4iapyjvm714",
+        "user": "Andy Holmes",
+        "site": "Unsplash",
+        "siteurl": "https://unsplash.com/?utm_source=urn:ietf:wg:oauth:2.0:oob&utm_medium=referral"
+    },
+    {
+        "url": "https://images.unsplash.com/photo-1580218102234-490e83efd85b?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max&ixid=eyJhcHBfaWQiOjEyNjI0MH0",
+        "link": "https://unsplash.com/photos/HI5rD5zbU2o",
+        "user": "Willian Justen de Vasconcellos",
+        "site": "Unsplash",
+        "siteurl": "https://unsplash.com/?utm_source=urn:ietf:wg:oauth:2.0:oob&utm_medium=referral"
+    },
+    {
+        "url": "https://images.unsplash.com/photo-1597661905942-8d50e4ab6fc8?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max&ixid=eyJhcHBfaWQiOjEyNjI0MH0",
+        "link": "https://unsplash.com/photos/_F2T1OyB7K0",
+        "user": "Annie Spratt",
+        "site": "Unsplash",
+        "siteurl": "https://unsplash.com/?utm_source=urn:ietf:wg:oauth:2.0:oob&utm_medium=referral"
+    },
+    {
+        "url": "https://images.unsplash.com/photo-1578915424189-f3d4297b385a?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max&ixid=eyJhcHBfaWQiOjEyNjI0MH0",
+        "link": "https://unsplash.com/photos/jJ2pHxn5mXw",
+        "user": "Federico Bottos",
+        "site": "Unsplash",
+        "siteurl": "https://unsplash.com/?utm_source=urn:ietf:wg:oauth:2.0:oob&utm_medium=referral"
+    },
+    {
+        "url": "https://images.pexels.com/photos/3875821/pexels-photo-3875821.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260",
+        "link": "https://www.pexels.com/fr-fr/photo/vue-aerienne-des-batiments-de-la-ville-3875821/",
+        "user": "Peter Olexa",
+        "site": "Pexel",
+        "siteurl": "https://www.pexels.com/"
+    },
+    {
+        "url": "https://images.pexels.com/photos/4512439/pexels-photo-4512439.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260",
+        "link": "https://www.pexels.com/fr-fr/photo/volant-de-voiture-noir-pendant-la-nuit-4512439/",
+        "user": "Aleksandar Pasaric",
+        "site": "Pexel",
+        "siteurl": "https://www.pexels.com/"
+    },
+    {
+        "url": "https://images.pexels.com/photos/4004374/pexels-photo-4004374.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260",
+        "link": "https://www.pexels.com/fr-fr/photo/collection-de-plumes-delicates-sur-fond-noir-4004374/",
+        "user": "Evie Shaffer",
+        "site": "Pexel",
+        "siteurl": "https://www.pexels.com/"
+    },
+    {
+        "url": "https://images.pexels.com/photos/3075993/pexels-photo-3075993.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260",
+        "link": "https://www.pexels.com/fr-fr/photo/photo-d-horizon-la-nuit-3075993/",
+        "user": "Sanaan Mazhar",
+        "site": "Pexel",
+        "siteurl": "https://www.pexels.com/"
+    },
+    {
+        "url": "https://images.pexels.com/photos/1105666/pexels-photo-1105666.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260",
+        "link": "https://www.pexels.com/fr-fr/photo/personnes-au-concert-1105666/",
+        "user": "Vishnu R Nair",
+        "site": "Pexel",
+        "siteurl": "https://www.pexels.com/"
+    },
+    {
+        "url": "https://images.pexels.com/photos/1114900/pexels-photo-1114900.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260",
+        "link": "https://www.pexels.com/fr-fr/photo/eclipse-lunaire-1114900/",
+        "user": "Johannes Plenio",
+        "site": "Pexel",
+        "siteurl": "https://www.pexels.com/"
+    },
+    {
+        "url": "https://images.pexels.com/photos/1183021/pexels-photo-1183021.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260",
+        "link": "https://www.pexels.com/fr-fr/photo/montagnes-derriere-la-pleine-lune-1183021/",
+        "user": "Eberhard Grossgasteiger",
+        "site": "Pexel",
+        "siteurl": "https://www.pexels.com/"
+    },
+    {
+        "url": "https://images.pexels.com/photos/949193/pexels-photo-949193.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260",
+        "link": "https://www.pexels.com/fr-fr/photo/homme-en-veste-rouge-debout-a-l-exterieur-de-la-grotte-en-face-de-trois-montagnes-949193/",
+        "user": "S Migaj",
+        "site": "Pexel",
+        "siteurl": "https://www.pexels.com/"
+    }
+]
\ No newline at end of file
diff --git a/src/components/Background.vue b/src/components/Background.vue
index a61ea32..7a8d7c7 100644
--- a/src/components/Background.vue
+++ b/src/components/Background.vue
@@ -9,127 +9,20 @@
 </template>
 
 <script>
+import backgrounds from '../assets/backgrounds.json'
 export default {
   name: 'Background',
   data() {
     return {
       background_source: 0, // 0 => Random from the default list | 1 => Fixed from default list | 2 => Uploaded
       backgroundId: null, // The id of the backgroud in the default backgrounds list if the user choose one
-      theme: null,
       currentBackground: { // Data from the current loaded background
         url: null,
         link: null,
         author: null,
         site: null,
         siteurl: null
-      },
-      backgrounds: [
-        {
-            "url": "https://images.unsplash.com/photo-1516528387618-afa90b13e000?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1350&q=80",
-            "link": "https://unsplash.com/photos/jqgsM3B9Fpo",
-            "user": "Yoal Desurmont",
-            "site": "Unsplash",
-            "siteurl": "https://unsplash.com/?utm_source=urn:ietf:wg:oauth:2.0:oob&utm_medium=referral"
-        },
-        {
-            "url": "https://images.pexels.com/photos/1072179/pexels-photo-1072179.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260",
-            "link": "https://www.pexels.com/fr-fr/photo/feuilles-vertes-1072179/",
-            "user": "Cátia Matos",
-            "site": "Pexel",
-            "siteurl": "https://www.pexels.com/"
-        },
-        {
-            "url": "https://images.unsplash.com/photo-1531156992292-d36397ee9184?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1350&q=80",
-            "link": "https://unsplash.com/photos/_1UF_3TlKcQ",
-            "user": "Mykyta Martynenko",
-            "site": "Unsplash",
-            "siteurl": "https://unsplash.com/?utm_source=urn:ietf:wg:oauth:2.0:oob&utm_medium=referral"
-        },
-        {
-            "url": "https://images.unsplash.com/photo-1566050980594-f65e237a2e98?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max&ixid=eyJhcHBfaWQiOjEyNjI0MH0",
-            "link": "https://unsplash.com/photos/4iapyjvm714",
-            "user": "Andy Holmes",
-            "site": "Unsplash",
-            "siteurl": "https://unsplash.com/?utm_source=urn:ietf:wg:oauth:2.0:oob&utm_medium=referral"
-        },
-        {
-            "url": "https://images.unsplash.com/photo-1580218102234-490e83efd85b?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max&ixid=eyJhcHBfaWQiOjEyNjI0MH0",
-            "link": "https://unsplash.com/photos/HI5rD5zbU2o",
-            "user": "Willian Justen de Vasconcellos",
-            "site": "Unsplash",
-            "siteurl": "https://unsplash.com/?utm_source=urn:ietf:wg:oauth:2.0:oob&utm_medium=referral"
-        },
-        {
-            "url": "https://images.unsplash.com/photo-1597661905942-8d50e4ab6fc8?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max&ixid=eyJhcHBfaWQiOjEyNjI0MH0",
-            "link": "https://unsplash.com/photos/_F2T1OyB7K0",
-            "user": "Annie Spratt",
-            "site": "Unsplash",
-            "siteurl": "https://unsplash.com/?utm_source=urn:ietf:wg:oauth:2.0:oob&utm_medium=referral"
-        },
-        {
-            "url": "https://images.unsplash.com/photo-1578915424189-f3d4297b385a?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max&ixid=eyJhcHBfaWQiOjEyNjI0MH0",
-            "link": "https://unsplash.com/photos/jJ2pHxn5mXw",
-            "user": "Federico Bottos",
-            "site": "Unsplash",
-            "siteurl": "https://unsplash.com/?utm_source=urn:ietf:wg:oauth:2.0:oob&utm_medium=referral"
-        },
-        {
-            "url": "https://images.pexels.com/photos/3875821/pexels-photo-3875821.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260",
-            "link": "https://www.pexels.com/fr-fr/photo/vue-aerienne-des-batiments-de-la-ville-3875821/",
-            "user": "Peter Olexa",
-            "site": "Pexel",
-            "siteurl": "https://www.pexels.com/"
-        },
-        {
-            "url": "https://images.pexels.com/photos/4512439/pexels-photo-4512439.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260",
-            "link": "https://www.pexels.com/fr-fr/photo/volant-de-voiture-noir-pendant-la-nuit-4512439/",
-            "user": "Aleksandar Pasaric",
-            "site": "Pexel",
-            "siteurl": "https://www.pexels.com/"
-        },
-        {
-            "url": "https://images.pexels.com/photos/4004374/pexels-photo-4004374.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260",
-            "link": "https://www.pexels.com/fr-fr/photo/collection-de-plumes-delicates-sur-fond-noir-4004374/",
-            "user": "Evie Shaffer",
-            "site": "Pexel",
-            "siteurl": "https://www.pexels.com/"
-        },
-        {
-            "url": "https://images.pexels.com/photos/3075993/pexels-photo-3075993.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260",
-            "link": "https://www.pexels.com/fr-fr/photo/photo-d-horizon-la-nuit-3075993/",
-            "user": "Sanaan Mazhar",
-            "site": "Pexel",
-            "siteurl": "https://www.pexels.com/"
-        },
-        {
-            "url": "https://images.pexels.com/photos/1105666/pexels-photo-1105666.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260",
-            "link": "https://www.pexels.com/fr-fr/photo/personnes-au-concert-1105666/",
-            "user": "Vishnu R Nair",
-            "site": "Pexel",
-            "siteurl": "https://www.pexels.com/"
-        },
-        {
-            "url": "https://images.pexels.com/photos/1114900/pexels-photo-1114900.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260",
-            "link": "https://www.pexels.com/fr-fr/photo/eclipse-lunaire-1114900/",
-            "user": "Johannes Plenio",
-            "site": "Pexel",
-            "siteurl": "https://www.pexels.com/"
-        },
-        {
-            "url": "https://images.pexels.com/photos/1183021/pexels-photo-1183021.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260",
-            "link": "https://www.pexels.com/fr-fr/photo/montagnes-derriere-la-pleine-lune-1183021/",
-            "user": "Eberhard Grossgasteiger",
-            "site": "Pexel",
-            "siteurl": "https://www.pexels.com/"
-        },
-        {
-            "url": "https://images.pexels.com/photos/949193/pexels-photo-949193.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260",
-            "link": "https://www.pexels.com/fr-fr/photo/homme-en-veste-rouge-debout-a-l-exterieur-de-la-grotte-en-face-de-trois-montagnes-949193/",
-            "user": "S Migaj",
-            "site": "Pexel",
-            "siteurl": "https://www.pexels.com/"
-        },
-    ],
+      }
     };
   },
   methods: {
@@ -138,7 +31,7 @@ export default {
      * in the default background list
      */
     setBackgroundFromId: function(id) {
-        let bg = this.backgrounds[id];
+        let bg = backgrounds[id];
 
         this.currentBackground.url = bg.url;
         this.currentBackground.link = bg.link;
@@ -164,7 +57,7 @@ export default {
      * default background list
      */
     getRandomIdFromDefaultList: function() {
-      let nbBackgroundsInList = this.backgrounds.length;
+      let nbBackgroundsInList = backgrounds.length;
       let randomID = Math.floor(Math.random() * nbBackgroundsInList);
       return randomID;
     },