From 354358e860f889c91b3f7f0ba176b03e1025fe64 Mon Sep 17 00:00:00 2001
From: Egor <egor.andrianovv@gmail.com>
Date: Wed, 12 Nov 2025 05:28:25 +0300
Subject: [PATCH] Create fail.html

---
 miniapp/payment/fail.html | 282 ++++++++++++++++++++++++++++++++++++++
 1 file changed, 282 insertions(+)
 create mode 100644 miniapp/payment/fail.html
diff --git a/miniapp/payment/fail.html b/miniapp/payment/fail.html
new file mode 100644
index 00000000..269ea4d4
--- /dev/null
+++ b/miniapp/payment/fail.html
@@ -0,0 +1,282 @@
+<!DOCTYPE html>
+<html lang="ru">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Оплата не прошла</title>
+    <script src="https://telegram.org/js/telegram-web-app.js"></script>
+    <style>
+        @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');
+        @import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@700&display=swap');
+
+        :root {
+            --cyber-grid-color: rgba(0, 200, 255, 0.1); 
+            --cyber-line-color: rgba(0, 255, 200, 0.1);
+            --brand-neon-color: #00aaff;
+            --error-neon-color: #ff4d4d;
+            --bg-color: #1a1a2e;
+            --container-bg-color: rgba(20, 20, 35, 0.85);
+            --text-primary: #ffffff;
+            --text-secondary: #c0c0d0;
+        }
+
+        body {
+            font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+            background-color: var(--bg-color);
+            margin: 0;
+            
+            /* [!] ИСПРАВЛЕНИЕ: Уменьшен горизонтальный отступ для body */
+            padding: 20px 15px;
+            
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            
+            /* [!] ИСПРАВЛЕНИЕ: height -> min-height для лучшей совместимости */
+            min-height: 100vh;
+            
+            box-sizing: border-box;
+            text-align: center;
+            color: var(--text-secondary);
+            overflow: hidden;
+            position: relative;
+        }
+
+        body::before,
+        body::after {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            pointer-events: none;
+            z-index: -1;
+        }
+
+        body::before {
+            background: 
+                linear-gradient(to right, var(--cyber-grid-color) 1px, transparent 1px),
+                linear-gradient(to bottom, var(--cyber-grid-color) 1px, transparent 1px);
+            background-size: 50px 50px;
+            animation: gridScroll 20s linear infinite;
+        }
+
+        @keyframes gridScroll {
+            from { background-position: 0 0; }
+            to { background-position: -50px -50px; }
+        }
+
+        body::after {
+            background: 
+                linear-gradient(45deg, transparent 49%, var(--cyber-line-color) 50%, transparent 51%),
+                linear-gradient(-45deg, transparent 49%, var(--cyber-line-color) 50%, transparent 51%);
+            background-size: 100% 100%;
+            animation: cyberScan 10s linear infinite alternate;
+            opacity: 0.3;
+        }
+
+        @keyframes cyberScan {
+            0% { background-position: 0% 0%; }
+            100% { background-position: 100% 100%; }
+        }
+
+        .container {
+            background-color: var(--container-bg-color);
+            border-radius: 16px;
+            
+            /* [!] ИСПРАВЛЕНИЕ: Уменьшен горизонтальный отступ для .container */
+            padding: 30px 25px;
+            
+            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
+            max-width: 400px;
+            width: 100%;
+            transform: scale(0.95);
+            opacity: 0;
+            animation: fadeInScale 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.2s forwards;
+            position: relative;
+            z-index: 1;
+            border: 1px solid rgba(0, 200, 255, 0.2);
+            backdrop-filter: blur(5px);
+        }
+
+        @keyframes fadeInScale {
+            to {
+                transform: scale(1);
+                opacity: 1;
+            }
+        }
+
+        .logo-container {
+            margin: 0 auto 25px auto;
+            line-height: 0; 
+            overflow: hidden;
+            position: relative;
+            height: 60px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        }
+
+        .logo-text {
+            font-family: 'Orbitron', sans-serif;
+            font-size: 48px;
+            color: var(--brand-neon-color);
+            text-shadow: 0 0 10px var(--brand-neon-color), 0 0 20px var(--brand-neon-color);
+            opacity: 0;
+            transform: translateY(-20px);
+            animation: logoSlideIn 0.8s ease-out 0.4s forwards, logoPulse 2s infinite ease-in-out 1.5s forwards;
+            white-space: nowrap;
+            letter-spacing: 2px;
+        }
+
+        @keyframes logoSlideIn {
+            to {
+                opacity: 1;
+                transform: translateY(0);
+            }
+        }
+
+        @keyframes logoPulse {
+            0% { transform: scale(1); text-shadow: 0 0 10px var(--brand-neon-color), 0 0 20px var(--brand-neon-color); }
+            50% { transform: scale(1.02); text-shadow: 0 0 15px var(--brand-neon-color), 0 0 25px var(--brand-neon-color), 0 0 35px var(--brand-neon-color); }
+            100% { transform: scale(1); text-shadow: 0 0 10px var(--brand-neon-color), 0 0 20px var(--brand-neon-color); }
+        }
+
+        .error-icon {
+            width: 80px;
+            height: 80px;
+            margin: 0 auto 20px auto;
+        }
+        
+        .error-icon svg {
+            width: 100%;
+            height: 100%;
+            filter: drop-shadow(0 0 8px rgba(255, 77, 77, 0.7));
+        }
+
+        .error-circle {
+            stroke-dasharray: 166;
+            stroke-dashoffset: 166;
+            stroke-width: 3;
+            stroke-miterlimit: 10;
+            stroke: var(--error-neon-color);
+            fill: none;
+            animation: stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) 0.5s forwards;
+        }
+
+        .error-line {
+            transform-origin: 50% 50%;
+            stroke-dasharray: 48;
+            stroke-dashoffset: 48;
+            stroke-width: 4;
+            stroke: var(--error-neon-color);
+            fill: none;
+            animation: stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 1s forwards;
+        }
+        
+        @keyframes stroke {
+            100% {
+                stroke-dashoffset: 0;
+            }
+        }
+
+        h1 {
+            font-size: 24px;
+            font-weight: 700;
+            margin-bottom: 15px;
+            color: var(--text-primary);
+            text-shadow: none;
+        }
+
+        .info-text, .instruction-text {
+            font-size: 16px;
+            line-height: 1.6;
+            color: var(--text-secondary);
+            margin-bottom: 15px;
+            text-shadow: none;
+        }
+        
+        .instruction-text {
+            margin-bottom: 30px;
+        }
+
+        .cta-button {
+            display: inline-block;
+            width: 100%;
+            padding: 14px;
+            font-size: 16px;
+            font-weight: 700;
+            color: var(--bg-color);
+            background-color: var(--brand-neon-color);
+            border: none;
+            border-radius: 10px;
+            text-decoration: none;
+            cursor: pointer;
+            transition: all 0.3s ease;
+            box-sizing: border-box;
+            box-shadow: 0 0 15px rgba(0, 170, 255, 0.6);
+        }
+
+        .cta-button:hover {
+            background-color: #00c0ff;
+            transform: translateY(-2px);
+            box-shadow: 0 0 20px rgba(0, 170, 255, 0.8), 0 0 30px rgba(0, 170, 255, 0.4);
+        }
+        .cta-button:active {
+            transform: translateY(0);
+            box-shadow: 0 0 10px rgba(0, 170, 255, 0.5);
+        }
+
+    </style>
+</head>
+<body>
+
+    <div class="container">
+        
+        <div class="logo-container">
+            <span class="logo-text">Bedolaga</span>
+        </div>
+
+        <div class="error-icon">
+            <svg class="error-svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 52 52">
+                <circle class="error-circle" cx="26" cy="26" r="25" fill="none"/>
+                <path class="error-line" fill="none" d="M16 16 36 36"/>
+                <path class="error-line" fill="none" d="M36 16 16 36"/>
+            </svg>
+        </div>
+
+        <h1>Оплата не прошла</h1>
+        
+        <p class="info-text">
+            К сожалению, не удалось обработать ваш платеж. Средства не были списаны.
+        </p>
+
+        <p class="instruction-text">
+            Пожалуйста, вернитесь в бота, проверьте данные и попробуйте еще раз.
+        </p>
+
+        <button id="close-btn" class="cta-button">
+            Вернуться в бота
+        </button>
+
+    </div>
+
+    <script>
+        try {
+            if (window.Telegram && window.Telegram.WebApp) {
+                Telegram.WebApp.ready();
+                var closeButton = document.getElementById('close-btn');
+                closeButton.addEventListener('click', function() {
+                    Telegram.WebApp.close();
+                });
+            } else {
+                console.warn('Telegram WebApp JS not loaded or not in TWA environment.');
+            }
+        } catch (e) {
+            console.error(e);
+        }
+    </script>
+
+</body>
+</html>
