OpenSource/telegram-crawler
OpenSource/telegram-crawler
1
0
Fork 0
mirror of https://github.com/MarshalX/telegram-crawler.git synced 2024-12-28 23:38:26 +01:00
Code Issues Projects Releases Packages Wiki Activity

Update content of files

Browse source
This commit is contained in:
GitHub Action 2022-04-09 12:23:56 +00:00
parent 4d1d50a457
commit 719d02940c
3 changed files with 1361 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

448
data/webappcontent.telegram.org/cafe.html Normal file
View file

@ -0,0 +1,448 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>DurgerKingBot</title>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, user-scalable=no, viewport-fit=cover" />
<meta name="format-detection" content="telephone=no" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="MobileOptimized" content="176" />
<meta name="HandheldFriendly" content="True" />
<meta name="robots" content="noindex, nofollow" />
<script src="https://tg.dev/js/telegram-webview.js?7"></script>
<script>
function setThemeClass() {
document.documentElement.className = document.documentElement.style.getPropertyValue('--tg-theme-color-scheme');
}
Telegram.WebView.onEvent('theme_changed', setThemeClass);
setThemeClass();
</script>
<link href="/css/cafe.css?13" rel="stylesheet">
</head>
<body style="display:none">
<section class="cafe-page cafe-items">
<div class="cafe-item js-item" data-item-id="1" data-item-price="4990">
<div class="cafe-item-counter js-item-counter">1</div>
<div class="cafe-item-photo">
<picture class="cafe-item-lottie js-item-lottie">
<source type="application/x-tgsticker" srcset="/img/cafe/Burger.tgs">
<img src="/img/cafe/Burger_148.png" style="background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2aWV3Qm94PSIwIDAgNTEyIDUxMiI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJnIiB4MT0iLTMwMCUiIHgyPSItMjAwJSIgeTE9IjAiIHkyPSIwIj48c3RvcCBvZmZzZXQ9Ii0xMCUiIHN0b3Atb3BhY2l0eT0iLjEiLz48c3RvcCBvZmZzZXQ9IjMwJSIgc3RvcC1vcGFjaXR5PSIuMDciLz48c3RvcCBvZmZzZXQ9IjcwJSIgc3RvcC1vcGFjaXR5PSIuMDciLz48c3RvcCBvZmZzZXQ9IjExMCUiIHN0b3Atb3BhY2l0eT0iLjEiLz48YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJ4MSIgZnJvbT0iLTMwMCUiIHRvPSIxMjAwJSIgZHVyPSIzcyIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiLz48YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJ4MiIgZnJvbT0iLTIwMCUiIHRvPSIxMzAwJSIgZHVyPSIzcyIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48cGF0aCBmaWxsPSJ1cmwoI2cpIiBkPSJNMjY4LDQ5OWMtNTEtMi0xMDYtMS0xNTMtMjItMjgtMTItMzktNDAtNDItNjgsMC00LDMtNywxLTEwLTUtNi0xNiwzLTEzLTE0LDItMTEsMTItMTQsMTEtMjcsMC0yLTUtMTItNS0xNiwwLTYsNS0xNyw0LTIyLTItNy05LTUtNi0xNSwzLTEwLDE0LTcsMTktMTMsNy0xMi0xNC0yNC0xNy0zMy0zLTEyLTEtMjgsMi0zOSwyOC0xMDEsMTQ4LTEzMywyMzktMTE1LDY0LDEzLDEzMCw1OSwxNDIsMTI3LDMsMTgsMCwzMi0xNSw0Mi0xLDEtMTEsMTMtNywxNiw0LDIsMjAsNCwyMiw5LDYsMTAtNywxNS05LDIyLTEsMywzLDExLDMsMTYsMCwyLTMsMTctMiwxOSwyLDIsOCwxLDEwLDQsMyw1LDQsMTYsNiwyMiw0LDEzLTE1LDIwLTE5LDI3LTksMjAsNSw0MC0yMyw2MC00MCwyOC0xMDEsMjktMTQ4LDMweiIvPjwvc3ZnPg==');">
</picture>
</div>
<div class="cafe-item-label">
<span class="cafe-item-title">Burger</span>
<span class="cafe-item-price">$4.99</span>
</div>
<div class="cafe-item-buttons">
<button class="cafe-item-decr-button js-item-decr-btn button-item ripple-handler">
<span class="ripple-mask"><span class="ripple"></span></span>
</button>
<button class="cafe-item-incr-button js-item-incr-btn button-item ripple-handler">
<span class="button-item-label">Add</span>
<span class="ripple-mask"><span class="ripple"></span></span>
</button>
</div>
</div> <div class="cafe-item js-item" data-item-id="2" data-item-price="1490">
<div class="cafe-item-counter js-item-counter">1</div>
<div class="cafe-item-photo">
<picture class="cafe-item-lottie js-item-lottie">
<source type="application/x-tgsticker" srcset="/img/cafe/Fries.tgs">
<img src="/img/cafe/Fries_148.png" style="background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2aWV3Qm94PSIwIDAgNTEyIDUxMiI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJnIiB4MT0iLTMwMCUiIHgyPSItMjAwJSIgeTE9IjAiIHkyPSIwIj48c3RvcCBvZmZzZXQ9Ii0xMCUiIHN0b3Atb3BhY2l0eT0iLjEiLz48c3RvcCBvZmZzZXQ9IjMwJSIgc3RvcC1vcGFjaXR5PSIuMDciLz48c3RvcCBvZmZzZXQ9IjcwJSIgc3RvcC1vcGFjaXR5PSIuMDciLz48c3RvcCBvZmZzZXQ9IjExMCUiIHN0b3Atb3BhY2l0eT0iLjEiLz48YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJ4MSIgZnJvbT0iLTMwMCUiIHRvPSIxMjAwJSIgZHVyPSIzcyIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiLz48YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJ4MiIgZnJvbT0iLTIwMCUiIHRvPSIxMzAwJSIgZHVyPSIzcyIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48cGF0aCBmaWxsPSJ1cmwoI2cpIiBkPSJNMjUwLDQ3OGMtNTcsMS04OC00LTEzNS0zNi01LTQtNS0yOS01LTM1LTEwLTY5LTE5LTEzOS0yNi0yMDktMy0yOSwxNC0xMSwzMi0zMiw3Mi04NCwxOTQtODcsMjcxLTgsNCw1LDEwLDE1LDE2LDE4LDEsMSwyNCw0LDI0LDUsNywyMS0xNiwxNjctMjEsMTk4LTEsMTEtMSw1Ni05LDYyLTUzLDM4LTg2LDM4LTE0NywzN3oiLz48L3N2Zz4=');">
</picture>
</div>
<div class="cafe-item-label">
<span class="cafe-item-title">Fries</span>
<span class="cafe-item-price">$1.49</span>
</div>
<div class="cafe-item-buttons">
<button class="cafe-item-decr-button js-item-decr-btn button-item ripple-handler">
<span class="ripple-mask"><span class="ripple"></span></span>
</button>
<button class="cafe-item-incr-button js-item-incr-btn button-item ripple-handler">
<span class="button-item-label">Add</span>
<span class="ripple-mask"><span class="ripple"></span></span>
</button>
</div>
</div> <div class="cafe-item js-item" data-item-id="3" data-item-price="3490">
<div class="cafe-item-counter js-item-counter">1</div>
<div class="cafe-item-photo">
<picture class="cafe-item-lottie js-item-lottie">
<source type="application/x-tgsticker" srcset="/img/cafe/Hotdog.tgs">
<img src="/img/cafe/Hotdog_148.png" style="background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2aWV3Qm94PSIwIDAgNTEyIDUxMiI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJnIiB4MT0iLTMwMCUiIHgyPSItMjAwJSIgeTE9IjAiIHkyPSIwIj48c3RvcCBvZmZzZXQ9Ii0xMCUiIHN0b3Atb3BhY2l0eT0iLjEiLz48c3RvcCBvZmZzZXQ9IjMwJSIgc3RvcC1vcGFjaXR5PSIuMDciLz48c3RvcCBvZmZzZXQ9IjcwJSIgc3RvcC1vcGFjaXR5PSIuMDciLz48c3RvcCBvZmZzZXQ9IjExMCUiIHN0b3Atb3BhY2l0eT0iLjEiLz48YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJ4MSIgZnJvbT0iLTMwMCUiIHRvPSIxMjAwJSIgZHVyPSIzcyIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiLz48YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJ4MiIgZnJvbT0iLTIwMCUiIHRvPSIxMzAwJSIgZHVyPSIzcyIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48cGF0aCBmaWxsPSJ1cmwoI2cpIiBkPSJNMzIwLDQ4N2MtNTgtMi0xMTAtNDAtMTUyLTc4LTU1LTQ4LTIyMC0yMzQtMTA1LTI5NCwxMS02LTEtNzcsNjUtNjcsNiwxLDI1LDgsMzEsMTIsMSwxLDIsOCwzLDksMTAsMywyMCwxLDMwLDYsNTIsMjUsODYsMTAyLDEzMCwxNDMsMzYsMzYsMTAwLDY0LDEyNywxMDQsMTIsMTgsNSwzNSwxMCw1Myw1LDE5LDE0LDMwLDQsNTEtMjQsNDktNjgsMTUtNzYsMTktNSwzLTQsMTAtNywxNC0xNCwyMC0zNywyOC02MCwyOHoiLz48L3N2Zz4=');">
</picture>
</div>
<div class="cafe-item-label">
<span class="cafe-item-title">Hotdog</span>
<span class="cafe-item-price">$3.49</span>
</div>
<div class="cafe-item-buttons">
<button class="cafe-item-decr-button js-item-decr-btn button-item ripple-handler">
<span class="ripple-mask"><span class="ripple"></span></span>
</button>
<button class="cafe-item-incr-button js-item-incr-btn button-item ripple-handler">
<span class="button-item-label">Add</span>
<span class="ripple-mask"><span class="ripple"></span></span>
</button>
</div>
</div> <div class="cafe-item js-item" data-item-id="4" data-item-price="3990">
<div class="cafe-item-counter js-item-counter">1</div>
<div class="cafe-item-photo">
<picture class="cafe-item-lottie js-item-lottie">
<source type="application/x-tgsticker" srcset="/img/cafe/Tako.tgs">
<img src="/img/cafe/Tako_148.png" style="background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2aWV3Qm94PSIwIDAgNTEyIDUxMiI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJnIiB4MT0iLTMwMCUiIHgyPSItMjAwJSIgeTE9IjAiIHkyPSIwIj48c3RvcCBvZmZzZXQ9Ii0xMCUiIHN0b3Atb3BhY2l0eT0iLjEiLz48c3RvcCBvZmZzZXQ9IjMwJSIgc3RvcC1vcGFjaXR5PSIuMDciLz48c3RvcCBvZmZzZXQ9IjcwJSIgc3RvcC1vcGFjaXR5PSIuMDciLz48c3RvcCBvZmZzZXQ9IjExMCUiIHN0b3Atb3BhY2l0eT0iLjEiLz48YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJ4MSIgZnJvbT0iLTMwMCUiIHRvPSIxMjAwJSIgZHVyPSIzcyIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiLz48YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJ4MiIgZnJvbT0iLTIwMCUiIHRvPSIxMzAwJSIgZHVyPSIzcyIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48cGF0aCBmaWxsPSJ1cmwoI2cpIiBkPSJNMTE1LDQ3MmMtNjYsMi04Ny03NS05MC0xMjctNi0xMjEsNzMtMjYxLDE5Ni0yODksNDItMTAsODktNSwxMjgsMTYsOSw1LDE3LDE2LDI3LDIwLDE4LDgsMzksNCw1OCwxNSw0MiwyNiw2Nyw5Miw1MiwxNDAtMTIsMzktMTM4LDEwMC0xNzQsMTIwLTQyLDI1LTE1NSwxMDMtMTk4LDEwNXoiLz48L3N2Zz4=');">
</picture>
</div>
<div class="cafe-item-label">
<span class="cafe-item-title">Tako</span>
<span class="cafe-item-price">$3.99</span>
</div>
<div class="cafe-item-buttons">
<button class="cafe-item-decr-button js-item-decr-btn button-item ripple-handler">
<span class="ripple-mask"><span class="ripple"></span></span>
</button>
<button class="cafe-item-incr-button js-item-incr-btn button-item ripple-handler">
<span class="button-item-label">Add</span>
<span class="ripple-mask"><span class="ripple"></span></span>
</button>
</div>
</div> <div class="cafe-item js-item" data-item-id="5" data-item-price="7990">
<div class="cafe-item-counter js-item-counter">1</div>
<div class="cafe-item-photo">
<picture class="cafe-item-lottie js-item-lottie">
<source type="application/x-tgsticker" srcset="/img/cafe/Pizza.tgs">
<img src="/img/cafe/Pizza_148.png" style="background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2aWV3Qm94PSIwIDAgNTEyIDUxMiI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJnIiB4MT0iLTMwMCUiIHgyPSItMjAwJSIgeTE9IjAiIHkyPSIwIj48c3RvcCBvZmZzZXQ9Ii0xMCUiIHN0b3Atb3BhY2l0eT0iLjEiLz48c3RvcCBvZmZzZXQ9IjMwJSIgc3RvcC1vcGFjaXR5PSIuMDciLz48c3RvcCBvZmZzZXQ9IjcwJSIgc3RvcC1vcGFjaXR5PSIuMDciLz48c3RvcCBvZmZzZXQ9IjExMCUiIHN0b3Atb3BhY2l0eT0iLjEiLz48YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJ4MSIgZnJvbT0iLTMwMCUiIHRvPSIxMjAwJSIgZHVyPSIzcyIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiLz48YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJ4MiIgZnJvbT0iLTIwMCUiIHRvPSIxMzAwJSIgZHVyPSIzcyIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48cGF0aCBmaWxsPSJ1cmwoI2cpIiBkPSJNMzc2LDQ4NGMtMzUtOC04NC0zOC0xMTAtNjMtMS0xLDEtNCwwLTUtNy0xMS0yMC0yMi0zMC0yOS01My00My0xMDAtOTItMTUyLTEzNy0xOS0xNi00OS04LTU5LTQxLTctMjIsMjQtNDcsMzctNjAsNzEtNzEsMTcwLTExNiwyNzAtMTI0LDE2LTEsNTEtNiw2NCw2LDIxLDIxLDEsNTMsMSw3NCwzLDY4LDMsMTM1LDEsMjAzLDEsMzAsMiwxNjMtMjIsMTc2eiIvPjwvc3ZnPg==');">
</picture>
</div>
<div class="cafe-item-label">
<span class="cafe-item-title">Pizza</span>
<span class="cafe-item-price">$7.99</span>
</div>
<div class="cafe-item-buttons">
<button class="cafe-item-decr-button js-item-decr-btn button-item ripple-handler">
<span class="ripple-mask"><span class="ripple"></span></span>
</button>
<button class="cafe-item-incr-button js-item-incr-btn button-item ripple-handler">
<span class="button-item-label">Add</span>
<span class="ripple-mask"><span class="ripple"></span></span>
</button>
</div>
</div> <div class="cafe-item js-item" data-item-id="6" data-item-price="1490">
<div class="cafe-item-counter js-item-counter">1</div>
<div class="cafe-item-photo">
<picture class="cafe-item-lottie js-item-lottie">
<source type="application/x-tgsticker" srcset="/img/cafe/Donut.tgs?1">
<img src="/img/cafe/Donut_148.png?1" style="background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2aWV3Qm94PSIwIDAgNTEyIDUxMiI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJnIiB4MT0iLTMwMCUiIHgyPSItMjAwJSIgeTE9IjAiIHkyPSIwIj48c3RvcCBvZmZzZXQ9Ii0xMCUiIHN0b3Atb3BhY2l0eT0iLjEiLz48c3RvcCBvZmZzZXQ9IjMwJSIgc3RvcC1vcGFjaXR5PSIuMDciLz48c3RvcCBvZmZzZXQ9IjcwJSIgc3RvcC1vcGFjaXR5PSIuMDciLz48c3RvcCBvZmZzZXQ9IjExMCUiIHN0b3Atb3BhY2l0eT0iLjEiLz48YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJ4MSIgZnJvbT0iLTMwMCUiIHRvPSIxMjAwJSIgZHVyPSIzcyIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiLz48YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJ4MiIgZnJvbT0iLTIwMCUiIHRvPSIxMzAwJSIgZHVyPSIzcyIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48cGF0aCBmaWxsPSJ1cmwoI2cpIiBkPSJNMjYxLDQ3OWMtNjYsMi0xMzItMTktMTc4LTY2LTc0LTc1LTgzLTIyNi05LTMwNCw2OS03MSwxODktOTAsMjgwLTU2LDg4LDM0LDEzOCwxMDUsMTMzLDIwMC04LDEzOS04MCwyMjQtMjI2LDIyNnoiLz48L3N2Zz4=');">
</picture>
</div>
<div class="cafe-item-label">
<span class="cafe-item-title">Donut</span>
<span class="cafe-item-price">$1.49</span>
</div>
<div class="cafe-item-buttons">
<button class="cafe-item-decr-button js-item-decr-btn button-item ripple-handler">
<span class="ripple-mask"><span class="ripple"></span></span>
</button>
<button class="cafe-item-incr-button js-item-incr-btn button-item ripple-handler">
<span class="button-item-label">Add</span>
<span class="ripple-mask"><span class="ripple"></span></span>
</button>
</div>
</div> <div class="cafe-item js-item" data-item-id="7" data-item-price="1990">
<div class="cafe-item-counter js-item-counter">1</div>
<div class="cafe-item-photo">
<picture class="cafe-item-lottie js-item-lottie">
<source type="application/x-tgsticker" srcset="/img/cafe/Popcorn.tgs">
<img src="/img/cafe/Popcorn_148.png" style="background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2aWV3Qm94PSIwIDAgNTEyIDUxMiI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJnIiB4MT0iLTMwMCUiIHgyPSItMjAwJSIgeTE9IjAiIHkyPSIwIj48c3RvcCBvZmZzZXQ9Ii0xMCUiIHN0b3Atb3BhY2l0eT0iLjEiLz48c3RvcCBvZmZzZXQ9IjMwJSIgc3RvcC1vcGFjaXR5PSIuMDciLz48c3RvcCBvZmZzZXQ9IjcwJSIgc3RvcC1vcGFjaXR5PSIuMDciLz48c3RvcCBvZmZzZXQ9IjExMCUiIHN0b3Atb3BhY2l0eT0iLjEiLz48YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJ4MSIgZnJvbT0iLTMwMCUiIHRvPSIxMjAwJSIgZHVyPSIzcyIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiLz48YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJ4MiIgZnJvbT0iLTIwMCUiIHRvPSIxMzAwJSIgZHVyPSIzcyIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48cGF0aCBmaWxsPSJ1cmwoI2cpIiBkPSJNMjg4LDQ5N2MtMTUsMi0xNDYtNC0xNDktMTAtNy0xNi05LTM2LTEzLTUzLTEyLTUxLTIyLTEwMy0zMS0xNTQtNC0xNy0xNC00Ni05LTYyLDMtMTEsMTYtMTUsMTctMjQsMS04LTItMTQsNC0yMCw1LTUsMTctMTQsMjEtMjAsMS00LDAtOCwwLTEyLDAtMywzNy00MywzOS00Myw3LTMsMTMsMiwxOSwyLDQsMCw0LTgsOC05LDMtMiw4LTEsMTEtMywxNC01LDMwLTMwLDQ0LTI3LDcsMSwxMywyMCwxNSwxOSwxMS0yLDE3LTksMjktMywzLDEsNSw1LDgsNiwyMiwyLDExLTYsMjksMTUsNiw3LDE3LDMsMjMsMTAsNyw2LDEsMTQsNCwxOSwxLDEsMTEsNCwxNCw2LDksMTAsMTQsMzAsMTcsNDIsMSwxLDcsMiw4LDIsNiw0LDYsMTAsOSwxNCwyLDIsNywxLDEwLDYsOSwxOS0yMCwxMjMtMjYsMTQ5LTMsMTgtMTYsMTEwLTI2LDExOS0xMCw5LTMwLDI3LTQzLDMxLTksMi0yMiwwLTMyLDB6Ii8+PC9zdmc+');">
</picture>
</div>
<div class="cafe-item-label">
<span class="cafe-item-title">Popcorn</span>
<span class="cafe-item-price">$1.99</span>
</div>
<div class="cafe-item-buttons">
<button class="cafe-item-decr-button js-item-decr-btn button-item ripple-handler">
<span class="ripple-mask"><span class="ripple"></span></span>
</button>
<button class="cafe-item-incr-button js-item-incr-btn button-item ripple-handler">
<span class="button-item-label">Add</span>
<span class="ripple-mask"><span class="ripple"></span></span>
</button>
</div>
</div> <div class="cafe-item js-item" data-item-id="8" data-item-price="1490">
<div class="cafe-item-counter js-item-counter">1</div>
<div class="cafe-item-photo">
<picture class="cafe-item-lottie js-item-lottie">
<source type="application/x-tgsticker" srcset="/img/cafe/Coke.tgs">
<img src="/img/cafe/Coke_148.png" style="background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2aWV3Qm94PSIwIDAgNTEyIDUxMiI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJnIiB4MT0iLTMwMCUiIHgyPSItMjAwJSIgeTE9IjAiIHkyPSIwIj48c3RvcCBvZmZzZXQ9Ii0xMCUiIHN0b3Atb3BhY2l0eT0iLjEiLz48c3RvcCBvZmZzZXQ9IjMwJSIgc3RvcC1vcGFjaXR5PSIuMDciLz48c3RvcCBvZmZzZXQ9IjcwJSIgc3RvcC1vcGFjaXR5PSIuMDciLz48c3RvcCBvZmZzZXQ9IjExMCUiIHN0b3Atb3BhY2l0eT0iLjEiLz48YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJ4MSIgZnJvbT0iLTMwMCUiIHRvPSIxMjAwJSIgZHVyPSIzcyIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiLz48YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJ4MiIgZnJvbT0iLTIwMCUiIHRvPSIxMzAwJSIgZHVyPSIzcyIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48cGF0aCBmaWxsPSJ1cmwoI2cpIiBkPSJNMjQ4LDUwNWMtODYsMC03OC00Ny04NS0xMTMtMi0yMC05LTE1Ny0xNS0xNjMtMTEtMTItMTItNy0xMC0yNiwwLTQsMS05LDMtMTIsMTYtMTYsOTMtMTgsOTUtMjEsNi05LTMtMjksMi00MCw4LTE2LDEwMi00MCwxMTAtMjcsMjAsMjktNzMsMjktODUsNDAtMiwyLTMsMjUtMSwyNywxNSwxMSw4OC02LDk2LDIyLDEwLDMxLTcsMjEtOSwzNy0yLDIxLTMsNDItNSw2NC0zLDI5LTgsMTczLTIyLDE4OC0xOSwxOS00OSwyNC03NCwyNHoiLz48L3N2Zz4=');">
</picture>
</div>
<div class="cafe-item-label">
<span class="cafe-item-title">Coke</span>
<span class="cafe-item-price">$1.49</span>
</div>
<div class="cafe-item-buttons">
<button class="cafe-item-decr-button js-item-decr-btn button-item ripple-handler">
<span class="ripple-mask"><span class="ripple"></span></span>
</button>
<button class="cafe-item-incr-button js-item-incr-btn button-item ripple-handler">
<span class="button-item-label">Add</span>
<span class="ripple-mask"><span class="ripple"></span></span>
</button>
</div>
</div> <div class="cafe-item js-item" data-item-id="9" data-item-price="10990">
<div class="cafe-item-counter js-item-counter">1</div>
<div class="cafe-item-photo">
<picture class="cafe-item-lottie js-item-lottie">
<source type="application/x-tgsticker" srcset="/img/cafe/Cake.tgs">
<img src="/img/cafe/Cake_148.png" style="background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2aWV3Qm94PSIwIDAgNTEyIDUxMiI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJnIiB4MT0iLTMwMCUiIHgyPSItMjAwJSIgeTE9IjAiIHkyPSIwIj48c3RvcCBvZmZzZXQ9Ii0xMCUiIHN0b3Atb3BhY2l0eT0iLjEiLz48c3RvcCBvZmZzZXQ9IjMwJSIgc3RvcC1vcGFjaXR5PSIuMDciLz48c3RvcCBvZmZzZXQ9IjcwJSIgc3RvcC1vcGFjaXR5PSIuMDciLz48c3RvcCBvZmZzZXQ9IjExMCUiIHN0b3Atb3BhY2l0eT0iLjEiLz48YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJ4MSIgZnJvbT0iLTMwMCUiIHRvPSIxMjAwJSIgZHVyPSIzcyIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiLz48YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJ4MiIgZnJvbT0iLTIwMCUiIHRvPSIxMzAwJSIgZHVyPSIzcyIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48cGF0aCBmaWxsPSJ1cmwoI2cpIiBkPSJNOTIsNDcyYy0zLDAtMTAsMS0xMy0yLTEwLTEyLTctOTQtOS0xMTQtMi0yMC0xOC0xMzgtOC0xNDgsMjktMjksNzgtNDYsMTE1LTY0LDIyLTExLDE2LTMwLDI5LTUwLDE2LTI0LDI4LTEyLDQ1LTIwLDEsMCwxLTEwLDQtMTIsNS00LDE3LDEzLDIxLDE1LDIsMSwyLTQsMy02LDEtMSw5LTksMTItNiw3LDgsMywxOCw3LDI1LDMsNSwyNyw3LDIxLDIwLTIsMywyNSwxMiwzMiwxNSwyNSwxMSw1MSwyMyw3NSwzNiwxNiw5LDM1LDE3LDQ3LDMyLDMxLDQwLDE1LDEyMSw5LDE2OC0yLDExLTIsNDctMTQsNTMtMzYsMTctMTI1LDIzLTE2NywzMC02OCwxMC0xNDAsMjgtMjA5LDI4eiIvPjwvc3ZnPg==');">
</picture>
</div>
<div class="cafe-item-label">
<span class="cafe-item-title">Cake</span>
<span class="cafe-item-price">$10.99</span>
</div>
<div class="cafe-item-buttons">
<button class="cafe-item-decr-button js-item-decr-btn button-item ripple-handler">
<span class="ripple-mask"><span class="ripple"></span></span>
</button>
<button class="cafe-item-incr-button js-item-incr-btn button-item ripple-handler">
<span class="button-item-label">Add</span>
<span class="ripple-mask"><span class="ripple"></span></span>
</button>
</div>
</div> <div class="cafe-item js-item" data-item-id="10" data-item-price="5990">
<div class="cafe-item-counter js-item-counter">1</div>
<div class="cafe-item-photo">
<picture class="cafe-item-lottie js-item-lottie">
<source type="application/x-tgsticker" srcset="/img/cafe/Icecream.tgs">
<img src="/img/cafe/Icecream_148.png" style="background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2aWV3Qm94PSIwIDAgNTEyIDUxMiI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJnIiB4MT0iLTMwMCUiIHgyPSItMjAwJSIgeTE9IjAiIHkyPSIwIj48c3RvcCBvZmZzZXQ9Ii0xMCUiIHN0b3Atb3BhY2l0eT0iLjEiLz48c3RvcCBvZmZzZXQ9IjMwJSIgc3RvcC1vcGFjaXR5PSIuMDciLz48c3RvcCBvZmZzZXQ9IjcwJSIgc3RvcC1vcGFjaXR5PSIuMDciLz48c3RvcCBvZmZzZXQ9IjExMCUiIHN0b3Atb3BhY2l0eT0iLjEiLz48YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJ4MSIgZnJvbT0iLTMwMCUiIHRvPSIxMjAwJSIgZHVyPSIzcyIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiLz48YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJ4MiIgZnJvbT0iLTIwMCUiIHRvPSIxMzAwJSIgZHVyPSIzcyIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48cGF0aCBmaWxsPSJ1cmwoI2cpIiBkPSJNMjU2LDQ4NGMtMTctMi00NSwzLTU5LTktMTAtOS0xNy05NS0xNi0xMDgsMS0yNi0xMC0xMi0xNC0yMy0yLTYsNy0xMSw2LTE1LTItNy0xOC0xOC0yMi0yNi00LTctNC0yMC04LTI3LTgtMTEtMjMtMTItMjctMjktOS0zNiwyNS0zMywzMi00MywxMC0xNS0yLTMxLDEtNDgsNS0zMiw0Ny0zOCw3MC01MiwxNS05LDI5LTMxLDEwLTQ0LTgtNS0xNS0yLTIzLTUtMjMtOCw0NC0xMiw0NC0xMiwzOCwwLDkxLDE5LDk2LDYzLDIsMjEtMTMsMzgtMyw1OCwxLDQsNywzLDEwLDUsMTgsMTMsMjEsMzIsMTIsNTAsMCwxLDEyLDcsMTMsNyw3LDUsMTYsMTYsMTUsMjYtMiwxNy0yMiwxNC0yNywyNi00LDEwLTUsMjEtMTIsMzItMyw1LTE3LDE0LTE5LDE5LDEsMyw4LDksNywxNC0xLDYtMTAsMy0xMiw2LTQsOCwxLDE5LTEsMjctMiwxMi0xMyw5NS0yMSwxMDAtMTQsOC0zNyw3LTUyLDh6Ii8+PC9zdmc+');">
</picture>
</div>
<div class="cafe-item-label">
<span class="cafe-item-title">Icecream</span>
<span class="cafe-item-price">$5.99</span>
</div>
<div class="cafe-item-buttons">
<button class="cafe-item-decr-button js-item-decr-btn button-item ripple-handler">
<span class="ripple-mask"><span class="ripple"></span></span>
</button>
<button class="cafe-item-incr-button js-item-incr-btn button-item ripple-handler">
<span class="button-item-label">Add</span>
<span class="ripple-mask"><span class="ripple"></span></span>
</button>
</div>
</div> <div class="cafe-item js-item" data-item-id="11" data-item-price="3990">
<div class="cafe-item-counter js-item-counter">1</div>
<div class="cafe-item-photo">
<picture class="cafe-item-lottie js-item-lottie">
<source type="application/x-tgsticker" srcset="/img/cafe/Cookie.tgs">
<img src="/img/cafe/Cookie_148.png" style="background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2aWV3Qm94PSIwIDAgNTEyIDUxMiI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJnIiB4MT0iLTMwMCUiIHgyPSItMjAwJSIgeTE9IjAiIHkyPSIwIj48c3RvcCBvZmZzZXQ9Ii0xMCUiIHN0b3Atb3BhY2l0eT0iLjEiLz48c3RvcCBvZmZzZXQ9IjMwJSIgc3RvcC1vcGFjaXR5PSIuMDciLz48c3RvcCBvZmZzZXQ9IjcwJSIgc3RvcC1vcGFjaXR5PSIuMDciLz48c3RvcCBvZmZzZXQ9IjExMCUiIHN0b3Atb3BhY2l0eT0iLjEiLz48YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJ4MSIgZnJvbT0iLTMwMCUiIHRvPSIxMjAwJSIgZHVyPSIzcyIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiLz48YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJ4MiIgZnJvbT0iLTIwMCUiIHRvPSIxMzAwJSIgZHVyPSIzcyIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48cGF0aCBmaWxsPSJ1cmwoI2cpIiBkPSJNMjY5LDQ0MmMtNTIsMC0xMTMtMTUtMTUzLTQ5LTE2OS0xNDMsMzItMzkyLDIyMC0zMTcsMTk2LDc5LDEzOCwzNjEtNjcsMzY2eiIvPjwvc3ZnPg==');">
</picture>
</div>
<div class="cafe-item-label">
<span class="cafe-item-title">Cookie</span>
<span class="cafe-item-price">$3.99</span>
</div>
<div class="cafe-item-buttons">
<button class="cafe-item-decr-button js-item-decr-btn button-item ripple-handler">
<span class="ripple-mask"><span class="ripple"></span></span>
</button>
<button class="cafe-item-incr-button js-item-incr-btn button-item ripple-handler">
<span class="button-item-label">Add</span>
<span class="ripple-mask"><span class="ripple"></span></span>
</button>
</div>
</div> <div class="cafe-item js-item" data-item-id="12" data-item-price="7990">
<div class="cafe-item-counter js-item-counter">1</div>
<div class="cafe-item-photo">
<picture class="cafe-item-lottie js-item-lottie">
<source type="application/x-tgsticker" srcset="/img/cafe/Flan.tgs">
<img src="/img/cafe/Flan_148.png" style="background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2aWV3Qm94PSIwIDAgNTEyIDUxMiI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJnIiB4MT0iLTMwMCUiIHgyPSItMjAwJSIgeTE9IjAiIHkyPSIwIj48c3RvcCBvZmZzZXQ9Ii0xMCUiIHN0b3Atb3BhY2l0eT0iLjEiLz48c3RvcCBvZmZzZXQ9IjMwJSIgc3RvcC1vcGFjaXR5PSIuMDciLz48c3RvcCBvZmZzZXQ9IjcwJSIgc3RvcC1vcGFjaXR5PSIuMDciLz48c3RvcCBvZmZzZXQ9IjExMCUiIHN0b3Atb3BhY2l0eT0iLjEiLz48YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJ4MSIgZnJvbT0iLTMwMCUiIHRvPSIxMjAwJSIgZHVyPSIzcyIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiLz48YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJ4MiIgZnJvbT0iLTIwMCUiIHRvPSIxMzAwJSIgZHVyPSIzcyIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48cGF0aCBmaWxsPSJ1cmwoI2cpIiBkPSJNMjU0LDQzMWMtNjgtMS0xNDQtMTUtMTk1LTYzLTUyLTQ4LTUxLTExNSwyLTE2MywxOC0xNyw2NS0zNCw3NC00Miw4LTgsOS0yMSwxOS0yOSw0MC0zNiwxMjAtMzcsMTY5LTE5LDE2LDYsMzQsMTQsNDQsMjksNCw1LDQsMTMsOSwxOCw4LDksMzIsMTQsNDMsMjAsNDMsMjYsODMsNzEsNzEsMTI1LTIyLDk2LTE1MywxMjQtMjM3LDEyNHoiLz48L3N2Zz4=');">
</picture>
</div>
<div class="cafe-item-label">
<span class="cafe-item-title">Flan</span>
<span class="cafe-item-price">$7.99</span>
</div>
<div class="cafe-item-buttons">
<button class="cafe-item-decr-button js-item-decr-btn button-item ripple-handler">
<span class="ripple-mask"><span class="ripple"></span></span>
</button>
<button class="cafe-item-incr-button js-item-incr-btn button-item ripple-handler">
<span class="button-item-label">Add</span>
<span class="ripple-mask"><span class="ripple"></span></span>
</button>
</div>
</div><div class="cafe-item-shadow"></div><div class="cafe-item-shadow"></div><div class="cafe-item-shadow"></div><div class="cafe-item-shadow"></div>
</section>
<section class="cafe-page cafe-order-overview">
<div class="cafe-block">
<div class="cafe-order-header-wrap">
<h2 class="cafe-order-header">Your Order</h2>
<span class="cafe-order-edit js-order-edit">Edit</span>
</div>
<div class="cafe-order-items">
<div class="cafe-order-item js-order-item" data-item-id="1">
<div class="cafe-order-item-photo">
<picture class="cafe-item-lottie js-item-lottie">
<source type="application/x-tgsticker" srcset="/img/cafe/Burger.tgs">
<img src="/img/cafe/Burger_148.png" style="background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2aWV3Qm94PSIwIDAgNTEyIDUxMiI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJnIiB4MT0iLTMwMCUiIHgyPSItMjAwJSIgeTE9IjAiIHkyPSIwIj48c3RvcCBvZmZzZXQ9Ii0xMCUiIHN0b3Atb3BhY2l0eT0iLjEiLz48c3RvcCBvZmZzZXQ9IjMwJSIgc3RvcC1vcGFjaXR5PSIuMDciLz48c3RvcCBvZmZzZXQ9IjcwJSIgc3RvcC1vcGFjaXR5PSIuMDciLz48c3RvcCBvZmZzZXQ9IjExMCUiIHN0b3Atb3BhY2l0eT0iLjEiLz48YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJ4MSIgZnJvbT0iLTMwMCUiIHRvPSIxMjAwJSIgZHVyPSIzcyIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiLz48YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJ4MiIgZnJvbT0iLTIwMCUiIHRvPSIxMzAwJSIgZHVyPSIzcyIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48cGF0aCBmaWxsPSJ1cmwoI2cpIiBkPSJNMjY4LDQ5OWMtNTEtMi0xMDYtMS0xNTMtMjItMjgtMTItMzktNDAtNDItNjgsMC00LDMtNywxLTEwLTUtNi0xNiwzLTEzLTE0LDItMTEsMTItMTQsMTEtMjcsMC0yLTUtMTItNS0xNiwwLTYsNS0xNyw0LTIyLTItNy05LTUtNi0xNSwzLTEwLDE0LTcsMTktMTMsNy0xMi0xNC0yNC0xNy0zMy0zLTEyLTEtMjgsMi0zOSwyOC0xMDEsMTQ4LTEzMywyMzktMTE1LDY0LDEzLDEzMCw1OSwxNDIsMTI3LDMsMTgsMCwzMi0xNSw0Mi0xLDEtMTEsMTMtNywxNiw0LDIsMjAsNCwyMiw5LDYsMTAtNywxNS05LDIyLTEsMywzLDExLDMsMTYsMCwyLTMsMTctMiwxOSwyLDIsOCwxLDEwLDQsMyw1LDQsMTYsNiwyMiw0LDEzLTE1LDIwLTE5LDI3LTksMjAsNSw0MC0yMyw2MC00MCwyOC0xMDEsMjktMTQ4LDMweiIvPjwvc3ZnPg==');">
</picture>
</div>
<div class="cafe-order-item-label">
<div class="cafe-order-item-title">Burger <span class="cafe-order-item-counter"><span class="js-order-item-counter">1</span>x</span></div>
<div class="cafe-order-item-description">Meat™</div>
</div>
<div class="cafe-order-item-price js-order-item-price">$4.99</div>
</div> <div class="cafe-order-item js-order-item" data-item-id="2">
<div class="cafe-order-item-photo">
<picture class="cafe-item-lottie js-item-lottie">
<source type="application/x-tgsticker" srcset="/img/cafe/Fries.tgs">
<img src="/img/cafe/Fries_148.png" style="background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2aWV3Qm94PSIwIDAgNTEyIDUxMiI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJnIiB4MT0iLTMwMCUiIHgyPSItMjAwJSIgeTE9IjAiIHkyPSIwIj48c3RvcCBvZmZzZXQ9Ii0xMCUiIHN0b3Atb3BhY2l0eT0iLjEiLz48c3RvcCBvZmZzZXQ9IjMwJSIgc3RvcC1vcGFjaXR5PSIuMDciLz48c3RvcCBvZmZzZXQ9IjcwJSIgc3RvcC1vcGFjaXR5PSIuMDciLz48c3RvcCBvZmZzZXQ9IjExMCUiIHN0b3Atb3BhY2l0eT0iLjEiLz48YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJ4MSIgZnJvbT0iLTMwMCUiIHRvPSIxMjAwJSIgZHVyPSIzcyIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiLz48YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJ4MiIgZnJvbT0iLTIwMCUiIHRvPSIxMzAwJSIgZHVyPSIzcyIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48cGF0aCBmaWxsPSJ1cmwoI2cpIiBkPSJNMjUwLDQ3OGMtNTcsMS04OC00LTEzNS0zNi01LTQtNS0yOS01LTM1LTEwLTY5LTE5LTEzOS0yNi0yMDktMy0yOSwxNC0xMSwzMi0zMiw3Mi04NCwxOTQtODcsMjcxLTgsNCw1LDEwLDE1LDE2LDE4LDEsMSwyNCw0LDI0LDUsNywyMS0xNiwxNjctMjEsMTk4LTEsMTEtMSw1Ni05LDYyLTUzLDM4LTg2LDM4LTE0NywzN3oiLz48L3N2Zz4=');">
</picture>
</div>
<div class="cafe-order-item-label">
<div class="cafe-order-item-title">Fries <span class="cafe-order-item-counter"><span class="js-order-item-counter">1</span>x</span></div>
<div class="cafe-order-item-description">Po-ta-toes</div>
</div>
<div class="cafe-order-item-price js-order-item-price">$1.49</div>
</div> <div class="cafe-order-item js-order-item" data-item-id="3">
<div class="cafe-order-item-photo">
<picture class="cafe-item-lottie js-item-lottie">
<source type="application/x-tgsticker" srcset="/img/cafe/Hotdog.tgs">
<img src="/img/cafe/Hotdog_148.png" style="background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2aWV3Qm94PSIwIDAgNTEyIDUxMiI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJnIiB4MT0iLTMwMCUiIHgyPSItMjAwJSIgeTE9IjAiIHkyPSIwIj48c3RvcCBvZmZzZXQ9Ii0xMCUiIHN0b3Atb3BhY2l0eT0iLjEiLz48c3RvcCBvZmZzZXQ9IjMwJSIgc3RvcC1vcGFjaXR5PSIuMDciLz48c3RvcCBvZmZzZXQ9IjcwJSIgc3RvcC1vcGFjaXR5PSIuMDciLz48c3RvcCBvZmZzZXQ9IjExMCUiIHN0b3Atb3BhY2l0eT0iLjEiLz48YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJ4MSIgZnJvbT0iLTMwMCUiIHRvPSIxMjAwJSIgZHVyPSIzcyIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiLz48YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJ4MiIgZnJvbT0iLTIwMCUiIHRvPSIxMzAwJSIgZHVyPSIzcyIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48cGF0aCBmaWxsPSJ1cmwoI2cpIiBkPSJNMzIwLDQ4N2MtNTgtMi0xMTAtNDAtMTUyLTc4LTU1LTQ4LTIyMC0yMzQtMTA1LTI5NCwxMS02LTEtNzcsNjUtNjcsNiwxLDI1LDgsMzEsMTIsMSwxLDIsOCwzLDksMTAsMywyMCwxLDMwLDYsNTIsMjUsODYsMTAyLDEzMCwxNDMsMzYsMzYsMTAwLDY0LDEyNywxMDQsMTIsMTgsNSwzNSwxMCw1Myw1LDE5LDE0LDMwLDQsNTEtMjQsNDktNjgsMTUtNzYsMTktNSwzLTQsMTAtNywxNC0xNCwyMC0zNywyOC02MCwyOHoiLz48L3N2Zz4=');">
</picture>
</div>
<div class="cafe-order-item-label">
<div class="cafe-order-item-title">Hotdog <span class="cafe-order-item-counter"><span class="js-order-item-counter">1</span>x</span></div>
<div class="cafe-order-item-description">0% dog, 100% hot</div>
</div>
<div class="cafe-order-item-price js-order-item-price">$3.49</div>
</div> <div class="cafe-order-item js-order-item" data-item-id="4">
<div class="cafe-order-item-photo">
<picture class="cafe-item-lottie js-item-lottie">
<source type="application/x-tgsticker" srcset="/img/cafe/Tako.tgs">
<img src="/img/cafe/Tako_148.png" style="background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2aWV3Qm94PSIwIDAgNTEyIDUxMiI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJnIiB4MT0iLTMwMCUiIHgyPSItMjAwJSIgeTE9IjAiIHkyPSIwIj48c3RvcCBvZmZzZXQ9Ii0xMCUiIHN0b3Atb3BhY2l0eT0iLjEiLz48c3RvcCBvZmZzZXQ9IjMwJSIgc3RvcC1vcGFjaXR5PSIuMDciLz48c3RvcCBvZmZzZXQ9IjcwJSIgc3RvcC1vcGFjaXR5PSIuMDciLz48c3RvcCBvZmZzZXQ9IjExMCUiIHN0b3Atb3BhY2l0eT0iLjEiLz48YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJ4MSIgZnJvbT0iLTMwMCUiIHRvPSIxMjAwJSIgZHVyPSIzcyIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiLz48YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJ4MiIgZnJvbT0iLTIwMCUiIHRvPSIxMzAwJSIgZHVyPSIzcyIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48cGF0aCBmaWxsPSJ1cmwoI2cpIiBkPSJNMTE1LDQ3MmMtNjYsMi04Ny03NS05MC0xMjctNi0xMjEsNzMtMjYxLDE5Ni0yODksNDItMTAsODktNSwxMjgsMTYsOSw1LDE3LDE2LDI3LDIwLDE4LDgsMzksNCw1OCwxNSw0MiwyNiw2Nyw5Miw1MiwxNDAtMTIsMzktMTM4LDEwMC0xNzQsMTIwLTQyLDI1LTE1NSwxMDMtMTk4LDEwNXoiLz48L3N2Zz4=');">
</picture>
</div>
<div class="cafe-order-item-label">
<div class="cafe-order-item-title">Tako <span class="cafe-order-item-counter"><span class="js-order-item-counter">1</span>x</span></div>
<div class="cafe-order-item-description">Mucho más</div>
</div>
<div class="cafe-order-item-price js-order-item-price">$3.99</div>
</div> <div class="cafe-order-item js-order-item" data-item-id="5">
<div class="cafe-order-item-photo">
<picture class="cafe-item-lottie js-item-lottie">
<source type="application/x-tgsticker" srcset="/img/cafe/Pizza.tgs">
<img src="/img/cafe/Pizza_148.png" style="background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2aWV3Qm94PSIwIDAgNTEyIDUxMiI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJnIiB4MT0iLTMwMCUiIHgyPSItMjAwJSIgeTE9IjAiIHkyPSIwIj48c3RvcCBvZmZzZXQ9Ii0xMCUiIHN0b3Atb3BhY2l0eT0iLjEiLz48c3RvcCBvZmZzZXQ9IjMwJSIgc3RvcC1vcGFjaXR5PSIuMDciLz48c3RvcCBvZmZzZXQ9IjcwJSIgc3RvcC1vcGFjaXR5PSIuMDciLz48c3RvcCBvZmZzZXQ9IjExMCUiIHN0b3Atb3BhY2l0eT0iLjEiLz48YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJ4MSIgZnJvbT0iLTMwMCUiIHRvPSIxMjAwJSIgZHVyPSIzcyIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiLz48YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJ4MiIgZnJvbT0iLTIwMCUiIHRvPSIxMzAwJSIgZHVyPSIzcyIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48cGF0aCBmaWxsPSJ1cmwoI2cpIiBkPSJNMzc2LDQ4NGMtMzUtOC04NC0zOC0xMTAtNjMtMS0xLDEtNCwwLTUtNy0xMS0yMC0yMi0zMC0yOS01My00My0xMDAtOTItMTUyLTEzNy0xOS0xNi00OS04LTU5LTQxLTctMjIsMjQtNDcsMzctNjAsNzEtNzEsMTcwLTExNiwyNzAtMTI0LDE2LTEsNTEtNiw2NCw2LDIxLDIxLDEsNTMsMSw3NCwzLDY4LDMsMTM1LDEsMjAzLDEsMzAsMiwxNjMtMjIsMTc2eiIvPjwvc3ZnPg==');">
</picture>
</div>
<div class="cafe-order-item-label">
<div class="cafe-order-item-title">Pizza <span class="cafe-order-item-counter"><span class="js-order-item-counter">1</span>x</span></div>
<div class="cafe-order-item-description">That’s amore</div>
</div>
<div class="cafe-order-item-price js-order-item-price">$7.99</div>
</div> <div class="cafe-order-item js-order-item" data-item-id="6">
<div class="cafe-order-item-photo">
<picture class="cafe-item-lottie js-item-lottie">
<source type="application/x-tgsticker" srcset="/img/cafe/Donut.tgs?1">
<img src="/img/cafe/Donut_148.png?1" style="background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2aWV3Qm94PSIwIDAgNTEyIDUxMiI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJnIiB4MT0iLTMwMCUiIHgyPSItMjAwJSIgeTE9IjAiIHkyPSIwIj48c3RvcCBvZmZzZXQ9Ii0xMCUiIHN0b3Atb3BhY2l0eT0iLjEiLz48c3RvcCBvZmZzZXQ9IjMwJSIgc3RvcC1vcGFjaXR5PSIuMDciLz48c3RvcCBvZmZzZXQ9IjcwJSIgc3RvcC1vcGFjaXR5PSIuMDciLz48c3RvcCBvZmZzZXQ9IjExMCUiIHN0b3Atb3BhY2l0eT0iLjEiLz48YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJ4MSIgZnJvbT0iLTMwMCUiIHRvPSIxMjAwJSIgZHVyPSIzcyIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiLz48YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJ4MiIgZnJvbT0iLTIwMCUiIHRvPSIxMzAwJSIgZHVyPSIzcyIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48cGF0aCBmaWxsPSJ1cmwoI2cpIiBkPSJNMjYxLDQ3OWMtNjYsMi0xMzItMTktMTc4LTY2LTc0LTc1LTgzLTIyNi05LTMwNCw2OS03MSwxODktOTAsMjgwLTU2LDg4LDM0LDEzOCwxMDUsMTMzLDIwMC04LDEzOS04MCwyMjQtMjI2LDIyNnoiLz48L3N2Zz4=');">
</picture>
</div>
<div class="cafe-order-item-label">
<div class="cafe-order-item-title">Donut <span class="cafe-order-item-counter"><span class="js-order-item-counter">1</span>x</span></div>
<div class="cafe-order-item-description">Hole included</div>
</div>
<div class="cafe-order-item-price js-order-item-price">$1.49</div>
</div> <div class="cafe-order-item js-order-item" data-item-id="7">
<div class="cafe-order-item-photo">
<picture class="cafe-item-lottie js-item-lottie">
<source type="application/x-tgsticker" srcset="/img/cafe/Popcorn.tgs">
<img src="/img/cafe/Popcorn_148.png" style="background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2aWV3Qm94PSIwIDAgNTEyIDUxMiI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJnIiB4MT0iLTMwMCUiIHgyPSItMjAwJSIgeTE9IjAiIHkyPSIwIj48c3RvcCBvZmZzZXQ9Ii0xMCUiIHN0b3Atb3BhY2l0eT0iLjEiLz48c3RvcCBvZmZzZXQ9IjMwJSIgc3RvcC1vcGFjaXR5PSIuMDciLz48c3RvcCBvZmZzZXQ9IjcwJSIgc3RvcC1vcGFjaXR5PSIuMDciLz48c3RvcCBvZmZzZXQ9IjExMCUiIHN0b3Atb3BhY2l0eT0iLjEiLz48YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJ4MSIgZnJvbT0iLTMwMCUiIHRvPSIxMjAwJSIgZHVyPSIzcyIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiLz48YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJ4MiIgZnJvbT0iLTIwMCUiIHRvPSIxMzAwJSIgZHVyPSIzcyIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48cGF0aCBmaWxsPSJ1cmwoI2cpIiBkPSJNMjg4LDQ5N2MtMTUsMi0xNDYtNC0xNDktMTAtNy0xNi05LTM2LTEzLTUzLTEyLTUxLTIyLTEwMy0zMS0xNTQtNC0xNy0xNC00Ni05LTYyLDMtMTEsMTYtMTUsMTctMjQsMS04LTItMTQsNC0yMCw1LTUsMTctMTQsMjEtMjAsMS00LDAtOCwwLTEyLDAtMywzNy00MywzOS00Myw3LTMsMTMsMiwxOSwyLDQsMCw0LTgsOC05LDMtMiw4LTEsMTEtMywxNC01LDMwLTMwLDQ0LTI3LDcsMSwxMywyMCwxNSwxOSwxMS0yLDE3LTksMjktMywzLDEsNSw1LDgsNiwyMiwyLDExLTYsMjksMTUsNiw3LDE3LDMsMjMsMTAsNyw2LDEsMTQsNCwxOSwxLDEsMTEsNCwxNCw2LDksMTAsMTQsMzAsMTcsNDIsMSwxLDcsMiw4LDIsNiw0LDYsMTAsOSwxNCwyLDIsNywxLDEwLDYsOSwxOS0yMCwxMjMtMjYsMTQ5LTMsMTgtMTYsMTEwLTI2LDExOS0xMCw5LTMwLDI3LTQzLDMxLTksMi0yMiwwLTMyLDB6Ii8+PC9zdmc+');">
</picture>
</div>
<div class="cafe-order-item-label">
<div class="cafe-order-item-title">Popcorn <span class="cafe-order-item-counter"><span class="js-order-item-counter">1</span>x</span></div>
<div class="cafe-order-item-description">Lights, camera, corn</div>
</div>
<div class="cafe-order-item-price js-order-item-price">$1.99</div>
</div> <div class="cafe-order-item js-order-item" data-item-id="8">
<div class="cafe-order-item-photo">
<picture class="cafe-item-lottie js-item-lottie">
<source type="application/x-tgsticker" srcset="/img/cafe/Coke.tgs">
<img src="/img/cafe/Coke_148.png" style="background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2aWV3Qm94PSIwIDAgNTEyIDUxMiI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJnIiB4MT0iLTMwMCUiIHgyPSItMjAwJSIgeTE9IjAiIHkyPSIwIj48c3RvcCBvZmZzZXQ9Ii0xMCUiIHN0b3Atb3BhY2l0eT0iLjEiLz48c3RvcCBvZmZzZXQ9IjMwJSIgc3RvcC1vcGFjaXR5PSIuMDciLz48c3RvcCBvZmZzZXQ9IjcwJSIgc3RvcC1vcGFjaXR5PSIuMDciLz48c3RvcCBvZmZzZXQ9IjExMCUiIHN0b3Atb3BhY2l0eT0iLjEiLz48YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJ4MSIgZnJvbT0iLTMwMCUiIHRvPSIxMjAwJSIgZHVyPSIzcyIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiLz48YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJ4MiIgZnJvbT0iLTIwMCUiIHRvPSIxMzAwJSIgZHVyPSIzcyIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48cGF0aCBmaWxsPSJ1cmwoI2cpIiBkPSJNMjQ4LDUwNWMtODYsMC03OC00Ny04NS0xMTMtMi0yMC05LTE1Ny0xNS0xNjMtMTEtMTItMTItNy0xMC0yNiwwLTQsMS05LDMtMTIsMTYtMTYsOTMtMTgsOTUtMjEsNi05LTMtMjksMi00MCw4LTE2LDEwMi00MCwxMTAtMjcsMjAsMjktNzMsMjktODUsNDAtMiwyLTMsMjUtMSwyNywxNSwxMSw4OC02LDk2LDIyLDEwLDMxLTcsMjEtOSwzNy0yLDIxLTMsNDItNSw2NC0zLDI5LTgsMTczLTIyLDE4OC0xOSwxOS00OSwyNC03NCwyNHoiLz48L3N2Zz4=');">
</picture>
</div>
<div class="cafe-order-item-label">
<div class="cafe-order-item-title">Coke <span class="cafe-order-item-counter"><span class="js-order-item-counter">1</span>x</span></div>
<div class="cafe-order-item-description">The liquid kind</div>
</div>
<div class="cafe-order-item-price js-order-item-price">$1.49</div>
</div> <div class="cafe-order-item js-order-item" data-item-id="9">
<div class="cafe-order-item-photo">
<picture class="cafe-item-lottie js-item-lottie">
<source type="application/x-tgsticker" srcset="/img/cafe/Cake.tgs">
<img src="/img/cafe/Cake_148.png" style="background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2aWV3Qm94PSIwIDAgNTEyIDUxMiI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJnIiB4MT0iLTMwMCUiIHgyPSItMjAwJSIgeTE9IjAiIHkyPSIwIj48c3RvcCBvZmZzZXQ9Ii0xMCUiIHN0b3Atb3BhY2l0eT0iLjEiLz48c3RvcCBvZmZzZXQ9IjMwJSIgc3RvcC1vcGFjaXR5PSIuMDciLz48c3RvcCBvZmZzZXQ9IjcwJSIgc3RvcC1vcGFjaXR5PSIuMDciLz48c3RvcCBvZmZzZXQ9IjExMCUiIHN0b3Atb3BhY2l0eT0iLjEiLz48YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJ4MSIgZnJvbT0iLTMwMCUiIHRvPSIxMjAwJSIgZHVyPSIzcyIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiLz48YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJ4MiIgZnJvbT0iLTIwMCUiIHRvPSIxMzAwJSIgZHVyPSIzcyIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48cGF0aCBmaWxsPSJ1cmwoI2cpIiBkPSJNOTIsNDcyYy0zLDAtMTAsMS0xMy0yLTEwLTEyLTctOTQtOS0xMTQtMi0yMC0xOC0xMzgtOC0xNDgsMjktMjksNzgtNDYsMTE1LTY0LDIyLTExLDE2LTMwLDI5LTUwLDE2LTI0LDI4LTEyLDQ1LTIwLDEsMCwxLTEwLDQtMTIsNS00LDE3LDEzLDIxLDE1LDIsMSwyLTQsMy02LDEtMSw5LTksMTItNiw3LDgsMywxOCw3LDI1LDMsNSwyNyw3LDIxLDIwLTIsMywyNSwxMiwzMiwxNSwyNSwxMSw1MSwyMyw3NSwzNiwxNiw5LDM1LDE3LDQ3LDMyLDMxLDQwLDE1LDEyMSw5LDE2OC0yLDExLTIsNDctMTQsNTMtMzYsMTctMTI1LDIzLTE2NywzMC02OCwxMC0xNDAsMjgtMjA5LDI4eiIvPjwvc3ZnPg==');">
</picture>
</div>
<div class="cafe-order-item-label">
<div class="cafe-order-item-title">Cake <span class="cafe-order-item-counter"><span class="js-order-item-counter">1</span>x</span></div>
<div class="cafe-order-item-description">Bread substitute</div>
</div>
<div class="cafe-order-item-price js-order-item-price">$10.99</div>
</div> <div class="cafe-order-item js-order-item" data-item-id="10">
<div class="cafe-order-item-photo">
<picture class="cafe-item-lottie js-item-lottie">
<source type="application/x-tgsticker" srcset="/img/cafe/Icecream.tgs">
<img src="/img/cafe/Icecream_148.png" style="background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2aWV3Qm94PSIwIDAgNTEyIDUxMiI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJnIiB4MT0iLTMwMCUiIHgyPSItMjAwJSIgeTE9IjAiIHkyPSIwIj48c3RvcCBvZmZzZXQ9Ii0xMCUiIHN0b3Atb3BhY2l0eT0iLjEiLz48c3RvcCBvZmZzZXQ9IjMwJSIgc3RvcC1vcGFjaXR5PSIuMDciLz48c3RvcCBvZmZzZXQ9IjcwJSIgc3RvcC1vcGFjaXR5PSIuMDciLz48c3RvcCBvZmZzZXQ9IjExMCUiIHN0b3Atb3BhY2l0eT0iLjEiLz48YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJ4MSIgZnJvbT0iLTMwMCUiIHRvPSIxMjAwJSIgZHVyPSIzcyIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiLz48YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJ4MiIgZnJvbT0iLTIwMCUiIHRvPSIxMzAwJSIgZHVyPSIzcyIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48cGF0aCBmaWxsPSJ1cmwoI2cpIiBkPSJNMjU2LDQ4NGMtMTctMi00NSwzLTU5LTktMTAtOS0xNy05NS0xNi0xMDgsMS0yNi0xMC0xMi0xNC0yMy0yLTYsNy0xMSw2LTE1LTItNy0xOC0xOC0yMi0yNi00LTctNC0yMC04LTI3LTgtMTEtMjMtMTItMjctMjktOS0zNiwyNS0zMywzMi00MywxMC0xNS0yLTMxLDEtNDgsNS0zMiw0Ny0zOCw3MC01MiwxNS05LDI5LTMxLDEwLTQ0LTgtNS0xNS0yLTIzLTUtMjMtOCw0NC0xMiw0NC0xMiwzOCwwLDkxLDE5LDk2LDYzLDIsMjEtMTMsMzgtMyw1OCwxLDQsNywzLDEwLDUsMTgsMTMsMjEsMzIsMTIsNTAsMCwxLDEyLDcsMTMsNyw3LDUsMTYsMTYsMTUsMjYtMiwxNy0yMiwxNC0yNywyNi00LDEwLTUsMjEtMTIsMzItMyw1LTE3LDE0LTE5LDE5LDEsMyw4LDksNywxNC0xLDYtMTAsMy0xMiw2LTQsOCwxLDE5LTEsMjctMiwxMi0xMyw5NS0yMSwxMDAtMTQsOC0zNyw3LTUyLDh6Ii8+PC9zdmc+');">
</picture>
</div>
<div class="cafe-order-item-label">
<div class="cafe-order-item-title">Icecream <span class="cafe-order-item-counter"><span class="js-order-item-counter">1</span>x</span></div>
<div class="cafe-order-item-description">Cone of shame</div>
</div>
<div class="cafe-order-item-price js-order-item-price">$5.99</div>
</div> <div class="cafe-order-item js-order-item" data-item-id="11">
<div class="cafe-order-item-photo">
<picture class="cafe-item-lottie js-item-lottie">
<source type="application/x-tgsticker" srcset="/img/cafe/Cookie.tgs">
<img src="/img/cafe/Cookie_148.png" style="background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2aWV3Qm94PSIwIDAgNTEyIDUxMiI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJnIiB4MT0iLTMwMCUiIHgyPSItMjAwJSIgeTE9IjAiIHkyPSIwIj48c3RvcCBvZmZzZXQ9Ii0xMCUiIHN0b3Atb3BhY2l0eT0iLjEiLz48c3RvcCBvZmZzZXQ9IjMwJSIgc3RvcC1vcGFjaXR5PSIuMDciLz48c3RvcCBvZmZzZXQ9IjcwJSIgc3RvcC1vcGFjaXR5PSIuMDciLz48c3RvcCBvZmZzZXQ9IjExMCUiIHN0b3Atb3BhY2l0eT0iLjEiLz48YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJ4MSIgZnJvbT0iLTMwMCUiIHRvPSIxMjAwJSIgZHVyPSIzcyIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiLz48YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJ4MiIgZnJvbT0iLTIwMCUiIHRvPSIxMzAwJSIgZHVyPSIzcyIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48cGF0aCBmaWxsPSJ1cmwoI2cpIiBkPSJNMjY5LDQ0MmMtNTIsMC0xMTMtMTUtMTUzLTQ5LTE2OS0xNDMsMzItMzkyLDIyMC0zMTcsMTk2LDc5LDEzOCwzNjEtNjcsMzY2eiIvPjwvc3ZnPg==');">
</picture>
</div>
<div class="cafe-order-item-label">
<div class="cafe-order-item-title">Cookie <span class="cafe-order-item-counter"><span class="js-order-item-counter">1</span>x</span></div>
<div class="cafe-order-item-description">Milk’s favorite</div>
</div>
<div class="cafe-order-item-price js-order-item-price">$3.99</div>
</div> <div class="cafe-order-item js-order-item" data-item-id="12">
<div class="cafe-order-item-photo">
<picture class="cafe-item-lottie js-item-lottie">
<source type="application/x-tgsticker" srcset="/img/cafe/Flan.tgs">
<img src="/img/cafe/Flan_148.png" style="background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2aWV3Qm94PSIwIDAgNTEyIDUxMiI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJnIiB4MT0iLTMwMCUiIHgyPSItMjAwJSIgeTE9IjAiIHkyPSIwIj48c3RvcCBvZmZzZXQ9Ii0xMCUiIHN0b3Atb3BhY2l0eT0iLjEiLz48c3RvcCBvZmZzZXQ9IjMwJSIgc3RvcC1vcGFjaXR5PSIuMDciLz48c3RvcCBvZmZzZXQ9IjcwJSIgc3RvcC1vcGFjaXR5PSIuMDciLz48c3RvcCBvZmZzZXQ9IjExMCUiIHN0b3Atb3BhY2l0eT0iLjEiLz48YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJ4MSIgZnJvbT0iLTMwMCUiIHRvPSIxMjAwJSIgZHVyPSIzcyIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiLz48YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJ4MiIgZnJvbT0iLTIwMCUiIHRvPSIxMzAwJSIgZHVyPSIzcyIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48cGF0aCBmaWxsPSJ1cmwoI2cpIiBkPSJNMjU0LDQzMWMtNjgtMS0xNDQtMTUtMTk1LTYzLTUyLTQ4LTUxLTExNSwyLTE2MywxOC0xNyw2NS0zNCw3NC00Miw4LTgsOS0yMSwxOS0yOSw0MC0zNiwxMjAtMzcsMTY5LTE5LDE2LDYsMzQsMTQsNDQsMjksNCw1LDQsMTMsOSwxOCw4LDksMzIsMTQsNDMsMjAsNDMsMjYsODMsNzEsNzEsMTI1LTIyLDk2LTE1MywxMjQtMjM3LDEyNHoiLz48L3N2Zz4=');">
</picture>
</div>
<div class="cafe-order-item-label">
<div class="cafe-order-item-title">Flan <span class="cafe-order-item-counter"><span class="js-order-item-counter">1</span>x</span></div>
<div class="cafe-order-item-description">Flan-tastic</div>
</div>
<div class="cafe-order-item-price js-order-item-price">$7.99</div>
</div>
</div>
</div>
<div class="cafe-text-field-wrap">
<textarea class="cafe-text-field js-order-comment-field cafe-block" rows="1" placeholder="Add comment…"></textarea>
<div class="cafe-text-field-hint">
Any special requests, details, final wishes etc.
</div>
</div>
</section>
<div id="tg-fixed-container">
<div class="cafe-status js-status"></div>
</div>
<script src="https://tg.dev/js/jquery.min.js"></script>
<script src="https://tg.dev/js/tgsticker.js?26"></script>
<script src="/js/cafe.js?13"></script>
<script>Cafe.init({"apiUrl":"\/cafe\/api","userId":0,"userHash":null});</script>
</body>
</html>

566
data/webappcontent.telegram.org/css/cafe.css Normal file
View file

@ -0,0 +1,566 @@
@font-face {
font-display: swap;
font-family: 'SF-Pro-Rounded';
src: local('SF Pro Rounded Medium'),
url('fonts/SF-Pro-Rounded-Medium.otf') format('opentype');
font-weight: 500;
}
@font-face {
font-display: swap;
font-family: 'SF-Pro-Rounded';
src: local('SF Pro Rounded Bold'),
url('fonts/SF-Pro-Rounded-Bold.otf') format('opentype');
font-weight: 700;
}
body {
font-family: 'SF-Pro-Rounded', sans-serif;
font-size: 13px;
line-height: 16px;
font-weight: 500;
background-color: var(--block-bg-color);
color: var(--text-color);
color-scheme: var(--tg-theme-color-scheme);
margin: 0;
padding: 0;
width: 1px;
min-width: 100%;
--block-bg-color: var(--tg-theme-bg-color);
--bg-color: #ebedf0;
--animation: .15s ease;
--page-animation: .3s ease;
--status-height: 48px;
--accent-color: #31b545;
--main-color: #f8a917;
--text-color: #222;
--page-hint-color: #83878a;
--hint-color: #74787a;
--placeholder-color: #999da1;
--ripple-duration: .45s;
--ripple-end-duration: .3s;
-webkit-user-select: none;
user-select: none;
cursor: default;
}
html.dark body {
--block-bg-color: var(--tg-theme-bg-color);
--bg-color: #0f0f0f;
--text-color: #fff;
--page-hint-color: #9b9ba1;
--hint-color: #64666d;
--placeholder-color: #5d6163;
}
body.order-mode {
background-color: var(--bg-color);
}
* {
-webkit-tap-highlight-color: transparent;
}
.cafe-page {
transition: filter var(--animation);
}
body.closed .cafe-page {
filter: grayscale(1) opacity(0.7);
}
.cafe-block {
background-color: var(--block-bg-color);
-webkit-box-shadow: 0 0.5px rgba(0, 0, 0, .07);
box-shadow: 0 0.5px rgba(0, 0, 0, .07);
}
.cafe-items {
display: flex;
flex-wrap: wrap;
margin: 0 auto;
max-width: 480px;
justify-content: space-around;
align-content: flex-end;
transition: -webkit-filter var(--animation), max-height var(--page-animation);
background-color: var(--block-bg-color);
}
body.order-mode .cafe-items {
max-height: 0 !important;
}
.cafe-items:after {
content: '';
flex-grow: 2;
}
.cafe-item,
.cafe-item-shadow {
position: relative;
width: 120px;
height: 144px;
padding: 4px 5px 6px;
margin-bottom: 15px;
box-sizing: border-box;
text-align: center;
}
.cafe-item-shadow {
height: 0;
padding: 0;
margin: 0;
}
.cafe-item-photo {
position: relative;
height: 78px;
}
.cafe-item-photo .cafe-item-emoji {
font-size: 70px;
line-height: 78px;
}
.cafe-item-lottie {
display: inline-block;
vertical-align: top;
position: relative;
margin: 0 auto;
}
.cafe-item-photo .cafe-item-lottie {
width: 74px;
}
.cafe-item-lottie:before {
content: '';
display: block;
padding-top: 100%;
}
.cafe-item-lottie img,
.cafe-item-lottie canvas {
position: absolute;
top: 0; bottom: 0;
left: 0; right: 0;
width: 100%;
height: 100%;
}
.cafe-item-label {
display: flex;
justify-content: center;
}
.cafe-item-price {
font-weight: 700;
white-space: nowrap;
}
.cafe-item-price:before {
display: inline-block;
vertical-align: top;
content: '';
width: 2px;
height: 2px;
border-radius: 2px;
background-color: currentColor;
margin: 7px 4px;
}
.cafe-item-buttons {
display: flex;
width: 80px;
justify-content: space-between;
margin: 10px auto 0;
position: relative;
transition: all var(--animation);
}
button {
cursor: pointer;
}
button,
.cafe-item-counter {
display: inline-block;
font-family: 'SF-Pro-Rounded', sans-serif;
font-weight: 700;
font-size: 14px;
line-height: 18px;
padding: 6px 16px;
height: 30px;
border-radius: 7px;
box-sizing: border-box;
background-color: var(--main-color);
text-transform: uppercase;
color: #fff;
outline: none;
border: none;
}
.cafe-item-counter {
position: absolute;
right: 0;
top: 0;
min-width: 22px;
height: 22px;
padding: 2px 6px;
margin: 4px 6px;
border-radius: 11px;
transform: scale3d(0, 0, 1);
animation: var(--animation) both;
pointer-events: none;
z-index: 3;
}
.cafe-item-incr-button {
position: absolute !important;
top: 0;
right: 0;
transition: width var(--animation);
width: 80px;
}
.selected .cafe-item-incr-button {
width: 38px;
}
.cafe-item-decr-button {
position: relative;
width: 38px;
}
.cafe-item-decr-button {
background-color: #e64d44;
pointer-events: none;
transform: scale3d(0.9, 0.9, 1);
transition: transform var(--animation), visibility var(--animation);
visibility: hidden;
}
.selected .cafe-item-decr-button {
pointer-events: auto;
transform: scale3d(1, 1, 1);
visibility: visible;
}
.cafe-item-incr-button:before,
.cafe-item-incr-button:after,
.cafe-item-decr-button:before {
display: inline-block;
position: absolute;
content: '';
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
width: 14px;
height: 3px;
background-color: #fff;
border-radius: 1px;
z-index: 1;
}
.cafe-item-incr-button:before,
.cafe-item-incr-button:after {
background-color: rgba(255, 255, 255, 0);
transition: background-color var(--animation);
}
.selected .cafe-item-incr-button:before,
.selected .cafe-item-incr-button:after {
background-color: #fff;
}
.cafe-item-incr-button .button-item-label {
transition: transform var(--animation);
}
.selected .cafe-item-incr-button .button-item-label {
transform: scale3d(0.4, 0, 1);
}
.cafe-item-incr-button:after {
width: 3px;
height: 14px;
}
.cafe-status {
position: fixed;
bottom: 0;
left: 0;
right: 0;
display: block;
width: 100%;
padding: 8px 20px;
display: flex;
justify-content: center;
align-items: center;
border-radius: 0;
background-color: #e64d44;
box-shadow: 0 var(--status-height) #e64d44;
color: #fff;
height: var(--status-height);
transition: transform var(--animation), visibility var(--animation);
transform: translateY(var(--status-height));
box-sizing: border-box;
pointer-events: none;
visibility: hidden;
z-index: 11;
}
.cafe-status.shown {
pointer-events: auto;
visibility: visible;
transform: translateY(0);
}
.cafe-order-overview {
display: none; /*temp*/
font-family: 'SF-Pro-Rounded', sans-serif;
background-color: var(--bg-color);
transition: opacity var(--page-animation);
opacity: 0;
}
body.order-mode .cafe-order-overview {
opacity: 1;
}
.cafe-order-header-wrap {
padding: 21px 20px 14px;
display: flex;
align-items: center;
}
.cafe-order-header {
font-size: 17px;
line-height: 21px;
text-transform: uppercase;
flex-grow: 1;
padding: 0;
margin: 0;
}
.cafe-order-edit {
font-size: 15px;
line-height: 18px;
font-weight: 500;
color: var(--accent-color);
}
.cafe-order-item {
display: none;
padding: 5px 20px 5px 14px;
}
.cafe-order-item.selected {
display: flex;
}
.cafe-order-item-label {
flex-grow: 1;
}
.cafe-order-item-photo {
text-align: center;
width: 50px;
height: 50px;
margin-right: 11px;
}
.cafe-order-item-photo .cafe-item-emoji {
font-size: 38px;
line-height: 50px;
}
.cafe-order-item-photo .cafe-item-lottie {
width: 40px;
margin: 4px 0;
}
.cafe-order-item-title {
font-size: 15px;
line-height: 18px;
font-weight: 700;
padding: 3px 0;
}
.cafe-order-item-counter {
color: var(--main-color);
}
.cafe-order-item-description {
font-size: 14px;
line-height: 17px;
font-weight: 500;
-webkit-font-smoothing: antialiased;
color: var(--page-hint-color);
padding: 2px 0;
}
.cafe-order-item-price {
font-size: 14px;
line-height: 17px;
font-weight: 500;
padding: 4px 0;
}
.cafe-text-field-wrap {
margin-top: 14px;
}
.cafe-text-field {
font-family: 'SF-Pro-Rounded', sans-serif;
font-size: 17px;
line-height: 21px;
font-weight: 500;
-webkit-font-smoothing: antialiased;
padding: 12px 20px 13px;
box-sizing: border-box;
display: block;
outline: none;
border: none;
border-radius: 0;
resize: none;
color: var(--text-color);
-webkit-user-select: auto;
user-select: auto;
cursor: auto;
width: 100%;
}
.cafe-text-field::-webkit-input-placeholder {
transition: color var(--animation);
color: var(--placeholder-color);
text-overflow: ellipsis;
}
.cafe-text-field::-moz-placeholder {
transition: color var(--animation);
color: var(--placeholder-color);
text-overflow: ellipsis;
}
.cafe-text-field:-ms-input-placeholder {
transition: color var(--animation);
color: var(--placeholder-color);
text-overflow: ellipsis;
}
.cafe-text-field::placeholder {
text-overflow: ellipsis;
}
.cafe-text-field-hint {
font-family: 'SF-Pro-Rounded', sans-serif;
font-size: 14px;
line-height: 18px;
font-weight: 500;
-webkit-font-smoothing: antialiased;
padding: 10px 20px 14px;
color: var(--hint-color);
}
.button-item.ripple-handler {
position: relative;
}
.ripple-mask {
position: absolute;
left: 0; right: 0;
top: 0; bottom: 0;
transform: translateZ(0);
overflow: hidden;
pointer-events: none;
}
.button-item .ripple-mask {
border-radius: inherit;
}
.button-item .ripple {
position: absolute;
width: 200%;
left: 50%; top: 50%;
margin: -100% 0 0 -100%;
padding-top: 200%;
border-radius: 50%;
background-color: rgba(0, 0, 0, 0.07);
transition:
transform var(--ripple-duration) ease-out,
opacity var(--ripple-duration) ease-out,
background-color var(--ripple-duration) ease-out;
opacity: 0;
}
.button-item-label {
display: inline-block;
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
vertical-align: top;
position: relative;
z-index: 1;
}
.cafe-item-add-button .ripple,
.cafe-item-incr-button .ripple {
background-color: #ed960b;
}
.cafe-item-decr-button .ripple {
background-color: #d3362d;
}
.loading-icon {
position: absolute;
top: 0;
right: 0;
pointer-events: none;
transform: scale(0);
visibility: hidden;
opacity: 0.2;
transform-origin: 50%;
transition: all var(--animation);
}
body.loading .loading-icon {
transition-delay: .4s;
transform: scale(1);
visibility: visible;
opacity: 1;
}
.loading-icon-circle {
stroke: #fff;
stroke-width: 2.25px;
stroke-linecap: round;
fill: transparent;
transform: rotateZ(-90deg);
transform-origin: 50%;
animation: rotate-circle linear 1.5s infinite, resize-circle linear 360s infinite;
stroke-dasharray: calc(var(--radius) * 6.28);
r: var(--radius);
--radius: 9px;
}
@-webkit-keyframes rotate-circle {
from { transform: rotateZ(-90deg); }
to { transform: rotateZ(630deg); }
}
@keyframes rotate-circle {
from { transform: rotateZ(-90deg); }
to { transform: rotateZ(630deg); }
}
@-webkit-keyframes resize-circle {
from { stroke-dashoffset: 0; }
to { stroke-dashoffset: 12500px; }
}
@keyframes resize-circle {
from { stroke-dashoffset: 0; }
to { stroke-dashoffset: 12500px; }
}
@-webkit-keyframes badge-incr {
from, to { transform: scale3d(1, 1, 1); }
40% { transform: scale3d(1.2, 1.2, 1); }
}
@keyframes badge-incr {
from, to { transform: scale3d(1, 1, 1); }
40% { transform: scale3d(1.2, 1.2, 1); }
}
@-webkit-keyframes badge-incr2 {
from, to { transform: scale3d(1, 1, 1); }
40% { transform: scale3d(1.2, 1.2, 1); }
}
@keyframes badge-incr2 {
from, to { transform: scale3d(1, 1, 1); }
40% { transform: scale3d(1.2, 1.2, 1); }
}
@-webkit-keyframes badge-decr {
from, to { transform: scale3d(1, 1, 1); }
40% { transform: scale3d(0.8, 0.8, 1); }
}
@keyframes badge-decr {
from, to { transform: scale3d(1, 1, 1); }
40% { transform: scale3d(0.8, 0.8, 1); }
}
@-webkit-keyframes badge-decr2 {
from, to { transform: scale3d(1, 1, 1); }
40% { transform: scale3d(0.8, 0.8, 1); }
}
@keyframes badge-decr2 {
from, to { transform: scale3d(1, 1, 1); }
40% { transform: scale3d(0.8, 0.8, 1); }
}
@-webkit-keyframes badge-show {
from { transform: scale3d(0.5, 0.5, 1); opacity: 0; visibility: hidden; }
30% { transform: scale3d(1.2, 1.2, 1); }
to { transform: scale3d(1, 1, 1); opacity: 1; visibility: visible; }
}
@keyframes badge-show {
from { transform: scale3d(0.5, 0.5, 1); opacity: 0; visibility: hidden; }
30% { transform: scale3d(1.2, 1.2, 1); }
to { transform: scale3d(1, 1, 1); opacity: 1; visibility: visible; }
}
@-webkit-keyframes badge-hide {
from { transform: scale3d(1, 1, 1); opacity: 1; visibility: visible; }
to { transform: scale3d(0.5, 0.5, 1); opacity: 0; visibility: hidden; }
}
@keyframes badge-hide {
from { transform: scale3d(1, 1, 1); opacity: 1; visibility: visible; }
to { transform: scale3d(0.5, 0.5, 1); opacity: 0; visibility: hidden; }
}

347
data/webappcontent.telegram.org/js/cafe.js Normal file
View file

@ -0,0 +1,347 @@
(function($) {
$.fn.redraw = function() {
return this.map(function(){ this.offsetTop; return this; });
};
})(jQuery);
var Cafe = {
canPay: false,
modeOrder: false,
totalPrice: 0,
init: function(options) {
Telegram.WebApp.ready();
Cafe.apiUrl = options.apiUrl;
Cafe.userId = options.userId;
Cafe.userHash = options.userHash;
Cafe.initLotties();
var userId = Telegram.WebApp.initData && Telegram.WebApp.initData.user && Telegram.WebApp.initData.user.id || Cafe.userId;
$('body').show();
if (!userId) {
Cafe.isClosed = true;
$('body').addClass('closed');
Cafe.showStatus('Cafe is temporarily closed');
return;
}
$('.js-item-lottie').on('click', Cafe.eLottieClicked);
$('.js-item-incr-btn').on('click', Cafe.eIncrClicked);
$('.js-item-decr-btn').on('click', Cafe.eDecrClicked);
$('.js-order-edit').on('click', Cafe.eEditClicked);
$('.js-status').on('click', Cafe.eStatusClicked);
$('.js-order-comment-field').each(function() {
autosize(this);
});
Telegram.WebApp.MainButton.setParams({
text_color: '#fff'
}).onClick(Cafe.mainBtnClicked);
initRipple();
},
initLotties: function() {
$('.js-item-lottie').each(function() {
RLottie.init(this, {
maxDeviceRatio: 2,
cachingModulo: 3,
noAutoPlay: true
});
});
},
eLottieClicked: function(e) {
if (Cafe.isClosed) {
return false;
}
RLottie.playOnce(this);
},
eIncrClicked: function(e) {
e.preventDefault();
var itemEl = $(this).parents('.js-item');
Cafe.incrClicked(itemEl, 1);
},
eDecrClicked: function(e) {
e.preventDefault();
var itemEl = $(this).parents('.js-item');
Cafe.incrClicked(itemEl, -1);
},
eEditClicked: function(e) {
e.preventDefault();
Cafe.toggleMode(false);
},
getOrderItem: function(itemEl) {
var id = itemEl.data('item-id');
return $('.js-order-item').filter(function() {
return ($(this).data('item-id') == id);
});
},
updateItem: function(itemEl, delta) {
var price = +itemEl.data('item-price');
var count = +itemEl.data('item-count') || 0;
var counterEl = $('.js-item-counter', itemEl);
counterEl.text(count ? count : 1);
var isSelected = itemEl.hasClass('selected');
if (!isSelected && count > 0) {
$('.js-item-lottie', itemEl).each(function() {
RLottie.playOnce(this);
});
}
var anim_name = isSelected ? (delta > 0 ? 'badge-incr' : (count > 0 ? 'badge-decr' : 'badge-hide')) : 'badge-show';
var cur_anim_name = counterEl.css('animation-name');
if ((anim_name == 'badge-incr' || anim_name == 'badge-decr') && anim_name == cur_anim_name) {
anim_name += '2';
}
counterEl.css('animation-name', anim_name);
itemEl.toggleClass('selected', count > 0);
var orderItemEl = Cafe.getOrderItem(itemEl);
var orderCounterEl = $('.js-order-item-counter', orderItemEl);
orderCounterEl.text(count ? count : 1);
orderItemEl.toggleClass('selected', count > 0);
var orderPriceEl = $('.js-order-item-price', orderItemEl);
var item_price = count * price;
orderPriceEl.text(Cafe.formatPrice(item_price));
Cafe.updateTotalPrice();
},
incrClicked: function(itemEl, delta) {
if (Cafe.isLoading || Cafe.isClosed) {
return false;
}
var count = +itemEl.data('item-count') || 0;
count += delta;
if (count < 0) {
count = 0;
}
itemEl.data('item-count', count);
Cafe.updateItem(itemEl, delta);
},
formatPrice: function(price) {
return '$' + Cafe.formatNumber(price / 1000, 2, '.', ',');
},
formatNumber: function(number, decimals, decPoint, thousandsSep) {
number = (number + '').replace(/[^0-9+\-Ee.]/g, '')
var n = !isFinite(+number) ? 0 : +number
var prec = !isFinite(+decimals) ? 0 : Math.abs(decimals)
var sep = (typeof thousandsSep === 'undefined') ? ',' : thousandsSep
var dec = (typeof decPoint === 'undefined') ? '.' : decPoint
var s = ''
var toFixedFix = function (n, prec) {
if (('' + n).indexOf('e') === -1) {
return +(Math.round(n + 'e+' + prec) + 'e-' + prec)
} else {
var arr = ('' + n).split('e')
var sig = ''
if (+arr[1] + prec > 0) {
sig = '+'
}
return (+(Math.round(+arr[0] + 'e' + sig + (+arr[1] + prec)) + 'e-' + prec)).toFixed(prec)
}
}
s = (prec ? toFixedFix(n, prec).toString() : '' + Math.round(n)).split('.')
if (s[0].length > 3) {
s[0] = s[0].replace(/\B(?=(?:\d{3})+(?!\d))/g, sep)
}
if ((s[1] || '').length < prec) {
s[1] = s[1] || ''
s[1] += new Array(prec - s[1].length + 1).join('0')
}
return s.join(dec)
},
updateMainButton: function() {
var mainButton = Telegram.WebApp.MainButton;
if (Cafe.modeOrder) {
if (Cafe.isLoading) {
mainButton.setParams({
is_visible: true,
color: '#65c36d'
}).showProgress();
} else {
mainButton.setParams({
is_visible: !!Cafe.canPay,
text: 'PAY ' + Cafe.formatPrice(Cafe.totalPrice),
color: '#31b545'
}).hideProgress();
}
} else {
mainButton.setParams({
is_visible: !!Cafe.canPay,
text: 'VIEW ORDER',
color: '#31b545'
}).hideProgress();
}
},
updateTotalPrice: function() {
var total_price = 0;
$('.js-item').each(function() {
var itemEl = $(this)
var price = +itemEl.data('item-price');
var count = +itemEl.data('item-count') || 0;
total_price += price * count;
});
Cafe.canPay = total_price > 0;
Cafe.totalPrice = total_price;
Cafe.updateMainButton();
},
getOrderData: function() {
var order_data = [];
$('.js-item').each(function() {
var itemEl = $(this)
var id = itemEl.data('item-id');
var count = +itemEl.data('item-count') || 0;
if (count > 0) {
order_data.push({id: id, count: count});
}
});
return JSON.stringify(order_data);
},
toggleMode: function(mode_order) {
Cafe.modeOrder = mode_order;
if (mode_order) {
var height = $('.cafe-items').height();
$('.cafe-order-overview').show();
$('.cafe-items').css('maxHeight', height).redraw();
$('body').addClass('order-mode');
$('.js-order-comment-field').each(function() {
autosize.update(this);
});
Telegram.WebApp.expand();
} else {
$('body').removeClass('order-mode');
setTimeout(function() {
$('.cafe-items').css('maxHeight', '');
$('.cafe-order-overview').hide();
}, 400);
}
Cafe.updateMainButton();
},
toggleLoading: function(loading) {
Cafe.isLoading = loading;
Cafe.updateMainButton();
$('body').toggleClass('loading', !!Cafe.isLoading);
Cafe.updateTotalPrice();
},
mainBtnClicked: function() {
if (!Cafe.canPay || Cafe.isLoading || Cafe.isClosed) {
return false;
}
if (Cafe.modeOrder) {
var comment = $('.js-order-comment-field').val();
var params = {
order_data: Cafe.getOrderData(),
comment: comment
};
if (!Telegram.WebApp.initData ||
!Telegram.WebApp.initData.user ||
!Telegram.WebApp.initData.user.id) {
params.user_id = Cafe.userId;
params.user_hash = Cafe.userHash;
}
Cafe.toggleLoading(true);
Cafe.apiRequest('makeOrder', params, function(result) {
Cafe.toggleLoading(false);
if (result.ok) {
Telegram.WebApp.close();
}
if (result.error) {
Cafe.showStatus(result.error);
}
});
} else {
Cafe.toggleMode(true);
}
},
eStatusClicked: function() {
Cafe.hideStatus();
},
showStatus: function(text) {
clearTimeout(Cafe.statusTo);
$('.js-status').text(text).addClass('shown');
if (!Cafe.isClosed) {
Cafe.statusTo = setTimeout(function(){ Cafe.hideStatus(); }, 2500);
}
},
hideStatus: function() {
clearTimeout(Cafe.statusTo);
$('.js-status').removeClass('shown');
},
apiRequest: function(method, data, onCallback) {
var authData = Telegram.WebApp.initDataRaw || '';
$.ajax(Cafe.apiUrl, {
type: 'POST',
data: $.extend(data, {_auth: authData, method: method}),
dataType: 'json',
xhrFields: {
withCredentials: true
},
success: function(result) {
onCallback && onCallback(result);
},
error: function(xhr) {
onCallback && onCallback({error: 'Server error'});
}
});
}
};
/*!
Autosize 3.0.20
license: MIT
http://www.jacklmoore.com/autosize
*/
!function(e,t){if("function"==typeof define&&define.amd)define(["exports","module"],t);else if("undefined"!=typeof exports&&"undefined"!=typeof module)t(exports,module);else{var n={exports:{}};t(n.exports,n),e.autosize=n.exports}}(this,function(e,t){"use strict";function n(e){function t(){var t=window.getComputedStyle(e,null);"vertical"===t.resize?e.style.resize="none":"both"===t.resize&&(e.style.resize="horizontal"),s="content-box"===t.boxSizing?-(parseFloat(t.paddingTop)+parseFloat(t.paddingBottom)):parseFloat(t.borderTopWidth)+parseFloat(t.borderBottomWidth),isNaN(s)&&(s=0),l()}function n(t){var n=e.style.width;e.style.width="0px",e.offsetWidth,e.style.width=n,e.style.overflowY=t}function o(e){for(var t=[];e&&e.parentNode&&e.parentNode instanceof Element;)e.parentNode.scrollTop&&t.push({node:e.parentNode,scrollTop:e.parentNode.scrollTop}),e=e.parentNode;return t}function r(){var t=e.style.height,n=o(e),r=document.documentElement&&document.documentElement.scrollTop;e.style.height="auto";var i=e.scrollHeight+s;return 0===e.scrollHeight?void(e.style.height=t):(e.style.height=i+"px",u=e.clientWidth,n.forEach(function(e){e.node.scrollTop=e.scrollTop}),void(r&&(document.documentElement.scrollTop=r)))}function l(){r();var t=Math.round(parseFloat(e.style.height)),o=window.getComputedStyle(e,null),i=Math.round(parseFloat(o.height));if(i!==t?"visible"!==o.overflowY&&(n("visible"),r(),i=Math.round(parseFloat(window.getComputedStyle(e,null).height))):"hidden"!==o.overflowY&&(n("hidden"),r(),i=Math.round(parseFloat(window.getComputedStyle(e,null).height))),a!==i){a=i;var l=d("autosize:resized");try{e.dispatchEvent(l)}catch(e){}}}if(e&&e.nodeName&&"TEXTAREA"===e.nodeName&&!i.has(e)){var s=null,u=e.clientWidth,a=null,p=function(){e.clientWidth!==u&&l()},c=function(t){window.removeEventListener("resize",p,!1),e.removeEventListener("input",l,!1),e.removeEventListener("keyup",l,!1),e.removeEventListener("autosize:destroy",c,!1),e.removeEventListener("autosize:update",l,!1),Object.keys(t).forEach(function(n){e.style[n]=t[n]}),i.delete(e)}.bind(e,{height:e.style.height,resize:e.style.resize,overflowY:e.style.overflowY,overflowX:e.style.overflowX,wordWrap:e.style.wordWrap});e.addEventListener("autosize:destroy",c,!1),"onpropertychange"in e&&"oninput"in e&&e.addEventListener("keyup",l,!1),window.addEventListener("resize",p,!1),e.addEventListener("input",l,!1),e.addEventListener("autosize:update",l,!1),e.style.overflowX="hidden",e.style.wordWrap="break-word",i.set(e,{destroy:c,update:l}),t()}}function o(e){var t=i.get(e);t&&t.destroy()}function r(e){var t=i.get(e);t&&t.update()}var i="function"==typeof Map?new Map:function(){var e=[],t=[];return{has:function(t){return e.indexOf(t)>-1},get:function(n){return t[e.indexOf(n)]},set:function(n,o){e.indexOf(n)===-1&&(e.push(n),t.push(o))},delete:function(n){var o=e.indexOf(n);o>-1&&(e.splice(o,1),t.splice(o,1))}}}(),d=function(e){return new Event(e,{bubbles:!0})};try{new Event("test")}catch(e){d=function(e){var t=document.createEvent("Event");return t.initEvent(e,!0,!1),t}}var l=null;"undefined"==typeof window||"function"!=typeof window.getComputedStyle?(l=function(e){return e},l.destroy=function(e){return e},l.update=function(e){return e}):(l=function(e,t){return e&&Array.prototype.forEach.call(e.length?e:[e],function(e){return n(e,t)}),e},l.destroy=function(e){return e&&Array.prototype.forEach.call(e.length?e:[e],o),e},l.update=function(e){return e&&Array.prototype.forEach.call(e.length?e:[e],r),e}),t.exports=l});
/* Ripple */
function initRipple() {
if (!document.querySelectorAll) return;
var rippleHandlers = document.querySelectorAll('.ripple-handler');
var redraw = function(el) { el.offsetTop + 1; }
var isTouch = ('ontouchstart' in window);
for (var i = 0; i < rippleHandlers.length; i++) {
(function(rippleHandler) {
function onRippleStart(e) {
var rippleMask = rippleHandler.querySelector('.ripple-mask');
if (!rippleMask) return;
var rect = rippleMask.getBoundingClientRect();
if (e.type == 'touchstart') {
var clientX = e.targetTouches[0].clientX;
var clientY = e.targetTouches[0].clientY;
} else {
var clientX = e.clientX;
var clientY = e.clientY;
}
var rippleX = (clientX - rect.left) - rippleMask.offsetWidth / 2;
var rippleY = (clientY - rect.top) - rippleMask.offsetHeight / 2;
var ripple = rippleHandler.querySelector('.ripple');
ripple.style.transition = 'none';
redraw(ripple);
ripple.style.transform = 'translate3d(' + rippleX + 'px, ' + rippleY + 'px, 0) scale3d(0.2, 0.2, 1)';
ripple.style.opacity = 1;
redraw(ripple);
ripple.style.transform = 'translate3d(' + rippleX + 'px, ' + rippleY + 'px, 0) scale3d(1, 1, 1)';
ripple.style.transition = '';
function onRippleEnd(e) {
ripple.style.transitionDuration = 'var(--ripple-end-duration, .2s)';
ripple.style.opacity = 0;
if (isTouch) {
document.removeEventListener('touchend', onRippleEnd);
document.removeEventListener('touchcancel', onRippleEnd);
} else {
document.removeEventListener('mouseup', onRippleEnd);
}
}
if (isTouch) {
document.addEventListener('touchend', onRippleEnd);
document.addEventListener('touchcancel', onRippleEnd);
} else {
document.addEventListener('mouseup', onRippleEnd);
}
}
if (isTouch) {
rippleHandler.removeEventListener('touchstart', onRippleStart);
rippleHandler.addEventListener('touchstart', onRippleStart);
} else {
rippleHandler.removeEventListener('mousedown', onRippleStart);
rippleHandler.addEventListener('mousedown', onRippleStart);
}
})(rippleHandlers[i]);
}
}