Skip to content

Instantly share code, notes, and snippets.

@notsopreety

notsopreety/template2.html

Last active September 30, 2025 03:54
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save notsopreety/1b3abdac820de3b7aba707fd73cbbdd7 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save notsopreety/1b3abdac820de3b7aba707fd73cbbdd7 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
template2.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>${title}</title>
<!-- Google Fonts -->
<link
href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap"
rel="stylesheet"
/>
<!-- Highlight.js -->
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/github.min.css"
id="hljs-theme-light"
/>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/tokyo-night-dark.min.css"
id="hljs-theme-dark"
disabled
/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
:root {
--bg-primary: #ffffff;
--bg-secondary: #f8fafc;
--bg-tertiary: #f1f5f9;
--text-primary: #1e293b;
--text-secondary: #475569;
--text-tertiary: #64748b;
--border-color: #e2e8f0;
--border-hover: #cbd5e1;
--code-bg: #f8fafc;
--code-border: #e2e8f0;
--link-color: #3b82f6;
--link-hover: #2563eb;
--heading-color: #0f172a;
--copy-btn-bg: #ffffff;
--copy-btn-text: #475569;
--copy-btn-hover: #f1f5f9;
--success-color: #10b981;
--nav-bg: rgba(255, 255, 255, 0.8);
--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
--shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
--gradient-start: #3b82f6;
--gradient-end: #8b5cf6;
}
[data-theme="dark"] {
--bg-primary: #0f1419;
--bg-secondary: #1a1f2e;
--bg-tertiary: #252d3f;
--text-primary: #e2e8f0;
--text-secondary: #cbd5e1;
--text-tertiary: #94a3b8;
--border-color: #2d3748;
--border-hover: #4a5568;
--code-bg: #1a1f2e;
--code-border: #2d3748;
--link-color: #60a5fa;
--link-hover: #93c5fd;
--heading-color: #f1f5f9;
--copy-btn-bg: #252d3f;
--copy-btn-text: #e2e8f0;
--copy-btn-hover: #2d3748;
--nav-bg: rgba(15, 20, 25, 0.85);
--gradient-start: #60a5fa;
--gradient-end: #a78bfa;
}
body {
font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont,
"Segoe UI", Roboto, Arial, sans-serif;
color: var(--text-primary);
background: var(--bg-primary);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
min-height: 100vh;
position: relative;
}
body::before {
content: "";
position: fixed;
top: 0;
left: 0;
right: 0;
height: 400px;
background: linear-gradient(135deg, var(--gradient-start) 0%, var(--gradient-end) 100%);
opacity: 0.05;
z-index: -1;
pointer-events: none;
}
.container {
max-width: 960px;
margin: 0 auto;
padding: 2rem;
animation: fadeInUp 0.6s ease-out;
}
.header {
position: sticky;
top: 0;
background: var(--nav-bg);
backdrop-filter: blur(10px);
border-bottom: 1px solid var(--border-color);
padding: 1rem 2rem;
margin: -2rem -2rem 3rem -2rem;
z-index: 100;
transition: all 0.3s ease;
}
.header-content {
display: flex;
justify-content: space-between;
align-items: center;
max-width: 960px;
margin: 0 auto;
}
.header h1 {
font-size: 1.5rem;
font-weight: 700;
background: linear-gradient(135deg, var(--gradient-start), var(--gradient-end));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
margin: 0;
padding: 0;
border: none;
}
.theme-toggle {
background: var(--bg-secondary);
border: 2px solid var(--border-color);
border-radius: 50%;
width: 48px;
height: 48px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
font-size: 20px;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: var(--shadow-sm);
}
.theme-toggle:hover {
transform: scale(1.1) rotate(20deg);
box-shadow: var(--shadow-md);
border-color: var(--border-hover);
}
.content {
padding: 0 1rem;
animation: fadeIn 0.8s ease-out 0.2s both;
}
h1, h2, h3, h4, h5, h6 {
color: var(--heading-color);
font-weight: 700;
margin-top: 2.5rem;
margin-bottom: 1.2rem;
position: relative;
transition: color 0.3s ease;
}
h1 {
font-size: 2.5rem;
line-height: 1.2;
letter-spacing: -0.02em;
padding-bottom: 1rem;
border-bottom: 2px solid var(--border-color);
}
h2 {
font-size: 2rem;
line-height: 1.3;
letter-spacing: -0.01em;
padding-bottom: 0.75rem;
border-bottom: 1px solid var(--border-color);
}
h3 {
font-size: 1.5rem;
line-height: 1.4;
}
h1:hover::before,
h2:hover::before,
h3:hover::before {
content: "#";
position: absolute;
left: -1.5rem;
color: var(--text-tertiary);
font-weight: 400;
opacity: 0;
animation: slideIn 0.2s ease-out forwards;
}
p {
margin: 1.2rem 0;
line-height: 1.8;
color: var(--text-secondary);
font-size: 1.05rem;
}
a {
color: var(--link-color);
text-decoration: none;
font-weight: 500;
position: relative;
transition: color 0.2s ease;
}
a::after {
content: "";
position: absolute;
bottom: -2px;
left: 0;
width: 0;
height: 2px;
background: var(--link-hover);
transition: width 0.3s ease;
}
a:hover {
color: var(--link-hover);
}
a:hover::after {
width: 100%;
}
pre {
position: relative;
margin: 2rem 0;
border-radius: 12px;
border: 1px solid var(--code-border);
background: var(--code-bg);
overflow: hidden;
box-shadow: var(--shadow-md);
transition: all 0.3s ease;
}
pre:hover {
box-shadow: var(--shadow-lg);
transform: translateY(-2px);
}
pre code {
font-family: "JetBrains Mono", "Fira Code", monospace;
font-size: 0.9rem;
line-height: 1.6;
display: block;
padding: 1.5rem;
overflow-x: auto;
scrollbar-width: thin;
scrollbar-color: var(--border-color) transparent;
}
pre code::-webkit-scrollbar {
height: 8px;
}
pre code::-webkit-scrollbar-track {
background: transparent;
}
pre code::-webkit-scrollbar-thumb {
background: var(--border-color);
border-radius: 4px;
}
pre code::-webkit-scrollbar-thumb:hover {
background: var(--border-hover);
}
.code-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.75rem 1.5rem;
background: var(--bg-tertiary);
border-bottom: 1px solid var(--code-border);
font-family: "JetBrains Mono", monospace;
font-size: 0.85rem;
color: var(--text-tertiary);
}
.copy-btn {
position: absolute;
top: 12px;
right: 12px;
background: var(--copy-btn-bg);
color: var(--copy-btn-text);
border: 1px solid var(--border-color);
border-radius: 8px;
padding: 6px 12px;
font-size: 13px;
font-weight: 500;
cursor: pointer;
transition: all 0.2s ease;
box-shadow: var(--shadow-sm);
display: flex;
align-items: center;
gap: 6px;
z-index: 10;
}
.copy-btn:hover {
background: var(--copy-btn-hover);
transform: translateY(-1px);
box-shadow: var(--shadow-md);
}
.copy-btn.copied {
background: var(--success-color);
color: white;
border-color: var(--success-color);
}
.copy-btn svg {
width: 14px;
height: 14px;
}
code:not(pre code) {
background: var(--code-bg);
padding: 3px 8px;
border-radius: 6px;
font-family: "JetBrains Mono", monospace;
font-size: 0.88rem;
font-weight: 500;
border: 1px solid var(--code-border);
color: var(--link-color);
}
table {
border-collapse: separate;
border-spacing: 0;
width: 100%;
margin: 2rem 0;
font-size: 0.95rem;
border-radius: 12px;
overflow: hidden;
box-shadow: var(--shadow-md);
border: 1px solid var(--border-color);
}
th, td {
padding: 12px 16px;
text-align: left;
}
th {
background: var(--bg-tertiary);
font-weight: 600;
color: var(--heading-color);
border-bottom: 2px solid var(--border-color);
}
td {
border-bottom: 1px solid var(--border-color);
}
tr:last-child td {
border-bottom: none;
}
tr:hover td {
background: var(--bg-secondary);
transition: background 0.2s ease;
}
img {
max-width: 100%;
height: auto;
border-radius: 12px;
margin: 2rem 0;
box-shadow: var(--shadow-lg);
transition: transform 0.3s ease;
}
img:hover {
transform: scale(1.02);
}
blockquote {
border-left: 4px solid var(--gradient-start);
margin: 2rem 0;
padding: 1rem 1.5rem;
background: var(--bg-secondary);
border-radius: 8px;
font-style: italic;
color: var(--text-secondary);
position: relative;
box-shadow: var(--shadow-sm);
}
blockquote::before {
content: """;
position: absolute;
top: -10px;
left: 20px;
font-size: 60px;
color: var(--gradient-start);
opacity: 0.2;
font-style: normal;
}
ul, ol {
margin: 1.2rem 0;
padding-left: 2rem;
line-height: 1.8;
}
li {
margin: 0.5rem 0;
color: var(--text-secondary);
}
li::marker {
color: var(--link-color);
}
hr {
border: none;
height: 1px;
background: linear-gradient(90deg, transparent, var(--border-color), transparent);
margin: 3rem 0;
}
.scroll-top {
position: fixed;
bottom: 2rem;
right: 2rem;
width: 48px;
height: 48px;
background: var(--link-color);
color: white;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
opacity: 0;
visibility: hidden;
transition: all 0.3s ease;
box-shadow: var(--shadow-lg);
z-index: 1000;
}
.scroll-top.visible {
opacity: 1;
visibility: visible;
}
.scroll-top:hover {
transform: translateY(-4px);
background: var(--link-hover);
box-shadow: var(--shadow-xl);
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes slideIn {
to {
opacity: 1;
transform: translateX(0);
}
}
@media (max-width: 768px) {
.container {
padding: 1rem;
}
.header {
padding: 1rem;
margin: -1rem -1rem 2rem -1rem;
}
h1 {
font-size: 2rem;
}
h2 {
font-size: 1.5rem;
}
h3 {
font-size: 1.25rem;
}
.theme-toggle {
width: 40px;
height: 40px;
font-size: 18px;
}
h1:hover::before,
h2:hover::before,
h3:hover::before {
display: none;
}
}
@media (prefers-reduced-motion: reduce) {
* {
animation: none !important;
transition: none !important;
}
}
</style>
</head>
<body>
<div class="container">
<div class="header">
<div class="header-content">
<h1>Documentation</h1>
<button class="theme-toggle" onclick="toggleTheme()" id="themeToggle" aria-label="Toggle theme">
🌙
</button>
</div>
</div>
<div class="content">${htmlContent}</div>
</div>
<button class="scroll-top" onclick="scrollToTop()" id="scrollTop" aria-label="Scroll to top">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<polyline points="18 15 12 9 6 15"></polyline>
</svg>
</button>
<script>
// Theme handling
function applyTheme(theme) {
const body = document.body;
const themeToggle = document.getElementById("themeToggle");
const lightTheme = document.getElementById("hljs-theme-light");
const darkTheme = document.getElementById("hljs-theme-dark");
if (theme === "dark") {
body.setAttribute("data-theme", "dark");
themeToggle.innerHTML = "☀️";
darkTheme.disabled = false;
lightTheme.disabled = true;
} else {
body.removeAttribute("data-theme");
themeToggle.innerHTML = "🌙";
darkTheme.disabled = true;
lightTheme.disabled = false;
}
localStorage.setItem("theme", theme);
}
function toggleTheme() {
const currentTheme = document.body.getAttribute("data-theme");
const newTheme = currentTheme === "dark" ? "light" : "dark";
applyTheme(newTheme);
}
function detectSystemTheme() {
if (
window.matchMedia &&
window.matchMedia("(prefers-color-scheme: dark)").matches
) {
return "dark";
}
return "light";
}
function initializeTheme() {
const savedTheme = localStorage.getItem("theme");
const systemTheme = detectSystemTheme();
const themeToApply = savedTheme || systemTheme;
applyTheme(themeToApply);
}
function scrollToTop() {
window.scrollTo({
top: 0,
behavior: 'smooth'
});
}
document.addEventListener("DOMContentLoaded", () => {
initializeTheme();
hljs.highlightAll();
// Add language labels and copy buttons to code blocks
document.querySelectorAll("pre code").forEach((block) => {
const pre = block.parentNode;
const language = block.className.match(/language-(\w+)/)?.[1] || 'code';
// Add language header
const header = document.createElement("div");
header.className = "code-header";
header.innerHTML = `<span>${language}</span>`;
pre.insertBefore(header, block);
// Add copy button
const button = document.createElement("button");
button.className = "copy-btn";
button.innerHTML = `
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>
<path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path>
</svg>
<span>Copy</span>
`;
pre.appendChild(button);
button.addEventListener("click", () => {
navigator.clipboard.writeText(block.innerText).then(() => {
button.classList.add("copied");
button.innerHTML = `
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<polyline points="20 6 9 17 4 12"></polyline>
</svg>
<span>Copied!</span>
`;
setTimeout(() => {
button.classList.remove("copied");
button.innerHTML = `
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>
<path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path>
</svg>
<span>Copy</span>
`;
}, 2000);
});
});
});
// Scroll to top button
const scrollTop = document.getElementById('scrollTop');
window.addEventListener('scroll', () => {
if (window.pageYOffset > 300) {
scrollTop.classList.add('visible');
} else {
scrollTop.classList.remove('visible');
}
});
// Smooth scroll for anchor links
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
const target = document.querySelector(this.getAttribute('href'));
if (target) {
target.scrollIntoView({
behavior: 'smooth',
block: 'start'
});
}
});
});
});
// Listen for system theme changes
if (window.matchMedia) {
window
.matchMedia("(prefers-color-scheme: dark)")
.addEventListener("change", function (e) {
if (!localStorage.getItem("theme")) {
applyTheme(e.matches ? "dark" : "light");
}
});
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment