777 lines
23 KiB
HTML
777 lines
23 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
|
|
<title>Markdown Render</title>
|
|
<!-- <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script> -->
|
|
<script src="https://cdn.hatter.ink/doc/18837_2D3503C6AA42672F4699D5608BC15B60/marked.min.js"></script>
|
|
<style>
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
html {
|
|
height: 100%;
|
|
overscroll-behavior: auto;
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
body {
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
min-height: 100dvh;
|
|
min-height: 100%;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: flex-start;
|
|
padding: calc(env(safe-area-inset-top) + 20px) env(safe-area-inset-right) calc(env(safe-area-inset-bottom) + 20px) env(safe-area-inset-left);
|
|
margin: 0;
|
|
overflow-y: auto;
|
|
overflow-x: hidden;
|
|
-webkit-overflow-scrolling: touch;
|
|
max-width: 100%;
|
|
}
|
|
|
|
.container {
|
|
background: white;
|
|
border-radius: 16px;
|
|
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
|
|
padding: 20px;
|
|
max-width: 800px;
|
|
width: 100%;
|
|
margin: 20px;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
h1 {
|
|
text-align: center;
|
|
color: #333;
|
|
margin-bottom: 10px;
|
|
font-size: 20px;
|
|
position: relative;
|
|
}
|
|
|
|
.subtitle {
|
|
text-align: center;
|
|
color: #666;
|
|
margin-bottom: 30px;
|
|
}
|
|
|
|
.input-row {
|
|
display: flex;
|
|
gap: 8px;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.url-input {
|
|
flex: 1;
|
|
padding: 10px 14px;
|
|
border: 2px solid #e0e0e0;
|
|
border-radius: 8px;
|
|
font-size: 14px;
|
|
outline: none;
|
|
transition: border-color 0.2s;
|
|
}
|
|
|
|
.url-input:focus {
|
|
border-color: #667eea;
|
|
}
|
|
|
|
.submit-btn {
|
|
padding: 10px 20px;
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
color: white;
|
|
border: none;
|
|
border-radius: 8px;
|
|
font-size: 14px;
|
|
cursor: pointer;
|
|
transition: transform 0.2s;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.submit-btn:hover {
|
|
transform: scale(1.05);
|
|
}
|
|
|
|
.drop-zone {
|
|
border: 2px dashed #667eea;
|
|
border-radius: 12px;
|
|
padding: 10px 20px;
|
|
text-align: center;
|
|
background: #f8f9ff;
|
|
transition: all 0.3s ease;
|
|
cursor: pointer;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.drop-zone.drag-over {
|
|
background: #e8eaff;
|
|
border-color: #764ba2;
|
|
transform: scale(1.02);
|
|
}
|
|
|
|
.drop-zone-icon {
|
|
font-size: 40px;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.drop-zone-text {
|
|
color: #555;
|
|
font-size: 16px;
|
|
}
|
|
|
|
.drop-zone-text strong {
|
|
color: #667eea;
|
|
}
|
|
|
|
#fileInput {
|
|
display: none;
|
|
}
|
|
|
|
.loading {
|
|
text-align: center;
|
|
color: #667eea;
|
|
padding: 20px;
|
|
display: none;
|
|
}
|
|
|
|
.loading.visible {
|
|
display: block;
|
|
}
|
|
|
|
.spinner {
|
|
display: inline-block;
|
|
width: 24px;
|
|
height: 24px;
|
|
border: 3px solid #e8eaff;
|
|
border-top-color: #667eea;
|
|
border-radius: 50%;
|
|
animation: spin 0.8s linear infinite;
|
|
margin-right: 8px;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
@keyframes spin {
|
|
to { transform: rotate(360deg); }
|
|
}
|
|
|
|
.error {
|
|
padding: 15px;
|
|
background: #ffe6e6;
|
|
border-radius: 8px;
|
|
color: #d63031;
|
|
display: none;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.error.visible {
|
|
display: block;
|
|
}
|
|
|
|
.render-output {
|
|
display: none;
|
|
}
|
|
|
|
.render-output.visible {
|
|
display: block;
|
|
}
|
|
|
|
.render-output .source-bar {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 8px 12px;
|
|
background: #f0f4ff;
|
|
border-radius: 8px 8px 0 0;
|
|
font-size: 13px;
|
|
color: #666;
|
|
}
|
|
|
|
.source-bar button {
|
|
padding: 4px 12px;
|
|
background: #667eea;
|
|
color: white;
|
|
border: none;
|
|
border-radius: 4px;
|
|
font-size: 12px;
|
|
cursor: pointer;
|
|
margin-left: 4px;
|
|
}
|
|
|
|
.source-bar button:hover {
|
|
background: #5568d3;
|
|
}
|
|
|
|
.markdown-body {
|
|
padding: 20px;
|
|
border: 1px solid #e0e0e0;
|
|
border-top: none;
|
|
border-radius: 0 0 8px 8px;
|
|
line-height: 1.6;
|
|
color: #333;
|
|
overflow-wrap: break-word;
|
|
}
|
|
|
|
.markdown-body h1, .markdown-body h2, .markdown-body h3,
|
|
.markdown-body h4, .markdown-body h5, .markdown-body h6 {
|
|
margin-top: 24px;
|
|
margin-bottom: 16px;
|
|
font-weight: 600;
|
|
line-height: 1.25;
|
|
}
|
|
|
|
.markdown-body h1 { font-size: 2em; border-bottom: 1px solid #eaecef; padding-bottom: 0.3em; }
|
|
.markdown-body h2 { font-size: 1.5em; border-bottom: 1px solid #eaecef; padding-bottom: 0.3em; }
|
|
.markdown-body h3 { font-size: 1.25em; }
|
|
|
|
.markdown-body p { margin-bottom: 16px; }
|
|
|
|
.markdown-body a { color: #667eea; text-decoration: none; }
|
|
.markdown-body a:hover { text-decoration: underline; }
|
|
|
|
.markdown-body code {
|
|
padding: 0.2em 0.4em;
|
|
background: #f6f8fa;
|
|
border-radius: 3px;
|
|
font-size: 0.9em;
|
|
}
|
|
|
|
.markdown-body pre {
|
|
padding: 16px;
|
|
background: #f6f8fa;
|
|
border-radius: 6px;
|
|
overflow-x: auto;
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
.markdown-body pre code {
|
|
padding: 0;
|
|
background: none;
|
|
font-size: 0.85em;
|
|
}
|
|
|
|
.markdown-body blockquote {
|
|
padding: 0 1em;
|
|
color: #6a737d;
|
|
border-left: 0.25em solid #dfe2e5;
|
|
margin: 0 0 16px 0;
|
|
}
|
|
|
|
.markdown-body ul, .markdown-body ol {
|
|
padding-left: 2em;
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
.markdown-body li { margin-bottom: 0.25em; }
|
|
|
|
.markdown-body table {
|
|
border-collapse: collapse;
|
|
margin-bottom: 16px;
|
|
width: 100%;
|
|
}
|
|
|
|
.markdown-body th, .markdown-body td {
|
|
padding: 6px 13px;
|
|
border: 1px solid #dfe2e5;
|
|
}
|
|
|
|
.markdown-body th {
|
|
background: #f6f8fa;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.markdown-body tr:nth-child(2n) {
|
|
background: #f6f8fa;
|
|
}
|
|
|
|
.markdown-body img {
|
|
max-width: 100%;
|
|
height: auto;
|
|
}
|
|
|
|
.markdown-body hr {
|
|
height: 0.25em;
|
|
padding: 0;
|
|
margin: 24px 0;
|
|
background-color: #e1e4e8;
|
|
border: 0;
|
|
}
|
|
|
|
.toast {
|
|
position: fixed;
|
|
bottom: 20px;
|
|
left: 50%;
|
|
transform: translateX(-50%) translateY(100px);
|
|
background: #333;
|
|
color: white;
|
|
padding: 10px 20px;
|
|
border-radius: 8px;
|
|
font-size: 14px;
|
|
opacity: 0;
|
|
transition: all 0.3s ease;
|
|
z-index: 1000;
|
|
}
|
|
|
|
.toast.visible {
|
|
transform: translateX(-50%) translateY(0);
|
|
opacity: 1;
|
|
}
|
|
|
|
.history-toggle {
|
|
position: absolute;
|
|
right: 0;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
background: none;
|
|
border: none;
|
|
font-size: 20px;
|
|
cursor: pointer;
|
|
color: #666;
|
|
padding: 4px 8px;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.history-toggle:hover {
|
|
background: #f0f0f0;
|
|
}
|
|
|
|
.history-panel {
|
|
display: none;
|
|
margin-top: 20px;
|
|
border: 1px solid #e0e0e0;
|
|
border-radius: 8px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.history-panel.visible {
|
|
display: block;
|
|
}
|
|
|
|
.history-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 12px 16px;
|
|
background: #f8f9ff;
|
|
border-bottom: 1px solid #e0e0e0;
|
|
}
|
|
|
|
.history-header h3 {
|
|
margin: 0;
|
|
font-size: 15px;
|
|
color: #333;
|
|
}
|
|
|
|
.history-actions {
|
|
display: flex;
|
|
gap: 8px;
|
|
}
|
|
|
|
.history-actions button {
|
|
padding: 4px 10px;
|
|
background: none;
|
|
border: 1px solid #ccc;
|
|
border-radius: 4px;
|
|
font-size: 12px;
|
|
cursor: pointer;
|
|
color: #666;
|
|
}
|
|
|
|
.history-actions button:hover {
|
|
background: #e8eaff;
|
|
border-color: #667eea;
|
|
color: #667eea;
|
|
}
|
|
|
|
.history-list {
|
|
max-height: 300px;
|
|
overflow-y: auto;
|
|
padding: 8px;
|
|
}
|
|
|
|
.history-item {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 8px 12px;
|
|
border-radius: 6px;
|
|
cursor: pointer;
|
|
transition: background 0.15s;
|
|
}
|
|
|
|
.history-item:hover {
|
|
background: #f0f4ff;
|
|
}
|
|
|
|
.history-item-info {
|
|
flex: 1;
|
|
min-width: 0;
|
|
}
|
|
|
|
.history-item-source {
|
|
font-size: 13px;
|
|
color: #333;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.history-item-time {
|
|
font-size: 11px;
|
|
color: #999;
|
|
margin-top: 2px;
|
|
}
|
|
|
|
.history-item-delete {
|
|
background: none;
|
|
border: none;
|
|
color: #ccc;
|
|
font-size: 16px;
|
|
cursor: pointer;
|
|
padding: 4px 8px;
|
|
border-radius: 4px;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.history-item-delete:hover {
|
|
color: #d63031;
|
|
background: #ffe6e6;
|
|
}
|
|
|
|
.history-empty {
|
|
padding: 20px;
|
|
text-align: center;
|
|
color: #999;
|
|
font-size: 13px;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<h1>Markdown Render
|
|
<button class="history-toggle" id="historyToggle" title="History">🕑</button>
|
|
</h1>
|
|
<p class="subtitle">Enter a URL or drop a markdown file</p>
|
|
|
|
<div class="history-panel" id="historyPanel">
|
|
<div class="history-header">
|
|
<h3>Render History</h3>
|
|
<div class="history-actions">
|
|
<button id="clearHistory">Clear All</button>
|
|
</div>
|
|
</div>
|
|
<div class="history-list" id="historyList"></div>
|
|
</div>
|
|
|
|
<div class="input-row">
|
|
<input type="text" class="url-input" id="urlInput" placeholder="https://example.com/file.md">
|
|
<button class="submit-btn" id="submitBtn">Render</button>
|
|
</div>
|
|
|
|
<div class="drop-zone" id="dropZone">
|
|
<div class="drop-zone-icon">📄</div>
|
|
<p class="drop-zone-text">
|
|
<strong>Drop file here</strong> or click to browse
|
|
</p>
|
|
</div>
|
|
<input type="file" id="fileInput" accept=".md,.markdown,.txt,.text">
|
|
|
|
<div class="loading" id="loading">
|
|
<span class="spinner"></span> Loading...
|
|
</div>
|
|
<div class="error" id="error"></div>
|
|
|
|
<div class="render-output" id="renderOutput">
|
|
<div class="source-bar">
|
|
<span id="sourceLabel"></span>
|
|
<div>
|
|
<button id="copyMdBtn">Copy Markdown</button>
|
|
<button id="rawBtn">View Raw</button>
|
|
</div>
|
|
</div>
|
|
<div class="markdown-body" id="renderedContent"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="toast" id="toast"></div>
|
|
|
|
<script>
|
|
const urlInput = document.getElementById('urlInput');
|
|
const submitBtn = document.getElementById('submitBtn');
|
|
const dropZone = document.getElementById('dropZone');
|
|
const fileInput = document.getElementById('fileInput');
|
|
const loading = document.getElementById('loading');
|
|
const error = document.getElementById('error');
|
|
const renderOutput = document.getElementById('renderOutput');
|
|
const renderedContent = document.getElementById('renderedContent');
|
|
const sourceLabel = document.getElementById('sourceLabel');
|
|
const copyMdBtn = document.getElementById('copyMdBtn');
|
|
const rawBtn = document.getElementById('rawBtn');
|
|
const toast = document.getElementById('toast');
|
|
const historyToggle = document.getElementById('historyToggle');
|
|
const historyPanel = document.getElementById('historyPanel');
|
|
const historyList = document.getElementById('historyList');
|
|
const clearHistory = document.getElementById('clearHistory');
|
|
|
|
let currentRawText = '';
|
|
const HISTORY_KEY = 'markdown_render_history';
|
|
const MAX_HISTORY = 50;
|
|
|
|
// Extension system: loaders registry
|
|
// Loaders are functions that take a URL/source and return text content.
|
|
// Register custom loaders via window.registerLoader(name, fn).
|
|
const loaders = {};
|
|
|
|
// Default HTTP/HTTPS loader with extension hooks
|
|
const defaultHttpLoader = async (url) => {
|
|
const response = await fetch(url, {
|
|
headers: { 'Accept': 'text/markdown, text/plain, */*' }
|
|
});
|
|
if (!response.ok) throw new Error(`HTTP ${response.status}: ${response.statusText}`);
|
|
return await response.text();
|
|
};
|
|
loaders['http'] = defaultHttpLoader;
|
|
loaders['https'] = defaultHttpLoader;
|
|
|
|
window.registerLoader = function(name, fn) {
|
|
loaders[name] = fn;
|
|
};
|
|
|
|
window.getLoaders = function() { return loaders; };
|
|
|
|
function resolveLoader(source) {
|
|
// Check if any registered loader claims this source
|
|
for (const [name, fn] of Object.entries(loaders)) {
|
|
if (fn.claims && fn.claims(source)) {
|
|
return fn;
|
|
}
|
|
}
|
|
// Try scheme-based resolution
|
|
const match = source.match(/^([a-zA-Z][a-zA-Z0-9+.-]*):\/\//);
|
|
if (match && loaders[match[1]]) {
|
|
return loaders[match[1]];
|
|
}
|
|
if (match && loaders['*']) {
|
|
return loaders['*'];
|
|
}
|
|
return defaultHttpLoader;
|
|
}
|
|
|
|
async function loadContent(source) {
|
|
const loader = resolveLoader(source);
|
|
return await loader(source);
|
|
}
|
|
|
|
function renderMarkdown(text, source) {
|
|
currentRawText = text;
|
|
const html = marked.parse(text);
|
|
renderedContent.innerHTML = html;
|
|
sourceLabel.textContent = source || 'Dropped file';
|
|
renderOutput.classList.add('visible');
|
|
addToHistory(source || 'Dropped file', text);
|
|
}
|
|
|
|
function showToast(message) {
|
|
toast.textContent = message;
|
|
toast.classList.add('visible');
|
|
setTimeout(() => toast.classList.remove('visible'), 2000);
|
|
}
|
|
|
|
function showError(message) {
|
|
error.textContent = message;
|
|
error.classList.add('visible');
|
|
}
|
|
|
|
function hideError() {
|
|
error.classList.remove('visible');
|
|
}
|
|
|
|
function showLoading() { loading.classList.add('visible'); }
|
|
function hideLoading() { loading.classList.remove('visible'); }
|
|
function hideResult() { renderOutput.classList.remove('visible'); }
|
|
|
|
async function handleUrl(url) {
|
|
if (!url) return;
|
|
hideError();
|
|
hideResult();
|
|
showLoading();
|
|
|
|
try {
|
|
const text = await loadContent(url);
|
|
hideLoading();
|
|
renderMarkdown(text, url);
|
|
} catch (err) {
|
|
hideLoading();
|
|
showError(`Failed to load: ${err.message}`);
|
|
}
|
|
}
|
|
|
|
function handleFile(file) {
|
|
hideError();
|
|
hideResult();
|
|
showLoading();
|
|
|
|
const reader = new FileReader();
|
|
reader.onload = (e) => {
|
|
hideLoading();
|
|
renderMarkdown(e.target.result, file.name);
|
|
};
|
|
reader.onerror = () => {
|
|
hideLoading();
|
|
showError('Failed to read file');
|
|
};
|
|
reader.readAsText(file);
|
|
}
|
|
|
|
submitBtn.addEventListener('click', () => handleUrl(urlInput.value.trim()));
|
|
urlInput.addEventListener('keydown', (e) => {
|
|
if (e.key === 'Enter') handleUrl(urlInput.value.trim());
|
|
});
|
|
|
|
dropZone.addEventListener('click', () => fileInput.click());
|
|
|
|
dropZone.addEventListener('dragover', (e) => {
|
|
e.preventDefault();
|
|
dropZone.classList.add('drag-over');
|
|
});
|
|
|
|
dropZone.addEventListener('dragleave', () => {
|
|
dropZone.classList.remove('drag-over');
|
|
});
|
|
|
|
dropZone.addEventListener('drop', (e) => {
|
|
e.preventDefault();
|
|
dropZone.classList.remove('drag-over');
|
|
const files = e.dataTransfer.files;
|
|
if (files.length > 0) handleFile(files[0]);
|
|
});
|
|
|
|
fileInput.addEventListener('change', (e) => {
|
|
if (e.target.files.length > 0) handleFile(e.target.files[0]);
|
|
});
|
|
|
|
copyMdBtn.addEventListener('click', () => {
|
|
navigator.clipboard.writeText(currentRawText).then(() => showToast('Copied!'));
|
|
});
|
|
|
|
rawBtn.addEventListener('click', () => {
|
|
const blob = new Blob([currentRawText], { type: 'text/markdown' });
|
|
const url = URL.createObjectURL(blob);
|
|
window.open(url, '_blank');
|
|
});
|
|
|
|
// --- History ---
|
|
function getHistory() {
|
|
try {
|
|
return JSON.parse(localStorage.getItem(HISTORY_KEY) || '[]');
|
|
} catch {
|
|
return [];
|
|
}
|
|
}
|
|
|
|
function saveHistory(items) {
|
|
localStorage.setItem(HISTORY_KEY, JSON.stringify(items));
|
|
}
|
|
|
|
function addToHistory(source, text) {
|
|
const items = getHistory();
|
|
// Remove existing entry with same source to avoid duplicates
|
|
const existing = items.findIndex(i => i.source === source);
|
|
if (existing !== -1) items.splice(existing, 1);
|
|
items.unshift({
|
|
source,
|
|
text,
|
|
time: new Date().toISOString()
|
|
});
|
|
if (items.length > MAX_HISTORY) items.length = MAX_HISTORY;
|
|
saveHistory(items);
|
|
renderHistory();
|
|
}
|
|
|
|
function deleteHistoryItem(index) {
|
|
const items = getHistory();
|
|
items.splice(index, 1);
|
|
saveHistory(items);
|
|
renderHistory();
|
|
}
|
|
|
|
function clearAllHistory() {
|
|
localStorage.removeItem(HISTORY_KEY);
|
|
renderHistory();
|
|
}
|
|
|
|
function formatTime(iso) {
|
|
const d = new Date(iso);
|
|
const now = new Date();
|
|
const diff = now - d;
|
|
if (diff < 60000) return 'Just now';
|
|
if (diff < 3600000) return Math.floor(diff / 60000) + 'm ago';
|
|
if (diff < 86400000) return Math.floor(diff / 3600000) + 'h ago';
|
|
return d.toLocaleDateString();
|
|
}
|
|
|
|
function renderHistory() {
|
|
const items = getHistory();
|
|
if (items.length === 0) {
|
|
historyList.innerHTML = '<div class="history-empty">No render history yet</div>';
|
|
return;
|
|
}
|
|
historyList.innerHTML = items.map((item, i) => `
|
|
<div class="history-item" data-index="${i}">
|
|
<div class="history-item-info">
|
|
<div class="history-item-source">${escapeHtml(item.source)}</div>
|
|
<div class="history-item-time">${formatTime(item.time)}</div>
|
|
</div>
|
|
<button class="history-item-delete" data-index="${i}" title="Delete">×</button>
|
|
</div>
|
|
`).join('');
|
|
}
|
|
|
|
function escapeHtml(str) {
|
|
return str.replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>').replace(/"/g, '"');
|
|
}
|
|
|
|
historyList.addEventListener('click', (e) => {
|
|
const deleteBtn = e.target.closest('.history-item-delete');
|
|
if (deleteBtn) {
|
|
e.stopPropagation();
|
|
deleteHistoryItem(parseInt(deleteBtn.dataset.index));
|
|
return;
|
|
}
|
|
const item = e.target.closest('.history-item');
|
|
if (item) {
|
|
const idx = parseInt(item.dataset.index);
|
|
const entry = getHistory()[idx];
|
|
if (entry) {
|
|
hideError();
|
|
renderMarkdown(entry.text, entry.source);
|
|
}
|
|
}
|
|
});
|
|
|
|
historyToggle.addEventListener('click', () => {
|
|
historyPanel.classList.toggle('visible');
|
|
renderHistory();
|
|
});
|
|
|
|
clearHistory.addEventListener('click', () => {
|
|
clearAllHistory();
|
|
});
|
|
|
|
renderHistory();
|
|
|
|
// Handle URL parameter: ?url=...
|
|
const params = new URLSearchParams(window.location.search);
|
|
const urlParam = params.get('url');
|
|
if (urlParam) {
|
|
urlInput.value = urlParam;
|
|
handleUrl(urlParam);
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|