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>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta name="generator" content="APIlite">
|
||||
<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>
|
||||
|
||||
<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>
|
||||
<p>API endpoint URL <a href="<?php echo $this->getCurrentUrl(); ?>"><?php echo $this->getCurrentUrl(); ?></a></p>
|
||||
<!-- Main Content -->
|
||||
<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>
|
||||
<i><?php echo $method['description']; ?></i>
|
||||
<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 if (!empty($method['description'])) { ?>
|
||||
<p class="method-description"><?php echo $method['description']; ?></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 echo $param['name']; ?>: <code><?php echo $param['type']; ?></code>
|
||||
—
|
||||
<?php
|
||||
if ($param['optional']) echo '(optional) ';
|
||||
echo $param['doc'];
|
||||
?>
|
||||
</p>
|
||||
|
||||
<?php } ?>
|
||||
|
||||
<?php } ?>
|
||||
<?php if (is_array($method['params']) && !empty($method['params'])) { ?>
|
||||
<div class="parameters">
|
||||
<h3 style="margin-bottom: 1rem; color: #2c3e50;">Parameters:</h3>
|
||||
|
||||
<?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>
|
||||
|
||||
</html>
|
||||
Loading…
x
Reference in New Issue
Block a user