Skip to content

Commit

Permalink
tivo => pe-bo
Browse files Browse the repository at this point in the history
  • Loading branch information
@yokka361
yokka361 committed Dec 22, 2024
1 parent a0ea787 commit 65656fd
Show file tree
Hide file tree
Showing 5 changed files with 391 additions and 197 deletions.
14 changes: 9 additions & 5 deletions README.md
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,14 @@
# TIVO - DESK COMPANION
#
PE-BO - DESK COMPANION

<p align="center">
<img src="/docs/images/bot.png" height="200">
</p>

## Overview

Tivo Desk Companion is an intelligent, interactive robot assistant designed to help with daily tasks and home automation. By integrating IoT, voice recognition, and face recognition, Tivo adapts to the user's environment, maximizing convenience and interactivity. The system offers a seamless user experience with features like task automation, real-time communication, and emergency alerts, all controlled through voice commands and gestures.
PE-BO Desk Companion is an intelligent, interactive robot assistant designed to help with daily tasks and home automation. By integrating IoT, voice recognition, and face recognition,
PE-BO adapts to the user's environment, maximizing convenience and interactivity. The system offers a seamless user experience with features like task automation, real-time communication, and emergency alerts, all controlled through voice commands and gestures.

<p align="center">
<img src="/docs/images/alert.png" height="20">
Expand Down Expand Up @@ -55,13 +57,15 @@ Managing multiple home automation systems and keeping track of daily tasks manua

## Solution

Tivo Desk Companion solves this problem by integrating IoT, AI, and real-time communication to streamline task management and home automation. By using voice and gesture recognition, users can interact with the robot easily, ensuring a seamless and efficient experience. The robot’s ability to manage tasks, send alerts, and control devices from a single interface helps improve daily living.
PE-BO Desk Companion solves this problem by integrating IoT, AI, and real-time communication to streamline task management and home automation. By using voice and gesture recognition, users can interact with the robot easily, ensuring a seamless and efficient experience. The robot’s ability to manage tasks, send alerts, and control devices from a single interface helps improve daily living.

## Getting Started

To start using Tivo Desk Companion, follow these steps:
To start using
PE-BO Desk Companion, follow these steps:

1. **Setup**: Install the Tivo Desk Companion and connect it to your Wi-Fi and IoT devices.
1. **Setup**: Install the
PE-BO Desk Companion and connect it to your Wi-Fi and IoT devices.
2. **Voice Command Setup**: Configure the voice recognition system and train the robot to recognize your commands.
3. **Control Devices**: Use the mobile application or voice commands to control IoT devices and manage tasks.

Expand Down
2 changes: 1 addition & 1 deletion docs/data/index.json
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
{
"title": "e20-3yp-TIVO-Desk-Companion",
"title": "e20-3yp-PE-BO-Desk-Companion",

"team": [
{
Expand Down
112 changes: 57 additions & 55 deletions docs/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tivo - Your Desk Companion</title>
<title>PE-BO - Your Desk Companion</title>

<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
Expand All @@ -20,15 +20,15 @@

<!-- Custom CSS -->
<link rel="stylesheet" href="style.css">

</head>

<body class="dark-mode">

<!-- Navigation -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top shadow-sm">
<div class="container">
<a class="navbar-brand" href="#">Tivo</a>
<a class="navbar-brand" href="#">PE-BO</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
Expand All @@ -53,7 +53,7 @@
<!-- Hero Section -->
<section id="hero" class="hero-section text-center">
<div class="container">
<h1 class="display-3 fw-bold mb-3 hero-title" data-aos="fade-up">Welcome to Tivo</h1>
<h1 class="display-3 fw-bold mb-3 hero-title" data-aos="fade-up">Welcome to PE-BO</h1>
<p class="lead mb-4" data-aos="fade-up" data-aos-delay="100">Your Ultimate Futuristic Desk Companion</p>
<a href="#features" class="btn btn-outline-light btn-lg" data-aos="fade-up" data-aos-delay="200">Explore
Features</a>
Expand All @@ -65,9 +65,11 @@ <h1 class="display-3 fw-bold mb-3 hero-title" data-aos="fade-up">Welcome to Tivo
<div class="container">
<h2 class="text-center mb-4">Introduction</h2>
<p data-aos="fade-up">
Tivo is an innovative desk companion designed to enhance your workspace experience. By integrating
advanced AI, voice control, gesture recognition, and seamless IoT connections, Tivo brings a new level
<div class="description strong em">
PE-BO is an innovative desk companion designed to enhance your workspace experience. By integrating
advanced AI, voice control, gesture recognition, and seamless IoT connections, PE-BO brings a new level
of interactivity to your desk.
</div>
</p>
</div>
</section>
Expand All @@ -88,7 +90,7 @@ <h5 class="mt-3">Voice Commands</h5>
<div class="feature-card text-center p-4">
<i class="bi bi-hand-index-thumb fs-1"></i>
<h5 class="mt-3">Gesture Control</h5>
<p>Control Tivo with intuitive gestures like waves, thumbs-ups, or points.</p>
<p>Control PE-BO with intuitive gestures like waves, thumbs-ups, or points.</p>
</div>
</div>
<div class="col-md-4" data-aos="fade-up" data-aos-delay="200">
Expand All @@ -99,7 +101,7 @@ <h5 class="mt-3">Task Automation</h5>
</div>
</div>
</div>

<div class="row mt-4">
<div class="col-md-4" data-aos="fade-up" data-aos-delay="300">
<div class="feature-card text-center p-4">
Expand Down Expand Up @@ -132,7 +134,7 @@ <h5 class="mt-3">Emergency Alerts</h5>
<div class="container">
<h2 class="text-center mb-4">Solution Architecture</h2>
<p data-aos="fade-up">
Tivo's architecture is designed to seamlessly integrate hardware and software components for optimal
PE-BO's architecture is designed to seamlessly integrate hardware and software components for optimal
performance.
</p>
<ul data-aos="fade-up" data-aos-delay="100">
Expand Down Expand Up @@ -176,7 +178,7 @@ <h4>Software Frameworks</h4>
<div class="container">
<h2 class="text-center mb-4">Testing</h2>
<p data-aos="fade-up">
Comprehensive testing was conducted to ensure the reliability and functionality of Tivo.
Comprehensive testing was conducted to ensure the reliability and functionality of PE-BO.
</p>
<div class="row">
<div class="col-md-6" data-aos="fade-right">
Expand All @@ -202,7 +204,7 @@ <h4>Software Testing</h4>
<div class="container">
<h2 class="text-center mb-4">Detailed Budget</h2>
<p data-aos="fade-up">
Below is a breakdown of the estimated costs for Tivo's development and deployment.
Below is a breakdown of the estimated costs for PE-BO's development and deployment.
</p>
<table class="table table-bordered mt-4" data-aos="fade-up" data-aos-delay="100">
<thead class="table-dark">
Expand Down Expand Up @@ -252,55 +254,55 @@ <h2 class="text-center mb-4">Detailed Budget</h2>
</table>
</div>
</section>
<section id="team" class="py-5 bg-dark">
<div class="container" data-aos="fade-up">
<h2 class="text-center text-light mb-4">Meet the Team</h2>
<div class="row text-center">
<div class="col-md-3">
<img src="Member1.png" alt="Buddhika" class="team-img mb-3">
<h5 class="text-light">Buddhika Ariyarathne</h5>
<p class="text-secondary">E/20/024</p>
</div>
<div class="col-md-3">
<img src="Member2.png" alt="Yasiru" class="team-img mb-3">
<h5 class="text-light">Yasiru Edirimanna</h5>
<p class="text-secondary">E/20/089</p>
</div>
<div class="col-md-3">
<img src="Member3.png" alt="Yohan" class="team-img mb-3">
<h5 class="text-light">Yohan Senadheera</h5>
<p class="text-secondary">E/20/361</p>
</div>
<div class="col-md-3">
<img src="Member4.png" alt="Bhagya" class="team-img mb-3">
<h5 class="text-light">Bhagya Senevirathna</h5>
<p class="text-secondary">E/20/366</p>
<section id="team" class="py-5 bg-dark">
<div class="container" data-aos="fade-up">
<h2 class="text-center mb-4">Meet the Team</h2>
<div class="row text-center">
<div class="col-md-3">
<img src="Member1.png" alt="Buddhika" class="team-img mb-3">
<h5 class="text-light">Buddhika Ariyarathne</h5>
<p class="text-secondary">E/20/024</p>
</div>
<div class="col-md-3">
<img src="Member2.png" alt="Yasiru" class="team-img mb-3">
<h5 class="text-light">Yasiru Edirimanna</h5>
<p class="text-secondary">E/20/089</p>
</div>
<div class="col-md-3">
<img src="Member3.png" alt="Yohan" class="team-img mb-3">
<h5 class="text-light">Yohan Senadheera</h5>
<p class="text-secondary">E/20/361</p>
</div>
<div class="col-md-3">
<img src="Member4.png" alt="Bhagya" class="team-img mb-3">
<h5 class="text-light">Bhagya Senevirathna</h5>
<p class="text-secondary">E/20/366</p>
</div>
</div>
</div>
</div>
</section>
<!-- Links Section -->
<section id="links" class="py-5 bg-light">
<div class="container text-center">
<h2 class="text-dark mb-4">Useful Links</h2>
<p data-aos="fade-up">Explore more about Tivo and related resources through the following links:</p>
<ul class="list-inline" data-aos="fade-up" data-aos-delay="100">
<li class="list-inline-item">
<a href="https://github.com/tivo" class="btn btn-outline-dark">GitHub</a>
</li>
<li class="list-inline-item">
<a href="https://www.tivo.com" class="btn btn-outline-dark">Official Website</a>
</li>
<li class="list-inline-item">
<a href="https://www.linkedin.com/company/tivo" class="btn btn-outline-dark">LinkedIn</a>
</li>
</ul>
</div>
</section>
</section>
<!-- Links Section -->
<section id="links" class="py-5 bg-light">
<div class="container text-center">
<h2 class="text-dark mb-4">Useful Links</h2>
<p data-aos="fade-up">Explore more about PE-BO and related resources through the following links:</p>
<ul class="list-inline" data-aos="fade-up" data-aos-delay="100">
<li class="list-inline-item">
<a href="https://github.com/cepdnaclk/e20-3yp-PE-BO-Desk-Companion" class="btn btn-outline-dark">GitHub</a>
</li>
<li class="list-inline-item">
<a href="https://cepdnaclk.github.io/e20-3yp-PE-BO-Desk-Companion/" class="btn btn-outline-dark">Official Website</a>
</li>
<li class="list-inline-item">
<a href="https://projects.ce.pdn.ac.lk/3yp/e20/pe-bo-desk-companion/" class="btn btn-outline-dark">Project Page</a>
</li>
</ul>
</div>
</section>

<!-- Footer -->
<footer class="py-4 bg-dark text-center text-white">
<p>&copy; 2024 Tivo. All rights reserved.</p>
<p>&copy; 2024 PE-BO. All rights reserved.</p>
</footer>

<!-- Scripts -->
Expand Down
110 changes: 107 additions & 3 deletions docs/script.js
View file
Original file line number Diff line number Diff line change
@@ -1,20 +1,44 @@
// Smooth Scroll for Navigation Links
// Smooth Scroll for Navigation Links with Offset
document.querySelectorAll("a.nav-link").forEach((link) => {
link.addEventListener("click", function (e) {
e.preventDefault();
const target = document.querySelector(this.getAttribute("href"));
target.scrollIntoView({ behavior: "smooth", block: "start" });
if (target) {
const offset = window.innerWidth < 768 ? 70 : 0; // Adjust offset for mobile
const targetPosition =
target.getBoundingClientRect().top + window.scrollY - offset;
window.scrollTo({ top: targetPosition, behavior: "smooth" });
}
});
});

// Dark Mode Toggle
// Dark Mode Toggle with Animation
const toggleDarkMode = () => {
const body = document.body;
body.classList.toggle("dark-mode");

if (body.classList.contains("dark-mode")) {
localStorage.setItem("theme", "dark");

// Add a fade-in effect for dark mode
body.animate(
[
{ backgroundColor: "#fff", color: "#000" }, // From light
{ backgroundColor: "#121212", color: "#fff" }, // To dark
],
{ duration: 500, easing: "ease-in-out" }
);
} else {
localStorage.setItem("theme", "light");

// Add a fade-out effect for light mode
body.animate(
[
{ backgroundColor: "#121212", color: "#fff" }, // From dark
{ backgroundColor: "#fff", color: "#000" }, // To light
],
{ duration: 500, easing: "ease-in-out" }
);
}
};

Expand All @@ -25,3 +49,83 @@ document.addEventListener("DOMContentLoaded", () => {
document.body.classList.add("dark-mode");
}
});

// Scroll Animation for Elements on Scroll
const animatedElements = document.querySelectorAll(".animate-on-scroll");

const observeElements = new IntersectionObserver(
(entries, observer) => {
entries.forEach((entry) => {
if (entry.isIntersecting) {
entry.target.classList.add("visible"); // Trigger animation
observer.unobserve(entry.target); // Stop observing once animated
}
});
},
{ threshold: 0.2 } // Trigger when 20% of the element is visible
);

animatedElements.forEach((element) => observeElements.observe(element));

// Example: Adding animation classes dynamically
document.querySelectorAll(".fade-in").forEach((el) => {
el.classList.add("animate-on-scroll"); // Ensure it's observed
});

// Example for adding animations using GSAP (optional)
if (window.gsap) {
document.querySelectorAll(".animate-gsap").forEach((el) => {
gsap.fromTo(
el,
{ opacity: 0, y: 50 }, // Start state
{
opacity: 1,
y: 0,
duration: 1,
scrollTrigger: {
trigger: el,
start: "top 80%", // Trigger animation when 80% of the viewport height
},
}
);
});
}

// Mobile Menu Animation
const mobileMenuButton = document.querySelector(".navbar-toggler");
const navbarMenu = document.querySelector(".navbar-collapse");

mobileMenuButton.addEventListener("click", () => {
if (navbarMenu.classList.contains("show")) {
navbarMenu.animate(
[
{ opacity: 1, transform: "translateY(0)" },
{ opacity: 0, transform: "translateY(-10px)" },
],
{ duration: 300, easing: "ease-in-out" }
);
} else {
navbarMenu.animate(
[
{ opacity: 0, transform: "translateY(-10px)" },
{ opacity: 1, transform: "translateY(0)" },
],
{ duration: 300, easing: "ease-in-out" }
);
}
});
const adjustFontSize = () => {
const descriptions = document.querySelectorAll(".description");
const isMobile = window.innerWidth < 768;

descriptions.forEach((desc) => {
if (isMobile) {
desc.style.fontSize = "14px"; // Smaller font for mobile
} else {
desc.style.fontSize = "16px"; // Default size for larger screens
}
});
};

window.addEventListener("resize", adjustFontSize);
document.addEventListener("DOMContentLoaded", adjustFontSize);
Loading

0 comments on commit 65656fd

Please sign in to comment.