-
-
-
Buddhika Ariyarathne
-
E/20/024
-
-
-
-
Yasiru Edirimanna
-
E/20/089
-
-
-
-
Yohan Senadheera
-
E/20/361
-
-
-
-
Bhagya Senevirathna
-
E/20/366
+
+
+
Meet the Team
+
+
+
+
Buddhika Ariyarathne
+
E/20/024
+
+
+
+
Yasiru Edirimanna
+
E/20/089
+
+
+
+
Yohan Senadheera
+
E/20/361
+
+
+
+
Bhagya Senevirathna
+
E/20/366
+
-
-
-
-
-
Useful Links
-
Explore more about Tivo and related resources through the following links:
-
-
+
+
+
+
+
Useful Links
+
Explore more about PE-BO and related resources through the following links:
+
+
- © 2024 Tivo. All rights reserved.
+ © 2024 PE-BO. All rights reserved.
diff --git a/docs/script.js b/docs/script.js
index bc3d2be..1816a77 100644
--- a/docs/script.js
+++ b/docs/script.js
@@ -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" }
+ );
}
};
@@ -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);
diff --git a/docs/style.css b/docs/style.css
index 0c5ba7b..8a562bc 100644
--- a/docs/style.css
+++ b/docs/style.css
@@ -1,251 +1,335 @@
/* Importing Modern and Futuristic Fonts */
-@import url('https://fonts.googleapis.com/css2?family=Orbitron&family=Russo+One&display=swap');
+@import url("https://fonts.googleapis.com/css2?family=Orbitron&family=Russo+One&display=swap");
/* Body and General Styles */
body {
- font-family: 'Orbitron', sans-serif, 'Roboto', sans-serif;
- background-color: #121212;
- color: #f1f1f1;
- margin: 0;
- padding: 0;
+ font-family: "Orbitron", sans-serif, "Roboto", sans-serif;
+ background-color: #121212;
+ color: #f1f1f1;
+ margin: 0;
+ padding: 0;
}
/* Navbar */
.navbar {
- background-color: #1a1a1a;
- border-bottom: 1px solid #444;
+ background-color: #1a1a1a;
+ border-bottom: 1px solid #444;
}
.navbar .navbar-brand {
- font-size: 1.8rem;
- font-weight: bold;
- color: #fff;
- text-shadow: 0 0 15px #00ffcc, 0 0 25px #00ffcc;
+ font-size: 1.8rem;
+ font-weight: bold;
+ color: #fff;
+ text-shadow: 0 0 15px #00ffcc, 0 0 25px #00ffcc;
}
.navbar .nav-link {
- color: #bbb !important;
- text-shadow: 0 0 8px #ff00ff, 0 0 15px #ff00ff;
+ color: #bbb !important;
+ text-shadow: 0 0 8px #ff00ff, 0 0 15px #ff00ff;
}
.navbar .nav-link:hover {
- color: #f1f1f1 !important;
- text-shadow: 0 0 12px #ff0000, 0 0 20px #ff0000;
+ color: #f1f1f1 !important;
+ text-shadow: 0 0 12px #ff0000, 0 0 20px #ff0000;
}
/* Hero Section */
.hero-section {
- background: url('bot.png') no-repeat center center;
- background-size: cover;
- position: relative;
- padding: 120px 0;
- color: #fff;
+ background: url("bot.png") no-repeat center center;
+ background-size: cover;
+ position: relative;
+ padding: 120px 0;
+ color: #fff;
}
.hero-section::before {
- content: '';
- position: absolute;
- top: 0;
- left: 0;
- width: 100%;
- height: 100%;
- background: rgba(0, 0, 0, 0.5);
- backdrop-filter: blur(5px);
- z-index: 1;
+ content: "";
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ background: rgba(0, 0, 0, 0.5);
+ backdrop-filter: blur(5px);
+ z-index: 1;
}
.hero-section > .container {
- position: relative;
- z-index: 2;
+ position: relative;
+ z-index: 2;
}
.hero-section h1 {
- font-size: 4rem;
- font-weight: 900;
- color: #4CAF50;
- text-shadow: 0 0 20px rgba(0, 255, 0, 0.7), 0 0 30px rgba(0, 255, 0, 0.5);
- z-index: 3;
- position: relative;
+ font-size: 4rem;
+ font-weight: 900;
+ color: #4caf50;
+ text-shadow: 0 0 20px rgba(0, 255, 0, 0.7), 0 0 30px rgba(0, 255, 0, 0.5);
+ z-index: 3;
+ position: relative;
}
/* Section Backgrounds */
-#solution-architecture, #testing, .bg-dark, #team, #features, #links {
- background-color: #121212 !important;
- color: #f1f1f1;
+#solution-architecture,
+#testing,
+.bg-dark,
+#team,
+#features,
+#links {
+ background-color: #121212 !important;
+ color: #f1f1f1;
}
-#solution-architecture ul, #testing ul {
- list-style-type: none;
- padding-left: 0;
+#solution-architecture ul,
+#testing ul {
+ list-style-type: none;
+ padding-left: 0;
}
-#solution-architecture ul li, #testing ul li {
- margin-bottom: 10px;
+#solution-architecture ul li,
+#testing ul li {
+ margin-bottom: 10px;
}
/* Budget and Useful Links Section */
-#budget, #useful-links {
- background-color: #1a1a1a;
- padding: 40px 0;
+#budget,
+#useful-links {
+ background-color: #1a1a1a;
+ padding: 40px 0;
}
-#budget h2, #useful-links h2 {
- color: #29b6f6;
- text-shadow: 0 0 10px #29b6f6, 0 0 20px #29b6f6;
+#budget h2,
+#useful-links h2 {
+ color: #29b6f6;
+ text-shadow: 0 0 10px #29b6f6, 0 0 20px #29b6f6;
}
/* Team Section */
#team {
- background-color: #121212;
+ background-color: #121212;
}
.team-img {
- border-radius: 50%;
- width: 150px;
- height: 150px;
- object-fit: cover;
- border: 3px solid #fff;
+ border-radius: 50%;
+ width: 150px;
+ height: 150px;
+ object-fit: cover;
+ border: 3px solid #ff6f61;
+
+
}
#team .col-md-3 {
- margin-bottom: 30px;
+ margin-bottom: 30px;
}
#team h5 {
- font-size: 1.2rem;
- margin-top: 10px;
- text-shadow: 0 0 8px #ff00ff, 0 0 15px #ff00ff;
+ font-size: 1.2rem;
+ margin-top: 10px;
+ text-shadow: 0 0 8px #ff00ff, 0 0 15px #ff00ff;
}
/* Links Section */
#links {
- background-color: #121212;
- color: #fff;
- padding: 60px 0;
+ background-color: #121212;
+ color: #fff;
+ padding: 60px 0;
}
#links .list-inline-item {
- margin-right: 10px;
+ margin-right: 10px;
}
#links .btn-outline-dark {
- border-color: #fff;
- color: #fff;
- border-radius: 25px;
- padding: 12px 24px;
- margin: 10px 0;
- text-shadow: 0 0 8px #ff00ff, 0 0 15px #ff00ff;
+ border-color: #fff;
+ color: #fff;
+ border-radius: 25px;
+ padding: 12px 24px;
+ margin: 10px 0;
+ text-shadow: 0 0 8px #ff00ff, 0 0 15px #ff00ff;
}
#links .btn-outline-dark:hover {
- background-color: #fff;
- color: #121212;
- text-shadow: 0 0 15px #ff0000, 0 0 30px #ff0000;
+ background-color: #fff;
+ color: #121212;
+ text-shadow: 0 0 15px #ff0000, 0 0 30px #ff0000;
}
/* Footer */
footer {
- background-color: #1a1a1a;
- color: #bbb;
+ background-color: #1a1a1a;
+ color: #bbb;
}
footer p {
- margin: 0;
- font-size: 0.9rem;
+ margin: 0;
+ font-size: 0.9rem;
}
/* Feature Section */
.feature-card {
- background-color: #1a1a1a;
- border-radius: 10px;
- transition: all 0.3s ease;
- box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
- border: 2px solid #ff6f61;
+ background-color: #1a1a1a;
+ border-radius: 10px;
+ transition: all 0.3s ease;
+ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
+ border: 2px solid #ff6f61;
}
.feature-card:hover {
- transform: translateY(-10px);
- box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
+ transform: translateY(-10px);
+ box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
}
.feature-card i {
- color: #ff6f61;
- text-shadow: 0 0 10px #ff6f61, 0 0 18px #ff6f61;
+ color: #ff6f61;
+ text-shadow: 0 0 10px #ff6f61, 0 0 18px #ff6f61;
}
.feature-card i:hover {
- color: #f1f1f1;
- text-shadow: 0 0 15px #00ffcc, 0 0 25px #00ffcc;
+ color: #f1f1f1;
+ text-shadow: 0 0 15px #00ffcc, 0 0 25px #00ffcc;
}
/* Custom Table Styling */
table {
- background-color: #1a1a1a;
- color: #f1f1f1;
- width: 100%;
- margin-top: 30px;
- border-collapse: collapse;
+ background-color: #1a1a1a;
+ color: #f1f1f1;
+ width: 100%;
+ margin-top: 30px;
+ border-collapse: collapse;
}
-table th, table td {
- text-align: center;
- padding: 15px;
+table th,
+table td {
+ text-align: center;
+ padding: 15px;
}
table th {
- background-color: #333;
- color: #fff;
- font-weight: bold;
+ background-color: #333;
+ color: #fff;
+ font-weight: bold;
}
table td {
- color: #f1f1f1;
+ color: #f1f1f1;
}
table td strong {
- color: #ff6f61;
+ color: #ff6f61;
}
/* General Section Padding */
section {
- padding: 60px 0;
+ padding: 60px 0;
}
section h2 {
- font-size: 2.5rem;
- font-weight: bold;
- color: #ff6f61;
- text-shadow: 0 0 10px #ff6f61, 0 0 15px #ff6f61;
+ font-size: 2.5rem;
+ font-weight: bold;
+ color: #f5b1ab;
+ text-shadow: 0 0 10px #ff6f61, 0 0 15px #ff6f61;
}
section p {
- font-size: 1.1rem;
+ font-size: 1.1rem;
}
/* Media Queries for Responsiveness */
@media (max-width: 767px) {
- .navbar-toggler {
- border-color: #fff;
- }
-
- .navbar-toggler-icon {
- background-color: #fff;
- }
-
- .hero-section h1 {
- font-size: 2rem;
- }
-
- .feature-card {
- padding: 20px;
- }
-
- .team-img {
- width: 120px;
- height: 120px;
- }
-
- .btn-outline-dark {
- padding: 10px 20px;
- }
+ .navbar-toggler {
+ border-color: #fff;
+ }
+
+ .navbar-toggler-icon {
+ background-color: #fff;
+ }
+
+ .hero-section h1 {
+ font-size: 2rem;
+ }
+
+ .feature-card {
+ padding: 20px;
+ }
+
+ .team-img {
+ width: 120px;
+ height: 120px;
+ border: 5px solid orange; /* Orange outline */
+ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Optional: Adds a subtle shadow */
+ transition: transform 0.3s ease; /* Smooth scaling effect */
+ }
+
+ .btn-outline-dark {
+ padding: 10px 20px;
+ }
+}
+/* General Reset */
+* {
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+}
+
+/* Responsive layout for smaller screens */
+@media (max-width: 768px) {
+ body {
+ font-size: 16px; /* Adjust font size */
+ padding: 10px;
+ }
+
+ .container {
+ display: flex;
+ flex-direction: column; /* Stack elements vertically */
+ padding: 5px;
+ }
+
+ img {
+ width: 100%; /* Prevent images from overflowing */
+ height: auto;
+ }
+
+ nav {
+ display: flex;
+ flex-direction: column; /* Adjust nav links */
+ gap: 10px;
+ }
+}
+/* Scroll Animation */
+.animate-on-scroll {
+ opacity: 0;
+ transform: translateY(20px);
+ transition: all 0.5s ease-in-out;
+}
+
+.animate-on-scroll.visible {
+ opacity: 1;
+ transform: translateY(0);
+}
+
+/* Fade-In Example */
+.fade-in {
+ opacity: 0;
+ transition: opacity 0.5s ease-in-out;
+}
+
+.fade-in.visible {
+ opacity: 1;
+}
+/* Description Fonts Styling */
+.description {
+ font-family: "Roboto", sans-serif; /* Modern and clean font */
+ font-size: 28px; /* Adjust to your preference */
+ line-height: 1.3; /* Better readability */
+ color: #ffffff; /* Neutral text color for readability */
+ letter-spacing: 0.3px; /* Slight spacing for clarity */
+ text-align: center; /* Clean alignment for longer text */
+}
+
+.description em {
+ font-style: italic; /* Emphasized text */
+}
+
+.description strong {
+ font-weight: bold; /* Bold for important points */
}
@@ -6,7 +7,8 @@
## 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.
@@ -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.
diff --git a/docs/data/index.json b/docs/data/index.json
index 79aaa90..8362d87 100644
--- a/docs/data/index.json
+++ b/docs/data/index.json
@@ -1,5 +1,5 @@
{
- "title": "e20-3yp-TIVO-Desk-Companion",
+ "title": "e20-3yp-PE-BO-Desk-Companion",
"team": [
{
diff --git a/docs/index.html b/docs/index.html
index 2f6e88b..b4e6636 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -4,7 +4,7 @@