From dcd3a356821b77d4684ca4c68c875082f502e25e Mon Sep 17 00:00:00 2001
From: Joel Calado <joelcalado@gmail.com>
Date: Sun, 28 Mar 2021 18:06:52 +0100
Subject: [PATCH] message cards for info, warnings; use them on &fs

---
 index.html | 18 ++++++++++++++---
 main.css   | 59 ++++++++++++++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 74 insertions(+), 3 deletions(-)

diff --git a/index.html b/index.html
index 794bb32..1faf5bd 100644
--- a/index.html
+++ b/index.html
@@ -583,9 +583,21 @@
 					SELECT THE VIDEO FILES TO SHARE<br /><br />
 					<input id="fileselector" onchange="session.publishFile(this,event);" type="file" accept="video/*,audio/*" alt="Hold CTRL (or CMD) to select multiple files" title="Hold CTRL (or CMD) to select multiple files" multiple/>
 					<br /><br />
-					<p style="margin:10px">Keep this tab visible if using Chrome, else the video playback will stop</p>
-					<p style="margin:10px">(Media file streaming is still quite experimental)</p><br />
-					<p style="margin:10px">File Sharing seems to be broken on Chrome v88. <br />Using The Electron Capture app instead of Chrome should work: <a href="https://github.com/steveseguin/electroncapture/releases/tag/1.1.3" style="color:blue"><u>GET IT HERE</u></a><br />You can also <a href="https://github.com/aws/amazon-chime-sdk-js/issues/1031" style="color:blue">turn off hardware-accleration</a> in Chrome/Edge to fix the issue.</p>
+					<div class='warning message-card'>
+						<h1>Warning</h1>
+						<p>Media file streaming is still quite experimental. Please do not rely on it heavily for your productions. Feedback welcome.</p>
+					</div>
+					<div class='warning message-card'>
+						<h1>Chrome users</h1>
+						<p>Keep this tab visible if using Chrome, else the video playback will stop</p>
+					</div>
+					<div class='info message-card'>
+						<h1>File Sharing seems to be broken on Chrome v88.</h1>
+						<p>Using The Electron Capture app instead of Chrome should work:
+							<a href="https://github.com/steveseguin/electroncapture/releases/latest">GET IT HERE</a>
+							<br />
+							You can also <a href="https://github.com/aws/amazon-chime-sdk-js/issues/1031">turn off hardware-accleration</a> in Chrome/Edge to fix the issue.</p>
+					</div>
 				</div>
 				
 				<div class="outer close">
diff --git a/main.css b/main.css
index 6144ead..de71329 100644
--- a/main.css
+++ b/main.css
@@ -2352,6 +2352,65 @@ span#guestTips {
 	display:none;
 }
 
+div.message-card {
+    padding: 10px;
+    display: block;
+    padding-left: 1em;
+    align-items: center;
+    width: 600px;
+    margin: 0 auto;
+    position: relative;
+    padding-left: 60px;
+    margin: 0 auto;
+    margin-bottom: 20px;
+    box-shadow: 0px 5px 10px -5px #a9a9a9;
+}
+
+div.message-card a {
+	color: rgb(0 77 218);
+	font-weight: bold;
+	text-decoration: underline;
+}
+
+.warning.message-card {
+	border-left: 4px solid #eff150;
+    background: #fffded;
+}
+.info.message-card {
+	border-left: 4px solid #aacefd;
+    background: #e6e8f0;
+}
+
+.message-card h1 {
+    display: block;
+    font-size: 110%;
+    text-align: left;
+}
+
+.message-card p {
+    display: block;
+    text-align: left;
+    margin-top: 10px;
+}
+
+div.message-card:before {
+    font-family: 'Line Awesome Free';
+    font-weight: 900;
+    font-size: 2em;
+    margin-right: 0.5em;
+    position: absolute;
+    top: 6px;
+    left: 10px;
+}
+
+div.message-card.warning:before {
+	content: "\f071";
+}
+
+div.message-card.info:before {
+	content: "\f05a";
+}
+
 @keyframes floating { 
     0% { transform: translate(0,  0px); } 
     50%  { transform: translate(0, 15%); }