aheh/mirotalk
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[mirotalk] - login page: flatten card structure and fix joinRoomForm background

Browse Source
This commit is contained in:
Miroslav Pejic
2026-03-17 03:03:10 +01:00
parent bf8fa03910
commit 538499ecc7
9 changed files with 81 additions and 67 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.env.template
+1 -1
View File
@@ -1,5 +1,5 @@
# ====================================================
# MiroTalk P2P v.1.7.48 - Environment Configuration
# MiroTalk P2P v.1.7.49 - Environment Configuration
# ====================================================
# App environment
app/src/config.template.js
+1 -1
View File
@@ -2,7 +2,7 @@
/**
* ==============================================
* MiroTalk P2P v.1.7.48 - Configuration File
* MiroTalk P2P v.1.7.49 - Configuration File
* ==============================================
*
* This file is the central configuration source.
app/src/server.js
+1 -1
View File
@@ -45,7 +45,7 @@ dependencies: {
* @license For commercial use or closed source, contact us at license.mirotalk@gmail.com or purchase directly from CodeCanyon
* @license CodeCanyon: https://codecanyon.net/item/mirotalk-p2p-webrtc-realtime-video-conferences/38376661
* @author Miroslav Pejic - miroslav.pejic.85@gmail.com
* @version 1.7.48
* @version 1.7.49
*
*/
package-lock.json
Generated
+2 -2
View File
@@ -1,12 +1,12 @@
{
"name": "mirotalk",
"version": "1.7.48",
"version": "1.7.49",
"lockfileVersion": 3,
"requires": true,
"packages": {
"": {
"name": "mirotalk",
"version": "1.7.48",
"version": "1.7.49",
"license": "AGPL-3.0",
"dependencies": {
"@mattermost/client": "11.4.0",
package.json
+1 -1
View File
@@ -1,6 +1,6 @@
{
"name": "mirotalk",
"version": "1.7.48",
"version": "1.7.49",
"description": "A free WebRTC browser-based video call",
"main": "server.js",
"scripts": {
public/css/login.css
+12
View File
@@ -15,6 +15,18 @@
text-align: center;
}
/* Ensure joinRoomForm is fully visible (not affected by ScrollReveal) */
#joinRoomForm.login-card {
opacity: 1 !important;
transform: none !important;
visibility: visible !important;
background:
radial-gradient(900px circle at 20% 15%, rgba(70, 120, 249, 0.12) 0%, rgba(70, 120, 249, 0) 55%),
radial-gradient(700px circle at 80% 85%, rgba(70, 120, 249, 0.08) 0%, rgba(70, 120, 249, 0) 52%),
linear-gradient(135deg, #000 60%, rgba(70, 120, 249, 0.15) 100%);
background-color: #000;
}
/* Icon */
.login-icon {
width: 64px;
public/js/brand.js
+1 -1
View File
@@ -94,7 +94,7 @@ let brand = {
},
about: {
imageUrl: '../images/mirotalk-logo.gif',
title: 'WebRTC P2P v1.7.48',
title: 'WebRTC P2P v1.7.49',
html: `
<button
id="support-button"
public/js/client.js
+2 -2
View File
@@ -15,7 +15,7 @@
* @license For commercial use or closed source, contact us at license.mirotalk@gmail.com or purchase directly from CodeCanyon
* @license CodeCanyon: https://codecanyon.net/item/mirotalk-p2p-webrtc-realtime-video-conferences/38376661
* @author Miroslav Pejic - miroslav.pejic.85@gmail.com
* @version 1.7.48
* @version 1.7.49
*
*/
@@ -13738,7 +13738,7 @@ function showAbout() {
Swal.fire({
background: swBg,
position: 'center',
title: brand.about?.title && brand.about.title.trim() !== '' ? brand.about.title : 'WebRTC P2P v1.7.48',
title: brand.about?.title && brand.about.title.trim() !== '' ? brand.about.title : 'WebRTC P2P v1.7.49',
imageUrl: brand.about?.imageUrl && brand.about.imageUrl.trim() !== '' ? brand.about.imageUrl : images.about,
customClass: { image: 'img-about' },
html: `
public/views/login.html
+60 -58
View File
@@ -76,73 +76,75 @@
<div class="split-wrap invert-mobile">
<div class="split-item">
<div class="hero-content split-item-content center-content-mobile">
<div class="login-card reveal-from-bottom" data-reveal-delay="150">
<div id="loginForm">
<div class="login-icon">
<i class="fa-solid fa-lock"></i>
</div>
<h2 class="login-title">Welcome back</h2>
<p class="login-description">Enter your credentials to continue.</p>
<div
id="loginForm"
class="login-card reveal-from-bottom"
data-reveal-delay="150"
>
<div class="login-icon">
<i class="fa-solid fa-lock"></i>
</div>
<h2 class="login-title">Welcome back</h2>
<p class="login-description">Enter your credentials to continue.</p>
<div class="login-input-group">
<i class="fa-solid fa-user"></i>
<input
id="username"
class="form-input"
type="name"
placeholder="Username"
maxlength="254"
required
/>
</div>
<div class="login-input-group">
<i class="fa-solid fa-key"></i>
<input
id="password"
class="form-input"
type="password"
maxlength="32"
placeholder="Password"
required
/>
</div>
<button id="loginButton" class="login-btn pulse">
<i class="fa-solid fa-right-to-bracket"></i>&nbsp; Login
</button>
</div>
<!-- Join Room Section hidden -->
<div id="joinRoomForm" class="login-card" style="display: none">
<div class="login-icon">
<i class="fa-solid fa-video"></i>
</div>
<h2 class="join-room-title">
Pick name.<br />
Share URL.<br />
Start conference.
</h2>
<div class="room-input-row">
<div class="login-input-group">
<i class="fa-solid fa-user"></i>
<i class="fa-solid fa-door-open"></i>
<input
id="username"
id="roomName"
class="form-input"
type="name"
placeholder="Username"
maxlength="254"
required
/>
</div>
<div class="login-input-group">
<i class="fa-solid fa-key"></i>
<input
id="password"
class="form-input"
type="password"
type="text"
placeholder="Enter room name"
maxlength="32"
placeholder="Password"
required
/>
</div>
<button id="loginButton" class="login-btn pulse">
<i class="fa-solid fa-right-to-bracket"></i>&nbsp; Login
</button>
</div>
<!-- Join Room Section hidden -->
<div id="joinRoomForm" style="display: none">
<div class="login-icon">
<i class="fa-solid fa-video"></i>
</div>
<h2 class="join-room-title">
Pick name.<br />
Share URL.<br />
Start conference.
</h2>
<div class="room-input-row">
<div class="login-input-group">
<i class="fa-solid fa-door-open"></i>
<input
id="roomName"
class="form-input"
type="text"
placeholder="Enter room name"
maxlength="32"
required
/>
</div>
<button
id="randomRoomButton"
class="random-room-btn"
title="Generate random room name"
>
<i class="fa-solid fa-arrows-rotate" aria-hidden="true"></i>
</button>
</div>
<button id="joinSelectRoomButton" class="join-room-btn">
<i class="fa-solid fa-right-to-bracket"></i>&nbsp; JOIN ROOM
<button
id="randomRoomButton"
class="random-room-btn"
title="Generate random room name"
>
<i class="fa-solid fa-arrows-rotate" aria-hidden="true"></i>
</button>
</div>
<button id="joinSelectRoomButton" class="join-room-btn">
<i class="fa-solid fa-right-to-bracket"></i>&nbsp; JOIN ROOM
</button>
</div>
</div>
</div>