Skip to content

frontend #1

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

Open
tanish20022005 wants to merge 1 commit into
base: main
Choose a base branch
from
Open

frontend #1

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
Binary file added frontend/Rectangle.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.
Binary file added frontend/Rectangle1.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.
Binary file added frontend/Rectangle2.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.
Binary file added frontend/icon_back.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.
115 changes: 115 additions & 0 deletions frontend/msg.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,115 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Connected Devices</title>
<style>
body {
font-family: -apple-system, BlinkMacSystemFont, sans-serif;
margin: 0;
padding: 0;
background: #fff;
}

.container {
padding: 20px;
}

.header {
display: flex;
align-items: center;
gap: 10px;
font-size: 20px;
font-weight: bold;
}

.devices-title {
margin-top: 30px;
font-size: 22px;
font-weight: 600;
}

.subtitle {
color: gray;
font-size: 14px;
margin-bottom: 20px;
}

.device {
display: flex;
align-items: center;
background-color: #eee;
padding: 12px 16px;
border-radius: 12px;
margin-bottom: 12px;
font-size: 18px;
font-weight: 500;
}

.device img {
width: 40px;
height: 40px;
border-radius: 50%;
margin-right: 12px;
}

.alice { background-color: #f4b1b1; }
.bob { background-color: #fce49c; }
.andrew { background-color: #d5c7f7; }

.bottom-nav {
position: fixed;
bottom: 0;
width: 100%;
background: #fff;
display: flex;
justify-content: space-around;
border-top: 1px solid #ddd;
padding: 10px 0;
}

.bottom-nav img {
width: 30px;
height: 30px;
}

.back-arrow {
font-size: 24px;
cursor: pointer;
}
</style>
</head>
<body>
<div class="container">
<div class="header">
<span class="back-arrow">&#8592;</span>
Connected
</div>

<div class="devices-title">Nearby Devices</div>
<div class="subtitle">Connected to 3 Devices</div>

<div class="device alice">
<img src="Rectangle.png" alt="Alice" />
Alice
</div>

<div class="device bob">
<img src="Rectangle1.png" alt="Bob" />
Bob
</div>

<div class="device andrew">
<img src="Rectangle2.png" alt="Andrew" />
Andrew
</div>
</div>

<div class="bottom-nav">
<img src="https://img.icons8.com/fluency/48/network.png" alt="Network" />
<img src="https://img.icons8.com/fluency/48/speech-bubble.png" alt="Chat" />
<img src="https://img.icons8.com/fluency/48/marker.png" alt="Location" />
</div>
</body>
</html>
169 changes: 169 additions & 0 deletions frontend/page3.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,169 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Messages</title>
<style>
body {
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, sans-serif;
background-color: #fff;
}

.container {
padding: 20px;
}

.header {
/* border-bottom: 1px solid #000000; */
display: flex;
align-items: center;
margin-bottom: 50px;
gap: 25px;
font-size: 32px;
font-weight: bold;

}

.chat {
margin-top: 20px;
display: flex;
flex-direction: column;
gap: 10px;
}

.message {
display: flex;
align-items: center;
padding: 10px 14px;
border-radius: 20px;
max-width: 75%;
font-size: 14px;
font-weight: 500;
position: relative;
}

.left {
background-color: #d5c7f7;
align-self: flex-start;
border-top-left-radius: 0;
}

.right {
background-color: #fdd79d;
align-self: flex-end;
flex-direction: row-reverse;
border-top-right-radius: 0;
}

.message img {
width: 36px;
height: 36px;
border-radius: 50%;
margin: 0 10px;
}

.name {
font-weight: bold;
margin-bottom: 2px;
}

.text {
margin: 0;
}

.input-area {
position: fixed;
bottom: 0;
width: 98%;
padding: 10px;
display: flex;
align-items: center;
background: #fff;
border-top: 1px solid #ccc;
}

.input-area input {
flex: 1;
padding: 10px 15px;
border: 1px solid #ccc;
border-radius: 20px;
font-size: 14px;
margin-right: 10px;
}

.mic-btn {
background-color: #1e90ff;
border: none;
border-radius: 50%;
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
}

.mic-btn img {
width: 22px;
height: 22px;
}
</style>
</head>
<body>
<div class="container">
<div class="header">
<span> <img src="icon_back.png" alt="Jacob"></span> Messages
</div>

<div class="chat">
<div class="message right">
<div>
<div class="name">Jacob</div>
<div class="text">Hello</div>
</div>
<img src="Rectangle.png" alt="Jacob">
</div>

<div class="message left">
<img src="Rectangle1.png" alt="Alice">
<div>
<div class="name">Alice</div>
<div class="text">Hello!</div>
</div>
</div>

<div class="message left">
<img src="Rectangle1.png" alt="Alice">
<div>
<div class="name">Alice</div>
<div class="text">How you doing?</div>
</div>
</div>

<div class="message right">
<div>
<div class="name">Jacob</div>
<div class="text">Just Fine!</div>
</div>
<img src="Rectangle.png" alt="Jacob">
</div>

<div class="message right">
<div>
<div class="name">Jacob</div>
<div class="text">Need a little help!</div>
</div>
<img src="Rectangle.png" alt="Jacob">
</div>
</div>
</div>

<div class="input-area">
<input type="text" placeholder="Message">
<button class="mic-btn">
<img src="https://img.icons8.com/ios-filled/50/ffffff/microphone.png" alt="Mic">
</button>
</div>
</body>
</html>
53 changes: 1 addition & 52 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,55 +1,4 @@
<!--<!-- index.html -->-->
<!--<!DOCTYPE html>-->
<!--<html lang="en">-->
<!---->
<!--<head>-->
<!-- <meta charset="UTF-8">-->
<!-- <meta name="viewport" content="width=device-width, initial-scale=1.0">-->
<!-- <title>Mesh Chat</title>-->
<!-- <style>-->
<!-- body { font-family: Arial; padding: 20px; background: #f2f2f2; }-->
<!-- #messages { border: 1px solid #ccc; padding: 10px; height: 300px; overflow-y: scroll; background: #fff; }-->
<!-- #input { margin-top: 10px; }-->
<!-- </style>-->
<!--</head>-->
<!---->
<!--<body>-->
<!-- <h2>Welcome to Mesh Chat</h2>-->
<!-- <div id="messages"></div>-->
<!-- <div id="input">-->
<!-- <input type="text" id="sender" placeholder="Your name" />-->
<!-- <input type="text" id="message" placeholder="Type your message" />-->
<!-- <button onclick="sendMessage()">Send</button>-->
<!-- </div>-->
<!---->
<!-- <script>-->
<!-- // CHANGE THIS TO Phone A's IP!-->
<!-- const serverIP = "192.168.75.5"; -->
<!-- const ws = new WebSocket(`ws://${serverIP}:8080/ws`);-->
<!---->
<!-- ws.onopen = () => console.log("✅ Connected to server");-->
<!---->
<!-- ws.onmessage = (event) => {-->
<!-- const msg = JSON.parse(event.data);-->
<!-- const messages = document.getElementById("messages");-->
<!-- const item = document.createElement("div");-->
<!-- item.textContent = `${msg.sender}: ${msg.content}`;-->
<!-- messages.appendChild(item);-->
<!-- messages.scrollTop = messages.scrollHeight;-->
<!-- };-->
<!---->
<!-- function sendMessage() {-->
<!-- const sender = document.getElementById("sender").value;-->
<!-- const content = document.getElementById("message").value;-->
<!-- if (sender && content) {-->
<!-- ws.send(JSON.stringify({ sender, content }));-->
<!-- document.getElementById("message").value = "";-->
<!-- }-->
<!-- }-->
<!-- </script>-->
<!--</body>-->
<!---->
<!--</html>-->


<!DOCTYPE html>
<html lang="en">
Expand Down