Skip to content

Commit

Permalink
Merge branch 'main' into guest-endpoint
Browse files Browse the repository at this point in the history
  • Loading branch information
@adamweeks
adamweeks committed May 30, 2024
2 parents d8b6e22 + 3eefcfb commit 3d3414d
Show file tree
Hide file tree
Showing 5 changed files with 270 additions and 134 deletions.
172 changes: 137 additions & 35 deletions index.html
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<!DOCTYPE html>
<!doctype html>
<html lang="en">
<head>
<link
Expand All @@ -14,27 +14,45 @@
<body class="body">
<div id="#body">
<div style="display: flex; margin: 0; padding: 0">
<div id="#side-nav" class="side-nav border" style="padding: 5px; color: #000">
<div
id="#side-nav"
class="side-nav border"
style="padding: 5px; color: #000"
>
<div style="padding: 35px; text-align: center; color: white">
<img class="icon" style="width: 40px; height: 40px" src="images/store.png" /><b style="font-size: large"
>My-store</b
>
<img
class="icon"
style="width: 40px; height: 40px"
src="images/store.png"
/><b style="font-size: large">My-store</b>
</div>
<div class="side-ele">
<img class="icon" src="images/dashboard.png" />Dashboard
</div>
<div class="side-ele"><img class="icon" src="images/dashboard.png" />Dashboard</div>
<div class="side-ele-selected">
<p class="text-in-box" style="height: 40px"><img class="icon" src="images/order.png" />Your Orders</p>
<p class="text-in-box" style="height: 40px">
<img class="icon" src="images/order.png" />Your Orders
</p>
</div>
<div class="side-ele">
<img class="icon" src="images/settings.png" />Settings
</div>
<div class="side-ele">
<img class="icon" src="images/profile.png" />Profile
</div>
<div class="side-ele">
<img class="icon" src="images/logout.png" />Logout
</div>
<div class="side-ele"><img class="icon" src="images/settings.png" />Settings</div>
<div class="side-ele"><img class="icon" src="images/profile.png" />Profile</div>
<div class="side-ele"><img class="icon" src="images/logout.png" />Logout</div>
<div class="profile">
<p class="john">John Doe</p>
</div>
</div>
<div id="#main-view" class="main-view" style="display: flex">
<div id="#bread-crums" class="breadcrumb">
<img class="icon" style="opacity: 60%" src="images/home.png" />
<p style="margin: 0; margin-right: 950px"><span style="font-size: 1.25rem"> > </span> Orders</p>
<p style="margin: 0; margin-right: 950px">
<span style="font-size: 1.25rem"> > </span> Orders
</p>
<img class="icon" style="opacity: 60%" src="images/profile.png" />
<img class="icon" style="opacity: 60%" src="images/setting.png" />
<img class="icon" style="opacity: 60%" src="images/bell.png" />
Expand Down Expand Up @@ -73,7 +91,11 @@
</div>
</td>
<td class="support-td" onclick="openModal()">
<img class="icon-call" style="opacity: 90%" src="images/call.png" />
<img
class="icon-call"
style="opacity: 90%"
src="images/call.png"
/>
</td>
<td>2024-03-02</td>
</tr>
Expand All @@ -91,7 +113,11 @@
</div>
</td>
<td>
<img class="icon-call" style="opacity: 60%" src="images/call.png" />
<img
class="icon-call"
style="opacity: 60%"
src="images/call.png"
/>
</td>
<td>2024-01-22</td>
</tr>
Expand All @@ -109,7 +135,11 @@
</div>
</td>
<td>
<img class="icon-call" style="opacity: 60%" src="images/call.png" />
<img
class="icon-call"
style="opacity: 60%"
src="images/call.png"
/>
</td>
<td>2023-04-15</td>
</tr>
Expand All @@ -128,7 +158,11 @@
</div>
</td>
<td>
<img class="icon-call" style="opacity: 60%" src="images/call.png" />
<img
class="icon-call"
style="opacity: 60%"
src="images/call.png"
/>
</td>
<td>2023-05-05</td>
</tr>
Expand All @@ -147,7 +181,11 @@
</div>
</td>
<td>
<img class="icon-call" style="opacity: 60%" src="images/call.png" />
<img
class="icon-call"
style="opacity: 60%"
src="images/call.png"
/>
</td>
<td>2023-06-20</td>
</tr>
Expand All @@ -166,7 +204,11 @@
</div>
</td>
<td>
<img class="icon-call" style="opacity: 60%" src="images/call.png" />
<img
class="icon-call"
style="opacity: 60%"
src="images/call.png"
/>
</td>
<td>2023-07-10</td>
</tr>
Expand All @@ -178,19 +220,31 @@
<div class="formModal" id="#formModal">
<div>
<p
style="color: grey; position: absolute; left: 95%; top: -1%; cursor: pointer; font-size: 1.5rem"
style="
color: grey;
position: absolute;
left: 95%;
top: -1%;
cursor: pointer;
font-size: 1.5rem;
"
onclick="closeModal()"
>
X
</p>
<div style="text-align: center">
<p style="font-size: x-large; margin: 0px">How can we help you</p>
<p style="color: grey; margin-bottom: 20px">Please choose an option bellow</p>
<p style="color: grey; margin-bottom: 20px">
Please choose an option bellow
</p>
</div>
<h2>Smart TV - Electronics - Delivered - 2024-03-19</h2>

<p>What do you need assistance with?</p>
<div style="display: flex; width: 50%" onclick="handlerAssistanceOnchange()">
<div
style="display: flex; width: 50%"
onclick="handlerAssistanceOnchange()"
>
<div class="radio-container">
<input type="radio" name="return" id="return" />
<label for="return">Return</label>
Expand All @@ -204,7 +258,10 @@ <h2>Smart TV - Electronics - Delivered - 2024-03-19</h2>

<div id="support-row">
<p>What kind kind of support you are looking for?</p>
<div style="display: flex; width: 50%" onchange="handlerSupportOnchange()">
<div
style="display: flex; width: 50%"
onchange="handlerSupportOnchange()"
>
<div class="radio-container">
<input type="radio" name="chat" id="chat" />
<label for="chat">Chat</label>
Expand All @@ -222,7 +279,14 @@ <h2>Smart TV - Electronics - Delivered - 2024-03-19</h2>

<div id="#meetingModal" class="meetingModal">
<p
style="color: grey; position: absolute; left: 98%; top: -1%; cursor: pointer; font-size: 1.5rem"
style="
color: grey;
position: absolute;
left: 98%;
top: -1%;
cursor: pointer;
font-size: 1.5rem;
"
onclick="closeMeetingModal()"
>
X
Expand All @@ -231,7 +295,11 @@ <h2>Smart TV - Electronics - Delivered - 2024-03-19</h2>
<main id="root" style="margin: 1.5rem 0">
<section id="stream" class="container">
<div>
<div style="flex: 0.5" class="custom-fieldset" id="local-video-section">
<div
style="flex: 0.5"
class="custom-fieldset"
id="local-video-section"
>
<div style="position: relative">
<video id="local-video" class="stream-video" autoplay></video>
<span class="participant-name">John Doe (Customer)</span>
Expand All @@ -241,27 +309,58 @@ <h2>Smart TV - Electronics - Delivered - 2024-03-19</h2>

<div style="flex: 0.5" class="custom-fieldset">
<div style="position: relative">
<video id="remote-video" class="stream-video" autoplay></video>
<span class="participant-name">Steve (Support Executive)</span>
<video
id="remote-video"
class="stream-video"
autoplay
></video>
<span class="participant-name"
>Steve (Support Executive)</span
>
</div>
<audio id="remote-audio" autoplay controls></audio>
<div class="controls-btn-group" style="margin-top: 1rem">
<div style="display: flex; justify-content: center; gap: 0.5rem">
<div
style="display: flex; justify-content: center; gap: 0.5rem"
>
<button id="toggle-audio-btn" onclick="toggleAudio()">
<img class="control-icon" src="images/controls/mute.png" />
<img
class="control-icon"
src="images/controls/mute.png"
/>
</button>
<button id="toggle-video-btn" onclick="toggleVideo()">
<img class="control-icon" src="images/controls/video-on.png" />
<img
class="control-icon"
src="images/controls/video-on.png"
/>
</button>
<button id="toggle-screen-share-btn" onclick="toggleScreenShare()">
<img class="control-icon" src="images/controls/start-sharing.png" />
<button
id="toggle-screen-share-btn"
onclick="toggleScreenShare()"
>
<img
class="control-icon"
src="images/controls/start-sharing.png"
/>
</button>
<!-- Join the meeting -->
<button id="join-with-media" class="btn-primary">Join</button>
<button id="leave-meeting" class="btn-danger" style="display: none">Leave</button>
<button id="join-with-media" class="btn-primary">
Join
</button>
<button
id="leave-meeting"
class="btn-danger"
style="display: none"
>
Leave
</button>
</div>

<fieldset style="flex: 0.5; margin-top: 1.5rem" class="custom-fieldset-vbg">
<fieldset
style="flex: 0.5; margin-top: 1.5rem"
class="custom-fieldset-vbg"
>
<legend>VBG</legend>
<div style="display: flex">
<input type="radio" name="vbg" id="" />
Expand All @@ -284,8 +383,11 @@ <h2>Smart TV - Electronics - Delivered - 2024-03-19</h2>
</main>
</div>
</div>
<script defer src="https://unpkg.com/[email protected]/umd/webex.min.js"></script>
<script type="module" type="text/javascript" src="index.js"></script>
<script
defer
src="https://unpkg.com/[email protected]/umd/webex.min.js"
></script>
<script type="module" type="text/javascript" src="index.js"></script>
<script type="module" type="text/javascript" src="webex.js"></script>
</body>
</html>
Loading

0 comments on commit 3d3414d

Please sign in to comment.