Project-Document-Template
Project-Document-Template
The System Study Document outlines the analysis of the WebOS project to be developed. This
WebOS aims to provide a unified platform for task management, application launching, a
custom terminal, and a calculator. The document includes system requirements, user needs, and
the functional scope of the project.
3. Requirements Gathering
- User Interviews: Conducted with developers, students, and professionals to identify key
features and challenges in existing systems.
- Surveys: Distributed to gather data on preferred functionalities for a web-based OS.
6. Feasibility Analysis
- Technical Feasibility:
• The WebOS will leverage widely-used web technologies such as HTML5, CSS,
JavaScript (React for UI),python (backend).
• Cross-browser compatibility and PWA (Progressive Web App) features will be
implemented.
- Economic Feasibility:
• Project budget estimated at ₹1000, with the potential for cost savings by reducing the
need for multiple standalone applications.
III. Vision Document (VSD)
1. Vision Statement
The WebOS project aims to redefine the digital workspace experience by offering a lightweight,
webbased operating system that combines essential utilities like task management, a custom
terminal, application launching, and a calculator. This platform will be accessible across devices
and tailored for multitasking, efficiency, and collaboration.
2. Business Objectives
- Enhance productivity for students, developers, and professionals by providing an
integrated suite of tools within a unified platform.
- Reduce dependency on multiple standalone applications by 50%, offering a seamless and
centralized web-based alternative.
- Drive adoption among tech-savvy individuals and organizations seeking innovative and
cost-effective solutions.
3. Key Features
- Custom Terminal: Execute commands, scripts, and manage processes through a web-based
terminal.
- Task Management:
Task creation, categorization, and status tracking.
Deadline management and reminders.
• Progress tracking with visual indicators.
- Application Launcher: Quick access to web-based applications and system utilities.
- Calculator: A responsive and feature-rich calculator for quick computations.
- User Management: Role-based permissions for admins and users, ensuring security and
personalization.
- Collaboration Tools (Future Scope): Adding features like commenting, notifications, and
shared task views to enhance team interaction.
4. Target Audience
- Developers and Tech Enthusiasts: Seeking a lightweight, customizable environment for
coding and multitasking.
- Students: Requiring task management, basic utilities, and productivity tools in a unified
platform.
- Small Teams and Freelancers: Needing a cost-effective alternative to traditional operating
systems for collaborative workflows.
5. Success Metrics
- User Adoption Rate: Targeting 100 active users within the first six months post-launch.
- Performance Feedback: Achieving at least 85% user satisfaction in surveys conducted after
the initial release.
- Engagement Metrics: Monitoring task management and application launcher usage to
measure feature adoption
IV. Supplementary Specification (SSN)
1. Introduction
The Supplementary Specification provides additional details that complement the functional
requirements outlined in the System Study Document for the WebOS project. It covers use
cases, performance, security, and usability requirements essential for delivering a robust and
user-friendly web-based operating system.
Use Cases:
Use Case 1: Launch Custom Terminal
• Actors: User
Precondition: User is logged into the WebOS.
Main Flow:
1. User clicks on the "Terminal" icon in the application launcher.
3. User enters commands, and the system processes and displays the results in real
time.
Use Case 2: Create and Manage Tasks
• Actors: User
• Precondition: User is logged into the WebOS and has access to the Task Manager.
• Main Flow:
1. User navigates to the Task Manager.
3. Performance Requirements
- The WebOS dashboard must load within 5 seconds under normal load conditions.
- Opening a terminal or launching an application should take less than 3 seconds.
- Task creation and updates should reflect in real time with a response time of less than 2
seconds.
4. Security Requirements
- User authentication must be secured with hashed and salted passwords.
- All data transmissions must use HTTPS for end-to-end encryption
-User sessions should expire after a configurable period of inactivity.
- Each user’s data must be isolated to prevent unauthorized access.
5. Usability Requirements
- The interface must be responsive and accessible on both desktop and mobile web browsers.
- The system should support touch gestures for mobile users.
- First-time users must be guided through an onboarding tutorial explaining key features.
- Icons and navigation should follow standard conventions for intuitive use.
V. Data Dictionary (Web Cache Memory)
User Data
{
"user_id": "unique string identifier", // Unique ID for each user
"username": "string", // User's login name
"password_hash": "string", // Hashed password for authentication
"role": "string", // Role of the user (e.g., 'Admin', 'User')
"session_data": { // Session-specific data
"last_login": "datetime string", // Timestamp of last login
"preferences": { // User-specific preferences
"theme": "string", // e.g., 'dark' or 'light'
"notifications": "boolean" // Notification toggle
}
}
}
Task Data
{
"task_id": "unique string identifier", // Unique ID for each task
"task_title": "string", // Title of the task
"task_description": "string", // Detailed description of the task
"due_date": "datetime string", // Deadline for the task
"assigned_to": "user_id string", // User ID of the assignee
"status": "string", // Status (e.g., 'Pending', 'In Progress', 'Completed')
"created_at": "datetime string", // Timestamp of task creation
"updated_at": "datetime string" // Timestamp of last update
}
Application Data
{
"application_id": "unique string identifier", // Unique ID for each app
"application_name": "string", // Name of the app (e.g., 'Calculator')
"last_launched": "datetime string", // Timestamp of the last launch
"usage_count": "integer" // Number of times the app was launched
}
{
"command_id": "unique string identifier", // Unique ID for each command
"command_text": "string", // The command entered by the user
"command_output": "string", // Output or result of the command
"executed_at": "datetime string" // Timestamp of command execution
}
VI. Data Structure Design (Web Cache)
"Users": [
{
"user_id": "unique string identifier", // Primary Key, ensures uniqueness
"username": "string", // Unique, required
"password_hash": "string", // Required, stores hashed passwords
"role": "string", // Role of the user (e.g., 'Admin', 'User')
"created_at": "datetime string" // Timestamp of user creation
}
]
- Integrity Constraints:
• user_id must be unique.
• username must be unique and not null.
• password_hash cannot be null.
"Tasks": [
{
"task_id": "unique string identifier", // Primary Key, ensures uniqueness
"task_title": "string", // Required, title of the task
"task_description": "string", // Optional, detailed description
"due_date": "datetime string", // Optional, deadline for the task
"assigned_to": "user_id string", // Foreign Key, links to Users.user_id
"status": "string", // Default: 'Pending' (e.g., 'Pending', 'In Progress', 'Completed')
"created_at": "datetime string", // Timestamp of task creation
"updated_at": "datetime string" // Timestamp of last update
}
]
- Integrity Constraints:
• task_id must be unique.
• task_title cannot be null.
• assigned_to must reference an existing user_id in the Users model.
• status defaults to 'Pending' if not provided.
+-----------------------+
| Task |
+-----------------------+
| - task_id: string | // Unique identifier for each task
| - task_title: string | // Title of the task
| - task_description: string | // Detailed task description
| - due_date: DateTime | // Deadline for the task
| - assigned_to: string | // user_id of the assignee
| - status: string | // Status (e.g., Pending, Completed)
+-----------------------+
| + createTask(): void | // Creates a new task
| + updateStatus(): void| // Updates the status of the task
| + assignUser(): void | // Assigns the task to a user
+-----------------------+
+-----------------------+
| WebCache |
+-----------------------+
| - users: array[User] | // Array of User objects
| - tasks: array[Task] | // Array of Task objects
+-----------------------+
| + addUser(user: User): void | // Adds a user to the cache
| + addTask(task: Task): void | // Adds a task to the cache
| + getUserById(user_id: string): User| // Retrieves a user by ID
| + getTaskById(task_id: string): Task| // Retrieves a task by ID
| + listTasksByUser(user_id: string): array[Task] | // Lists tasks assigned to a user
+-----------------------+
Terminal:
Calculator:
X. Coding
Webos.html
1. <!DOCTYPE html>
2. <html lang="en">
3. <head>
4. <meta charset="UTF-8">
5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
6. <title>WebOs</title>
7. <link rel="stylesheet" href="../static/webos/webos.css">
8. </head>
9. <body>
10. <div class="this-pc-icon">
11. <button class="icon-button" id="this-pc-button">
12. <div class="icon"></div>
13. <div class="icon-name">This PC</div>
14. </button>
15. </div>
16. <div class="games-icon">
17. <button class="icon-button" id="games-button">
18. <div class="icon">🎮</div>
19. <div class="icon-name">Games</div>
20. </button>
21. </div>
22. <div class="notepad-icon">
23. <button class="icon-button" id="notepad-button">
24. <div class="icon">📝</div>
25. <div class="icon-name">Notepad</div>
26. </button>
27. </div>
28. <div class="about-icon">
29. <button class="icon-button" id="about-button">
30. <div class="icon">📋</div>
31. <div class="icon-name">About</div>
32. </button>
33. </div>
34.
35.
36. <div class="taskbar">
37. <div class="icons">
38. <div class="home-icon">
39. <button class="icon-button" id="home-button">
40. <div class="icon">🏠</div>
41.
42. </button>
43. </div>
44.
45. <div class="search-icon">
46. <button class="icon-button" id="search-button">
47. <div class="icon">🔍</div>
48.
49. </button>
50. </div>
51.
52. <div class="files-icon">
53. <button class="icon-button" id="files-button">
54. <div class="icon">📁</div>
55.
56. </button>
57. </div>
58.
59. <div class="settings-icon">
60. <button class="icon-button" id="settings-button">
61. <div class="icon">⚙️</div>
62.
63. </button>
64. </div>
65.
66. <div class="calculator-icon">
67. <button class="icon-button" id="calculator-button">
68. <div class="icon">🔢</div>
69.
70. </button>
71. </div>
72.
73. <div class="terminal-icon">
74. <button class="icon-button" id="terminal-button">
75. <div class="icon">👾</div>
76.
77. </button>
78. </div>
79.
80. </div>
81. <div class="date-time">
82. <div class="AI-icon">
83. <button class="icon-button" id="AI-button">
84. <div class="icon">🤖</div>
85.
86. </button>
87. </div>
88. <div class="time-date-container">
89. <span id="time-display"></span>
90. <span id="date-display"></span>
91. </div>
92.
93. </div>
94. </div>
95.
96. <script src="../static/webos/webos.js"></script> <!-- Link to
your JavaScript file -->
97. </body>
98. </html>
Webos.css
1. body {
2. margin: 0;
3. font-family: Arial, sans-serif;
4. overflow: hidden; /* Prevents scrolling */
5. background-image: url('wallpaper.jpg'); /* Use your wallpaper image */
6. background-size: cover; /* Ensures the image covers the entire
background */
7. background-position: center; /* Centers the image */
8. background-repeat: no-repeat; /* Prevents the image from repeating */
9. height: 100vh; /* Ensures the body takes the full height of the
viewport */
10. }
11.
12. .taskbar {
13. position: fixed;
14. bottom: 0;
15. left: 0;
16. right: 0;
17. height: 60px; /* Increased height */
18. background-color: rgba(80, 46, 44, 0.8); /* Slightly transparent
*/
19. color: white;
20. display: flex;
21. align-items: center;
22. padding: 0 20px;
23. box-shadow: 0 -1px 5px rgba(0, 0, 0, 0.3);
24. }
25.
26. .taskbar .icons {
27. display: flex;
28. gap: 15px;
29. }
30.
31. .taskbar .icon {
32. color: white;
33. text-decoration: none;
34. font-size: 24px;
35. transition: color 0.3s;
36. }
37.
38. .taskbar .icon:hover {
39. color: #3498db;
40. }
41.
42. .this-pc-icon, .games-icon, .notepad-icon, .about-icon {
43. padding: 10px; /* Padding around the icon and text */
44. border-radius: 5px; /* Rounded corners */
45. font-weight: bold; /* Bold text */
46. position: absolute; /* Positioning in the top left corner */
47. display: flex; /* Flexbox to align icon and text */
48. flex-direction: column; /* Stack icon and text vertically */
49. align-items: center; /* Center items horizontally */
50. color: rgba(192, 57, 43, 0.9); /* Iron Man red color with
transparency */
51. text-shadow: 0 0 5px rgba(0, 0, 0, 0.5); /* Optional shadow for
better visibility */
52. }
53.
54. .this-pc-icon {
55. top: 20px; /* Distance from the top for This PC */
56. left: 20px; /* Distance from the left for This PC */
57. }
58.
59. .games-icon {
60. top: 120px; /* Distance from the top for Games */
61. left: 20px; /* Align with the left of This PC */
62. }
63.
64. .notepad-icon {
65. top: 220px; /* Adjust this value to position it below the Games
icon */
66. left: 20px; /* Align with the left of This PC */
67. }
68.
69. .about-icon {
70. top: 320px; /* Adjust this value to position it below the
Notepad icon */
71. left: 20px; /* Align with the left of This PC */
72. }
73.
74. .icon {
75. font-size: 48px; /* Increased size for the icon */
76. }
77.
78. .icon-name {
79. font-size: 16px; /* Font size for the name */
80. margin-top: 5px; /* Space between the icon and the text */
81. text-align: center; /* Center the text */
82. }
83.
84. .date-time {
85. font-size: 18px; /* Adjust the size of the time */
86. color: white; /* Text color */
87. margin-left: auto; /* Align to the right */
88. display: flex; /* Use flexbox for layout */
89. align-items: center; /* Center items vertically */
90. }
91.
92. .time-date-container {
93. display: flex;
94. flex-direction: column; /* Stack time and date vertically */
95. align-items: flex-end; /* Align text to the right */
96. margin-right:0; /* Space between date-time and AI icon */
97. }
98.
99. #time-display {
100. font-size: 20px; /* Larger size for time */
101. font-weight: bold; /* Bold text for the time */
102. margin: o; /* Remove any default margin */
103. }
104.
105. #date-display {
106. font-size: 14px; /* Slightly smaller size for date */
107. margin: 0; /* Ensure no margin */
108. line-height: 1; /* Ensure no extra space between lines */
109. padding-top: 0; /* Ensure no padding */
110. }
111.
112. .AI-icon {
113. font-size: 30px; /* Adjust the size of the AI icon */
114. margin-left: 50px; /* Space between the date-time and the AI
icon */
115. cursor: pointer; /* Change cursor to pointer when hovering */
116. transition: color 0.3s; /* Smooth color transition on hover */
117. }
118.
119. .AI-icon:hover {
120. color: #3498db; /* Change color on hover for better visibility
*/
121. }
122.
123. .desktop-icons {
124. position: absolute; /* Positioned relative to the body */
125. top: 200px; /* Adjust to position it lower than the games icon
*/
126. left: 20px; /* Align to the left */
127. display: flex;
128. flex-direction: column; /* Stack vertically */
129. gap: 10px; /* Space between icons */
130. }
131.
132. .icon-button {
133. background: transparent; /* No background */
134. border: none; /* No border */
135. cursor: pointer; /* Pointer cursor on hover */
136. display: flex; /* Align icon and name */
137. flex-direction: column; /* Stack vertically */
138. align-items: center; /* Center align */
139. outline: none; /* Remove outline on focus */
140. padding: 10px; /* Add padding */
141. }
142.
143. .icon-button:hover {
144. opacity: 0.8; /* Slightly transparent on hover */
145. }
Webos.js
1. function updateTime() {
2. const now = new Date();
3.
4. // Format time as "02:23 PM"
5. const timeOptions = { hour: '2-digit', minute: '2-digit', hour12: true
};
6. const timeString = now.toLocaleTimeString('en-US', timeOptions);
7.
8. // Format date as "19-10-2024"
9. const dateOptions = { day: '2-digit', month: '2-digit', year:
'numeric' };
10. const dateString = now.toLocaleDateString('en-GB', dateOptions);
11.
12. // Display time and date
13. document.getElementById('time-display').textContent =
timeString;
14. document.getElementById('date-display').textContent =
dateString;
15. }
16.
17. // Call updateTime every second to keep time updated
18. setInterval(updateTime, 1000);
19.
20. // Function to handle button click
21. function handleButtonClick(iconName) {
22. alert(`Opening ${iconName}...`); // Replace with your desired
action
23. // Example: window.location.href = `$
{iconName.toLowerCase()}.html`; // Navigate to a new page
24. }
25.
26. // Function to handle right-click context menu
27. function handleRightClick(event, iconName) {
28. event.preventDefault(); // Prevent the default context menu
29. alert(`Right-clicked on ${iconName}`); // Custom action (replace
with your custom menu or action)
30. }
31.
32. // Add click event listeners for buttons
33. document.getElementById('this-pc-button').addEventListener('click',
function() {
34. handleButtonClick('This PCfgwyegyg');
35. });
36. document.getElementById('games-button').addEventListener('click',
function() {
37. handleButtonClick('Games');
38. });
39. document.getElementById('notepad-button').addEventListener('click',
function() {
40. window.open('/notepad', '_blank', 'width=500,height=500'); //
Opens in a new window
41. });
42.
43. document.getElementById('about-button').addEventListener('click',
function() {
44. handleButtonClick('About');
45. });
46.
47. document.getElementById('home-button').addEventListener('click',
function() {
48. handleButtonClick('home');
49. });
50.
51. document.getElementById('search-button').addEventListener('click',
function() {
52. handleButtonClick('scearch');
53. });
54.
55. document.getElementById('files-button').addEventListener('click',
function() {
56. handleButtonClick('files');
57. });
58.
59. document.getElementById('settings-button').addEventListener('click',
function() {
60. handleButtonClick('setting');
61. });
62.
63. document.getElementById('AI-button').addEventListener('click',
function() {
64. handleButtonClick('ai ');
65. });
66.
67. document.getElementById('calculator-
button').addEventListener('click', function() {
68. handleButtonClick('CALCULATOR');
69. });
70.
71. document.getElementById('terminal-button').addEventListener('click',
function() {
72. handleButtonClick('terminal');
73. });
74.
75. function loadFile(fileName) {
76. fetch(`/load?file=${fileName}`)
77. .then(response => response.json())
78. .then(data => {
79. if (data.status === "success") {
80. // Create a window for the file
81. const windowDiv = document.createElement("div");
82. windowDiv.className = "window";
83. windowDiv.innerHTML = `
84. <div class="window-header">
85. <span class="window-title">$
{fileName}</span>
86. <button class="close-button">✖</button>
87. </div>
88. <div class="window-content">
89. ${data.html}
90. </div>
91. `;
92.
93. // Append the window to the body
94. document.body.appendChild(windowDiv);
95.
96. // Add close functionality
97. windowDiv.querySelector(".close-
button").addEventListener("click", () => {
98. document.body.removeChild(windowDiv);
99. });
100. } else {
101. alert(data.message);
102. }
103. })
104. .catch(error => {
105. console.error("Error loading file:", error);
106. });
107. }
108.
109. // Attach event listeners to icons
110. document.getElementById("calculator-
button").addEventListener("click", () => loadFile("calculator.html"));
111. document.getElementById("notepad-button").addEventListener("click",
() => loadFile("notepad.html"));
112. document.getElementById("terminal-button").addEventListener("click",
() => loadFile("terminal.html"));
As we look to the future of our Task Management Project, several enhancements could
significantly improve functionality and user experience. These include:
1.AI-Powered Task Recommendations: Implementing machine learning algorithms to suggest
tasks based on user behavior, deadlines, and priority levels. This feature would help users
manage their workload more effectively.
2.Mobile Application Development: Expanding accessibility through a dedicated mobile app
would allow users to manage their tasks on-the-go, ensuring that productivity is not limited to
desktop environments.
3.Integration with Third-Party Tools: Adding integration capabilities with popular tools like
Google Calendar, Slack, and project management software (e.g., Trello, Asana) would enhance
collaboration and streamline workflow.
4.Customizable Dashboards: Allowing users to personalize their dashboards would improve user
engagement and provide tailored insights into their task management processes.
5.Enhanced Analytics and Reporting: Providing detailed analytics on task completion rates, time
management, and team productivity would help users identify bottlenecks and optimize their
workflows.
6.Collaborative Features: Introducing real-time collaboration tools, such as shared task lists and
discussion boards, would foster teamwork and improve communication among users.
By implementing these enhancements, we can ensure that our Task Management Project
continues to meet the evolving needs of users and remains competitive in the market.
XIII. Conclusion
In conclusion, the Task Management Project represents a significant step forward in addressing
the challenges of organizing and prioritizing tasks in both personal and professional settings.
Through its user-friendly interface and essential features, it has already begun to enhance
productivity for many users.
As we move forward, the identified future enhancements promise to elevate the platform even
further, making it not just a tool for task management but a comprehensive solution for
productivity and collaboration. By embracing innovation and user feedback, we can create a
more dynamic and responsive environment that empowers users to achieve their goals
efficiently.
Continued commitment to development, coupled with a focus on user needs, will ensure the
longevity and relevance of the Task Management Project in an ever-changing technological
landscape. PROJECT CERTIFICATE
CERTIFICATE OF COMPLETION
This is to certify that: **[Student Name]** **[Registeration ]** has successfully completed
the project titled:**"Task Management System"**as part of the requirements for the degree in
Computer Science. This project was carried out under the guidance of:**[Supervisor's Name]**
**[Designation]**. The project involved the design, development, and implementation of a
software application aimed at enhancing productivity through effective task management. The
methodologies employed included Agile Software Development and principles of Software
Engineering, ensuring highquality deliverables.The project was submitted on **[Submission
Date]** and has been evaluated for its technical depth, innovation, and practical applicability in
real-world scenarios.