├── .gitignore
├── LICENSE
├── README.md
├── admin-dashboard
    └── index.html
├── gmail-mobile
    └── index.html
├── google-chrome-desktop
    └── index.html
├── macos-mail
    └── index.html
├── slack-desktop
    └── index.html
└── whatsapp-desktop
    ├── index.html
    └── whatsapp-bg.png


/.gitignore:
--------------------------------------------------------------------------------
 1 | # Logs
 2 | logs
 3 | *.log
 4 | npm-debug.log*
 5 | yarn-debug.log*
 6 | yarn-error.log*
 7 | 
 8 | # Runtime data
 9 | pids
10 | *.pid
11 | *.seed
12 | *.pid.lock
13 | 
14 | # Directory for instrumented libs generated by jscoverage/JSCover
15 | lib-cov
16 | 
17 | # Coverage directory used by tools like istanbul
18 | coverage
19 | 
20 | # nyc test coverage
21 | .nyc_output
22 | 
23 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
24 | .grunt
25 | 
26 | # Bower dependency directory (https://bower.io/)
27 | bower_components
28 | 
29 | # node-waf configuration
30 | .lock-wscript
31 | 
32 | # Compiled binary addons (https://nodejs.org/api/addons.html)
33 | build/Release
34 | 
35 | # Dependency directories
36 | node_modules/
37 | jspm_packages/
38 | 
39 | # TypeScript v1 declaration files
40 | typings/
41 | 
42 | # Optional npm cache directory
43 | .npm
44 | 
45 | # Optional eslint cache
46 | .eslintcache
47 | 
48 | # Optional REPL history
49 | .node_repl_history
50 | 
51 | # Output of 'npm pack'
52 | *.tgz
53 | 
54 | # Yarn Integrity file
55 | .yarn-integrity
56 | 
57 | # dotenv environment variables file
58 | .env
59 | 
60 | # next.js build output
61 | .next
62 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2019 Framework7
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | <p align="center"><a href="https://framework7.io" target="_blank" rel="noopener noreferrer"><img width="150" src="https://framework7.io/i/logo.svg" alt="Framework7"></a></p>
 2 | 
 3 | <p align="center">
 4 |   <a href="https://www.patreon.com/framework7"><img src="https://framework7.io/i/support-badge.png" height="20"></a>
 5 | </p>
 6 | 
 7 | # Framework7 Recipes
 8 | 
 9 | This repository contains different apps layouts, scripts and other kind of Framework7 proof of concept (PoC) things that can be useful for demonstration, reuse and inspiration.
10 | 
11 | ## Desktop Apps
12 | 
13 | * **[Google Chrome](./google-chrome-desktop/)**
14 | * **[macOs Mail](./macos-mail/)**
15 | * **[Slack](./slack-desktop/)**
16 | * **[Whatsapp](./whatsapp-desktop/)** by [@pvtallulah](https://github.com/pvtallulah)
17 | 
18 | ## Web
19 | 
20 | * **[Admin Dashboard](./admin-dashboard/)**
21 | 
22 | ## Mobile Apps
23 | 
24 | * **[Gmail Mobile](./gmail-mobile/)** by [@GuillaumeBiton](https://github.com/GuillaumeBiton)
25 | 
26 | 


--------------------------------------------------------------------------------
/admin-dashboard/index.html:
--------------------------------------------------------------------------------
   1 | <!DOCTYPE html>
   2 | <html lang="en">
   3 | <head>
   4 |   <meta charset="UTF-8">
   5 |   <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, viewport-fit=cover">
   6 |   <meta name="apple-mobile-web-app-capable" content="yes">
   7 |   <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
   8 |   <meta name="theme-color" content="#2196f3">
   9 |   <meta http-equiv="Content-Security-Policy" content="default-src * 'self' 'unsafe-inline' 'unsafe-eval' data:">
  10 |   <title>Framework7 Admin Dashboard</title>
  11 |   <link rel="stylesheet" href="https://unpkg.com/framework7/framework7-bundle.min.css">
  12 |   <link rel="stylesheet" href="https://unpkg.com/framework7-icons">
  13 |   <style>
  14 |     :root {
  15 |       --f7-panel-transition-duration: 250ms;
  16 |       --f7-bars-bg-color: #fff;
  17 |       --f7-page-bg-color: #f2f3f8;
  18 |       --f7-navbar-border-color: transparent;
  19 |       --f7-navbar-shadow-image: linear-gradient(to bottom,
  20 |         rgba(0,0,0,0.15) 0%,
  21 |         rgba(0,0,0,0.08) 40%,
  22 |         rgba(0,0,0,0.04) 50%,
  23 |         rgba(0,0,0,0) 90%,
  24 |         rgba(0,0,0,0) 100%
  25 |       );
  26 | 
  27 |     }
  28 |     .aurora {
  29 |       --f7-list-item-text-font-size: 13px;
  30 |       --f7-list-item-text-line-height: 18px;
  31 |       --f7-panel-collapsed-width: 44px;
  32 |     }
  33 |     .ios {
  34 |       --f7-panel-collapsed-width: 58px;
  35 |     }
  36 |     .md {
  37 |       --f7-panel-collapsed-width: 60px;
  38 |     }
  39 |     
  40 |     @media (min-width: 1024px) {
  41 |       .panel-open[data-panel="left"] {
  42 |         display: none !important;
  43 |       }
  44 |     }
  45 |     .panel-left.dark {
  46 |       --f7-list-chevron-icon-color: rgba(255,255,255,0.4);
  47 |     }
  48 |     .panel-left .list .icon,
  49 |     .panel-left .treeview .icon {
  50 |       color: #fff;
  51 |     }
  52 |     .panel-left .active-link {
  53 |       background-color: var(--f7-theme-color);
  54 |       --f7-list-link-hover-bg-color: var(--f7-theme-color-tint);
  55 |       --f7-list-link-pressed-bg-color: var(--f7-theme-color-shade);
  56 |     }
  57 | 
  58 |     .dashboard-cards {
  59 |       --f7-card-margin-vertical: 0px;
  60 |       --f7-card-margin-horizontal: 0px;
  61 |       --f7-card-box-shadow: 0px 0px 13px 0px rgba(82, 63, 105, 0.1);
  62 |     }
  63 | 
  64 |     .product-image {
  65 |       width: 56px;
  66 |       height: 56px;
  67 |       border-radius: 4px;
  68 |     }
  69 | 
  70 |     .avatar {
  71 |       width: 28px;
  72 |       height: 28px;
  73 |       border-radius: 50%;
  74 |     }
  75 | 
  76 |     @media (min-width: 768px) {
  77 |       .card-content.scrollable {
  78 |         overflow: auto;
  79 |         -webkit-overflow-scrolling: touch;
  80 |         height: 260px;
  81 |       }
  82 |     }
  83 | 
  84 |     .timeline-item-divider {
  85 |       background: var(--f7-theme-color);
  86 |     }
  87 |     .timeline-item-divider:after,
  88 |     .timeline-item-divider:before {
  89 |       width: 2px;
  90 |     }
  91 | 
  92 |     @media (min-width: 768px) {
  93 |       .events-col .card {
  94 |         height: 100%;
  95 |         display: flex;
  96 |         flex-direction: column;
  97 |       }
  98 |       .events-col .card-content {
  99 |         flex-shrink: 10;
 100 |         min-height: 0;
 101 |         overflow: auto;
 102 |         -webkit-overflow-scrolling: touch;
 103 |       }
 104 |     }
 105 |     @media (max-width: 767px) {
 106 |       .events-col {
 107 |         height: auto !important;
 108 |       }
 109 |     }
 110 | 
 111 |     .tasks-list {
 112 |       --f7-list-item-title-white-space: normal;
 113 |       --f7-list-item-title-font-weight: 500;
 114 |     }
 115 |     .aurora .tasks-list {
 116 |       --f7-list-item-padding-vertical: 8px;
 117 |       --f7-badge-size: 14px;
 118 |     }
 119 |     .tasks-list .item-media {
 120 |       width: 4px;
 121 |       min-width: 0 !important;
 122 |       margin-right: 5px;
 123 |     }
 124 |     .tasks-list .category-icon {
 125 |       height: 24px;
 126 |       width: 4px;
 127 |       border-radius: 2px;
 128 |       background: var(--f7-theme-color);
 129 |     }
 130 | 
 131 | 
 132 |   </style>
 133 | </head>
 134 | <body>
 135 |   <div id="app">
 136 |     <div class="panel panel-left panel-reveal panel-init dark" data-visible-breakpoint="1024" data-collapsed-breakpoint="1">
 137 |       <div class="view">
 138 |         <div class="page">
 139 |           <div class="list">
 140 |             <ul>
 141 |               <li>
 142 |                 <a href="#" class="item-content item-link active-link">
 143 |                   <div class="item-media">
 144 |                     <i class="icon f7-icons">square_grid_2x2_fill</i>
 145 |                   </div>
 146 |                   <div class="item-inner">
 147 |                     <div class="item-title">Dashboard</div>
 148 |                   </div>
 149 |                 </a>
 150 |               </li>
 151 |             </ul>
 152 |           </div>
 153 | 
 154 |           <div class="list">
 155 |             <ul>
 156 |               <li>
 157 |                 <a href="#" class="item-content item-link">
 158 |                   <div class="item-media">
 159 |                     <i class="icon f7-icons">person_circle_fill</i>
 160 |                   </div>
 161 |                   <div class="item-inner">
 162 |                     <div class="item-title">Users</div>
 163 |                   </div>
 164 |                 </a>
 165 |               </li>
 166 |             </ul>
 167 |           </div>
 168 | 
 169 |           <div class="list">
 170 |             <ul>
 171 |               <li>
 172 |                 <a href="#" class="item-content item-link">
 173 |                   <div class="item-media">
 174 |                     <i class="icon f7-icons">folder_fill</i>
 175 |                   </div>
 176 |                   <div class="item-inner">
 177 |                     <div class="item-title">Categories</div>
 178 |                   </div>
 179 |                 </a>
 180 |               </li>
 181 |               <li>
 182 |                 <a href="#" class="item-content item-link">
 183 |                   <div class="item-media">
 184 |                     <i class="icon f7-icons">cart_fill</i>
 185 |                   </div>
 186 |                   <div class="item-inner">
 187 |                     <div class="item-title">Products</div>
 188 |                   </div>
 189 |                 </a>
 190 |               </li>
 191 |             </ul>
 192 |           </div>
 193 | 
 194 |           <div class="list">
 195 |             <ul>
 196 |               <li>
 197 |                 <a href="#" class="item-content item-link">
 198 |                   <div class="item-media">
 199 |                     <i class="icon f7-icons">bag_fill</i>
 200 |                   </div>
 201 |                   <div class="item-inner">
 202 |                     <div class="item-title">Sales</div>
 203 |                   </div>
 204 |                 </a>
 205 |               </li>
 206 |               <li>
 207 |                 <a href="#" class="item-content item-link">
 208 |                   <div class="item-media">
 209 |                     <i class="icon f7-icons">graph_circle_fill</i>
 210 |                   </div>
 211 |                   <div class="item-inner">
 212 |                     <div class="item-title">Analytics</div>
 213 |                   </div>
 214 |                 </a>
 215 |               </li>
 216 |             </ul>
 217 |           </div>
 218 | 
 219 |           <div class="block block-strong no-padding-horizontal padding-vertical-half">
 220 |             <div class="treeview">
 221 |               <div class="treeview-item">
 222 |                 <div class="treeview-item-root treeview-item-toggle">
 223 |                   <div class="treeview-toggle"></div>
 224 |                   <div class="treeview-item-content">
 225 |                     <div class="treeview-item-label">Departments</div>
 226 |                   </div>
 227 |                 </div>
 228 |                 <div class="treeview-item-children">
 229 |                   <div class="treeview-item">
 230 |                     <a href="#" class="treeview-item-root">
 231 |                       <div class="treeview-item-content">
 232 |                         <div class="treeview-item-label">New York</div>
 233 |                       </div>
 234 |                     </a>
 235 |                   </div>
 236 |                   <div class="treeview-item">
 237 |                     <a href="#" class="treeview-item-root">
 238 |                       <div class="treeview-item-content">
 239 |                         <div class="treeview-item-label">London</div>
 240 |                       </div>
 241 |                     </a>
 242 |                   </div>
 243 |                   <div class="treeview-item">
 244 |                     <a href="#" class="treeview-item-root">
 245 |                       <div class="treeview-item-content">
 246 |                         <div class="treeview-item-label">Beijing</div>
 247 |                       </div>
 248 |                     </a>
 249 |                   </div>
 250 |                   <div class="treeview-item">
 251 |                     <a href="#" class="treeview-item-root">
 252 |                       <div class="treeview-item-content">
 253 |                         <div class="treeview-item-label">Tokyo</div>
 254 |                       </div>
 255 |                     </a>
 256 |                   </div>
 257 |                 </div>
 258 |               </div>
 259 |             </div>
 260 |           </div>
 261 |         </div>
 262 |       </div>
 263 |     </div>
 264 |     <div class="view view-main view-init">
 265 |       <div class="page">
 266 |         <div class="navbar">
 267 |           <div class="navbar-bg"></div>
 268 |           <div class="navbar-inner">
 269 |             <div class="left">
 270 |               <a class="link panel-open icon-only" data-panel="left">
 271 |                 <i class="icon f7-icons">bars</i>
 272 |               </a>
 273 |             </div>
 274 |             <div class="title">Dashboard</div>
 275 |             <div class="right">
 276 |               <a class="link popover-open" data-popover=".profile-popover">
 277 |                 <span class="margin-right-half">Hi, <b>John</b></span>
 278 |                 <img src="https://i.pravatar.cc/56?u=9" class="avatar">
 279 |               </a>
 280 |             </div>
 281 |             <div class="title-large">
 282 |               <div class="title-large-text display-flex align-items-center">
 283 |                 <i class="icon f7-icons margin-right-half" style="font-size: 24px">square_grid_2x2_fill</i>
 284 |                 <span>Dashboard</span>
 285 |               </div>
 286 |             </div>
 287 |           </div>
 288 |         </div>
 289 |         <div class="popover profile-popover">
 290 |           <div class="popover-inner">
 291 |             <h3 class="text-align-center">John Doe</h3>
 292 |             <div class="list no-hairlines no-hairlines-between">
 293 |               <ul>
 294 |                 <li>
 295 |                   <a href="#" class="item-link item-content">
 296 |                     <div class="item-media">
 297 |                       <i class="icon f7-icons">person_circle_fill</i>
 298 |                     </div>
 299 |                     <div class="item-inner">
 300 |                       <div class="item-title">Profile</div>
 301 |                     </div>
 302 |                   </a>
 303 |                 </li>
 304 |                 <li>
 305 |                   <a href="#" class="item-link item-content">
 306 |                     <div class="item-media">
 307 |                       <i class="icon f7-icons">gear_fill</i>
 308 |                     </div>
 309 |                     <div class="item-inner">
 310 |                       <div class="item-title">User Settings</div>
 311 |                     </div>
 312 |                   </a>
 313 |                 </li>
 314 |               </ul>
 315 |             </div>
 316 | 
 317 |             <div class="list no-hairlines no-hairlines-between margin-bottom">
 318 |               <ul>
 319 |                 <li>
 320 |                   <a href="#" class="item-link item-content">
 321 |                     <div class="item-media">
 322 |                       <i class="icon f7-icons">exit_fill</i>
 323 |                     </div>
 324 |                     <div class="item-inner">
 325 |                       <div class="item-title">Logout</div>
 326 |                     </div>
 327 |                   </a>
 328 |                 </li>
 329 |               </ul>
 330 |             </div>
 331 | 
 332 |           </div>
 333 |         </div>
 334 |         <div class="page-content">
 335 |           <div class="dashboard-cards">
 336 |             <div class="row margin-horizontal">
 337 |               <div class="col-100 medium-66 margin-top charts-col">
 338 |                 <div class="row">
 339 |                   <div class="col-50">
 340 |                     <div class="card">
 341 |                       <div class="card-header">Calls Plan</div>
 342 |                       <div class="card-content card-content-padding text-align-center">
 343 |                         <div
 344 |                           class="gauge gauge-init"
 345 |                           data-type="circle"
 346 |                           data-value="0.33"
 347 |                           data-value-text="20"
 348 |                           data-label-text="out of 60"
 349 |                           data-value-text-color="#f44336"
 350 |                           data-border-color="#f44336"
 351 |                           data-border-width="30"
 352 |                         ></div>
 353 |                       </div>
 354 |                     </div>
 355 |                   </div>
 356 |                   <div class="col-50">
 357 |                     <div class="card">
 358 |                       <div class="card-header">Sales Plan</div>
 359 |                       <div class="card-content card-content-padding text-align-center">
 360 |                         <div
 361 |                           class="gauge gauge-init"
 362 |                           data-type="circle"
 363 |                           data-value="0.75"
 364 |                           data-value-text="$7,500"
 365 |                           data-label-text="out of $10,000"
 366 |                           data-value-text-color="#ff9800"
 367 |                           data-border-color="#ff9800"
 368 |                           data-border-width="30"
 369 |                         ></div>
 370 |                       </div>
 371 |                     </div>
 372 |                   </div>
 373 |                   <div class="col-100 margin-top">
 374 |                     <div class="card">
 375 |                       <div class="card-header">Sales Trends</div>
 376 |                       <div class="card-content card-content-padding">
 377 |                         <canvas id="sales-chart"></canvas>
 378 |                       </div>
 379 |                     </div>
 380 |                   </div>
 381 |                 </div>
 382 |               </div>
 383 |               <div class="col-100 medium-33 margin-top events-col">
 384 |                 <div class="card">
 385 |                   <div class="card-header">Latest Events</div>
 386 |                   <div class="card-content card-content-padding">
 387 |                     <div class="timeline no-margin no-padding">
 388 |                       <div class="timeline-item">
 389 |                         <div class="timeline-item-date">10:00</div>
 390 |                         <div class="timeline-item-divider"></div>
 391 |                         <div class="timeline-item-content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor fugiat ipsam hic</div>
 392 |                       </div>
 393 |                       <div class="timeline-item">
 394 |                         <div class="timeline-item-date">11:00</div>
 395 |                         <div class="timeline-item-divider"></div>
 396 |                         <div class="timeline-item-content">Another text goes here</div>
 397 |                       </div>
 398 |                       <div class="timeline-item">
 399 |                         <div class="timeline-item-date">14:45</div>
 400 |                         <div class="timeline-item-divider"></div>
 401 |                         <div class="timeline-item-content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor fugiat ipsam hic porro enim, accusamus perferendis, quas commodi alias quaerat eius nemo deleniti. Odio quasi quos quis iure, aperiam pariatur?</div>
 402 |                       </div>
 403 |                       <div class="timeline-item">
 404 |                         <div class="timeline-item-date">16:24</div>
 405 |                         <div class="timeline-item-divider"></div>
 406 |                         <div class="timeline-item-content">One more text here</div>
 407 |                       </div>
 408 |                       <div class="timeline-item">
 409 |                         <div class="timeline-item-date">17:11</div>
 410 |                         <div class="timeline-item-divider"></div>
 411 |                         <div class="timeline-item-content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor fugiat ipsam hic</div>
 412 |                       </div>
 413 |                       <div class="timeline-item">
 414 |                         <div class="timeline-item-date">17:28</div>
 415 |                         <div class="timeline-item-divider"></div>
 416 |                         <div class="timeline-item-content">Another text goes here</div>
 417 |                       </div>
 418 |                       <div class="timeline-item">
 419 |                         <div class="timeline-item-date">18:00</div>
 420 |                         <div class="timeline-item-divider"></div>
 421 |                         <div class="timeline-item-content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor fugiat ipsam hic porro enim, accusamus perferendis, quas commodi alias quaerat eius nemo deleniti. Odio quasi quos quis iure, aperiam pariatur?</div>
 422 |                       </div>
 423 |                       <div class="timeline-item">
 424 |                         <div class="timeline-item-date">19:19</div>
 425 |                         <div class="timeline-item-divider"></div>
 426 |                         <div class="timeline-item-content">One more text here</div>
 427 |                       </div>
 428 |                     </div>
 429 |                   </div>
 430 |                 </div>
 431 |               </div>
 432 |             </div>
 433 |             <div class="row margin-horizontal">
 434 |               <div class="col-100 medium-66 margin-top">
 435 |                 <div class="card">
 436 |                   <div class="card-header">
 437 |                     <span>Best Sellers</span>
 438 |                     <div class="segmented">
 439 |                       <a class="button button-small button-outline tab-link-active tab-link" style="width:auto">Today</a>
 440 |                       <a class="button button-small button-outline tab-link" style="width:auto">Week</a>
 441 |                       <a class="button button-small button-outline tab-link" style="width:auto">Month</a>
 442 |                     </div>
 443 |                   </div>
 444 |                   <div class="card-content card-content-padding scrollable">
 445 |                     <div class="list media-list">
 446 |                       <ul>
 447 |                         <li class="item-content">
 448 |                           <div class="item-media">
 449 |                             <img class="product-image" src="https://placeimg.com/112/112/1">
 450 |                           </div>
 451 |                           <div class="item-inner">
 452 |                             <div class="item-title-row">
 453 |                               <div class="item-title">Logo Design</div>
 454 |                               <div class="item-after">12 sales</div>
 455 |                             </div>
 456 |                             <div class="item-text">Design</div>
 457 |                           </div>
 458 |                         </li>
 459 |                         <li class="item-content">
 460 |                           <div class="item-media">
 461 |                             <img class="product-image" src="https://placeimg.com/112/112/2">
 462 |                           </div>
 463 |                           <div class="item-inner">
 464 |                             <div class="item-title-row">
 465 |                               <div class="item-title">Website Design</div>
 466 |                               <div class="item-after">10 sales</div>
 467 |                             </div>
 468 |                             <div class="item-text">Design</div>
 469 |                           </div>
 470 |                         </li>
 471 |                         <li class="item-content">
 472 |                           <div class="item-media">
 473 |                             <img class="product-image" src="https://placeimg.com/112/112/3">
 474 |                           </div>
 475 |                           <div class="item-inner">
 476 |                             <div class="item-title-row">
 477 |                               <div class="item-title">PSD to HTML</div>
 478 |                               <div class="item-after">8 sales</div>
 479 |                             </div>
 480 |                             <div class="item-text">Coding</div>
 481 |                           </div>
 482 |                         </li>
 483 |                         <li class="item-content">
 484 |                           <div class="item-media">
 485 |                             <img class="product-image" src="https://placeimg.com/112/112/4">
 486 |                           </div>
 487 |                           <div class="item-inner">
 488 |                             <div class="item-title-row">
 489 |                               <div class="item-title">Business Card</div>
 490 |                               <div class="item-after">7 sales</div>
 491 |                             </div>
 492 |                             <div class="item-text">Design</div>
 493 |                           </div>
 494 |                         </li>
 495 |                         <li class="item-content">
 496 |                           <div class="item-media">
 497 |                             <img class="product-image" src="https://placeimg.com/112/112/5">
 498 |                           </div>
 499 |                           <div class="item-inner">
 500 |                             <div class="item-title-row">
 501 |                               <div class="item-title">Sketch to HTML</div>
 502 |                               <div class="item-after">5 sales</div>
 503 |                             </div>
 504 |                             <div class="item-text">Coding</div>
 505 |                           </div>
 506 |                         </li>
 507 |                         <li class="item-content">
 508 |                           <div class="item-media">
 509 |                             <img class="product-image" src="https://placeimg.com/112/112/5">
 510 |                           </div>
 511 |                           <div class="item-inner">
 512 |                             <div class="item-title-row">
 513 |                               <div class="item-title">Vecotor assets</div>
 514 |                               <div class="item-after">4 sales</div>
 515 |                             </div>
 516 |                             <div class="item-text">Design</div>
 517 |                           </div>
 518 |                         </li>
 519 |                         <li class="item-content">
 520 |                           <div class="item-media">
 521 |                             <img class="product-image" src="https://placeimg.com/112/112/6">
 522 |                           </div>
 523 |                           <div class="item-inner">
 524 |                             <div class="item-title-row">
 525 |                               <div class="item-title">50 Twitter Folowers Pack</div>
 526 |                               <div class="item-after">3 sales</div>
 527 |                             </div>
 528 |                             <div class="item-text">Social</div>
 529 |                           </div>
 530 |                         </li>
 531 |                         <li class="item-content">
 532 |                           <div class="item-media">
 533 |                             <img class="product-image" src="https://placeimg.com/112/112/6">
 534 |                           </div>
 535 |                           <div class="item-inner">
 536 |                             <div class="item-title-row">
 537 |                               <div class="item-title">100 Twitter Folowers Pack</div>
 538 |                               <div class="item-after">2 sales</div>
 539 |                             </div>
 540 |                             <div class="item-text">Social</div>
 541 |                           </div>
 542 |                         </li>
 543 |                       </ul>
 544 |                     </div>
 545 |                   </div>
 546 |                 </div>
 547 |               </div>
 548 |               <div class="col-100 medium-33 margin-top">
 549 |                 <div class="card">
 550 |                   <div class="card-header">New Users</div>
 551 |                   <div class="card-content card-content-padding scrollable">
 552 |                     <div class="list media-list">
 553 |                       <ul>
 554 |                         <li class="item-content">
 555 |                           <div class="item-media">
 556 |                             <img class="avatar" src="https://i.pravatar.cc/56?u=1">
 557 |                           </div>
 558 |                           <div class="item-inner">
 559 |                             <div class="item-title-row">
 560 |                               <div class="item-title">John Doe</div>
 561 |                             </div>
 562 |                             <div class="item-text">john@doe.com</div>
 563 |                           </div>
 564 |                         </li>
 565 |                         <li class="item-content">
 566 |                           <div class="item-media">
 567 |                             <img class="avatar" src="https://i.pravatar.cc/56?u=2">
 568 |                           </div>
 569 |                           <div class="item-inner">
 570 |                             <div class="item-title-row">
 571 |                               <div class="item-title">Jane Doe</div>
 572 |                             </div>
 573 |                             <div class="item-text">jane@doe.com</div>
 574 |                           </div>
 575 |                         </li>
 576 |                         <li class="item-content">
 577 |                           <div class="item-media">
 578 |                             <img class="avatar" src="https://i.pravatar.cc/56?u=3">
 579 |                           </div>
 580 |                           <div class="item-inner">
 581 |                             <div class="item-title-row">
 582 |                               <div class="item-title">Kate</div>
 583 |                             </div>
 584 |                             <div class="item-text">kate@athome.app</div>
 585 |                           </div>
 586 |                         </li>
 587 |                         <li class="item-content">
 588 |                           <div class="item-media">
 589 |                             <img class="avatar" src="https://i.pravatar.cc/56?u=4">
 590 |                           </div>
 591 |                           <div class="item-inner">
 592 |                             <div class="item-title-row">
 593 |                               <div class="item-title">Mary</div>
 594 |                             </div>
 595 |                             <div class="item-text">-</div>
 596 |                           </div>
 597 |                         </li>
 598 |                         <li class="item-content">
 599 |                           <div class="item-media">
 600 |                             <img class="avatar" src="https://i.pravatar.cc/56?u=5">
 601 |                           </div>
 602 |                           <div class="item-inner">
 603 |                             <div class="item-title-row">
 604 |                               <div class="item-title">Frame Work</div>
 605 |                             </div>
 606 |                             <div class="item-text">frame@work7.com</div>
 607 |                           </div>
 608 |                         </li>
 609 |                         <li class="item-content">
 610 |                           <div class="item-media">
 611 |                             <img class="avatar" src="https://i.pravatar.cc/56?u=1">
 612 |                           </div>
 613 |                           <div class="item-inner">
 614 |                             <div class="item-title-row">
 615 |                               <div class="item-title">John Doe</div>
 616 |                             </div>
 617 |                             <div class="item-text">john@doe.com</div>
 618 |                           </div>
 619 |                         </li>
 620 |                         <li class="item-content">
 621 |                           <div class="item-media">
 622 |                             <img class="avatar" src="https://i.pravatar.cc/56?u=2">
 623 |                           </div>
 624 |                           <div class="item-inner">
 625 |                             <div class="item-title-row">
 626 |                               <div class="item-title">Jane Doe</div>
 627 |                             </div>
 628 |                             <div class="item-text">jane@doe.com</div>
 629 |                           </div>
 630 |                         </li>
 631 |                         <li class="item-content">
 632 |                           <div class="item-media">
 633 |                             <img class="avatar" src="https://i.pravatar.cc/56?u=3">
 634 |                           </div>
 635 |                           <div class="item-inner">
 636 |                             <div class="item-title-row">
 637 |                               <div class="item-title">Kate</div>
 638 |                             </div>
 639 |                             <div class="item-text">kate@athome.app</div>
 640 |                           </div>
 641 |                         </li>
 642 |                         <li class="item-content">
 643 |                           <div class="item-media">
 644 |                             <img class="avatar" src="https://i.pravatar.cc/56?u=4">
 645 |                           </div>
 646 |                           <div class="item-inner">
 647 |                             <div class="item-title-row">
 648 |                               <div class="item-title">Mary</div>
 649 |                             </div>
 650 |                             <div class="item-text">-</div>
 651 |                           </div>
 652 |                         </li>
 653 |                         <li class="item-content">
 654 |                           <div class="item-media">
 655 |                             <img class="avatar" src="https://i.pravatar.cc/56?u=5">
 656 |                           </div>
 657 |                           <div class="item-inner">
 658 |                             <div class="item-title-row">
 659 |                               <div class="item-title">Frame Work</div>
 660 |                             </div>
 661 |                             <div class="item-text">frame@work7.com</div>
 662 |                           </div>
 663 |                         </li>
 664 |                       </ul>
 665 |                     </div>
 666 |                   </div>
 667 |                 </div>
 668 |               </div>
 669 |             </div>
 670 | 
 671 |             <div class="row margin-horizontal">
 672 |               <div class="col-100 margin-top">
 673 |                 <div class="card data-table">
 674 |                   <div class="card-header">Stats by Department</div>
 675 |                   <div class="card-content">
 676 |                     <table>
 677 |                       <thead>
 678 |                         <tr>
 679 |                           <th class="label-cell">Department</th>
 680 |                           <th class="numeric-cell">Clients</th>
 681 |                           <th class="numeric-cell">Sales</th>
 682 |                           <th class="numeric-cell">Profit</th>
 683 |                         </tr>
 684 |                       </thead>
 685 |                       <tbody>
 686 |                         <tr>
 687 |                           <td class="label-cell">New York</td>
 688 |                           <td class="numeric-cell">159</td>
 689 |                           <td class="numeric-cell">24</td>
 690 |                           <td class="numeric-cell">$4,890</td>
 691 |                         </tr>
 692 |                         <tr>
 693 |                           <td class="label-cell">London</td>
 694 |                           <td class="numeric-cell">237</td>
 695 |                           <td class="numeric-cell">37</td>
 696 |                           <td class="numeric-cell">$9,740</td>
 697 |                         </tr>
 698 |                         <tr>
 699 |                           <td class="label-cell">Beijing</td>
 700 |                           <td class="numeric-cell">262</td>
 701 |                           <td class="numeric-cell">24</td>
 702 |                           <td class="numeric-cell">$6,700</td>
 703 |                         </tr>
 704 |                         <tr>
 705 |                           <td class="label-cell">Tokyo</td>
 706 |                           <td class="numeric-cell">120</td>
 707 |                           <td class="numeric-cell">18</td>
 708 |                           <td class="numeric-cell">$3,200</td>
 709 |                         </tr>
 710 |                       </tbody>
 711 |                     </table>
 712 |                     <div class="data-table-footer">
 713 |                       <div class="data-table-rows-select">
 714 |                         Rows per page:
 715 |                         <div class="input input-dropdown input-with-value">
 716 |                           <select class="input-with-value">
 717 |                             <option value="5">5</option>
 718 |                             <option value="10">10</option>
 719 |                             <option value="25">25</option>
 720 |                             <option value="all">All</option>
 721 |                           </select>
 722 |                         </div>
 723 |                       </div>
 724 |                       <div class="data-table-pagination">
 725 |                         <span class="data-table-pagination-label">1-5 of 10</span>
 726 |                         <a href="#" class="link disabled">
 727 |                           <i class="icon icon-prev color-gray"></i>
 728 |                         </a>
 729 |                         <a href="#" class="link">
 730 |                           <i class="icon icon-next color-gray"></i>
 731 |                         </a>
 732 |                       </div>
 733 |                     </div>
 734 |                   </div>
 735 | 
 736 |                 </div>
 737 |               </div>
 738 |             </div>
 739 | 
 740 |             <div class="row margin-horizontal margin-bottom">
 741 |               <div class="col-100 medium-33 margin-top">
 742 |                 <div class="card">
 743 |                   <div class="card-header">Notifications</div>
 744 |                   <div class="card-content card-content-padding scrollable">
 745 |                     <div class="list media-list">
 746 |                       <ul>
 747 |                         <li class="item-content">
 748 |                           <div class="item-media">
 749 |                             <i class="icon f7-icons text-color-yellow">exclamationmark_triangle_fill</i>
 750 |                           </div>
 751 |                           <div class="item-inner">
 752 |                             <div class="item-title-row">
 753 |                               <div class="item-title">Server access error</div>
 754 |                               <div class="item-after">15:45</div>
 755 |                             </div>
 756 |                             <div class="item-text">Lorem ipsum dolor sit amet, consectetuer edipiscing elit</div>
 757 |                           </div>
 758 |                         </li>
 759 |                         <li class="item-content">
 760 |                           <div class="item-media">
 761 |                             <i class="icon f7-icons text-color-green">cart_fill</i>
 762 |                           </div>
 763 |                           <div class="item-inner">
 764 |                             <div class="item-title-row">
 765 |                               <div class="item-title">New order received</div>
 766 |                               <div class="item-after">13:20</div>
 767 |                             </div>
 768 |                             <div class="item-text">Lorem ipsum dolor sit amet, consectetuer edipiscing elit</div>
 769 |                           </div>
 770 |                         </li>
 771 |                         <li class="item-content">
 772 |                           <div class="item-media">
 773 |                             <i class="icon f7-icons text-color-green">cart_fill</i>
 774 |                           </div>
 775 |                           <div class="item-inner">
 776 |                             <div class="item-title-row">
 777 |                               <div class="item-title">New order received</div>
 778 |                               <div class="item-after">11:11</div>
 779 |                             </div>
 780 |                             <div class="item-text">Lorem ipsum dolor sit amet, consectetuer edipiscing elit</div>
 781 |                           </div>
 782 |                         </li>
 783 |                         <li class="item-content">
 784 |                           <div class="item-media">
 785 |                             <i class="icon f7-icons text-color-blue">person_circle_fill</i>
 786 |                           </div>
 787 |                           <div class="item-inner">
 788 |                             <div class="item-title-row">
 789 |                               <div class="item-title">New user registered</div>
 790 |                               <div class="item-after">10:16</div>
 791 |                             </div>
 792 |                             <div class="item-text">Lorem ipsum dolor sit amet, consectetuer edipiscing elit</div>
 793 |                           </div>
 794 |                         </li>
 795 |                         <li class="item-content">
 796 |                           <div class="item-media">
 797 |                             <i class="icon f7-icons text-color-teal">document_text_fill</i>
 798 |                           </div>
 799 |                           <div class="item-inner">
 800 |                             <div class="item-title-row">
 801 |                               <div class="item-title">New report uploaded</div>
 802 |                               <div class="item-after">02:00</div>
 803 |                             </div>
 804 |                             <div class="item-text">Lorem ipsum dolor sit amet, consectetuer edipiscing elit</div>
 805 |                           </div>
 806 |                         </li>
 807 |                         <li class="item-content">
 808 |                           <div class="item-media">
 809 |                             <i class="icon f7-icons text-color-blue">person_circle_fill</i>
 810 |                           </div>
 811 |                           <div class="item-inner">
 812 |                             <div class="item-title-row">
 813 |                               <div class="item-title">New user registered</div>
 814 |                               <div class="item-after">Yesterday at 22:56</div>
 815 |                             </div>
 816 |                             <div class="item-text">Lorem ipsum dolor sit amet, consectetuer edipiscing elit</div>
 817 |                           </div>
 818 |                         </li>
 819 |                         <li class="item-content">
 820 |                           <div class="item-media">
 821 |                             <i class="icon f7-icons text-color-blue">person_circle_fill</i>
 822 |                           </div>
 823 |                           <div class="item-inner">
 824 |                             <div class="item-title-row">
 825 |                               <div class="item-title">New user registered</div>
 826 |                               <div class="item-after">Yesterday at 20:10</div>
 827 |                             </div>
 828 |                             <div class="item-text">Lorem ipsum dolor sit amet, consectetuer edipiscing elit</div>
 829 |                           </div>
 830 |                         </li>
 831 |                       </ul>
 832 |                     </div>
 833 |                   </div>
 834 |                 </div>
 835 |               </div>
 836 |               <div class="col-100 medium-33 margin-top">
 837 |                 <div class="card">
 838 |                   <div class="card-header">Tasks</div>
 839 |                   <div class="card-content card-content-padding scrollable">
 840 |                     <div class="list tasks-list">
 841 |                       <ul>
 842 |                         <li>
 843 |                           <label class="item-checkbox item-content">
 844 |                             <div class="item-media">
 845 |                               <span class="category-icon color-blue"></span>
 846 |                             </div>
 847 |                             <input type="checkbox"/>
 848 |                             <i class="icon icon-checkbox"></i>
 849 |                             <div class="item-inner">
 850 |                               <div class="item-title">Prepare docs for meeting</div>
 851 |                             </div>
 852 |                           </label>
 853 |                         </li>
 854 |                         <li>
 855 |                           <label class="item-checkbox item-content">
 856 |                             <div class="item-media">
 857 |                               <span class="category-icon color-blue"></span>
 858 |                             </div>
 859 |                             <input type="checkbox"/>
 860 |                             <i class="icon icon-checkbox"></i>
 861 |                             <div class="item-inner">
 862 |                               <div class="item-title">Add new HS spectrum module to Color Picker</div>
 863 |                             </div>
 864 |                           </label>
 865 |                         </li>
 866 |                         <li>
 867 |                           <label class="item-checkbox item-content">
 868 |                             <div class="item-media">
 869 |                               <span class="category-icon color-orange"></span>
 870 |                             </div>
 871 |                             <input type="checkbox"/>
 872 |                             <i class="icon icon-checkbox"></i>
 873 |                             <div class="item-inner">
 874 |                               <div class="item-title">Add year/month selector to Calendar component</div>
 875 |                             </div>
 876 |                           </label>
 877 |                         </li>
 878 |                         <li>
 879 |                           <label class="item-checkbox item-content">
 880 |                             <div class="item-media">
 881 |                               <span class="category-icon color-green"></span>
 882 |                             </div>
 883 |                             <input type="checkbox"/>
 884 |                             <i class="icon icon-checkbox"></i>
 885 |                             <div class="item-inner">
 886 |                               <div class="item-title">Add new experimental set</div>
 887 |                             </div>
 888 |                           </label>
 889 |                         </li>
 890 |                         <li>
 891 |                           <label class="item-checkbox item-content">
 892 |                             <div class="item-media">
 893 |                               <span class="category-icon color-pink"></span>
 894 |                             </div>
 895 |                             <input type="checkbox"/>
 896 |                             <i class="icon icon-checkbox"></i>
 897 |                             <div class="item-inner">
 898 |                               <div class="item-title">Add learning mode to instruments set</div>
 899 |                             </div>
 900 |                           </label>
 901 |                         </li>
 902 |                         <li>
 903 |                           <label class="item-checkbox item-content">
 904 |                             <div class="item-media">
 905 |                               <span class="category-icon color-blue"></span>
 906 |                             </div>
 907 |                             <input type="checkbox"/>
 908 |                             <i class="icon icon-checkbox"></i>
 909 |                             <div class="item-inner">
 910 |                               <div class="item-title">Prepare docs for meeting</div>
 911 |                             </div>
 912 |                           </label>
 913 |                         </li>
 914 |                         <li>
 915 |                           <label class="item-checkbox item-content">
 916 |                             <div class="item-media">
 917 |                               <span class="category-icon color-blue"></span>
 918 |                             </div>
 919 |                             <input type="checkbox"/>
 920 |                             <i class="icon icon-checkbox"></i>
 921 |                             <div class="item-inner">
 922 |                               <div class="item-title">Add new HS spectrum module to Color Picker</div>
 923 |                             </div>
 924 |                           </label>
 925 |                         </li>
 926 |                         <li>
 927 |                           <label class="item-checkbox item-content">
 928 |                             <div class="item-media">
 929 |                               <span class="category-icon color-orange"></span>
 930 |                             </div>
 931 |                             <input type="checkbox"/>
 932 |                             <i class="icon icon-checkbox"></i>
 933 |                             <div class="item-inner">
 934 |                               <div class="item-title">Add year/month selector to Calendar component</div>
 935 |                             </div>
 936 |                           </label>
 937 |                         </li>
 938 |                         <li>
 939 |                           <label class="item-checkbox item-content">
 940 |                             <div class="item-media">
 941 |                               <span class="category-icon color-green"></span>
 942 |                             </div>
 943 |                             <input type="checkbox"/>
 944 |                             <i class="icon icon-checkbox"></i>
 945 |                             <div class="item-inner">
 946 |                               <div class="item-title">Add new experimental set</div>
 947 |                             </div>
 948 |                           </label>
 949 |                         </li>
 950 |                         <li>
 951 |                           <label class="item-checkbox item-content">
 952 |                             <div class="item-media">
 953 |                               <span class="category-icon color-pink"></span>
 954 |                             </div>
 955 |                             <input type="checkbox"/>
 956 |                             <i class="icon icon-checkbox"></i>
 957 |                             <div class="item-inner">
 958 |                               <div class="item-title">Add learning mode to instruments set</div>
 959 |                             </div>
 960 |                           </label>
 961 |                         </li>
 962 |                       </ul>
 963 |                     </div>
 964 |                   </div>
 965 |                 </div>
 966 |               </div>
 967 |               <div class="col-100 medium-33 margin-top">
 968 |                 <div class="card">
 969 |                   <div class="card-header">Support Tickets</div>
 970 |                   <div class="card-content card-content-padding scrollable">
 971 |                     <div class="list media-list" style="--f7-list-item-text-max-lines: 5">
 972 |                       <ul>
 973 |                         <li class="item-content">
 974 |                           <div class="item-media">
 975 |                             <img class="avatar" src="https://i.pravatar.cc/56?u=1">
 976 |                           </div>
 977 |                           <div class="item-inner">
 978 |                             <div class="item-title-row">
 979 |                               <div class="item-title">John Doe</div>
 980 |                               <div class="item-after"><span class="badge color-blue">Pending</span></div>
 981 |                             </div>
 982 |                             <div class="item-subtitle">1 hour ago</div>
 983 |                             <div class="item-text">Lorem ipsum dolor sit amet,consectetuer edipiscing elit,sed diam nonummy nibh euismod tinciduntut laoreet doloremagna aliquam erat volutpat.</div>
 984 |                           </div>
 985 |                         </li>
 986 |                         <li class="item-content">
 987 |                           <div class="item-media">
 988 |                             <img class="avatar" src="https://i.pravatar.cc/56?u=2">
 989 |                           </div>
 990 |                           <div class="item-inner">
 991 |                             <div class="item-title-row">
 992 |                               <div class="item-title">Jane Doe</div>
 993 |                               <div class="item-after"><span class="badge color-green">Closed</span></div>
 994 |                             </div>
 995 |                             <div class="item-subtitle">6 hours ago</div>
 996 |                             <div class="item-text">Sed diam nonummy nibh euismod tinciduntut laoreet doloremagna aliquam erat volutpat.Ut wisi enim ad minim veniam,quis nostrud exerci tation ullamcorper.</div>
 997 |                           </div>
 998 |                         </li>
 999 |                         <li class="item-content">
1000 |                           <div class="item-media">
1001 |                             <img class="avatar" src="https://i.pravatar.cc/56?u=3">
1002 |                           </div>
1003 |                           <div class="item-inner">
1004 |                             <div class="item-title-row">
1005 |                               <div class="item-title">Kate</div>
1006 |                               <div class="item-after"><span class="badge color-green">Closed</span></div>
1007 |                             </div>
1008 |                             <div class="item-subtitle">1 day ago</div>
1009 |                             <div class="item-text">Lorem ipsum dolor sit amet,consectetuer edipiscing elit,sed diam nonummy nibh euismod tinciduntut laoreet doloremagna aliquam erat volutpat.</div>
1010 |                           </div>
1011 |                         </li>
1012 |                         <li class="item-content">
1013 |                           <div class="item-media">
1014 |                             <img class="avatar" src="https://i.pravatar.cc/56?u=4">
1015 |                           </div>
1016 |                           <div class="item-inner">
1017 |                             <div class="item-title-row">
1018 |                               <div class="item-title">Mary</div>
1019 |                               <div class="item-after"><span class="badge color-orange">Issue</span></div>
1020 |                             </div>
1021 |                             <div class="item-subtitle">3 days ago</div>
1022 |                             <div class="item-text">Sed diam nonummy nibh euismod tinciduntut laoreet doloremagna aliquam erat volutpat.Ut wisi enim ad minim veniam,quis nostrud exerci tation ullamcorper.</div>
1023 |                           </div>
1024 |                         </li>
1025 |                         <li class="item-content">
1026 |                           <div class="item-media">
1027 |                             <img class="avatar" src="https://i.pravatar.cc/56?u=5">
1028 |                           </div>
1029 |                           <div class="item-inner">
1030 |                             <div class="item-title-row">
1031 |                               <div class="item-title">Frame Work</div>
1032 |                               <div class="item-after"><span class="badge color-blue">Pending</span></div>
1033 |                             </div>
1034 |                             <div class="item-subtitle">5 days ago</div>
1035 |                             <div class="item-text">Lorem ipsum dolor sit amet,consectetuer edipiscing elit,sed diam nonummy nibh euismod tinciduntut laoreet doloremagna aliquam erat volutpat.</div>
1036 |                           </div>
1037 |                         </li>
1038 |                       </ul>
1039 |                     </div>
1040 |                   </div>
1041 |                 </div>
1042 |               </div>
1043 |             </div>
1044 | 
1045 |           </div>
1046 | 
1047 |         </div>
1048 |       </div>
1049 |     </div>
1050 |   </div>
1051 |   <script src="https://unpkg.com/framework7/framework7-bundle.min.js"></script>
1052 |   <script src="https://unpkg.com/chart.js"></script>
1053 |   <script>
1054 |     var $ = Dom7;
1055 | 
1056 |     var app = new Framework7({
1057 |       el: '#app',
1058 |       theme: 'aurora',
1059 |     });
1060 | 
1061 |     // Sales chart
1062 |     var ctx = document.getElementById('sales-chart').getContext('2d');
1063 |     window.myLine = new Chart(ctx, {
1064 | 			type: 'line',
1065 | 			data: {
1066 | 				labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
1067 | 				datasets: [{
1068 | 					label: '',
1069 | 					backgroundColor: 'rgb(255, 99, 132)',
1070 | 					borderColor: 'rgb(255, 99, 132)',
1071 | 					fill: true,
1072 | 					data: [ 2000, 1000, 5000, 6000, 5500, 8000, 7700 ],
1073 | 				}]
1074 | 			},
1075 | 			options: {
1076 |         legend: {
1077 |           display: false,
1078 |         },
1079 | 				responsive: true,
1080 | 				tooltips: {
1081 | 					mode: 'index',
1082 | 					intersect: false,
1083 | 				},
1084 | 				hover: {
1085 | 					mode: 'nearest',
1086 | 					intersect: true
1087 | 				},
1088 |       }
1089 |     });
1090 | 
1091 |     // Fix col sizes
1092 |     function fixCols() {
1093 |       setTimeout(function() {
1094 |         $('.events-col').css('height', $('.charts-col').height() + 'px');
1095 |       });
1096 |     }
1097 |     fixCols();
1098 |     $(window).on('resize', fixCols);
1099 | 
1100 |   </script>
1101 | </body>
1102 | </html>
1103 | 


--------------------------------------------------------------------------------
/gmail-mobile/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | 
  4 | <head>
  5 |   <meta charset="UTF-8">
  6 |   <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, viewport-fit=cover">
  7 |   <meta name="apple-mobile-web-app-capable" content="yes">
  8 |   <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
  9 |   <meta name="theme-color" content="#2196f3">
 10 |   <meta http-equiv="Content-Security-Policy" content="default-src * 'self' 'unsafe-inline' 'unsafe-eval' data:">
 11 | 
 12 |   <title>GMail</title>
 13 | 
 14 |   <link rel="stylesheet" href="https://unpkg.com/framework7/framework7-bundle.min.css">
 15 |   <link rel="stylesheet" href="https://unpkg.com/framework7-icons">
 16 |   <style>
 17 |     :root {
 18 |       --f7-bars-shadow-bottom-image: none;
 19 |       --f7-searchbar-input-padding-horizontal: 24px;
 20 |       --f7-navbar-margin: 12px;
 21 |     }
 22 | 
 23 |     .avatar {
 24 |       width: 28px;
 25 |       height: 28px;
 26 |       border-radius: 50%;
 27 |     }
 28 | 
 29 |     .navbar {
 30 |       margin: 24px var(--f7-navbar-margin);
 31 |       width: calc(100% - 2 * var(--f7-navbar-margin));
 32 |       border-radius: 12px;
 33 |       overflow: hidden;
 34 |       --f7-navbar-bg-color: #fff;
 35 |     }
 36 | 
 37 |     .dark .navbar {
 38 |       --f7-navbar-bg-color: #000;
 39 |     }
 40 | 
 41 |     .navbar .title {
 42 |       width: 100%;
 43 |       margin: 0;
 44 |     }
 45 | 
 46 |     .page-content {
 47 |       padding-top: 112px;
 48 |     }
 49 |     
 50 |     /* Limit resizable panel width */
 51 |     .panel {
 52 |       width: 75vw;
 53 |     }
 54 | 
 55 |     /* Demo Color Themes */
 56 |     .demo-theme-picker {
 57 |       cursor: pointer;
 58 |       padding: 30px;
 59 |       border-radius: 10px;
 60 |       box-shadow: 0px 5px 20px rgba(0,0,0,0.1);
 61 |       border: 1px solid rgba(255,255,255,0.2);
 62 |       box-sizing: border-box;
 63 |       position: relative;
 64 |     }
 65 |     .demo-theme-picker .checkbox {
 66 |       position: absolute;
 67 |       left: 10px;
 68 |       bottom: 10px;
 69 |     }
 70 |   </style>
 71 | </head>
 72 | 
 73 | <body>
 74 |   <div id="app">
 75 | 
 76 |     <div class="panel panel-left panel-cover">
 77 |       <div class="page page-accounts">
 78 |         <div class="page-content">
 79 |           <div class="block-title">my@email.com</div>
 80 |           <div class="list no-chevron">
 81 |             <ul>
 82 |               <li>
 83 |                 <a href="#" class="item-content item-link">
 84 |                   <div class="item-media">
 85 |                     <i class="icon f7-icons">tray_fill</i>
 86 |                   </div>
 87 |                   <div class="item-inner">
 88 |                     <div class="item-title">Inbox</div>
 89 |                     <div class="item-after">
 90 |                       <div class="badge">4</div>
 91 |                     </div>
 92 |                   </div>
 93 |                 </a>
 94 |               </li>
 95 |               <li>
 96 |                 <a href="#" class="item-content item-link">
 97 |                   <div class="item-media">
 98 |                     <i class="icon f7-icons">flag_fill</i>
 99 |                   </div>
100 |                   <div class="item-inner">
101 |                     <div class="item-title">Flagged</div>
102 |                   </div>
103 |                 </a>
104 |               </li>
105 |               <li>
106 |                 <a href="#" class="item-content item-link">
107 |                   <div class="item-media">
108 |                     <i class="icon f7-icons">doc_fill</i>
109 |                   </div>
110 |                   <div class="item-inner">
111 |                     <div class="item-title">Drafts</div>
112 |                     <div class="item-after">
113 |                       <div class="badge">1</div>
114 |                     </div>
115 |                   </div>
116 |                 </a>
117 |               </li>
118 |               <li>
119 |                 <a href="#" class="item-content item-link">
120 |                   <div class="item-media">
121 |                     <i class="icon f7-icons">paperplane_fill</i>
122 |                   </div>
123 |                   <div class="item-inner">
124 |                     <div class="item-title">Sent</div>
125 |                   </div>
126 |                 </a>
127 |               </li>
128 |               <li>
129 |                 <a href="#" class="item-content item-link">
130 |                   <div class="item-media">
131 |                     <i class="icon f7-icons">exclamationmark_triangle_fill</i>
132 |                   </div>
133 |                   <div class="item-inner">
134 |                     <div class="item-title">Spam</div>
135 |                   </div>
136 |                 </a>
137 |               </li>
138 |               <li>
139 |                 <a href="#" class="item-content item-link">
140 |                   <div class="item-media">
141 |                     <i class="icon f7-icons">trash_fill</i>
142 |                   </div>
143 |                   <div class="item-inner">
144 |                     <div class="item-title">Trash</div>
145 |                   </div>
146 |                 </a>
147 |               </li>
148 |               <li>
149 |                 <a href="#" class="item-content item-link">
150 |                   <div class="item-media">
151 |                     <i class="icon f7-icons">archivebox_fill</i>
152 |                   </div>
153 |                   <div class="item-inner">
154 |                     <div class="item-title">Archive</div>
155 |                   </div>
156 |                 </a>
157 |               </li>
158 |             </ul>
159 |           </div>
160 |         </div>
161 |       </div>
162 |     </div>
163 | 
164 |     <div class="view view-main view-init">
165 |       <div class="page page-email-list">
166 |         <div class="navbar elevation-6">
167 |           <div class="navbar-bg"></div>
168 |           <div class="navbar-inner">
169 |             <div class="left">
170 |               <a class="link panel-open icon-only" data-panel="left">
171 |                 <i class="icon f7-icons">bars</i>
172 |               </a>
173 |             </div>
174 |             <div class="title">
175 |               <!-- Searchbar with auto init -->
176 |               <form class="searchbar">
177 |                 <div class="searchbar-inner">
178 |                   <div class="searchbar-input-wrap">
179 |                     <input type="search" placeholder="Search">
180 |                     <i class="searchbar-icon"></i>
181 |                     <span class="input-clear-button"></span>
182 |                   </div>
183 |                   <span class="searchbar-disable-button if-not-aurora">Cancel</span>
184 |                 </div>
185 |               </form>
186 |             </div>
187 |             <div class="right">
188 |               <a class="link popover-open" href="#" data-popover=".profile-popover">
189 |                 <img src="https://i.pravatar.cc/56?u=9" class="avatar">
190 |               </a>
191 |             </div>
192 |           </div>
193 |         </div>
194 |         <div class="page-content">
195 |           <!-- Searchbar backdrop -->
196 |           <div class="searchbar-backdrop"></div>
197 |           <!-- hide-on-search element -->
198 |           <div class="block block-title searchbar-hide-on-search">
199 |             <p>INBOX</p>
200 |           </div>
201 |           <!-- search target list -->
202 |           <div class="list list-email media-list">
203 |             <ul>
204 |               <li>
205 |                 <label class="item-checkbox item-content">
206 |                   <input type="checkbox" name="demo-media-checkbox" value="1">
207 |                   <i class="icon icon-checkbox"></i>
208 |                   <div class="item-inner">
209 |                     <div class="item-title-row">
210 |                       <div class="item-title">Facebook</div>
211 |                       <div class="item-after">17:14</div>
212 |                     </div>
213 |                     <div class="item-subtitle">New messages from John Doe</div>
214 |                     <div class="item-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sagittis tellus ut turpis condimentum, ut dignissim lacus tincidunt. Cras dolor metus, ultrices condimentum sodales sit amet, pharetra sodales eros. Phasellus vel felis tellus. Mauris rutrum ligula nec dapibus feugiat. In vel dui laoreet, commodo augue id, pulvinar lacus.</div>
215 |                   </div>
216 |                 </label>
217 |               </li>
218 |               <li>
219 |                 <label class="item-checkbox item-content">
220 |                   <input type="checkbox" name="demo-media-checkbox" value="2">
221 |                   <i class="icon icon-checkbox"></i>
222 |                   <div class="item-inner">
223 |                     <div class="item-title-row">
224 |                       <div class="item-title">John Doe (via Twitter)</div>
225 |                       <div class="item-after">17:11</div>
226 |                     </div>
227 |                     <div class="item-subtitle">John Doe (@_johndoe) mentioned you on Twitter!</div>
228 |                     <div class="item-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sagittis tellus ut turpis condimentum, ut dignissim lacus tincidunt. Cras dolor metus, ultrices condimentum sodales sit amet, pharetra sodales eros. Phasellus vel felis tellus. Mauris rutrum ligula nec dapibus feugiat. In vel dui laoreet, commodo augue id, pulvinar lacus.</div>
229 |                   </div>
230 |                 </label>
231 |               </li>
232 |               <li>
233 |                 <label class="item-checkbox item-content">
234 |                   <input type="checkbox" name="demo-media-checkbox" value="3">
235 |                   <i class="icon icon-checkbox"></i>
236 |                   <div class="item-inner">
237 |                     <div class="item-title-row">
238 |                       <div class="item-title">Facebook</div>
239 |                       <div class="item-after">16:48</div>
240 |                     </div>
241 |                     <div class="item-subtitle">New messages from John Doe</div>
242 |                     <div class="item-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sagittis tellus ut turpis condimentum, ut dignissim lacus tincidunt. Cras dolor metus, ultrices condimentum sodales sit amet, pharetra sodales eros. Phasellus vel felis tellus. Mauris rutrum ligula nec dapibus feugiat. In vel dui laoreet, commodo augue id, pulvinar lacus.</div>
243 |                   </div>
244 |                 </label>
245 |               </li>
246 |               <li>
247 |                 <label class="item-checkbox item-content">
248 |                   <input type="checkbox" name="demo-media-checkbox" value="4">
249 |                   <i class="icon icon-checkbox"></i>
250 |                   <div class="item-inner">
251 |                     <div class="item-title-row">
252 |                       <div class="item-title">John Doe (via Twitter)</div>
253 |                       <div class="item-after">15:32</div>
254 |                     </div>
255 |                     <div class="item-subtitle">John Doe (@_johndoe) mentioned you on Twitter!</div>
256 |                     <div class="item-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sagittis tellus ut turpis condimentum, ut dignissim lacus tincidunt. Cras dolor metus, ultrices condimentum sodales sit amet, pharetra sodales eros. Phasellus vel felis tellus. Mauris rutrum ligula nec dapibus feugiat. In vel dui laoreet, commodo augue id, pulvinar lacus.</div>
257 |                   </div>
258 |                 </label>
259 |               </li>
260 |             </ul>
261 |           </div>
262 |           <!-- Nothing found message -->
263 |           <div class="block searchbar-not-found">
264 |             <div class="block-inner">Nothing found</div>
265 |           </div>
266 |         </div>
267 |       </div>
268 |     </div>
269 |   </div>
270 | 
271 |   <!-- Popovers -->
272 |   <div class="popover profile-popover">
273 |     <div class="popover-inner">
274 |       <h3 class="text-align-center">John Doe</h3>
275 |       <div class="list no-hairlines no-hairlines-between">
276 |         <ul>
277 |           <li>
278 |             <a href="#" class="item-link item-content">
279 |               <div class="item-media">
280 |                 <i class="icon f7-icons">person_circle_fill</i>
281 |               </div>
282 |               <div class="item-inner">
283 |                 <div class="item-title">Profile</div>
284 |               </div>
285 |             </a>
286 |           </li>
287 |           <li>
288 |             <a href="#" class="item-link item-content">
289 |               <div class="item-media">
290 |                 <i class="icon f7-icons">gear_fill</i>
291 |               </div>
292 |               <div class="item-inner">
293 |                 <div class="item-title">User Settings</div>
294 |               </div>
295 |             </a>
296 |           </li>
297 |         </ul>
298 |       </div>
299 |       <div class="list no-hairlines no-hairlines-between margin-bottom">
300 |         <ul>
301 |           <li>
302 |             <a href="#" class="item-link item-content">
303 |               <div class="item-media">
304 |                 <i class="icon f7-icons">square_arrow_right_fill</i>
305 |               </div>
306 |               <div class="item-inner">
307 |                 <div class="item-title">Logout</div>
308 |               </div>
309 |             </a>
310 |           </li>
311 |         </ul>
312 |       </div>
313 |       <div class="block block-strong">
314 |         <p>Framework7 comes with 2 main layout themes: Light (default) and Dark:</p>
315 |         <div class="row">
316 |           <div class="col-50 bg-color-white demo-theme-picker" onclick="setLayoutTheme('light')">
317 |             <label class="checkbox">
318 |               <input id="light" type="checkbox">
319 |               <i class="icon-checkbox"></i>
320 |             </label>
321 |           </div>
322 |           <div class="col-50 bg-color-black demo-theme-picker" onclick="setLayoutTheme('dark')">
323 |             <label class="checkbox">
324 |               <input id="dark" type="checkbox">
325 |               <i class="icon-checkbox"></i>
326 |             </label>
327 |           </div>
328 |         </div>
329 |       </div>
330 | 
331 |     </div>
332 |   </div>
333 | 
334 |   <script src="https://unpkg.com/framework7/framework7-bundle.min.js"></script>
335 | 
336 |   <script>
337 |     var $ = Dom7;
338 |     var globalTheme = 'light';
339 |     let theme = globalTheme;
340 | 
341 |     const app = new Framework7({
342 |       el: '#app',
343 |       theme: 'md',
344 |       routes: [
345 |         {
346 |           path: '/',
347 |           componentUrl: './index.html',
348 |         }
349 |       ]
350 |     })
351 |     
352 |     const setLayoutTheme = (newTheme) => {
353 |       var $html = $('html');
354 |       globalTheme = newTheme;
355 |       $html.removeClass('dark light').addClass(globalTheme);
356 |       theme = globalTheme;
357 |       checkTheme();
358 |     }
359 |     
360 |     const checkTheme = () => {
361 |       if (theme === 'light') {
362 |         document.getElementById("light").checked = true;
363 |         document.getElementById("dark").checked = false;
364 |       } else {
365 |         document.getElementById("light").checked = false;
366 |         document.getElementById("dark").checked = true;
367 |       }
368 |     }
369 | 
370 |     // create searchbar
371 |     const searchbar = app.searchbar.create({
372 |       el: '.searchbar',
373 |       searchContainer: '.list-email',
374 |       searchIn: '.item-title',
375 |       on: {
376 |         search(sb, query, previousQuery) {
377 |           console.log(query, previousQuery);
378 |         }
379 |       }
380 |     });
381 | 
382 |     checkTheme();
383 |   </script>
384 | </body></html>
385 | 


--------------------------------------------------------------------------------
/google-chrome-desktop/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | <head>
  4 |   <meta charset="UTF-8">
  5 |   <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, viewport-fit=cover">
  6 |   <meta name="apple-mobile-web-app-capable" content="yes">
  7 |   <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
  8 |   <meta name="theme-color" content="#2196f3">
  9 |   <meta http-equiv="Content-Security-Policy" content="default-src * 'self' 'unsafe-inline' 'unsafe-eval' data:">
 10 |   <title>Chrome</title>
 11 |   <link rel="stylesheet" href="https://unpkg.com/framework7/framework7-bundle.min.css">
 12 |   <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
 13 |   <style>
 14 |     :root {
 15 |       --f7-list-item-border-color: transparent;
 16 |       --f7-input-focused-border-color: transparent;
 17 |     }
 18 |     .appbar {
 19 |       --f7-appbar-height: 42px;
 20 |       --f7-appbar-link-color: #333;
 21 |       --f7-toolbar-font-size: 14px;
 22 |       --f7-toolbar-bg-color: #e3e3e3;
 23 |       --f7-tabbar-link-active-bg-color: #fff;
 24 |       --f7-tabbar-link-inactive-bg-color: transparent;
 25 |       --f7-toolbar-height: var(--f7-appbar-height);
 26 |       --f7-tabbar-link-active-color: #333;
 27 |       --f7-tabbar-link-active-border-color: transparent;
 28 |     }
 29 |     .appbar a.tab-link {
 30 |       width: 240px;
 31 |       display: flex;
 32 |       align-items: center;
 33 |       flex-direction: row;
 34 |       justify-content: flex-start;
 35 |       cursor: default;
 36 |       height: calc(100% - 5px);
 37 |       align-self: flex-end;
 38 |       border-radius: 8px 8px 0 0;
 39 |       user-select: none;
 40 |     }
 41 |     .appbar a.tab-link:not(.tab-link-active):hover {
 42 |       background-color: rgba(255,255,255,0.5);
 43 |     }
 44 |     .appbar a.tab-link:first-child {
 45 |       margin-left: 5px;
 46 |     }
 47 |     .appbar .close-tab {
 48 |       margin-left: auto;
 49 |       display: flex;
 50 |       width: 16px;
 51 |       height: 16px;
 52 |       border-radius: 50%;
 53 |       align-items: center;
 54 |       justify-content: center;
 55 |       cursor: default;
 56 |     }
 57 |     .appbar .close-tab:hover {
 58 |       background: rgba(0,0,0,0.05);
 59 |     }
 60 |     .appbar .close-tab i {
 61 |       font-size: 14px;
 62 |     }
 63 |     .appbar .label {
 64 |       flex-shrink: 10;
 65 |       min-width: 0;
 66 |       margin-right: 5px;
 67 |       overflow: hidden;
 68 |       position: relative;
 69 |       text-overflow: ellipsis;
 70 |     }
 71 |     .appbar .favicon {
 72 |       max-width: 16px;
 73 |       max-height: 16px;
 74 |       margin-right: 10px;
 75 |     }
 76 |     .addressbar {
 77 |       --f7-toolbar-bg-color: #fff;
 78 |       --f7-toolbar-link-color: #666;
 79 |       --f7-toolbar-inner-padding-left: 5px;
 80 |       --f7-toolbar-inner-padding-right: 5px;
 81 |       --f7-toolbar-link-height: 28px;
 82 |     }
 83 |     .addressbar .link {
 84 |       flex-shrink: 0;
 85 |       width: 28px;
 86 |       border-radius: 14px;
 87 | 
 88 |     }
 89 |     .addressbar .link + .link {
 90 |       margin-left: 5px;
 91 |     }
 92 |     .addressbar .link:hover {
 93 |       background: rgba(0,0,0,0.05);
 94 |     }
 95 |     .addressbar-content {
 96 |       justify-content: flex-start;
 97 |     }
 98 | 
 99 |     .addressbar .input {
100 |       width: 100%;
101 |       flex-shrink: 10;
102 |       min-width: 0;
103 |       display: flex;
104 |       align-items: center;
105 |       background: #eee;
106 |       border-radius: 14px;
107 |       margin-left: 5px;
108 |       margin-right: 5px;
109 |       overflow: hidden;
110 |       box-sizing: border-box;
111 |       padding: 0 2px;
112 |     }
113 |     .addressbar .input .link {
114 |       height: 24px;
115 |     }
116 |     .addressbar .input input {
117 |       height: 28px;
118 |       width: 100%;
119 |       flex-shrink: 10;
120 |       min-width: 0;
121 |     }
122 |     iframe {
123 |       width: 100%;
124 |       height: 100%;
125 |     }
126 |   </style>
127 | </head>
128 | <body>
129 |   <div id="app">
130 |     <div class="appbar">
131 |       <div class="toolbar tabbar tabbar-scrollable">
132 |         <div class="toolbar-inner">
133 |           <a href="#tab-1" class="tab-link tab-link-active">
134 |             <img src="https://framework7.io/i/favicon.png" class="favicon">
135 |             <span class="label">Framework7</span>
136 |             <span class="close-tab">
137 |               <i class="material-icons">close</i>
138 |             </span>
139 |           </a>
140 |           <a href="#tab-2" class="tab-link">
141 |             <img src="https://framework7.io/i/favicon.png" class="favicon">
142 |             <span class="label">Ready To Use Framework7 Templates & Tools</span>
143 |             <span class="close-tab">
144 |               <i class="material-icons">close</i>
145 |             </span>
146 |           </a>
147 |           <a href="#tab-3" class="tab-link">
148 |             <img src="https://framework7.io/i/favicon.png" class="favicon">
149 |             <span class="label">Jobs | Framework7 Jobs</span>
150 |             <span class="close-tab">
151 |               <i class="material-icons">close</i>
152 |             </span>
153 |           </a>
154 |         </div>
155 |       </div>
156 |     </div>
157 |     <div class="views tabs">
158 |       <div class="view tab tab-active" id="tab-1">
159 |         <div class="page">
160 |           <div class="addressbar toolbar toolbar-top">
161 |             <div class="toolbar-inner addressbar-content">
162 |               <a href="#" class="link">
163 |                 <i class="icon material-icons">arrow_back</i>
164 |               </a>
165 |               <a href="#" class="link">
166 |                 <i class="icon material-icons">arrow_forward</i>
167 |               </a>
168 |               <a href="#" class="link">
169 |                 <i class="icon material-icons">refresh</i>
170 |               </a>
171 |               <div class="input">
172 |                 <a href="#" class="link">
173 |                   <i class="icon material-icons">lock</i>
174 |                 </a>
175 |                 <input type="text" value="https://framework7.io">
176 |                 <a href="#" class="link">
177 |                   <i class="icon material-icons">star_border</i>
178 |                 </a>
179 |               </div>
180 |               <a href="#" class="link">
181 |                 <i class="icon material-icons">more_vert</i>
182 |               </a>
183 |             </div>
184 |           </div>
185 |           <div class="page-content">
186 |             <iframe src="https://framework7.io/" frameborder="0"></iframe>
187 |           </div>
188 |         </div>
189 |       </div>
190 | 
191 |       <div class="view tab" id="tab-2">
192 |         <div class="page">
193 |           <div class="addressbar toolbar toolbar-top">
194 |             <div class="toolbar-inner addressbar-content">
195 |               <a href="#" class="link">
196 |                 <i class="icon material-icons">arrow_back</i>
197 |               </a>
198 |               <a href="#" class="link">
199 |                 <i class="icon material-icons">arrow_forward</i>
200 |               </a>
201 |               <a href="#" class="link">
202 |                 <i class="icon material-icons">refresh</i>
203 |               </a>
204 |               <div class="input">
205 |                 <a href="#" class="link">
206 |                   <i class="icon material-icons">lock</i>
207 |                 </a>
208 |                 <input type="text" value="https://framework7.io/templates/">
209 |                 <a href="#" class="link">
210 |                   <i class="icon material-icons">star_border</i>
211 |                 </a>
212 |               </div>
213 |               <a href="#" class="link">
214 |                 <i class="icon material-icons">more_vert</i>
215 |               </a>
216 |             </div>
217 |           </div>
218 |           <div class="page-content">
219 |             <iframe src="https://framework7.io/templates/" frameborder="0"></iframe>
220 |           </div>
221 |         </div>
222 |       </div>
223 | 
224 |       <div class="view tab" id="tab-3">
225 |         <div class="page">
226 |           <div class="addressbar toolbar toolbar-top">
227 |             <div class="toolbar-inner addressbar-content">
228 |               <a href="#" class="link">
229 |                 <i class="icon material-icons">arrow_back</i>
230 |               </a>
231 |               <a href="#" class="link">
232 |                 <i class="icon material-icons">arrow_forward</i>
233 |               </a>
234 |               <a href="#" class="link">
235 |                 <i class="icon material-icons">refresh</i>
236 |               </a>
237 |               <div class="input">
238 |                 <a href="#" class="link">
239 |                   <i class="icon material-icons">lock</i>
240 |                 </a>
241 |                 <input type="text" value="https://jobs.framework7.io/">
242 |                 <a href="#" class="link">
243 |                   <i class="icon material-icons">star_border</i>
244 |                 </a>
245 |               </div>
246 |               <a href="#" class="link">
247 |                 <i class="icon material-icons">more_vert</i>
248 |               </a>
249 |             </div>
250 |           </div>
251 |           <div class="page-content">
252 |             <iframe src="https://jobs.framework7.io/" frameborder="0"></iframe>
253 |           </div>
254 |         </div>
255 |       </div>
256 | 
257 |     </div>
258 |   </div>
259 |   <script src="https://unpkg.com/framework7/framework7-bundle.min.js"></script>
260 |   <script>
261 |     const app = new Framework7({
262 |       el: '#app',
263 |       theme: 'aurora',
264 |     });
265 |   </script>
266 | </body>
267 | </html>
268 | 


--------------------------------------------------------------------------------
/macos-mail/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | <head>
  4 |   <meta charset="UTF-8">
  5 |   <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, viewport-fit=cover">
  6 |   <meta name="apple-mobile-web-app-capable" content="yes">
  7 |   <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
  8 |   <meta name="theme-color" content="#2196f3">
  9 |   <meta http-equiv="Content-Security-Policy" content="default-src * 'self' 'unsafe-inline' 'unsafe-eval' data:">
 10 |   <title>Mail</title>
 11 |   <link rel="stylesheet" href="https://unpkg.com/framework7/framework7-bundle.min.css">
 12 |   <link rel="stylesheet" href="https://unpkg.com/framework7-icons">
 13 |   <style>
 14 |     :root {
 15 |       --f7-button-bg-color: #fff;
 16 |       --f7-button-text-color: var(--f7-color-gray);
 17 |       --f7-button-outline-border-color: #ccc;
 18 |       --f7-button-pressed-bg-color: #f1f1f1;
 19 |       --f7-button-hover-bg-color: #f8f8f8;
 20 |       --f7-searchbar-input-border-color: #ccc;
 21 |       --f7-searchbar-input-border-width: 1px;
 22 |       --f7-searchbar-inline-input-height: 22px;
 23 |       --f7-searchbar-inline-input-border-radius: 4px;
 24 |       --f7-searchbar-inline-input-font-size: 12px;
 25 |       --f7-searchbar-input-bg-color: #fff;
 26 |       --f7-searchbar-inline-input-padding-horizontal: 20px;
 27 |       --f7-appbar-extra-offset: 24px;
 28 |       --f7-appbar-bg-color: #e3e3e3;
 29 |       --f7-button-border-radius: 4px;
 30 |       --f7-button-small-outline-border-width: 1px;
 31 |       --f7-button-small-height: 24px;
 32 |       --f7-button-small-text-transform: none;
 33 |       --f7-button-small-font-size: 12px;
 34 |       --f7-chip-height: 20px;
 35 |       --f7-chip-padding-horizontal: 6px;
 36 |     }
 37 | 
 38 | 
 39 |     /* Buttons */
 40 |     .button {
 41 |       display: flex;
 42 |       align-items: center;
 43 |       justify-content: center;
 44 |     }
 45 |     .button i.f7-icons {
 46 |       font-size: 16px;
 47 |       width: 16px;
 48 |       height: 16px;
 49 |     }
 50 |     /* Top Appbar */
 51 |     .appbar .button {
 52 |       display: flex;
 53 |     }
 54 |     .searchbar .icon {
 55 |       width: 14px;
 56 |     }
 57 |     .searchbar .icon:after {
 58 |       font-size: 14px;
 59 |     }
 60 |     .appbar-small {
 61 |       --f7-appbar-height: 24px;
 62 |       --f7-button-small-height: 16px;
 63 |       --f7-button-small-font-size: 11px;
 64 |       --f7-button-small-font-weight: 500;
 65 |       --f7-button-bg-color: transparent;
 66 |       --f7-button-text-color: #666;
 67 |       --f7-button-pressed-bg-color: rgba(0,0,0,0.1);
 68 |       --f7-button-hover-bg-color: rgba(0,0,0,0.05);
 69 |     }
 70 |     .appbar-small .button .icon-chevron {
 71 |       font-size: 12px;
 72 |       height: 12px;
 73 |       width: 12px;
 74 |       margin-right: -4px;
 75 |       top: 1px;
 76 |     }
 77 |     /* Panel */
 78 |     .panel-left {
 79 |       border-right: 1px solid rgba(0,0,0,0.1);
 80 |     }
 81 |     /* Accounts Page (Panel) */
 82 |     .page-accounts {
 83 |       --f7-list-border-color: transparent;
 84 |       --f7-list-item-border-color: transparent;
 85 |       --f7-list-bg-color: transparent;
 86 |       --f7-list-item-min-height: 26px;
 87 |       --f7-list-item-padding-vertical: 2px;
 88 |       --f7-list-item-title-font-size: 14px;
 89 | 
 90 |       --f7-block-title-font-size: 12px;
 91 |     }
 92 |     .page-accounts .list .f7-icons {
 93 |       font-size: 18px;
 94 |       opacity: 0.55;
 95 |     }
 96 |     /* Email List Page */
 97 |     .page-email-list {
 98 |       --f7-page-bg-color: #fff;
 99 |       --f7-list-border-color: transparent;
100 |       --f7-list-margin-vertical: 0px;
101 |       --f7-toolbar-height: 24px;
102 |       --f7-list-item-subtitle-font-size: 13px;
103 |       --f7-list-item-title-font-size: 13px;
104 |       --f7-list-item-title-line-height: 1.2;
105 |       --f7-list-item-subtitle-line-height: 1.2;
106 |       --f7-list-item-after-font-size: 12px;
107 |       --f7-list-item-after-line-height: 1.2;
108 |       --f7-list-item-text-line-height: 16px;
109 |     }
110 |     /* Email Detail Page */
111 |     .page-email-detail {
112 |       --f7-page-bg-color: #fff;
113 |     }
114 |     .email-detail-actions {
115 |       z-index: 10;
116 |       position: relative;
117 |     }
118 |     .email-detail-actions:before {
119 |       position: absolute;
120 |       width: 100%;
121 |       height: 1px;
122 |       background: #f1f1f1;
123 |       left: 0;
124 |       top: 50%;
125 |       content: '';
126 |     }
127 |     .email-detail-actions .segmented {
128 |       width: 140px;
129 |       margin-left: auto;
130 |       margin-right: auto;
131 |     }
132 |   </style>
133 | </head>
134 | <body>
135 |   <div id="app">
136 |     <div class="appbar">
137 |       <div class="appbar-inner">
138 |         <div class="left">
139 |           <a href="#" class="button button-small button-outline">
140 |             <i class="icon f7-icons">envelope_fill</i>
141 |           </a>
142 |           <a href="#" class="button button-small button-outline margin-left-half">
143 |             <i class="icon f7-icons">square_pencil_fill</i>
144 |           </a>
145 |         </div>
146 |         <div class="center margin-horizontal-half">
147 |           <a href="#" class="button button-small button-outline">
148 |             <i class="icon f7-icons">archivebox_fill</i>
149 |           </a>
150 |           <div class="segmented margin-left-half">
151 |             <a href="#" class="button button-small button-outline">
152 |               <i class="icon f7-icons">trash_fill</i>
153 |             </a>
154 |             <a href="#" class="button button-small button-outline">
155 |               <i class="icon f7-icons">exclamationmark_triangle_fill</i>
156 |             </a>
157 |           </div>
158 |           <div class="segmented margin-left-half">
159 |             <a href="#" class="button button-small button-outline">
160 |               <i class="icon f7-icons">arrowshape_turn_up_left_fill</i>
161 |             </a>
162 |             <a href="#" class="button button-small button-outline">
163 |               <i class="icon f7-icons">arrowshape_turn_up_right_fill</i>
164 |             </a>
165 |           </div>
166 |           <a href="#" class="button button-small button-outline margin-left-half">
167 |             <i class="icon f7-icons">flag_fill</i>
168 |           </a>
169 |           <a href="#" class="button button-small button-outline margin-left-half">
170 |             <i class="icon f7-icons">folder_fill</i>
171 |             <span>Move to ...</span>
172 |           </a>
173 |         </div>
174 |         <div class="right">
175 |           <div class="searchbar searchbar-inline searchbar-init">
176 |             <div class="searchbar-input-wrap">
177 |               <input type="text" placeholder="Search">
178 |               <i class="icon searchbar-icon"></i>
179 |               <span class="input-clear-button"></span>
180 |             </div>
181 |           </div>
182 |         </div>
183 |       </div>
184 |     </div>
185 |     <div class="appbar appbar-small">
186 |       <div class="appbar-inner">
187 |         <div class="left">
188 |           <a href="#" class="button button-small panel-open" data-panel="left">
189 |             <i class="icon f7-icons">square_list</i>
190 |             <span>Accounts</span>
191 |           </a>
192 |           <a href="#" class="button button-small button-active color-gray margin-left-half">
193 |             <span>Inbox</span>
194 |             <i class="icon f7-icons icon-chevron">chevron_down</i>
195 |           </a>
196 |           <a href="#" class="button button-small margin-left-half">
197 |             <span>Sent</span>
198 |             <i class="icon f7-icons icon-chevron">chevron_down</i>
199 |           </a>
200 |           <a href="#" class="button button-small margin-left-half">
201 |             <span>Flagged</span>
202 |           </a>
203 |           <a href="#" class="button button-small margin-left-half">
204 |             <span>Drafts (1)</span>
205 |             <i class="icon f7-icons icon-chevron">chevron_down</i>
206 |           </a>
207 |         </div>
208 |       </div>
209 |     </div>
210 | 
211 |     <!-- <div class="toolbar main-toolbar toolbar-top"></div> -->
212 |     <div class="panel panel-left panel-reveal panel-init" data-visible-breakpoint="768">
213 |       <div class="page page-accounts">
214 |         <div class="page-content">
215 |           <div class="block-title">my@email.com</div>
216 |           <div class="list no-chevron">
217 |             <ul>
218 |               <li>
219 |                 <a href="#" class="item-content item-link">
220 |                   <div class="item-media">
221 |                     <i class="icon f7-icons">tray_fill</i>
222 |                   </div>
223 |                   <div class="item-inner">
224 |                     <div class="item-title">Inbox</div>
225 |                     <div class="item-after">
226 |                       <div class="badge">31</div>
227 |                     </div>
228 |                   </div>
229 |                 </a>
230 |               </li>
231 |               <li>
232 |                 <a href="#" class="item-content item-link">
233 |                   <div class="item-media">
234 |                     <i class="icon f7-icons">flag_fill</i>
235 |                   </div>
236 |                   <div class="item-inner">
237 |                     <div class="item-title">Flagged</div>
238 |                   </div>
239 |                 </a>
240 |               </li>
241 |               <li>
242 |                 <a href="#" class="item-content item-link">
243 |                   <div class="item-media">
244 |                     <i class="icon f7-icons">doc_fill</i>
245 |                   </div>
246 |                   <div class="item-inner">
247 |                     <div class="item-title">Drafts</div>
248 |                     <div class="item-after">
249 |                         <div class="badge">1</div>
250 |                       </div>
251 |                   </div>
252 |                 </a>
253 |               </li>
254 |               <li>
255 |                 <a href="#"  class="item-content item-link">
256 |                   <div class="item-media">
257 |                     <i class="icon f7-icons">paperplane_fill</i>
258 |                   </div>
259 |                   <div class="item-inner">
260 |                     <div class="item-title">Sent</div>
261 |                   </div>
262 |                 </a>
263 |               </li>
264 |               <li>
265 |                 <a href="#"  class="item-content item-link">
266 |                   <div class="item-media">
267 |                     <i class="icon f7-icons">exclamationmark_triangle_fill</i>
268 |                   </div>
269 |                   <div class="item-inner">
270 |                     <div class="item-title">Spam</div>
271 |                   </div>
272 |                 </a>
273 |               </li>
274 |               <li>
275 |                 <a href="#"  class="item-content item-link">
276 |                   <div class="item-media">
277 |                     <i class="icon f7-icons">trash_fill</i>
278 |                   </div>
279 |                   <div class="item-inner">
280 |                     <div class="item-title">Trash</div>
281 |                   </div>
282 |                 </a>
283 |               </li>
284 |               <li>
285 |                 <a href="#"  class="item-content item-link">
286 |                   <div class="item-media">
287 |                     <i class="icon f7-icons">archivebox_fill</i>
288 |                   </div>
289 |                   <div class="item-inner">
290 |                     <div class="item-title">Archive</div>
291 |                   </div>
292 |                 </a>
293 |               </li>
294 |             </ul>
295 |           </div>
296 |           <div class="block-title">another@address.com</div>
297 |           <div class="list no-chevron">
298 |             <ul>
299 |               <li>
300 |                 <a href="#" class="item-content item-link">
301 |                   <div class="item-media">
302 |                     <i class="icon f7-icons">tray_fill</i>
303 |                   </div>
304 |                   <div class="item-inner">
305 |                     <div class="item-title">Inbox</div>
306 |                     <div class="item-after">
307 |                       <div class="badge">14</div>
308 |                     </div>
309 |                   </div>
310 |                 </a>
311 |               </li>
312 |               <li>
313 |                 <a href="#" class="item-content item-link">
314 |                   <div class="item-media">
315 |                     <i class="icon f7-icons">flag_fill</i>
316 |                   </div>
317 |                   <div class="item-inner">
318 |                     <div class="item-title">Flagged</div>
319 |                   </div>
320 |                 </a>
321 |               </li>
322 |               <li>
323 |                 <a href="#" class="item-content item-link">
324 |                   <div class="item-media">
325 |                     <i class="icon f7-icons">doc_fill</i>
326 |                   </div>
327 |                   <div class="item-inner">
328 |                     <div class="item-title">Drafts</div>
329 |                   </div>
330 |                 </a>
331 |               </li>
332 |               <li>
333 |                 <a href="#"  class="item-content item-link">
334 |                   <div class="item-media">
335 |                     <i class="icon f7-icons">paperplane_fill</i>
336 |                   </div>
337 |                   <div class="item-inner">
338 |                     <div class="item-title">Sent</div>
339 |                   </div>
340 |                 </a>
341 |               </li>
342 |               <li>
343 |                 <a href="#"  class="item-content item-link">
344 |                   <div class="item-media">
345 |                     <i class="icon f7-icons">exclamationmark_triangle_fill</i>
346 |                   </div>
347 |                   <div class="item-inner">
348 |                     <div class="item-title">Spam</div>
349 |                   </div>
350 |                 </a>
351 |               </li>
352 |               <li>
353 |                 <a href="#"  class="item-content item-link">
354 |                   <div class="item-media">
355 |                     <i class="icon f7-icons">trash_fill</i>
356 |                   </div>
357 |                   <div class="item-inner">
358 |                     <div class="item-title">Trash</div>
359 |                   </div>
360 |                 </a>
361 |               </li>
362 |               <li>
363 |                 <a href="#"  class="item-content item-link">
364 |                   <div class="item-media">
365 |                     <i class="icon f7-icons">archivebox_fill</i>
366 |                   </div>
367 |                   <div class="item-inner">
368 |                     <div class="item-title">Archive</div>
369 |                   </div>
370 |                 </a>
371 |               </li>
372 |             </ul>
373 |           </div>
374 |         </div>
375 |       </div>
376 |     </div>
377 |     <div class="view view-main view-init" data-master-detail-breakpoint="1" data-url="/">
378 |       <div class="page page-email-list">
379 |         <div class="toolbar toolbar-top">
380 |           <div class="toolbar-inner">
381 |             <div class="left"></div>
382 |             <div class="right">
383 |               <a href="#" class="link icon-only color-gray">
384 |                 <i class="icon f7-icons" style="font-size: 14px">line_horizontal_3_decrease_circle</i>
385 |               </a>
386 |             </div>
387 |           </div>
388 |         </div>
389 |         <div class="page-content">
390 |           <div class="list media-list no-chevron">
391 |             <ul>
392 |               <li>
393 |                 <a href="#" class="item-link item-content">
394 |                   <div class="item-inner">
395 |                     <div class="item-title-row">
396 |                       <div class="item-title">Facebook</div>
397 |                       <div class="item-after">17:14</div>
398 |                     </div>
399 |                     <div class="item-subtitle">New messages from John Doe</div>
400 |                     <div class="item-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sagittis tellus ut turpis condimentum, ut dignissim lacus tincidunt. Cras dolor metus, ultrices condimentum sodales sit amet, pharetra sodales eros. Phasellus vel felis tellus. Mauris rutrum ligula nec dapibus feugiat. In vel dui laoreet, commodo augue id, pulvinar lacus.</div>
401 |                   </div>
402 |                 </a>
403 |               </li>
404 |               <li>
405 |                 <a href="#" class="item-link item-content">
406 |                   <div class="item-inner">
407 |                     <div class="item-title-row">
408 |                       <div class="item-title">John Doe (via Twitter)</div>
409 |                       <div class="item-after">17:11</div>
410 |                     </div>
411 |                     <div class="item-subtitle">John Doe (@_johndoe) mentioned you on Twitter!</div>
412 |                     <div class="item-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sagittis tellus ut turpis condimentum, ut dignissim lacus tincidunt. Cras dolor metus, ultrices condimentum sodales sit amet, pharetra sodales eros. Phasellus vel felis tellus. Mauris rutrum ligula nec dapibus feugiat. In vel dui laoreet, commodo augue id, pulvinar lacus.</div>
413 |                   </div>
414 |                 </a>
415 |               </li>
416 |               <li>
417 |                 <a href="#" class="item-link item-content">
418 |                   <div class="item-inner">
419 |                     <div class="item-title-row">
420 |                       <div class="item-title">Facebook</div>
421 |                       <div class="item-after">16:48</div>
422 |                     </div>
423 |                     <div class="item-subtitle">New messages from John Doe</div>
424 |                     <div class="item-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sagittis tellus ut turpis condimentum, ut dignissim lacus tincidunt. Cras dolor metus, ultrices condimentum sodales sit amet, pharetra sodales eros. Phasellus vel felis tellus. Mauris rutrum ligula nec dapibus feugiat. In vel dui laoreet, commodo augue id, pulvinar lacus.</div>
425 |                   </div>
426 |                 </a>
427 |               </li>
428 |               <li>
429 |                 <a href="#" class="item-link item-content">
430 |                   <div class="item-inner">
431 |                     <div class="item-title-row">
432 |                       <div class="item-title">John Doe (via Twitter)</div>
433 |                       <div class="item-after">15:32</div>
434 |                     </div>
435 |                     <div class="item-subtitle">John Doe (@_johndoe) mentioned you on Twitter!</div>
436 |                     <div class="item-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sagittis tellus ut turpis condimentum, ut dignissim lacus tincidunt. Cras dolor metus, ultrices condimentum sodales sit amet, pharetra sodales eros. Phasellus vel felis tellus. Mauris rutrum ligula nec dapibus feugiat. In vel dui laoreet, commodo augue id, pulvinar lacus.</div>
437 |                   </div>
438 |                 </a>
439 |               </li>
440 |             </ul>
441 |           </div>
442 |         </div>
443 |       </div>
444 |       <div class="page page-master-detail page-email-detail">
445 | 
446 |         <div class="page-content">
447 |           <div class="block block-strong no-margin no-hairlines">
448 |             <h3 class="no-margin-bottom">John Doe &lt;john@doe.com&gt;</h3>
449 |             <div>Hello! How are you doing?</div>
450 |             <div>To: <span class="chip">Vladimir Kharlampidi</span></div>
451 |             <div>Reply-To: <span class="chip">no-reply@doe.com</span></div>
452 |           </div>
453 |           <div class="email-detail-actions">
454 |             <div class="segmented">
455 |               <a class="button button-small button-outline">
456 |                 <i class="icon f7-icons">trash</i>
457 |               </a>
458 |               <a class="button button-small button-outline">
459 |                 <i class="icon f7-icons">arrowshape_turn_up_right</i>
460 |               </a>
461 |               <a class="button button-small button-outline">
462 |                 <i class="icon f7-icons" style="transform: scaleX(-1)">arrowshape_turn_up_left_2</i>
463 |               </a>
464 |             </div>
465 |           </div>
466 |           <div class="block block-strong no-margin no-hairlines">
467 |             <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut luctus auctor massa pretium vestibulum. Vivamus ut tempor ligula, eget vestibulum enim. Donec magna dui, porta eu tortor in, porttitor maximus libero. Sed vitae dui tristique, dapibus nulla vitae, condimentum est. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis accumsan tellus et sapien sagittis, imperdiet egestas nulla tempus. Sed nec pulvinar lacus, eget iaculis massa.</p>
468 |             <p>Suspendisse eu lectus nunc. Sed sed ante sed enim commodo ultrices. Maecenas convallis porta tristique. Sed ornare massa non elit tempor, id tincidunt nisi luctus. Nulla venenatis ullamcorper lacus in porttitor. Integer pretium pharetra orci, quis venenatis sapien suscipit vel. Maecenas in mollis urna.</p>
469 |           </div>
470 |         </div>
471 |       </div>
472 | 
473 |     </div>
474 |   </div>
475 |   <script src="https://unpkg.com/framework7/framework7-bundle.min.js"></script>
476 |   <script>
477 |     const app = new Framework7({
478 |       el: '#app',
479 |       theme: 'aurora',
480 |       routes: [
481 |         {
482 |           path: '/',
483 |           master: true,
484 |           url: './index.html',
485 |         },
486 |       ],
487 |     });
488 |   </script>
489 | </body>
490 | </html>
491 | 


--------------------------------------------------------------------------------
/slack-desktop/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | <head>
  4 |   <meta charset="UTF-8">
  5 |   <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, viewport-fit=cover">
  6 |   <meta name="apple-mobile-web-app-capable" content="yes">
  7 |   <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
  8 |   <meta name="theme-color" content="#2196f3">
  9 |   <meta http-equiv="Content-Security-Policy" content="default-src * 'self' 'unsafe-inline' 'unsafe-eval' data:">
 10 |   <title>Slack</title>
 11 |   <link rel="icon" href="https://cfr.slack-edge.com/cebaa/img/icons/favicon-32.png">
 12 |   <link rel="stylesheet" href="https://unpkg.com/framework7/framework7-bundle.min.css">
 13 |   <link rel="stylesheet" href="https://unpkg.com/framework7-icons">
 14 |   <style>
 15 |     :root {
 16 |       --f7-panel-width: 290px;
 17 |     }
 18 |     .workspaces {
 19 |       width: 68px;
 20 |       height: 100%;
 21 |       position: absolute;
 22 |       left: 0;
 23 |       top: 0;
 24 |       background: #200720;
 25 |       display: flex;
 26 |       flex-direction: column;
 27 |       align-items: center;
 28 |       box-sizing: border-box;
 29 |       padding-top: 15px;
 30 |     }
 31 |     .workspaces a {
 32 |       width: 36px;
 33 |       margin-bottom: 15px;
 34 |       text-align: center;
 35 |       color: rgba(255,255,255,0.6);
 36 |       font-size: 12px;
 37 |     }
 38 |     .workspace-logo {
 39 |       width: 36px;
 40 |       height: 36px;
 41 |       background: rgba(255,255,255,0.1);
 42 |       border-radius: 8px;
 43 |       display: flex;
 44 |       align-items: center;
 45 |       justify-content: center;
 46 |       font-size: 20px;
 47 |       position: relative;
 48 |     }
 49 |     .workspace-logo:before {
 50 |       content: '';
 51 |       position: absolute;
 52 |       left: 50%;
 53 |       top: 50%;
 54 |       transform: translate(-50%, -50%);
 55 |       border: 0px solid rgba(255,255,255,0.3);
 56 |       transition: 200ms;
 57 |       width: 100%;
 58 |       height: 100%;
 59 |       border-radius: 12px;
 60 |     }
 61 |     .workspaces a:hover .workspace-logo:before {
 62 |       border-width: 4px;
 63 |     }
 64 |     .workspace-logo img {
 65 |       max-width: 100%;
 66 |       max-height: 100%;
 67 |     }
 68 |     .workspaces + .view {
 69 |       left: 68px;
 70 |       width: calc(100% - 68px);
 71 |     }
 72 |     .channels-page {
 73 |       --f7-bars-bg-color: #3F0F40;
 74 |       --f7-page-bg-color: #3F0F40;
 75 |       --f7-bars-border-color: transparent;
 76 |       --f7-bars-text-color: #fff;
 77 |       --f7-navbar-font-size: 18px;
 78 |       --f7-navbar-title-font-weight: bold;
 79 |       --f7-navbar-link-color: #fff;
 80 |       --f7-searchbar-inner-padding-left: 15px;
 81 |       --f7-searchbar-inner-padding-right: 15px;
 82 |       --f7-searchbar-input-height: 32px;
 83 |       --f7-searchbar-input-bg-color: rgba(0,0,0,0.4);
 84 |       --f7-searchbar-input-text-color: rgba(255,255,255,0.8);
 85 |       --f7-searchbar-input-border-radius: 6px;
 86 |       --f7-searchbar-input-font-size: 16px;
 87 |       --f7-list-bg-color: transparent;
 88 |       --f7-list-border-color: transparent;
 89 |       --f7-list-item-border-color: transparent;
 90 |       --f7-list-item-min-height: 32px;
 91 |       --f7-list-item-padding-vertical: 4px;
 92 |       --f7-block-title-font-size: 16px;
 93 |       --f7-block-title-text-color: rgba(255,255,255,0.7);
 94 |       --f7-block-title-font-weight-color: 500;
 95 |       --f7-list-item-title-text-color: rgba(255,255,255,0.7);
 96 |       --f7-list-item-title-font-size: 16px;
 97 |       --f7-list-link-pressed-bg-color: rgba(0,0,0,0.2);
 98 |       --f7-list-link-hover-bg-color: rgba(0,0,0,0.1);
 99 |       color: rgba(255,255,255,0.7);
100 |     }
101 |     .channels-page .block-title {
102 |       display: flex;
103 |       justify-content: space-between;
104 |       align-items: center;
105 |     }
106 |     .channels-page .block-title .link {
107 |       color: inherit;
108 |     }
109 |     .channels-page .block-title .link:hover {
110 |       color: #fff;
111 |     }
112 |     .channels-page .list .item-media {
113 |       width: 12px;
114 |     }
115 |     .channels-page .list .icon {
116 |       font-size: 12px;
117 |       width: 12px;
118 |       height: 12px;
119 |       color: rgba(255,255,255,0.7);
120 |     }
121 |     .channels-page .list .icon-add {
122 |       font-size: 14px;
123 |       width: 14px;
124 |       height: 14px;
125 |     }
126 | 
127 |     .chat-page {
128 |       --f7-page-bg-color: #fff;
129 |       --f7-navbar-height: 62px;
130 |       --f7-navbar-bg-color: #fff;
131 |       --f7-navbar-text-color: #616061;
132 |       --f7-navbar-link-color: #616061;
133 |       --f7-navbar-title-font-weight: bold;
134 |       --f7-navbar-border-color: transparent;
135 |       --f7-searchbar-input-height: 34px;
136 |       --f7-searchbar-input-border-color: #868686;
137 |       --f7-searchbar-input-border-width: 1px;
138 |       --f7-searchbar-input-font-size: 16px;
139 |       --f7-searchbar-input-border-radius: 6px;
140 |       --f7-searchbar-input-bg-color: #fff;
141 |       --f7-messagebar-height: 68px;
142 |       --f7-messagebar-textarea-height: 44px;
143 |       --f7-messagebar-textarea-border: 2px solid #616061;
144 |       --f7-messagebar-textarea-border-radius: 6px;
145 |       --f7-messagebar-textarea-font-size: 16px;
146 |       --f7-messagebar-textarea-padding: 8px 12px;
147 | 
148 |       --f7-message-avatar-size: 38px;
149 |       --f7-message-avatar-border-radius: 6px;
150 |       --f7-message-name-text-color: #000;
151 |       --f7-message-name-font-size: 15px;
152 |       --f7-message-name-font-weight: bold;
153 |       --f7-message-received-bg-color: transparent;
154 |       --f7-message-sent-bg-color: transparent;
155 |       --f7-message-bubble-font-size: 15px;
156 |       --f7-message-bubble-line-height: 1.5;
157 |       --f7-message-received-text-color: #000;
158 |       --f7-message-sent-text-color: #000;
159 | 
160 |       --f7-messages-title-font-size: 14px;
161 |       --f7-messages-title-font-weight: bold;
162 |       --f7-messages-title-text-color: #000;
163 |     }
164 | 
165 |     .chat-page .navbar .title {
166 |       font-size: 16px;
167 |       font-weight: bold;
168 |       text-align: left;
169 |       color: #000;
170 |       min-width: 200px;
171 |     }
172 |     .chat-page .navbar .link {
173 |       height: auto;
174 |       line-height: 1;
175 |     }
176 |     .chat-page .navbar .subtitle {
177 |       display: flex;
178 |       align-items: center;
179 |       margin-top: 5px;
180 |     }
181 |     .chat-page .navbar .subtitle .divider {
182 |       margin-left: 3px;
183 |       margin-right: 3px;
184 |     }
185 |     .chat-page .navbar .searchbar {
186 |       margin: 0 10px;
187 |     }
188 |     .chat-page .navbar .right .f7-icons {
189 |       font-size: 24px;
190 |       width: 24px;
191 |       height: 24px;
192 |     }
193 |     .chat-page .message-avatar {
194 |       align-self: flex-start;
195 |     }
196 |     .chat-page .message-name span {
197 |       font-weight: 400;
198 |       font-size: 12px;
199 |       opacity: 0.5;
200 |     }
201 |     .chat-page .message-avatar {
202 |       align-self: flex-start;
203 |     }
204 |     .chat-page .messages-title {
205 |       margin: 0;
206 |       text-align: center;
207 |       position: sticky;
208 |       top: 0;
209 |       z-index: 100;
210 |       background: #fff;
211 | 
212 |     }
213 |     .chat-page .messages-title:before {
214 |       height: 1px;
215 |       width: 100%;
216 |       left: 0;
217 |       top: 50%;
218 |       content: '';
219 |       background: var(--f7-bars-border-color);
220 |       position: absolute;
221 |       z-index: -1;
222 |     }
223 |     .chat-page .messages-title span {
224 |       display: inline-block;
225 |       padding: 10px;
226 |       border-radius: 5px;
227 |       background: #fff;
228 |     }
229 |   </style>
230 | </head>
231 | <body>
232 |   <div id="app">
233 |     <div class="panel panel-left panel-reveal dark panel-init" data-visible-breakpoint="1">
234 |       <div class="workspaces">
235 |         <a href="#">
236 |           <div class="workspace-logo">
237 |             <img src="https://framework7.io/i/logo.svg">
238 |           </div>
239 |           <div class="workspace-shortcut">⌘1</div>
240 |         </a>
241 |         <a href="#">
242 |           <div class="workspace-logo">A</div>
243 |           <div class="workspace-shortcut">⌘2</div>
244 |         </a>
245 |         <a href="#">
246 |           <div class="workspace-logo">B</div>
247 |           <div class="workspace-shortcut">⌘3</div>
248 |         </a>
249 |         <a href="#">
250 |           <div class="workspace-logo">C</div>
251 |           <div class="workspace-shortcut">⌘4</div>
252 |         </a>
253 |       </div>
254 |       <div class="view view-init">
255 |         <div class="page channels-page">
256 |           <div class="navbar">
257 |             <div class="navbar-bg"></div>
258 |             <div class="navbar-inner">
259 |               <div class="title">
260 |                 <a href="#" class="link">Framework7 <i class="icon f7-icons">chevron_down</i></a>
261 |               </div>
262 |             </div>
263 |           </div>
264 |           <div class="page-content">
265 |             <div class="searchbar">
266 |               <div class="searchbar-inner">
267 |                 <div class="searchbar-input-wrap">
268 |                   <input type="text" placeholder="Jump to...">
269 |                   <i class="searchbar-icon"></i>
270 |                   <span class="input-clear-button"></span>
271 |                 </div>
272 |               </div>
273 |             </div>
274 |             <div class="block-title">
275 |               <a href="#" class="link">Channels</a>
276 |               <a href="#" class="link">
277 |                 <i class="icon f7-icons">plus_circle</i>
278 |               </a>
279 |             </div>
280 |             <div class="list no-chevron">
281 |               <ul>
282 |                 <li>
283 |                   <a href="#" class="item-link item-content">
284 |                     <div class="item-media">#</div>
285 |                     <div class="item-inner">
286 |                       <div class="item-title">general</div>
287 |                     </div>
288 |                   </a>
289 |                 </li>
290 |                 <li>
291 |                   <a href="#" class="item-link item-content">
292 |                     <div class="item-media">#</div>
293 |                     <div class="item-inner">
294 |                       <div class="item-title">random</div>
295 |                     </div>
296 |                   </a>
297 |                 </li>
298 |                 <li>
299 |                   <a href="#" class="item-link item-content">
300 |                     <div class="item-media">#</div>
301 |                     <div class="item-inner">
302 |                       <div class="item-title">github</div>
303 |                     </div>
304 |                   </a>
305 |                 </li>
306 |               </ul>
307 |             </div>
308 | 
309 |             <div class="list no-chevron">
310 |               <ul>
311 |                 <li>
312 |                   <a href="#" class="item-link item-content">
313 |                     <div class="item-media">
314 |                       <i class="icon f7-icons icon-add">plus_circle</i>
315 |                     </div>
316 |                     <div class="item-inner">
317 |                       <div class="item-title">Add a channel</div>
318 |                     </div>
319 |                   </a>
320 |                 </li>
321 |               </ul>
322 |             </div>
323 | 
324 |             <div class="block-title">
325 |               <a href="#" class="link">Direct Messages</a>
326 |               <a href="#" class="link">
327 |                 <i class="icon f7-icons">add_round</i>
328 |               </a>
329 |             </div>
330 |             <div class="list no-chevron">
331 |               <ul>
332 |                 <li>
333 |                   <a href="#" class="item-link item-content">
334 |                     <div class="item-media">
335 |                       <i class="icon f7-icons text-color-green">heart_fill</i>
336 |                     </div>
337 |                     <div class="item-inner">
338 |                       <div class="item-title">Slackbot</div>
339 |                     </div>
340 |                   </a>
341 |                 </li>
342 |                 <li>
343 |                   <a href="#" class="item-link item-content">
344 |                     <div class="item-media">
345 |                       <i class="icon f7-icons text-color-green" style="font-size: 10px">circle_fill</i>
346 |                     </div>
347 |                     <div class="item-inner">
348 |                       <div class="item-title">johndoe</div>
349 |                     </div>
350 |                   </a>
351 |                 </li>
352 |                 <li>
353 |                   <a href="#" class="item-link item-content">
354 |                     <div class="item-media">
355 |                       <i class="icon f7-icons" style="font-size: 10px">circle</i>
356 |                     </div>
357 |                     <div class="item-inner">
358 |                       <div class="item-title">nolimits4web</div>
359 |                     </div>
360 |                   </a>
361 |                 </li>
362 |               </ul>
363 |             </div>
364 |             <div class="list no-chevron">
365 |               <ul>
366 |                 <li>
367 |                   <a href="#" class="item-link item-content">
368 |                     <div class="item-media">
369 |                       <i class="icon f7-icons icon-add">plus_circle</i>
370 |                     </div>
371 |                     <div class="item-inner">
372 |                       <div class="item-title">Invite people</div>
373 |                     </div>
374 |                   </a>
375 |                 </li>
376 |               </ul>
377 |             </div>
378 |           </div>
379 |         </div>
380 |       </div>
381 |     </div>
382 |     <div class="view view-main view-init">
383 |       <div class="page chat-page">
384 |         <div class="navbar">
385 |           <div class="navbar-bg"></div>
386 |           <div class="navbar-inner">
387 |             <div class="title">
388 |               <span>#general</span>
389 |               <div class="subtitle">
390 |                 <a href="#" class="link">
391 |                   <i class="icon f7-icons">star</i>
392 |                 </a>
393 |                 <span class="divider"> | </span>
394 |                 <span class="description"> Company-wide announcements and work-based matters</span>
395 |               </div>
396 |             </div>
397 |             <div class="right">
398 |               <a href="#" class="link">
399 |                 <i class="icon f7-icons">info_circle</i>
400 |               </a>
401 |               <a href="#" class="link">
402 |                 <i class="icon f7-icons">gear</i>
403 |               </a>
404 |               <div class="searchbar searchbar-inline">
405 |                 <div class="searchbar-input-wrap">
406 |                   <input type="text" placeholder="Search">
407 |                   <i class="searchbar-icon"></i>
408 |                   <span class="input-clear-button"></span>
409 |                 </div>
410 |               </div>
411 |               <a href="#" class="link">
412 |                 <i class="icon f7-icons">at_circle</i>
413 |               </a>
414 |               <a href="#" class="link">
415 |                 <i class="icon f7-icons">star</i>
416 |               </a>
417 |               <a href="#" class="link">
418 |                 <i class="icon f7-icons">ellipsis_vertical</i>
419 |               </a>
420 |             </div>
421 |           </div>
422 |         </div>
423 |         <div class="toolbar messagebar">
424 |           <div class="toolbar-inner">
425 |             <div class="messagebar-area">
426 |               <textarea class="resizable" style="max-height: 230px" placeholder="Message #general"></textarea>
427 |             </div>
428 |           </div>
429 |         </div>
430 |         <div class="page-content">
431 |           <div class="messages">
432 |             <div class="messages-day">
433 |               <div class="messages-title"><span>January 20th, 2019</span></div>
434 |               <div class="message message-received">
435 |                 <div class="message-avatar" style="background-image:url(https://cdn.framework7.io/placeholder/people-100x100-1.jpg)"></div>
436 |                 <div class="message-content">
437 |                   <div class="message-name">jane <span>15:35</span></div>
438 |                   <div class="message-bubble">
439 |                     <div class="message-text">Hey, how are you doing!</div>
440 |                   </div>
441 |                 </div>
442 |               </div>
443 |               <div class="message message-received">
444 |                 <div class="message-avatar" style="background-image:url(https://cdn.framework7.io/placeholder/people-100x100-9.jpg)"></div>
445 |                 <div class="message-content">
446 |                   <div class="message-name">kate <span>16:20</span></div>
447 |                   <div class="message-bubble">
448 |                     <div class="message-text">Hi, I am good!</div>
449 |                   </div>
450 |                 </div>
451 |               </div>
452 |               <div class="message message-received">
453 |                 <div class="message-avatar" style="background-image:url(https://cdn.framework7.io/placeholder/people-100x100-1.jpg)"></div>
454 |                 <div class="message-content">
455 |                   <div class="message-name">jane <span>18:59</span></div>
456 |                   <div class="message-bubble">
457 |                     <div class="message-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ullamcorper felis non orci sagittis, id malesuada mauris scelerisque. Morbi elementum augue velit. Sed venenatis nec enim at vestibulum. Sed mollis euismod nunc, sed pulvinar orci. Pellentesque eu sollicitudin lectus, vel sodales ligula. Aliquam varius neque vel dignissim pellentesque. Nam vulputate hendrerit faucibus. Sed a blandit nulla. Donec eget metus turpis.</div>
458 |                   </div>
459 |                 </div>
460 |               </div>
461 |               <div class="message message-received">
462 |                 <div class="message-avatar" style="background-image:url(https://cdn.framework7.io/placeholder/people-100x100-9.jpg)"></div>
463 |                 <div class="message-content">
464 |                   <div class="message-name">kate <span>19:30</span></div>
465 |                   <div class="message-bubble">
466 |                     <div class="message-text">Awesome 👍</div>
467 |                   </div>
468 |                 </div>
469 |               </div>
470 |               <div class="message message-received">
471 |                 <div class="message-avatar" style="background-image:url(https://cdn.framework7.io/placeholder/people-100x100-1.jpg)"></div>
472 |                 <div class="message-content">
473 |                   <div class="message-name">jane <span>20:00</span></div>
474 |                   <div class="message-bubble">
475 |                     <div class="message-text">Donec dignissim vitae risus vel efficitur. Praesent condimentum dui id metus vulputate, a fringilla felis dapibus. Donec ante quam, pulvinar quis arcu nec, posuere convallis odio.</div>
476 |                   </div>
477 |                 </div>
478 |               </div>
479 |               <div class="message message-received">
480 |                 <div class="message-avatar" style="background-image:url(https://cdn.framework7.io/placeholder/people-100x100-9.jpg)"></div>
481 |                 <div class="message-content">
482 |                   <div class="message-name">kate <span>21:12</span></div>
483 |                   <div class="message-bubble">
484 |                     <div class="message-text">Vestibulum sit amet erat id tortor eleifend pellentesque molestie nec metus. Integer tincidunt euismod fermentum. Suspendisse nec aliquam lorem, quis imperdiet velit</div>
485 |                   </div>
486 |                 </div>
487 |               </div>
488 |             </div>
489 | 
490 | 
491 |             <div class="messages-day">
492 |               <div class="messages-title"><span>January 21th, 2019</span></div>
493 |               <div class="message message-received">
494 |                 <div class="message-avatar" style="background-image:url(https://cdn.framework7.io/placeholder/people-100x100-1.jpg)"></div>
495 |                 <div class="message-content">
496 |                   <div class="message-name">jane <span>11:11</span></div>
497 |                   <div class="message-bubble">
498 |                     <div class="message-text">Ut eu finibus justo. Quisque gravida laoreet nisl ut laoreet. Sed luctus vel arcu sed blandit. In hac habitasse platea dictumst. Nulla facilisi. Vestibulum consectetur in arcu in varius. Duis finibus felis quam. Morbi elementum lorem pretium ante blandit, eu cursus leo efficitur. Nam semper sapien id sapien venenatis ultricies. Nunc rhoncus dui id arcu tempor, vel sagittis nibh congue. Cras ex arcu, elementum mollis consequat id, volutpat non augue. Nulla aliquam diam a eros molestie, id sagittis enim lacinia. Phasellus congue id diam et tincidunt.</div>
499 |                   </div>
500 |                 </div>
501 |               </div>
502 |               <div class="message message-received">
503 |                 <div class="message-avatar" style="background-image:url(https://cdn.framework7.io/placeholder/people-100x100-9.jpg)"></div>
504 |                 <div class="message-content">
505 |                   <div class="message-name">kate <span>12:55</span></div>
506 |                   <div class="message-bubble">
507 |                     <div class="message-text">Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec rhoncus pulvinar eros vel placerat. Vestibulum porta, nulla sit amet suscipit eleifend, orci lacus condimentum eros, vulputate sagittis ante nisl eget quam. Sed felis sapien, lobortis in libero nec, viverra luctus ipsum. Mauris massa quam, gravida et eros ut, vestibulum elementum tortor. Nunc auctor convallis elit, vestibulum tincidunt massa aliquam et.</div>
508 |                   </div>
509 |                 </div>
510 |               </div>
511 |               <div class="message message-received">
512 |                 <div class="message-avatar" style="background-image:url(https://cdn.framework7.io/placeholder/people-100x100-1.jpg)"></div>
513 |                 <div class="message-content">
514 |                   <div class="message-name">jane <span>16:00</span></div>
515 |                   <div class="message-bubble">
516 |                     <div class="message-text">Morbi id tellus ultrices, facilisis mauris non, accumsan nibh. Vestibulum sit amet erat id tortor eleifend pellentesque molestie nec metus. Integer tincidunt euismod fermentum. Suspendisse nec aliquam lorem, quis imperdiet velit. Vestibulum id diam gravida, malesuada lorem sit amet, gravida odio. Sed quis nibh non diam mollis ullamcorper malesuada ut ligula.</div>
517 |                   </div>
518 |                 </div>
519 |               </div>
520 |               <div class="message message-received">
521 |                 <div class="message-avatar" style="background-image:url(https://cdn.framework7.io/placeholder/people-100x100-9.jpg)"></div>
522 |                 <div class="message-content">
523 |                   <div class="message-name">kate <span>12:55</span></div>
524 |                   <div class="message-bubble">
525 |                     <div class="message-text">Duis finibus felis quam. Morbi elementum lorem pretium ante blandit, eu cursus leo efficitur. Nam semper sapien id sapien venenatis ultricies. Nunc rhoncus dui id arcu tempor, vel sagittis nibh congue. Cras ex arcu, elementum mollis consequat id, volutpat non augue. Nulla aliquam diam a eros molestie, id sagittis enim lacinia. Phasellus congue id diam et tincidunt.</div>
526 |                   </div>
527 |                 </div>
528 |               </div>
529 |             </div>
530 |           </div>
531 |         </div>
532 |       </div>
533 |     </div>
534 | 
535 | 
536 |   </div>
537 |   <script src="https://unpkg.com/framework7/framework7-bundle.min.js"></script>
538 |   <script>
539 |     const app = new Framework7({
540 |       el: '#app',
541 |       theme: 'aurora',
542 |       routes: [
543 |         {
544 |           path: '/',
545 |           master: true,
546 |           url: './index.html',
547 |         },
548 |       ],
549 |       navbar: {
550 |         auroraCenterTitle: false,
551 |       }
552 |     });
553 |     const messages = app.messages.create({
554 |       el: '.messages',
555 |       firstMessageRule: function (message, previousMessage, nextMessage) {
556 |         if (message.isTitle) return false;
557 |         if (!previousMessage || previousMessage.type !== message.type || previousMessage.name !== message.name) return true;
558 |         return false;
559 |       },
560 |       lastMessageRule: function (message, previousMessage, nextMessage) {
561 |         if (message.isTitle) return false;
562 |         if (!nextMessage || nextMessage.type !== message.type || nextMessage.name !== message.name) return true;
563 |         return false;
564 |       },
565 |       tailMessageRule: function (message, previousMessage, nextMessage) {
566 |         if (message.isTitle) return false;
567 |         if (!nextMessage || nextMessage.type !== message.type || nextMessage.name !== message.name) return true;
568 |         return false;
569 |       }
570 |     });
571 |   </script>
572 | </body>
573 | </html>
574 | 


--------------------------------------------------------------------------------
/whatsapp-desktop/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | 
  4 | <head>
  5 |   <meta charset="UTF-8">
  6 |   <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, viewport-fit=cover">
  7 |   <meta name="apple-mobile-web-app-capable" content="yes">
  8 |   <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
  9 |   <meta name="theme-color" content="#2196f3">
 10 |   <meta http-equiv="Content-Security-Policy" content="default-src * 'self' 'unsafe-inline' 'unsafe-eval' data:">
 11 |   <title>Whatsapp</title>
 12 |   <link rel="icon" href="https://static.whatsapp.net/rsrc.php/v3/yP/r/rYZqPCBaG70.png">
 13 |   <link rel="stylesheet" href="https://unpkg.com/framework7/framework7-bundle.min.css">
 14 |   <link rel="stylesheet" href="https://unpkg.com/framework7-icons">
 15 |   <style>
 16 |     :root {
 17 | 
 18 |       --f7-navbar-height: 60px;
 19 |       /* --f7-searchbar-height: 50px; */
 20 |     }
 21 |     .panel-left {
 22 |       --f7-panel-width: 30%;
 23 |       min-width: 250px;
 24 |     }
 25 |     .navbar {
 26 |       --f7-navbar-bg-color: #EEE;
 27 |       --f7-navbar-text-color: #5C5C5C;
 28 |       --f7-navbar-border-color: #D7D0CA;
 29 |       --f7-navbar-link-color: var(--f7-navbar-text-color);
 30 |     }
 31 | 
 32 |     .navbar img {
 33 |       width: 40px;
 34 |       border-radius: 20px;
 35 |     }
 36 |     .navbar .icon {
 37 |       font-size: 28px;
 38 |     }
 39 |     .aurora .navbar .right a + a {
 40 |       margin-left: 15px;
 41 |     }
 42 |     .panel-left {
 43 |       border-right: 1px solid #D7D0CA;
 44 |     }
 45 |     .panel-left .page-content {
 46 |       --f7-page-navbar-offset: 60px;
 47 |     }
 48 |     .select-chat-page {
 49 |       --f7-list-margin-vertical: 0px;
 50 |       /* --f7-bars-bg-color: #FFF; */
 51 |       --f7-page-bg-color: #FFF;
 52 |       --f7-bars-border-color: transparent;
 53 |       --f7-navbar-font-size: 18px;
 54 |       --f7-navbar-title-font-weight: bold;
 55 | 
 56 |       --f7-searchbar-in-page-content-input-border-radius: 25px;
 57 |       --f7-searchbar-inner-padding-left: 15px;
 58 |       --f7-searchbar-inner-padding-right: 15px;
 59 |       --f7-searchbar-input-height: 35px;
 60 |       --f7-searchbar-input-border-radius: 18px;
 61 |       --f7-searchbar-height: 48px;
 62 |       --f7-searchbar-bg-color: #F8F8F8;
 63 |       --f7-searchbar-input-bg-color: #FFF;
 64 |       --f7-searchbar-input-text-color: #666;
 65 | 
 66 |       --f7-list-bg-color: transparent;
 67 |       --f7-list-border-color: #ebebeb;
 68 |       --f7-list-item-border-color: #ebebeb;
 69 | 
 70 |       --f7-list-item-min-height: 72px;
 71 |       --f7-list-item-title-text-color: #474747;
 72 |       --f7-list-item-subtitle-text-color: #666;
 73 |       --f7-list-item-after-text-color: #666;
 74 |       --f7-list-item-title-font-size: 16px;
 75 |       --f7-list-link-pressed-bg-color: rgba(0,0,0,0.2);
 76 |       --f7-list-link-hover-bg-color: rgb(235,235,235);
 77 |       --f7-list-media-item-padding-vertical: 12px;
 78 |       color: rgba(255,255,255,0.7);
 79 |     }
 80 |     .select-chat-page img {
 81 |       width: 48px;
 82 |       border-radius: 24px;
 83 |     }
 84 |     .select-chat-page .chat-menu-icon {
 85 |       display: none;
 86 |     }
 87 |     .select-chat-page .item-subtitle .text-container {
 88 |       overflow: hidden;
 89 |       white-space: nowrap;
 90 |       max-width: 100%;
 91 |       text-overflow: ellipsis;
 92 |       display: inline-block;
 93 |     }
 94 |     .select-chat-page .item-link:hover .item-subtitle .text-container {
 95 |       max-width: calc(100% - 15px);
 96 |     }
 97 | 
 98 |     .select-chat-page .item-link:hover .chat-menu-icon {
 99 |       display: inline-block;
100 |       position: absolute;
101 |       right: 0px;
102 |     }
103 | 
104 |     .chat-page {
105 |       --f7-page-bg-color: #e5ddd5;
106 |       --f7-navbar-subtitle-text-align: left;
107 |       --f7-navbar-title-margin-left: 15px;
108 | 
109 |       --f7-messagebar-height: 60px;
110 |       --f7-messagebar-bg-color: #EEE;
111 |       --f7-messagebar-textarea-bg-color: #fff;
112 |       --f7-messagebar-textarea-height: 48px;
113 |       --f7-messagebar-textarea-border-radius: 24px;
114 |       --f7-messagebar-textarea-font-size: 16px;
115 |       --f7-messagebar-textarea-line-height: 40px;
116 |       --f7-messagebar-textarea-border: none;
117 | 
118 |       --f7-messages-content-bg-color: transparent;
119 |       --f7-message-sent-bg-color: #dcf8c6;
120 |       --f7-message-sent-text-color: #262626;
121 |       --f7-message-received-bg-color: #fff;
122 |       --f7-message-received-text-color: #262626;
123 |       --f7-message-bubble-border-radius: 8px;
124 |       --f7-message-bubble-font-size: 14px;
125 | 
126 |       background-image: url('whatsapp-bg.png');
127 |       background-position: center;
128 |       background-size: contain;
129 |     }
130 | 
131 |     .emoji-container{
132 |       padding-right: 20px;
133 |       padding-left: 10px;
134 |     }
135 | 
136 |     .emoji-container .icon,
137 |     .send-message-container .icon {
138 |       font-size: 25px;
139 |       color: #525b60;
140 |     }
141 | 
142 |     .send-message-container {
143 |       padding-right: 10px;
144 |       padding-left: 20px;
145 |     }
146 | 
147 | 
148 |     .messagebar textarea::placeholder {
149 |       color: #b6b6b6;
150 |     }
151 | 
152 |     .chat-page .message-bubble {
153 |       min-height: 35px;
154 |     }
155 |   </style>
156 | </head>
157 | 
158 | <body>
159 |   <div id="app">
160 |     <div class="panel panel-left panel-reveal panel-init" data-visible-breakpoint="1">
161 |       <div class="view view-init">
162 |         <div class="page select-chat-page">
163 |           <div class="navbar">
164 |             <div class="navbar-bg"></div>
165 |             <div class="navbar-inner">
166 |               <div class="left">
167 |                 <img src="https://cdn.framework7.io/placeholder/people-100x100-1.jpg" alt="profile img">
168 |               </div>
169 |               <div class="right">
170 |                 <a href="#" class="link">
171 |                   <i class="icon f7-icons">arrow_clockwise</i>
172 |                 </a>
173 |                 <a href="#" class="link">
174 |                   <i class="icon f7-icons">plus</i>
175 |                 </a>
176 |                 <a href="#" class="link">
177 |                   <i class="icon f7-icons">ellipsis_fill</i>
178 |                 </a>
179 |               </div>
180 |             </div>
181 |           </div>
182 |           <div class="searchbar">
183 |             <div class="searchbar-inner">
184 |               <div class="searchbar-input-wrap">
185 |                 <input type="text" placeholder="Buscar o empezar un chat nuevo">
186 |                 <i class="searchbar-icon"></i>
187 |                 <span class="input-clear-button"></span>
188 |               </div>
189 |             </div>
190 |           </div>
191 |           <div class="page-content">
192 |             <div class="list media-list no-chevron">
193 |               <ul>
194 |                 <li>
195 |                   <a href="#" class="item-link item-content">
196 |                     <div class="item-media"><img src="https://cdn.framework7.io/placeholder/people-100x100-2.jpg" width="50" /></div>
197 |                     <div class="item-inner">
198 |                       <div class="item-title-row">
199 |                         <div class="item-title">Some chat</div>
200 |                         <div class="item-after">20:30</div>
201 |                       </div>
202 |                       <div class="item-subtitle">
203 |                         <div class='text-container'>
204 |                           User: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin quis rhoncus ante.
205 |                           Nullam tristique sit amet eros in ullamcorper
206 |                         </div>
207 |                         <i class="icon f7-icons chat-menu-icon">chevron_down</i>
208 |                       </div>
209 |                     </div>
210 |                   </a>
211 |                 </li>
212 |                 <li>
213 |                   <a href="#" class="item-link item-content">
214 |                     <div class="item-media"><img src="https://cdn.framework7.io/placeholder/people-100x100-3.jpg" width="40" /></div>
215 |                     <div class="item-inner">
216 |                       <div class="item-title-row">
217 |                         <div class="item-title">Some chat</div>
218 |                         <div class="item-after">20:30</div>
219 |                       </div>
220 |                       <div class="item-subtitle">
221 |                         <div class='text-container'>
222 |                           User: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin quis rhoncus ante.
223 |                           Nullam tristique sit amet eros in ullamcorper
224 |                         </div>
225 |                         <i class="icon f7-icons chat-menu-icon">chevron_down</i>
226 |                       </div>
227 |                     </div>
228 |                   </a>
229 |                 </li>
230 |                 <li>
231 |                   <a href="#" class="item-link item-content">
232 |                     <div class="item-media"><img src="https://cdn.framework7.io/placeholder/people-100x100-4.jpg" width="40" /></div>
233 |                     <div class="item-inner">
234 |                       <div class="item-title-row">
235 |                         <div class="item-title">Some chat</div>
236 |                         <div class="item-after">20:30</div>
237 |                       </div>
238 |                       <div class="item-subtitle">
239 |                         <div class='text-container'>
240 |                           User: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin quis rhoncus ante.
241 |                           Nullam tristique sit amet eros in ullamcorper
242 |                         </div>
243 |                         <i class="icon f7-icons chat-menu-icon">chevron_down</i>
244 |                       </div>
245 |                     </div>
246 |                   </a>
247 |                 </li>
248 |                 <li>
249 |                   <a href="#" class="item-link item-content">
250 |                     <div class="item-media"><img src="https://cdn.framework7.io/placeholder/people-100x100-5.jpg" width="40" /></div>
251 |                     <div class="item-inner">
252 |                       <div class="item-title-row">
253 |                         <div class="item-title">Some chat</div>
254 |                         <div class="item-after">20:30</div>
255 |                       </div>
256 |                       <div class="item-subtitle">
257 |                         <div class='text-container'>
258 |                           User: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin quis rhoncus ante.
259 |                           Nullam tristique sit amet eros in ullamcorper
260 |                         </div>
261 |                         <i class="icon f7-icons chat-menu-icon">chevron_down</i>
262 |                       </div>
263 |                     </div>
264 |                   </a>
265 |                 </li>
266 |                 <li>
267 |                   <a href="#" class="item-link item-content">
268 |                     <div class="item-media"><img src="https://cdn.framework7.io/placeholder/people-100x100-6.jpg" width="50" /></div>
269 |                     <div class="item-inner">
270 |                       <div class="item-title-row">
271 |                         <div class="item-title">Some chat</div>
272 |                         <div class="item-after">20:30</div>
273 |                       </div>
274 |                       <div class="item-subtitle">
275 |                         <div class='text-container'>
276 |                           User: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin quis rhoncus ante.
277 |                           Nullam tristique sit amet eros in ullamcorper
278 |                         </div>
279 |                         <i class="icon f7-icons chat-menu-icon">chevron_down</i>
280 |                       </div>
281 |                     </div>
282 |                   </a>
283 |                 </li>
284 |                 <li>
285 |                   <a href="#" class="item-link item-content">
286 |                     <div class="item-media"><img src="https://cdn.framework7.io/placeholder/people-100x100-7.jpg" width="40" /></div>
287 |                     <div class="item-inner">
288 |                       <div class="item-title-row">
289 |                         <div class="item-title">Some chat</div>
290 |                         <div class="item-after">20:30</div>
291 |                       </div>
292 |                       <div class="item-subtitle">
293 |                         <div class='text-container'>
294 |                           User: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin quis rhoncus ante.
295 |                           Nullam tristique sit amet eros in ullamcorper
296 |                         </div>
297 |                         <i class="icon f7-icons chat-menu-icon">chevron_down</i>
298 |                       </div>
299 |                     </div>
300 |                   </a>
301 |                 </li>
302 |                 <li>
303 |                   <a href="#" class="item-link item-content">
304 |                     <div class="item-media"><img src="https://cdn.framework7.io/placeholder/people-100x100-8.jpg" width="40" /></div>
305 |                     <div class="item-inner">
306 |                       <div class="item-title-row">
307 |                         <div class="item-title">Some chat</div>
308 |                         <div class="item-after">20:30</div>
309 |                       </div>
310 |                       <div class="item-subtitle">
311 |                         <div class='text-container'>
312 |                           User: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin quis rhoncus ante.
313 |                           Nullam tristique sit amet eros in ullamcorper
314 |                         </div>
315 |                         <i class="icon f7-icons chat-menu-icon">chevron_down</i>
316 |                       </div>
317 |                     </div>
318 |                   </a>
319 |                 </li>
320 |                 <li>
321 |                   <a href="#" class="item-link item-content">
322 |                     <div class="item-media"><img src="https://cdn.framework7.io/placeholder/people-100x100-9.jpg" width="40" /></div>
323 |                     <div class="item-inner">
324 |                       <div class="item-title-row">
325 |                         <div class="item-title">Some chat</div>
326 |                         <div class="item-after">20:30</div>
327 |                       </div>
328 |                       <div class="item-subtitle">
329 |                         <div class='text-container'>
330 |                           User: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin quis rhoncus ante.
331 |                           Nullam tristique sit amet eros in ullamcorper
332 |                         </div>
333 |                         <i class="icon f7-icons chat-menu-icon">chevron_down</i>
334 |                       </div>
335 |                     </div>
336 |                   </a>
337 |                 </li>
338 |                 <li>
339 |                   <a href="#" class="item-link item-content">
340 |                     <div class="item-media"><img src="https://cdn.framework7.io/placeholder/people-100x100-10.jpg"
341 |                         width="50" /></div>
342 |                     <div class="item-inner">
343 |                       <div class="item-title-row">
344 |                         <div class="item-title">Some chat</div>
345 |                         <div class="item-after">20:30</div>
346 |                       </div>
347 |                       <div class="item-subtitle">
348 |                         <div class='text-container'>
349 |                           User: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin quis rhoncus ante.
350 |                           Nullam tristique sit amet eros in ullamcorper
351 |                         </div>
352 |                         <i class="icon f7-icons chat-menu-icon">chevron_down</i>
353 |                       </div>
354 |                     </div>
355 |                   </a>
356 |                 </li>
357 |                 <li>
358 |                   <a href="#" class="item-link item-content">
359 |                     <div class="item-media"><img src="https://cdn.framework7.io/placeholder/people-100x100-1.jpg" width="40" /></div>
360 |                     <div class="item-inner">
361 |                       <div class="item-title-row">
362 |                         <div class="item-title">Some chat</div>
363 |                         <div class="item-after">20:30</div>
364 |                       </div>
365 |                       <div class="item-subtitle">
366 |                         <div class='text-container'>
367 |                           User: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin quis rhoncus ante.
368 |                           Nullam tristique sit amet eros in ullamcorper
369 |                         </div>
370 |                         <i class="icon f7-icons chat-menu-icon">chevron_down</i>
371 |                       </div>
372 |                     </div>
373 |                   </a>
374 |                 </li>
375 |                 <li>
376 |                   <a href="#" class="item-link item-content">
377 |                     <div class="item-media"><img src="https://cdn.framework7.io/placeholder/people-100x100-2.jpg" width="40" /></div>
378 |                     <div class="item-inner">
379 |                       <div class="item-title-row">
380 |                         <div class="item-title">Some chat</div>
381 |                         <div class="item-after">20:30</div>
382 |                       </div>
383 |                       <div class="item-subtitle">
384 |                         <div class='text-container'>
385 |                           User: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin quis rhoncus ante.
386 |                           Nullam tristique sit amet eros in ullamcorper
387 |                         </div>
388 |                         <i class="icon f7-icons chat-menu-icon">chevron_down</i>
389 |                       </div>
390 |                     </div>
391 |                   </a>
392 |                 </li>
393 |                 <li>
394 |                   <a href="#" class="item-link item-content">
395 |                     <div class="item-media"><img src="https://cdn.framework7.io/placeholder/people-100x100-3.jpg" width="40" /></div>
396 |                     <div class="item-inner">
397 |                       <div class="item-title-row">
398 |                         <div class="item-title">Some chat</div>
399 |                         <div class="item-after">20:30</div>
400 |                       </div>
401 |                       <div class="item-subtitle">
402 |                         <div class='text-container'>
403 |                           User: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin quis rhoncus ante.
404 |                           Nullam tristique sit amet eros in ullamcorper
405 |                         </div>
406 |                         <i class="icon f7-icons chat-menu-icon">chevron_down</i>
407 |                       </div>
408 |                     </div>
409 |                   </a>
410 |                 </li>
411 |                 <li>
412 |                   <a href="#" class="item-link item-content">
413 |                     <div class="item-media"><img src="https://cdn.framework7.io/placeholder/people-100x100-4.jpg" width="50" /></div>
414 |                     <div class="item-inner">
415 |                       <div class="item-title-row">
416 |                         <div class="item-title">Some chat</div>
417 |                         <div class="item-after">20:30</div>
418 |                       </div>
419 |                       <div class="item-subtitle">
420 |                         <div class='text-container'>
421 |                           User: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin quis rhoncus ante.
422 |                           Nullam tristique sit amet eros in ullamcorper
423 |                         </div>
424 |                         <i class="icon f7-icons chat-menu-icon">chevron_down</i>
425 |                       </div>
426 |                     </div>
427 |                   </a>
428 |                 </li>
429 |                 <li>
430 |                   <a href="#" class="item-link item-content">
431 |                     <div class="item-media"><img src="https://cdn.framework7.io/placeholder/people-100x100-5.jpg" width="40" /></div>
432 |                     <div class="item-inner">
433 |                       <div class="item-title-row">
434 |                         <div class="item-title">Some chat</div>
435 |                         <div class="item-after">20:30</div>
436 |                       </div>
437 |                       <div class="item-subtitle">
438 |                         <div class='text-container'>
439 |                           User: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin quis rhoncus ante.
440 |                           Nullam tristique sit amet eros in ullamcorper
441 |                         </div>
442 |                         <i class="icon f7-icons chat-menu-icon">chevron_down</i>
443 |                       </div>
444 |                     </div>
445 |                   </a>
446 |                 </li>
447 |                 <li>
448 |                   <a href="#" class="item-link item-content">
449 |                     <div class="item-media"><img src="https://cdn.framework7.io/placeholder/people-100x100-6.jpg" width="40" /></div>
450 |                     <div class="item-inner">
451 |                       <div class="item-title-row">
452 |                         <div class="item-title">Some chat</div>
453 |                         <div class="item-after">20:30</div>
454 |                       </div>
455 |                       <div class="item-subtitle">
456 |                         <div class='text-container'>
457 |                           User: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin quis rhoncus ante.
458 |                           Nullam tristique sit amet eros in ullamcorper
459 |                         </div>
460 |                         <i class="icon f7-icons chat-menu-icon">chevron_down</i>
461 |                       </div>
462 |                     </div>
463 |                   </a>
464 |                 </li>
465 |                 <li>
466 |                   <a href="#" class="item-link item-content">
467 |                     <div class="item-media"><img src="https://cdn.framework7.io/placeholder/people-100x100-7.jpg" width="40" /></div>
468 |                     <div class="item-inner">
469 |                       <div class="item-title-row">
470 |                         <div class="item-title">Some chat</div>
471 |                         <div class="item-after">20:30</div>
472 |                       </div>
473 |                       <div class="item-subtitle">
474 |                         <div class='text-container'>
475 |                           User: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin quis rhoncus ante.
476 |                           Nullam tristique sit amet eros in ullamcorper
477 |                         </div>
478 |                         <i class="icon f7-icons chat-menu-icon">chevron_down</i>
479 |                       </div>
480 |                     </div>
481 |                   </a>
482 |                 </li>
483 |                 <li>
484 |                   <a href="#" class="item-link item-content">
485 |                     <div class="item-media"><img src="https://cdn.framework7.io/placeholder/people-100x100-8.jpg" width="50" /></div>
486 |                     <div class="item-inner">
487 |                       <div class="item-title-row">
488 |                         <div class="item-title">Some chat</div>
489 |                         <div class="item-after">20:30</div>
490 |                       </div>
491 |                       <div class="item-subtitle">
492 |                         <div class='text-container'>
493 |                           User: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin quis rhoncus ante.
494 |                           Nullam tristique sit amet eros in ullamcorper
495 |                         </div>
496 |                         <i class="icon f7-icons chat-menu-icon">chevron_down</i>
497 |                       </div>
498 |                     </div>
499 |                   </a>
500 |                 </li>
501 |                 <li>
502 |                   <a href="#" class="item-link item-content">
503 |                     <div class="item-media"><img src="https://cdn.framework7.io/placeholder/people-100x100-9.jpg" width="40" /></div>
504 |                     <div class="item-inner">
505 |                       <div class="item-title-row">
506 |                         <div class="item-title">Some chat</div>
507 |                         <div class="item-after">20:30</div>
508 |                       </div>
509 |                       <div class="item-subtitle">
510 |                         <div class='text-container'>
511 |                           User: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin quis rhoncus ante.
512 |                           Nullam tristique sit amet eros in ullamcorper
513 |                         </div>
514 |                         <i class="icon f7-icons chat-menu-icon">chevron_down</i>
515 |                       </div>
516 |                     </div>
517 |                   </a>
518 |                 </li>
519 |                 <li>
520 |                   <a href="#" class="item-link item-content">
521 |                     <div class="item-media"><img src="https://cdn.framework7.io/placeholder/people-100x100-10.jpg"
522 |                         width="40" /></div>
523 |                     <div class="item-inner">
524 |                       <div class="item-title-row">
525 |                         <div class="item-title">Some chat</div>
526 |                         <div class="item-after">20:30</div>
527 |                       </div>
528 |                       <div class="item-subtitle">
529 |                         <div class='text-container'>
530 |                           User: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin quis rhoncus ante.
531 |                           Nullam tristique sit amet eros in ullamcorper
532 |                         </div>
533 |                         <i class="icon f7-icons chat-menu-icon">chevron_down</i>
534 |                       </div>
535 |                     </div>
536 |                   </a>
537 |                 </li>
538 |                 <li>
539 |                   <a href="#" class="item-link item-content">
540 |                     <div class="item-media"><img src="https://cdn.framework7.io/placeholder/people-100x100-1.jpg" width="40" /></div>
541 |                     <div class="item-inner">
542 |                       <div class="item-title-row">
543 |                         <div class="item-title">Some chat</div>
544 |                         <div class="item-after">20:30</div>
545 |                       </div>
546 |                       <div class="item-subtitle">
547 |                         <div class='text-container'>
548 |                           User: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin quis rhoncus ante.
549 |                           Nullam tristique sit amet eros in ullamcorper
550 |                         </div>
551 |                         <i class="icon f7-icons chat-menu-icon">chevron_down</i>
552 |                       </div>
553 |                     </div>
554 |                   </a>
555 |                 </li>
556 |                 <li>
557 |                   <a href="#" class="item-link item-content">
558 |                     <div class="item-media"><img src="https://cdn.framework7.io/placeholder/people-100x100-2.jpg" width="50" /></div>
559 |                     <div class="item-inner">
560 |                       <div class="item-title-row">
561 |                         <div class="item-title">Some chat</div>
562 |                         <div class="item-after">20:30</div>
563 |                       </div>
564 |                       <div class="item-subtitle">
565 |                         <div class='text-container'>
566 |                           User: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin quis rhoncus ante.
567 |                           Nullam tristique sit amet eros in ullamcorper
568 |                         </div>
569 |                         <i class="icon f7-icons chat-menu-icon">chevron_down</i>
570 |                       </div>
571 |                     </div>
572 |                   </a>
573 |                 </li>
574 |                 <li>
575 |                   <a href="#" class="item-link item-content">
576 |                     <div class="item-media"><img src="https://cdn.framework7.io/placeholder/people-100x100-3.jpg" width="40" /></div>
577 |                     <div class="item-inner">
578 |                       <div class="item-title-row">
579 |                         <div class="item-title">Some chat</div>
580 |                         <div class="item-after">20:30</div>
581 |                       </div>
582 |                       <div class="item-subtitle">
583 |                         <div class='text-container'>
584 |                           User: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin quis rhoncus ante.
585 |                           Nullam tristique sit amet eros in ullamcorper
586 |                         </div>
587 |                         <i class="icon f7-icons chat-menu-icon">chevron_down</i>
588 |                       </div>
589 |                     </div>
590 |                   </a>
591 |                 </li>
592 |                 <li>
593 |                   <a href="#" class="item-link item-content">
594 |                     <div class="item-media"><img src="https://cdn.framework7.io/placeholder/people-100x100-4.jpg" width="40" /></div>
595 |                     <div class="item-inner">
596 |                       <div class="item-title-row">
597 |                         <div class="item-title">Some chat</div>
598 |                         <div class="item-after">20:30</div>
599 |                       </div>
600 |                       <div class="item-subtitle">
601 |                         <div class='text-container'>
602 |                           User: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin quis rhoncus ante.
603 |                           Nullam tristique sit amet eros in ullamcorper
604 |                         </div>
605 |                         <i class="icon f7-icons chat-menu-icon">chevron_down</i>
606 |                       </div>
607 |                     </div>
608 |                   </a>
609 |                 </li>
610 |                 <li>
611 |                   <a href="#" class="item-link item-content">
612 |                     <div class="item-media"><img src="https://cdn.framework7.io/placeholder/people-100x100-5.jpg" width="40" /></div>
613 |                     <div class="item-inner">
614 |                       <div class="item-title-row">
615 |                         <div class="item-title">Some chat</div>
616 |                         <div class="item-after">20:30</div>
617 |                       </div>
618 |                       <div class="item-subtitle">
619 |                         <div class='text-container'>
620 |                           User: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin quis rhoncus ante.
621 |                           Nullam tristique sit amet eros in ullamcorper
622 |                         </div>
623 |                         <i class="icon f7-icons chat-menu-icon">chevron_down</i>
624 |                       </div>
625 |                     </div>
626 |                   </a>
627 |                 </li>
628 |                 <li>
629 |                   <a href="#" class="item-link item-content">
630 |                     <div class="item-media"><img src="https://cdn.framework7.io/placeholder/people-100x100-6.jpg" width="50" /></div>
631 |                     <div class="item-inner">
632 |                       <div class="item-title-row">
633 |                         <div class="item-title">Some chat</div>
634 |                         <div class="item-after">20:30</div>
635 |                       </div>
636 |                       <div class="item-subtitle">
637 |                         <div class='text-container'>
638 |                           User: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin quis rhoncus ante.
639 |                           Nullam tristique sit amet eros in ullamcorper
640 |                         </div>
641 |                         <i class="icon f7-icons chat-menu-icon">chevron_down</i>
642 |                       </div>
643 |                     </div>
644 |                   </a>
645 |                 </li>
646 |                 <li>
647 |                   <a href="#" class="item-link item-content">
648 |                     <div class="item-media"><img src="https://cdn.framework7.io/placeholder/people-100x100-7.jpg" width="40" /></div>
649 |                     <div class="item-inner">
650 |                       <div class="item-title-row">
651 |                         <div class="item-title">Some chat</div>
652 |                         <div class="item-after">20:30</div>
653 |                       </div>
654 |                       <div class="item-subtitle">
655 |                         <div class='text-container'>
656 |                           User: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin quis rhoncus ante.
657 |                           Nullam tristique sit amet eros in ullamcorper
658 |                         </div>
659 |                         <i class="icon f7-icons chat-menu-icon">chevron_down</i>
660 |                       </div>
661 |                     </div>
662 |                   </a>
663 |                 </li>
664 |                 <li>
665 |                   <a href="#" class="item-link item-content">
666 |                     <div class="item-media"><img src="https://cdn.framework7.io/placeholder/people-100x100-8.jpg" width="40" /></div>
667 |                     <div class="item-inner">
668 |                       <div class="item-title-row">
669 |                         <div class="item-title">Some chat</div>
670 |                         <div class="item-after">20:30</div>
671 |                       </div>
672 |                       <div class="item-subtitle">
673 |                         <div class='text-container'>
674 |                           User: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin quis rhoncus ante.
675 |                           Nullam tristique sit amet eros in ullamcorper
676 |                         </div>
677 |                         <i class="icon f7-icons chat-menu-icon">chevron_down</i>
678 |                       </div>
679 |                     </div>
680 |                   </a>
681 |                 </li>
682 |                 <li>
683 |                   <a href="#" class="item-link item-content">
684 |                     <div class="item-media"><img src="https://cdn.framework7.io/placeholder/people-100x100-9.jpg" width="40" /></div>
685 |                     <div class="item-inner">
686 |                       <div class="item-title-row">
687 |                         <div class="item-title">Some chat</div>
688 |                         <div class="item-after">20:30</div>
689 |                       </div>
690 |                       <div class="item-subtitle">
691 |                         <div class='text-container'>
692 |                           User: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin quis rhoncus ante.
693 |                           Nullam tristique sit amet eros in ullamcorper
694 |                         </div>
695 |                         <i class="icon f7-icons chat-menu-icon">chevron_down</i>
696 |                       </div>
697 |                     </div>
698 |                   </a>
699 |                 </li>
700 |                 <li>
701 |                   <a href="#" class="item-link item-content">
702 |                     <div class="item-media"><img src="https://cdn.framework7.io/placeholder/people-100x100-10.jpg"
703 |                         width="50" /></div>
704 |                     <div class="item-inner">
705 |                       <div class="item-title-row">
706 |                         <div class="item-title">Some chat</div>
707 |                         <div class="item-after">20:30</div>
708 |                       </div>
709 |                       <div class="item-subtitle">
710 |                         <div class='text-container'>
711 |                           User: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin quis rhoncus ante.
712 |                           Nullam tristique sit amet eros in ullamcorper
713 |                         </div>
714 |                         <i class="icon f7-icons chat-menu-icon">chevron_down</i>
715 |                       </div>
716 |                     </div>
717 |                   </a>
718 |                 </li>
719 |                 <li>
720 |                   <a href="#" class="item-link item-content">
721 |                     <div class="item-media"><img src="https://cdn.framework7.io/placeholder/people-100x100-1.jpg" width="40" /></div>
722 |                     <div class="item-inner">
723 |                       <div class="item-title-row">
724 |                         <div class="item-title">Some chat</div>
725 |                         <div class="item-after">20:30</div>
726 |                       </div>
727 |                       <div class="item-subtitle">
728 |                         <div class='text-container'>
729 |                           User: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin quis rhoncus ante.
730 |                           Nullam tristique sit amet eros in ullamcorper
731 |                         </div>
732 |                         <i class="icon f7-icons chat-menu-icon">chevron_down</i>
733 |                       </div>
734 |                     </div>
735 |                   </a>
736 |                 </li>
737 |                 <li>
738 |                   <a href="#" class="item-link item-content">
739 |                     <div class="item-media"><img src="https://cdn.framework7.io/placeholder/people-100x100-2.jpg" width="40" /></div>
740 |                     <div class="item-inner">
741 |                       <div class="item-title-row">
742 |                         <div class="item-title">Some chat</div>
743 |                         <div class="item-after">20:30</div>
744 |                       </div>
745 |                       <div class="item-subtitle">
746 |                         <div class='text-container'>
747 |                           User: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin quis rhoncus ante.
748 |                           Nullam tristique sit amet eros in ullamcorper
749 |                         </div>
750 |                         <i class="icon f7-icons chat-menu-icon">chevron_down</i>
751 |                       </div>
752 |                     </div>
753 |                   </a>
754 |                 </li>
755 |                 <li>
756 |                   <a href="#" class="item-link item-content">
757 |                     <div class="item-media"><img src="https://cdn.framework7.io/placeholder/people-100x100-3.jpg" width="40" /></div>
758 |                     <div class="item-inner">
759 |                       <div class="item-title-row">
760 |                         <div class="item-title">Some chat</div>
761 |                         <div class="item-after">20:30</div>
762 |                       </div>
763 |                       <div class="item-subtitle">
764 |                         <div class='text-container'>
765 |                           User: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin quis rhoncus ante.
766 |                           Nullam tristique sit amet eros in ullamcorper
767 |                         </div>
768 |                         <i class="icon f7-icons chat-menu-icon">chevron_down</i>
769 |                       </div>
770 |                     </div>
771 |                   </a>
772 |                 </li>
773 | 
774 |               </ul>
775 |             </div>
776 |           </div>
777 |         </div>
778 |       </div>
779 |     </div>
780 |     <div class="view view-main view-init">
781 |       <div class="page chat-page">
782 |         <div class="navbar">
783 |             <div class="navbar-bg"></div>
784 |             <div class="navbar-inner">
785 |               <div class="left">
786 |                 <img src="https://cdn.framework7.io/placeholder/people-100x100-2.jpg" alt="profile img">
787 |                 <div class="title">
788 |                     <span>Some Chat</span>
789 |                     <div class="subtitle">
790 |                       <span class="description">en línea</span>
791 |                     </div>
792 |                   </div>
793 |               </div>
794 |               <div class="right">
795 |                 <a href="#" class="link">
796 |                   <i class="icon f7-icons">search</i>
797 |                 </a>
798 |                 <a href="#" class="link">
799 |                   <i class="icon f7-icons">paperclip</i>
800 |                 </a>
801 |                 <a href="#" class="link">
802 |                   <i class="icon f7-icons">ellipsis_fill</i>
803 |                 </a>
804 |               </div>
805 |             </div>
806 |           </div>
807 |         <div class="toolbar messagebar">
808 |           <div class="toolbar-inner">
809 |             <div class='emoji-container'>
810 |               <a href="#" class="link">
811 |                 <i class="icon f7-icons">circle</i>
812 |               </a>
813 |             </div>
814 |             <div class="messagebar-area">
815 |               <textarea class="resizable" style="max-height: 230px" placeholder="Escribe un mensaje aquí"></textarea>
816 |             </div>
817 |             <div class='send-message-container'>
818 |               <a href="#" class="link">
819 |                 <i class="icon f7-icons">paperplane</i>
820 |               </a>
821 |             </div>
822 |           </div>
823 |         </div>
824 |         <div class="page-content">
825 |           <div class="messages">
826 |             <div class="message message-sent">
827 |               <div class="message-content">
828 |                 <div class="message-bubble">
829 |                   <div class="message-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. </div>
830 |                 </div>
831 |               </div>
832 |             </div>
833 |             <div class="message message-sent">
834 |               <div class="message-content">
835 |                 <div class="message-bubble">
836 |                   <div class="message-text">Praesent pretium egestas erat, id interdum elit. Mauris convallis mattis
837 |                     felis, vel commodo mauris </div>
838 |                 </div>
839 |               </div>
840 |             </div>
841 |             <div class="message message-received">
842 |               <div class="message-content">
843 |                 <div class="message-bubble">
844 |                   <div class="message-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. </div>
845 |                 </div>
846 |               </div>
847 |             </div>
848 |             <div class="message message-received">
849 |               <div class="message-content">
850 |                 <div class="message-bubble">
851 |                   <div class="message-text">Nunc at ligula orci. Sed luctus tristique ipsum. Suspendisse augue dolor,
852 |                     hendrerit id elementum nec, condimentum non nisi. Donec et condimentum eros. Praesent bibendum
853 |                     ipsum quis tortor auctor tristique nec id elit. Donec sit amet mi risus. Proin non tincidunt purus.
854 |                     Fusce accumsan sagittis ex, non pharetra ipsum faucibus vel.</div>
855 |                 </div>
856 |               </div>
857 |             </div>
858 |           </div>
859 |         </div>
860 |       </div>
861 |     </div>
862 |   </div>
863 |   <script src="https://unpkg.com/framework7/framework7-bundle.min.js"></script>
864 |   <script>
865 |     const app = new Framework7({
866 |       el: '#app',
867 |       theme: 'aurora',
868 |       routes: [{
869 |         path: '/',
870 |         master: true
871 |       }, ],
872 |       navbar: {
873 |         iosCenterTitle: false,
874 |         auroraCenterTitle: false,
875 |       }
876 |     });
877 |     const messages = app.messages.create({
878 |       el: '.messages',
879 |       firstMessageRule: function (message, previousMessage, nextMessage) {
880 |         if (message.isTitle) return false;
881 |         if (!previousMessage || previousMessage.type !== message.type || previousMessage.name !== message.name)
882 |           return true;
883 |         return false;
884 |       },
885 |       lastMessageRule: function (message, previousMessage, nextMessage) {
886 |         if (message.isTitle) return false;
887 |         if (!nextMessage || nextMessage.type !== message.type || nextMessage.name !== message.name) return true;
888 |         return false;
889 |       },
890 |       tailMessageRule: function (message, previousMessage, nextMessage) {
891 |         if (message.isTitle) return false;
892 |         if (!nextMessage || nextMessage.type !== message.type || nextMessage.name !== message.name) return true;
893 |         return false;
894 |       }
895 |     });
896 | 
897 |   </script>
898 | </body>
899 | 
900 | </html>
901 | 


--------------------------------------------------------------------------------
/whatsapp-desktop/whatsapp-bg.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/framework7io/framework7-recipes/e88d0120bb0bee8d50205c68cfdb191c2c59b65c/whatsapp-desktop/whatsapp-bg.png


--------------------------------------------------------------------------------