112 lines
5.0 KiB
HTML
112 lines
5.0 KiB
HTML
<!DOCTYPE html>
|
||
<html>
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<title>生成宣传内容</title>
|
||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
|
||
</head>
|
||
<body>
|
||
<div class="container mt-5">
|
||
<div class="row justify-content-center">
|
||
<div class="col-md-8">
|
||
<div class="card">
|
||
<div class="card-header">
|
||
<h2 class="text-center">生成宣传内容</h2>
|
||
</div>
|
||
<div class="card-body">
|
||
<form id="generateForm">
|
||
<div class="mb-3">
|
||
<label class="form-label">推荐人类型</label>
|
||
<div class="form-check">
|
||
<input class="form-check-input" type="radio" name="name_type" id="character" value="character" checked>
|
||
<label class="form-check-label" for="character">
|
||
游戏角色名
|
||
</label>
|
||
</div>
|
||
<div class="form-check">
|
||
<input class="form-check-input" type="radio" name="name_type" id="account" value="account">
|
||
<label class="form-check-label" for="account">
|
||
游戏账号
|
||
</label>
|
||
</div>
|
||
</div>
|
||
<div class="mb-3">
|
||
<label for="character_name" class="form-label" id="nameLabel">游戏角色名</label>
|
||
<input type="text" class="form-control" id="character_name" name="character_name" required>
|
||
</div>
|
||
<div class="text-center">
|
||
<button type="submit" class="btn btn-primary">生成内容</button>
|
||
</div>
|
||
</form>
|
||
|
||
<div id="result" class="mt-4" style="display: none;">
|
||
<h4>生成的宣传内容[格式需保持一致]：</h4>
|
||
<div class="card">
|
||
<div class="card-body">
|
||
<pre id="generatedContent" class="mb-3"></pre>
|
||
<button id="copyButton" class="btn btn-success">复制内容</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="mt-3 text-center">
|
||
<a href="/" class="btn btn-secondary">返回首页</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
|
||
<script>
|
||
// 更新输入框标签
|
||
document.querySelectorAll('input[name="name_type"]').forEach(radio => {
|
||
radio.addEventListener('change', function() {
|
||
const label = document.getElementById('nameLabel');
|
||
label.textContent = this.value === 'character' ? '游戏角色名' : '游戏账号';
|
||
});
|
||
});
|
||
|
||
// 处理表单提交
|
||
document.getElementById('generateForm').addEventListener('submit', async function(e) {
|
||
e.preventDefault();
|
||
const form = e.target;
|
||
const submitButton = form.querySelector('button[type="submit"]');
|
||
submitButton.disabled = true;
|
||
|
||
try {
|
||
const formData = new FormData(form);
|
||
const response = await fetch('/create-ad', {
|
||
method: 'POST',
|
||
body: formData
|
||
});
|
||
const data = await response.json();
|
||
|
||
if (data.success) {
|
||
document.getElementById('generatedContent').textContent = data.ad_content;
|
||
document.getElementById('result').style.display = 'block';
|
||
} else {
|
||
alert(data.message);
|
||
}
|
||
} catch (error) {
|
||
alert('系统错误，请稍后再试');
|
||
} finally {
|
||
submitButton.disabled = false;
|
||
}
|
||
});
|
||
|
||
// 复制按钮功能
|
||
document.getElementById('copyButton').addEventListener('click', function() {
|
||
const content = document.getElementById('generatedContent').textContent;
|
||
navigator.clipboard.writeText(content).then(() => {
|
||
this.textContent = '已复制';
|
||
setTimeout(() => {
|
||
this.textContent = '复制内容';
|
||
}, 2000);
|
||
}).catch(() => {
|
||
alert('复制失败，请手动复制');
|
||
});
|
||
});
|
||
</script>
|
||
</body>
|
||
</html> |