|
<!DOCTYPE html> |
|
<html> |
|
<head> |
|
{%if is_space %} |
|
<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests"> |
|
{% endif %} |
|
<style> |
|
|
|
body, h1, h2, h3, p, ul { |
|
margin: 0; |
|
padding: 0; |
|
} |
|
|
|
body { |
|
font-family: 'Arial', sans-serif; |
|
overflow-y: hidden; |
|
} |
|
|
|
|
|
.sidebar { |
|
position: fixed; |
|
top: 0; |
|
left: 0; |
|
width: 300px; |
|
height: 100vh; |
|
max-height: calc(100vh - 50px); |
|
overflow-y: scroll; |
|
overflow-x: hidden; |
|
font-size: 0.875rem; |
|
line-height: 1.25rem; |
|
transition: all 0.3s ease; |
|
background: #f8f9fa; |
|
box-shadow: 2px 0 8px rgba(0, 0, 0, 0.1); |
|
padding-top: 50px; |
|
} |
|
|
|
|
|
.sidebar::-webkit-scrollbar { |
|
width: 6px; |
|
} |
|
|
|
.sidebar::-webkit-scrollbar-track { |
|
background: #f1f1f1; |
|
} |
|
|
|
.sidebar::-webkit-scrollbar-thumb { |
|
background: #888; |
|
border-radius: 3px; |
|
} |
|
|
|
.sidebar.collapsed { |
|
width: 0; |
|
box-shadow: none; |
|
} |
|
|
|
.sidebar a { |
|
display: block; |
|
margin: 8px 12px; |
|
padding: 12px 16px; |
|
text-decoration: none; |
|
color: #424242; |
|
background: white; |
|
border-radius: 8px; |
|
transition: all 0.2s ease; |
|
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05); |
|
} |
|
|
|
.sidebar a:hover { |
|
color: #1a73e8; |
|
transform: translateY(-1px); |
|
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); |
|
} |
|
|
|
.sidebar a.active { |
|
background: #1a73e8; |
|
color: white; |
|
font-weight: 500; |
|
box-shadow: 0 4px 8px rgba(26, 115, 232, 0.2); |
|
} |
|
|
|
|
|
.sidebar a:has(span) { |
|
border-left: 3px solid #dc3545; |
|
} |
|
|
|
|
|
.content { |
|
margin-left: 300px; |
|
padding: 20px; |
|
height: 100vh; |
|
transition: margin-left 0.3s ease; |
|
overflow-y: auto; |
|
} |
|
|
|
.content.collapsed { |
|
margin-left: 0; |
|
} |
|
|
|
.content iframe { |
|
width: 100%; |
|
height: 80%; |
|
border: 0; |
|
} |
|
|
|
|
|
.close-btn { |
|
position: fixed; |
|
top: 0; |
|
left: 0; |
|
z-index: 101; |
|
cursor: pointer; |
|
border: none; |
|
background: #f8f9fa; |
|
width: 300px; |
|
height: 50px; |
|
border-radius: 0; |
|
display: flex; |
|
align-items: center; |
|
padding: 0 20px; |
|
justify-content: flex-end; |
|
transition: all 0.3s ease; |
|
} |
|
|
|
.close-btn.collapsed { |
|
width: 50px; |
|
justify-content: center; |
|
} |
|
|
|
@media only screen and (max-width: 600px) { |
|
.close-btn { |
|
top: 20px; |
|
left: 20px; |
|
background: white; |
|
z-index: 102; |
|
} |
|
|
|
.sidebar { |
|
width: 100%; |
|
z-index: 100; |
|
} |
|
|
|
.content { |
|
margin-left: 0; |
|
padding: 10px; |
|
height: calc(100vh - 70px); |
|
margin-top: 70px; |
|
} |
|
|
|
.sidebar.collapsed { |
|
transform: translateX(-100%); |
|
} |
|
|
|
.content.collapsed { |
|
margin-top: 70px; |
|
} |
|
} |
|
</style> |
|
<script src="//unpkg.com/alpinejs" defer></script> |
|
</head> |
|
<body x-data="{ current_demo: '{{ initial_demo }}', is_collapsed: false }"> |
|
<div style="display: flex; flex-direction: column;"> |
|
<button @click="is_collapsed = !is_collapsed" |
|
class="close-btn" |
|
:class="{ 'collapsed': is_collapsed }"> |
|
<span x-text="is_collapsed ? '➡️' : '⬅️'"></span> |
|
</button> |
|
<div :class="{ 'sidebar': true, 'collapsed': is_collapsed }"> |
|
{% for name in names %} |
|
<a @click="current_demo = '{{ name[0] }}'" :class="current_demo == '{{ name[0] }}' ? 'active' : ''">{{ name[0] }} {% if name[1] %}❌{% endif %}</a> |
|
{% endfor %} |
|
</div> |
|
</div> |
|
<div :class="{ 'content': true, 'collapsed': is_collapsed }"> |
|
<iframe :src="`/demo/${current_demo}${document.location.search}`"></iframe> |
|
</div> |
|
</body> |
|
</html> |
