Skip to content

feat: main menu #10

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
sdaveas wants to merge 1 commit into
base: main
Choose a base branch
from
Open

feat: main menu #10

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
173 changes: 173 additions & 0 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,173 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>panobticon Bot - Commands</title>
<style>
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
line-height: 1.6;
color: #333;
max-width: 800px;
margin: 0 auto;
padding: 20px;
background-color: #f5f5f5;
}
h1 {
color: #0088cc;
text-align: center;
margin-bottom: 30px;
}
h2 {
color: #0088cc;
border-bottom: 1px solid #ddd;
padding-bottom: 10px;
margin-top: 30px;
}
.command-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
margin-top: 30px;
}
.command-card {
background: white;
border-radius: 10px;
padding: 15px;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
transition: transform 0.3s, box-shadow 0.3s;
}
.command-card:hover {
transform: translateY(-5px);
box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}
.command-title {
font-weight: bold;
color: #0088cc;
display: flex;
align-items: center;
margin-bottom: 10px;
}
.command-title .emoji {
margin-right: 10px;
font-size: 1.5em;
}
.command-desc {
margin-bottom: 15px;
}
.command-example {
background: #f0f7ff;
padding: 10px;
border-radius: 5px;
font-family: monospace;
margin-bottom: 15px;
}
.try-button {
display: block;
background: #0088cc;
color: white;
text-align: center;
padding: 8px 15px;
border-radius: 5px;
text-decoration: none;
font-weight: bold;
transition: background 0.3s;
}
.try-button:hover {
background: #006699;
}
.logo {
max-width: 100px;
display: block;
margin: 0 auto 20px;
}
.footer {
text-align: center;
margin-top: 40px;
font-size: 0.9em;
color: #666;
}
@media (max-width: 600px) {
.command-grid {
grid-template-columns: 1fr;
}
}
</style>
</head>
<body>
<img src="/api/placeholder/100/100" alt="Bot Logo" class="logo">
<h1>panobticon Bot Commands</h1>

<p>Welcome to the official command guide for panobticon Bot. This bot helps you summarize conversations, ask questions, split bills, and more!</p>

<div class="command-grid">
<div class="command-card">
<div class="command-title"><span class="emoji">📝</span> Summary</div>
<div class="command-desc">Get a summary of recent messages in the chat.</div>
<div class="command-example">/summary</div>
<div class="command-example">/summary 1h30m</div>
<a href="https://t.me/panobticon_bot?start=summary" class="try-button">Try Now</a>
</div>

<div class="command-card">
<div class="command-title"><span class="emoji">❓</span> Question</div>
<div class="command-desc">Ask about recent discussions in the chat.</div>
<div class="command-example">/question 1h What was discussed?</div>
<a href="https://t.me/panobticon_bot?start=question" class="try-button">Try Now</a>
</div>

<div class="command-card">
<div class="command-title"><span class="emoji">💬</span> Ask</div>
<div class="command-desc">Ask a general question to the bot.</div>
<div class="command-example">/ask What is the capital of France?</div>
<a href="https://t.me/panobticon_bot?start=ask" class="try-button">Try Now</a>
</div>

<div class="command-card">
<div class="command-title"><span class="emoji">🧮</span> Calculator</div>
<div class="command-desc">Perform quick calculations.</div>
<div class="command-example">/cal 2+2</div>
<a href="https://t.me/panobticon_bot?start=cal" class="try-button">Try Now</a>
</div>

<div class="command-card">
<div class="command-title"><span class="emoji">🗑️</span> Clean</div>
<div class="command-desc">Delete old bot messages from the chat.</div>
<div class="command-example">/clean</div>
<a href="https://t.me/panobticon_bot?start=clean" class="try-button">Try Now</a>
</div>

<div class="command-card">
<div class="command-title"><span class="emoji">📊</span> Split Bill</div>
<div class="command-desc">Split a bill from a receipt photo.</div>
<div class="command-example">Send a photo with caption "split_bill Alice: 1 pizza"</div>
<a href="https://t.me/panobticon_bot?start=split_bill" class="try-button">Try Now</a>
</div>

<div class="command-card">
<div class="command-title"><span class="emoji">⚙️</span> Context</div>
<div class="command-desc">Manage chat context for better summaries.</div>
<div class="command-example">/set_context</div>
<div class="command-example">/get_context</div>
<div class="command-example">/clear_context</div>
<a href="https://t.me/panobticon_bot?start=context" class="try-button">Try Now</a>
</div>

<div class="command-card">
<div class="command-title"><span class="emoji">ℹ️</span> Help</div>
<div class="command-desc">Show help information about the bot.</div>
<div class="command-example">/help</div>
<a href="https://t.me/panobticon_bot?start=help" class="try-button">Try Now</a>
</div>
</div>

<h2>How to Use</h2>
<p>Simply type any of the commands above in your chat with the bot or in a group where the bot is added. For the split bill feature, send a photo of a receipt with the caption starting with "split_bill" followed by who ordered what.</p>

<div class="footer">
<p>panobticon Bot | Created by Stelios Daveas</p>
<p>For support: /help@panobticon_bot</p>
</div>
</body>
</html>