pilot
/
restoran_max_bot
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

✅ Создан: templates/max_bot/landing.html — Создан шаблон минилендинга с логотипом, названием, описанием и двумя кнопками с иконками Font Awesome

Browse Source
main
pilot 1 month ago
parent 291ce655cb
commit e5a823c99f
2 changed files with 479 additions and 0 deletions
Show Stats Download Patch File Download Diff File

337
restoran_max_bot/templates/max_bot/landing.html
Unescape View File

@ -0,0 +1,337 @@
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>{{ brand|default:"Ресторан" }}</title>
<!-- Font Awesome CDN -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
padding: 20px;
}
.container {
max-width: 420px;
width: 100%;
background: #ffffff;
border-radius: 28px;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
padding: 40px 28px 32px;
text-align: center;
animation: fadeInUp 0.6s ease-out;
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* Логотип */
.logo-wrapper {
width: 110px;
height: 110px;
border-radius: 50%;
background: #f8f9fa;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 16px;
overflow: hidden;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
border: 3px solid #f0f0f0;
}
.logo-wrapper img {
width: 100%;
height: 100%;
object-fit: contain;
padding: 8px;
}
.logo-wrapper .placeholder {
font-size: 48px;
color: #ccc;
}
/* Название */
.brand-name {
font-size: 26px;
font-weight: 700;
color: #1a1a2e;
margin-bottom: 6px;
letter-spacing: -0.5px;
}
/* Описание */
.description {
font-size: 15px;
color: #6b7280;
line-height: 1.6;
margin-bottom: 32px;
max-width: 90%;
margin-left: auto;
margin-right: auto;
}
/* Кнопки */
.menu-grid {
display: flex;
flex-direction: column;
gap: 16px;
}
.menu-btn {
display: flex;
align-items: center;
justify-content: center;
gap: 14px;
padding: 18px 24px;
border-radius: 16px;
border: none;
font-size: 18px;
font-weight: 600;
text-decoration: none;
cursor: pointer;
transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
touch-action: manipulation;
-webkit-tap-highlight-color: transparent;
width: 100%;
position: relative;
overflow: hidden;
}
/* Эффект ripple */
.menu-btn::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 0;
border-radius: 50%;
background: rgba(255, 255, 255, 0.2);
transform: translate(-50%, -50%);
transition: width 0.6s, height 0.6s;
}
.menu-btn:active::after {
width: 300px;
height: 300px;
}
/* Кнопка Max Bot */
.btn-max {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
}
.btn-max:hover {
transform: translateY(-3px) scale(1.02);
box-shadow: 0 8px 30px rgba(102, 126, 234, 0.5);
}
.btn-max:active {
transform: translateY(0px) scale(0.98);
}
.btn-max i {
font-size: 24px;
color: white;
}
/* Кнопка Telegram */
.btn-telegram {
background: linear-gradient(135deg, #0088cc 0%, #2aabee 100%);
color: white;
box-shadow: 0 4px 15px rgba(0, 136, 204, 0.4);
}
.btn-telegram:hover {
transform: translateY(-3px) scale(1.02);
box-shadow: 0 8px 30px rgba(0, 136, 204, 0.5);
}
.btn-telegram:active {
transform: translateY(0px) scale(0.98);
}
.btn-telegram i {
font-size: 24px;
color: white;
}
.menu-btn:disabled {
opacity: 0.6;
cursor: not-allowed;
transform: none !important;
}
/* Toast уведомление */
.toast {
visibility: hidden;
min-width: 280px;
max-width: 90%;
background: rgba(50, 50, 50, 0.95);
color: #fff;
text-align: center;
border-radius: 12px;
padding: 18px 24px;
position: fixed;
z-index: 1000;
left: 50%;
bottom: 30px;
transform: translateX(-50%);
font-size: 15px;
line-height: 1.5;
opacity: 0;
transition: opacity 0.4s ease, visibility 0.4s ease;
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);
backdrop-filter: blur(10px);
}
.toast.show {
visibility: visible;
opacity: 1;
}
.toast a {
color: #4fc3f7;
text-decoration: underline;
font-weight: 500;
}
.toast .toast-icon {
display: block;
font-size: 32px;
margin-bottom: 8px;
}
.footer {
margin-top: 28px;
font-size: 12px;
color: #b0b0b0;
letter-spacing: 0.3px;
}
@media (max-width: 480px) {
.container {
padding: 28px 20px 24px;
}
.brand-name {
font-size: 22px;
}
.menu-btn {
font-size: 16px;
padding: 16px 20px;
}
.logo-wrapper {
width: 90px;
height: 90px;
}
.description {
font-size: 14px;
}
}
</style>
</head>
<body>
<div class="container">
<!-- Логотип -->
<div class="logo-wrapper">
{% if logo %}
{% if "http" in logo %}
<img src="{{ logo }}" alt="{{ brand|default:"Логотип" }}">
{% else %}
<img src="https://cdn.telefon-ip.ru/{{ logo }}" alt="{{ brand|default:"Логотип" }}">
{% endif %}
{% else %}
<span class="placeholder">🍽️</span>
{% endif %}
</div>
<!-- Название -->
<div class="brand-name">{{ brand|default:"Ресторан" }}</div>
<!-- Описание -->
{% if description %}
<div class="description">{{ description }}</div>
{% endif %}
<!-- Кнопки -->
<div class="menu-grid">
<!-- Max Bot -->
{% if max_bot_url %}
<a href="{{ max_bot_url }}" class="menu-btn btn-max" target="_blank" rel="noopener noreferrer">
<i class="fas fa-robot"></i>
Max Bot
</a>
{% else %}
<button class="menu-btn btn-max" id="maxBotBtn" disabled>
<i class="fas fa-robot"></i>
Max Bot
</button>
{% endif %}
<!-- Telegram -->
{% if telegram_url %}
<a href="{{ telegram_url }}" class="menu-btn btn-telegram" target="_blank" rel="noopener noreferrer">
<i class="fab fa-telegram-plane"></i>
Telegram Bot
</a>
{% else %}
<button class="menu-btn btn-telegram" id="telegramBtn">
<i class="fab fa-telegram-plane"></i>
Telegram Bot
</button>
{% endif %}
</div>
<div class="footer">Выберите удобный способ связи</div>
</div>
<!-- Toast -->
<div class="toast" id="toast">
<span class="toast-icon">🔔</span>
<span id="toastMessage"></span>
</div>
<script>
(function() {
const toast = document.getElementById('toast');
const toastMessage = document.getElementById('toastMessage');
function showToast(message) {
toastMessage.innerHTML = message;
toast.className = 'toast show';
clearTimeout(window.toastTimeout);
window.toastTimeout = setTimeout(function() {
toast.className = 'toast';
}, 5000);
}
// Обработка кнопки Telegram, если нет ссылки
const telegramBtn = document.getElementById('telegramBtn');
if (telegramBtn) {
telegramBtn.addEventListener('click', function(e) {
e.preventDefault();
showToast('Мы не нашли Telegram-бота для этого заведения.<br>Обратитесь в заведение или напишите на <a href="mailto:support@telefon-ip.ru">support@telefon-ip.ru</a>');
});
}
// Обработка кнопки Max Bot, если нет ссылки
const maxBtn = document.getElementById('maxBotBtn');
if (maxBtn) {
maxBtn.addEventListener('click', function(e) {
e.preventDefault();
showToast('Мы не нашли Max Bot для этого заведения.<br>Обратитесь в заведение или напишите на <a href="mailto:support@telefon-ip.ru">support@telefon-ip.ru</a>');
});
}
})();
</script>
</body>
</html>

142
restoran_max_bot/templates/max_bot/ui_menu.html
Unescape View File

@ -0,0 +1,142 @@
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>Меню ресторана</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
background: #f8f9fa;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
padding: 20px;
}
.container {
max-width: 400px;
width: 100%;
background: #ffffff;
border-radius: 24px;
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
padding: 30px 20px 24px;
text-align: center;
}
.logo {
width: 80px;
height: 80px;
border-radius: 50%;
background: #2e7d32;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 16px;
color: white;
font-size: 36px;
font-weight: 700;
}
.title {
font-size: 24px;
font-weight: 700;
color: #1a1a2e;
margin-bottom: 6px;
}
.subtitle {
font-size: 14px;
color: #6b7280;
margin-bottom: 28px;
}
.menu-grid {
display: flex;
flex-direction: column;
gap: 14px;
}
.menu-btn {
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
padding: 18px 20px;
border-radius: 16px;
border: none;
background: #f1f3f5;
color: #1a1a2e;
font-size: 18px;
font-weight: 500;
text-decoration: none;
cursor: pointer;
transition: background 0.2s, transform 0.1s;
touch-action: manipulation;
-webkit-tap-highlight-color: transparent;
}
.menu-btn:active {
transform: scale(0.97);
}
.menu-btn.primary {
background: #2e7d32;
color: white;
}
.menu-btn.primary:active {
background: #1b5e20;
}
.menu-btn .icon {
font-size: 24px;
}
.footer {
margin-top: 28px;
font-size: 12px;
color: #9ca3af;
}
@media (max-width: 480px) {
.container {
padding: 24px 16px 20px;
}
.title {
font-size: 20px;
}
.menu-btn {
font-size: 16px;
padding: 16px 16px;
}
}
</style>
</head>
<body>
<div class="container">
<div class="logo">🍽️</div>
<div class="title">Добро пожаловать!</div>
<div class="subtitle">Выберите раздел</div>
<div class="menu-grid">
<a href="#" class="menu-btn primary" id="menuBtn">
<span class="icon">📋</span>
Меню ресторана
</a>
<a href="#" class="menu-btn" id="aboutBtn">
<span class="icon">ℹ️</span>
О ресторане
</a>
</div>
<div class="footer">MAX UI • версия 1.0</div>
</div>
<script>
document.getElementById('menuBtn').addEventListener('click', function(e) {
e.preventDefault();
alert('Здесь будет загрузка меню ресторана.');
});
document.getElementById('aboutBtn').addEventListener('click', function(e) {
e.preventDefault();
alert('Здесь будет информация о ресторане.');
});
</script>
</body>
</html>
Write Preview
Loading…
Cancel
Save