aheh/call-me
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[call-me] - improve UI/UX

Browse Source
This commit is contained in:
Miroslav Pejic
2024-12-08 01:53:42 +01:00
parent 980f9234b5
commit 5735067b7d
3 changed files with 115 additions and 119 deletions
Download Patch File Download Diff File Expand all files Collapse all files
package.json
+1 -1
View File
@@ -1,6 +1,6 @@
{
"name": "call-me",
"version": "1.0.26",
"version": "1.0.27",
"description": "Your Go-To for Instant Video Calls",
"author": "Miroslav Pejic - miroslav.pejic.85@gmail.com",
"license": "AGPLv3",
public/index.html
+43 -94
View File
@@ -8,44 +8,27 @@
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- https://favicon.io/favicon-generator/ -->
<!-- Favicon -->
<link rel="apple-touch-icon" sizes="180x180" href="/favicon/apple-touch-icon.png" />
<link rel="icon" type="image/png" sizes="32x32" href="/favicon/favicon-32x32.png" />
<link rel="icon" type="image/png" sizes="16x16" href="/favicon/favicon-16x16.png" />
<link rel="manifest" href="/favicon/site.webmanifest" />
<!-- https://ogp.me -->
<meta property="og:type" content="app-webrtc" />
<meta property="og:site_name" content="Call-me" />
<meta property="og:title" content="Click the link to make a call." />
<meta property="og:description" content="Your Go-To for Instant Video Calls!" />
<meta property="og:image" content="https://cme.mirotalk.com/assets/callme.png" />
<meta property="og:url" content="https://cme.mirotalk.com" />
<!-- Link to Bootstrap CSS -->
<!-- Stylesheets -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap/dist/css/bootstrap.min.css" />
<!-- Link to Font Awesome CSS for icons -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" />
<!-- Link to your custom CSS file -->
<link rel="stylesheet" href="./style.css" />
<!-- Link to SweetAlert CSS file -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sweetalert2@11.4.8/dist/sweetalert2.min.css" />
<!-- ink to Animate CSS file -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/animate.css/animate.min.css" />
</head>
<body>
<!-- The attribution text will be injected here -->
<!-- Attribution -->
<p id="attribution"></p>
<!-- Optional Random BG Images -->
<img id="randomImage" />
<!-- Random Background Image -->
<img id="randomImage" src="background.jpg" alt="Random Background Image" />
<!-- GitHub project -->
<!-- GitHub Project Link -->
<div id="githubDiv">
<a
class="github-button"
@@ -53,36 +36,33 @@
data-color-scheme="no-preference: light; light: light; dark: dark;"
data-size="large"
data-show-count="true"
aria-label="Star miroslavpejic85/call-me on GitHub"
>Star
aria-label="Star Call-me project on GitHub"
>
Star
</a>
</div>
<!-- Sign-in Page -->
<div id="signInPage" class="container text-center center">
<div class="container mt-5">
<div class="row justify-content-center">
<div class="col-md-6">
<div class="card">
<div class="card-header"><h1>Call-me</h1></div>
<div class="card-body">
<!-- Sign-in Form -->
<form>
<div class="mb-3">
<!-- Input field for entering the username -->
<input
id="usernameIn"
type="email"
class="form-control"
id="email"
placeholder="Enter username"
required
/>
</div>
<!-- Sign-in button -->
<button id="signInBtn" type="submit" class="btn btn-primary">Sign In</button>
</form>
</div>
<div class="row justify-content-center">
<div class="col-md-6">
<div class="card">
<div class="card-header">
<h1>Call-me</h1>
</div>
<div class="card-body">
<form>
<div class="mb-3">
<input
id="usernameIn"
type="email"
class="form-control"
placeholder="Enter username"
required
/>
</div>
<button id="signInBtn" type="submit" class="btn btn-primary">Sign In</button>
</form>
</div>
</div>
</div>
@@ -91,69 +71,38 @@
<!-- Room Page -->
<div id="roomPage" class="container text-center center">
<!-- Local video element (user's video) -->
<div id="localVideoContainer">
<video id="localVideo"></video>
<span id="localUsername"></span>
<video id="localVideo" autoplay muted></video>
<span id="localUsername">Your Name</span>
</div>
<!-- Remote video element (video from the other user) -->
<video id="remoteVideo"></video>
<!-- Session time -->
<span id="sessionTime">0s</span>
<div class="row text-center">
<div class="col-md-12">
<div class="mb-3">
<!-- Input field for entering the username to call -->
<input id="callUsernameIn" type="text" class="form-control" placeholder="Username to call" />
</div>
<!-- Button to hide/show the local video -->
<button
id="hideBtn"
class="btn btn-custom btn-primary btn-m"
data-toggle="tooltip"
data-placement="top"
title="Toggle hide me"
>
<video id="remoteVideo" autoplay></video>
<span id="sessionTime">Session Time: 0s</span>
<div class="row text-center mt-3">
<div class="col">
<input id="callUsernameIn" type="text" class="form-control" placeholder="Username to call" />
</div>
</div>
<div class="row text-center mt-3">
<div class="col">
<button id="hideBtn" class="btn btn-custom btn-primary" aria-label="Toggle hide me">
<i class="fas fa-eye-slash"></i>
</button>
<!-- Button to initiate a video call -->
<button
id="callBtn"
class="btn btn-custom btn-success btn-m"
data-toggle="tooltip"
data-placement="top"
title="Call"
>
<button id="callBtn" class="btn btn-custom btn-success" aria-label="Call User">
<i class="fas fa-phone"></i>
</button>
<!-- Button to hang up the call -->
<button
id="hangUpBtn"
class="btn btn-custom btn-danger btn-m"
data-toggle="tooltip"
data-placement="top"
title="Hang up"
>
<button id="hangUpBtn" class="btn btn-custom btn-danger" aria-label="Hang up Call">
<i class="fas fa-phone-slash"></i>
</button>
</div>
</div>
</div>
<!-- JavaScript libraries for WebSocket and custom client code -->
<!-- Scripts -->
<script src="/socket.io/socket.io.js"></script>
<script src="client.js"></script>
<!-- Include Axios file -->
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<!-- Include SweetAlert JS file -->
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11.4.8/dist/sweetalert2.all.min.js"></script>
<!-- Include Bootstrap JavaScript file -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<!-- Include GitHub buttons -->
<script src="https://buttons.github.io/buttons.js"></script>
</body>
</html>
public/style.css
+71 -24
View File
@@ -4,20 +4,27 @@
/* Variables */
:root {
--border-radius: 10px;
--bg-color: #222;
--text-color: #fff;
--btn-size: 48px;
--btn-size-mobile: 40px;
--highlight-color: rgba(0, 0, 0, 0.1);
--fallback-bg: #222;
}
/* Global Styles */
* {
outline: none;
font-family: 'Comfortaa';
font-family: 'Comfortaa', sans-serif;
box-sizing: border-box;
}
html,
body {
margin: 0;
padding: 0;
width: 100vw;
height: 100vh;
width: 100%;
height: 100%;
overflow: auto;
scroll-behavior: smooth;
}
@@ -26,8 +33,9 @@ body {
display: flex;
justify-content: center;
align-items: center;
background: url('background.jpg') center/cover no-repeat fixed;
background-color: #222; /* Fallback color */
background:
url('background.jpg') center/cover no-repeat fixed,
var(--fallback-bg);
will-change: background;
}
@@ -44,8 +52,8 @@ body {
bottom: 0;
right: 10px;
font-size: small;
color: white;
background: rgba(0, 0, 0, 0.1);
color: var(--text-color);
background: var(--highlight-color);
border-radius: var(--border-radius);
}
@@ -56,6 +64,23 @@ img {
object-fit: cover;
}
/* Ensure the random image spans the entire screen */
#randomImage {
position: fixed; /* Fix the image to the viewport */
top: 0;
left: 0;
width: 100%; /* Cover the full width */
height: 100%; /* Cover the full height */
z-index: -1; /* Place it behind all other elements */
object-fit: cover; /* Ensure the image maintains aspect ratio */
}
/* Prevent buttons from inheriting the image as background */
button {
background: none; /* Remove any background */
color: inherit; /* Keep text/icon color */
}
/* Session Time */
#sessionTime {
display: none;
@@ -67,7 +92,7 @@ img {
right: 20px;
font-size: 0.9rem;
font-weight: bold;
color: white;
color: var(--text-color);
background: rgba(0, 0, 0, 0.5);
border-radius: var(--border-radius);
}
@@ -86,13 +111,13 @@ img {
/* General Card Styles */
.card {
max-width: 400px !important;
max-width: 90% !important;
margin: 0 auto !important;
color: #fff !important;
color: var(--text-color) !important;
font-weight: bold !important;
border: none !important;
border-radius: 10px !important;
background: rgb(0 0 0 / 7%) !important;
border-radius: var(--border-radius) !important;
background: rgba(0, 0, 0, 0.07) !important;
}
.card-header h1 {
@@ -108,9 +133,11 @@ video {
object-fit: contain;
cursor: pointer;
}
video:hover {
filter: contrast(105%);
}
video::-webkit-media-controls {
display: none !important;
}
@@ -129,9 +156,9 @@ video::-webkit-media-controls {
#localUsername {
position: absolute;
top: 0px;
left: 0px;
color: #fff;
top: 0;
left: 0;
color: var(--text-color);
font-size: x-small;
border-radius: 5px;
margin: 5px;
@@ -141,12 +168,22 @@ video::-webkit-media-controls {
#remoteVideo {
z-index: 2;
width: 100%;
height: auto;
background: rgba(0, 0, 0, 0.5);
border-radius: var(--border-radius);
border: none;
}
/* Hide Local Video on Mobile */
@media (max-width: 768px) {
#localUsername {
font-size: 8px;
}
#remoteVideo {
height: 70vh;
object-fit: cover;
}
}
/* Hidden Elements */
.hide {
display: none;
@@ -159,11 +196,10 @@ input {
/* Text Input Styles */
#callUsernameIn {
background: rgba(0, 0, 0, 0.5);
color: #fff;
color: var(--text-color);
border: none;
}
/* Placeholder Styles */
#callUsernameIn::placeholder {
color: #525252;
opacity: 1;
@@ -179,13 +215,20 @@ input {
/* Custom button */
.btn-custom {
height: 48px;
width: 48px;
height: var(--btn-size);
width: var(--btn-size);
margin: 0.1rem;
border: none;
border-radius: 50px !important;
}
@media (max-width: 768px) {
.btn-custom {
height: var(--btn-size-mobile);
width: var(--btn-size-mobile);
}
}
/* GitHub div */
#githubDiv {
position: absolute;
@@ -196,23 +239,27 @@ input {
/* Swal2 custom theme */
.swal2-popup {
background-color: #333 !important;
color: #fff !important;
color: var(--text-color) !important;
border: none !important;
}
.swal2-popup .swal2-styled:focus {
box-shadow: none !important;
}
.swal2-title {
color: #fff !important;
color: var(--text-color) !important;
}
.swal2-actions .swal2-confirm {
background-color: #157346 !important;
color: #fff !important;
color: var(--text-color) !important;
border: none !important;
}
.swal2-actions .swal2-cancel {
background-color: #666 !important;
color: #fff !important;
color: var(--text-color) !important;
border: none !important;
}