
The Zero2Income Toolbox
If you have questions about any of these tools, feel freeto email us here!
Is there a tool that you would like to have, but aren't seeing it,email us here to let us know! Dana and I will be glad to take a look and see if it's something we can create and add it to the Toolbox.
Custom Code Snippets - Click the ⬇️ to see and view each video!
<!--
This code is part of the free Zero2Income Toolbox. We ask that you keep this comment in the code out of respect to the authors.
-->
<div class="image-carousel-container">
<div class="image-carousel-slide active">
<img src="image1.jpg" alt="image 1 description">
</div>
<div class="image-carousel-slide">
<img src="image2.jpg" alt="image 2 description">
</div>
<div class="image-carousel-slide">
<img src="image3.jpg" alt="image 3 description">
</div>
</div>
<style>
.image-carousel-container {
position: relative;
width: 100%;
height: 300px; /* Adjust height as needed for your images */
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
}
.image-carousel-slide {
width: 100%;
position: absolute;
display: flex;
align-items: center;
justify-content: center;
transition: transform 2s ease-in-out, opacity 2s ease-in-out;
opacity: 0;
transform: translateX(-100%);
}
.image-carousel-slide img {
width: 100%; /* Adjust image width if needed */
height: auto; /* Maintain image aspect ratio */
object-fit: cover; /* Ensure images fill the slide container */
}
.image-carousel-slide.active {
opacity: 1;
transform: translateX(0%);
}
.image-carousel-slide.outgoing {
opacity: 0;
transform: translateX(100%);
}
@media (max-width: 768px) {
/* Optional media query for smaller screens */
}
</style>
<script>
document.addEventListener('DOMContentLoaded', function() {
let currentIndex = 0;
const slides = document.querySelectorAll('.image-carousel-slide');
const totalSlides = slides.length;
function showNextSlide() {
const currentSlide = slides[currentIndex];
currentSlide.classList.remove('active');
currentSlide.classList.add('outgoing');
currentIndex = (currentIndex + 1) % totalSlides;
const nextSlide = slides[currentIndex];
nextSlide.classList.add('active');
// Remove outgoing class after the transition is done
setTimeout(() => {
currentSlide.classList.remove('outgoing');
}, 2000); // Match this duration to the CSS transition duration
}
setInterval(showNextSlide, 5000); // Change slide every 5 seconds
});
</script>
<!--
This code is part of the free Zero2Income Toolbox. We ask that you keep this comment in the code out of respect to the authors.
-->
<div class="text-carousel-container">
<div class="text-carousel-slide active">
<p>First Testimonial</p>
</div>
<div class="text-carousel-slide">
<p>Second Testimonial</p>
</div>
<div class="text-carousel-slide">
<p>Third Testimonial</p>
</div>
</div>
<style>
.text-carousel-container {
position: relative;
width: 100%;
min-height: 150px; /* Let it grow if needed */
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
padding: 20px 10px; /* Vertical padding helps breathing space */
box-sizing: border-box;
}
.text-carousel-slide {
width: 100%;
position: absolute;
display: flex;
align-items: center;
justify-content: center;
transition: transform 3s ease-in-out, opacity 2s ease-in-out;
opacity: 0;
transform: translateX(-100%);
font-size: 30px;
color: #4A4A4A;
text-align: center;
font-family: 'EB Garamond', serif;
box-sizing: border-box;
padding: 0 20px;
}
.text-carousel-slide p {
margin: 0;
line-height: 1.5;
}
.text-carousel-slide.active {
opacity: 1;
transform: translateX(0%);
}
.text-carousel-slide.outgoing {
opacity: 0;
transform: translateX(100%);
}
/* 📱 Medium Screens */
@media (max-width: 768px) {
.text-carousel-slide {
font-size: 22px;
padding: 0 10px;
}
.text-carousel-container {
padding: 20px 10px;
}
}
/* 📱 Small Screens */
@media (max-width: 480px) {
.text-carousel-slide {
font-size: 18px;
padding: 0 8px;
}
.text-carousel-container {
padding: 20px 10px;
}
}
</style>
<script>
let currentSlide = 0;
const slides = document.querySelectorAll('.text-carousel-slide');
function showNextSlide() {
slides[currentSlide].classList.remove('active');
slides[currentSlide].classList.add('outgoing');
currentSlide = (currentSlide + 1) % slides.length;
slides.forEach((slide, index) => {
if (index !== currentSlide) {
slide.classList.remove('active');
slide.classList.remove('outgoing');
}
});
slides[currentSlide].classList.add('active');
}
setInterval(showNextSlide, 5000);
</script>
<!--
This code is part of the free Zero2Income Toolbox. We ask that you keep this comment in the code out of respect to the authors.
-->
<!-- Add the following line in the head section of your HTML to include Font Awesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
<div style="display: flex; align-items: center; justify-content: flex-end; font-family: 'Montserrat', sans-serif; font-size: 16px; line-height: 28px;">
<div style="font-weight: bold; margin-right: 10px;">SHARE</div>
<div style="flex: 0; margin-left: 10px;">
<a href="#" id="facebook-share" target="_blank">
<span class="fa-stack" style="font-size: 1.5em;">
<i class="fas fa-circle fa-stack-2x" style="color: #3b5998;"></i>
<i class="fab fa-facebook-f fa-stack-1x fa-inverse"></i>
</span>
</a>
</div>
<div style="flex: 0; margin-left: 10px;">
<a href="#" id="linkedin-share" target="_blank">
<span class="fa-stack" style="font-size: 1.5em;">
<i class="fas fa-circle fa-stack-2x" style="color: #0077b5;"></i>
<i class="fab fa-linkedin-in fa-stack-1x fa-inverse"></i>
</span>
</a>
</div>
<div style="flex: 0; margin-left: 10px;">
<a href="#" id="twitter-share" target="_blank">
<span class="fa-stack" style="font-size: 1.5em;">
<i class="fas fa-circle fa-stack-2x" style="color: #1da1f2;"></i>
<i class="fab fa-twitter fa-stack-1x fa-inverse"></i>
</span>
</a>
</div>
</div>
<script>
document.addEventListener("DOMContentLoaded", function() {
var postUrl = encodeURIComponent(window.location.href);
var postTitle = encodeURIComponent(document.title);
var facebookShareLink = "https://www.facebook.com/sharer/sharer.php?u=" + postUrl;
var linkedinShareLink = "https://www.linkedin.com/shareArticle?mini=true&url=" + postUrl;
var twitterShareLink = "https://twitter.com/intent/tweet?url=" + postUrl + "&text=" + postTitle;
document.getElementById("facebook-share").href = facebookShareLink;
document.getElementById("linkedin-share").href = linkedinShareLink;
document.getElementById("twitter-share").href = twitterShareLink;
});
</script>
<!--
This code is part of the free Zero2Income Toolbox. We ask that you keep this comment in the code out of respect to the authors.
-->
<style>
.social-media-row {
display: flex; /* Makes the icons appear in a row */
justify-content: space-between; /* Spreads icons evenly */
margin: 0 auto; /* Centers the row horizontally */
}
.social-media-row a {
text-decoration: none; /* Removes underline from links */
color: inherit; /* Inherits the default text color */
margin: 0 10px; /* Adds spacing between icons */
font-size: 20px; /* Adjusts icon size as needed */
}
.social-media-row a:hover {
color: #007bff; /* Changes icon color on hover (optional) */
}
.social-media-row svg {
height: 32px; /* Ensures all SVG icons are the same size */
width: 32px; /* Ensures all SVG icons are the same size */
}
/* Media Queries for responsiveness (adjust sizes as needed) */
@media (max-width: 768px) {
.social-media-row a {
font-size: 16px;
margin: 0 5px;
}
}
@media (max-width: 480px) {
.social-media-row {
flex-wrap: wrap; /* Icons wrap to a new line on small screens */
}
}
</style>
<div class="social-media-row">
<a href="https://www.facebook.com/" target="_blank">
<svg xmlns="http://www.w3.org/2000/svg" height="32" width="32" viewBox="0 0 512 512"><!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path fill="#dddddd" d="M512 256C512 114.6 397.4 0 256 0S0 114.6 0 256C0 376 82.7 476.8 194.2 504.5V334.2H141.4V256h52.8V222.3c0-87.1 39.4-127.5 125-127.5c16.2 0 44.2 3.2 55.7 6.4V172c-6-.6-16.5-1-29.6-1c-42 0-58.2 15.9-58.2 57.2V256h83.6l-14.4 78.2H287V510.1C413.8 494.8 512 386.9 512 256h0z"/></svg>
</a>
<a href="https://www.instagram.com/" target="_blank">
<svg xmlns="http://www.w3.org/2000/svg" height="32" width="32" viewBox="0 0 448 512"><!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path fill="#dddddd" d="M224.1 141c-63.6 0-114.9 51.3-114.9 114.9s51.3 114.9 114.9 114.9S339 319.5 339 255.9 287.7 141 224.1 141zm0 189.6c-41.1 0-74.7-33.5-74.7-74.7s33.5-74.7 74.7-74.7 74.7 33.5 74.7 74.7-33.6 74.7-74.7 74.7zm146.4-194.3c0 14.9-12 26.8-26.8 26.8-14.9 0-26.8-12-26.8-26.8s12-26.8 26.8-26.8 26.8 12 26.8 26.8zm76.1 27.2c-1.7-35.9-9.9-67.7-36.2-93.9-26.2-26.2-58-34.4-93.9-36.2-37-2.1-147.9-2.1-184.9 0-35.8 1.7-67.6 9.9-93.9 36.1s-34.4 58-36.2 93.9c-2.1 37-2.1 147.9 0 184.9 1.7 35.9 9.9 67.7 36.2 93.9s58 34.4 93.9 36.2c37 2.1 147.9 2.1 184.9 0 35.9-1.7 67.7-9.9 93.9-36.2 26.2-26.2 34.4-58 36.2-93.9 2.1-37 2.1-147.8 0-184.8zM398.8 388c-7.8 19.6-22.9 34.7-42.6 42.6-29.5 11.7-99.5 9-132.1 9s-102.7 2.6-132.1-9c-19.6-7.8-34.7-22.9-42.6-42.6-11.7-29.5-9-99.5-9-132.1s-2.6-102.7 9-132.1c7.8-19.6 22.9-34.7 42.6-42.6 29.5-11.7 99.5-9 132.1-9s102.7-2.6 132.1 9c19.6 7.8 34.7 22.9 42.6 42.6 11.7 29.5 9 99.5 9 132.1s2.7 102.7-9 132.1z"/></svg>
</a>
<a href="https://www.linkedin.com/" target="_blank">
<svg xmlns="http://www.w3.org/2000/svg" height="32" width="32" viewBox="0 0 448 512"><!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path fill="#dddddd" d="M100.3 448H7.4V149.1h92.8V448zm-46.4-331.6C24.1 116.4 0 92.3 0 61.9S24.1 7.4 53.9 7.4s53.9 24.1 53.9 53.9-24.1 53.9-53.9 53.9zM447.8 448h-92.8V302.4c0-34.7-.7-79.2-48.3-79.2-48.4 0-55.8 37.8-55.8 76.8V448h-92.8V149.1h89V181h1.3c12.4-23.6 42.5-48.5 87.5-48.5 93.6 0 110.9 61.6 110.9 141.6V448z"/></svg>
</a>
<a href="https://www.youtube.com/" target="_blank">
<svg xmlns="http://www.w3.org/2000/svg" height="32" width="32" viewBox="0 0 576 512"><!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path fill="#dddddd" d="M549.7 124.1c-6.3-24-25-42.6-48.9-48.9-43.2-11.6-216.3-11.6-216.3-11.6s-173.1 0-216.3 11.6c-23.9 6.3-42.6 25-48.9 48.9C7.8 167.3 7.8 256 7.8 256s0 88.7 11.6 131.9c6.3 24 25 42.6 48.9 48.9 43.2 11.6 216.3 11.6 216.3 11.6s173.1 0 216.3-11.6c23.9-6.3 42.6-25 48.9-48.9 11.6-43.2 11.6-131.9 11.6-131.9s0-88.7-11.6-131.9zM232.3 338.8v-161.6l142.8 80.8-142.8 80.8z"/></svg>
</a>
<a href="https://www.tiktok.com/" target="_blank">
<svg xmlns="http://www.w3.org/2000/svg" height="32" width="32" viewBox="0 0 448 512"><!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path fill="#dddddd" d="M448 209.9a210.1 210.1 0 0 1 -122.8-39.3V349.4A162.6 162.6 0 1 1 185 188.3V278.2a74.6 74.6 0 1 0 52.2 71.2V0l88 0a121.2 121.2 0 0 0 1.9 22.2h0A122.2 122.2 0 0 0 381 102.4a121.4 121.4 0 0 0 67 20.1z"/></svg>
</a>
</div>
<!--
This code is part of the free Zero2Income Toolbox. We ask that you keep this comment in the code out of respect to the authors.
-->
<style>
.fab-container {
position: fixed;
top: 50px;
right: 20px;
z-index: 999;
}
.fab {
display: flex;
justify-content: center;
align-items: center;
width: 60px;
height: 60px;
background-color: #5CDB94;
color: #fff;
border-radius: 50%;
text-decoration: none;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
transition: background-color 0.3s ease;
position: relative;
font-size: 24px; /* Adjust icon size */
}
.fab:hover {
background-color: #2D2F4E;
}
/* Tooltip styles */
.tooltip-text {
position: absolute;
top: 50%;
right: calc(100% + 10px); /* Position to the left of the button */
transform: translateY(-50%);
background-color: rgba(0, 0, 0, 0.8); /* Increased opacity */
color: #fff;
padding: 5px 10px;
border-radius: 4px;
font-size: 12px;
white-space: nowrap;
opacity: 0;
visibility: hidden;
transition: opacity 0.3s ease, visibility 0.3s ease;
letter-spacing: 1.75px; /* Added letter spacing */
}
.fab:hover .tooltip-text {
opacity: 1;
visibility: visible;
}
</style>
<div class="fab-container">
<a href="#" class="fab" data-tooltip="Schedule a service">
<i class="fas fa-calendar-alt"></i>
<span class="tooltip-text">Schedule a Service</span>
</a>
</div>
<!-- Font Awesome -->
<script src="https://kit.fontawesome.com/a076d05399.js"></script>
<!--
This code is part of the free Zero2Income Toolbox. We ask that you keep this comment in the code out of respect to the authors.
-->
<style>
#Replace this with Webinar Session Link ID Attribute {
display: inline-block;
padding: 10px 20px;
background-color: #0174C7;
color: #fff !important; /* Added !important */
text-decoration: none;
text-align: center;
border-radius: 8px;
transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s ease;
box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}
#Replace this with Webinar Session Link ID Attribute:hover {
background-color: #1CB1C6;
color: #fff !important; /* Added !important */
transform: translateY(-5px);
}
#Replace this with Webinar Session Link ID Attribute,
#Replace this with Webinar Session Link ID Attribute * { /* Target the element and all its children */
color: #fff !important;
}
</style>
<!--
This code is part of the free Zero2Income Toolbox. We ask that you keep this comment in the code out of respect to the authors.
-->
<style>
.fab-container {
position: fixed !important;
top: 80px !important;
right: 20px !important;
z-index: 9999 !important;
}
.fab {
display: flex;
justify-content: center;
align-items: center;
width: 60px;
height: 60px;
background-color: #25D366; /* WhatsApp green color */
color: #fff;
border-radius: 50%;
text-decoration: none;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
transition: background-color 0.3s ease;
position: relative;
}
.fab:hover {
background-color: #128C7E; /* Darker WhatsApp green for hover */
}
.fab i {
font-size: 30px; /* Adjust icon size */
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
}
/* Tooltip styles */
.tooltip-text {
position: absolute;
top: 50%;
right: 70px; /* Position to the left of the button */
transform: translateY(-50%);
background-color: #333;
color: #fff;
padding: 5px 10px;
border-radius: 4px;
font-size: 14px;
white-space: nowrap;
opacity: 0;
transition: opacity 0.3s ease;
pointer-events: none; /* Prevent tooltip from blocking hover on button */
}
.fab:hover .tooltip-text {
opacity: 1;
}
/* Add a small arrow to the tooltip */
.tooltip-text::after {
content: "";
position: absolute;
top: 50%;
left: 100%;
margin-top: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent transparent transparent #333;
}
</style>
<div class="fab-container">
<a href="https://wa.me/YOUR_PHONE_NUMBER" class="fab" target="_blank" rel="noopener noreferrer">
<i class="fab fa-whatsapp"></i>
<span class="tooltip-text">Chat on WhatsApp</span>
</a>
</div>
<!-- Font Awesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<!--
This code is part of the free Zero2Income Toolbox. We ask that you keep this comment in the code out of respect to the authors.
-->
<style>
.fab-container {
position: fixed !important;
top: 80px !important;
right: 20px !important;
z-index: 9999 !important;
}
.fab {
display: flex;
justify-content: center;
align-items: center;
width: 60px;
height: 60px;
background-color: #0084FF; /* Facebook Messenger blue color */
color: #fff;
border-radius: 50%;
text-decoration: none;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
transition: background-color 0.3s ease;
position: relative;
}
.fab:hover {
background-color: #006AFF; /* Darker Facebook Messenger blue for hover */
}
.fab i {
font-size: 30px; /* Adjust icon size */
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
}
/* Tooltip styles */
.tooltip-text {
position: absolute;
top: 50%;
right: 70px; /* Position to the left of the button */
transform: translateY(-50%);
background-color: #333;
color: #fff;
padding: 5px 10px;
border-radius: 4px;
font-size: 14px;
white-space: nowrap;
opacity: 0;
transition: opacity 0.3s ease;
pointer-events: none; /* Prevent tooltip from blocking hover on button */
}
.fab:hover .tooltip-text {
opacity: 1;
}
/* Add a small arrow to the tooltip */
.tooltip-text::after {
content: "";
position: absolute;
top: 50%;
left: 100%;
margin-top: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent transparent transparent #333;
}
</style>
<div class="fab-container">
<a href="https://m.me/YOUR_PAGE_ID" class="fab" target="_blank" rel="noopener noreferrer">
<i class="fab fa-facebook-messenger"></i>
<span class="tooltip-text">Chat on Messenger</span>
</a>
</div>
<!-- Font Awesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<!--
This code is part of the free Zero2Income Toolbox. We ask that you keep this comment in the code out of respect to the authors.
-->
<!-- Include AOS CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aos@2.3.1/dist/aos.css" />
<!-- Include AOS JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/aos@2.3.1/dist/aos.js"></script>
<style>
@keyframes smoothZoomInUp {
from {
opacity: 0;
transform: scale3d(0.8, 0.8, 0.8) translate3d(0, 50px, 0);
}
to {
opacity: 1;
transform: scale3d(1, 1, 1) translate3d(0, 0, 0);
}
}
/* Hide elements initially */
.hidden {
opacity: 0;
transform: translateY(20px);
}
.animate-on-load {
opacity: 0;
animation: smoothZoomInUp 1.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
animation-delay: 0.1s;
}
</style>
<script>
window.addEventListener("load", function() {
// List your element IDs here
const scrollElementIds = [
"row-id1", "row-id2", "row-id3",
"row-id4", "row-id5", "row-id6"
];
const immediateElementIds = ["top-row-id1", "top-row-id2"];
// Set AOS attributes for scroll-triggered elements
scrollElementIds.forEach(id => {
const element = document.getElementById(id);
if (element) {
element.setAttribute("data-aos", "zoom-in-up");
}
});
// Add animation class for immediate animation elements
immediateElementIds.forEach(id => {
const element = document.getElementById(id);
if (element) {
element.classList.add('animate-on-load');
}
});
// Initialize AOS
AOS.init({
duration: 1500, // Animation duration in milliseconds
once: true, // Whether animation should happen only once - while scrolling down
anchorPlacement: 'center-bottom', // Defines which position of the element regarding to window should trigger the animation
easing: 'cubic-bezier(0.165, 0.84, 0.44, 1)' // Smooth ease-out function
});
});
</script>
<!--
This code is part of the free Zero2Income Toolbox. We ask that you keep this comment in the code out of respect to the authors.
-->
<div id="Enter the Row ID that has the raw html element." style="width: 100%; padding: 0; box-sizing: border-box;">
<!-- Raw HTML for PDF -->
<div id="pdf-container" style="position: relative; width: 100%; height: 100%; margin: 0; padding: 0; box-sizing: border-box;">
<!-- PDF Controls and Viewer -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.9.359/pdf.min.js"></script>
<div id="pdf-controls-desktop" style="text-align: center; margin-bottom: 10px;">
<button id="prev-page-desktop">Previous</button>
<span style="color: white;">Page: <span id="page-num-desktop"></span> / <span id="page-count-desktop"></span></span>
<button id="next-page-desktop">Next</button>
</div>
<div id="pdf-viewer-desktop" style="width: 100%; height: 100%; overflow: hidden;">
<!-- Canvas will be appended by the script -->
</div>
<script>
var url = 'Add the URL for the File that you uploaded to Systeme!';
var pdfDocDesktop = null,
pageNumDesktop = 1,
pageIsRenderingDesktop = false,
pageNumPendingDesktop = null;
var scaleDesktop = 1.2,
canvasDesktop = document.createElement('canvas'),
ctxDesktop = canvasDesktop.getContext('2d');
document.getElementById('pdf-viewer-desktop').appendChild(canvasDesktop);
pdfjsLib.getDocument(url).promise.then(function(pdfDoc_) {
pdfDocDesktop = pdfDoc_;
document.getElementById('page-count-desktop').textContent = pdfDocDesktop.numPages;
renderPageDesktop(pageNumDesktop);
});
function renderPageDesktop(num) {
pageIsRenderingDesktop = true;
pdfDocDesktop.getPage(num).then(function(page) {
var viewport = page.getViewport({ scale: scaleDesktop });
canvasDesktop.height = viewport.height;
canvasDesktop.width = viewport.width;
var renderContext = {
canvasContext: ctxDesktop,
viewport: viewport
};
var renderTask = page.render(renderContext);
renderTask.promise.then(function() {
pageIsRenderingDesktop = false;
if (pageNumPendingDesktop !== null) {
renderPageDesktop(pageNumPendingDesktop);
pageNumPendingDesktop = null;
}
});
document.getElementById('page-num-desktop').textContent = num;
});
document.getElementById('pdf-viewer-desktop').scrollTop = 0;
}
document.getElementById('prev-page-desktop').addEventListener('click', function() {
if (pageNumDesktop <= 1) {
return;
}
pageNumDesktop--;
queueRenderPageDesktop(pageNumDesktop);
});
document.getElementById('next-page-desktop').addEventListener('click', function() {
if (pageNumDesktop >= pdfDocDesktop.numPages) {
return;
}
pageNumDesktop++;
queueRenderPageDesktop(pageNumDesktop);
});
function queueRenderPageDesktop(num) {
if (pageIsRenderingDesktop) {
pageNumPendingDesktop = num;
} else {
renderPageDesktop(num);
}
}
</script>
</div>
</div>
<!-- Styles for New Row and PDF Container -->
<style>
#Enter the Row ID that has the raw html element. {
width: 100%;
max-width: 100%;
padding: 0;
box-sizing: border-box;
}
#pdf-container {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
margin: 0;
}
#pdf-controls-desktop {
text-align: center;
margin-bottom: 10px;
}
#pdf-viewer-desktop {
width: 100%;
height: calc(100vh - 60px); /* Adjust this if needed to fit better */
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
margin: 0;
}
#pdf-viewer-desktop canvas {
max-width: 100%;
max-height: 100%;
}
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
/* iPad Air and iPad Pro adjustments */
#Enter the Row ID that has the raw html element. {
margin: 0; /* Remove any potential default margin */
padding: 0; /* Ensure no extra padding */
}
#pdf-viewer-desktop {
height: calc(100vh - 60px); /* Adjust if necessary */
margin: -5px 0; /* Reduced negative margin */
}
}
</style>
<!--
This code is part of the free Zero2Income Toolbox. We ask that you keep this comment in the code out of respect to the authors.
-->
<div id="Row ID That Has the PDF Embed Code.">
<div id="pdf-controls">
<button id="prev-page">Previous</button>
<span>Page: <span id="page-num"></span> / <span id="page-count"></span></span>
<button id="next-page">Next</button>
</div>
<div id="pdf-viewer">
<canvas id="pdf-canvas"></canvas>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.9.359/pdf.min.js"></script>
<script>
var url = 'Enter URL Address for the PDF that you uploaded to Systeme.';
var pdfDoc = null,
pageNum = 1,
pageIsRendering = false,
pageNumPending = null;
var scale = 1.5,
canvas = document.getElementById('pdf-canvas'),
ctx = canvas.getContext('2d');
function adjustViewerHeight() {
var container = document.getElementById('Row ID That Has the PDF Embed Code.');
var controlsHeight = document.getElementById('pdf-controls').offsetHeight;
var containerHeight = container.offsetHeight;
var viewerHeight = containerHeight - controlsHeight;
document.getElementById('pdf-viewer').style.height = viewerHeight + 'px';
}
window.addEventListener('load', adjustViewerHeight);
window.addEventListener('resize', adjustViewerHeight);
pdfjsLib.getDocument(url).promise.then(function(pdfDoc_) {
pdfDoc = pdfDoc_;
document.getElementById('page-count').textContent = pdfDoc.numPages;
renderPage(pageNum);
});
function renderPage(num) {
pageIsRendering = true;
pdfDoc.getPage(num).then(function(page) {
var viewport = page.getViewport({scale: scale});
canvas.height = viewport.height;
canvas.width = viewport.width;
var renderCtx = {
canvasContext: ctx,
viewport: viewport
};
var renderTask = page.render(renderCtx);
renderTask.promise.then(function() {
pageIsRendering = false;
if (pageNumPending !== null) {
renderPage(pageNumPending);
pageNumPending = null;
}
});
document.getElementById('page-num').textContent = num;
});
document.getElementById('pdf-viewer').scrollTop = 0;
}
function queueRenderPage(num) {
if (pageIsRendering) {
pageNumPending = num;
} else {
renderPage(num);
}
}
document.getElementById('prev-page').addEventListener('click', function() {
if (pageNum <= 1) return;
pageNum--;
queueRenderPage(pageNum);
});
document.getElementById('next-page').addEventListener('click', function() {
if (pageNum >= pdfDoc.numPages) return;
pageNum++;
queueRenderPage(pageNum);
});
</script>
<style>
#Row ID That Has the PDF Embed Code. {
display: flex;
flex-direction: column;
height: 100%; /* Ensure it takes up the full height of its parent */
}
#pdf-controls {
background: #333;
color: white;
padding: 10px;
text-align: center;
flex-shrink: 0; /* Prevents the controls from shrinking */
}
#pdf-viewer {
flex: 1;
overflow: auto;
display: flex;
justify-content: center;
align-items: flex-start;
}
#pdf-canvas {
display: block;
width: 100%;
height: auto;
}
</style>
<!--
This code is part of the free Zero2Income Toolbox. We ask that you keep this comment in the code out of respect to the authors.
-->
<div class="video-container">
<video id="videoPlayer" class="video-player" controls poster="Image for Lesson 1 URL Goes Here!">
<source id="videoSource" src="Video 1 URL" type="video/mp4">
Your browser does not support the video tag.
</video>
</div>
<ul class="lesson-list">
<li class="lesson-item" data-video="Video 1 URL">
<img src="Lesson 1 Image URL" alt="Lesson 1 Thumbnail" class="lesson-thumbnail">
<div class="lesson-info">
<strong>Lesson 1: Title of Lesson</strong> <span class="lesson-length">3:45</span>
<p class="lesson-description">The description for lesson 1 goes here.</p>
</div>
</li>
<li class="lesson-item" data-video="Video 2 URL">
<img src="Lesson 2 Image URL" alt="Lesson 2 Thumbnail" class="lesson-thumbnail">
<div class="lesson-info">
<strong>Lesson 2: Title for Lesson</strong> <span class="lesson-length">5:20</span>
<p class="lesson-description">The description for lesson 2 goes here.</p>
</div>
</li>
<!-- Add more lessons as needed -->
</ul>
<style>
/* Basic CSS styles */
.video-container {
width: 100%;
max-width: 800px;
margin: 0 auto;
}
.video-player {
width: 100%;
height: 450px; /* Adjust height as needed */
}
.lesson-list {
margin: 20px auto;
max-width: 800px;
padding: 0;
list-style: none;
}
.lesson-item {
display: flex;
align-items: center;
margin: 25px 0;
padding: 10px;
border: 1px solid #ddd;
cursor: pointer;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.5); /* Add drop shadow */
transition: box-shadow 0.3s ease; /* Smooth transition for hover effect */
}
.lesson-thumbnail {
width: 150px;
height: auto;
margin-right: 15px;
}
.lesson-info {
flex: 1;
text-align: left;
}
.lesson-info strong {
font-size: 16px;
display: inline; /* Keep the title inline */
}
.lesson-length {
font-size: 14px;
margin-left: 10px; /* Add some space between the title and time */
color: #666;
display: inline; /* Keep the time inline with the title */
}
.lesson-description {
font-size: 14px;
margin-top: 5px;
color: #888;
display: block;
}
.lesson-item:hover {
background-color: #f0f0f0;
}
</style>
<script>
// JavaScript to handle video switching
document.querySelectorAll('.lesson-item').forEach(item => {
item.addEventListener('click', function() {
const videoSrc = this.getAttribute('data-video');
const videoPlayer = document.getElementById('videoPlayer');
const videoSource = document.getElementById('videoSource');
// Remove poster image after video starts playing
videoPlayer.removeAttribute('poster');
// Change the video source
videoSource.setAttribute('src', videoSrc);
videoPlayer.load(); // Reload the video element to apply the new source
videoPlayer.play(); // Play the new video
});
});
</script>
Systeme.io Website Templates
ChatGPT Prompts
© 2025 Zero2Income.com | Disclaimer