-
Notifications
You must be signed in to change notification settings - Fork 0
/
frame-component.html
28 lines (28 loc) · 1.91 KB
/
frame-component.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<div class="component-container">
<div class="header-content">
<h3 class="header-title">
<a target="_blank" rel="noopener noreferrer" href="https://github.com/Heerschop/pen/tree/master/{{name}}">
<svg class="github-logo" height="32" viewBox="0 0 16 16" version="1.1" width="32" aria-hidden="true">
<path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path>
</svg>{{name}}
</a>
</h3>
<label class="toggle-button">
<input id="checkbox-doc-{{name}}" type="checkbox" onclick="onCheckboxDocClick(event.srcElement.checked,'{{name}}')">
<span>doc</span>
</label>
<label class="toggle-button">
<input id="checkbox-html-{{name}}" type="checkbox" onclick="onCheckboxHtmlClick(event.srcElement.checked,'{{name}}')">
<span>html</span>
</label>
<label class="toggle-button">
<input id="checkbox-css-{{name}}" type="checkbox" onclick="onCheckboxCssClick(event.srcElement.checked,'{{name}}')">
<span>css</span>
</label>
<button class="header-button" onclick="onPenClick('{{pen-name}}')">pen</button>
</div>
<div class="frame-container">
<iframe scrolling="no" frameborder="0" src="{{name}}/index.html"></iframe>
<div oncut="return false" onpaste="return false" onkeydown="return onKeydown()" id="frame-overlay-{{name}}" class="frame-overlay" onclick="onOverlayClick('{{name}}')"></div>
</div>
</div>