21 lines
12 KiB
XML
21 lines
12 KiB
XML
<svg xmlns="http://www.w3.org/2000/svg" width="740" height="524"><foreignObject x="0" y="0" width="100%" height="100%"><div class="content" id="content" xmlns="http://www.w3.org/1999/xhtml" style="align-items: center; background-image: linear-gradient(to right, rgb(226, 226, 226), rgb(201, 214, 255)); color: rgb(212, 212, 212); display: flex; font-family: "Segoe WPC", "Segoe UI", sans-serif; font-size: 13px; justify-content: center; padding-block: 30px; padding: 30px; padding-inline: 30px; -webkit-locale: "en";">
|
||
<div class="container bounce" id="container" style="animation-duration: 0.3s; animation-name: bounceF; animation-timing-function: cubic-bezier(0.28, 0.84, 0.42, 1); border-radius: 5px; border-end-end-radius: 5px; border-end-start-radius: 5px; border-start-end-radius: 5px; border-start-start-radius: 5px; box-shadow: rgba(0, 0, 0, 0.3) 0px 20px 60px 0px; display: flex; min-inline-size: 100px; min-width: 100px; overflow: hidden; transition-duration: 0.2s; transition-property: opacity;">
|
||
<div>
|
||
<div class="title" style="align-items: center; background-color: rgb(30, 30, 30); block-size: 35px; border-start-end-radius: 5px; border-start-start-radius: 5px; border-top-left-radius: 5px; border-top-right-radius: 5px; cursor: default; display: flex; height: 35px; padding-block: 3px; padding: 3px 18px; padding-inline: 18px;">
|
||
<div class="dot dotA" style="background-color: rgb(255, 95, 85); block-size: 10px; border-radius: 50%; border-end-end-radius: 50%; border-end-start-radius: 50%; border-start-end-radius: 50%; border-start-start-radius: 50%; height: 10px; inline-size: 10px; margin-inline-end: 5px; margin-right: 5px; width: 10px;"></div>
|
||
<div class="dot dotB" style="background-color: rgb(255, 189, 45); block-size: 10px; border-radius: 50%; border-end-end-radius: 50%; border-end-start-radius: 50%; border-start-end-radius: 50%; border-start-start-radius: 50%; height: 10px; inline-size: 10px; margin-inline-end: 5px; margin-right: 5px; width: 10px;"></div>
|
||
<div class="dot dotC" style="background-color: rgb(37, 201, 63); block-size: 10px; border-radius: 50%; border-end-end-radius: 50%; border-end-start-radius: 50%; border-start-end-radius: 50%; border-start-start-radius: 50%; height: 10px; inline-size: 10px; margin-inline-end: 5px; margin-right: 5px; width: 10px;"></div>
|
||
<div id="title" class="text" style="margin-inline-start: 10px; margin-left: 10px;">index.html</div>
|
||
</div>
|
||
<div class="wrapper" style="background-color: rgb(30, 30, 30); display: flex; min-block-size: 150px; min-height: 150px; min-inline-size: 250px; min-width: 250px; padding-block: 10px; padding: 10px 18px; padding-inline: 18px;">
|
||
<div id="lines" style="display: flex; flex-direction: column; margin-inline-end: 15px; margin-right: 15px; padding-block-end: 5px; padding-bottom: 5px; padding-inline-end: 5px; padding-right: 5px;"><span style="line-height: 19px; color: rgb(133, 133, 133); cursor: default; font-family: Consolas, "Courier New", monospace; font-size: 14px;">61</span><span style="line-height: 19px; color: rgb(133, 133, 133); cursor: default; font-family: Consolas, "Courier New", monospace; font-size: 14px;">62</span><span style="line-height: 19px; color: rgb(133, 133, 133); cursor: default; font-family: Consolas, "Courier New", monospace; font-size: 14px;">63</span><span style="line-height: 19px; color: rgb(133, 133, 133); cursor: default; font-family: Consolas, "Courier New", monospace; font-size: 14px;">64</span><span style="line-height: 19px; color: rgb(133, 133, 133); cursor: default; font-family: Consolas, "Courier New", monospace; font-size: 14px;">65</span><span style="line-height: 19px; color: rgb(133, 133, 133); cursor: default; font-family: Consolas, "Courier New", monospace; font-size: 14px;">66</span><span style="line-height: 19px; color: rgb(133, 133, 133); cursor: default; font-family: Consolas, "Courier New", monospace; font-size: 14px;">67</span><span style="line-height: 19px; color: rgb(133, 133, 133); cursor: default; font-family: Consolas, "Courier New", monospace; font-size: 14px;">68</span><span style="line-height: 19px; color: rgb(133, 133, 133); cursor: default; font-family: Consolas, "Courier New", monospace; font-size: 14px;">69</span><span style="line-height: 19px; color: rgb(133, 133, 133); cursor: default; font-family: Consolas, "Courier New", monospace; font-size: 14px;">70</span><span style="line-height: 19px; color: rgb(133, 133, 133); cursor: default; font-family: Consolas, "Courier New", monospace; font-size: 14px;">71</span><span style="line-height: 19px; color: rgb(133, 133, 133); cursor: default; font-family: Consolas, "Courier New", monospace; font-size: 14px;">72</span><span style="line-height: 19px; color: rgb(133, 133, 133); cursor: default; font-family: Consolas, "Courier New", monospace; font-size: 14px;">73</span><span style="line-height: 19px; color: rgb(133, 133, 133); cursor: default; font-family: Consolas, "Courier New", monospace; font-size: 14px;">74</span><span style="line-height: 19px; color: rgb(133, 133, 133); cursor: default; font-family: Consolas, "Courier New", monospace; font-size: 14px;">75</span><span style="line-height: 19px; color: rgb(133, 133, 133); cursor: default; font-family: Consolas, "Courier New", monospace; font-size: 14px;">76</span><span style="line-height: 19px; color: rgb(133, 133, 133); cursor: default; font-family: Consolas, "Courier New", monospace; font-size: 14px;">77</span><span style="line-height: 19px; color: rgb(133, 133, 133); cursor: default; font-family: Consolas, "Courier New", monospace; font-size: 14px;">78</span><span style="line-height: 19px; color: rgb(133, 133, 133); cursor: default; font-family: Consolas, "Courier New", monospace; font-size: 14px;">79</span></div>
|
||
<div id="output"><div id="code" style="display: block;">
|
||
|
||
<!--StartFragment--><div style="background-color: rgb(30, 30, 30); font-family: Consolas, "Courier New", monospace; font-size: 14px; line-height: 19px; white-space: pre; display: block;"><div style="display: block;"><span style="color: #808080;"><</span><span style="color: #569cd6;">script</span><span style="color: #808080;">></span></div><div style="display: block;"><span style=""> </span><span style="color: #569cd6;">function</span><span style=""> </span><span style="color: #dcdcaa;">playSound</span><span style="">(</span><span style="color: #9cdcfe;">e</span><span style="">){</span></div><div style="display: block;"><span style=""> </span><span style="color: #569cd6;">const</span><span style=""> </span><span style="color: #4fc1ff;">audio</span><span style=""> = </span><span style="color: #9cdcfe;">document</span><span style="">.</span><span style="color: #dcdcaa;">querySelector</span><span style="">(</span><span style="color: #ce9178;">`audio[data-key="${</span><span style="color: #9cdcfe;">e</span><span style="">.</span><span style="color: #9cdcfe;">keyCode</span><span style="color: #ce9178;">}"]`</span><span style="">);</span></div><div style="display: block;"><span style=""> </span><span style="color: #569cd6;">const</span><span style=""> </span><span style="color: #4fc1ff;">key</span><span style=""> = </span><span style="color: #9cdcfe;">document</span><span style="">.</span><span style="color: #dcdcaa;">querySelector</span><span style="">(</span><span style="color: #ce9178;">`.key[data-key="${</span><span style="color: #9cdcfe;">e</span><span style="">.</span><span style="color: #9cdcfe;">keyCode</span><span style="color: #ce9178;">}"]`</span><span style="">);</span></div><div style="display: block;"><span style=""> </span><span style="color: #c586c0;">if</span><span style="">(!</span><span style="color: #4fc1ff;">audio</span><span style="">) </span><span style="color: #c586c0;">return</span><span style="">;</span></div><div style="display: block;"><span style="color: #9cdcfe;"> </span><span style="color: #4fc1ff;">audio</span><span style="">.</span><span style="color: #9cdcfe;">currentTime</span><span style=""> = </span><span style="color: #b5cea8;">0</span><span style="">;</span></div><div style="display: block;"><span style="color: #9cdcfe;"> </span><span style="color: #4fc1ff;">audio</span><span style="">.</span><span style="color: #dcdcaa;">play</span><span style="">();</span></div><div style="display: block;"><span style="color: #9cdcfe;"> </span><span style="color: #4fc1ff;">key</span><span style="">.</span><span style="color: #9cdcfe;">classList</span><span style="">.</span><span style="color: #dcdcaa;">add</span><span style="">(</span><span style="color: #ce9178;">'playing'</span><span style="">);</span></div><div style="display: block;"><span style=""> }</span></div><br /><div style="display: block;"><span style=""> </span><span style="color: #569cd6;">function</span><span style=""> </span><span style="color: #dcdcaa;">removeTransition</span><span style="">(</span><span style="color: #9cdcfe;">e</span><span style="">){</span></div><div style="display: block;"><span style=""> </span><span style="color: #c586c0;">if</span><span style="">(</span><span style="color: #9cdcfe;">e</span><span style="">.</span><span style="color: #9cdcfe;">propertyName</span><span style=""> !== </span><span style="color: #ce9178;">'transform'</span><span style="">) </span><span style="color: #c586c0;">return</span><span style="">;</span></div><div style="display: block;"><span style=""> </span><span style="color: #569cd6;">this</span><span style="">.</span><span style="color: #9cdcfe;">classList</span><span style="">.</span><span style="color: #dcdcaa;">remove</span><span style="">(</span><span style="color: #ce9178;">'playing'</span><span style="">);</span></div><div style="display: block;"><span style=""> }</span></div><br /><div style="display: block;"><span style=""> </span><span style="color: #569cd6;">const</span><span style=""> </span><span style="color: #4fc1ff;">keys</span><span style=""> = </span><span style="color: #9cdcfe;">document</span><span style="">.</span><span style="color: #dcdcaa;">querySelectorAll</span><span style="">(</span><span style="color: #ce9178;">'.key'</span><span style="">);</span></div><div style="display: block;"><span style="color: #9cdcfe;"> </span><span style="color: #4fc1ff;">keys</span><span style="">.</span><span style="color: #dcdcaa;">forEach</span><span style="">(</span><span style="color: #9cdcfe;">key</span><span style=""> </span><span style="color: #569cd6;">=></span><span style="color: #9cdcfe;"> </span><span style="color: #9cdcfe;">key</span><span style="">.</span><span style="color: #dcdcaa;">addEventListener</span><span style="">(</span><span style="color: #ce9178;">'transitionend'</span><span style="">, </span><span style="color: #dcdcaa;">removeTransition</span><span style="">));</span></div><div style="display: block;"><span style=""> </span><span style="color: #9cdcfe;">window</span><span style="">.</span><span style="color: #dcdcaa;">addEventListener</span><span style="">(</span><span style="color: #ce9178;">'keydown'</span><span style="">, </span><span style="color: #dcdcaa;">playSound</span><span style="">);</span></div><div style="display: block;"><span style="color: #808080;"></</span><span style="color: #569cd6;">script</span><span style="color: #808080;">></span></div></div><!--EndFragment-->
|
||
|
||
</div></div>
|
||
</div>
|
||
<div class="footer" id="footer" style="display: flex; background-color: rgb(30, 30, 30); border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; border-end-end-radius: 5px; border-end-start-radius: 5px; justify-content: center; padding-block: 8px 12px; padding: 8px 8px 12px; padding-inline: 8px;">Snipped</div>
|
||
</div>
|
||
</div>
|
||
<style></style></div></foreignObject></svg> |