Skip to content

Instantly share code, notes, and snippets.

@jdm

jdm/lobby.html

Created June 25, 2020 14:59
Show Gist options
  • Save jdm/01da62182b9a5f8c3a850342bdac410f to your computer and use it in GitHub Desktop.
Save jdm/01da62182b9a5f8c3a850342bdac410f to your computer and use it in GitHub Desktop.
Download ZIP
Raw
lobby.html
<html class="a-fullscreen light-theme">
<style>
html.a-fullscreen {
bottom: 0;
left: 0;
position: fixed;
right: 0;
top: 0;
}
html.a-fullscreen body {
height: 100%;
margin: 0;
overflow: hidden;
padding: 0;
width: 100%;
}
body {
background-color: #000033;
}
.light-theme {
--action-button-secondary-background: white;
--text-field-text-color: black;
--text-field-widget-color: #202020;
--text-field-background-color: white;
--text-field-placeholder-color: gray;
--text-field-disabled-color: gray;
--text-field-border-color: #e2e2e2;
--panel-action-button-secondary-background: #f4f4f4;
--panel-background-color: rgba(255, 255, 255, 0.9);
--panel-text-color: black;
--panel-overlay-text-color: black;
--panel-overlay-background-color: rgba(0,0,0,0.85);
--overlay-button-background-color: white;
--overlay-button-icon-color: #202020;
--action-button-secondary-icon: gray;
--full-panel-background-color: rgba(255, 255, 255, 0.98);
--menu-background-color: white;
--menu-link-color: black;
--menu-link-underline-color: gray;
--menu-header-text-color: gray;
--menu-text-color: black;
--menu-icon-color: #202020;
--menu-attach-point-color: rgba(255, 255, 255, 0.9);
--panel-rule-color: lightgrey;
--panel-link-underline-color: gray;
--panel-widget-color: gray;
--unfavorited-color: gray;
--panel-widget-disabled-color: gray;
--panel-title-underline-color: gray;
--panel-subtitle-color: gray;
--panel-subtext-color: #7f7f7f;
--panel-subtext-link-color: gray;
--panel-subtext-disabled-color: lightgrey;
--panel-icon-color: #404040;
--overlay-text-color: black;
--loading-background-color: #d7e5ec;
--loading-spinner-color: #555;
--loading-text-color: #404040;
--lobby-overlay-widget-background-color: rgba(255, 255, 255, 0.9);
--lobby-overlay-widget-text-color: black;
--lobby-overlay-widget-thumbnail-border-color: rgba(255, 255, 255, 0.15);
--spawned-overlay-widget-background-color: black;
--spawned-overlay-widget-source-text-color: #f0f0f0;
--spawned-overlay-widget-text-color: white;
--spawned-overlay-widget-link-color: white;
--chat-popup-background-color: #404040;
--chat-popup-text-color: #f0f0f0;
--home-background-color: white;
--home-header-background-color: white;
--home-footer-background-color: white;
--home-header-link-color: black;
--home-footer-text-color: black;
--home-footer-link-color: gray;
--home-text-color: black;
--home-media-panel-background-color: rgba(255, 255, 255, 0.6);
--link-background-color: white;
--link-text-color: black;
--link-button-highlight-color: rgba(255, 255, 255, 0);
--link-keypad-background-color: #f7f7f7;
--link-button-background-color: white;
--link-entry-color: black;
--link-button-active-background-color: lightgrey;
--link-button-active-color: lightgrey;
--link-button-disabled-color: lightgrey;
--link-icon-color: #333;
--link-code-loading-background: rgba(0.4, 0.4, 0.4, 0.85);
--scene-text-color: white;
--scene-overlay-text-color: black;
--scene-loading-overlay-color: rgba(255, 255, 255, 0.2);
--tile-button-tip-background-color: #404040;
--tile-button-tip-text-color: #f0f0f0;
--tile-button-icon-color: black;
--tile-button-icon-hover-color: white;
--tile-button-background-color: #ffffffde;
--tile-inset-text: #404040;
--tile-selected-color: #eaeaea;
--tile-title-color: black;
--tile-subtitle-color: #404040;
--tile-subtitle-link-color: gray;
--tile-subtext-color: #7f7f7f;
--tile-background-color: lightgrey;
--tile-alt-background-color: #f0f0f0;
--tile-empty-text-color: grey;
--overflow-tip-background-color: rgba(220, 220, 220, 0.5);
--overflow-tip-icon-color: black;
--icon-button-background-color: black;
--icon-button-border-color: white;
}
.ui-root__ui__33CMU {
width: 100%;
height: 100%;
top: 0;
left: 0;
position: absolute;
pointer-events: none;
}
.ui-root__ui-dialog__2TY9Y {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
flex-direction: column;
display: flex;
justify-content: flex-end;
align-items: center;
}
.presence-log__presence-log__10oFj {
align-self: flex-start;
flex: 10;
display: flex;
flex-direction: column;
justify-content: flex-end;
align-items: flex-start;
margin-bottom: 8px;
margin-top: 90px;
overflow: hidden;
width: 100%;
}
.ui-root__ui-dialog-box-contents__3XWtl {
background-color: var(--panel-background-color);
border-radius: 18px 18px 0 0;
width: 100%;
max-width: 600px;
z-index: 2;
position: relative;
}
.entry__entry-dialog__30kMs {
display: flex;
flex-direction: column;
align-items: center;
height: 100%;
position: relative;
}
.entry__entry-panel__34CD9 {
overflow-y: auto;
display: flex;
flex-direction: column;
flex: 1;
text-align: center;
margin: 24px;
min-height: 250px;
height: 100%;
width: 100%;
}
.entry__entry-panel__34CD9 .entry__name__sYOeV {
margin-bottom: 4px;
margin-right: 48px;
margin-left: 48px;
}
.entry__entry-panel__34CD9 .entry__title__1GITj, .entry__entry-panel__34CD9 .entry__name__sYOeV {
font-size: 1.5em;
font-weight: bold;
color: var(--panel-text-color);
}
.entry__collapse-button__3_PLp {
color: var(--panel-widget-color);
display: inline;
position: absolute;
top: 0px;
left: 24px;
}
.entry__collapse-button__3_PLp, .entry__favorite-button__2CVuk, .entry__back__J4Sgl {
margin: 16px 0;
padding: 0;
display: block;
background: none;
border: none;
color: var(--panel-text-color);
cursor: pointer;
font-size: 0.8em;
outline-style: none;
}
.entry__collapse-button__3_PLp i {
font-size: 24px;
}
.svg-inline--fa.fa-w-11 {
width: 0.6875em;
}
.entry__favorite-button__2CVuk {
position: absolute;
top: 0px;
right: 24px;
color: var(--unfavorited-color);
display: inline;
}
.entry__entry-panel__34CD9 .entry__room-subtitle__7MSMo {
font-size: 0.8em;
text-transform: uppercase;
color: var(--panel-subtitle-color);
margin-bottom: 8px;
}
.entry__entry-panel__34CD9 .entry__center__1105W {
flex: 10;
width: 100%;
}
.message-entry__message-entry__x7lQX {
position: relative;
margin: 10px 24px 24px 24px;
height: 48px;
display: flex;
justify-content: center;
align-items: center;
background-color: var(--text-field-background-color);
border: 1px solid var(--text-field-border-color);
border-radius: 16px;
}
.message-entry__message-entry-input__2AtQE {
pointer-events: auto;
appearance: none;
-moz-appearance: none;
-webkit-appearance: none;
outline-style: none;
overflow: hidden;
resize: none;
background-color: transparent;
color: var(--text-field-text-color);
padding: 8px 1.25em;
line-height: 28px;
font-size: 1.1em;
width: 100%;
border: 0px;
height: 32px;
flex: 10;
}
.message-entry__message-entry-input__2AtQE::placeholder {
color: var(--text-field-placeholder-color);
font-weight: 300;
font-style: italic;
}
.message-entry__message-entry-button__3xJhH {
color: var(--action-label-color, #FF3464);
appearance: none;
-moz-appearance: none;
-webkit-appearance: none;
outline-style: none;
background-color: var(--text-field-background-color);
min-width: 40px;
height: 100%;
bottom: 0px;
border: 0px;
font-size: 1.5em;
cursor: pointer;
margin: 0px 10px;
}
.svg-icon {
overflow: visible;
display: inline-block;
font-size: inherit;
vertical-align: -0.125em;
height: 1em;
}
.entry__entry-panel__34CD9 .entry__button-container__3Blog {
text-align: center;
display: flex;
flex-direction: column;
height: 100%;
justify-content: flex-end;
align-items: center;
}
.entry__entry-panel__34CD9 .entry__button-container__3Blog .entry__secondary-action-button__3FCMj {
margin-bottom: 12px;
}
.entry__entry-panel__34CD9 .entry__button-container__3Blog .entry__button-subtitle__3zrEo {
font-size: 0.8em;
font-weight: normal;
}
.entry__entry-panel__34CD9 .entry__button-container__3Blog .entry__action-button__3Vnab, .entry__entry-panel__34CD9 .entry__button-container__3Blog .entry__secondary-action-button__3FCMj {
border-radius: 30px;
height: 60px;
}
.entry__entry-panel__34CD9 .entry__button-container__3Blog .entry__wide-button__2tfMM {
width: 350px;
}
.entry__entry-panel__34CD9 .entry__button-container__3Blog {
text-align: center;
}
.entry__entry-button-secondary__1Fr_E, .entry__entry-panel__34CD9 .entry__button-container__3Blog .entry__secondary-action-button__3FCMj, .entry__entry-button__G7PQF, .entry__entry-panel__34CD9 .entry__button-container__3Blog .entry__action-button__3Vnab {
appearance: none;
-moz-appearance: none;
-webkit-appearance: none;
text-decoration: none;
outline-style: none;
font-weight: bold;
cursor: pointer;
border: 0;
border-radius: 28px;
padding: 0px 18px;
background: var(--action-color, #FF3464);
font-size: 1em;
color: var(--action-text-color, white);
display: flex;
align-items: center;
flex-direction: column;
justify-content: center;
min-width: 150px;
height: 48px;
}
.invite-dialog__invite-container__1c0Jw {
position: absolute;
top: 0;
left: 0;
margin-top: 16px;
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.invite-dialog__dialog__1XbxO .invite-dialog__link-button__S_o-t, .invite-dialog__dialog__1XbxO .invite-dialog__enter-vr-button__3y1BF, .invite-dialog__invite-container__1c0Jw .invite-dialog__invite-button__3cjFw, .invite-dialog__invite-container__1c0Jw .invite-dialog__enter-button__2Z5EY, .invite-dialog__invite-container__1c0Jw .invite-dialog__invite-mini-button__2zWJj {
appearance: none;
-moz-appearance: none;
-webkit-appearance: none;
text-decoration: none;
outline-style: none;
font-weight: bold;
cursor: pointer;
border: 0;
border-radius: 28px;
padding: 0px 18px;
background: var(--action-color, #FF3464);
font-size: 1em;
color: var(--action-text-color, white);
display: flex;
align-items: center;
flex-direction: column;
justify-content: center;
min-width: 150px;
height: 48px;
}
.ui-root__object-list-button__1qF67 {
top: 16px;
right: 122px;
justify-content: space-evenly;
}
.ui-root__object-list-button__1qF67, .ui-root__presence-list-button__2EuQv {
width: 90px;
min-width: 90px;
height: 44px;
justify-content: space-evenly;
}
.ui-root__object-list-button__1qF67, .ui-root__presence-list-button__2EuQv {
pointer-events: auto;
cursor: pointer;
position: absolute;
padding: 0px;
z-index: 1;
display: flex;
align-items: center;
background-color: var(--menu-background-color);
color: var(--menu-icon-color);
border-radius: 24px;
border-style: none;
border-width: 0px;
}
svg:not(:root).svg-inline--fa {
overflow: visible;
}
.ui-root__object-list-button__1qF67 svg, .ui-root__presence-list-button__2EuQv svg {
width: 26px !important;
height: 26px;
}
.svg-inline--fa {
display: inline-block;
font-size: inherit;
height: 1em;
overflow: visible;
vertical-align: -.125em;
}
.ui-root__presence-list-button__2EuQv {
top: 16px;
right: 16px;
}
.ui-root__object-list-button__1qF67, .ui-root__presence-list-button__2EuQv {
width: 90px;
min-width: 90px;
height: 44px;
justify-content: space-evenly;
}
.svg-inline--fa.fa-w-14 {
width: 0.875em;
}
.ui-root__corner-button__2rfQ5 {
text-align: right;
position: absolute;
z-index: 1;
top: 0;
left: 16px;
margin: 16px 0;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.3em;
color: var(--overlay-button-icon-color);
background-color: var(--overlay-button-background-color);
border-radius: 24px;
font-weight: bold;
padding: 10px 12px;
pointer-events: auto;
cursor: pointer;
border: none;
}
</style>
<div id="ui-root">
<div class="ui-root__ui__33CMU ui-root">
<div class="ui-root__ui-dialog__2TY9Y">
<div class="presence-log__presence-log__10oFj">
</div>
<div class="ui-root__ui-interactive__2mtC4 ui-root__ui-dialog-box-contents__3XWtl">
<div class="entry__entry-dialog__30kMs">
<div class="entry__entry-panel__34CD9">
<div class="entry__name__sYOeV">
<span>Faithful Precious Rendezvous</span>
<button aria-label="Close room entry panel and spectate from lobby" class="entry__collapse-button__3_PLp">
<i>
<svg aria-hidden="true" data-prefix="fas" data-icon="times" class="svg-inline--fa fa-times fa-w-11 " role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 352 512">
<path fill="currentColor" d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z">
</path>
</svg>
</i>
</button>
<button aria-label="Toggle Favorited" class="undefined entry__favorite-button__2CVuk">
<i title="Favorite">
<svg aria-hidden="true" data-prefix="fas" data-icon="star" class="svg-inline--fa fa-star fa-w-18 " role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512">
<path fill="currentColor" d="M259.3 17.8L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0z">
</path>
</svg>
</i>
</button>
</div>
<div class="entry__room-subtitle__7MSMo">
<span>Lobby</span>
</div>
<div class="entry__center__1105W">
<form>
<div class="message-entry__message-entry__x7lQX" style="height: 48px;">
<textarea class="message-entry__message-entry-input__2AtQE chat-focus-target" rows="1" style="height: 28px;" placeholder="Send message to 1 other...">
</textarea>
<button class="message-entry__message-entry-button__3xJhH" type="submit">
<svg viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg" class="svg-icon">
<path fill-rule="evenodd" clip-rule="evenodd" d="M61.0316 33.4196C61.841 33.0737 61.841 31.9263 61.0316 31.5804L5.78581 7.97542C4.46632 7.41163 2.99999 8.37968 2.99999 9.81457L2.99999 30.4511L29.262 32.5L2.99999 34.549L2.99998 55.1854C2.99998 56.6203 4.46632 57.5884 5.7858 57.0246L61.0316 33.4196Z" fill="currentColor">
</path>
</svg>
</button>
</div>
</form>
</div>
<div class="entry__button-container__3Blog">
<button class="entry__secondary-action-button__3FCMj entry__wide-button__2tfMM">
<span>Enter on Standalone VR</span>
<div class="entry__button-subtitle__3zrEo">
<span>Wireless VR Headsets</span>
</div>
</button>
<button class="entry__secondary-action-button__3FCMj entry__wide-button__2tfMM">
<span>Watch from Lobby</span>
<div class="entry__button-subtitle__3zrEo">
<span>Others will not be able to see or hear you</span>
</div>
</button>
<button class="entry__action-button__3Vnab entry__wide-button__2tfMM">
<span>Enter Room</span></button>
</div>
</div>
</div>
</div>
</div>
<div class="invite-dialog__invite-container__1c0Jw">
<button class="invite-dialog__invite-button__3cjFw">
<span>Share</span>
</button>
</div>
<div>
<button title="Media" aria-label="Toggle list of 0 objects" class="ui-root__object-list-button__1qF67">
<svg aria-hidden="true" data-prefix="fas" data-icon="cubes" class="svg-inline--fa fa-cubes fa-w-16 " role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<path fill="currentColor" d="M488.6 250.2L392 214V105.5c0-15-9.3-28.4-23.4-33.7l-100-37.5c-8.1-3.1-17.1-3.1-25.3 0l-100 37.5c-14.1 5.3-23.4 18.7-23.4 33.7V214l-96.6 36.2C9.3 255.5 0 268.9 0 283.9V394c0 13.6 7.7 26.1 19.9 32.2l100 50c10.1 5.1 22.1 5.1 32.2 0l103.9-52 103.9 52c10.1 5.1 22.1 5.1 32.2 0l100-50c12.2-6.1 19.9-18.6 19.9-32.2V283.9c0-15-9.3-28.4-23.4-33.7zM358 214.8l-85 31.9v-68.2l85-37v73.3zM154 104.1l102-38.2 102 38.2v.6l-102 41.4-102-41.4v-.6zm84 291.1l-85 42.5v-79.1l85-38.8v75.4zm0-112l-102 41.4-102-41.4v-.6l102-38.2 102 38.2v.6zm240 112l-85 42.5v-79.1l85-38.8v75.4zm0-112l-102 41.4-102-41.4v-.6l102-38.2 102 38.2v.6z">
</path>
</svg>
<span>0</span>
</button>
</div>
<div>
<button title="Members" aria-label="Toggle list of 2 members" class="ui-root__presence-list-button__2EuQv">
<svg aria-hidden="true" data-prefix="fas" data-icon="users" class="svg-inline--fa fa-users fa-w-20 " role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512">
<path fill="currentColor" d="M96 224c35.3 0 64-28.7 64-64s-28.7-64-64-64-64 28.7-64 64 28.7 64 64 64zm448 0c35.3 0 64-28.7 64-64s-28.7-64-64-64-64 28.7-64 64 28.7 64 64 64zm32 32h-64c-17.6 0-33.5 7.1-45.1 18.6 40.3 22.1 68.9 62 75.1 109.4h66c17.7 0 32-14.3 32-32v-32c0-35.3-28.7-64-64-64zm-256 0c61.9 0 112-50.1 112-112S381.9 32 320 32 208 82.1 208 144s50.1 112 112 112zm76.8 32h-8.3c-20.8 10-43.9 16-68.5 16s-47.6-6-68.5-16h-8.3C179.6 288 128 339.6 128 403.2V432c0 26.5 21.5 48 48 48h288c26.5 0 48-21.5 48-48v-28.8c0-63.6-51.6-115.2-115.2-115.2zm-223.7-13.4C161.5 263.1 145.6 256 128 256H64c-35.3 0-64 28.7-64 64v32c0 17.7 14.3 32 32 32h65.9c6.3-47.4 34.9-87.3 75.2-109.4z">
</path>
</svg>
<span>2</span>
</button>
</div>
<div>
<svg aria-hidden="true" data-prefix="fas" data-icon="bars" class="svg-inline--fa fa-bars fa-w-14 ui-root__corner-button__2rfQ5" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
<path fill="currentColor" d="M16 132h416c8.837 0 16-7.163 16-16V76c0-8.837-7.163-16-16-16H16C7.163 60 0 67.163 0 76v40c0 8.837 7.163 16 16 16zm0 160h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16zm0 160h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16z">
</path>
</svg>
</div>
</div>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment