Update content of files

This commit is contained in:
GitHub Action 2024-05-27 20:43:36 +00:00
parent 12d08da8c5
commit 585e0516e5
3 changed files with 326 additions and 181 deletions

View file

@ -17,192 +17,220 @@
Telegram.WebApp.onEvent('themeChanged', setThemeClass);
setThemeClass();
</script>
<link href="/css/cafe.css?20" rel="stylesheet">
<link href="/css/cafe.css?21" 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">Taco</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 stars-only js-item" data-item-id="101" data-item-price="1">
<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>
<span class="cafe-item-new">New</span>
</div>
<div class="cafe-item-label">
<span class="cafe-item-title">Cake</span>
<span class="cafe-item-price"><i class="star-icon">⭐️</i> 1</span>
</div>
<div class="cafe-item-buttons">
<button class="cafe-item-buy-button js-item-buy-btn button-item ripple-handler">
<span class="button-item-label">Buy</span>
<span class="ripple-mask"><span class="ripple"></span></span>
</button>
</div>
</div> <div class="cafe-item js-item" data-item-id="1" data-item-price="499">
<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="149">
<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="349">
<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="399">
<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">Taco</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="799">
<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="149">
<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="199">
<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="149">
<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 no-stars-only js-item" data-item-id="9" data-item-price="1099">
<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">
<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">
@ -210,20 +238,21 @@
<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> <div class="cafe-item js-item" data-item-id="10" data-item-price="599">
<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">
<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">
@ -231,20 +260,21 @@
<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> <div class="cafe-item js-item" data-item-id="11" data-item-price="399">
<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">
<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">
@ -252,20 +282,21 @@
<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> <div class="cafe-item js-item" data-item-id="12" data-item-price="799">
<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">
<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">
@ -282,7 +313,19 @@
<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 js-order-item" data-item-id="101">
<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"><i class="star-icon">⭐️</i> 1</div>
</div> <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">
@ -441,7 +484,7 @@
</div>
<script src="https://tg.dev/js/jquery.min.js"></script>
<script src="https://tg.dev/js/tgsticker.js?31"></script>
<script src="/js/cafe.js?29"></script>
<script src="/js/cafe.js?30"></script>
<script>Cafe.init({"apiUrl":"\/cafe\/api","mode":null,"userId":0,"userHash":null});</script>
</body>
</html>

View file

@ -91,6 +91,14 @@ body.order-mode .cafe-items {
padding: 0;
margin: 0;
}
.stars-only,
.stars-supported .no-stars-only {
display: none;
}
.stars-supported .stars-only {
display: block;
}
.cafe-item-photo {
position: relative;
height: 78px;
@ -121,6 +129,25 @@ body.order-mode .cafe-items {
width: 100%;
height: 100%;
}
.cafe-item-new {
position: absolute;
right: 50%;
bottom: 10px;
margin-right: -40px;
display: inline-block;
font-family: var(--default-font);
font-weight: 500;
font-size: 11px;
line-height: 14px;
padding: 2px 5px;
border-radius: 4px;
box-sizing: border-box;
background-color: var(--accent-color);
text-transform: uppercase;
color: #fff;
outline: none;
border: none;
}
.cafe-item-label {
display: flex;
justify-content: center;
@ -184,6 +211,14 @@ button,
pointer-events: none;
z-index: 3;
}
.cafe-item-buy-button {
position: absolute !important;
background-color: var(--accent-color);
top: 0;
right: 0;
transition: width var(--animation);
width: 80px;
}
.cafe-item-incr-button {
position: absolute !important;
top: 0;
@ -454,6 +489,20 @@ body.order-mode .cafe-order-overview {
background-color: #d3362d;
}
i.star-icon {
display: inline-block;
vertical-align: top;
white-space: nowrap;
font-style: normal;
overflow: hidden;
position: relative;
background: url('data:image/svg+xml,%3Csvg%20height%3D%2245%22%20viewBox%3D%220%200%2046%2045%22%20width%3D%2246%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22a%22%20x1%3D%2225%25%22%20x2%3D%2274.92%25%22%20y1%3D%22.825%25%22%20y2%3D%22107.86%25%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%23ffd951%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23ffb222%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%22b%22%20x1%3D%2250%25%22%20x2%3D%2250%25%22%20y1%3D%220%25%22%20y2%3D%2299.795%25%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%23e58f0d%22%2F%3E%3Cstop%20offset%3D%22.99963%22%20stop-color%3D%22%23eb7915%22%2F%3E%3C%2FlinearGradient%3E%3Cpath%20id%3D%22c%22%20d%3D%22m15.45%2013.17%205.29-10.61c.61-1.22%202.09-1.71%203.3-1.09.47.24.86.63%201.09%201.11l5%2010.23c.41.83%201.21%201.4%202.12%201.51l10.47%201.27c1.42.17%202.43%201.47%202.26%202.91-.07.59-.34%201.14-.76%201.56l-8.27%208.2c-.33.33-.49.8-.44%201.27l1.38%2011.08c.2%201.59-.92%203.04-2.49%203.23-.59.08-1.19-.04-1.72-.32l-8.74-4.81c-.63-.35-1.39-.36-2.03-.03l-9.06%204.68c-1.27.66-2.83.14-3.48-1.14-.25-.49-.34-1.03-.26-1.57l.72-5.08c.36-2.49%201.89-4.64%204.1-5.78l10.06-5.17c.27-.14.37-.47.24-.74-.11-.21-.34-.33-.57-.29l-12.3%201.77c-1.88.27-3.78-.27-5.26-1.48l-4.09-3.36c-1.17-.96-1.35-2.7-.4-3.88.44-.55%201.08-.9%201.77-.99l10.5-1.36c.68-.09%201.26-.51%201.57-1.12z%22%2F%3E%3Cfilter%20id%3D%22d%22%20height%3D%22111.7%25%22%20width%3D%22111.4%25%22%20x%3D%22-5.7%25%22%20y%3D%22-5.9%25%22%3E%3CfeOffset%20dx%3D%222%22%20dy%3D%223%22%20in%3D%22SourceAlpha%22%20result%3D%22shadowOffsetInner1%22%2F%3E%3CfeComposite%20in%3D%22shadowOffsetInner1%22%20in2%3D%22SourceAlpha%22%20k2%3D%22-1%22%20k3%3D%221%22%20operator%3D%22arithmetic%22%20result%3D%22shadowInnerInner1%22%2F%3E%3CfeColorMatrix%20in%3D%22shadowInnerInner1%22%20type%3D%22matrix%22%20values%3D%220%200%200%200%201%20%20%200%200%200%200%201%20%20%200%200%200%200%201%20%200%200%200%200.65667938%200%22%2F%3E%3C%2Ffilter%3E%3C%2Fdefs%3E%3Cg%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%3Cuse%20fill%3D%22url%28%23a%29%22%20fill-rule%3D%22evenodd%22%20xlink%3Ahref%3D%22%23c%22%2F%3E%3Cuse%20fill%3D%22%23000%22%20filter%3D%22url%28%23d%29%22%20xlink%3Ahref%3D%22%23c%22%2F%3E%3Cuse%20stroke%3D%22url%28%23b%29%22%20stroke-width%3D%222%22%20xlink%3Ahref%3D%22%23c%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E') no-repeat center;
background-size: contain;
letter-spacing: 10em;
text-indent: -10em;
width: 1.3em;
}
.loading-icon {
position: absolute;

View file

@ -16,7 +16,8 @@ var Cafe = {
Cafe.userId = options.userId;
Cafe.userHash = options.userHash;
Cafe.initLotties();
$('body').show();
var starsSupported = Telegram.WebApp.isVersionAtLeast('7.4');
$('body').toggleClass('stars-supported', starsSupported).show();
if ((!Telegram.WebApp.initDataUnsafe ||
!Telegram.WebApp.initDataUnsafe.query_id) &&
Cafe.mode != 'inline' &&
@ -29,6 +30,7 @@ var Cafe = {
$('.js-item-lottie').on('click', Cafe.eLottieClicked);
$('.js-item-incr-btn').on('click', Cafe.eIncrClicked);
$('.js-item-decr-btn').on('click', Cafe.eDecrClicked);
$('.js-item-buy-btn').on('click', Cafe.eBuyClicked);
$('.js-order-edit').on('click', Cafe.eEditClicked);
$('.js-status').on('click', Cafe.eStatusClicked);
$('.js-order-comment-field').each(function() {
@ -68,6 +70,12 @@ var Cafe = {
var itemEl = $(this).parents('.js-item');
Cafe.incrClicked(itemEl, -1);
},
eBuyClicked: function(e) {
e.preventDefault();
Telegram.WebApp.HapticFeedback.impactOccurred('light');
var itemEl = $(this).parents('.js-item');
Cafe.buyClicked(itemEl);
},
eEditClicked: function(e) {
e.preventDefault();
Cafe.toggleMode(false);
@ -199,7 +207,7 @@ var Cafe = {
getOrderData: function() {
var order_data = [];
$('.js-item').each(function() {
var itemEl = $(this)
var itemEl = $(this);
var id = itemEl.data('item-id');
var count = +itemEl.data('item-count') || 0;
if (count > 0) {
@ -313,6 +321,51 @@ var Cafe = {
Cafe.toggleMode(true);
}
},
buyClicked: function(itemEl) {
if (Cafe.isLoading || Cafe.isClosed) {
return false;
}
var id = itemEl.data('item-id');
var params = {
item_id: id
};
if (Cafe.mode) {
params.mode = Cafe.mode;
}
if (Cafe.userId && Cafe.userHash) {
params.user_id = Cafe.userId;
params.user_hash = Cafe.userHash;
}
var invoiceSupported = Telegram.WebApp.isVersionAtLeast('6.1');
if (invoiceSupported) {
params.invoice = 1;
}
Cafe.toggleLoading(true);
Cafe.apiRequest('buyItem', params, function(result) {
Cafe.toggleLoading(false);
if (result.ok) {
if (invoiceSupported) {
Telegram.WebApp.openInvoice(result.invoice_url, function(status) {
if (status == 'paid') {
Telegram.WebApp.close();
} else if (status == 'failed') {
Telegram.WebApp.HapticFeedback.notificationOccurred('error');
Cafe.showStatus('Payment has been failed.');
} else {
Telegram.WebApp.HapticFeedback.notificationOccurred('warning');
Cafe.showStatus('You have cancelled this order.');
}
});
} else {
Telegram.WebApp.close();
}
}
if (result.error) {
Telegram.WebApp.HapticFeedback.notificationOccurred('error');
Cafe.showStatus(result.error);
}
});
},
eStatusClicked: function() {
Cafe.hideStatus();
},