API tools faq
paste
Advertisement
Vitaliy_Novichikhin

index.html

Vitaliy_Novichikhin
Apr 11th, 2025
310
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 6.84 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html lang="ru">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>Этикет. Как лучше понимать друг друга?! Делайте предзаказ на книгу сейчас!</title>
  7.    
  8.     <!-- Main configuration variable -->
  9.     <script>
  10.         // ===== SINGLE CONFIGURATION POINT =====
  11.         const channelConfig = {
  12.             link: 'https://t.me/s/eeetiquette',
  13.             title: 'Этикет и взаимопонимание',
  14.             brand: 'Книга по этикету'
  15.         };
  16.     </script>
  17.  
  18.     <!-- Dynamic meta refresh redirect -->
  19.     <meta http-equiv="refresh" content="1; url=${channelConfig.link}">
  20.    
  21.     <style>
  22.         /* Base page styling */
  23.         body {
  24.             margin: 0;
  25.             padding: 20px;
  26.             font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  27.             background: #f0f2f5;
  28.             min-height: 100vh;
  29.             display: flex;
  30.             flex-direction: column;
  31.             align-items: center;
  32.             justify-content: center;
  33.             text-align: center;
  34.         }
  35.  
  36.         /* Content container styling */
  37.         .container {
  38.             max-width: 600px;
  39.             padding: 40px;
  40.             background: white;
  41.             border-radius: 16px;
  42.             box-shadow: 0 2px 10px rgba(0,0,0,0.1);
  43.             position: relative;
  44.             z-index: 1;
  45.         }
  46.  
  47.         /* Floating footer styles */
  48.         .floating-footer {
  49.             position: fixed;
  50.             bottom: -100%;
  51.             left: 0;
  52.             right: 0;
  53.             background: rgba(40, 40, 40, 0.95);
  54.             color: white;
  55.             padding: 20px;
  56.             transition: bottom 0.5s ease-in-out;
  57.             z-index: 1000;
  58.         }
  59.  
  60.         .floating-footer.active {
  61.             bottom: 0;
  62.         }
  63.  
  64.         /* Footer content styling */
  65.         .floating-footer footer {
  66.             max-width: 800px;
  67.             margin: 0 auto;
  68.             position: relative;
  69.         }
  70.  
  71.         .floating-footer a {
  72.             color: #80b3ff;
  73.             text-decoration: underline;
  74.         }
  75.  
  76.         /* Close button styling */
  77.         .close-btn {
  78.             position: absolute;
  79.             top: 10px;
  80.             right: 10px;
  81.             cursor: pointer;
  82.             width: 24px;
  83.             height: 24px;
  84.             opacity: 0.7;
  85.             transition: opacity 0.2s;
  86.         }
  87.  
  88.         .close-btn:hover {
  89.             opacity: 1;
  90.         }
  91.  
  92.         .close-btn::before,
  93.         .close-btn::after {
  94.             content: '';
  95.             position: absolute;
  96.             width: 2px;
  97.             height: 20px;
  98.             background: white;
  99.             left: 11px;
  100.             top: 2px;
  101.         }
  102.  
  103.         .close-btn::before {
  104.             transform: rotate(45deg);
  105.         }
  106.  
  107.         .close-btn::after {
  108.             transform: rotate(-45deg);
  109.         }
  110.  
  111.         /* Action button styling */
  112.         .telegram-button {
  113.             display: inline-flex;
  114.             align-items: center;
  115.             padding: 12px 24px;
  116.             background: #0088cc;
  117.             color: white !important;
  118.             text-decoration: none;
  119.             border-radius: 8px;
  120.             font-weight: 500;
  121.             transition: background 0.2s;
  122.             margin: 15px 0;
  123.         }
  124.  
  125.         .telegram-button:hover {
  126.             background: #0077b3;
  127.         }
  128.  
  129.         .telegram-button img {
  130.             width: 24px;
  131.             margin-right: 12px;
  132.         }
  133.  
  134.         /* Status message styling */
  135.         .notice {
  136.             color: #666;
  137.             font-size: 14px;
  138.             margin-top: 25px;
  139.         }
  140.  
  141.         /* Loading animation */
  142.         .loader {
  143.             border: 4px solid #f3f3f3;
  144.             border-top: 4px solid #0088cc;
  145.             border-radius: 50%;
  146.             width: 40px;
  147.             height: 40px;
  148.             animation: spin 1s linear infinite;
  149.             margin: 30px auto;
  150.         }
  151.  
  152.         @keyframes spin {
  153.             0% { transform: rotate(0deg); }
  154.             100% { transform: rotate(360deg); }
  155.         }
  156.     </style>
  157. </head>
  158. <body>
  159.     <div class="container">
  160.         <!-- Loading indicator -->
  161.         <div class="loader"></div>
  162.        
  163.         <!-- Dynamic heading -->
  164.         <h1>${channelConfig.brand}<br>${channelConfig.title}</h1>
  165.        
  166.         <!-- Main action button -->
  167.         <a href="#" class="telegram-button" id="manualRedirect">
  168.             <img src="https://telegram.org/img/t_logo.svg" alt="Telegram">
  169.             Предзаказ книги
  170.         </a>
  171.  
  172.         <!-- Fallback information -->
  173.         <p class="notice">
  174.             Если автоматическое перенаправление не сработало,<br>
  175.             нажмите кнопку выше или перейдите вручную:<br>
  176.             <code id="channelUrl"></code>
  177.         </p>
  178.     </div>
  179.  
  180.     <!-- Floating footer component -->
  181.     <div class="floating-footer" id="floatingFooter">
  182.         <div class="close-btn" id="closeFooter"></div>
  183.         <footer>
  184.             <div>Домен зарегистрирован через <a href="https://solidario.tech">SOLIDARIO.TECH</a>. Редкие доменные имена по всему миру. Хотите себе запоминающийся сайт? Пишите сейчас <a href="mailto:[email protected]">[email protected]</a></div>
  185.             <div style="margin-top: 10px;">Domain registered by <a href="https://solidario.tech">SOLIDARIO.TECH</a>. Rare domain names globally. Want yours? Text now <a href="mailto:[email protected]">[email protected]</a>!</div>
  186.         </footer>
  187.     </div>
  188.  
  189.     <script>
  190.         // Dynamic content injection
  191.         document.getElementById('manualRedirect').href = channelConfig.link;
  192.         document.getElementById('channelUrl').textContent = channelConfig.link;
  193.  
  194.         // Footer management
  195.         let footerTimer;
  196.         const showFooter = () => document.getElementById('floatingFooter').classList.add('active');
  197.         const hideFooter = () => {
  198.             document.getElementById('floatingFooter').classList.remove('active');
  199.             footerTimer = setTimeout(showFooter, 45000);
  200.         };
  201.  
  202.         // Initial footer show
  203.         setTimeout(showFooter, 500);
  204.        
  205.         // Event listeners
  206.         document.getElementById('closeFooter').addEventListener('click', hideFooter);
  207.         document.getElementById('manualRedirect').addEventListener('click', (e) => {
  208.             e.preventDefault();
  209.             window.location.href = channelConfig.link;
  210.         });
  211.  
  212.         // Backup redirect
  213.         setTimeout(() => {
  214.             window.location.href = channelConfig.link;
  215.         }, 5000);
  216.     </script>
  217. </body>
  218. </html>
Tags: V1no.ru
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!