224 lines
10 KiB
HTML
224 lines
10 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>Telegram Bot Creation Wizard - LittleShop Admin</title>
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
|
|
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css" rel="stylesheet">
|
|
</head>
|
|
<body>
|
|
<header>
|
|
<nav class="navbar navbar-expand-sm navbar-dark bg-dark">
|
|
<div class="container-fluid">
|
|
<a class="navbar-brand" href="/Admin">
|
|
<i class="fas fa-store"></i> LittleShop Admin
|
|
</a>
|
|
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target=".navbar-collapse">
|
|
<span class="navbar-toggler-icon"></span>
|
|
</button>
|
|
<div class="navbar-collapse collapse d-sm-inline-flex justify-content-between">
|
|
<ul class="navbar-nav flex-grow-1">
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="/Admin">
|
|
<i class="fas fa-tachometer-alt"></i> Dashboard
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="/Admin/Categories">
|
|
<i class="fas fa-tags"></i> Categories
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="/Admin/Products">
|
|
<i class="fas fa-box"></i> Products
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="/Admin/Orders">
|
|
<i class="fas fa-shopping-cart"></i> Orders
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="/Admin/ShippingRates">
|
|
<i class="fas fa-truck"></i> Shipping
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="/Admin/Users">
|
|
<i class="fas fa-users"></i> Users
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="/Admin/Bots">
|
|
<i class="fas fa-robot"></i> Bots
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
<ul class="navbar-nav">
|
|
<li class="nav-item dropdown">
|
|
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown">
|
|
<i class="fas fa-user"></i> admin
|
|
</a>
|
|
<ul class="dropdown-menu">
|
|
<li>
|
|
<form method="post" action="/Admin/Account/Logout">
|
|
<button type="submit" class="dropdown-item">
|
|
<i class="fas fa-sign-out-alt"></i> Logout
|
|
</button>
|
|
</form>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
</header>
|
|
<div class="container-fluid">
|
|
<main role="main" class="pb-3">
|
|
|
|
|
|
<h1>Telegram Bot Creation Wizard</h1>
|
|
|
|
<div class="row">
|
|
<div class="col-md-8">
|
|
<!-- Step 1: Basic Info -->
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h5 class="mb-0">Step 1: Bot Information</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
<form asp-area="Admin" asp-controller="Bots" asp-action="Wizard" method="post">
|
|
<input name="__RequestVerificationToken" type="hidden" value="CfDJ8DxJ63S0c9FElmGFRyriOywAO8gOGGx2ME7YDgMh8HxARyoeEPbEYF_OtnMlFj1eMaUu2Qybw5OWx6N2a00408PZKQoGm7gFE6q72AVRSDLq791hMcHFCiALdhlW3VDCRE29HxPzkOi0m-j68V6TKV-q_KQ4_zk7LgfUmLCFgAfsm2kotjMBhfqs45wL9x8nhg" />
|
|
<div asp-validation-summary="All" class="text-danger"></div>
|
|
|
|
<div class="mb-3">
|
|
<label asp-for="BotName" class="form-label">Bot Display Name</label>
|
|
<input asp-for="BotName" class="form-control"
|
|
placeholder="e.g., LittleShop Electronics Bot" required />
|
|
<span asp-validation-for="BotName" class="text-danger"></span>
|
|
<small class="text-muted">This is the name users will see</small>
|
|
</div>
|
|
|
|
<div class="mb-3">
|
|
<label asp-for="BotUsername" class="form-label">Bot Username</label>
|
|
<div class="input-group">
|
|
<span class="input-group-text">@</span>
|
|
<input asp-for="BotUsername" class="form-control"
|
|
placeholder="littleshop_bot" required />
|
|
</div>
|
|
<span asp-validation-for="BotUsername" class="text-danger"></span>
|
|
<small class="text-muted">Must end with 'bot' and be unique on Telegram</small>
|
|
</div>
|
|
|
|
<div class="mb-3">
|
|
<label for="PersonalityName" class="form-label">Personality</label>
|
|
<select asp-for="PersonalityName" class="form-select">
|
|
<option value="">Auto-assign (recommended)</option>
|
|
<option value="Alan" >Alan (Professional)</option>
|
|
<option value="Dave" >Dave (Casual)</option>
|
|
<option value="Sarah" >Sarah (Helpful)</option>
|
|
<option value="Mike" >Mike (Direct)</option>
|
|
<option value="Emma" >Emma (Friendly)</option>
|
|
<option value="Tom" >Tom (Efficient)</option>
|
|
</select>
|
|
<small class="text-muted">Bot conversation style (can be changed later)</small>
|
|
</div>
|
|
|
|
<div class="mb-3">
|
|
<label for="Description" class="form-label">Description (Optional)</label>
|
|
<textarea asp-for="Description" class="form-control" rows="2"
|
|
placeholder="Brief description of what this bot does"></textarea>
|
|
</div>
|
|
|
|
<input type="submit" value="Generate BotFather Commands" class="btn btn-primary" />
|
|
<a href="/Admin/Bots" class="btn btn-secondary">Cancel</a>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-md-4">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h5 class="mb-0">Wizard Progress</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
<ul class="list-unstyled">
|
|
<li class="text-primary fw-bold">
|
|
<i class="fas fa-edit"></i>
|
|
1. Bot Information
|
|
</li>
|
|
<li class="text-muted">
|
|
<i class="fas fa-circle"></i>
|
|
2. Create with BotFather
|
|
</li>
|
|
<li class="text-muted">
|
|
<i class="fas fa-circle"></i>
|
|
3. Complete Setup
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card mt-3">
|
|
<div class="card-header">
|
|
<h5 class="mb-0">Personality Preview</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
<p class="small">
|
|
Auto-assigned personality based on bot name </p>
|
|
|
|
<p class="small text-muted">
|
|
Personalities affect how your bot communicates with customers.
|
|
This can be customized later in bot settings.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
</main>
|
|
</div>
|
|
|
|
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
|
|
|
|
<partial name="_ValidationScriptsPartial" />
|
|
<script>
|
|
// Test if JavaScript is working
|
|
console.log('Wizard page scripts loaded');
|
|
|
|
function copyCommands() {
|
|
const commands = ``;
|
|
navigator.clipboard.writeText(commands).then(() => {
|
|
alert('Commands copied to clipboard!');
|
|
});
|
|
}
|
|
|
|
// Auto-generate username from bot name
|
|
$(document).ready(function() {
|
|
console.log('Document ready, setting up auto-generation');
|
|
|
|
$('#BotName').on('input', function() {
|
|
try {
|
|
const name = $(this).val().toLowerCase()
|
|
.replace(/[^a-z0-9]/g, '_')
|
|
.replace(/_+/g, '_')
|
|
.replace(/^_|_$/g, '');
|
|
|
|
if (name && !name.endsWith('_bot')) {
|
|
$('#BotUsername').val(name + '_bot');
|
|
}
|
|
} catch (err) {
|
|
console.error('Error in auto-generation:', err);
|
|
}
|
|
});
|
|
});
|
|
</script>
|
|
|
|
</body>
|
|
</html> |