157 lines
97 KiB
Plaintext
157 lines
97 KiB
Plaintext
|
{% include "header" %}
|
||
|
|
<div class="np-homepage-hero" style="width: 100vw;">
|
||
|
|
<img class="np-homepage-hero-image"
|
||
|
|
src="{{ homepage.artwork_url }}"
|
||
|
|
alt="{{ homepage.headline }}"
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
{% include "sub_navigation" %}
|
||
|
|
<main class="np-main documentation np-subpage-container np-max-width">
|
||
|
|
<div class="documentation-header">
|
||
|
|
Documentation
|
||
|
|
</div>
|
||
|
|
<div class="row row-with-thumbnails" style="margin: 0;">
|
||
|
|
<div class="col-xs-12 col-sm-3 np-stretch-content course-card">
|
||
|
|
<a class="np-card" href="/app/faqs">
|
||
|
|
<div class="np-card-container" style="background: url(https://cdn.northpass.io/birchstreet/faqs.png)">
|
||
|
|
{%- comment -%} <h3 class="np-card-content-title">
|
||
|
|
FAQs
|
||
|
|
</h3> {%- endcomment -%}
|
||
|
|
</div>
|
||
|
|
</a>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
|
||
|
|
<div class="col-xs-12 col-sm-3 np-stretch-content course-card">
|
||
|
|
<a class="np-card" href="/app/quick-guides">
|
||
|
|
<div class="np-card-container" style="background: url(https://cdn.northpass.io/birchstreet/quick_guides.png)">
|
||
|
|
{%- comment -%} <h3 class="np-card-content-title">
|
||
|
|
Quick Guides
|
||
|
|
</h3> {%- endcomment -%}
|
||
|
|
</div>
|
||
|
|
</a>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="col-xs-12 col-sm-3 np-stretch-content course-card">
|
||
|
|
<a class="np-card" href="/app/user-manuals">
|
||
|
|
<div class="np-card-container" style="background: url(https://cdn.northpass.io/birchstreet/user_manuals.png)">
|
||
|
|
{%- comment -%} <h3 class="np-card-content-title">
|
||
|
|
User Manuals
|
||
|
|
</h3> {%- endcomment -%}
|
||
|
|
</div>
|
||
|
|
</a>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="col-xs-12 col-sm-3 np-stretch-content course-card">
|
||
|
|
<a class="np-card" href="/app/glossary">
|
||
|
|
<div class="np-card-container" style="background: url(https://cdn.northpass.io/birchstreet/glossary.png)">
|
||
|
|
{%- comment -%} <h3 class="np-card-content-title">
|
||
|
|
Glossary
|
||
|
|
</h3> {%- endcomment -%}
|
||
|
|
</div>
|
||
|
|
</a>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<div class="row row-with-thumbnails" style="margin: 0;">
|
||
|
|
<div class="col-xs-12 col-sm-3 np-stretch-content course-card">
|
||
|
|
<a class="np-card" href="courses/80f0dfab-a555-4eab-9dec-3a800d5e0149">
|
||
|
|
<div class="np-card-container" id="card-container">
|
||
|
|
<canvas id="5a247dfe1eb6465ea40f4adc68e5ea0a"></canvas>
|
||
|
|
{%- comment -%} <h3 class="np-card-content-title">
|
||
|
|
Account Payable
|
||
|
|
</h3> {%- endcomment -%}
|
||
|
|
</div>
|
||
|
|
</a>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</main>
|
||
|
|
|
||
|
|
<style>
|
||
|
|
|
||
|
|
canvas#\35 a247dfe1eb6465ea40f4adc68e5ea0a {
|
||
|
|
width: 100%;
|
||
|
|
height: 475px;
|
||
|
|
}
|
||
|
|
.np-sub-navigation{
|
||
|
|
width: 100vw;
|
||
|
|
}
|
||
|
|
|
||
|
|
.documentation-header{
|
||
|
|
display: flex;
|
||
|
|
font-size: 32px;
|
||
|
|
font-weight: 500;
|
||
|
|
margin-bottom: 25px;
|
||
|
|
width: 100%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.course-card{
|
||
|
|
margin-bottom: 32px;
|
||
|
|
}
|
||
|
|
.bqUfwS{
|
||
|
|
display:none !important;
|
||
|
|
}
|
||
|
|
.np-card{
|
||
|
|
margin-bottom: 0;
|
||
|
|
text-decoration: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
.np-card-container{
|
||
|
|
align-items: center;
|
||
|
|
/* background: url("{{ current_school.logo_url }}"); */
|
||
|
|
background-repeat: no-repeat;
|
||
|
|
background-size: contain !important;
|
||
|
|
height: 275px;
|
||
|
|
justify-content: center;
|
||
|
|
}
|
||
|
|
|
||
|
|
.np-card-container:hover{
|
||
|
|
background-color: #92d050;
|
||
|
|
}
|
||
|
|
|
||
|
|
.np-card-content-title{
|
||
|
|
color: #ffffff;
|
||
|
|
font-size: 2rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.doc-button{
|
||
|
|
border-radius: 20px;
|
||
|
|
height: 20px;
|
||
|
|
width: 30%;
|
||
|
|
}
|
||
|
|
|
||
|
|
@media screen and (min-width: 768px){
|
||
|
|
.documentation-header{
|
||
|
|
margin-left: 64px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
<script>
|
||
|
|
var images=['data:image/bmp;base64,iVBORw0KGgoAAAANSUhEUgAABAAAAAQACAYAAAB/HSuDAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAP+lSURBVHhe7N0HvFTVuf///733d+81vfeem0SjJtFEjcZEY4km1tijJtYodrErKIoNUawgCmJBBZEiRYqigAgKClKk98Ph9N4bZf3nWbP2OXvmrKlnZs6evT/v+/remdllzZ59Jr5Yz6y99v+nAAAAAACA71EAAAAAAAAgACgAAAAAAAAQABQAAAAAAAAIAAoAAAAAAAAEAAUAAAAAAAACgAIAAAAAAAABQAEAAAAAAIAAoAAAAAAAAEAAUAAAAAAAACAAKAAAAAAAyKnde/ao6oZWtXRjqRo/f516dOLH6vZR76mrhr6t+jzxlrrqqdnqlufmqYfGLVajZ69S81ZsV9tKa1Vr+07TAoB0UAAAAAAAkFWNLe1qc0mtmrVkq7pvzAfqpLsmql9eOkr95IJn1c8uGqn2vuQ5/fpXfV5QB175ojro6tHq99e9og6/4VV15E1j1bG3jVN/6zdenffgNHXvKx+oKR9sVOsKq1RVfYvq2LnbvAuARCgAAAAAAMg4+ZW/qLJBjXtvnbru6XfUn24co35w/nD13XOfVt87b7j64fnP6ALA/104IqkCwF/7jVcn3TlRnXbPG+qs+6aoi4fMVA+M/UBNeH+9Wru9itEBQBIoAAAAAADIqLqmNjV0yie68/6jfz6jvnbGk+rrZz6lvnXOMPWdfwzreQHg/inqvEHT1EWPTFd9nnhb3fH8e2rY1E/Uqm2VaucuRgQAsVAAAAAAANBje/aEh/pP/XCT+sVFI9UXTnlMfenvj6uvnP6E+urpiQsA+/57lPr1FS+q34U6/4eGOv8yYuCoW15Tf7nt9VDnf4I6MdT5P2XAJHX6wMnqbFcB4LLH31JXD52tbnh2jrpt1Htq9DurVGVds9q1O3RAACJQAAAAAADQI9LZXrhqh/rnQ2+qr57xpPr8qY+rL4SSqADw84tGqIOvGa3+fs8b6pphs9V9ry5UQ6cs1RP/ydD+aYs2qTcXbVaTP9ioxr23Vr0UWv70tE/UoNcWqVudSQOffLuzACDL7nrpffVgaP38Twv1RINSmAAQRgEAAAAAQNoaWtp1h3v/y55Xnzn5UfXZkx9LWADY//Ln1aWPzlRj565VC1btUJuKalRDc7ueNyARKTbItgVl9WrFlnL19tKt6rGJH+tf/50CwH1jPlRDJnykXpu3Vm0vrzd7AqAAAAAAACAtZTVN6h8PTFWfP+UxtddJQ+IWAL5x1lNqv8tGqYdeX6xKQ/vJpH3JdPgTkTbaO3apqrpmNen99fouA1IAGDz+I/XEG0vVyBkr1IrN5WoPQwEACgAAAAAAUiNdabkN36l3T1L/c8IQ9b8nDolZAJCO/+F9X9X3+pch+dlW29impi3aqEbMWK6enLxUDX9zmXrx7U/V4nXFqq1jl9kKCCYKAAAAAACSJj+kL1pbrI64aYz67xMeiVkA+GKo87/fZc+rh8YtVusKq3N+LX5pdZN6d1mBGjVrpXo+lLFz16jF60q4SwACjQIAAAAAgKRJ519u1fdffx0cswDwxb8/oU66a6LeNtUO9+49HaptZ4OqbylV5fWbVEndWlVWv15VNxWoprYq1b6rJbRNcr/ky6UBJdVN6rW5a9Wrc1arie+vVx+sLsrIpQdAPqIAAAAAACApG4uq1Z9vGqv+318fVv91vL0A8JXTn1QXD5mZ1HD7PaH/69jVqupaStSmsvfUxCU3qsff+bMaPOsg9cis36tH3z5cPRF6/dS7x6rhc09Qz847VY1acLYa9/FVavHml1R5/QbV0lEf6tDvNC3aSSFg7ortatKCDWr6R5vVsk1l3CYQgUQBAAAAAEBCMvP+uQ9MU/8V6vzHKgD87KIR6ok3lpg9YpMOe3nDBvVJwetqwpLr1KAZB6r73txXPTD9V6HnB+gCwJC3ugoAQ+ccp56Zd5IaOf809fz7Z6sXF56nXv7wIjVm8WVq8rJb1bLtE9WOmuWqpb021Lq9Y9/WvlOt2lqhZny8Rc1dvl1tK6tTuykCIGAoAAAAAACIS34tl3vt//ffHlH/eby9APB/F47Qt/WT2f3jaW6vUbNW3a+ennuCumfqz9XdU3+mBk7d21UAOFANefsPatSCs9Rbqx7URYJ1pbPVxrL5anPFArW5fEHo+Ty1csc0NX/DMDV1+R3qjU9uVtNX3KU+3Py82lq5KOYlArt271aFFQ16bgCZFLC+qc2sAYKBAgAAAACAuF5+Z3Wo8/9wqPM/2FoA+MxJj6opH2yMO6x+z57doc78eN3RHzD5x+quyT9SA6b81FUA2E8P9f801LFvbqtW7TubQ+116P26/6q/Ry+X9XIJgVwGsK70HfX26ofU7DUPqwUbn1V1zSVm2+7Ka5rUwtU79KUATAeAIKEAAAAAACCmNQWV6teXv6D+Q3f+uxcA5DZ/o2evMlvbVTdtVxOX3qjufOOHqv8b3w89/qCzAPDIW4ep8UuuU8W18dtIxp49u1RRzUq1tGCcWrTlJbW9+hO1c3e7WdtFJgHcUdGgPtlYqrYU14b2owqAYKAAAAAAAMCqua1D3frcPPU/Jz5iLQB8+fQn1ANjP4z7y//GsvfUyPmnqzsmfkf1m/TdzgLAwGn7qKnL7tDrk53VP1kyuaDcOWBN8Sx9SUBrR4NZ00XuTrClpFat3lap6rgUAAFBAQAAAACA1fLN5epbZw/Tnf/oAsB/h/LPh95U1Q2tZutI0glfvn2Svqb/9onfUndM/HZnAeCRWYfqde07m8zW2dEWal9GFmwom6fnHojWsXO3WrO9Uo8GSPV2hUA+ogAAAAAAoBsZFn/hw9PVfxwX7vxHFwB+/M9n1MotFWbrSNL5X1syW90//VfqtgnfdBUAvqeH/Fc2bDFb5kZze7XaVvWxatvZaJZ02bkzPBKgsaX7pQKA31AAAAAAANCNTJD3Pyc8Yi0AyKz/z0xbZrbsrrBmmZ7J/7aJ3+wsAMiw/5c/uFC1tNeZrXKrqb1aVTRsVrv2RN6lQC7/r2loVRW1zcwFAN+jAAAAAAAggtwf/6z7pqj/Tzr/lgLACf3Hq7YO+3X7Nc2F6ol3jgp1/L+hbpsYyoRv6qH/Yxb9W9W1FJuteofcLaCycZt51UUuBaioa9aPgJ9RAAAAAAAQYdW2CvXNs4ZaCwAy8Z+MDrCRW/I9v+Af6tYJX4soADz1zjGqviX2bflyaeeu9tCxlJpXXRqa21Vto30+A8AvKAAAAAAA6CTD4B8ev1gP848uAPzX8Q+rfw5+0zprvszk/9GWl9WAKT+JKADcO20fVVgd+3KB3tCxu1Xt3B35GeRzSwGAywDgZxQAAAAAAHSqCXWCTx/4hu74RxcAvnbGk+r199bp6+ajVTVuU8Pm/FV3/p0CwJ2Tf6g+3jbGbOEde/bs1qMV5NGtpW2nat+Z2VsSAl5CAQAAAABApxWby9X+lz+vO//RBYDDrn9V3zLP5sPNz6vbJ3wrogAw7uOrQh3qZrOFt8iIBblbgZsUNlraOswrwH8oAAAAAADoNOWDjepzJz/WrQAg1//f8My7ZqtIMpz+wem/UbeOD3f+Jfe9uZ/aWPae2cKbdu3u3tmXiQC5DAB+RQEAAAAAgLZr9x710LhFncP/3QWA//rbw2r20u4z6ItPCsarW17/amcBQK79f+2jK6z33feS6BEAQjr/FADgVxQAAAAAAGjtHbvUhY/M6Oz8uwsA3z5nqGpq6f6L+c5dbeqxt/8UUQCQe/5/umOq2SL/UACAX1EAAAAAAKA1t3WoP1z/irUAcNo9b5itIhXXrlL9Jn43ogDw8KxDdGEgG3bu2q0amttUbVM4MmlhdYOkRVXWhVLfoipCjxW1zTrlNc2qrLpZlVY36cg6GekQi7Qfbqe1W6pCaW711hwB8lnkuArK6tTa7VVq6YZSNW/FdjVt0Sb16pzV6p1PCjJS0Gjf1aw2ls1X01ferV5Y8A/1
|
||
|
|
|
||
|
|
// Get the canvas element and its context
|
||
|
|
const canvas = document.getElementById('5a247dfe1eb6465ea40f4adc68e5ea0a');
|
||
|
|
const ctx = canvas.getContext('2d');
|
||
|
|
|
||
|
|
// Set the canvas width to 100% of the parent container's width (this will automatically adjust)
|
||
|
|
canvas.width = canvas.parentElement.offsetWidth; // Set canvas width to the parent's width
|
||
|
|
|
||
|
|
// Optionally, you can set the canvas height (you can set a fixed height or let it be dynamic)
|
||
|
|
canvas.height = 475; // Set canvas height to a fixed value or let it be flexible
|
||
|
|
|
||
|
|
// Draw something on the canvas (for demonstration purposes)
|
||
|
|
ctx.fillStyle = 'blue';
|
||
|
|
ctx.fillRect(0, 0, canvas.width, canvas.height);
|
||
|
|
|
||
|
|
// Get the data URL of the canvas content
|
||
|
|
const canvasDataUrl = canvas.toDataURL();
|
||
|
|
|
||
|
|
// Set the div's background image to the canvas content
|
||
|
|
const cardContainer = document.getElementById('card-container');
|
||
|
|
cardContainer.style.background = `url(${canvasDataUrl})`;
|
||
|
|
cardContainer.style.backgroundSize = 'cover'; // Optional: ensure the background covers the entire div
|
||
|
|
cardContainer.style.backgroundRepeat = 'repeat'; // Ensure the background repeats in both directions
|
||
|
|
|
||
|
|
</script>
|