142 lines
9.7 KiB
PHP
142 lines
9.7 KiB
PHP
<!doctype html>
|
|
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>{{ trim($__env->yieldContent('title', 'Documentation')) }} - {{ config('app.name', 'Laravel') }}</title>
|
|
<style>
|
|
:root {
|
|
--doc-ink: #10231f;
|
|
--doc-muted: #64748b;
|
|
--doc-line: #dbe7e2;
|
|
--doc-panel: #ffffff;
|
|
--doc-soft: #f5faf8;
|
|
--doc-brand: #0f766e;
|
|
--doc-brand-dark: #115e59;
|
|
--doc-accent: #16a34a;
|
|
--doc-danger: #b91c1c;
|
|
--doc-warning: #b45309;
|
|
--doc-radius: 22px;
|
|
--doc-shadow: 0 24px 70px rgba(15, 35, 31, .12);
|
|
}
|
|
body.documentation-module {
|
|
margin: 0;
|
|
background: linear-gradient(135deg, #eef8f3 0%, #f8fafc 45%, #ecfdf5 100%);
|
|
color: var(--doc-ink);
|
|
font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
|
|
min-height: 100vh;
|
|
}
|
|
.doc-shell { max-width: 1240px; margin: 0 auto; padding: 28px 20px 56px; }
|
|
.doc-hero {
|
|
display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: center;
|
|
padding: 28px; border-radius: 30px; color: #fff;
|
|
background: radial-gradient(circle at top left, rgba(255,255,255,.24), transparent 34%), linear-gradient(135deg, #064e3b, #0f766e 52%, #16a34a);
|
|
box-shadow: var(--doc-shadow); margin-bottom: 22px;
|
|
}
|
|
.doc-eyebrow { text-transform: uppercase; font-size: 12px; letter-spacing: .16em; font-weight: 800; opacity: .82; margin: 0 0 10px; }
|
|
.doc-hero h1 { margin: 0; font-size: clamp(30px, 5vw, 52px); line-height: .98; letter-spacing: -.04em; }
|
|
.doc-hero p { max-width: 720px; margin: 14px 0 0; color: rgba(255,255,255,.84); font-size: 16px; line-height: 1.65; }
|
|
.doc-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
|
|
.doc-button {
|
|
border: 1px solid transparent; border-radius: 999px; padding: 11px 16px; font-weight: 800; font-size: 14px;
|
|
text-decoration: none; display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
|
|
}
|
|
.doc-button.primary { background: #fff; color: var(--doc-brand-dark); }
|
|
.doc-button.secondary { background: rgba(255,255,255,.14); color: #fff; border-color: rgba(255,255,255,.32); }
|
|
.doc-button.dark { background: var(--doc-brand); color: #fff; }
|
|
.doc-button.light { background: #f8fafc; color: var(--doc-ink); border-color: var(--doc-line); }
|
|
.doc-button.danger { background: #fef2f2; color: var(--doc-danger); border-color: #fecaca; padding: 8px 12px; }
|
|
.doc-card { background: rgba(255,255,255,.92); border: 1px solid var(--doc-line); border-radius: var(--doc-radius); box-shadow: 0 14px 45px rgba(15,35,31,.08); overflow: hidden; }
|
|
.doc-card-header { padding: 20px 22px; border-bottom: 1px solid var(--doc-line); display: flex; align-items: center; justify-content: space-between; gap: 16px; }
|
|
.doc-card-body { padding: 22px; }
|
|
.doc-grid { display: grid; gap: 18px; }
|
|
.doc-grid.stats { grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 22px 0; }
|
|
.doc-stat { padding: 20px; }
|
|
.doc-stat strong { display:block; font-size: 30px; letter-spacing: -.04em; }
|
|
.doc-stat span { color: var(--doc-muted); font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }
|
|
.doc-table { width: 100%; border-collapse: collapse; }
|
|
.doc-table th { text-align: left; font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--doc-muted); padding: 12px; border-bottom: 1px solid var(--doc-line); }
|
|
.doc-table td { padding: 14px 12px; border-bottom: 1px solid #edf3f0; vertical-align: top; }
|
|
.doc-table a { color: var(--doc-brand-dark); font-weight: 800; text-decoration: none; }
|
|
.doc-badge { display: inline-flex; align-items: center; border-radius: 999px; padding: 5px 10px; font-size: 12px; font-weight: 800; background: #ecfdf5; color: #065f46; border: 1px solid #bbf7d0; }
|
|
.doc-badge.draft { background: #f8fafc; color: #475569; border-color: #cbd5e1; }
|
|
.doc-badge.archived { background: #fef2f2; color: #991b1b; border-color: #fecaca; }
|
|
.doc-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
|
|
.doc-field.full { grid-column: 1 / -1; }
|
|
.doc-label { display: block; font-weight: 800; margin-bottom: 8px; font-size: 14px; }
|
|
.doc-input, .doc-select, .doc-textarea {
|
|
width: 100%; box-sizing: border-box; border: 1px solid #cbd5e1; border-radius: 14px; padding: 12px 14px;
|
|
background: #fff; color: var(--doc-ink); font: inherit;
|
|
}
|
|
.doc-textarea { min-height: 360px; line-height: 1.6; resize: vertical; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; }
|
|
.doc-editor { border: 1px solid #cbd5e1; border-radius: 16px; overflow: hidden; background: #fff; }
|
|
.doc-editor .doc-textarea { border: 0; border-radius: 0; min-height: 420px; }
|
|
.doc-editor-toolbar { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px; background: #f8fafc; border-bottom: 1px solid var(--doc-line); }
|
|
.doc-editor-toolbar button { border: 1px solid #cbd5e1; background: #fff; color: var(--doc-ink); border-radius: 10px; padding: 7px 10px; font-weight: 800; cursor: pointer; }
|
|
.doc-editor-toolbar button:hover, .doc-editor-toolbar button:focus { border-color: var(--doc-brand); outline: 2px solid rgba(15, 118, 110, .18); }
|
|
.editor-help { padding: 0 14px 12px; margin: -4px 0 0; font-size: 13px; }
|
|
.doc-error { color: var(--doc-danger); font-size: 13px; margin-top: 6px; }
|
|
.doc-alert { border-radius: 16px; padding: 14px 16px; background: #ecfdf5; color: #065f46; border: 1px solid #bbf7d0; margin-bottom: 18px; font-weight: 700; }
|
|
.doc-filter { display: grid; grid-template-columns: 1fr 180px 220px auto; gap: 12px; margin-bottom: 18px; }
|
|
.doc-content { line-height: 1.75; font-size: 16px; }
|
|
.doc-content h1, .doc-content h2, .doc-content h3 { line-height: 1.2; letter-spacing: -.025em; margin: 1.4em 0 .55em; }
|
|
.doc-content h1 { font-size: 2rem; }
|
|
.doc-content h2 { font-size: 1.55rem; border-bottom: 1px solid var(--doc-line); padding-bottom: .35rem; }
|
|
.doc-content h3 { font-size: 1.25rem; }
|
|
.doc-content p, .doc-content ul, .doc-content ol, .doc-content blockquote, .doc-content pre { margin: 0 0 1rem; }
|
|
.doc-content code { background: #f1f5f9; border-radius: 7px; padding: .14rem .32rem; font-size: .92em; }
|
|
.doc-content pre { overflow-x: auto; background: #0f172a; color: #e2e8f0; border-radius: 16px; padding: 16px; }
|
|
.doc-content pre code { background: transparent; color: inherit; padding: 0; }
|
|
.doc-content blockquote { border-left: 4px solid var(--doc-brand); padding-left: 16px; color: var(--doc-muted); }
|
|
.doc-content table { width: 100%; border-collapse: collapse; margin: 1rem 0; }
|
|
.doc-content th, .doc-content td { border: 1px solid var(--doc-line); padding: 10px 12px; text-align: left; }
|
|
.doc-muted { color: var(--doc-muted); }
|
|
.doc-link { color: var(--doc-brand-dark); font-weight: 800; text-decoration: none; }
|
|
.doc-attachment-list { display: grid; gap: 10px; }
|
|
.doc-attachment-item { display: flex; justify-content: space-between; align-items: center; gap: 14px; border: 1px solid var(--doc-line); border-radius: 14px; padding: 12px 14px; background: #fff; }
|
|
@media (max-width: 860px) {
|
|
.doc-hero { grid-template-columns: 1fr; }
|
|
.doc-grid.stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
|
|
.doc-filter, .doc-form-grid { grid-template-columns: 1fr; }
|
|
.doc-table { display: block; overflow-x: auto; }
|
|
}
|
|
@media (max-width: 560px) {
|
|
.doc-shell { padding: 16px 12px 36px; }
|
|
.doc-hero { padding: 22px; border-radius: 22px; }
|
|
.doc-grid.stats { grid-template-columns: 1fr; }
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="documentation-module">
|
|
<main class="doc-shell">
|
|
@yield('content')
|
|
</main>
|
|
<script>
|
|
document.addEventListener('click', function (event) {
|
|
const button = event.target.closest('[data-md-before]');
|
|
|
|
if (! button) {
|
|
return;
|
|
}
|
|
|
|
const editor = button.closest('[data-documentation-editor]');
|
|
const textarea = editor ? editor.querySelector('[data-markdown-textarea]') : null;
|
|
|
|
if (! textarea) {
|
|
return;
|
|
}
|
|
|
|
const before = button.getAttribute('data-md-before') || '';
|
|
const after = button.getAttribute('data-md-after') || '';
|
|
const start = textarea.selectionStart || 0;
|
|
const end = textarea.selectionEnd || 0;
|
|
const selected = textarea.value.substring(start, end);
|
|
const replacement = before + selected + after;
|
|
|
|
textarea.setRangeText(replacement, start, end, 'end');
|
|
textarea.focus();
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|