Added Initial Files

.gitignore

@@ -0,0 +1 @@
+node_modules

css/style.comp.css

@@ -0,0 +1,175 @@
+:root {
+  --fsg: 150px;
+  --fsm: 85px;
+  --fss: 30px;
+  --fses: 18px;
+  --bg: #1f2229;
+  --fg: #d8dee9;
+  --qbg: #2c323d;
+  --blue: #5e81ac; }
+
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+  font-family: 'Proxima nova', monospace;
+  color: var(--fg);
+  font-size: 13.5px;
+  transition: 0.2s ease-in-out; }
+
+body {
+  width: 100vw;
+  height: 100vh;
+  background-color: var(--bg);
+  display: flex;
+  align-items: center;
+  justify-content: center; }
+
+.container {
+  width: 150vh;
+  height: 85vh;
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  grid-template-rows: repeat(4, 1fr);
+  grid-gap: 30px;
+  padding: 20px; }
+  .container > * {
+    width: 100%; }
+
+.card {
+  background-color: var(--qbg);
+  box-shadow: 0 5px 7px rgba(0, 0, 0, 0.35);
+  border-radius: 5px; }
+  .card:hover {
+    transform: translateY(-0.3rem);
+    box-shadow: 0 20px 30px rgba(0, 0, 0, 0.35); }
+
+.hour {
+  grid-row: 1 / span 2;
+  grid-column: 1 / span 2;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center; }
+
+.secon {
+  grid-column: 3 / span 2;
+  grid-row: 1 / span 2;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center; }
+  .secon__date {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-top: 30px; }
+  .secon__weather {
+    display: flex;
+    align-items: center;
+    justify-content: center; }
+
+.clock {
+  display: flex;
+  align-items: center;
+  justify-content: center; }
+
+#hour,
+#separator,
+#minutes {
+  font-size: var(--fsg);
+  font-weight: bolder; }
+
+#month,
+#day {
+  font-size: var(--fsm);
+  font-weight: bold; }
+
+#day {
+  margin-left: 20px; }
+
+#greetings {
+  font-size: var(--fses);
+  font-weight: lighter; }
+
+.weather-icon img {
+  width: 80px;
+  height: 80px; }
+
+.temperature-value p {
+  font-size: var(--fss);
+  font-weight: bolder;
+  margin-left: 15px; }
+
+.temperature-description p {
+  font-size: var(--fss);
+  margin-left: 15px; }
+
+.qlink {
+  grid-row: 3 / span 2;
+  grid-column: 1 / span 2;
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-template-rows: repeat(2, 1fr);
+  grid-gap: 30px;
+  padding: 30px; }
+  .qlink__icon {
+    width: 26px;
+    height: 26px; }
+  .qlink__link {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+    background-color: var(--qbg);
+    box-shadow: 0 5px 7px rgba(0, 0, 0, 0.35);
+    border-radius: 5px; }
+    .qlink__link-1 {
+      grid-row: 1;
+      grid-column: 1; }
+    .qlink__link-2 {
+      grid-row: 1;
+      grid-column: 2; }
+    .qlink__link-3 {
+      grid-row: 2;
+      grid-column: 1; }
+    .qlink__link-4 {
+      grid-row: 2;
+      grid-column: 2; }
+    .qlink__link-5 {
+      grid-row: 1;
+      grid-column: 3; }
+    .qlink__link-6 {
+      grid-row: 2;
+      grid-column: 3; }
+    .qlink__link:hover {
+      background-color: var(--blue);
+      transform: translateY(-0.3rem); }
+      .qlink__link:hover svg {
+        stroke: var(--bg); }
+
+.qlist {
+  display: flex;
+  align-items: center;
+  flex-direction: column; }
+  .qlist__3 {
+    grid-column: 3;
+    grid-row: 3 / span 2; }
+  .qlist__4 {
+    grid-column: 4;
+    grid-row: 3 / span 2; }
+  .qlist__head {
+    margin-top: 30px;
+    margin-bottom: 20px;
+    width: 30px;
+    height: 30px; }
+  .qlist__link {
+    text-decoration: none;
+    font-size: var(--fses);
+    margin-top: 1px;
+    padding: 10px 12px;
+    border-radius: 5px;
+    font-weight: bold; }
+    .qlist__link:hover {
+      background-color: var(--blue);
+      color: var(--bg); }

css/style.css

@@ -0,0 +1 @@
+:root{--fsg: 150px;--fsm: 85px;--fss: 30px;--fses: 18px;--bg: #1f2229;--fg: #d8dee9;--qbg: #2c323d;--blue: #5e81ac}*{margin:0;padding:0;-webkit-box-sizing:border-box;box-sizing:border-box;font-family:'Proxima nova', monospace;color:var(--fg);font-size:13.5px;-webkit-transition:0.2s ease-in-out;transition:0.2s ease-in-out}body{width:100vw;height:100vh;background-color:var(--bg);display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.container{width:150vh;height:85vh;display:grid;grid-template-columns:repeat(4, 1fr);grid-template-rows:repeat(4, 1fr);grid-gap:30px;padding:20px}.container>*{width:100%}.card{background-color:var(--qbg);-webkit-box-shadow:0 5px 7px rgba(0,0,0,0.35);box-shadow:0 5px 7px rgba(0,0,0,0.35);border-radius:5px}.card:hover{-webkit-transform:translateY(-0.3rem);transform:translateY(-0.3rem);-webkit-box-shadow:0 20px 30px rgba(0,0,0,0.35);box-shadow:0 20px 30px rgba(0,0,0,0.35)}.hour{grid-row:1 / span 2;grid-column:1 / span 2;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.secon{grid-column:3 / span 2;grid-row:1 / span 2;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.secon__date{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;margin-top:30px}.secon__weather{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.clock{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}#hour,#separator,#minutes{font-size:var(--fsg);font-weight:bolder}#month,#day{font-size:var(--fsm);font-weight:bold}#day{margin-left:20px}#greetings{font-size:var(--fses);font-weight:lighter}.weather-icon img{width:80px;height:80px}.temperature-value p{font-size:var(--fss);font-weight:bolder;margin-left:15px}.temperature-description p{font-size:var(--fss);margin-left:15px}.qlink{grid-row:3 / span 2;grid-column:1 / span 2;display:grid;grid-template-columns:repeat(3, 1fr);grid-template-rows:repeat(2, 1fr);grid-gap:30px;padding:30px}.qlink__icon{width:26px;height:26px}.qlink__link{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;width:100%;background-color:var(--qbg);-webkit-box-shadow:0 5px 7px rgba(0,0,0,0.35);box-shadow:0 5px 7px rgba(0,0,0,0.35);border-radius:5px}.qlink__link-1{grid-row:1;grid-column:1}.qlink__link-2{grid-row:1;grid-column:2}.qlink__link-3{grid-row:2;grid-column:1}.qlink__link-4{grid-row:2;grid-column:2}.qlink__link-5{grid-row:1;grid-column:3}.qlink__link-6{grid-row:2;grid-column:3}.qlink__link:hover{background-color:var(--blue);-webkit-transform:translateY(-0.3rem);transform:translateY(-0.3rem)}.qlink__link:hover svg{stroke:var(--bg)}.qlist{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.qlist__3{grid-column:3;grid-row:3 / span 2}.qlist__4{grid-column:4;grid-row:3 / span 2}.qlist__head{margin-top:30px;margin-bottom:20px;width:30px;height:30px}.qlist__link{text-decoration:none;font-size:var(--fses);margin-top:1px;padding:10px 12px;border-radius:5px;font-weight:bold}.qlist__link:hover{background-color:var(--blue);color:var(--bg)}

index.html

@@ -0,0 +1,120 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8" />
+        <title>🍱</title>
+        <link rel="stylesheet" href="css/style.css" />
+        <link rel=" shortcut icon" type="image/png" href="icons/favicon.png" />
+        <script src="https://unpkg.com/feather-icons"></script>
+    </head>
+    <body>
+        <div class="container">
+            <div class="hour">
+                <div class="clock">
+                    <div id="hour"></div>
+                    <div id="separator"></div>
+                    <div id="minutes"></div>
+                </div>
+                <div id="greetings"></div>
+            </div>
+            <div class="secon">
+                <div class="secon__date">
+                    <div id="month"></div>
+                    <div id="day"></div>
+                </div>
+                <div class="secon__weather">
+                    <div class="weather-icon">
+                        <img src="icons/unknown.png" />
+                    </div>
+                    <div class="temperature-value">
+                        <p>- °<span>c</span></p>
+                    </div>
+                    <div class="temperature-description">
+                        <p></p>
+                    </div>
+                </div>
+            </div>
+            <div class="qlink">
+                <a
+                    href="https://github.com/"
+                    target="blank"
+                    class="qlink__link qlink__link-1"
+                >
+                    <i class="qlink__icon" data-feather="github"></i>
+                </a>
+                <a
+                    target="blank"
+                    href="https://outlook.live.com/mail/inbox"
+                    class="qlink__link qlink__link-2"
+                >
+                    <i class="qlink__icon" data-feather="mail"></i>
+                </a>
+                <a
+                    target="blank"
+                    href="https://calendar.google.com/calendar/r"
+                    class="qlink__link qlink__link-3"
+                >
+                    <i class="qlink__icon" data-feather="calendar"></i>
+                </a>
+                <a
+                    target="blank"
+                    href="https://flipboard.com/"
+                    class="qlink__link qlink__link-4"
+                >
+                    <i class="qlink__icon" data-feather="bookmark"></i>
+                </a>
+                <a href="https://columns.app" class="qlink__link qlink__link-5">
+                    <i class="qlink__icon" data-feather="trello"></i>
+                </a>
+                <a
+                    href="https://www.youtube.com/"
+                    class="qlink__link qlink__link-6"
+                >
+                    <i class="qlink__icon" data-feather="youtube"></i>
+                </a>
+            </div>
+
+            <div class="card qlist qlist__3">
+                <i class="qlist__head" data-feather="music"></i>
+                <a
+                    href="https://www.youtube.com/watch?v=UZ7oOhhPEWU&list=PLSJyylnigxYQ9AYrgCVcvHxH2YduVwd_a"
+                    class="qlist__link"
+                    >Inspirational</a
+                >
+                <a
+                    href="https://www.youtube.com/watch?v=UdfCcWR2KOY&list=PLSJyylnigxYQpgF9CrihQNrB5VXv4Lk5S"
+                    class="qlist__link"
+                    >Classic</a
+                >
+                <a
+                    href="https://www.youtube.com/watch?v=fEzqndjwwIA&list=PLSJyylnigxYRheFSqhX0vu8aI5MtSoHrW"
+                    class="qlist__link"
+                    >Oldies</a
+                >
+                <a
+                    href="https://www.youtube.com/watch?v=9vWNauaZAgg&list=PLSJyylnigxYRKPDiUR770cv69_ziOIxwb"
+                    class="qlist__link"
+                    >Rock</a
+                >
+            </div>
+
+            <div class="card qlist qlist__4">
+                <i class="qlist__head" data-feather="coffee"></i>
+                <a href="https://www.linkedin.com" class="qlist__link"
+                    >LinkedIn</a
+                >
+                <a href="https://dribbble.com/" class="qlist__link">Dribble</a>
+                <a href="https://www.udemy.com/" class="qlist__link">Udemy</a>
+                <a href="https://www.figma.com/files/recent" class="qlist__link"
+                    >Figma</a
+                >
+            </div>
+        </div>
+        <script src="js/time.js"></script>
+        <script src="js/weather.js"></script>
+        <script src="js/greeting.js"></script>
+        <script>
+            feather.replace();
+        </script>
+    </body>
+</html>

js/greeting.js

@@ -0,0 +1,18 @@
+var today = new Date();
+var Hr = today.getHours();
+// You can change your name here
+var name = 'Mike';
+var lateTxt = 'Go to Sleep! ';
+var morningTxt = 'Good morning! ';
+var afterTxt = 'Good afternoon ';
+var evenTxt = 'Good evening ';
+
+if (Hr >= 0 && Hr < 6) {
+    document.getElementById('greetings').innerText = lateTxt + name;
+} else if (Hr >= 6 && Hr < 12) {
+    document.getElementById('greetings').innerText = morningTxt + name;
+} else if (Hr >= 12 && Hr < 17) {
+    document.getElementById('greetings').innerText = afterTxt + name;
+} else {
+    document.getElementById('greetings').innerText = evenTxt + name;
+}

js/time.js

@@ -0,0 +1,32 @@
+window.onload = displayClock();
+function displayClock() {
+    const monthNames = [
+        'Jan',
+        'Feb',
+        'Mar',
+        'Apr',
+        'May',
+        'Jun',
+        'Jul',
+        'Aug',
+        'Sep',
+        'Oct',
+        'Nov',
+        'Dec',
+    ];
+
+    var d = new Date();
+    var mm = monthNames[d.getMonth()];
+    var dd = d.getDate();
+    var min = (mins = ('0' + d.getMinutes()).slice(-2));
+    var hh = d.getHours();
+
+    document.getElementById('hour').innerText = hh;
+    document.getElementById('separator').innerHTML = ' : ';
+    document.getElementById('minutes').innerText = min;
+
+    document.getElementById('month').innerText = mm;
+    document.getElementById('day').innerText = dd;
+
+    setTimeout(displayClock, 1000);
+}

js/weather.js

@@ -0,0 +1,55 @@
+// Select Elements
+
+const iconElement = document.querySelector('.weather-icon');
+const tempElement = document.querySelector('.temperature-value p');
+const descElement = document.querySelector('.temperature-description p');
+
+// App data
+
+const weather = {};
+weather.temperature = {
+    unit: 'celsius',
+};
+
+const KELVIN = 273;
+const key = 'aa5b0a76dfbf87441928fb3cc32d3d69';
+
+setPosition();
+
+function setPosition(position) {
+    let latitude = 21.0265;
+    let longitude = -89.6765;
+    console.log('What happens here');
+
+    console.log(latitude);
+    console.log(longitude);
+
+    getWeather(latitude, longitude);
+    console.log('What happens here');
+}
+
+function getWeather(latitude, longitude) {
+    let api = `https://api.openweathermap.org/data/2.5/weather?lat=${latitude}&lon=${longitude}&appid=${key}`;
+
+    console.log(api);
+
+    fetch(api)
+        .then(function (response) {
+            let data = response.json();
+            return data;
+        })
+        .then(function (data) {
+            weather.temperature.value = Math.floor(data.main.temp - KELVIN);
+            weather.description = data.weather[0].description;
+            weather.iconId = data.weather[0].icon;
+        })
+        .then(function () {
+            displayWeather();
+        });
+}
+
+function displayWeather() {
+    iconElement.innerHTML = `<img src="icons/${weather.iconId}.png"/>`;
+    tempElement.innerHTML = `${weather.temperature.value}°<span>C</span>`;
+    descElement.innerHTML = weather.description;
+}

package.json

@@ -0,0 +1,23 @@
+{
+  "name": "StartPoint",
+  "version": "1.0.0",
+  "description": "A Simple Startpage",
+  "main": "index.js",
+  "scripts": {
+    "watch:sass": "node-sass sass/main.scss css/style.css -w",
+    "start": "npm-run-all --parallel watch:sass",
+    "compile:sass": "node-sass sass/main.scss css/style.comp.css",
+    "prefix:css": "postcss --use autoprefixer -b 'last 10 versions' css/style.comp.css -o css/style.prefix.css",
+    "compress:css": "node-sass css/style.prefix.css css/style.css --output-style compressed",
+    "build:css": "npm-run-all compile:sass prefix:css compress:css"
+  },
+  "author": "Miguel R. Ávila",
+  "license": "ISC",
+  "devDependencies": {
+    "autoprefixer": "^7.1.4",
+    "concat": "^1.0.3",
+    "node-sass": "^4.5.3",
+    "npm-run-all": "^4.1.1",
+    "postcss-cli": "^4.1.1"
+  }
+}

sass/main.scss

@@ -0,0 +1,225 @@
+:root {
+    --fsg: 150px;
+    --fsm: 85px;
+    --fss: 30px;
+    --fses: 18px;
+    --bg: #1f2229;
+    --fg: #d8dee9;
+    --qbg: #2c323d;
+    --blue: #5e81ac;
+}
+
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+    font-family: 'Proxima nova', monospace;
+    color: var(--fg);
+    font-size: 13.5px;
+
+    transition: 0.2s ease-in-out;
+}
+
+body {
+    width: 100vw;
+    height: 100vh;
+    background-color: var(--bg);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+.container {
+    width: 150vh;
+    height: 85vh;
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    grid-template-rows: repeat(4, 1fr);
+
+    grid-gap: 30px;
+    padding: 20px;
+
+    & > * {
+        width: 100%;
+    }
+}
+
+.card {
+    background-color: var(--qbg);
+    box-shadow: 0 5px 7px rgba(#000000, 0.35);
+    border-radius: 5px;
+
+    &:hover {
+        transform: translateY(-0.3rem);
+        box-shadow: 0 20px 30px rgba(#000000, 0.35);
+    }
+}
+
+.hour {
+    grid-row: 1 / span 2;
+    grid-column: 1 / span 2;
+
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+}
+
+.secon {
+    grid-column: 3 / span 2;
+    grid-row: 1 / span 2;
+
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+
+    &__date {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        margin-top: 30px;
+    }
+    &__weather {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+}
+
+.clock {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+#hour,
+#separator,
+#minutes {
+    font-size: var(--fsg);
+    font-weight: bolder;
+}
+
+#month,
+#day {
+    font-size: var(--fsm);
+    font-weight: bold;
+}
+#day {
+    margin-left: 20px;
+}
+
+#greetings {
+    font-size: var(--fses);
+    font-weight: lighter;
+}
+
+.weather-icon img {
+    width: 80px;
+    height: 80px;
+}
+
+.temperature {
+    &-value p {
+        font-size: var(--fss);
+        font-weight: bolder;
+        margin-left: 15px;
+    }
+    &-description p {
+        font-size: var(--fss);
+        margin-left: 15px;
+    }
+}
+
+.qlink {
+    grid-row: 3 / span 2;
+    grid-column: 1 / span 2;
+
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    grid-template-rows: repeat(2, 1fr);
+
+    grid-gap: 30px;
+    padding: 30px;
+
+    &__icon {
+        width: 26px;
+        height: 26px;
+    }
+
+    &__link {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        width: 100%;
+        background-color: var(--qbg);
+        box-shadow: 0 5px 7px rgba(#000000, 0.35);
+        border-radius: 5px;
+        &-1 {
+            grid-row: 1;
+            grid-column: 1;
+        }
+        &-2 {
+            grid-row: 1;
+            grid-column: 2;
+        }
+        &-3 {
+            grid-row: 2;
+            grid-column: 1;
+        }
+        &-4 {
+            grid-row: 2;
+            grid-column: 2;
+        }
+        &-5 {
+            grid-row: 1;
+            grid-column: 3;
+        }
+        &-6 {
+            grid-row: 2;
+            grid-column: 3;
+        }
+
+        &:hover {
+            background-color: var(--blue);
+            transform: translateY(-0.3rem);
+
+            & svg {
+                stroke: var(--bg);
+            }
+        }
+    }
+}
+
+.qlist {
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+
+    &__3 {
+        grid-column: 3;
+        grid-row: 3 / span 2;
+    }
+    &__4 {
+        grid-column: 4;
+        grid-row: 3 / span 2;
+    }
+    &__head {
+        margin-top: 30px;
+        margin-bottom: 20px;
+        width: 30px;
+        height: 30px;
+    }
+    &__link {
+        text-decoration: none;
+        font-size: var(--fses);
+        margin-top: 1px;
+        padding: 10px 12px;
+        border-radius: 5px;
+        font-weight: bold;
+
+        &:hover {
+            background-color: var(--blue);
+            color: var(--bg);
+        }
+    }
+}