136 lines
5.3 KiB
HTML
136 lines
5.3 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="ar" dir="rtl">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Siro Documentation Viewer</title>
|
|
<!-- SEO & Meta -->
|
|
<meta name="theme-color" content="#0f172a">
|
|
|
|
<!-- Google Fonts -->
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link href="https://fonts.googleapis.com/css2?family=Cairo:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
|
|
|
|
<!-- FontAwesome -->
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
|
|
|
|
<!-- highlight.js for code syntax highlighting -->
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/atom-one-dark.min.css">
|
|
|
|
<!-- Custom CSS (imports base styles from style.css + viewer specific styles) -->
|
|
<link rel="stylesheet" href="style.css">
|
|
<link rel="stylesheet" href="viewer.css">
|
|
</head>
|
|
<body>
|
|
<div class="bg-animation">
|
|
<div class="glow-orb orb-1"></div>
|
|
<div class="glow-orb orb-2"></div>
|
|
<div class="glow-orb orb-3"></div>
|
|
</div>
|
|
|
|
<!-- Toolbar Navigation -->
|
|
<nav class="glass-nav viewer-nav">
|
|
<div class="nav-brand">
|
|
<a href="index.html" class="back-link">
|
|
<i class="fa-solid fa-arrow-right"></i> <!-- arrow right for RTL -->
|
|
<span>العودة للرئيسية</span>
|
|
</a>
|
|
</div>
|
|
<div class="nav-links">
|
|
<span id="doc-title-display" class="doc-path-display">جاري تحميل المستند...</span>
|
|
</div>
|
|
</nav>
|
|
|
|
<main class="viewer-container">
|
|
<div id="loading-spinner" class="spinner-container">
|
|
<i class="fa-solid fa-circle-notch fa-spin"></i>
|
|
<p>جاري جلب المستند...</p>
|
|
</div>
|
|
|
|
<div id="error-message" class="error-container" style="display: none;">
|
|
<i class="fa-solid fa-circle-exclamation"></i>
|
|
<h2>عذراً، لم نتمكن من جلب الملف</h2>
|
|
<p>تأكد من أنك تتصفح الموقع عبر سيرفر محلي (Live Server) وليس كملف مباشر (file://) بسبب حماية المتصفحات، أو تأكد من صحة الرابط.</p>
|
|
<a href="index.html" class="btn btn-primary mt-3">العودة للرئيسية</a>
|
|
</div>
|
|
|
|
<article id="markdown-content" class="markdown-body glass-panel" style="display: none;">
|
|
<!-- Content will be injected here -->
|
|
</article>
|
|
</main>
|
|
|
|
<footer>
|
|
<div class="footer-content">
|
|
<p>© 2026 Siro Platform.</p>
|
|
</div>
|
|
</footer>
|
|
|
|
<!-- Libraries -->
|
|
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
|
|
|
|
<!-- Load static markdown data to bypass file:// CORS -->
|
|
<script src="docs-data.js"></script>
|
|
|
|
<!-- Viewer Script -->
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
// Get ?doc= parameter
|
|
const urlParams = new URLSearchParams(window.location.search);
|
|
const docPath = urlParams.get('doc');
|
|
|
|
const loadingEl = document.getElementById('loading-spinner');
|
|
const errorEl = document.getElementById('error-message');
|
|
const contentEl = document.getElementById('markdown-content');
|
|
const titleEl = document.getElementById('doc-title-display');
|
|
|
|
if (!docPath) {
|
|
loadingEl.style.display = 'none';
|
|
errorEl.style.display = 'flex';
|
|
errorEl.querySelector('p').innerText = "لم يتم تحديد أي ملف لعرضه.";
|
|
return;
|
|
}
|
|
|
|
titleEl.innerText = docPath.split('/').pop();
|
|
document.title = `${docPath.split('/').pop()} - Siro Docs`;
|
|
|
|
// Configure marked with highlight.js
|
|
marked.setOptions({
|
|
highlight: function(code, lang) {
|
|
const language = hljs.getLanguage(lang) ? lang : 'plaintext';
|
|
return hljs.highlight(code, { language }).value;
|
|
},
|
|
langPrefix: 'hljs language-',
|
|
gfm: true,
|
|
breaks: true
|
|
});
|
|
|
|
try {
|
|
// Get the markdown text from the static JS object
|
|
const markdownText = docsData[docPath];
|
|
|
|
if (!markdownText) {
|
|
throw new Error(`Document not found in docsData: ${docPath}`);
|
|
}
|
|
|
|
// Parse markdown
|
|
const htmlContent = marked.parse(markdownText);
|
|
|
|
// Inject content
|
|
contentEl.innerHTML = htmlContent;
|
|
|
|
// Show content
|
|
loadingEl.style.display = 'none';
|
|
contentEl.style.display = 'block';
|
|
|
|
} catch (error) {
|
|
console.error("Error parsing document:", error);
|
|
loadingEl.style.display = 'none';
|
|
errorEl.style.display = 'flex';
|
|
}
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|