mirror of https://github.com/PiyushXCoder/lupt.git
143 lines
7.4 KiB
HTML
143 lines
7.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="shortcut icon" href="#">
|
|
<link rel="stylesheet" href="css/siimple.min.css">
|
|
<link rel="stylesheet" href="css/style.css">
|
|
<title>Lupt Chat</title>
|
|
</head>
|
|
<body>
|
|
<div id="progressbar" class="siimple-progress siimple-progress--primary siimple-progress--striped progress-bar">
|
|
<span style="width:100%;"></span>
|
|
</div>
|
|
|
|
<!-- Connect Screen -->
|
|
<div class="siimple-content siimple-content--extra-small">
|
|
<div class="siimple--px-5 siimple--py-5">
|
|
<tabs>
|
|
<div class="siimple-jumbotron siimple--text-center siimple--py-4">
|
|
<div class="siimple-jumbotron-title"><img src="img/label.svg" alt="Lupt Chat" style="width: 100%; height: auto;"></div>
|
|
<div class="siimple-jumbotron-detail">Chat in group or to strangers</div>
|
|
</div>
|
|
<div class="siimple-tabs">
|
|
<div for="grih_sec" class="siimple-tabs-item siimple-tabs-tab--selected">Grih</div>
|
|
<div for="stranger_sec" class="siimple-tabs-item">Stranger</div>
|
|
</div>
|
|
|
|
<form name="grih_sec" cmd="join" class="siimple-form">
|
|
<div class="siimple-form-detail">Connect Grih(group) with kunjika.</div>
|
|
<div class="siimple-form-field">
|
|
<div class="siimple-form-field-label">Grih kunjika</div>
|
|
<input name="grih_kunjika" type="text" class="siimple-input siimple-input--fluid" placeholder="Grih kunjika">
|
|
</div>
|
|
<div class="siimple-form-field">
|
|
<div class="siimple-form-field-label">Your kunjika</div>
|
|
<input name="kunjika" type="text" class="siimple-input siimple-input--fluid" placeholder="Your kunjika">
|
|
</div>
|
|
<div class="siimple-form-field">
|
|
<div class="siimple-form-field-label">Your name</div>
|
|
<input name="name" type="text" class="siimple-input siimple-input--fluid" placeholder="Your name">
|
|
</div>
|
|
<div class="siimple-form-field siimple--float-right">
|
|
<div id="grih_connect" class="siimple-btn siimple-btn--success" onclick="connect($(this).parents('form').first())">Connect</div>
|
|
</div>
|
|
</form>
|
|
|
|
<form name="stranger_sec" cmd="rand" class="siimple-form hidden">
|
|
<div class="siimple-form-detail">Connect random stranger</div>
|
|
<div class="siimple-form-field">
|
|
<div class="siimple-form-field-label">Your kunjika</div>
|
|
<input name="kunjika" type="text" class="siimple-input siimple-input--fluid" placeholder="Your kunjika">
|
|
</div>
|
|
<div class="siimple-form-field">
|
|
<div class="siimple-form-field-label">Your name</div>
|
|
<input name="name" type="text" class="siimple-input siimple-input--fluid" placeholder="Your name">
|
|
</div>
|
|
<div class="siimple-form-field">
|
|
<div class="siimple-form-field-label">Tags</div>
|
|
<input name="tags" type="text" class="siimple-input siimple-input--fluid" placeholder="Tags">
|
|
<div class="siimple-form-field-helper">Seperated by space</div>
|
|
</div>
|
|
<div class="siimple-form-field siimple--float-right">
|
|
<div id="str_connect" class="siimple-btn siimple-btn--success" onclick="connect($(this).parents('form').first())">Connect</div>
|
|
</div>
|
|
</form>
|
|
</tabs>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Chat Screen -->
|
|
<div id="chat_panel" class="cover-screen siimple--bg-white hidden">
|
|
<div class="siimple-navbar siimple--py-1 siimple-navbar--dark">
|
|
<div class="siimple--float-left">
|
|
<a onclick="leave()" class="siimple-navbar-item">← Back</a>
|
|
</div>
|
|
<a class="siimple-navbar-title"><img src="img/label-l.svg" alt="Lupt Chat" height="34px"></a>
|
|
<div class="siimple--float-right">
|
|
<a class="siimple-navbar-item">Next →</a>
|
|
</div>
|
|
</div>
|
|
<div style="height: calc(100% - 2*44px - 2*5px); padding: 5px; overflow-y: scroll;" class="siimple--bg-light">
|
|
<div id="message_area" class="siimple--my-1">
|
|
<div class="message message-other">
|
|
<div class="message-by">Ram_1_5</div>
|
|
<pre>huh</pre>
|
|
</div>
|
|
<div class="message message-other">
|
|
<div class="message-by">Ram_1_5</div>
|
|
<pre>haha</pre>
|
|
</div>
|
|
<div class="message message-me">
|
|
<div class="message-by">you</div>
|
|
<pre>ya</pre>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="siimple--bg-light chatpanel">
|
|
<div class="chatpanel-left siimple--mx-1 siimple--my-1">
|
|
<div onclick="$('#action_clip').toggleClass('hidden')" class="siimple-btn siimple-btn--grey siimple--px-1"><img src="img/clip.svg" alt="send" width="24"></div>
|
|
</div>
|
|
<div class="chatpanel-mid siimple--mx-1 siimple--my-1">
|
|
<textarea id="send_box" class="siimple-textarea siimple-textarea--fluid" style="height: calc(2em + 10px); overflow-y: hidden;"></textarea>
|
|
</div>
|
|
<div class="chatpanel-right siimple--mx-1 siimple--my-1">
|
|
<div onclick="send()" class="siimple-btn siimple-btn--blue siimple--px-2" style="height: 24px;"><img src="img/send.svg" alt="Send" width="24"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Reply Clip -->
|
|
<div id="reply_clip" class="clip-win reply-clip siimple--bg-white hidden">
|
|
<span></span>
|
|
<div onclick="$('#reply_clip > span').text(''); $('#reply_clip').addClass('hidden');" class="siimple-close siimple--float-right"></div>
|
|
</div>
|
|
|
|
<!-- Selected Clip -->
|
|
<div id="selected_clip" class="clip-win selected-clip siimple--bg-white hidden">
|
|
<div class="siimple-btn-group">
|
|
<div onclick="copyMessagesToClipboard()" class="siimple-btn siimple-btn--blue siimple--px-2" style="height: 24px;">Copy</div>
|
|
<div onclick="prepareReply()" class="siimple-btn siimple-btn--blue siimple--px-2" style="height: 24px;">Reply</div>
|
|
</div>
|
|
<div class="siimple-close siimple--float-right siimple--my-1 siimple--ml-2"></div>
|
|
</div>
|
|
|
|
<!-- Action Clip -->
|
|
<div id="action_clip" class="clip-win action-clip siimple--bg-white hidden">
|
|
<div class="siimple--my-1">
|
|
<div class="siimple-btn siimple-btn--light">
|
|
<img src="img/image.svg" alt="Image" width="50" class="siimple--py-2 siimple--px-2">
|
|
<div>send image</div>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<a class="siimple-btn siimple-btn--blue">Clear</a>
|
|
<a class="siimple-btn siimple-btn--blue">List Users</a>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="js/jquery-3.5.1.min.js"></script>
|
|
<script src="js/app.js"></script>
|
|
</body>
|
|
</html> |