|
<!DOCTYPE html> |
|
<html> |
|
|
|
<head> |
|
<title>RealChar. - Realtime AI Character</title> |
|
<link rel="stylesheet" type="text/css" href="/static/styles.css"> |
|
<link rel="icon" type="image/png" href="/static/favicon.ico"> |
|
<meta name="viewport" content="width=device-width, initial-scale=1"> |
|
<script defer src="https://use.fontawesome.com/releases/v5.0.13/js/all.js" integrity="sha384-xymdQtn1n3lH2wcu0qhcdaOpQwyoarkgLVxC/wZ5q7h9gHtxICrpcaSUfygqZGOe" crossorigin="anonymous"></script> |
|
</head> |
|
|
|
<body> |
|
<div class="logo-container"> |
|
<img alt="Logo" src="/static/logo.svg" /> |
|
</div> |
|
|
|
|
|
<div id="mobile-warning"> |
|
<p>This website is best viewed on a desktop browser.</p> |
|
<p>Please switch to a desktop for the best experience.</p> |
|
<p>Mobile version is coming soon!</p> |
|
<p>If you have an iOS device, you can test our <a href='https://testflight.apple.com/join/JA6p9sZQ' style="color: green;">iOS beta app</a>.</p> |
|
</div> |
|
|
|
|
|
|
|
<div id="desktop-content"> |
|
|
|
<p class="alert"> Please wear headphone 🎧 <span id="recording" class="recording">Recording</span> </p> |
|
<div id="devices-container" class="devices-container"> |
|
<label class="audio-device-label" for="audio-device-selection">Select an audio input device:</label> |
|
<div class="select-dropdown"> |
|
<select id="audio-device-selection" class="form-select"></select> |
|
</div> |
|
</div> |
|
|
|
<div class="header"> |
|
<p></p> |
|
</div> |
|
<button id="connect" class="connect">Connect</button> |
|
|
|
|
|
<div class="main-container"> |
|
<div class="radio-buttons"> |
|
|
|
</div> |
|
</div> |
|
<div class="actions"> |
|
<button id="talk-btn" class="talk-btn" disabled>Talk</button> |
|
<button id="text-btn" class="text-btn" disabled>Text</button> |
|
</div> |
|
|
|
|
|
<div class="main-screen"> |
|
<div id="player-container" class="player-container"> |
|
<div id="sound-wave" class="sound-wave"> |
|
<span></span> |
|
<span></span> |
|
<span></span> |
|
<span></span> |
|
<span></span> |
|
<span></span> |
|
</div> |
|
<audio id="audio-player" class="audio-player"> |
|
<source src="" type="audio/mp3"> |
|
</audio> |
|
</div> |
|
<textarea id="chat-window" class="chat-window" readonly draggable="false"></textarea> |
|
</div> |
|
</div> |
|
<div class="action-container"> |
|
<div id="stop-call" class="stop-call"> |
|
<img src="/static/end-call.svg" alt="End call icon" class="icon-instance-node"/> |
|
</div> |
|
<div id="continue-call" class="continue-call"> |
|
<img src="/static/continue-call.svg" alt="Continue call icon" class="icon-instance-node"/> |
|
</div> |
|
<div class="message-input-container"> |
|
<input id="message-input" class="message-input" type="text" placeholder="Type your message"> |
|
<span class="focus-border"> |
|
<i></i> |
|
</span> |
|
</div> |
|
<button id="send-btn" class="send-btn">Send Message</button> |
|
</div> |
|
|
|
<div class="options-container"> |
|
<div id="disconnect" class="disconnect"> |
|
<img src="/static/connect.svg" alt="Connect Icon" class="icon-instance-node-small" /> |
|
</div> |
|
<div id="message" class="message"> |
|
<img src="/static/message.svg" alt="Message Icon" class="icon-instance-node-small" /> |
|
</div> |
|
<div id="call" class="call"> |
|
<img src="/static/microphone.svg" alt="Connect Icon" class="icon-instance-node-small" /> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
<footer> |
|
<div class="rounded-social-buttons"> |
|
<a class="social-button github" href="https://github.com/Shaunwei/RealChar" target="_blank"><i class="fab fa-github"></i></a> |
|
<a class="social-button discord" href="https://discord.gg/e4AYNnFg2F" target="_blank"><i class="fab fa-discord"></i></a> |
|
<a class="social-button twitter" href="https://twitter.com/agishaun" target="_blank"><i class="fab fa-twitter"></i></a> |
|
</div> |
|
<p class="copyright">Copyright © 2023 RealChar. All rights reserved. This site is for demo purpose only. Any AI character's statements are fictional and don't represent actual beliefs or opinions. </p> |
|
</footer> |
|
|
|
<script src="/static/script.js"></script> |
|
</body> |
|
|
|
</html> |
|
|
