Telegram Web K with changes to work inside I2P
https://web.telegram.i2p/
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
591 lines
30 KiB
591 lines
30 KiB
5 years ago
|
<!DOCTYPE html>
|
||
|
|
<html class="no-js" lang="en">
|
||
|
|
|
||
|
|
<head>
|
||
|
|
<meta charset="utf-8">
|
||
|
|
<title>Telegram Web</title>
|
||
|
|
<meta name="description" content="">
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
|
|
|
||
|
|
<link rel="apple-touch-icon" sizes="180x180" href="assets/img/apple-touch-icon.png">
|
||
|
|
<link rel="icon" type="image/png" sizes="32x32" href="assets/img/favicon-32x32.png">
|
||
|
|
<link rel="icon" type="image/png" sizes="16x16" href="assets/img/favicon-16x16.png">
|
||
|
|
<link rel="manifest" href="site.webmanifest">
|
||
|
|
<link rel="mask-icon" href="assets/img/safari-pinned-tab.svg" color="#64a3f0">
|
||
|
|
<meta name="msapplication-TileColor" content="#da532c">
|
||
|
|
<meta name="theme-color" content="#fafafa">
|
||
|
|
{{# each htmlWebpackPlugin.files.css }}
|
||
|
|
<link rel="stylesheet" href="{{ this }}">
|
||
|
|
{{/ each }}
|
||
|
|
{{# each htmlWebpackPlugin.files.extracted.css }}
|
||
|
|
<link rel="stylesheet" href="{{ this.file }}" media="{{ this.query }}">
|
||
|
|
{{/ each }}
|
||
|
|
</head>
|
||
|
|
|
||
|
|
<body>
|
||
|
|
<!--[if IE]>
|
||
|
|
<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="https://browsehappy.com/">upgrade your browser</a> to improve your experience and security.</p>
|
||
|
|
<![endif]-->
|
||
|
|
|
||
|
|
<div class="whole" id="auth-pages" style="display: none;">
|
||
|
|
<div class="tabs-container auth-pages__container">
|
||
|
|
<div class="page-sign">
|
||
|
|
<div class="container center-align">
|
||
|
|
<div class="auth-image">
|
||
|
|
<svg class="sign-logo" xmlns="http://www.w3.org/2000/svg" width="160" height="160" viewBox="0 0 160 160">
|
||
|
|
<use href="#logo" />
|
||
|
|
</svg>
|
||
|
|
</div>
|
||
|
|
<h4>Sign in to Telegram</h4>
|
||
|
|
<p class="subtitle">Please confirm your country and<br> enter your phone number.</p>
|
||
|
|
<div class="input-wrapper">
|
||
|
|
<div class="input-field input-select">
|
||
|
|
<input type="text" name="countryCode" id="countryCode" autocomplete="rrRandomRR" required />
|
||
|
|
<label for="countryCode">Country</label>
|
||
|
|
<span class="arrow arrow-down"></span>
|
||
|
|
</div>
|
||
|
|
<div class="input-field">
|
||
|
|
<input type="tel" name="phone" id="phone" autocomplete="rr55RandomRR55" required />
|
||
|
|
<label for="phone">Phone Number</label>
|
||
|
|
</div>
|
||
|
|
<label class="checkbox-field">
|
||
|
|
<input type="checkbox" id="keepSigned" checked="checked">
|
||
|
|
<span>Keep me signed in</span>
|
||
|
|
</label>
|
||
|
|
<button class="btn-primary rp" style="visibility: hidden;">NEXT</button>
|
||
|
|
<div class="qr"><a href="#" class="a-qr">Quick log in using QR code</a></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="page-signQR">
|
||
|
|
<div class="container center-align">
|
||
|
|
<div class="auth-image">
|
||
|
|
<canvas id="qr-code"></canvas>
|
||
|
|
</div>
|
||
|
|
<h4>Scan from mobile Telegram</h4>
|
||
|
|
<p class="qr-description">1. Open Telegram on your phone<br>2. Go to settings > Devices > Scan QR<br>3. Scan this image to Log in</p>
|
||
|
|
<div class="qr"><a href="#" class="a-qr">Or log in using your phone number</a></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="page-authCode">
|
||
|
|
<div class="container center-align">
|
||
|
|
<div class="auth-image"></div>
|
||
|
|
<div class="phone-wrapper">
|
||
|
|
<h4 class="phone"></h4>
|
||
|
|
<span class="phone-edit tgico-edit"></span>
|
||
|
|
</div>
|
||
|
|
<p class="subtitle sent-type"></p>
|
||
|
|
<div class="input-wrapper">
|
||
|
|
<div class="input-field">
|
||
|
|
<input type="text" name="code" id="code" autocomplete="off" required />
|
||
|
|
<label for="code">Code</label>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="page-password">
|
||
|
|
<div class="container center-align">
|
||
|
|
<div class="auth-image"></div>
|
||
|
|
<h4 class="phone">Enter a password</h4>
|
||
|
|
<p class="subtitle">Your account is protected with<br>an additional password</p>
|
||
|
|
<div class="input-wrapper">
|
||
|
|
<div class="input-field">
|
||
|
|
<input type="password" name="password" id="password" autocomplete="off" required />
|
||
|
|
<label for="password">Password</label>
|
||
|
|
<span class="toggle-visible tgico-eye1"></span>
|
||
|
|
</div>
|
||
|
|
<button class="btn-primary rp">NEXT</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="page-signUp">
|
||
|
|
<div class="container center-align">
|
||
|
|
<div class="auth-image avatar-edit">
|
||
|
|
<canvas class="avatar-edit-canvas" id="canvas-avatar"></canvas>
|
||
|
|
<span class="tgico tgico-cameraadd"></span>
|
||
|
|
</div>
|
||
|
|
<h4 class="fullName">Your Name</h4>
|
||
|
|
<p class="subtitle">Enter your name and add<br>a profile picture</p>
|
||
|
|
<div class="input-wrapper">
|
||
|
|
<div class="input-field">
|
||
|
|
<input type="text" name="name" id="name" autocomplete="off" required />
|
||
|
|
<label for="name">Name</label>
|
||
|
|
</div>
|
||
|
|
<div class="input-field">
|
||
|
|
<input type="text" name="lastName" id="lastName" autocomplete="off" required />
|
||
|
|
<label for="lastName">Last Name (optional)</label>
|
||
|
|
</div>
|
||
|
|
<button class="btn-primary rp" id="signUp">START MESSAGING</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="popup popup-avatar hide" id="popup-avatar" style="display: none;">
|
||
|
|
<div class="popup-container z-depth-1">
|
||
|
|
<div class="popup-header">
|
||
|
|
<span class="popup-close tgico-close"></span>
|
||
|
|
<h6>Drag to Reposition</h6>
|
||
|
|
</div>
|
||
|
|
<div class="crop"></div>
|
||
|
|
<button class="btn-primary rp btn-circle btn-crop btn-icon tgico-check z-depth-1"></button>
|
||
|
|
<input type="file" style="display: none;" />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="whole page-chats" style="display: none;" id="page-chats">
|
||
|
|
<svg style="position: absolute; top: -10000px; left: -10000px;">
|
||
|
|
<defs id="svg-defs">
|
||
|
|
<path id="message-tail" d="M1.00002881,1.03679295e-14 L7,0 L7,17 C6.8069969,14.1607017 6.12380234,11.2332513 4.95041634,8.21764872 C4.04604748,5.89342034 2.50413132,3.73337411 0.324667862,1.73751004 L0.324652538,1.73752677 C-0.0826597201,1.36452676 -0.110475289,0.731958677 0.262524727,0.324646419 C0.451952959,0.117792698 0.719544377,1.0985861e-14 1.00002881,1.04360964e-14 Z"></path>
|
||
|
|
<path id="logo" fill="#50A2E9" fill-rule="evenodd" d="M80,0 C124.18278,0 160,35.81722 160,80 C160,124.18278 124.18278,160 80,160 C35.81722,160 0,124.18278 0,80 C0,35.81722 35.81722,0 80,0 Z M114.262551,46.4516129 L114.123923,46.4516129 C111.089589,46.5056249 106.482806,48.0771432 85.1289541,56.93769 L81.4133571,58.4849956 C72.8664779,62.0684477 57.2607933,68.7965125 34.5963033,78.66919 C30.6591745,80.2345564 28.5967328,81.765936 28.4089783,83.2633288 C28.0626453,86.0254269 31.8703852,86.959903 36.7890378,88.5302703 L38.2642674,89.0045258 C42.3926354,90.314406 47.5534685,91.7248852 50.3250916,91.7847532 C52.9151948,91.8407003 55.7944784,90.8162976 58.9629426,88.7115451 L70.5121776,80.9327422 C85.6657026,70.7535853 93.6285785,65.5352892 94.4008055,65.277854 L94.6777873,65.216416 C95.1594319,65.1213105 95.7366278,65.0717596 96.1481181,65.4374337 C96.6344248,65.8695939 96.5866185,66.6880224 96.5351057,66.9075859 C96.127514,68.6448691 75.2839361,87.6143392 73.6629144,89.2417998 L73.312196,89.6016896 C68.7645143,94.2254793 63.9030972,97.1721503 71.5637945,102.355193 L73.3593638,103.544598 C79.0660342,107.334968 82.9483395,110.083813 88.8107882,113.958377 L90.3875424,114.996094 C95.0654739,118.061953 98.7330313,121.697601 103.562866,121.253237 C105.740839,121.052855 107.989107,119.042224 109.175465,113.09692 L109.246762,112.727987 C112.002037,98.0012935 117.417883,66.09303 118.669527,52.9443975 C118.779187,51.7924073 118.641237,50.318088 118.530455,49.6708963 L118.474159,49.3781963 C118.341081,48.7651315 118.067967,48.0040758 117.346762,47.4189793 C116.412565,46.6610871 115.002114,46.4638844 114.262551,46.4516129 Z"/>
|
||
|
|
<path id="poll-line" d="M4.47,5.33v13.6c0,4.97,4.03,9,9,9h458.16"/>
|
||
|
|
</defs>
|
||
|
|
</svg>
|
||
|
|
<div class="media-viewer-whole">
|
||
|
|
<div class="overlays">
|
||
|
|
<div class="media-viewer">
|
||
|
|
<div class="media-viewer-author">
|
||
|
|
<div class="btn-icon tgico-close only-handhelds menu-mobile-close rp"></div>
|
||
|
|
<avatar-element class="media-viewer-userpic"></avatar-element>
|
||
|
|
<div class="media-viewer-name"></div>
|
||
|
|
<div class="media-viewer-date"></div>
|
||
|
|
</div>
|
||
|
|
<div class="media-viewer-buttons">
|
||
|
|
<div class="btn-icon tgico-delete menu-delete rp"></div>
|
||
|
|
<div class="btn-icon tgico-forward menu-forward rp"></div>
|
||
|
|
<div class="btn-icon tgico-download menu-download rp"></div>
|
||
|
|
<div class="btn-icon tgico-close menu-close rp"></div>
|
||
|
|
</div>
|
||
|
|
<div class="media-viewer-content">
|
||
|
|
<div class="media-viewer-stub"></div>
|
||
|
|
<div class="media-viewer-container">
|
||
|
|
<div class="media-viewer-media"></div>
|
||
|
|
</div>
|
||
|
|
<div class="media-viewer-caption"></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="btn-icon tgico-more rp btn-menu-toggle only-handhelds">
|
||
|
|
<div class="btn-menu bottom-left">
|
||
|
|
<div class="btn-menu-item menu-menu-forward tgico-forward rp">Forward</div>
|
||
|
|
<div class="btn-menu-item menu-menu-download tgico-download rp">Download</div>
|
||
|
|
<div class="btn-menu-item menu-menu-delete danger tgico-delete rp">Delete</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="media-viewer-switchers">
|
||
|
|
<div class="media-viewer-switcher media-viewer-switcher-left menu-prev"><span class="tgico-down media-viewer-prev-button"></span></div>
|
||
|
|
<div class="media-viewer-switcher media-viewer-switcher-right menu-next"><span class="tgico-down media-viewer-next-button"></span></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="popup popup-send-photo">
|
||
|
|
<div class="popup-container z-depth-1">
|
||
|
|
<div class="popup-header">
|
||
|
|
<span class="btn-icon popup-close tgico-close"></span>
|
||
|
|
<div class="popup-title">Send Photo</div>
|
||
|
|
<button class="btn-primary rp">SEND</button>
|
||
|
|
</div>
|
||
|
|
<div class="popup-photo"></div>
|
||
|
|
<div class="input-field">
|
||
|
|
<input type="text" name="photo-caption" id="photo-caption" placeholder="Add a caption..." autocomplete="off" required />
|
||
|
|
<label for="photo-caption">Caption</label>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div id="main-columns" class="tabs-container">
|
||
|
|
<div class="chats-container sidebar sidebar-left main-column" id="column-left">
|
||
|
|
<div class="sidebar-slider tabs-container">
|
||
|
|
<div class="sidebar-slider-item item-main">
|
||
|
|
<div class="sidebar-header">
|
||
|
|
<div class="sidebar-header__btn-container">
|
||
|
|
<div class="btn-icon tgico-menu btn-menu-toggle rp sidebar-tools-button active">
|
||
|
|
<div class="btn-menu bottom-right">
|
||
|
|
<div class="btn-menu-item menu-newGroup tgico-newgroup rp">New Group</div>
|
||
|
|
<div class="btn-menu-item menu-contacts tgico-user rp">Contacts</div>
|
||
|
|
<div class="btn-menu-item menu-archived tgico-archive rp">Archived <span class="archived-count"></span></div>
|
||
|
|
<div class="btn-menu-item menu-saved tgico-savedmessages rp">Saved</div>
|
||
|
|
<div class="btn-menu-item menu-settings tgico-settings rp">Settings</div>
|
||
|
|
<div class="btn-menu-item menu-help tgico-help rp">Help</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="btn-icon tgico-back rp sidebar-back-button"></div>
|
||
|
|
</div>
|
||
|
|
<div class="input-search">
|
||
|
|
<input type="text" placeholder="Telegram Search" id="global-search" />
|
||
|
|
<span class="tgico tgico-search"></span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="sidebar-content">
|
||
|
|
<div id="chats-container"><ul id="dialogs"></ul></div>
|
||
|
|
<div class="sidebar-search hide" id="search-container"></div>
|
||
|
|
<button class="btn-primary btn-circle btn-icon rp btn-corner tgico-newchat_filled btn-menu-toggle" id="new-menu">
|
||
|
|
<div class="btn-menu top-left">
|
||
|
|
<div class="btn-menu-item menu-channel tgico-newchannel rp">New Channel</div>
|
||
|
|
<div class="btn-menu-item menu-group tgico-newgroup rp">New Group</div>
|
||
|
|
<div class="btn-menu-item menu-privateChat tgico-newprivate rp">New Private Chat</div>
|
||
|
|
</div>
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="sidebar-slider-item">
|
||
|
|
<div class="sidebar-header">
|
||
|
|
<button class="btn-icon rp tgico-back sidebar-close-button"></button>
|
||
|
|
<div class="sidebar-header__title">Archived Chats</div>
|
||
|
|
</div>
|
||
|
|
<div class="sidebar-content">
|
||
|
|
<div id="chats-archived-container">
|
||
|
|
<ul id="dialogs-archived"></ul>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="sidebar-slider-item" id="contacts-container">
|
||
|
|
<div class="sidebar-header">
|
||
|
|
<button class="btn-icon rp tgico-back sidebar-close-button"></button>
|
||
|
|
<div class="input-search">
|
||
|
|
<input type="text" placeholder="Search" id="contacts-search" autocomplete="ASKLXmQQr52" />
|
||
|
|
<span class="tgico tgico-search"></span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="sidebar-content">
|
||
|
|
<div>
|
||
|
|
<ul id="contacts" class="contacts-container"></ul>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="sidebar-slider-item new-channel-container">
|
||
|
|
<div class="sidebar-header">
|
||
|
|
<button class="btn-icon rp tgico-back sidebar-close-button"></button>
|
||
|
|
<div class="sidebar-header__title">New Channel</div>
|
||
|
|
</div>
|
||
|
|
<div class="sidebar-content">
|
||
|
|
<div class="avatar-edit">
|
||
|
|
<canvas class="avatar-edit-canvas"></canvas>
|
||
|
|
<span class="tgico tgico-cameraadd"></span>
|
||
|
|
</div>
|
||
|
|
<div class="input-wrapper">
|
||
|
|
<div class="input-field">
|
||
|
|
<input type="text" name="name" class="new-channel-name" autocomplete="xxDDqqOX" required="">
|
||
|
|
<label for="name">Channel Name</label>
|
||
|
|
</div>
|
||
|
|
<div class="input-field">
|
||
|
|
<input type="text" name="description" class="new-channel-description" autocomplete="aintsofunnow" required="">
|
||
|
|
<label for="lastName">Description (optional)</label>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="caption">You can provide an optional description for your channel.</div>
|
||
|
|
<button class="btn-primary btn-circle btn-icon rp btn-corner tgico-next"></button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="sidebar-slider-item addmembers-container">
|
||
|
|
<div class="sidebar-header">
|
||
|
|
<button class="btn-icon rp tgico-back sidebar-close-button"></button>
|
||
|
|
<div class="sidebar-header__title">Add Members</div>
|
||
|
|
</div>
|
||
|
|
<div class="sidebar-content">
|
||
|
|
<button class="btn-primary btn-circle btn-icon rp btn-corner tgico-next"></button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="sidebar-slider-item new-group-container">
|
||
|
|
<div class="sidebar-header">
|
||
|
|
<button class="btn-icon rp tgico-back sidebar-close-button"></button>
|
||
|
|
<div class="sidebar-header__title">New Group</div>
|
||
|
|
</div>
|
||
|
|
<div class="sidebar-content">
|
||
|
|
<div class="avatar-edit">
|
||
|
|
<canvas class="avatar-edit-canvas"></canvas>
|
||
|
|
<span class="tgico tgico-cameraadd"></span>
|
||
|
|
</div>
|
||
|
|
<div class="input-wrapper">
|
||
|
|
<div class="input-field">
|
||
|
|
<input type="text" name="name" class="new-group-name" autocomplete="feellikeamonster2112" required="">
|
||
|
|
<label for="name">Group Name</label>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<button class="btn-primary btn-circle btn-icon rp btn-corner tgico-next"></button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="sidebar-slider-item settings-container">
|
||
|
|
<div class="sidebar-header">
|
||
|
|
<button class="btn-icon rp tgico-back sidebar-close-button"></button>
|
||
|
|
<div class="sidebar-header__title">Settings</div>
|
||
|
|
<div class="btn-icon tgico-more rp btn-menu-toggle">
|
||
|
|
<div class="btn-menu bottom-left">
|
||
|
|
<div class="btn-menu-item menu-logout tgico-logout rp">Log Out</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="sidebar-content">
|
||
|
|
<div class="profile-content-wrapper scrollable scrollable-y">
|
||
|
|
<avatar-element class="profile-avatar"></avatar-element>
|
||
|
|
<div class="profile-name"></div>
|
||
|
|
<div class="profile-subtitle"></div>
|
||
|
|
<div class="profile-buttons">
|
||
|
|
<div class="profile-button menu-edit tgico-edit rp"><p>Edit Profile</p></div>
|
||
|
|
<div class="profile-button menu-general tgico-settings rp"><p>General Settings</p></div>
|
||
|
|
<div class="profile-button menu-notifications tgico-unmute rp"><p>Notifications</p></div>
|
||
|
|
<div class="profile-button menu-privacy tgico-lock rp"><p>Privacy and Security</p></div>
|
||
|
|
<div class="profile-button menu-language tgico-language rp"><p>Language</p></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="sidebar-slider-item edit-profile-container">
|
||
|
|
<div class="sidebar-header">
|
||
|
|
<button class="btn-icon rp tgico-back sidebar-close-button"></button>
|
||
|
|
<div class="sidebar-header__title">Edit Profile</div>
|
||
|
|
</div>
|
||
|
|
<div class="sidebar-content">
|
||
|
|
<div class="scroll-wrapper">
|
||
|
|
<div class="avatar-edit">
|
||
|
|
<canvas class="avatar-edit-canvas"></canvas>
|
||
|
|
<span class="tgico tgico-cameraadd"></span>
|
||
|
|
</div>
|
||
|
|
<div class="input-wrapper">
|
||
|
|
<div class="input-field">
|
||
|
|
<input type="text" name="name" class="firstname" autocomplete="xxDDqqOXJXC" required="">
|
||
|
|
<label for="name">Name</label>
|
||
|
|
</div>
|
||
|
|
<div class="input-field">
|
||
|
|
<input type="text" name="lastname" class="lastname" autocomplete="aintsofunnowzXCFF" required="">
|
||
|
|
<label for="lastname">Last Name</label>
|
||
|
|
</div>
|
||
|
|
<div class="input-field">
|
||
|
|
<input type="text" name="bio" class="bio" autocomplete="aintsofunnowhHQ" required="">
|
||
|
|
<label for="bio">Bio (optional)</label>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="caption">Any details such as age, occupation or city. Example:<br>23 y.o. designer from San Francisco.</div>
|
||
|
|
<hr/>
|
||
|
|
<div class="sidebar-left-h2">Username</div>
|
||
|
|
<div class="input-wrapper">
|
||
|
|
<div class="input-field">
|
||
|
|
<input type="text" name="username" class="username" autocomplete="xxDDqqOXffEER" required="">
|
||
|
|
<label for="username">Username (optional)</label>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="caption">You can choose a username on Telegram. If you do, other people will be able to find you by this username and contact you without knowing your phone number.<br><br>You can use a-z, 0-9 and underscores. Minimum length is 5 characters.<br><br><div class="profile-url-container">This link opens a chat with you:
|
||
|
|
<br><a class="profile-url" href="#" target="_blank"></a></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<button class="btn-primary btn-circle btn-icon rp btn-corner tgico-check"></button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="btn-menu" id="dialogs-contextmenu">
|
||
|
|
<div class="btn-menu-item menu-unread tgico rp"></div>
|
||
|
|
<div class="btn-menu-item menu-pin tgico rp"></div>
|
||
|
|
<div class="btn-menu-item menu-mute tgico rp"></div>
|
||
|
|
<div class="btn-menu-item menu-archive tgico rp"></div>
|
||
|
|
<div class="btn-menu-item menu-delete tgico-delete danger rp"></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="chat-container main-column" id="column-center">
|
||
|
|
<canvas id="chat-background-canvas"></canvas>
|
||
|
|
<div id="topbar" style="display: none;" class="sidebar-header">
|
||
|
|
<button class="btn-icon rp tgico-back sidebar-close-button"></button>
|
||
|
|
<div class="chat-info">
|
||
|
|
<div class="person">
|
||
|
|
<avatar-element id="im-avatar" dialog="1"></avatar-element>
|
||
|
|
<div class="content">
|
||
|
|
<div class="top">
|
||
|
|
<div class="user-title" id="im-title"></div>
|
||
|
|
</div>
|
||
|
|
<div class="bottom">
|
||
|
|
<div class="info" id="im-subtitle"></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="btn-icon rp chat-mute-button" style="display: none;"></div>
|
||
|
|
<div class="btn-icon rp tgico-search chat-search-button"></div>
|
||
|
|
<div class="btn-icon btn-menu-toggle rp tgico-more chat-more-button">
|
||
|
|
<div class="btn-menu bottom-left">
|
||
|
|
<div class="btn-menu-item menu-search tgico-search rp">Search</div>
|
||
|
|
<div class="btn-menu-item menu-mute rp">Mute</div>
|
||
|
|
<div class="btn-menu-item menu-delete tgico-delete danger rp">Delete and Leave</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div id="bubbles" class="scrolled-down">
|
||
|
|
<div id="bubbles-inner"></div>
|
||
|
|
<div id="bubbles-go-down" class="tgico-down z-depth-1 rp" style="display: none;"></div>
|
||
|
|
</div>
|
||
|
|
<div class="btn-menu" id="bubble-contextmenu">
|
||
|
|
<div class="btn-menu-item menu-reply tgico-reply rp">Reply</div>
|
||
|
|
<div class="btn-menu-item menu-edit tgico-edit rp">Edit</div>
|
||
|
|
<div class="btn-menu-item menu-copy tgico-copy rp">Copy</div>
|
||
|
|
<div class="btn-menu-item menu-pin tgico-pin rp">Pin</div>
|
||
|
|
<div class="btn-menu-item menu-forward tgico-forward rp">Forward</div>
|
||
|
|
<div class="btn-menu-item menu-delete tgico-delete danger rp">Delete</div>
|
||
|
|
</div>
|
||
|
|
<div id="chat-input" style="display: none;">
|
||
|
|
<!-- <div id="chat-input"> -->
|
||
|
|
<div class="emoji-dropdown">
|
||
|
|
<nav class="emoji-tabs menu-horizontal">
|
||
|
|
<ul>
|
||
|
|
<li class="emoji-tabs-emoji rp"><span>Emoji</span></li>
|
||
|
|
<li class="emoji-tabs-stickers rp"><span>Stickers</span></li>
|
||
|
|
<li class="emoji-tabs-gifs rp"><span>GIFs</span></li>
|
||
|
|
</ul>
|
||
|
|
</nav>
|
||
|
|
<div class="emoji-container">
|
||
|
|
<div class="tabs-container">
|
||
|
|
<div class="emoji-padding">
|
||
|
|
<div id="content-emoji"></div>
|
||
|
|
<nav class="menu-horizontal">
|
||
|
|
<ul class="justify-start">
|
||
|
|
<li class="btn-icon tgico-recent rp"></li>
|
||
|
|
<li class="active btn-icon tgico-smile rp"></li>
|
||
|
|
<li class="btn-icon tgico-animals rp"></li>
|
||
|
|
<li class="btn-icon tgico-eats rp"></li>
|
||
|
|
<li class="btn-icon tgico-car rp"></li>
|
||
|
|
<li class="btn-icon tgico-sport rp"></li>
|
||
|
|
<li class="btn-icon tgico-lamp rp"></li>
|
||
|
|
<!-- <li class="btn-icon tgico-info rp"></li> -->
|
||
|
|
<li class="btn-icon tgico-flag rp"></li>
|
||
|
|
</ul>
|
||
|
|
</nav>
|
||
|
|
</div>
|
||
|
|
<div class="stickers-padding">
|
||
|
|
<div id="content-stickers"></div>
|
||
|
|
<div class="menu-wrapper">
|
||
|
|
<nav class="menu-horizontal">
|
||
|
|
<ul class="justify-start">
|
||
|
|
<li class="btn-icon tgico-recent active"></li>
|
||
|
|
</ul>
|
||
|
|
</nav>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="gifs-padding">
|
||
|
|
<div id="content-gifs">
|
||
|
|
<div class="gifs-masonry"></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="input-message">
|
||
|
|
<div class="reply-wrapper">
|
||
|
|
<button class="btn-icon rp tgico-close reply-cancel"></button>
|
||
|
|
<div class="reply">
|
||
|
|
<div class="reply-border"></div>
|
||
|
|
<div class="reply-content">
|
||
|
|
<div class="reply-title"></div>
|
||
|
|
<div class="reply-subtitle"></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="new-message-wrapper">
|
||
|
|
<button class="btn-icon rp tgico-smile toggle-emoticons"></button>
|
||
|
|
<!-- <textarea type="text" id="input-message" placeholder="Message" contenteditable="true"></textarea> -->
|
||
|
|
<div class="input-message-container">
|
||
|
|
<div id="input-message" contenteditable="true" data-placeholder="Message"></div>
|
||
|
|
</div>
|
||
|
|
<button class="btn-icon rp tgico-attach btn-menu-toggle" id="attach-file">
|
||
|
|
<div class="btn-menu top-left">
|
||
|
|
<div class="btn-menu-item menu-media tgico-photo rp">Photo or Video</div>
|
||
|
|
<div class="btn-menu-item menu-document tgico-document rp">Document</div>
|
||
|
|
<div class="btn-menu-item menu-poll tgico-poll rp">Poll</div>
|
||
|
|
</div>
|
||
|
|
</button>
|
||
|
|
<div class="record-time"></div>
|
||
|
|
<input type="file" id="input-file" style="display: none;" multiple />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<button class="btn-circle z-depth-1 btn-icon tgico-delete danger" id="btn-record-cancel"></button>
|
||
|
|
<div class="btn-send-container">
|
||
|
|
<div class="record-ripple"></div>
|
||
|
|
<button class="btn-circle z-depth-1 btn-icon tgico-microphone2" id="btn-send"></button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="sidebar sidebar-right main-column" id="column-right">
|
||
|
|
<div class="sidebar-content">
|
||
|
|
<div class="profile-container">
|
||
|
|
<div class="sidebar-header">
|
||
|
|
<button class="btn-icon rp tgico sidebar-close-button"></button>
|
||
|
|
<div class="sidebar-header__title">Info</div>
|
||
|
|
|
||
|
|
<!-- <button class="btn-icon rp tgico-edit sidebar-edit-button"></button> -->
|
||
|
|
|
||
|
|
<div class="btn-icon tgico-more rp"></div>
|
||
|
|
<!-- <div class="btn-icon tgico-more rp btn-menu-toggle">
|
||
|
|
<div class="btn-menu bottom-left"> -->
|
||
|
|
<!-- <div class="btn-menu-item menu-mute rp">Mute</div>
|
||
|
|
<div class="btn-menu-item menu-delete tgico-delete danger rp">Delete and Leave</div> -->
|
||
|
|
<!-- </div>
|
||
|
|
</div> -->
|
||
|
|
</div>
|
||
|
|
<div class="profile-content">
|
||
|
|
<div class="profile-content-wrapper">
|
||
|
|
<avatar-element class="profile-avatar" dialog="1"></avatar-element>
|
||
|
|
<div class="profile-name"></div>
|
||
|
|
<div class="profile-subtitle"></div>
|
||
|
|
|
||
|
|
<div class="profile-row profile-row-bio tgico-info">
|
||
|
|
<p></p>
|
||
|
|
<p class="profile-row-label">Bio</p>
|
||
|
|
</div>
|
||
|
|
<div class="profile-row profile-row-username tgico-username">
|
||
|
|
<p></p>
|
||
|
|
<p class="profile-row-label">Username</p>
|
||
|
|
</div>
|
||
|
|
<div class="profile-row profile-row-phone tgico-phone">
|
||
|
|
<p></p>
|
||
|
|
<p class="profile-row-label">Phone</p>
|
||
|
|
</div>
|
||
|
|
<div class="profile-row profile-row-notifications">
|
||
|
|
<label>
|
||
|
|
<input type="checkbox" id="profile-notifications" checked="checked">
|
||
|
|
<span>Notifications</span>
|
||
|
|
</label>
|
||
|
|
<p class="profile-row-label">Enabled</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="content-container">
|
||
|
|
<nav class="profile-tabs menu-horizontal">
|
||
|
|
<ul>
|
||
|
|
<li class="profile-tabs-members rp" style="display: none;"><span>Members</span></li>
|
||
|
|
<li class="profile-tabs-media rp"><span>Media</span></li>
|
||
|
|
<li class="profile-tabs-docs rp"><span>Docs</span></li>
|
||
|
|
<li class="profile-tabs-links rp"><span>Links</span></li>
|
||
|
|
<li class="profile-tabs-audio rp"><span>Audio</span></li>
|
||
|
|
</ul>
|
||
|
|
</nav>
|
||
|
|
<div class="profile-tabs-content tabs-container">
|
||
|
|
<div class="content-members-container"><div id="content-members"></div></div>
|
||
|
|
<div class="content-media-container"><div id="content-media"></div></div>
|
||
|
|
<div class="content-docs-container"><div id="content-docs"></div></div>
|
||
|
|
<div class="content-links-container"><div id="content-links"></div></div>
|
||
|
|
<div class="content-audio-container"><div id="content-audio"></div></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="sidebar-search chats-container" id="search-private-container">
|
||
|
|
<div class="sidebar-header">
|
||
|
|
<button class="btn-icon rp tgico-close sidebar-close-button"></button>
|
||
|
|
<div class="input-search">
|
||
|
|
<input type="text" placeholder="Search" id="private-search" />
|
||
|
|
<span class="tgico tgico-search"></span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="chats-container"></div>
|
||
|
|
</div>
|
||
|
|
<div class="sidebar-search" id="forward-container">
|
||
|
|
<div class="sidebar-header">
|
||
|
|
<button class="btn-icon rp tgico-close sidebar-close-button"></button>
|
||
|
|
<div class="sidebar-header__title">Forward</div>
|
||
|
|
</div>
|
||
|
|
<button class="btn-primary btn-circle btn-icon rp btn-corner tgico-send"></button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
{{# each htmlWebpackPlugin.files.js }}
|
||
|
|
<script src="{{ this }}"></script>
|
||
|
|
{{/ each}}
|
||
|
|
{{# each htmlWebpackPlugin.files.extracted.js }}
|
||
|
|
<script src="{{ this.file }}"></script>
|
||
|
|
{{/ each}}
|
||
|
|
</html>
|