Skip to content

Commit

Permalink
SPARKS Company Website
Browse files Browse the repository at this point in the history
  • Loading branch information
@A11yTea
A11yTea authored Dec 16, 2024
1 parent a493942 commit ccf0fe4
Show file tree
Hide file tree
Showing 14 changed files with 1,002 additions and 0 deletions.
168 changes: 168 additions & 0 deletions AnalyticsPageNotAccessible.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,168 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title>Sparks - A company that cares about you</title>
<link rel="stylesheet" href="styles.css">
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<style>
.graph-container {
max-width: 800px;
margin: 20px auto;
padding: 20px;
border: 2px solid #C7832A;
border-radius: 10px;
background-color: #f5f5f5;
text-align: center;
}

.graph-container h2 {
margin-bottom: 20px;
color: #C7832A;
}

canvas {
max-width: 100%;
height: auto;
}
</style>
</head>
<body>
<div class="flex" id="main-nav">
<div class="flex">
<a id="home" class="item" onclick="activateLink('HomePageNotAccessible.html')">
Home
</a>
</div>
<div class="flex" id="our-services">
<div class="item">
Our Services
</div>
<div class="flex subitems">
<a class="item" style="margin-bottom:0px !important;" onclick="activateLink('PersonalEncouragementServicesNotAccessible.html')">
Request a personal encouragement message
</a>
</div>
</div>
<div class="flex" id="interested-in-us">
<div class="item">
Interested in Us?
</div>
<div class="flex subitems">
<a class="item" onclick="activateLink('OurMissionPageNotAccessible.html')">
Our Mission
</a>
<a class="item" onclick="activateLink('OurTeamPageNotAccessible.html')">
Our Team
</a>
<a class="item" style="margin-bottom:0px !important;" onclick="activateLink('AnalyticsPageNotAccessible.html')">
Cool Company Analytics
</a>
</div>
</div>
</div>

<div class="main-content">
<h1><span class="sparks">Sparks</span> Company Analytics</h1>
<p>Here are some key metrics visualized to help you understand our growth and impact.</p>

<div class="graph-container">
<h2>Monthly Revenue Growth</h2>
<canvas id="revenueChart"></canvas>
</div>

<div class="graph-container">
<h2>User Engagement Over Time</h2>
<canvas id="engagementChart"></canvas>
</div>

<div class="graph-container">
<h2>Our Popularity</h2>
<canvas id="productChart"></canvas>
</div>
</div>

<script>
// Monthly Revenue Growth
const revenueCtx = document.getElementById('revenueChart').getContext('2d');
new Chart(revenueCtx, {
type: 'line',
data: {
labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
datasets: [{
label: 'Your Company Revenue ($)',
data: [10000, 12000, 13000, 15000, 17000, 19000, 20000, 21000, 22000, 23000, 24000, 24500],
borderColor: '#C7832A',
backgroundColor: 'rgba(199, 131, 42, 0.2)',
borderWidth: 2
},
{
label: 'Our Revenue ($)',
data: [12000, 15000, 17000, 20000, 22000, 25000, 27000, 30000, 32000, 35000, 38000, 40000],
borderColor: '#C7832A',
backgroundColor: 'rgba(199, 131, 42, 0.2)',
borderWidth: 2
}
]
},
options: {
responsive: true,
plugins: {
legend: {
display: true,
position: 'top'
}
}
}
});

// User Engagement Over Time
const engagementCtx = document.getElementById('engagementChart').getContext('2d');
new Chart(engagementCtx, {
type: 'bar',
data: {
labels: ['Q1', 'Q2', 'Q3', 'Q4'],
datasets: [{
label: 'Active Users',
data: [200, 500, 750, 1200],
backgroundColor: ['#C7832A', '#A66520', '#C7832A', '#A66520'],
borderWidth: 1
}]
},
options: {
responsive: true,
plugins: {
legend: {
display: true,
position: 'top'
}
}
}
});

// Product Popularity
const productCtx = document.getElementById('productChart').getContext('2d');
new Chart(productCtx, {
type: 'pie',
data: {
labels: ['Clients who love us', 'Clients who likes us', 'Clients who thinks we are okay', 'Clients whose opinions do not matter'],
datasets: [{
label: 'Popularity',
data: [40, 30, 20, 10],
backgroundColor: ['#C7832A', '#A66520', '#D8A54A', '#F3C77A'],
hoverOffset: 4
}]
},
options: {
responsive: true,
plugins: {
legend: {
display: true,
position: 'top'
}
}
}
});
</script>
<script src="functions.js"></script>
</body>
</html>
69 changes: 69 additions & 0 deletions HomePageNotAccessible.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,69 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title>Home - Home</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="flex" id="main-nav">
<div class="flex">
<a id="home" class="item" onclick="activateLink('HomePageNotAccessible.html')">
Home
</a>
</div>
<div class="flex" id="our-services">
<div class="item">
Our Services
</div>
<div class="flex subitems">
<a class="item" style="margin-bottom:0px !important;" onclick="activateLink('PersonalEncouragementServicesNotAccessible.html')">
Request a personal encouragement message
</a>
</div>
</div>
<div class="flex" id="interested-in-us">
<div class="item">
Interested in Us?
</div>
<div class="flex subitems">
<a class="item" onclick="activateLink('OurMissionPageNotAccessible.html')">
Our Mission
</a>
<a class="item" onclick="activateLink('OurTeamPageNotAccessible.html')">
Our Team
</a>
<a class="item" style="margin-bottom: 0px !important;" onclick="activateLink('AnalyticsPageNotAccessible.html')">
Cool Company Analytics
</a>
</div>
</div>
</div>



<div class="main-content">
<div class="heading-1">
Welcome to <span class="sparks">Sparks</span>!
</div>
<div class="paragraph">We are a company that <span style="font-weight: bolder; margin-bottom: 2em;">truly cares</span> about our users.</div>
<img id="support-hands" src="closeup-support-hands.jpg" alt="file13425.jpg">
<div class="heading-2">
Benefits of being with <span class="sparks">Sparks</span>
</div>
<table>
<tr>
<td>Family?</td>
<td>Caring?</td>
<td>Hatemail?</td>
</tr>
<tr>
<td>Yes</td>
<td>Yes</td>
<td>No!</td>
</tr>
</table>
</div>

<script src="functions.js"></script>
</body>
</html>
107 changes: 107 additions & 0 deletions OurMissionPageNotAccessible.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,107 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title>Sparks - A company that cares about you</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="flex" id="main-nav">
<div class="flex">
<a id="home" class="item" onclick="activateLink('HomePageNotAccessible.html')">
Home
</a>
</div>
<div class="flex" id="our-services">
<div class="item">
Our Services
</div>
<div class="flex subitems">
<a class="item" style="margin-bottom:0px !important;" onclick="activateLink('PersonalEncouragementServicesNotAccessible.html')">
Request a personal encouragement message
</a>
</div>
</div>
<div class="flex" id="interested-in-us">
<div class="item">
Interested in Us?
</div>
<div class="flex subitems">
<a class="item" onclick="activateLink('OurMissionPageNotAccessible.html')">
Our Mission
</a>
<a class="item" onclick="activateLink('OurTeamPageNotAccessible.html')">
Our Team
</a>
<a class="item" style="margin-bottom:0px !important;" onclick="activateLink('AnalyticsPageNotAccessible.html')">
Cool Company Analytics
</a>
</div>
</div>
</div>

<div class="main-content">
<div class="heading-1">
Our Mission
</div>
<div class="paragraph">
At <span class="sparks">Sparks</span>, we ignite the spark that s been missing in your life because why settle for a flicker when you can have a bonfire? Our mission is simple: to spread awesomeness. We re not just a company; we re a lifestyle, a movement, and a commitment to being cool.
</div>
<div class="paragraph">
We truly believe in being the best version of ourselves. From random high-fives we give ourselves for no reason, to spontaneous dance-offs in the breakroom, we believe that life is too short to take too seriously. We embrace creativity, laughter, and a healthy dose of chaos.
</div>
<div class="paragraph">
Welcome to <span class="sparks">Sparks</span>. Let s make life shine a little brighter together.
</div>

<div class="heading-1">
Our Values
</div>
<div class="list paragraph">
Awesomeness in everything we do (because why settle for "meh"?)
</div>
<div class="list paragraph">
Creativity that sparks innovation (or at least a sparkly mess on the whiteboard)
</div>
<div class="list paragraph">
Empathy and inclusivity for all (even for people who say "gif" wrong)
</div>
<div class="list paragraph">
Teamwork that makes the dream work (and sometimes includes pizza)
</div>
<div class="list paragraph">
Resilience in the face of challenges (like Mondays and printer jams)
</div>

<!-- Video Player -->
<div class="video-player">
<video id="missionVideo" width="700px">
<source src="SPARKS COMPANY.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
<div style="margin-top: 10px; display: flex; justify-content: center;">
<button class="video-button" onclick="playVideo()">Play</button>
<button class="video-button" onclick="pauseVideo()">Pause</button>
<button class="video-button" onclick="skipVideo(-10)">Rewind 10s</button>
<button class="video-button" onclick="skipVideo(10)">Forward 10s</button>
</div>
</div>
</div>

<script>
const video = document.getElementById('missionVideo');

function playVideo() {
video.play();
}

function pauseVideo() {
video.pause();
}

function skipVideo(seconds) {
video.currentTime += seconds;
}
</script>
<script src="functions.js"></script>
</body>
</html>
Loading

0 comments on commit ccf0fe4

Please sign in to comment.