mirror of https://github.com/PiyushXCoder/lupt.git
200 lines
8.4 KiB
HTML
200 lines
8.4 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" class="bg-white" style="z-index: 9999; position: fixed; top: 0; bottom: 0;width: 100%; height: 100%;">
|
|
<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%;">
|
|
<button class="button" 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>
|
|
</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-light">
|
|
<button onclick="leave()" class="button chatpanel-top-l">
|
|
<img 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 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-light">
|
|
<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 onclick="send()" 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 bg-white is-hidden">
|
|
<span>sss</span>
|
|
<a onclick="$('#reply_clip > span').text(''); $('#reply_clip').addClass('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 bg-white is-hidden">
|
|
<div style="padding: 4px;">
|
|
<div onclick="copyMessagesToClipboard()" class="button outline primary">Copy</div>
|
|
<div onclick="prepareReply()" class="button outline primary">Reply</div>
|
|
<a onclick="Messages.unselectAll()" style="float: right; padding: 6px 2px 6px 8px;">
|
|
<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 bg-white">
|
|
<div class="is-hidden">
|
|
<button class="button">
|
|
<img src="img/image.svg" alt="Image" width="50" class="siimple--py-2 siimple--px-2">
|
|
<div>send image</div>
|
|
</button>
|
|
</div>
|
|
<div>
|
|
<button onclick="Messages.cleanMessage()" class="button">Clear</button>
|
|
<button onclick="vayaktiList()" class="button">List Vyakti(Users)</button>
|
|
</div>
|
|
</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" style="float: 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/app.js"></script>
|
|
</body>
|
|
</html> |