diff --git a/NP_Custom_Templates/customer_templates/Medisoft/homepage.html.liquid b/NP_Custom_Templates/customer_templates/Medisoft/homepage.html.liquid index 547510d4..0935d79f 100644 --- 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 %}
diff --git a/NP_Custom_Templates/templates/dashboard.html.liquid b/NP_Custom_Templates/templates/dashboard.html.liquid index f5c8e7df..0c20f3ac 100644 --- a/NP_Custom_Templates/templates/dashboard.html.liquid +++ b/NP_Custom_Templates/templates/dashboard.html.liquid @@ -26,3 +26,5 @@
{% include "footer" %} + +current_page: "/app/user-guides" \ No newline at end of file diff --git a/NP_Root_Startpage/.gitignore b/NP_Root_Startpage/.gitignore new file mode 100644 index 00000000..9c3cc990 --- /dev/null +++ b/NP_Root_Startpage/.gitignore @@ -0,0 +1,3 @@ +node_modules/ +dist/ +.cache/ \ No newline at end of file diff --git a/NP_Root_Startpage/CNAME b/NP_Root_Startpage/CNAME new file mode 100644 index 00000000..000ea0d5 --- /dev/null +++ b/NP_Root_Startpage/CNAME @@ -0,0 +1 @@ +root.reyes.cool \ No newline at end of file diff --git a/NP_Root_Startpage/LICENSE b/NP_Root_Startpage/LICENSE new file mode 100644 index 00000000..d7ffb40f --- /dev/null +++ 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. diff --git a/NP_Root_Startpage/README.md b/NP_Root_Startpage/README.md new file mode 100644 index 00000000..ec9306d1 --- /dev/null +++ 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: "", + icon: "", + 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: ``. + +To use 24 hour time simply change the time section of `app.js` to +``` +// Update the Time + currentTime.innerHTML = `${currentHour}:${currentMinute}`; +``` diff --git a/NP_Root_Startpage/app.js b/NP_Root_Startpage/app.js new file mode 100644 index 00000000..59a977d6 --- /dev/null +++ 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(); diff --git a/NP_Root_Startpage/assets/header.png b/NP_Root_Startpage/assets/header.png new file mode 100644 index 00000000..ac3e7f56 Binary files /dev/null and b/NP_Root_Startpage/assets/header.png differ diff --git a/NP_Root_Startpage/index.html b/NP_Root_Startpage/index.html new file mode 100644 index 00000000..85c2da90 --- /dev/null +++ b/NP_Root_Startpage/index.html @@ -0,0 +1,32 @@ + + + + + + + + + root: ~# + + + + + + +
+
+

Hello there, John Doe.

+

Today is Monday 1, January 2000.

+
+

00:00 PM

+
+
+ + + diff --git a/NP_Root_Startpage/styles.css b/NP_Root_Startpage/styles.css new file mode 100644 index 00000000..7d32ad1f --- /dev/null +++ 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; +} diff --git a/NP_Startpage/index_copy(old).html b/NP_Startpage/index_copy(old).html new file mode 100644 index 00000000..d7e2fd17 --- /dev/null +++ b/NP_Startpage/index_copy(old).html @@ -0,0 +1,100 @@ + + + + + + + Northpass Starter Page + + + + + +
+

+
+
+
+
+
+
+
+
+ B/G Peaks +  Demo Links  
 +
+ Pixel Admin + Pixel Academy + Pixel app + Custom Templates + Compass + Freshworks +
+
+
+
+
+ Green Peaks +  Tools  
+
+ Gong + Hubspot + Sales Nav + LinkedIn + Zoominfo + Vidyard + Swag Box + Jira Pipeline +
+
+
+
+
+ Blue Peak +  Internal  
+
+ Gmail + Calendar + Zenefits + Growthpass + Northpass University + Chili Piper + Jira Pipeline +
+
+
+
+
+ White Peak +  Dev Resources  
+
+ Dev Hub + Support +
+
+
+ + +