lots of progress
This commit is contained in:
@@ -0,0 +1,384 @@
|
||||
@extends('layouts.app')
|
||||
|
||||
@section('title', 'JSON Templates - Common JSON Formats and Examples')
|
||||
|
||||
@push('styles')
|
||||
<link href="https://cdn.jsdelivr.net/npm/jsoneditor@9.10.2/dist/jsoneditor.min.css" rel="stylesheet">
|
||||
<style>
|
||||
.template-card {
|
||||
border: 1px solid var(--bs-border-color);
|
||||
border-radius: 0.5rem;
|
||||
transition: all 0.3s ease;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.template-card:hover {
|
||||
transform: translateY(-5px);
|
||||
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.template-card .card-body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.template-card .card-footer {
|
||||
background: transparent;
|
||||
border-top: 1px solid var(--bs-border-color);
|
||||
}
|
||||
|
||||
.template-preview {
|
||||
background-color: var(--bs-body-bg);
|
||||
border: 1px solid var(--bs-border-color);
|
||||
border-radius: 0.375rem;
|
||||
padding: 1rem;
|
||||
margin-top: 1rem;
|
||||
max-height: 300px;
|
||||
overflow-y: auto;
|
||||
font-family: 'Courier New', monospace;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.template-icon {
|
||||
font-size: 2rem;
|
||||
color: var(--primary-color);
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.template-category {
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.template-category h2 {
|
||||
margin-bottom: 1.5rem;
|
||||
padding-bottom: 0.5rem;
|
||||
border-bottom: 2px solid var(--primary-color);
|
||||
}
|
||||
|
||||
.copy-btn {
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.copy-btn:hover {
|
||||
color: var(--primary-color);
|
||||
}
|
||||
|
||||
.copy-btn.copied {
|
||||
color: var(--bs-success);
|
||||
}
|
||||
|
||||
.hero-section {
|
||||
background: linear-gradient(135deg, var(--primary-color) 0%, #6a8eff 100%);
|
||||
color: white;
|
||||
padding: 3rem 0;
|
||||
margin-bottom: 2rem;
|
||||
border-radius: 0.5rem;
|
||||
}
|
||||
</style>
|
||||
@endpush
|
||||
|
||||
@section('content')
|
||||
<div class="hero-section text-center">
|
||||
<h1 class="display-4 fw-bold mb-3">JSON Templates</h1>
|
||||
<p class="lead mb-4">Common JSON formats and examples for various use cases</p>
|
||||
</div>
|
||||
|
||||
<div class="template-category">
|
||||
<h2 class="h4">API Responses</h2>
|
||||
<div class="row">
|
||||
<div class="col-md-6 mb-4">
|
||||
<div class="card template-card">
|
||||
<div class="card-body">
|
||||
<i class="bi bi-cloud-arrow-down template-icon"></i>
|
||||
<h3 class="h5">REST API Response</h3>
|
||||
<p class="text-muted">Standard REST API response with status, data, and pagination</p>
|
||||
<div class="template-preview">
|
||||
<pre><code>{
|
||||
"status": "success",
|
||||
"code": 200,
|
||||
"message": "Data retrieved successfully",
|
||||
"data": {
|
||||
"items": [
|
||||
{
|
||||
"id": 1,
|
||||
"name": "Item 1",
|
||||
"description": "Description of item 1"
|
||||
},
|
||||
{
|
||||
"id": 2,
|
||||
"name": "Item 2",
|
||||
"description": "Description of item 2"
|
||||
}
|
||||
],
|
||||
"pagination": {
|
||||
"total": 100,
|
||||
"per_page": 10,
|
||||
"current_page": 1,
|
||||
"last_page": 10
|
||||
}
|
||||
}
|
||||
}</code></pre>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
<button class="btn btn-link copy-btn" data-template="rest-api">
|
||||
<i class="bi bi-clipboard me-2"></i>Copy Template
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6 mb-4">
|
||||
<div class="card template-card">
|
||||
<div class="card-body">
|
||||
<i class="bi bi-graph-up template-icon"></i>
|
||||
<h3 class="h5">GraphQL Response</h3>
|
||||
<p class="text-muted">GraphQL API response with nested data structure</p>
|
||||
<div class="template-preview">
|
||||
<pre><code>{
|
||||
"data": {
|
||||
"user": {
|
||||
"id": "1",
|
||||
"name": "John Doe",
|
||||
"email": "john@example.com",
|
||||
"posts": [
|
||||
{
|
||||
"id": "101",
|
||||
"title": "First Post",
|
||||
"content": "Content of the first post",
|
||||
"comments": [
|
||||
{
|
||||
"id": "1001",
|
||||
"text": "Great post!",
|
||||
"author": {
|
||||
"id": "2",
|
||||
"name": "Jane Smith"
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}</code></pre>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
<button class="btn btn-link copy-btn" data-template="graphql">
|
||||
<i class="bi bi-clipboard me-2"></i>Copy Template
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="template-category">
|
||||
<h2 class="h4">Configuration Files</h2>
|
||||
<div class="row">
|
||||
<div class="col-md-6 mb-4">
|
||||
<div class="card template-card">
|
||||
<div class="card-body">
|
||||
<i class="bi bi-gear template-icon"></i>
|
||||
<h3 class="h5">Application Config</h3>
|
||||
<p class="text-muted">Common application configuration settings</p>
|
||||
<div class="template-preview">
|
||||
<pre><code>{
|
||||
"app": {
|
||||
"name": "My Application",
|
||||
"version": "1.0.0",
|
||||
"environment": "production",
|
||||
"debug": false
|
||||
},
|
||||
"database": {
|
||||
"host": "localhost",
|
||||
"port": 3306,
|
||||
"name": "mydb",
|
||||
"username": "user",
|
||||
"password": "secret"
|
||||
},
|
||||
"logging": {
|
||||
"level": "info",
|
||||
"file": "app.log",
|
||||
"max_size": "10MB"
|
||||
},
|
||||
"api": {
|
||||
"base_url": "https://api.example.com",
|
||||
"timeout": 30,
|
||||
"retry_attempts": 3
|
||||
}
|
||||
}</code></pre>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
<button class="btn btn-link copy-btn" data-template="app-config">
|
||||
<i class="bi bi-clipboard me-2"></i>Copy Template
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6 mb-4">
|
||||
<div class="card template-card">
|
||||
<div class="card-body">
|
||||
<i class="bi bi-box template-icon"></i>
|
||||
<h3 class="h5">Package.json</h3>
|
||||
<p class="text-muted">Node.js package configuration</p>
|
||||
<div class="template-preview">
|
||||
<pre><code>{
|
||||
"name": "my-package",
|
||||
"version": "1.0.0",
|
||||
"description": "A sample Node.js package",
|
||||
"main": "index.js",
|
||||
"scripts": {
|
||||
"start": "node index.js",
|
||||
"test": "jest",
|
||||
"build": "webpack"
|
||||
},
|
||||
"dependencies": {
|
||||
"express": "^4.17.1",
|
||||
"lodash": "^4.17.21"
|
||||
},
|
||||
"devDependencies": {
|
||||
"jest": "^27.0.6",
|
||||
"webpack": "^5.50.0"
|
||||
},
|
||||
"author": "John Doe",
|
||||
"license": "MIT"
|
||||
}</code></pre>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
<button class="btn btn-link copy-btn" data-template="package-json">
|
||||
<i class="bi bi-clipboard me-2"></i>Copy Template
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="template-category">
|
||||
<h2 class="h4">Data Structures</h2>
|
||||
<div class="row">
|
||||
<div class="col-md-6 mb-4">
|
||||
<div class="card template-card">
|
||||
<div class="card-body">
|
||||
<i class="bi bi-person template-icon"></i>
|
||||
<h3 class="h5">User Profile</h3>
|
||||
<p class="text-muted">User profile data structure</p>
|
||||
<div class="template-preview">
|
||||
<pre><code>{
|
||||
"id": "user123",
|
||||
"username": "johndoe",
|
||||
"email": "john@example.com",
|
||||
"profile": {
|
||||
"firstName": "John",
|
||||
"lastName": "Doe",
|
||||
"age": 30,
|
||||
"gender": "male",
|
||||
"location": {
|
||||
"country": "USA",
|
||||
"city": "New York"
|
||||
}
|
||||
},
|
||||
"preferences": {
|
||||
"theme": "dark",
|
||||
"notifications": true,
|
||||
"language": "en"
|
||||
},
|
||||
"createdAt": "2023-01-01T00:00:00Z",
|
||||
"lastLogin": "2023-06-15T14:30:00Z"
|
||||
}</code></pre>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
<button class="btn btn-link copy-btn" data-template="user-profile">
|
||||
<i class="bi bi-clipboard me-2"></i>Copy Template
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6 mb-4">
|
||||
<div class="card template-card">
|
||||
<div class="card-body">
|
||||
<i class="bi bi-cart template-icon"></i>
|
||||
<h3 class="h5">E-commerce Order</h3>
|
||||
<p class="text-muted">E-commerce order data structure</p>
|
||||
<div class="template-preview">
|
||||
<pre><code>{
|
||||
"orderId": "ORD-2023-001",
|
||||
"customer": {
|
||||
"id": "CUST-001",
|
||||
"name": "John Doe",
|
||||
"email": "john@example.com",
|
||||
"shippingAddress": {
|
||||
"street": "123 Main St",
|
||||
"city": "New York",
|
||||
"state": "NY",
|
||||
"zipCode": "10001",
|
||||
"country": "USA"
|
||||
}
|
||||
},
|
||||
"items": [
|
||||
{
|
||||
"productId": "PROD-001",
|
||||
"name": "Product 1",
|
||||
"quantity": 2,
|
||||
"price": 29.99,
|
||||
"total": 59.98
|
||||
},
|
||||
{
|
||||
"productId": "PROD-002",
|
||||
"name": "Product 2",
|
||||
"quantity": 1,
|
||||
"price": 49.99,
|
||||
"total": 49.99
|
||||
}
|
||||
],
|
||||
"subtotal": 109.97,
|
||||
"tax": 10.99,
|
||||
"shipping": 5.99,
|
||||
"total": 126.95,
|
||||
"status": "processing",
|
||||
"createdAt": "2023-06-15T10:30:00Z"
|
||||
}</code></pre>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
<button class="btn btn-link copy-btn" data-template="ecommerce-order">
|
||||
<i class="bi bi-clipboard me-2"></i>Copy Template
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@endsection
|
||||
|
||||
@push('scripts')
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
const copyButtons = document.querySelectorAll('.copy-btn');
|
||||
|
||||
copyButtons.forEach(button => {
|
||||
button.addEventListener('click', function() {
|
||||
const template = this.getAttribute('data-template');
|
||||
const templateContent = this.closest('.card').querySelector('pre code').textContent;
|
||||
|
||||
navigator.clipboard.writeText(templateContent).then(() => {
|
||||
const originalText = this.innerHTML;
|
||||
this.innerHTML = '<i class="bi bi-check2 me-2"></i>Copied!';
|
||||
this.classList.add('copied');
|
||||
|
||||
setTimeout(() => {
|
||||
this.innerHTML = originalText;
|
||||
this.classList.remove('copied');
|
||||
}, 2000);
|
||||
}).catch(err => {
|
||||
console.error('Failed to copy text: ', err);
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
</script>
|
||||
@endpush
|
||||
Reference in New Issue
Block a user