Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Created a Basic Chat Interface with HTML and CSS #14 #69

Closed
wants to merge 11 commits into from
Closed

Created a Basic Chat Interface with HTML and CSS #14 #69

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
c9b10e6
Added CSV data cleaner script and README
MVENKATESH786 Oct 21, 2024
1111341
Added CSV data cleaner script and README
MVENKATESH786 Oct 21, 2024
4f57036
Add profile information
MVENKATESH786 Oct 21, 2024
0b13f4b
#
MVENKATESH786 Oct 21, 2024
60064d8
Resolved merge conflict in README.md
MVENKATESH786 Oct 21, 2024
d132517
Added customer service bot Page
MVENKATESH786 Oct 21, 2024
acdfbfa
Added initial greeting message for customer service bot
MVENKATESH786 Oct 21, 2024
583a632
Resolved the conflicts
MVENKATESH786 Oct 24, 2024
d6c6272
Created a basic chat interface with HTML and CSS #14
MVENKATESH786 Oct 24, 2024
f9b9b26
"Updated width of .active class from 150px to 170px"
MVENKATESH786 Oct 24, 2024
42fcff7
"Added project description, author, and contribution notes to data_pr…
MVENKATESH786 Oct 24, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
249 changes: 249 additions & 0 deletions chatbots/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,249 @@
<html>

<head>
<title>Customer Service Bot</title>
<link rel="stylesheet" href="styles.css" />
<!-- Import this CDN to use icons -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css" />
</head>

<body>
<!-- Main container -->
<div class="container">
<!-- msg-header section starts -->
<div class="msg-header">
<div class="container1">
<img src="robot.png" class="msgimg" alt="Customer Service Bot" />
<!-- Added alt attribute for accessibility -->
<div class="active">
<p>Customer Service Bot</p>
</div>
</div>
</div>
<!-- msg-header section ends -->

<!-- Chat inbox -->
<div class="chat-page">
<div class="msg-inbox">
<div class="chats">
<!-- Message container -->
<div class="msg-page">
<!-- Incoming messages -->
<div class="received-chats">
<div class="received-chats-img">
<img src="robot.png" alt="Bot Image" /> <!-- Added alt attribute -->
</div>
<div class="received-msg">
<div class="received-msg-inbox">
<p>
Hey there! I’m your Customer Service Bot. How can I assist you today? If you have any questions or need help with
something, just let me know and I’ll do my best to assist you! 😊
</p>
<span class="time">02:06 AM | October 24</span>
</div>
</div>
</div>
<!-- Outgoing messages -->
<div class="outgoing-chats">
<div class="outgoing-chats-img">
<img src="user1.png" alt="User Image" /> <!-- Added alt attribute -->
</div>
<div class="outgoing-msg">
<div class="outgoing-chats-msg">
<p class="multi-msg">
What is Hacktoberfest?
</p>
<span class="time">02:06 AM | October 24</span>
</div>
</div>
</div>

<!-- Further conversations -->
<!-- I fixed the duplication of elements here and re-ordered them -->

<div class="received-chats">
<div class="received-chats-img">
<img src="robot.png" alt="Bot Image" />
</div>
<div class="received-msg">
<div class="received-msg-inbox">
<p>
Hacktoberfest is an annual event organized by DigitalOcean and GitHub to
encourage open-source contributions. Participants can earn limited edition
T-shirts and other rewards by making pull requests to eligible repositories.
</p>
<span class="time">02:06 AM | October 24</span>
</div>
</div>
</div>

<div class="outgoing-chats">
<div class="outgoing-chats-img">
<img src="user1.png" alt="User Image" />
</div>
<div class="outgoing-msg">
<div class="outgoing-chats-msg">
<p>
How can I contribute to Hacktoberfest?
</p>
<span class="time">02:32 AM | October 24</span>
</div>
</div>
</div>

<!-- Messages about contributions -->
<div class="received-chats">
<div class="received-chats-img">
<img src="robot.png" alt="Bot Image" />
</div>
<div class="received-msg">
<div class="received-msg-inbox">
<p>
You can contribute by finding an open-source project that interests you, making
changes to the code, and submitting a pull request. Ensure the repository is
participating in Hacktoberfest!
</p>
<span class="time">02:32 AM | October 24</span>
</div>
</div>
</div>

<!-- Outgoing message -->
<div class="outgoing-chats">
<div class="outgoing-chats-img">
<img src="user1.png" alt="User Image" />
</div>
<div class="outgoing-msg">
<div class="outgoing-chats-msg">
<p class="multi-msg">
What qualifies as a valid pull request for Hacktoberfest?
</p>
<span class="time">03:15 AM | October 24</span>
</div>
</div>
</div>

<!-- More responses -->
<div class="received-chats">
<div class="received-chats-img">
<img src="robot.png" alt="Bot Image" />
</div>
<div class="received-msg">
<div class="received-msg-inbox">
<p>
A valid pull request must be submitted to a public repository that is
participating in Hacktoberfest. The PR should also be merged or labeled as
"hacktoberfest-accepted" by the repository maintainers.
</p>
<span class="time">03:15 AM | October 24</span>
</div>
</div>
</div>

<!-- Outgoing message -->
<div class="outgoing-chats">
<div class="outgoing-chats-img">
<img src="user1.png" alt="User Image" />
</div>
<div class="outgoing-msg">
<div class="outgoing-chats-msg">
<p>
How many pull requests do I need to make to receive a T-shirt?
</p>
<span class="time">03:32 AM | October 24</span>
</div>
</div>
</div>

<!-- Further Bot messages -->

<div class="received-chats">
<div class="received-chats-img">
<img src="robot.png" alt="Bot Image" />
</div>
<div class="received-msg">
<div class="received-msg-inbox">
<p>
You need to make at least four valid pull requests during the Hacktoberfest
period to qualify for a T-shirt or other rewards.
</p>
<span class="time">03:33 AM | October 24</span>
</div>
</div>
</div>

<div class="outgoing-chats">
<div class="outgoing-chats-img">
<img src="user1.png" alt="User Image" />
</div>
<div class="outgoing-msg">
<div class="outgoing-chats-msg">
<p class="multi-msg">
Can I contribute to my own repositories?
</p>
<span class="time">04:38 AM | October 24</span>
</div>
</div>
</div>

<div class="received-chats">
<div class="received-chats-img">
<img src="robot.png" alt="Bot Image" />
</div>
<div class="received-msg">
<div class="received-msg-inbox">
<p>
Yes, you can contribute to your own repositories, but you must ensure that they
meet the Hacktoberfest participation criteria, such as being open-source and
public.
</p>
<span class="time">04:39 AM | October 24</span>
</div>
</div>
</div>

<div class="outgoing-chats">
<div class="outgoing-chats-img">
<img src="user1.png" alt="User Image" />
</div>
<div class="outgoing-msg">
<div class="outgoing-chats-msg">
<p>
How can I track my contributions during Hacktoberfest?
</p>
<span class="time">10:32 AM | October 24</span>
</div>
</div>
</div>
<div class="received-chats">
<div class="received-chats-img">
<img src="robot.png" alt="Bot Image" />
</div>
<div class="received-msg">
<div class="received-msg-inbox">
<p>
You can track your contributions on the Hacktoberfest website by linking your GitHub account. It will show your
progress, including the number of pull requests submitted and their statuses.
</p>
<span class="time">10:32 AM | October 24</span>
</div>
</div>
</div>

</div>
</div>
</div>
<!-- msg-bottom section -->
<div class="msg-bottom">
<div class="input-group">
<input type="text" class="form-control" placeholder="Write message..." />
<span class="input-group-text send-icon">
<i class="bi bi-send"></i>
</span>
</div>
</div>
</div>
</div>
</body>

</html>
Binary file added chatbots/robot.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading