mirror of https://github.com/PiyushXCoder/lupt.git
229 lines
10 KiB
HTML
229 lines
10 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<link rel="stylesheet" href="css/style.css">
|
|
<title>Lupt Chat</title>
|
|
</head>
|
|
<body>
|
|
<div id="progress"
|
|
style="z-index: 9999; position: fixed; top: 0; bottom: 0;
|
|
width: 100%; height: 100%; background-color: var(--bg-secondary-color);">
|
|
<div style="top: 50%;
|
|
left: 50%;
|
|
width:10em;
|
|
height:10em;
|
|
margin-top: -5em; /*set to a negative number 1/2 of your height*/
|
|
margin-left: -5em; /*set to a negative number 1/2 of your width*/
|
|
position:fixed;
|
|
text-align: center;
|
|
">
|
|
<img src="img/loading.svg" style="height: 100%;">
|
|
<div id="initerror"></div>
|
|
<button id="progress_button" class="button" style="display: none;" onclick="leave()">Close</button>
|
|
</div>
|
|
</div>
|
|
<!-- Connect Screen -->
|
|
<div id="connect_panel" class="container">
|
|
<div class="logo is-center" style="padding-top: 20px;">
|
|
<img src="img/label.png" alt="Lupt Chat" width="400">
|
|
</div>
|
|
<tabs>
|
|
<div class="tabs is-center">
|
|
<a name="kaksh_sec" class="active">Kaksh(Room)</a>
|
|
<a name="stranger_sec">Stranger</a>
|
|
<a onclick="changeColor()"><img src="img/color.svg" alt="C" height="16"></a>
|
|
</div>
|
|
|
|
<form name="kaksh_sec" cmd="join">
|
|
<div class="is-center">
|
|
Connect Kaksh(room) with kunjika(id)
|
|
</div>
|
|
<div>
|
|
<label>Kaksh kunjika(room id)</label>
|
|
<input name="kaksh_kunjika" type="text" placeholder="Kaksh kunjika">
|
|
<small class="text-grey">Pick a random id to create new kaksh</small>
|
|
</div>
|
|
<div>
|
|
<label>Your kunjika(your id)</label>
|
|
<input name="kunjika" type="text" placeholder="Your kunjika">
|
|
<small class="text-grey">Pick a random kunjika(id)</small>
|
|
</div>
|
|
<div>
|
|
<label>Your name</label>
|
|
<input name="name" type="text" placeholder="Your name">
|
|
</div>
|
|
<div>
|
|
<label>Size of kaksh(<i>Optional</i>)</label>
|
|
<input name="length" type="number" placeholder="Size">
|
|
<small class="text-grey">Number of perople allowed in kaksh.</small>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col is-vertical-align text-right"><div name="error_msg" class="text-error is-hidden"></div></div>
|
|
<div class="col is-right">
|
|
<a name="connect" class="button outline primary">Connect</a>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
|
|
<form name="stranger_sec" cmd="rand" class="is-hidden">
|
|
<div class="is-center">
|
|
Connect random stranger
|
|
</div>
|
|
<div>
|
|
<label>Your kunjika(your id)</label>
|
|
<input name="kunjika" type="text" placeholder="Your kunjika">
|
|
<small class="text-grey">Pick a random kunjika(id)</small>
|
|
</div>
|
|
<div>
|
|
<label>Your name</label>
|
|
<input name="name" type="text" placeholder="Your name">
|
|
</div>
|
|
<div>
|
|
<label>Tags</label>
|
|
<input name="tags" type="text" placeholder="Tags">
|
|
<small class="text-grey text-center">
|
|
Seperated by space. Leave empty to connect anyone.
|
|
Its recommended to try without tags if you don't get anyone.
|
|
</small>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col is-vertical-align text-right"><div name="error_msg" class="text-error is-hidden"></div></div>
|
|
<div class="col is-right">
|
|
<a name="connect" class="button outline primary">Connect</a>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</tabs>
|
|
<div class="is-center text-center">
|
|
<small>
|
|
By tapping "Connect" button I agree with
|
|
<a href="/terms.html">Terms of Service</a> and
|
|
<a href="policy.html">Privacy Policy</a>
|
|
</small>
|
|
</div>
|
|
|
|
<footer class="is-center" style="padding: 60px;">
|
|
<small>Made with ❤️️ by <a href="https://gitlab.com/PiyushXCoder" >Piyush Mishra</a></small>
|
|
</footer>
|
|
|
|
</div>
|
|
|
|
<!-- Chat Screen -->
|
|
<div id="chat_panel" class="cover-screen chatpanel is-hidden">
|
|
<div class="chatpanel-top bg-ter">
|
|
<button onclick="leave()" class="button chatpanel-top-l">
|
|
<img class="svg-filter" src="img/back.svg" alt="" height="12px"> Back
|
|
|
|
</button>
|
|
<img src="img/label.png" alt="Lupt Chat" height="40px" class="chatpanel-top-m">
|
|
<button id="next_btn" onclick="connect_next()" class="button chatpanel-top-r is-hidden">
|
|
Next <img class="svg-filter" src="img/next.svg" alt="" height="12px">
|
|
</button>
|
|
</div>
|
|
<div id="message_area_scroll" class="chatpanel-mid">
|
|
<div id="message_area">
|
|
|
|
</div>
|
|
<div id="status_area">
|
|
|
|
</div>
|
|
</div>
|
|
<div class="chatpanel-bot bg-ter">
|
|
<button onclick="$('#action_clip').toggleClass('is-hidden')" class="button chatpanel-bot-l">
|
|
<img src="img/clip.svg" alt="send" width="24">
|
|
</button>
|
|
<div class="chatpanel-bot-m">
|
|
<textarea id="send_box" rows="1"></textarea>
|
|
</div>
|
|
<button id="send_button" class="button chatpanel-bot-r">
|
|
<img src="img/send.svg" alt="Send" width="50">
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Reply Clip -->
|
|
<div id="reply_clip" class="clip-win reply-clip is-hidden">
|
|
<span></span>
|
|
<a onclick="$('#reply_clip > span').text(''); $('#reply_clip').attr('msg', '');
|
|
$('#reply_clip').addClass('is-hidden');" style="float: right; padding: 3px 6px;">
|
|
<img src="img/close.svg" alt="X" style="height: 1.8rem; width: auto; cursor: pointer;">
|
|
</a>
|
|
</div>
|
|
|
|
<!-- Selected Clip -->
|
|
<div id="selected_clip" class="clip-win selected-clip is-hidden">
|
|
<div style="padding: 4px;">
|
|
<button onclick="Messages.copyMessagesToClipboard()" class="button outline primary" style="padding: 1rem 1rem;">
|
|
<img src="img/delete.svg" style="height: 1.6rem;">
|
|
</button>
|
|
<button onclick="Messages.copyMessagesToClipboard()" class="button outline primary" style="padding: 1rem 1rem;">
|
|
<img src="img/edit.svg" class="svg-filter" style="height: 1.6rem;">
|
|
</button>
|
|
<button onclick="Messages.copyMessagesToClipboard()" class="button outline primary" style="padding: 1rem 1rem;">
|
|
<img src="img/copy.svg" class="svg-filter" style="height: 1.6rem;">
|
|
</button>
|
|
<button onclick="Messages.prepareReply()" class="button outline primary">Reply</button>
|
|
<a onclick="Messages.unselectAll()" style="float: right; padding: 7px 2px 7px 15px;">
|
|
<img src="img/close.svg" alt="X" style="height: 1.8rem; width: auto; cursor: pointer;">
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Action Clip -->
|
|
<div id="action_clip" class="clip-win action-clip is-hidden">
|
|
<div style="padding-bottom: 10px;">
|
|
<button class="button" onclick="$('#file-input').click()">
|
|
<img src="img/image.svg" alt="Image" width="50" max-size="3072" class="siimple--py-2 siimple--px-2">
|
|
<div>send image</div>
|
|
</button>
|
|
<input id="file-input" class="is-hidden" type="file" accept="image/png, image/jpeg"/>
|
|
</div>
|
|
<div>
|
|
<button onclick="changeColor()" class="button"><img src="img/color.svg" alt="C" height="16"></button>
|
|
<button onclick="Messages.cleanMessage()" class="button">Clear</button>
|
|
<button onclick="vayaktiList()" class="button">List Vyakti(Users)</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Camera Clip -->
|
|
<div id="camera_clip" class="clip-win camera-clip is-hidden">
|
|
<video autoplay="true" id="videoElement" width="300"></video>
|
|
<button class="button is-full-width">Send</button>
|
|
|
|
</div>
|
|
|
|
<!-- vayakti -->
|
|
<div id="vayakti_model" class="card is-hidden" style="position: fixed; top: 50px; bottom: 50px; right: 0; z-index: 9999; width: 100%; max-width: 500px;">
|
|
<header>
|
|
<h4>
|
|
List Vyakti(Users)
|
|
<button onclick="$('#vayakti_model').addClass('is-hidden'); $('#vayakti_list').empty()" class="button bg-red pull-right"><img src="img/close.svg" alt="X" style="height: 1.8rem; width: auto; cursor: pointer;"></button>
|
|
</h4>
|
|
</header>
|
|
<div style="overflow-y: scroll; height: calc(100% - 40px);">
|
|
<table>
|
|
<thead>
|
|
<th>Name</th>
|
|
<th>Kunjika</th>
|
|
</thead>
|
|
<tbody id="vayakti_list">
|
|
<tr>
|
|
<td>1</td>
|
|
<td>2</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
<script src="js/jquery-3.5.1.min.js"></script>
|
|
<script src="js/compressor.min.js"></script>
|
|
<script src="js/actions.js"></script>
|
|
<script src="js/state.js"></script>
|
|
<script src="js/message.js"></script>
|
|
<script src="js/camera.js"></script>
|
|
<script src="js/app.js"></script>
|
|
<script src="js/onload.js"></script>
|
|
</body>
|
|
</html> |