fixed typo

README.md

@@ -2,6 +2,44 @@
 
 A set of tools to simplify the work of creating backend APIs for your frontend projects. Includes tutorials, patterns and practical examples for creating projects based on REST APIs.
 
+## Installation
+
+Download source code and add to your project
+
+```php
+<?php
+require_once __DIR__ . '/APIlite/src/APIlite.php';
+```
+
+or use composer
+
+```bash
+composer require tpsoft/apilite
+```
+
+and add to your project
+
+```php
+<?php
+require __DIR__ . '/vendor/autoload.php';
+
+class YourAPI extends \TPsoft\APIlite\APIlite {
+
+	/**
+	 * My first method for greetings.
+	 *
+	 * @param string $name Your name
+	 * @param int $age Your age
+	 * @return string Greetings
+	 */
+	public function myFirstMethod(string $name, int $age): string
+	{
+		return 'Hi, I`m '.$name.' and I`m '.$age.' years old.';
+	}
+
+}
+```
+
 ## Basic usage
 
 For example, we create an API for calculator. So we create class `APIcalculator` and store in file `test/APIcalculator.php` where we defined each actions for API as public method.
@@ -199,74 +237,74 @@ To connect to the API from TypeScript (e.g. Vue application) it is possible to d
  * Generated by APIlite
  * https://gitea.tpsoft.org/TPsoft.org/APIlite
  *
- * 2025-05-28 15:44:07 */
+ * 2025-06-12 06:24:33 */
 
-export const backend = {
-	endpont: window.location.origin + "APIcalculator.php",
+class APIcalculator {
+	endpont = "http://";
 
 	/* ----------------------------------------------------
-	 * General API call
-	 */
+		* General API call
+		*/
 	call(method, data, callback) {
-		var xhttp = new XMLHttpRequest();
-		xhttp.withCredentials = true;
-		xhttp.onreadystatechange = function() {
-			if (this.readyState == 4) {
-				if (this.status == 200) {
-					if (callback != null) callback(JSON.parse(this.responseText));
-				} else {
-					if (callback != null) callback({'status': 'ERROR', 'message': 'HTTP STATUS ' + this.status});
-				}
+			var xhttp = new XMLHttpRequest();
+			xhttp.withCredentials = true;
+			xhttp.onreadystatechange = function() {
+					if (this.readyState == 4) {
+							if (this.status == 200) {
+									if (callback != null) callback(JSON.parse(this.responseText));
+							} else {
+									if (callback != null) callback({'status': 'ERROR', 'message': 'HTTP STATUS ' + this.status});
+							}
+					}
 			}
-		}
-		var form_data  = new FormData();
-		Object.keys(data).forEach(key => {
-			let val = data[key];
-			if (typeof val == 'object') val = JSON.stringify(val);
-			form_data.append(key, val);
-		});
-		xhttp.open('POST', this.endpont + '?action=' + method);
-		xhttp.send(form_data);
-	},
+			var form_data  = new FormData();
+			Object.keys(data).forEach(key => {
+					let val = data[key];
+					if (typeof val == 'object') val = JSON.stringify(val);
+					form_data.append(key, val);
+			});
+			xhttp.open('POST', this.endpont + '?action=' + method);
+			xhttp.send(form_data);
+	}
 
 	callPromise(method, data) {
-		return new Promise((resolve, reject) => {
-			this.call(method, data, function(response) {
-				if (response.status == 'OK') {
-					resolve(response.data);
-				} else {
-					reject(response.msg);
-				}
-			});
-		})
-	},
+			return new Promise((resolve, reject) => {
+					this.call(method, data, function(response) {
+							if (response.status == 'OK') {
+									resolve(response.data);
+							} else {
+									reject(response.msg);
+							}
+					});
+			})
+	}
 
 	/* ----------------------------------------------------
-	 * API actions
-	 */
+		* API actions
+		*/
 	help() {
-		return this.callPromise('__HELP__', {});
-	},
+			return this.callPromise('__HELP__', {});
+	}
 
 	add(a, b) {
-		return this.callPromise('add', {a: a, b: b});
-	},
+			return this.callPromise('add', {a: a, b: b});
+	}
 
 	subtract(a, b) {
-		return this.callPromise('subtract', {a: a, b: b});
-	},
+			return this.callPromise('subtract', {a: a, b: b});
+	}
 
 	multiply(a, b) {
-		return this.callPromise('multiply', {a: a, b: b});
-	},
+			return this.callPromise('multiply', {a: a, b: b});
+	}
 
 	divide(a, b) {
-		return this.callPromise('divide', {a: a, b: b});
-	},
-
+			return this.callPromise('divide', {a: a, b: b});
+	}
 
 };
 
+export default new BackendAPI();
 ```
 
 These outputs can also be generated in the command line as follows

src/help.tpl.php

@@ -236,6 +236,140 @@
 			}
 		}
 
+		/* Methods grid */
+		.methods-grid {
+			display: grid;
+			grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+			gap: 1rem;
+			margin-bottom: 2rem;
+		}
+
+		.method-card {
+			background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+			border-radius: 12px;
+			padding: 1.5rem;
+			text-align: center;
+			transition: all 0.3s ease;
+			box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
+			position: relative;
+			overflow: hidden;
+		}
+
+		.method-card::before {
+			content: '';
+			position: absolute;
+			top: 0;
+			left: -100%;
+			width: 100%;
+			height: 100%;
+			background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
+			transition: left 0.5s;
+		}
+
+		.method-card:hover::before {
+			left: 100%;
+		}
+
+		.method-card:hover {
+			transform: translateY(-5px);
+			box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
+		}
+
+		.method-card a {
+			color: white;
+			text-decoration: none;
+			font-weight: 600;
+			font-size: 1.1rem;
+			display: block;
+			position: relative;
+			z-index: 1;
+		}
+
+		/*
+		.method-card:nth-child(odd) {
+			background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+		}
+
+		.method-card:nth-child(even) {
+			background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
+		}
+
+		.method-card:nth-child(3n) {
+			background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
+		}
+
+		.method-card:nth-child(4n) {
+			background: linear-gradient(135deg,rgb(86, 209, 127) 0%,rgb(52, 199, 172) 100%);
+		}
+
+		.method-card:nth-child(5n) {
+			background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
+		}
+		*/
+		.method-card {
+			background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+		}
+
+		.methods-section-title {
+			font-size: 2rem;
+			font-weight: 700;
+			color: #2c3e50;
+			margin-bottom: 1.5rem;
+			text-align: center;
+			position: relative;
+		}
+
+		.methods-section-title::after {
+			content: '';
+			position: absolute;
+			bottom: -10px;
+			left: 50%;
+			transform: translateX(-50%);
+			width: 80px;
+			height: 4px;
+			background: linear-gradient(90deg, #667eea, #764ba2);
+			border-radius: 2px;
+		}
+
+		/* Responsive adjustments for methods grid */
+		@media (max-width: 768px) {
+			.methods-grid {
+				grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+				gap: 0.8rem;
+			}
+
+			.method-card {
+				padding: 1.2rem;
+			}
+
+			.method-card a {
+				font-size: 1rem;
+			}
+
+			.methods-section-title {
+				font-size: 1.7rem;
+			}
+		}
+
+		@media (max-width: 480px) {
+			.methods-grid {
+				grid-template-columns: 1fr;
+				gap: 0.6rem;
+			}
+
+			.method-card {
+				padding: 1rem;
+			}
+
+			.method-card a {
+				font-size: 0.95rem;
+			}
+
+			.methods-section-title {
+				font-size: 1.5rem;
+			}
+		}
+
 		/* Utility classes */
 		.text-center {
 			text-align: center;
@@ -266,6 +400,18 @@
 			</div>
 		</nav>
 
+		<!-- List of Methods -->
+		<section class="method-section">
+			<h2 class="methods-section-title">List of Methods</h2>
+			<div class="methods-grid">
+				<?php if (is_array($this->methods)) foreach ($this->methods as $index => $method) { ?>
+					<div class="method-card">
+						<a href="#<?php echo $method['name']; ?>"><?php echo $method['name']; ?></a>
+					</div>
+				<?php } ?>
+			</div>
+		</section>
+
 		<!-- Main Content -->
 		<main class="main-content">
 			<div class="endpoint-url mb-3">
@@ -274,7 +420,7 @@
 			</div>
 
 			<?php if (is_array($this->methods)) foreach ($this->methods as $index => $method) { ?>
-				<section class="method-section">
+				<section class="method-section" id="<?php echo $method['name']; ?>">
 					<h2 class="method-title"><?php echo $method['name']; ?></h2>
 
 					<?php if (!empty($method['description'])) { ?>
@@ -333,4 +479,4 @@
 	</div>
 </body>
 
-</html>
+</html>

src/typescript.tpl.php

@@ -6,7 +6,7 @@
  */
 
 class <?php echo $this->apiName; ?> {
-	endpont = "<?php echo $this->endpoint; ?>";
+	endpoint = <?php echo sprintf(substr($this->endpoint, 0, 4) == 'http' ? '"%s"' : '%s', $this->endpoint); ?>;
 
 	/* ----------------------------------------------------
 	 * General API call
@@ -29,7 +29,7 @@ class <?php echo $this->apiName; ?> {
 			if (typeof val == 'object') val = JSON.stringify(val);
 			form_data.append(key, val);
 		});
-		xhttp.open('POST', this.endpont + '?action=' + method);
+		xhttp.open('POST', this.endpoint + '?action=' + method);
 		xhttp.send(form_data);
 	}