Skip to content

Instantly share code, notes, and snippets.

@hieptl

hieptl/index.html

Last active October 8, 2021 04:45
Show Gist options
  • Save hieptl/87c96938b2e3f65870e26fccb011e5f8 to your computer and use it in GitHub Desktop.
Save hieptl/87c96938b2e3f65870e26fccb011e5f8 to your computer and use it in GitHub Desktop.
Download ZIP
index.html - Client Side - Tinder Clone
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Tinder Clone - CometChat JS SDK</title>
<link rel="stylesheet" href="/css/styles.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.css">
</head>
<body>
<div class="main">
<div class="main__left">
<div class="header">
<div class="header__left">
<div class="header__right header__right--hide" id="header__right">
<img
src=""
alt="Tinder Clone with CometChat JS SDK"
id="user__image"
/>
<span id="user__name"></span>
</div>
</div>
<span class="header__logout">
<svg
id="header__logout"
xmlns="http://www.w3.org/2000/svg"
class="h-6 w-6"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"
/>
</svg>
</span>
</div>
<div class="main__left-title">Messages</div>
<div class="main__left-messages" id="main__left-messages">
<div class="main__left-empty" id="main__left-empty">Loading your contact...</div>
</div>
</div>
<div class="main__right">
<div class="main__card-container">
<div class="main__card">
<div id="main__card-empty">There are no more recommended users. Please comeback later.</div>
<div id="main__card-item-container" class="hide"></div>
<div class="main__card-actions hide" id="main__card-actions">
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-6 w-6"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
id="dislike"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M6 18L18 6M6 6l12 12"
/>
</svg>
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-6 w-6"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
id="like"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"
/>
</svg>
</div>
</div>
</div>
</div>
</div>
<div id="calling" class="calling calling--hide">
<div class="calling__content">
<div class="calling__container">
<div class="calling__title">You have a call</div>
</div>
<div class="calling__subtitle"></div>
<div id="calling__container">
<button id="accept-call" class="accepted">Accept</button>
<button id="reject-call" class="rejected">Reject</button>
</div>
</div>
</div>
<div id="loading" class="loading">
<div class="lds-roller">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
<div id="callScreen" class="bottom-stack"></div>
<div class="chatbox hide" id="chatbox">
<div class="chatbox__title">
<div class="chatbox__title-left">
<img id="chatbox__user-avatar" src="" />
<span id="chatbox__user-name">Jane</span>
</div>
<div class="chatbox__title-right">
<svg id="audio-call" xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z" />
</svg>
<svg id="video-call" xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 10l4.553-2.276A1 1 0 0121 8.618v6.764a1 1 0 01-1.447.894L15 14M5 18h8a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z" />
</svg>
<img id="chatbox__close" src="https://static.xx.fbcdn.net/rsrc.php/v3/y2/r/__geKiQnSG-.png" />
</div>
</div>
<div class="message__container">
<div id="message__container">
</div>
<div id="message-bottom"></div>
</div>
<div class="chatbox__input">
<input placeholder="Message..." id="message-input" />
</div>
</div>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/uuid/8.3.2/uuid.min.js"
integrity="sha512-UNM1njAgOFUa74Z0bADwAq8gbTcqZC8Ej4xPSzpnh0l6KMevwvkBvbldF9uR++qKeJ+MOZHRjV1HZjoRvjDfNQ=="
crossorigin="anonymous"
referrerpolicy="no-referrer"
></script>
<script
defer
src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"
></script>
<script
defer
type="text/javascript"
src="https://unpkg.com/@cometchat-pro/[email protected]/CometChat.js"
></script>
<script
src="https://code.jquery.com/jquery-2.2.4.min.js"
integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
crossorigin="anonymous"
></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/jquery-mobile/1.4.1/jquery.mobile.min.js"
integrity="sha512-wSacGPS/KRyVB67O4xD+Eh1OX4/dq4juZj9DKTokRt81BzLbfsSMtNgR9Pu8FLr4kLbk5oNr9Hq+5PeWLCX8mA=="
crossorigin="anonymous"
referrerpolicy="no-referrer"
></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"></script>
<script src="/js/config.js"></script>
<script src="/js/auth.js"></script>
<script src="/js/util.js"></script>
<script src="/js/index.js"></script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment