A3lfyr · A3lfyr · May 3, 2021 · May 3, 2021 · May 3, 2021 · May 3, 2021
diff --git 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>
+</html>
diff --git a/src/App.vue b/src/App.vue
@@ -23,7 +23,7 @@
       <Background />
     </aside>
 
-    <aside class="center upped">
+    <aside class="center">
       <Quotes />
     </aside>
 
@@ -55,7 +55,11 @@
   }
 </script>
 
-<style scope>
+<style>
+  @import "./assets/css/colors.css";
+  @import "./assets/css/style.css";
+
+
   #app {
     margin: 0;
     padding: 0;
@@ -67,12 +71,12 @@
     min-height: 100vh;
     flex-direction: column;
     margin: 0;
-    padding: 1vh;
   }
 
   header, footer, aside {
     display: flex;
     flex: 1;
+    padding: 1vh;
   }
 
   header {
@@ -98,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 {
@@ -113,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>
diff --git a/src/assets/backgrounds.json 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/"
+    }
+]
diff --git a/src/assets/css/colors.css 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: #FCFDFF;
+    --text-darker: #C5C6C6;
+
+    --primary: #f07d1b
+}
diff --git a/src/assets/css/style.css 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
@@ -1,58 +1,105 @@
+<template>
+  <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>
+  </span>
+</template>
+
 <script>
+import backgrounds from '../assets/backgrounds.json'
 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
+      currentBackground: { // Data from the current loaded background
+        url: null,
+        link: null,
+        author: null,
+        site: null,
+        siteurl: null
+      }
     };
   },
   methods: {
-    setBackground: 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;
+    /**
+     * Set a background from an ID 
+     * in the default background list
+     */
+    setBackgroundFromId: function(id) {
+        let bg = backgrounds[id];
 
-        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 = 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() {
-    this.setBackground(0);
-        console.log(this.backgrounds)
+    switch (this.background_source) {
+      case 0: // Random from the default list
+        if (sessionStorage["bg_url"] !== undefined) {
+          this.loadSessionStorageBackground();
+        } else {
+          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>
-
+  a, span {
+    transition-duration: 0.2s;
+    text-decoration: none;
+    color: var(--text-darker);
+    font-size: 0.8rem;
+  }
+  a:hover {
+    color: var(--text);
+  }
 </style>
diff --git 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
@@ -1,3 +1,3 @@
 <template>
-  <p>Quotes</p>
+  <span>Quotes</span>
 </template>