Skip to content

Commit

Permalink
Inital Commit
Browse files Browse the repository at this point in the history
  • Loading branch information
@rahulbharti5
rahulbharti5 committed Jun 24, 2024
1 parent 704ae88 commit 232f3e7
Show file tree
Hide file tree
Showing 35 changed files with 4,038 additions and 0 deletions.
73 changes: 73 additions & 0 deletions Design.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,73 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./css/design.css">
<link rel="stylesheet" href="./css/combine.css">
</head>

<body>
<header>
<div class="container">
<div class="logo">
<img width="150px" src="./img/logo2.png" alt="Logo">
</div>
</div>
</header>
<div class="container">
<div class="video-container" id="video-container">
<video id="remote-video" src="./res/video2.mp4" autoplay></video>
<!-- <img width="100%" id="remote-video" src="./img/image.png" alt=""> -->
<video id="local-video" src="./res/video2.mp4" muted></video>
<div id="controls">
<button id="mute-button">M</button>
<button id="video-button">V</button>
<button id="end-call-button">E</button>
</div>
</div>
<div class="chat-container">
<div class="chat-box">
<!-- Sample messages -->
<!-- <div class="chat-info">
Wellcome in heyStranger
</div> -->
<div class="chat-message received">
<span class="sender-name">Stranger:</span>
<span class="message">Hey! How's it going?</span>
</div>
<div class="chat-message sent">
<span class="sender-name">You:</span>
<span class="message">Hi! Doing good, thanks!</span>
</div>
<div class="chat-message received">
<span class="sender-name">Stranger:</span>
<span class="message">Hey! How's it going?</span>
</div>

<div class="chat-message sent">
<span class="sender-name">You:</span>
<span class="message">Hi! Doing good, thanks!</span>
</div>
<div class="chat-message sent">
<span class="sender-name">You:</span>
<span class="message">Hi! Doing good, thanks!</span>
</div>
<!-- <div class="chat-message sent">
<span class="sender-name">You:</span>
<span class="message">HeyStranger is a great way to meet new friends. When you use HeyStranger, we pick someone else at random and let you talk one-on-one. To help you stay safe, chats are anonymous unless you tell someone who you are (not suggested!), and you can stop a chat at any time. Predators have been known to use HeyStranger, so please be careful.</span>
</div> -->
</div>
<div class="input-box">
<button>ESC</button>
<input type="text" placeholder="Type a message...">
<button>Send</button>
</div>
</div>
</div>

</body>

</html>
Binary file added android-chrome-192x192.png
View file
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 android-chrome-512x512.png
View file
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 apple-touch-icon.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
180 changes: 180 additions & 0 deletions chat.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,180 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HeyStranger.live | Stranger Video Calling App</title>
<meta name="description"
content="HeyStranger.live is a great way to meet new friends. When you use HeyStranger, we pick someone else at random and let you talk one-on-one. To help you stay safe, chats are anonymous unless you tell someone who you are (not suggested!), and you can stop a chat at any time. Predators have been known to use HeyStranger, so please be careful.">
<meta name="keywords"
content="HeyStranger.live, Stranger Video Calling App, Stranger Chatting App, Stranger Chatting Website, Stranger Video Calling Website, Stranger Chatting Website, Stranger Video Calling Website, Stranger Chatting App, Stranger Video Calling App">
<meta name="author" content="HeyStranger.live">
<meta name="robots" content="index, follow">
<meta name="revisit-after" content="3 days">
<meta name="googlebot" content="index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1">
<meta name="bingbot" content="index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-title" content="HeyStranger.live">
<meta name="application-name" content="HeyStranger.live">
<meta name="msapplication-TileColor" content="#da532c">
<meta name="theme-color" content="#ffffff">


<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/site.webmanifest">

<!-- <link rel="stylesheet" href="./css/likes.css"> -->
<!-- <link rel="stylesheet" href="./css/main.css"> -->
<link rel="stylesheet" href="./css/design.css">
<link rel="stylesheet" href="./css/combine.css">
</head>

<body>
<header class="header">
<div class="header-container">
<div class="logo">
<a href="./index.html">
<img src="./img/logo2.png" alt="Logo">
</a>
<!-- <h1>HeyStranger.live</h1> -->
</div>
<div class="middle-info">
<!-- Additional content or information can go here if needed -->
Talk To Stanger!
</div>
<div class="info">
<span id="total-users" style="font-size:14px;color: blue; cursor: pointer;">0 online users</span>
</div>
</div>
</header>

<div class="container">
<div class="video-container" id="video-container">
<!-- <video id="remote-video" src="./res/video2.mp4" playsinline+ controls></video> -->
<video id="remote-video" playsinline+ controls></video>
<!-- <img width="100%" id="remote-video" src="./img/image.png" alt=""> -->
<!-- <video id="local-video" src="./res/video2.mp4" playsinline+ muted></video> -->
<video id="local-video" playsinline+ muted></video>
<div id="controls">
<button id="mute-button">M</button>
<button id="video-button">V</button>
<button id="end-call-button">E</button>
</div>
</div>
<div class="chat-container">
<div class="chat-box" id="chat-box-body">
<!-- Sample messages -->
<!-- <div class="chat-info">
Wellcome in heyStranger
</div> -->
<div>
<div id="esc-main-text"></div>
</div>
<div class="chat-message received">
<span class="sender-name">Stranger:</span>
<span class="message">Hey! How's it going?</span>
</div>
<div class="chat-message sent">
<span class="sender-name">You:</span>
<span class="message">Hi! Doing good, thanks!</span>
</div>
<div class="chat-message received">
<span class="sender-name">Stranger:</span>
<span class="message">Hey! How's it going?</span>
</div>

<div class="chat-message sent">
<span class="sender-name">You:</span>
<span class="message">Hi! Doing good, thanks!</span>
</div>
<div class="chat-message received">
<span class="sender-name">Stranger:</span>
<span class="message">Hey! How's it going?</span>
</div>
<div class="chat-message sent">
<span class="sender-name">You:</span>
<span class="message">Hi! Doing good, thanks!</span>
</div>
<div class="chat-message sent">
<span class="sender-name">You:</span>
<span class="message">Hi! Doing good, thanks!</span>
</div>
<div class="chat-message sent">
<span class="sender-name">You:</span>
<span class="message">Hi! Doing good, thanks!</span>
</div>
<div class="chat-message sent">
<span class="sender-name">You:</span>
<span class="message">Hi! Doing good, thanks!</span>
</div>
<div class="chat-message sent">
<span class="sender-name">You:</span>
<span class="message">Hi! Doing good, thanks!</span>
</div>
<div class="chat-message sent">
<span class="sender-name">You:</span>
<span class="message">Hi! Doing good, thanks!</span>
</div>
<div class="chat-message sent">
<span class="sender-name">You:</span>
<span class="message">Hi! Doing good, thanks!</span>
</div>
<div class="chat-message sent">
<span class="sender-name">You:</span>
<span class="message">Hi! Doing good, thanks!</span>
</div>
<div class="chat-message sent">
<span class="sender-name">You:</span>
<span class="message">Hi! Doing good, thanks!</span>
</div>
<div class="chat-message sent">
<span class="sender-name">You:</span>
<span class="message">Hi! Doing good, thanks!</span>
</div>
<!-- <div class="chat-message sent">
<span class="sender-name">You:</span>
<span class="message">HeyStranger is a great way to meet new friends. When you use HeyStranger, we pick someone else at random and let you talk one-on-one. To help you stay safe, chats are anonymous unless you tell someone who you are (not suggested!), and you can stop a chat at any time. Predators have been known to use HeyStranger, so please be careful.</span>
</div> -->
</div>
<div class="input-box">
<button type="button" id="esc-btn">
<h3 id="esc-main-text" style="margin:0;padding: 0;">Connect</h3><span>Esc</span>
</button>
<input type="text" id="message-input" autocomplete="off" placeholder="Type your message...">
<!-- <input type="button" value="Send" id="send-btn"> -->
<button type="button" id="send-btn">
<h3 style="margin:0;padding: 0;" id="esc-main-text">Send</h3><span>Enter</span>
</button>
</div>
</div>
</div>

<script>
window.onresize = function () {
let chatBody = document.getElementById('chat-box-body');

if (window.innerWidth > 540) {
console.log('Screen width: ', screen.width);
chatBody.style.height = 400 + 'px';
return;
}
// let videoHeight = window.innerWidth * (9 / 16);
// document.getElementById('video-container').style.height = videoHeight + 'px';

chatBody.style.height = window.innerHeight - videoHeight - 90 + 'px';
chatBody.scrollTop = chatBody.scrollHeight + 100;
}
</script>
<script src="https://cdn.socket.io/4.0.0/socket.io.min.js"></script>
<script src="./js/main.js" type="module"></script>
<script src="./js/ui.js" type="module"></script>
</body>

</html>


<!-- netsh interface portproxy add v4tov4 listenport=8000 listenaddress=0.0.0.0 connectport=8000 connectaddress=15 -->
137 changes: 137 additions & 0 deletions css/combine.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,137 @@
body {
margin: 0;
padding: 0;
/* display: flex;
justify-content: center;
align-items: center;
height: 100vh; */
}
.chat-box::-webkit-scrollbar {
display: none;
}
.video-container {
position: relative;
/* display: none; */
}

video {
width: 100%;
height: 100%;
/* border-radius: 8px; */
object-fit: cover;
border: 1px solid black;
}

#local-video {
position: absolute;
height: auto;
top: 10px;
right: 10px;
z-index: 1;
border: 1px solid black;
}

#controls {
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
background-color: rgba(255, 255, 255, 0.7);
padding: 10px;
border-radius: 8px;
z-index: 2;
}

button {
margin: 0 5px;
padding: 8px 16px;
border: none;
background-color: #000000;
color: #fff;
border-radius: 4px;
cursor: pointer;
}

body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}

.chat-container {
width: 100%;
/* border: 1px solid #ccc; */
border-radius: 8px;
}

.chat-box {
padding: 10px;
overflow-y: scroll;
/* max-height: 150px; */
}
.chat-info{
margin-bottom: 10px;
padding: 8px;
border-radius: 8px;
color: #007bff;
}
.chat-message {
/* margin-bottom: 10px; */
padding: 8px;
border-radius: 8px;
/* max-width: 70%; */
display: flex;
align-items:first baseline
/* justify-content: space-between; */
}

.received .message{
background-color: #f0f0f0;
align-self: flex-start;
padding: 8px;
border-radius: 8px;
}

.sent .message{
background-color: #dcf8c6;
align-self: flex-end;
padding: 8px;
border-radius: 8px;
}

.sender-name {
padding-top: 8px;
font-weight: bold;
margin-right: 5px;
}

.input-box {
display: flex;
padding: 10px;
/* border-top: 1px solid #ccc; */
position: sticky;
bottom: 0;
overflow: hidden;
}

.input-box input {
flex: 1;
padding: 8px;
border: 1px solid #ccc;
border-radius: 4px;
}

.input-box button {
padding: 8px 20px;
margin-left: 10px;
background-color: #000000;
color: #fff;
border: none;
border-radius: 4px;
cursor: pointer;
}


.logo{
padding:10px 0;
}
Loading

0 comments on commit 232f3e7

Please sign in to comment.