soumyadeep/autoblogcarpperbotPublic · Bot Template

1/**#command2name: index.html3answer: 4keyboard: 5parse_mode: markdown6aliases: chat7allow_only_group: false8need_reply: false9is_web: 110#command**/11 12<!-- By Soumyadeep Das (t.me/ondndbro) -->13<!DOCTYPE html>14<html lang="en">15 16<head>17  <meta http-equiv="X-UA-Compatible" content="IE=Edge">18  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, interactive-widget=resizes-content">19  <meta name="google" content="notranslate">20  <title>juckle · chat</title>21  <link rel="preconnect" href="https://fonts.googleapis.com">22  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>23  <link href="https://fonts.googleapis.com/css2?family=Inter:opsz@14..32&display=swap" rel="stylesheet">24 25  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/themes/prism-one-light.min.css">26  <script src="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/prism.min.js"></script>27  <script src="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/components/prism-markup.min.js"></script>28  <script src="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/components/prism-css.min.js"></script>29  <script src="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/components/prism-clike.min.js"></script>30  <script src="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/components/prism-javascript.min.js"></script>31  <script src="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/components/prism-python.min.js"></script>32  <script src="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/components/prism-json.min.js"></script>33  <script src="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/components/prism-bash.min.js"></script>34  <script src="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/components/prism-typescript.min.js"></script>35  <script src="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/components/prism-jsx.min.js"></script>36  <script src="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/components/prism-tsx.min.js"></script>37 38  <script src="https://cdn.jsdelivr.net/npm/marked@12.0.0/marked.min.js"></script>39 40  <link rel="stylesheet" href="styles.css">41</head>42 43<body>44 45  <div class="app-container">46 47    <div class="sidebar-backdrop" id="sidebarBackdrop"></div>48 49    <aside class="sidebar" id="sidebar">50      <div class="sidebar-header">51        <div class="brand">52          <div class="brand-icon">j</div>53          <div class="brand-text">54            <div class="brand-name">juckle</div>55            <div class="brand-sub">chat assistant</div>56          </div>57        </div>58        <button class="sidebar-close" id="sidebarClose" aria-label="Close sidebar">59          <svg viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round">60            <line x1="18" y1="6" x2="6" y2="18" />61            <line x1="6" y1="6" x2="18" y2="18" />62          </svg>63        </button>64      </div>65 66      <button class="sidebar-new-chat" id="sidebarNewChat">67        <span class="new-chat-icon">68          <svg viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round">69            <path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z" />70          </svg>71        </span>72        New chat73      </button>74 75      <div class="sidebar-section-label">76        <span>Recent</span>77        <span class="history-count" id="historyCount">0</span>78      </div>79 80      <div class="sidebar-history" id="sidebarHistory"></div>81 82      <div class="sidebar-footer">83        <div class="dev-avatar">S</div>84        <div class="dev-info">85          <div class="dev-name">Soumyadeep Das</div>86          <div class="dev-role">Developer</div>87        </div>88      </div>89    </aside>90 91    <div class="header">92      <button class="icon-btn" id="menuBtn" aria-label="Open menu">93        <svg viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round">94          <line x1="3" y1="6" x2="21" y2="6" />95          <line x1="3" y1="12" x2="21" y2="12" />96          <line x1="3" y1="18" x2="15" y2="18" />97        </svg>98      </button>99      <div class="chat-title" id="chatTitle">New chat</div>100      <button class="icon-btn" id="newChatBtn" aria-label="New chat">101        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">102          <path d="M20 11.5a8.5 8.5 0 0 1-1.1 4.2A8.5 8.5 0 0 1 11.5 20103             8.5 8.5 0 0 1 7.3 18.9L3 20l1.1-4.3A8.5 8.5 0 0 1 3 11.5104             8.5 8.5 0 0 1 11.5 3h.5a8.5 8.5 0 0 1 8 8v.5z" />105 106          <path d="M11.5 8v7" />107          <path d="M8 11.5h7" />108        </svg>109      </button>110    </div>111 112    <div class="main-content" id="chatbox">113      <div class="welcome-hero" id="welcomeHero">114        <div class="hero-icon">115          <svg viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round">116            <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" />117          </svg>118        </div>119        <h2>How can I help you?</h2>120        <p>Ask me anything — code, ideas, or random thoughts.</p>121      </div>122    </div>123 124    <div class="bottom-bar">125      <div class="input-wrapper">126        <input type="text" id="messageInput" placeholder="Ask juckle..." autocomplete="off" aria-label="Message">127        <button class="send-btn" id="sendButton" aria-label="Send message">128          <svg viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round">129            <line x1="12" y1="19" x2="12" y2="5" />130            <polyline points="5 12 12 5 19 12" />131          </svg>132        </button>133      </div>134    </div>135  </div>136 137  <script src="chat.js" type="text/javascript" charset="utf-8"></script>138</body>139 140</html>