new start page

2022-06-06 14:22:42 -04:00
parent cd447e3a37
commit 392eb275eb
11 changed files with 530 additions and 1 deletions
--- a/NP_Custom_Templates/customer_templates/Medisoft/homepage.html.liquid
+++ b/NP_Custom_Templates/customer_templates/Medisoft/homepage.html.liquid
@ -1,4 +1,4 @@
-{% include "header" current_page_orgin: "false" %}
+{% include "header", current_page_orgin: "false" %}
 {% include "course_version_outdated_alert", courses: courses.featured %}
 <main class="np-main np-homepage">
  <div class="np-homepage-hero">
--- a/NP_Custom_Templates/templates/dashboard.html.liquid
+++ b/NP_Custom_Templates/templates/dashboard.html.liquid
@ -26,3 +26,5 @@
  </div>
 </main>
 {% include "footer" %}
+
+current_page: "/app/user-guides"
--- a/NP_Root_Startpage/.gitignore
+++ b/NP_Root_Startpage/.gitignore
@ -0,0 +1,3 @@
+node_modules/
+dist/
+.cache/
--- a/NP_Root_Startpage/CNAME
+++ b/NP_Root_Startpage/CNAME
@ -0,0 +1 @@
+root.reyes.cool
--- a/NP_Root_Startpage/LICENSE
+++ b/NP_Root_Startpage/LICENSE
@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2020 Jorge Reyes
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
--- a/NP_Root_Startpage/README.md
+++ b/NP_Root_Startpage/README.md
@ -0,0 +1,63 @@
+![](./assets/header.png)
+
+### Root is a start-page aimed to simplicity and elegance
+
+This project is blazing fast :zap:, it only contains an html, css and javascript files.
+
+## Customizing
+
+Root was created to be lightweight, fast and easy to customize.
+
+### Changin Colors
+
+To change the colors used in the startpage edit `styles.css`.
+
+```css
+:root {
+  --primary: #dd2e44;
+  --text-light: #eeeeee;
+  --background: #1e1c21;
+  --background-light: #333138;
+}
+```
+
+### Changin Name and Adding Custom Cards
+
+> This project uses [Remix Icons](https://remixicon.com/).
+
+To change the default name and edit the cards, edit `app.js`. It should look something like this:
+
+```js
+const NAME = "John Doe";
+
+const CARDS = [
+  {
+    name: "Twitter",
+    icon: "ri-twitter-fill",
+    link: "https://twitter.com",
+  },
+  {
+    name: "Github",
+    icon: "ri-github-fill",
+    link: "https://github.com/",
+  },
+];
+```
+
+To add a new card, just append a new object to the `CARDS` constant. The object should look something like this:
+
+```js
+{
+  name: "<Webpage Name>",
+  icon: "<Icon Class-Name>",
+  link: "<Webpage Link>"
+},
+```
+
+> To get the icon class-name, just go to [Remix Icons](https://remixicon.com/), select the desired icon. You should see something like this: `<i class="this-is-the-class-name"></i>`.
+
+To use 24 hour time simply change the time section of `app.js` to
+```
+// Update the Time
+  currentTime.innerHTML = `${currentHour}:${currentMinute}`;
+```
--- a/NP_Root_Startpage/app.js
+++ b/NP_Root_Startpage/app.js
@ -0,0 +1,164 @@
+/*****************/
+/* EDITABLE INFO */
+/*****************/
+
+/* -------------------------------------------------------- */
+
+const NAME = "Reyes";
+
+const CARDS = [
+  {
+    name: "Apple Music",
+    icon: "ri-music-2-fill",
+    link: "https://music.apple.com/us/browse",
+  },
+  {
+    name: "Reddit",
+    icon: "ri-reddit-fill",
+    link: "https://www.reddit.com/",
+  },
+  {
+    name: "Figma",
+    icon: "ri-palette-fill",
+    link: "https://www.figma.com/",
+  },
+  {
+    name: "Github",
+    icon: "ri-github-fill",
+    link: "https://github.com/",
+  },
+  {
+    name: "Twitter",
+    icon: "ri-twitter-fill",
+    link: "https://twitter.com",
+  },
+  {
+    name: "Dribbble",
+    icon: "ri-dribbble-fill",
+    link: "https://dribbble.com/",
+  },
+  {
+    name: "Hashnode",
+    icon: "ri-hashtag",
+    link: "https://hashnode.com/",
+  },
+  {
+    name: "CodeSandbox",
+    icon: "ri-cloud-fill",
+    link: "https://codesandbox.io/dashboard/",
+  },
+  {
+    name: "YouTube",
+    icon: "ri-youtube-fill",
+    link: "https://www.youtube.com/",
+  },
+  {
+    name: "LinkedIn",
+    icon: "ri-linkedin-fill",
+    link: "https://www.linkedin.com/",
+  },
+  {
+    name: "Gmail",
+    icon: "ri-google-fill",
+    link: "https://mail.google.com/",
+  },
+];
+
+/* -------------------------------------------------------- */
+
+/******************/
+/* CLOCK FUNCTION */
+/******************/
+
+const DAYS = [
+  "Sunday",
+  "Monday",
+  "Tuesday",
+  "Wednesday",
+  "Thursday",
+  "Friday",
+  "Saturday",
+];
+
+const MONTHS = [
+  "January",
+  "February",
+  "March",
+  "April",
+  "May",
+  "June",
+  "July",
+  "August",
+  "September",
+  "October",
+  "November",
+  "December",
+];
+
+const updateDate = () => {
+  // Create a new Date object and get the complete Date/Time information
+  const completeDate = new Date();
+
+  // Time Variables
+  let currentHour = formatDigit(completeDate.getHours());
+  let currentMinute = formatDigit(completeDate.getMinutes());
+
+  // Date Variables
+  let currentDay = completeDate.getDay();
+  let currentNumber = completeDate.getDate();
+  let currentMonth = completeDate.getMonth();
+  let currentYear = completeDate.getFullYear();
+
+  // Update the Time
+  currentTime.innerHTML = `${
+    currentHour % 12 == 0 ? "12" : currentHour % 12
+  }:${currentMinute} ${currentHour > 11 ? "PM" : "AM"}`;
+
+  // Update the Date
+  currentDate.innerHTML = `${DAYS[currentDay]} ${currentNumber}, ${MONTHS[currentMonth]} ${currentYear}`;
+
+  // Create a Loop
+  setTimeout(() => {
+    updateDate();
+  }, 1000);
+};
+
+const formatDigit = (digit) => {
+  return digit > 9 ? `${digit}` : `0${digit}`;
+};
+
+/******************/
+/* CARDS FUNCTION */
+/******************/
+
+const printCards = () => {
+  for (const card of CARDS) {
+    let currentCard = document.createElement("a");
+    let currentCardText = document.createElement("p");
+    currentCardText.appendChild(document.createTextNode(card.name));
+    let currentCardIcon = document.createElement("i");
+    currentCardIcon.classList.add(card.icon);
+
+    // Style the Card Element
+    currentCard.classList.add("card");
+    currentCard.href = card.link;
+
+    // Style the Icon
+    currentCardIcon.classList.add("card__icon");
+
+    // Style the Text
+    currentCardText.classList.add("card__name");
+
+    currentCard.append(currentCardIcon);
+    currentCard.append(currentCardText);
+    cardContainer.appendChild(currentCard);
+  }
+};
+
+/****************/
+/* STARTER CODE */
+/****************/
+
+userName.innerHTML = NAME;
+printCards();
+updateDate();
--- a/NP_Root_Startpage/assets/header.png
+++ b/NP_Root_Startpage/assets/header.png
--- a/NP_Root_Startpage/index.html
+++ b/NP_Root_Startpage/index.html
@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link
+      href="https://cdn.jsdelivr.net/npm/remixicon@2.5.0/fonts/remixicon.css"
+      rel="stylesheet"
+    />
+
+    <title>root: ~#</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap"
+      rel="stylesheet"
+    />
+    <link rel="stylesheet" href="./styles.css" />
+  </head>
+  <body>
+    <header class="header">
+      <div>
+        <h1>Hello there, <span id="userName">John Doe</span>.</h1>
+        <p>Today is <span id="currentDate">Monday 1, January 2000</span>.</p>
+      </div>
+      <p id="currentTime">00:00 PM</p>
+    </header>
+    <main id="cardContainer"></main>
+    <script src="./app.js"></script>
+  </body>
+</html>
--- a/NP_Root_Startpage/styles.css
+++ b/NP_Root_Startpage/styles.css
@ -0,0 +1,143 @@
+/* Custom Variables | Color Scheme */
+
+:root {
+  --primary: #FFC759;
+  --text-light: #eeeeee;
+  --background: #191E29;
+  --background-light: #202633;
+}
+
+*,
+*::before,
+*::after {
+  margin: 0;
+  padding: 0;
+  box-sizing: inherit;
+}
+
+body {
+  color: var(--text-light);
+  font-family: 'Inter', sans-serif;
+
+  padding: 2rem 4rem;
+
+  background-color: var(--background);
+  box-sizing: border-box;
+}
+
+h1 {
+  font-size: 4rem;
+  font-weight: bold;
+}
+
+h1 > span {
+  color: var(--primary);
+}
+
+main {
+  margin-top: 4rem;
+
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+}
+
+.header {
+  font-weight: 400;
+  
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+#currentDate {
+  color: var(--primary);
+}
+
+#currentTime {
+  font-size: 4rem;
+  font-weight: 600;
+}
+
+@media screen and (max-width: 1250px) {
+  h1 {
+    display: none;
+  }
+
+  .header {
+    flex-direction: column-reverse;
+  }
+
+  #currentTime {
+    font-size: 3rem;
+    margin-bottom: 1rem;
+  }
+
+  #fullDate {
+    text-align: center;
+  }
+}
+
+.card:link,
+.card:visited {
+  color: white;
+  text-decoration: none;
+
+  margin: 1.2rem;
+  padding: 4rem 8rem;
+
+  background-color: var(--background-light);
+  border-radius: 15px;
+  border: 1px solid rgba(255,255,255,.05);
+
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  overflow: hidden;
+  cursor: pointer;
+  position: relative;
+
+  outline: none;
+  transition: 0.1s;
+}
+
+.card:hover,
+.card:focus {
+  border-color: var(--primary);
+  color: var(--primary);
+
+  transform: scale(1.02);
+}
+
+.card:focus > .card__name {
+  bottom: 0;
+}
+
+.card:hover > .card__name {
+  bottom: 0;
+}
+
+.card__icon {
+  font-size: 2rem;
+
+  padding: 1rem;
+
+  background-color: rgba(255, 255, 255, 0.05);
+  border-radius: 50%;
+
+  display: grid;
+  place-items: center;
+}
+
+.card__name {
+  font-weight: 400;
+
+  transform: translate(-50%, -50%);
+
+  position: absolute;
+  bottom: -25%;
+  left: 50%;
+
+  transition: 0.1s;
+}
--- a/NP_Startpage/index_copy(old).html
+++ b/NP_Startpage/index_copy(old).html
@ -0,0 +1,100 @@
+<!DOCTYPE html>
+<html>
+<head>
+<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
+<script src="main.js"></script>
+    <style>
+        @import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300&display=swap');
+        @import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300&display=swap');
+        </style>
+    <title>Northpass Starter Page</title>
+<link rel="stylesheet" href="style.css">
+<link rel="icon" href="images/np-logo-emoji.png" type="image/icon" sizes="32x32">
+</head>
+<body>
+    <img class="logo" src="images/NP-Logo-Primary-FC.png" alt="Northpass Logo">
+<div class="date">
+    <p id="todaysDate"></p>
+</div>
+<div class="row"></div>
+<div class="grid" id="grid"></div>
+<div class="row" style="display: flex; align-items: center; justify-content:center">
+</div>
+    <div class="column">
+        <div class="card">
+        <a href="https://app.northpass.com" onclick="window.open('https://app.northpass.com');
+                                                    window.open('https://getpixel.northpass.com/app');
+                                                    window.open('https://app.getpixel.io');
+                                                    window.open('https://www.northpass.com/blog/introducing-custom-templates');
+                                                    window.open('https://openacademy.compass.com/');
+                                                    window.open('https://academy.freshworks.com/');"
+                                                    target="_blank"><div class="card_header">
+                                                        <img class="icon" src="images/icons/NP-Peak-Pattern-Aurora-Sky.png" alt="B/G Peaks">
+                                                        &ensp;Demo Links&emsp;&emsp;</div></a>
+        <div class="row"></div>
+        <a href="https://app.northpass.com" target="_self">Pixel Admin</a>
+        <a href="https://getpixel.northpass.com/app" target="_self">Pixel Academy</a>
+        <a href="https://app.getpixel.io" target="_self">Pixel app</a>
+        <a href="https://www.northpass.com/blog/introducing-custom-templates" target="_self">Custom Templates</a>
+        <a href="https://openacademy.compass.com/" target="_self">Compass</a>
+        <a href="https://academy.freshworks.com/" target="_self">Freshworks</a>
+        </div>
+    </div>
+    <div class="column">
+        <div class="card">
+        <div class="card_header">
+            <img class="icon" src="images/icons/NP-Peak-Pattern-Aurora.png" alt="Green Peaks">
+            &ensp;Tools&emsp;&emsp;</div>
+        <div class="row"></div>
+        <a href="https://www.app.gong.io" target="_self">Gong</a>
+        <a href="https://www.hubspot.com" target="_self">Hubspot</a>
+        <a href="https://www.linkedin.com/sales/homepage" target="_self">Sales Nav</a>
+        <a href="https://www.linkedin.com/home/feed" target="_self">LinkedIn</a>
+        <a href="https://app.zoominfo.com" target="_self">Zoominfo</a>
+        <a href="https://https://secure.vidyard.com/organizations/227416/library" target="_self">Vidyard</a>
+        <a href="https://www.swagredeem.com/page/northpass" target="_self">Swag Box</a>
+	<a href="https://northpass.atlassian.net/jira/software/projects/NORMPIPE/boards/50" target="_self">Jira Pipeline</a>
+    </div>
+    </div>
+    <div class="column">
+        <div class="card">
+        <div class="card_header">
+            <img class="icon" src="images/icons/NP-Peak-Pattern-Sky.png" alt="Blue Peak">
+            &ensp;Internal&emsp;&emsp;</div>
+        <div class="row"></div>
+        <a href="https://www.gmail.com" target="_self">Gmail</a>
+        <a href="https://calendar.google.com" target="_self">Calendar</a>
+        <a href="https://secure.zenefits.com/dashboard/#/" target="_self">Zenefits</a>
+        <a href="https://northpass.latticehq.com/" target="_self">Growthpass</a>
+        <a href="https://employeeuniversity.northpass.com/app" target="_self">Northpass University</a>
+        <a href="https://northpass.na.chilipiper.com/meetings/home" target="_self">Chili Piper</a>
+	<a href="https://northpass.atlassian.net/jira/software/projects/NORMPIPE/boards/50" target="_self">Jira Pipeline</a>
+    </div>
+    </div>
+    <div class="column">
+        <div class="card">
+            <h5 class="card_header">
+                <img class="icon" src="images/icons/NP-Peak-Pattern-White.png" alt="White Peak">
+                &ensp;Dev Resources&emsp;&emsp;</h5>
+        <div class="row"></div>
+        <a href="https://developers.northpass.com" target="_self">Dev Hub</a>
+        <a href="https://support.northpass.com" target="_self">Support</a>
+    </div>
+    </div>
+<div class="bottom_row"></div>
+</body>
+</html>
+<script>
+    function getRandomSize(min, max) {
+        return Math.floor(Math.random() * (max - min) + min);
+    }
+        var times = 7;
+        for (var i = 0; i < times; i++) {
+            var fileNumber = getRandomSize(1, 158);
+            var imageName = "url('././images/northpass/northpass"+fileNumber+".jpg";
+            var div = document.createElement('div');
+            div.classList.add('item');
+            div.style.backgroundImage = imageName;
+            document.getElementById("grid").appendChild(div);
+    }
+    </script>