redesigned HTML template for help (AI)
This commit is contained in:
parent
59b317cacd
commit
9f1c5536ed
312
src/help.tpl.php
312
src/help.tpl.php
@ -1,37 +1,309 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
|
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<meta name="generator" content="APIlite">
|
||||||
<title><?php echo $this->apiName; ?></title>
|
<title><?php echo $this->apiName; ?></title>
|
||||||
|
<style>
|
||||||
|
/* Reset and base styles */
|
||||||
|
* {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
|
||||||
|
line-height: 1.6;
|
||||||
|
color: #333;
|
||||||
|
background-color: #FFFFFF;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Container */
|
||||||
|
.container {
|
||||||
|
max-width: 1200px;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 0 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Header */
|
||||||
|
.header {
|
||||||
|
background-color: #F4F5F8;
|
||||||
|
padding: 2rem;
|
||||||
|
border-bottom: 1px solid #e1e5e9;
|
||||||
|
margin-bottom: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header h1 {
|
||||||
|
font-size: 2.5rem;
|
||||||
|
font-weight: 700;
|
||||||
|
color: #2c3e50;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Navigation menu */
|
||||||
|
.nav-menu {
|
||||||
|
background-color: #F4F5F8;
|
||||||
|
padding: 1rem 0;
|
||||||
|
border-radius: 8px;
|
||||||
|
margin-bottom: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-links {
|
||||||
|
display: flex;
|
||||||
|
gap: 2rem;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-links a {
|
||||||
|
color: #545BFE;
|
||||||
|
text-decoration: none;
|
||||||
|
font-weight: 500;
|
||||||
|
padding: 0.5rem 1rem;
|
||||||
|
border-radius: 6px;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-links a:hover {
|
||||||
|
background-color: #545BFE;
|
||||||
|
color: white;
|
||||||
|
transform: translateY(-2px);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Main content */
|
||||||
|
.main-content {
|
||||||
|
margin-bottom: 3rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Method sections */
|
||||||
|
.method-section {
|
||||||
|
background-color: #FFFFFF;
|
||||||
|
border: 1px solid #e1e5e9;
|
||||||
|
border-radius: 12px;
|
||||||
|
padding: 2rem;
|
||||||
|
margin-bottom: 2rem;
|
||||||
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||||
|
transition: box-shadow 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.method-section:hover {
|
||||||
|
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
|
||||||
|
}
|
||||||
|
|
||||||
|
.method-title {
|
||||||
|
font-size: 1.8rem;
|
||||||
|
font-weight: 600;
|
||||||
|
color: #2c3e50;
|
||||||
|
margin-bottom: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.method-description {
|
||||||
|
font-style: italic;
|
||||||
|
color: #666;
|
||||||
|
margin-bottom: 1.5rem;
|
||||||
|
font-size: 1.1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.endpoint-url {
|
||||||
|
background-color: #F4F5F8;
|
||||||
|
padding: 1rem;
|
||||||
|
border-radius: 8px;
|
||||||
|
margin-bottom: 1.5rem;
|
||||||
|
border-left: 4px solid #545BFE;
|
||||||
|
}
|
||||||
|
|
||||||
|
.endpoint-url strong {
|
||||||
|
color: #2c3e50;
|
||||||
|
display: block;
|
||||||
|
margin-bottom: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Links */
|
||||||
|
a {
|
||||||
|
color: #545BFE;
|
||||||
|
text-decoration: none;
|
||||||
|
font-weight: 500;
|
||||||
|
transition: color 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
a:hover {
|
||||||
|
color: #3d42d9;
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Code styling */
|
||||||
|
code {
|
||||||
|
background-color: #323F4C;
|
||||||
|
color: #ffffff;
|
||||||
|
padding: 0.3rem 0.6rem;
|
||||||
|
border-radius: 4px;
|
||||||
|
font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
|
||||||
|
font-size: 0.9rem;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Parameters */
|
||||||
|
.parameters {
|
||||||
|
margin-top: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.parameter {
|
||||||
|
background-color: #f8f9fa;
|
||||||
|
border: 1px solid #e9ecef;
|
||||||
|
border-radius: 8px;
|
||||||
|
padding: 1rem;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.parameter-name {
|
||||||
|
font-weight: 600;
|
||||||
|
color: #2c3e50;
|
||||||
|
margin-bottom: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.parameter-type {
|
||||||
|
margin-left: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.parameter-description {
|
||||||
|
color: #666;
|
||||||
|
margin-top: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.optional-badge {
|
||||||
|
background-color: #ffc107;
|
||||||
|
color: #000;
|
||||||
|
padding: 0.2rem 0.5rem;
|
||||||
|
border-radius: 12px;
|
||||||
|
font-size: 0.8rem;
|
||||||
|
font-weight: 500;
|
||||||
|
margin-left: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Responsive design */
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
.container {
|
||||||
|
padding: 0 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header h1 {
|
||||||
|
font-size: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-links {
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.method-section {
|
||||||
|
padding: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.method-title {
|
||||||
|
font-size: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.endpoint-url {
|
||||||
|
word-break: break-all;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 480px) {
|
||||||
|
.header {
|
||||||
|
padding: 1.5rem 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header h1 {
|
||||||
|
font-size: 1.8rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.method-section {
|
||||||
|
padding: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.method-title {
|
||||||
|
font-size: 1.3rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Utility classes */
|
||||||
|
.text-center {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mb-2 {
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mb-3 {
|
||||||
|
margin-bottom: 1.5rem;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
|
<div class="container">
|
||||||
|
<!-- Header -->
|
||||||
|
<header class="header">
|
||||||
|
<h1><?php echo $this->apiName; ?></h1>
|
||||||
|
</header>
|
||||||
|
|
||||||
<h1><?php echo $this->apiName; ?></h1>
|
<!-- Navigation Menu -->
|
||||||
|
<nav class="nav-menu">
|
||||||
|
<div class="nav-links">
|
||||||
|
<a href="<?php echo $this->getCurrentUrl(); ?>?format=json">📄 JSON Documentation</a>
|
||||||
|
<a href="<?php echo $this->getCurrentUrl(); ?>">🔗 API Endpoint</a>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
|
||||||
<p>API documentation in <a href="<?php echo $this->getCurrentUrl(); ?>?format=json">JSON</a></p>
|
<!-- Main Content -->
|
||||||
<p>API endpoint URL <a href="<?php echo $this->getCurrentUrl(); ?>"><?php echo $this->getCurrentUrl(); ?></a></p>
|
<main class="main-content">
|
||||||
|
<div class="endpoint-url mb-3">
|
||||||
|
<strong>Main API Endpoint:</strong>
|
||||||
|
<a href="<?php echo $this->getCurrentUrl(); ?>"><?php echo $this->getCurrentUrl(); ?></a>
|
||||||
|
</div>
|
||||||
|
|
||||||
<?php if (is_array($this->methods)) foreach ($this->methods as $index => $method) { ?>
|
<?php if (is_array($this->methods)) foreach ($this->methods as $index => $method) { ?>
|
||||||
|
<section class="method-section">
|
||||||
|
<h2 class="method-title"><?php echo $method['name']; ?></h2>
|
||||||
|
|
||||||
<h2><?php echo $method['name']; ?></h2>
|
<?php if (!empty($method['description'])) { ?>
|
||||||
<i><?php echo $method['description']; ?></i>
|
<p class="method-description"><?php echo $method['description']; ?></p>
|
||||||
<p>Endpoint URL: <a href="<?php echo $this->getCurrentUrl(); ?>?action=<?php echo $method['name']; ?>"><?php echo $this->getCurrentUrl(); ?>?action=<?php echo $method['name']; ?></a></p>
|
<?php } ?>
|
||||||
|
|
||||||
<?php if (is_array($method['params'])) foreach ($method['params'] as $param) { ?>
|
<div class="endpoint-url">
|
||||||
|
<strong>Endpoint URL:</strong>
|
||||||
|
<a href="<?php echo $this->getCurrentUrl(); ?>?action=<?php echo $method['name']; ?>">
|
||||||
|
<?php echo $this->getCurrentUrl(); ?>?action=<?php echo $method['name']; ?>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
<p>
|
<?php if (is_array($method['params']) && !empty($method['params'])) { ?>
|
||||||
<?php echo $param['name']; ?>: <code><?php echo $param['type']; ?></code>
|
<div class="parameters">
|
||||||
—
|
<h3 style="margin-bottom: 1rem; color: #2c3e50;">Parameters:</h3>
|
||||||
<?php
|
|
||||||
if ($param['optional']) echo '(optional) ';
|
|
||||||
echo $param['doc'];
|
|
||||||
?>
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<?php } ?>
|
|
||||||
|
|
||||||
<?php } ?>
|
|
||||||
|
|
||||||
|
<?php foreach ($method['params'] as $param) { ?>
|
||||||
|
<div class="parameter">
|
||||||
|
<div class="parameter-name">
|
||||||
|
<?php echo $param['name']; ?>
|
||||||
|
<code class="parameter-type"><?php echo $param['type']; ?></code>
|
||||||
|
<?php if ($param['optional']) { ?>
|
||||||
|
<span class="optional-badge">optional</span>
|
||||||
|
<?php } ?>
|
||||||
|
</div>
|
||||||
|
<div class="parameter-description">
|
||||||
|
<?php echo $param['doc']; ?>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<?php } ?>
|
||||||
|
</div>
|
||||||
|
<?php } ?>
|
||||||
|
</section>
|
||||||
|
<?php } ?>
|
||||||
|
</main>
|
||||||
|
</div>
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
</html>
|
</html>
|
||||||
Loading…
x
Reference in New Issue
Block a user