127 lines
4.6 KiB
HTML
127 lines
4.6 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="initial-scale=1, width=device-width, height=device-height">
|
|
<title>Comfy App</title>
|
|
<!-- google sign in -->
|
|
<script src="https://apis.google.com/js/api.js"></script>
|
|
<script src="https://accounts.google.com/gsi/client"></script>
|
|
<!-- qrcode -->
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js"></script>
|
|
|
|
<!-- components -->
|
|
<script src="baseapp/js/screensaver.js"></script>
|
|
<script src="baseapp/js/comfy.js"></script>
|
|
<script src="baseapp/js/scan.js"></script>
|
|
<script src="baseapp/js/drive.js"></script>
|
|
<script src="baseapp/js/camera.js"></script>
|
|
<script src="baseapp/js/pixelation.js"></script>
|
|
<script src="baseapp/js/navigation.js"></script>
|
|
|
|
<!-- style -->
|
|
<link rel="stylesheet" href="baseapp/css/global.css" />
|
|
<link rel="stylesheet" href="baseapp/css/index.css" />
|
|
</head>
|
|
|
|
<body>
|
|
<div class="all">
|
|
<!-- title -->
|
|
<b class="title">Multiverse Avatar</b>
|
|
<!-- page-login -->
|
|
<div id="page-scanqr" class="page-scanqr page">
|
|
<div id="scanqr-container" class="qr-box">
|
|
<video id="video-scan" autoplay playsinline></video>
|
|
<img src="baseapp/assets/qr-overlayer.svg" alt="">
|
|
</div>
|
|
</div>
|
|
<!-- page-tutorial -->
|
|
<div id="page-tutorial" class="page-tutorial page">
|
|
<div class="tutorial-box">
|
|
<div class="tutorial">
|
|
<b>HELLO !</b>
|
|
<br>
|
|
<br>
|
|
<p>Quick Guide</p>
|
|
<img src="baseapp/assets/tastierino.svg">
|
|
<div>
|
|
<br>
|
|
<p>1. Press (←) to go left</p>
|
|
<p>2. Press (OK) to select</p>
|
|
<p>3. Press (→) to go right</p>
|
|
<br>
|
|
<br>
|
|
<b>Press OK to confirm</b>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- page-group -->
|
|
<div class= "page-group page" id="page-group">
|
|
<div class="container" id="groups-container"></div>
|
|
</div>
|
|
<!-- page-select -->
|
|
<div id="page-select" class="page-select page">
|
|
<div class= "container" id="options-container"> </div>
|
|
</div>
|
|
<!-- page-input-image_video -->
|
|
<div id="page-input-image_video" class="page-input-image_video page">
|
|
<div class="countdown">
|
|
<div class="number">3</div>
|
|
<div class="number">2</div>
|
|
<div class="number">1</div>
|
|
</div>
|
|
<div class="box-camera">
|
|
<video id="webcam" autoplay playsinline></video>
|
|
</div>
|
|
</div>
|
|
<!-- page-loading -->
|
|
<div id="page-loading" class="page-loading page">
|
|
<div id="box-camera" class="box-camera">
|
|
<img src=""></img>
|
|
</div>
|
|
<div id="progress-bar-container" class="bar">
|
|
<div class="progress-page" id="progressPage">
|
|
<div class="progress-container">
|
|
<div class="progress-bar" id="progressBar"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- page-result -->
|
|
<div id="page-result" class="page-result page">
|
|
<div class="box-camera">
|
|
<img id="output-image" src=""></img>
|
|
</div>
|
|
<div class="qr">
|
|
<div id="qr-content" class="qr-content">
|
|
<img src=""></img>
|
|
</div>
|
|
<div class="qr-content" id="qr-loader">
|
|
<img src="baseapp/assets/qr-loader.gif"></img>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- button -->
|
|
<div class="button">
|
|
<div id="back-button" class="button-content l negative"> BACK</div>
|
|
<div id="action-button" class="button-content r positive"> START</div>
|
|
<div id="recButton" class="button-content r positive">
|
|
<div class="re">
|
|
<div><span class="red-dot">● </span>REC</div>
|
|
<div>00.00</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div id="page-screensaver" class="page-screensaver page">
|
|
<div class="grid" id="grid">
|
|
<!-- dynamic grid -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- flash -->
|
|
<div class="flash"></div>
|
|
</body>
|
|
|
|
</html> |