mirrors/fcast
1
0
Fork 0
mirror of https://gitlab.com/futo-org/fcast.git synced 2025-06-24 21:25:23 +00:00
Code Activity

Updated main window layout

Browse source
This commit is contained in:
Michael Hollister 2024-11-14 01:05:20 -06:00
parent 6cafca5412
commit 0cb008078a
2 changed files with 124 additions and 25 deletions
Download patch file Download diff file Expand all files Collapse all files

51
receivers/electron/src/main/index.html
View file

@ -2,6 +2,8 @@
<html> <html>
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<link rel="stylesheet" href="../../assets/fonts/outfit.css" />
<link rel="stylesheet" href="../../assets/fonts/inter.css" />
<link rel="stylesheet" href="./style.css" /> <link rel="stylesheet" href="./style.css" />
<title>FCast Receiver</title> <title>FCast Receiver</title>
</head> </head>
@ -10,26 +12,39 @@
<video id="video-player" class="video" autoplay loop> <video id="video-player" class="video" autoplay loop>
<source src="../../assets/video/background.mp4" type="video/mp4"> <source src="../../assets/video/background.mp4" type="video/mp4">
</video> </video>
<div id="overlay"> <div id="ui-container">
<div id="title">FCast</div> <div id="overlay">
<div id="connection-info"> <div id="main-view" >
<div id="waiting-for-connection">Waiting for a connection</div> <div id="title-container">
<div id="spinner" class="lds-ring"><div></div><div></div><div></div><div></div></div> <div id="title-icon"></div>
<div id="manual-connection-info">Manual connection information</div> <div id="title-text">FCast</div>
<div> </div>
<div id="ips">IPs</div><br />
<div>Port<br>46899 (TCP), 46898 (WS)</div> <div id="connection-status">
<div id="waiting-for-connection">Waiting for a connection</div>
<div id="spinner" class="lds-ring"><div></div><div></div><div></div><div></div></div>
</div>
<!-- <div id="update-dialog">There is an update available. Do you wish to update?</div>
<div id="update-button">Update</div>
<div id="update-button">Later</div>
<div id="progress-container">
<div id="update-spinner" class="lds-ring"><div></div><div></div><div></div><div></div></div>
<div id="progress-text"></div>
</div> -->
</div>
<div id="detail-view">
<div id="manual-connection-info">Manual connection information</div>
<div id="manual-connection-info-separator"></div>
<div>
<div id="ips">IPs</div><br />
<div>Port<br>46899 (TCP), 46898 (WS)</div>
</div>
<div id="automatic-discovery">Automatic discovery is available via mDNS</div>
<canvas id="qr-code"></canvas>
<div id="scan-to-connect" style="font-weight: bold;">Scan to connect</div>
</div> </div>
<div id="automatic-discovery">Automatic discovery is available via mDNS</div>
<canvas id="qr-code"></canvas>
<div id="scan-to-connect" style="font-weight: bold;">Scan to connect</div>
</div> </div>
<!--<div id="update-dialog">There is an update available. Do you wish to update?</div>
<div id="update-button">Update</div>
<div id="progress-container">
<div id="update-spinner" class="lds-ring"><div></div><div></div><div></div><div></div></div>
<div id="progress-text"></div>
</div>-->
<div id="window-can-be-closed" style="color: #666666; position: absolute; bottom: 0; margin-bottom: 20px;">App will continue to run as tray app when the window is closed</div> <div id="window-can-be-closed" style="color: #666666; position: absolute; bottom: 0; margin-bottom: 20px;">App will continue to run as tray app when the window is closed</div>
</div> </div>

98
receivers/electron/src/main/style.css
View file

@ -15,6 +15,13 @@ body, html {
object-fit: cover; object-fit: cover;
} }
#ui-container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
#overlay { #overlay {
position: absolute; position: absolute;
top: 0; top: 0;
@ -22,28 +29,81 @@ body, html {
right: 0; right: 0;
bottom: 0; bottom: 0;
display: flex; display: flex;
flex-direction: column; flex-direction: row;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
color: white; color: white;
font-family: 'Inter', sans-serif; gap: 15vw;
font-family: InterVariable;
font-size: 20px;
font-style: normal;
font-weight: 400;
} }
#title { #title-container {
font-size: 40px; display: flex;
justify-content: center;
align-items: center;
}
#title-text {
font-family: Outfit;
font-size: 96px;
font-weight: bold; font-weight: bold;
text-align: center; text-align: center;
user-select: none;
background-image: linear-gradient(180deg, #FFFFFF 5.9%, #D3D3D3 100%);
background-clip: text;
-webkit-text-fill-color: transparent;
} }
#connection-info { #title-icon {
background: rgba(0, 0, 0, 0.5); width: 84px;
height: 84px;
background-image: url(../../assets/icons/app/icon.svg);
background-size: cover;
margin-right: 15px;
}
#connection-status {
padding: 25px; padding: 25px;
text-align: center; text-align: center;
} }
#main-view {
padding: 25px;
}
#detail-view {
text-align: center;
background-color: rgba(20, 20, 20, 0.5);
padding: 25px;
border-radius: 10px;
border: 1px solid #2E2E2E;
scrollbar-width: thin;
overflow: auto;
}
#manual-connection-info {
font-weight: 700;
line-height: 24px;
margin: 10px;
}
#manual-connection-info-separator {
height: 1px;
background: #2E2E2E;
margin-top: 3px;
margin-bottom: 3px;
}
#qr-code { #qr-code {
display: flex; display: flex;
margin-top: 20px; margin: 20px auto;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
padding: 20px; padding: 20px;
@ -65,6 +125,18 @@ body, html {
cursor: pointer; cursor: pointer;
} }
/* .button {
display: inline-block;
align-items: center;
justify-content: center;
min-width: 100px;
padding: 18px 16px;
gap: 6px;
flex: 1 0 0;
border-radius: 6px;
} */
#progress-container { #progress-container {
display: flex; display: flex;
align-items: center; align-items: center;
@ -75,6 +147,18 @@ body, html {
margin-left: 8px; margin-left: 8px;
} }
#window-can-be-closed {
color: #666666;
position: absolute;
bottom: 0;
margin-bottom: 20px;
font-family: InterVariable;
font-size: 18px;
font-style: normal;
font-weight: 400;
}
.lds-ring { .lds-ring {
display: inline-block; display: inline-block;
position: relative; position: relative;