pycui's picture
Add RealChar deployment for HuggingFace (V0)
babeaf6
raw
history blame
11.9 kB
body {
background-color: #02081d;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
min-height: 100vh;
}
/* CSS for mobile warning message and desktop content */
@media (max-width: 768px) {
#desktop-content { display: none; }
#mobile-warning { display: block; }
}
@media (min-width: 769px) {
#desktop-content { display: flex; }
#mobile-warning { display: none; }
}
#desktop-content {
flex-direction: column;
justify-content: center;
align-items: center;
flex-grow: 1;
}
#mobile-warning {
color:white;
}
#mobile-warning p {
margin-bottom: 10px;
}
.logo-container {
margin-top: 50px;
margin-bottom: 10px;
}
.header p {
color: #cccccc;
font-family: "Prompt", Helvetica;
font-size: 25px;
font-weight: 200;
margin-top: 10px;
}
.recording {
color: firebrick;
display: none;
padding-left: 1.2em;
line-height: 1.5em;
}
.recording::before {
content: '🔴';
margin-right: 3px;
animation: recording 600ms alternate infinite;
}
@keyframes recording {
from { opacity: 1; }
to { opacity: 0.2; }
}
.devices-container {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
.player-container {
display: none;
}
.audio-device-label {
margin-top: 40px;
margin-bottom: 20px;
color: #e0e0e0;
}
.actions {
display: flex;
justify-content: center;
gap: 30px; /* optional, adds some space between the buttons */
}
.main-screen {
display: flex;
align-items: center;
justify-content: center;
width: 50vw;
height: 20vh;
}
.audio-player {
display: none;
}
.alert {
color: white;
}
.copyright,
.disclaimer {
color:#777;
font-size: 15px;
}
.chat-window {
background-color: #02081d;
display: none;
color: white;
font-size: 17px;
width: 100%;
height: 100%;
border: none;
resize: none;
}
.talk-btn,
.send-btn,
.text-btn,
.connect,
.select-character {
font-family: "Prompt", Helvetica;
font-size: 1rem;
border-color: #6785d3;
color: #fff;
box-shadow: 0 0 10px 0 #6785d3 inset, 0 0 10px 4px #6785d3;
transition: all 150ms ease-in-out;
cursor: pointer;
background-color: transparent;
padding: 0.6em 2em;
border-radius: 1.5em;
}
.talk-btn:hover,
.send-btn:hover,
.connect:hover,
.text-btn:hover {
box-shadow: 0 0 40px 40px #6785d3 inset, 0 0 0 0 #6785d3;
outline: 0;
}
.talk-btn,
.send-btn,
.text-btn {
display: none;
}
.talk-btn[disabled],
.text-btn[disabled] {
background-color: #999999;
cursor: not-allowed;
box-shadow: none;
}
.talk-btn,
.text-btn,
.connect {
margin-top: 10px;
}
.action-container {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
.options-container {
display: flex;
align-items: center;
justify-content: center;
padding: 20px 40px;
bottom: 0;
width: 100%;
}
.disconnect,
.call {
margin-right: 20px;
}
.disconnect,
.call,
.message {
display: none;
align-items: center;
justify-content: center;
background-color: #bccffe1a;
border-radius: 50px;
padding: 8px;
height: 50px;
width: 50px;
cursor: pointer;
}
.call:hover {
background-color: #0149ff;
}
.message:hover {
background-color: #28c235;
}
.disconnect:hover {
background-color: #ff4242;
}
.continue-call,
.stop-call {
display: none;
}
.stop-call {
background-color: white;
border-radius: 50px;
}
.stop-call,
.continue-call,
.disconnect,
.message,
.call {
cursor: pointer;
transition: transform 0.3s ease-in-out, background-color 0.3s ease-in-out;
}
.icon-instance-node {
width: 3em;
height: 3em;
transition: transform 0.3s ease-in-out, filter 0.3s ease-in-out;
}
.icon-instance-node-small {
width: 1.3em;
height: 1.3em;
transition: transform 0.3s ease-in-out, filter 0.3s ease-in-out;
}
.continue-call:hover,
.stop-call:hover,
.disconnect:hover,
.message:hover,
.call:hover {
transform: scale(1.1);
}
.continue-call:hover .icon-instance-node,
.stop-call:hover .icon-instance-node,
.disconnect:hover .icon-instance-node-small,
.message:hover, .icon-instance-node-small,
.call:hover, .icon-instance-node-small{
filter: brightness(2);
}
footer {
padding: 10px;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.svg-inline--fa {
vertical-align: -0.200em;
}
.rounded-social-buttons {
text-align: center;
margin-bottom: 10px;
}
.rounded-social-buttons .social-button {
display: inline-block;
position: relative;
cursor: pointer;
width: 3.125rem;
height: 3.125rem;
border: 0.125rem solid transparent;
padding: 0;
text-decoration: none;
text-align: center;
color: #fefefe;
font-size: 1.5625rem;
font-weight: normal;
line-height: 2em;
border-radius: 1.6875rem;
transition: all 0.5s ease;
margin-right: 0.25rem;
margin-bottom: 0.25rem;
}
.rounded-social-buttons .social-button:hover, .rounded-social-buttons .social-button:focus {
-webkit-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}
.rounded-social-buttons .fa-twitter, .fa-facebook-f, .fa-linkedin, .fa-youtube, .fa-instagram, .fa-github, .fa-discord {
font-size: 25px;
}
.rounded-social-buttons .social-button.facebook {
background: #3b5998;
}
.rounded-social-buttons .social-button.facebook:hover, .rounded-social-buttons .social-button.facebook:focus {
color: #3b5998;
background: #fefefe;
border-color: #3b5998;
}
.rounded-social-buttons .social-button.twitter {
background: #bccffe1a;
}
.rounded-social-buttons .social-button.twitter:hover, .rounded-social-buttons .social-button.twitter:focus {
color: #55acee;
background: #fefefe;
border-color: #55acee;
}
.rounded-social-buttons .social-button.linkedin {
background: #007bb5;
}
.rounded-social-buttons .social-button.linkedin:hover, .rounded-social-buttons .social-button.linkedin:focus {
color: #007bb5;
background: #fefefe;
border-color: #007bb5;
}
.rounded-social-buttons .social-button.github {
background: #bccffe1a;
}
.rounded-social-buttons .social-button.github:hover, .rounded-social-buttons .social-button.github:focus {
color: #bb0000;
background: #fefefe;
border-color: #bb0000;
}
.rounded-social-buttons .social-button.discord {
background: #bccffe1a;
}
.rounded-social-buttons .social-button.discord:hover, .rounded-social-buttons .social-button.discord:focus {
color: #125688;
background: #fefefe;
border-color: #125688;
}
/* character select radio groups */
@import url("https://fonts.googleapis.com/css?family=Raleway:300,400,400i,700");
*
{
margin:0;
padding:0;
box-sizing:border-box;
}
body
{
font-family: Raleway, sans-serif;
}
/* Characters Group */
.main-container
{
margin-top: 10px;
}
.radio-buttons
{
width: 100%;
margin: 0 auto;
text-align: center;
}
.custom-radio input
{
display: none;
}
.radio-btn
{
margin: 8px;
width: 176px;
height: 192px;
border: 2.4px solid transparent;
display: inline-block;
border-radius: 8px;
position: relative;
text-align: center;
box-shadow: 0 0 16px #c3c3c367;
cursor: pointer;
}
.radio-btn > i {
color: #ffffff;
background-color: #FFDAE9;
font-size: 16px;
position: absolute;
top: -12px;
left: 50%;
transform: translateX(-50%) scale(1.6);
border-radius: 40px;
padding: 2.4px;
transition: 0.5s;
pointer-events: none;
opacity: 0;
}
.radio-btn .hobbies-icon
{
width: 120px;
height: 120px;
position: absolute;
top: 40%;
left: 50%;
transform: translate(-50%, -50%);
}
.radio-btn .hobbies-icon img
{
display:block;
width:100%;
margin-bottom:16px;
}
.radio-btn .hobbies-icon i
{
color: #FFDAE9;
line-height: 64px;
font-size: 48px;
}
.radio-btn .hobbies-icon h4
{
color: rgb(214, 214, 214);
font-size: 12px;
font-weight: 300;
text-transform: uppercase;
letter-spacing:0.8px;
}
.custom-radio input:checked + .radio-btn
{
border: 1.6px solid #FFDAE9;
}
.custom-radio input:checked + .radio-btn > i
{
opacity: 1;
transform: translateX(-50%) scale(0.8);
}
@keyframes pulse {
0%,
100% {
box-shadow: 0 0 0 0 rgba(173, 216, 230, 0.4);
}
25% {
box-shadow: 0 0 0 10px rgba(173, 216, 230, 0.15);
}
50% {
box-shadow: 0 0 0 20px rgba(173, 216, 230, 0.55);
}
75% {
box-shadow: 0 0 0 10px rgba(173, 216, 230, 0.25);
}
}
.pulse-animation-1 {
animation: pulse 1.5s infinite ease-in-out;
}
.pulse-animation-2 {
animation: pulse 2.2s infinite ease-in-out;
}
/* media devices select */
.select-dropdown,
.select-dropdown * {
margin: 0;
padding: 0;
position: relative;
box-sizing: border-box;
}
.select-dropdown {
position: relative;
background-color: #02081d;
border-radius: 4px;
}
.select-dropdown select {
font-size: 1rem;
font-weight: normal;
color: white;
max-width: 100%;
padding: 8px 24px 8px 10px;
border-radius: 10px;
background-color: transparent;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
.select-dropdown select:active, .select-dropdown select:focus {
outline: none;
box-shadow: none;
}
.select-dropdown:after {
content: "";
position: absolute;
top: 50%;
right: 8px;
width: 0;
height: 0;
margin-top: -2px;
border-top: 5px solid #aaa;
border-right: 5px solid transparent;
border-left: 5px solid transparent;
}
/* text input */
input[type="text"]{font: 15px/24px 'Muli', sans-serif; color: white; width: 100%; box-sizing: border-box; letter-spacing: 1px;}
:focus{outline: none;}
.message-input-container{
float: left;
width: 50vw;
margin: 15px 3%;
position: relative;}
input[type="text"]{font: 15px/24px "Lato", Arial, sans-serif; color: white; width: 100%; box-sizing: border-box; letter-spacing: 1px;}
.message-input {
border: 1px solid #ccc;
border-radius: 5px;
padding: 7px 14px 9px;
transition: 0.4s;
font-size: 20px;
display: none;
color: white;
background-color: transparent;
}
.message-input ~ .focus-border:before,
.message-input ~ .focus-border:after{content: ""; position: absolute; top: 0; left: 0; width: 0; height: 2px; background-color: #85a7ff; transition: 0.3s;}
.message-input ~ .focus-border:after{top: auto; bottom: 0; left: auto; right: 0;}
.message-input ~ .focus-border i:before,
.message-input ~ .focus-border i:after{content: ""; position: absolute; top: 0; left: 0; width: 2px; height: 0; background-color: #85a7ff; transition: 0.4s;}
.message-input ~ .focus-border i:after{left: auto; right: 0; top: auto; bottom: 0;}
.message-input:focus ~ .focus-border:before,
.message-input:focus ~ .focus-border:after{width: 100%; transition: 0.3s;}
.message-input:focus ~ .focus-border i:before,
.message-input:focus ~ .focus-border i:after{height: 100%; transition: 0.4s;}
#bars {
height: 30px;
left: 50%;
margin: -30px 0 0 -40px;
position: absolute;
top: 60%;
width: 80px;
}
@keyframes audio-wave {
0%{
height: 10px;
trnsform: translateY(0px);
background: #1F4FCC;
}
25%{
height: 40px;
trnsform: translateY(-5px);
scaleY: 1.7;
background:#6785D3;
}
50%{
height: 10px;
trnsform: translateY(0px);
scaleY: 1.7;
background: #C2D3FF;
}
100%{
height: 10px;
trnsform: translateY(0px);
scaleY: 1.7;
background:fixed #EEF3FF;
}
}
.sound-wave{
display:flex;
justify-content: center;
align-items:center;
gap:8px;
height:60px
}
.sound-wave span{
height:18px;
width:10px;
display:block;
border-radius:8px;
background:#BEC5D9;
animation:audio-wave 2.2s infinite ease-in-out
}
.sound-wave span:nth-child(2) {
left:11px;
background:#FFFFFF;
animation-delay:0.2s
}
.sound-wave span:nth-child(3){
left:22px;
animation-delay:0.4s
}
.sound-wave span:nth-child(4){
left:33px;
animation-delay:0.6s
}
.sound-wave span:nth-child(5){
left:44px;
animation-delay:0.8s
}
.sound-wave span:nth-child(6){
left:55px;
animation-delay:1s
}