mirror of https://github.com/PiyushXCoder/lupt.git
177 lines
9.8 KiB
HTML
177 lines
9.8 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 id="connect_panel" 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 name="error_area" class="siimple-content siimple--py-1 siimple--text-small siimple--color-primary siimple-content--fluid"></div>
|
|
<div class="siimple-form-detail">Connect Grih(home) with kunjika.</div>
|
|
<div class="siimple-form-field">
|
|
<div class="siimple-form-field-label">Grih kunjika(home id)</div>
|
|
<input name="grih_kunjika" type="text" class="siimple-input siimple-input--fluid" placeholder="Grih kunjika">
|
|
<div class="siimple-form-field-helper">New group is created if no such group exists</div>
|
|
</div>
|
|
<div class="siimple-form-field">
|
|
<div class="siimple-form-field-label">Your kunjika(id)</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">Size of Home</div>
|
|
<input name="length" type="number" class="siimple-input siimple-input--fluid" placeholder="Size">
|
|
<div class="siimple-form-field-helper">Number of perople allowed in home. Leave empty for infinite</div>
|
|
</div>
|
|
<div class="siimple-form-field siimple--text-right" style="width: 100%;">
|
|
<div><span name="error_msg" class="siimple-tag siimple-tag--error siimple--my-2 hidden"></span></div>
|
|
<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(id)</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. Leave empty to connect anyone. Its recommended to try without tags if you don't get anyone</div>
|
|
</div>
|
|
<div class="siimple-form-field siimple--text-right" style="width: 100%;">
|
|
<div><span name="error_msg" class="siimple-tag siimple-tag--error siimple--my-2 hidden"></span></div>
|
|
<div id="str_connect" class="siimple-btn siimple-btn--success" onclick="connect($(this).parents('form').first())">Connect</div>
|
|
</div>
|
|
</form>
|
|
</tabs>
|
|
</div>
|
|
<div class="siimple-footer" align="center">
|
|
Made with ❤️️ by <a href="http://github.com/PiyushXCoder" class="siimple-link">Piyush Mishra</a>
|
|
</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 id="next_btn" onclick="connect_next()" class="siimple-navbar-item">Next →</a>
|
|
</div>
|
|
</div>
|
|
<div id="message_area_scroll" 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>
|
|
<div id="status_area" class="siimple--my-1">
|
|
|
|
</div>
|
|
</div>
|
|
<div class="siimple--bg-light chatpanel">
|
|
<div class="chatpanel-left">
|
|
<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">
|
|
<textarea id="send_box" class="siimple-textarea"></textarea>
|
|
</div>
|
|
<div class="chatpanel-right">
|
|
<div onclick="send()" class="siimple-btn siimple-btn--blue siimple-btn--rounded 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 onclick="cleanMessage()" class="siimple-btn siimple-btn--blue">Clear</a>
|
|
<a onclick="vayaktiList()" class="siimple-btn siimple-btn--blue">List Vyakti(Users)</a>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Vyakti List -->
|
|
<div id="vayakti_model" class="siimple-modal siimple-modal--large hidden" style="z-index: 9999;" id="modal">
|
|
<div class="siimple-modal-content">
|
|
<div class="siimple-modal-header">
|
|
<div class="siimple-modal-header-title">List Vyakti(Users)</div>
|
|
<div onclick="$('#vayakti_model').addClass('hidden')" class="siimple-modal-header-close" id="modal-close"></div>
|
|
</div>
|
|
<div class="siimple-modal-body siimple--px-0">
|
|
<div class="siimple-table siimple--px-3">
|
|
<div class="siimple-table-header">
|
|
<div class="siimple-table-row">
|
|
<div class="siimple-table-cell">Name</div>
|
|
<div class="siimple-table-cell">Kunjika</div>
|
|
</div>
|
|
</div>
|
|
<div id="vayakti_list" class="siimple-table-body">
|
|
<div class="siimple-table-row">
|
|
<div class="siimple-table-cell">a</div>
|
|
<div class="siimple-table-cell">a</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="siimple-modal-footer siimple--py-2">
|
|
<a onclick="$('#vayakti_model').addClass('hidden'); $('#vayakti_list').empty()" class="siimple-btn siimple-btn--blue">Close</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="js/jquery-3.5.1.min.js"></script>
|
|
<script src="js/app.js"></script>
|
|
</body>
|
|
</html> |