2022-02-15 15:06:41 +01:00
|
|
|
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="terminal" baseProfile="full" viewBox="0 0 552 274" width="100%" version="1.1" style="border-radius:6px">
|
|
|
|
|
<defs>
|
|
|
|
|
<termtosvg:template_settings xmlns:termtosvg="https://github.com/nbedos/termtosvg">
|
|
|
|
|
<termtosvg:screen_geometry columns="69" rows="11"/>
|
|
|
|
|
<termtosvg:animation type="css"/>
|
|
|
|
|
</termtosvg:template_settings>
|
|
|
|
|
<style type="text/css" id="generated-style"><![CDATA[#screen {
|
|
|
|
|
font-family: 'DejaVu Sans Mono', monospace;
|
|
|
|
|
font-style: normal;
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
text {
|
|
|
|
|
dominant-baseline: text-before-edge;
|
|
|
|
|
white-space: pre;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
:root {
|
2022-02-15 15:11:37 +01:00
|
|
|
--animation-duration: 47569ms;
|
2022-02-15 15:06:41 +01:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
@keyframes roll {
|
|
|
|
|
0.000%{transform:translateY(0px)}
|
2022-02-15 15:11:37 +01:00
|
|
|
3.153%{transform:translateY(-204px)}
|
|
|
|
|
3.576%{transform:translateY(-408px)}
|
|
|
|
|
3.998%{transform:translateY(-612px)}
|
|
|
|
|
4.421%{transform:translateY(-816px)}
|
|
|
|
|
4.843%{transform:translateY(-1020px)}
|
|
|
|
|
5.266%{transform:translateY(-1224px)}
|
|
|
|
|
5.689%{transform:translateY(-1428px)}
|
|
|
|
|
6.111%{transform:translateY(-1632px)}
|
|
|
|
|
6.534%{transform:translateY(-1836px)}
|
|
|
|
|
6.956%{transform:translateY(-2040px)}
|
|
|
|
|
7.377%{transform:translateY(-2244px)}
|
|
|
|
|
7.801%{transform:translateY(-2448px)}
|
|
|
|
|
8.222%{transform:translateY(-2652px)}
|
|
|
|
|
9.067%{transform:translateY(-2856px)}
|
|
|
|
|
9.071%{transform:translateY(-3060px)}
|
|
|
|
|
12.224%{transform:translateY(-3264px)}
|
|
|
|
|
12.647%{transform:translateY(-3468px)}
|
|
|
|
|
13.492%{transform:translateY(-3672px)}
|
|
|
|
|
13.494%{transform:translateY(-3876px)}
|
|
|
|
|
13.498%{transform:translateY(-4080px)}
|
|
|
|
|
16.654%{transform:translateY(-4284px)}
|
|
|
|
|
17.074%{transform:translateY(-4488px)}
|
|
|
|
|
17.497%{transform:translateY(-4692px)}
|
|
|
|
|
17.919%{transform:translateY(-4896px)}
|
|
|
|
|
18.342%{transform:translateY(-5100px)}
|
|
|
|
|
18.764%{transform:translateY(-5304px)}
|
|
|
|
|
19.187%{transform:translateY(-5508px)}
|
|
|
|
|
19.609%{transform:translateY(-5712px)}
|
|
|
|
|
20.032%{transform:translateY(-5916px)}
|
|
|
|
|
20.454%{transform:translateY(-6120px)}
|
|
|
|
|
20.877%{transform:translateY(-6324px)}
|
|
|
|
|
21.300%{transform:translateY(-6528px)}
|
|
|
|
|
21.720%{transform:translateY(-6732px)}
|
|
|
|
|
22.143%{transform:translateY(-6936px)}
|
|
|
|
|
22.565%{transform:translateY(-7140px)}
|
|
|
|
|
22.988%{transform:translateY(-7344px)}
|
|
|
|
|
23.410%{transform:translateY(-7548px)}
|
|
|
|
|
23.831%{transform:translateY(-7752px)}
|
|
|
|
|
24.253%{transform:translateY(-7956px)}
|
|
|
|
|
24.676%{transform:translateY(-8160px)}
|
|
|
|
|
25.098%{transform:translateY(-8364px)}
|
|
|
|
|
25.521%{transform:translateY(-8568px)}
|
|
|
|
|
25.943%{transform:translateY(-8772px)}
|
|
|
|
|
26.364%{transform:translateY(-8976px)}
|
|
|
|
|
26.786%{transform:translateY(-9180px)}
|
|
|
|
|
27.209%{transform:translateY(-9384px)}
|
|
|
|
|
27.631%{transform:translateY(-9588px)}
|
|
|
|
|
28.054%{transform:translateY(-9792px)}
|
|
|
|
|
28.477%{transform:translateY(-9996px)}
|
|
|
|
|
28.897%{transform:translateY(-10200px)}
|
|
|
|
|
29.320%{transform:translateY(-10404px)}
|
|
|
|
|
29.742%{transform:translateY(-10608px)}
|
|
|
|
|
30.165%{transform:translateY(-10812px)}
|
|
|
|
|
30.587%{transform:translateY(-11016px)}
|
|
|
|
|
31.010%{transform:translateY(-11220px)}
|
|
|
|
|
31.430%{transform:translateY(-11424px)}
|
|
|
|
|
31.853%{transform:translateY(-11628px)}
|
|
|
|
|
32.275%{transform:translateY(-11832px)}
|
|
|
|
|
32.698%{transform:translateY(-12036px)}
|
|
|
|
|
33.120%{transform:translateY(-12240px)}
|
|
|
|
|
33.543%{transform:translateY(-12444px)}
|
|
|
|
|
33.965%{transform:translateY(-12648px)}
|
|
|
|
|
34.388%{transform:translateY(-12852px)}
|
|
|
|
|
34.810%{transform:translateY(-13056px)}
|
|
|
|
|
35.231%{transform:translateY(-13260px)}
|
|
|
|
|
35.653%{transform:translateY(-13464px)}
|
|
|
|
|
36.076%{transform:translateY(-13668px)}
|
|
|
|
|
36.499%{transform:translateY(-13872px)}
|
|
|
|
|
36.921%{transform:translateY(-14076px)}
|
|
|
|
|
37.344%{transform:translateY(-14280px)}
|
|
|
|
|
37.766%{transform:translateY(-14484px)}
|
|
|
|
|
38.189%{transform:translateY(-14688px)}
|
|
|
|
|
39.032%{transform:translateY(-14892px)}
|
|
|
|
|
39.042%{transform:translateY(-15096px)}
|
|
|
|
|
39.051%{transform:translateY(-15300px)}
|
|
|
|
|
39.147%{transform:translateY(-15504px)}
|
|
|
|
|
39.168%{transform:translateY(-15708px)}
|
|
|
|
|
39.210%{transform:translateY(-15912px)}
|
|
|
|
|
39.217%{transform:translateY(-16116px)}
|
|
|
|
|
42.370%{transform:translateY(-16320px)}
|
|
|
|
|
42.793%{transform:translateY(-16524px)}
|
|
|
|
|
43.215%{transform:translateY(-16728px)}
|
|
|
|
|
43.638%{transform:translateY(-16932px)}
|
|
|
|
|
44.058%{transform:translateY(-17136px)}
|
|
|
|
|
44.481%{transform:translateY(-17340px)}
|
|
|
|
|
44.903%{transform:translateY(-17544px)}
|
|
|
|
|
45.326%{transform:translateY(-17748px)}
|
|
|
|
|
45.748%{transform:translateY(-17952px)}
|
|
|
|
|
46.171%{transform:translateY(-18156px)}
|
|
|
|
|
47.014%{transform:translateY(-18360px)}
|
|
|
|
|
47.024%{transform:translateY(-18564px)}
|
|
|
|
|
50.176%{transform:translateY(-18768px)}
|
|
|
|
|
50.598%{transform:translateY(-18972px)}
|
|
|
|
|
51.441%{transform:translateY(-19176px)}
|
|
|
|
|
51.447%{transform:translateY(-19380px)}
|
|
|
|
|
51.452%{transform:translateY(-19584px)}
|
|
|
|
|
54.605%{transform:translateY(-19788px)}
|
|
|
|
|
55.027%{transform:translateY(-19992px)}
|
|
|
|
|
55.448%{transform:translateY(-20196px)}
|
|
|
|
|
55.870%{transform:translateY(-20400px)}
|
|
|
|
|
56.293%{transform:translateY(-20604px)}
|
|
|
|
|
56.716%{transform:translateY(-20808px)}
|
|
|
|
|
57.138%{transform:translateY(-21012px)}
|
|
|
|
|
57.561%{transform:translateY(-21216px)}
|
|
|
|
|
57.983%{transform:translateY(-21420px)}
|
|
|
|
|
58.404%{transform:translateY(-21624px)}
|
|
|
|
|
58.826%{transform:translateY(-21828px)}
|
|
|
|
|
59.249%{transform:translateY(-22032px)}
|
|
|
|
|
59.671%{transform:translateY(-22236px)}
|
|
|
|
|
60.094%{transform:translateY(-22440px)}
|
|
|
|
|
60.516%{transform:translateY(-22644px)}
|
|
|
|
|
60.937%{transform:translateY(-22848px)}
|
|
|
|
|
61.359%{transform:translateY(-23052px)}
|
|
|
|
|
62.204%{transform:translateY(-23256px)}
|
|
|
|
|
62.211%{transform:translateY(-23460px)}
|
|
|
|
|
65.366%{transform:translateY(-23664px)}
|
|
|
|
|
65.789%{transform:translateY(-23868px)}
|
|
|
|
|
66.211%{transform:translateY(-24072px)}
|
|
|
|
|
66.634%{transform:translateY(-24276px)}
|
|
|
|
|
67.056%{transform:translateY(-24480px)}
|
|
|
|
|
67.477%{transform:translateY(-24684px)}
|
|
|
|
|
67.899%{transform:translateY(-24888px)}
|
|
|
|
|
68.322%{transform:translateY(-25092px)}
|
|
|
|
|
68.744%{transform:translateY(-25296px)}
|
|
|
|
|
69.165%{transform:translateY(-25500px)}
|
|
|
|
|
69.587%{transform:translateY(-25704px)}
|
|
|
|
|
70.010%{transform:translateY(-25908px)}
|
|
|
|
|
70.432%{transform:translateY(-26112px)}
|
|
|
|
|
70.855%{transform:translateY(-26316px)}
|
|
|
|
|
71.275%{transform:translateY(-26520px)}
|
|
|
|
|
71.698%{transform:translateY(-26724px)}
|
|
|
|
|
72.120%{transform:translateY(-26928px)}
|
|
|
|
|
72.543%{transform:translateY(-27132px)}
|
|
|
|
|
73.388%{transform:translateY(-27336px)}
|
|
|
|
|
73.394%{transform:translateY(-27540px)}
|
|
|
|
|
73.399%{transform:translateY(-27744px)}
|
|
|
|
|
73.403%{transform:translateY(-27948px)}
|
|
|
|
|
76.554%{transform:translateY(-28152px)}
|
|
|
|
|
76.977%{transform:translateY(-28356px)}
|
|
|
|
|
77.397%{transform:translateY(-28560px)}
|
|
|
|
|
77.820%{transform:translateY(-28764px)}
|
|
|
|
|
78.242%{transform:translateY(-28968px)}
|
|
|
|
|
78.665%{transform:translateY(-29172px)}
|
|
|
|
|
79.087%{transform:translateY(-29376px)}
|
|
|
|
|
79.508%{transform:translateY(-29580px)}
|
|
|
|
|
79.930%{transform:translateY(-29784px)}
|
|
|
|
|
80.353%{transform:translateY(-29988px)}
|
|
|
|
|
80.775%{transform:translateY(-30192px)}
|
|
|
|
|
81.198%{transform:translateY(-30396px)}
|
|
|
|
|
81.620%{transform:translateY(-30600px)}
|
|
|
|
|
82.041%{transform:translateY(-30804px)}
|
|
|
|
|
82.463%{transform:translateY(-31008px)}
|
|
|
|
|
82.886%{transform:translateY(-31212px)}
|
|
|
|
|
83.308%{transform:translateY(-31416px)}
|
|
|
|
|
83.731%{transform:translateY(-31620px)}
|
|
|
|
|
84.154%{transform:translateY(-31824px)}
|
|
|
|
|
84.574%{transform:translateY(-32028px)}
|
|
|
|
|
84.997%{transform:translateY(-32232px)}
|
|
|
|
|
85.842%{transform:translateY(-32436px)}
|
|
|
|
|
85.858%{transform:translateY(-32640px)}
|
|
|
|
|
85.861%{transform:translateY(-32844px)}
|
|
|
|
|
85.884%{transform:translateY(-33048px)}
|
|
|
|
|
85.905%{transform:translateY(-33252px)}
|
|
|
|
|
85.915%{transform:translateY(-33456px)}
|
|
|
|
|
97.898%{transform:translateY(-33660px)}
|
|
|
|
|
100.000%{transform:translateY(-33660px)}
|
2022-02-15 15:06:41 +01:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
#screen_view {
|
2022-02-15 15:11:37 +01:00
|
|
|
animation-duration: 47569ms;
|
2022-02-15 15:06:41 +01:00
|
|
|
animation-iteration-count:infinite;
|
|
|
|
|
animation-name:roll;
|
|
|
|
|
animation-timing-function: steps(1,end);
|
|
|
|
|
animation-fill-mode: forwards;
|
|
|
|
|
}
|
|
|
|
|
]]></style>
|
|
|
|
|
<style type="text/css" id="user-style">
|
|
|
|
|
/* The colors defined below are the default 16 colors used for rendering text of the terminal. Adjust
|
|
|
|
|
them as needed.
|
|
|
|
|
ubuntu colors based on https://en.wikipedia.org/wiki/ANSI_escape_code#Colors */
|
|
|
|
|
.foreground {fill: #aaaaaa;}
|
|
|
|
|
.background {fill: #111122;}
|
|
|
|
|
.color0 {fill: #333344;}
|
|
|
|
|
.color1 {fill: #7700FF;}
|
|
|
|
|
.color2 {fill: #3333FF;}
|
|
|
|
|
.color3 {fill: #335577;}
|
|
|
|
|
.color4 {fill: #006fb8;}
|
|
|
|
|
.color5 {fill: #762671;}
|
|
|
|
|
.color6 {fill: #2cb5e9;}
|
|
|
|
|
.color7 {fill: #cccccc;}
|
|
|
|
|
.color8 {fill: #808080;}
|
|
|
|
|
.color9 {fill: #ff0000;}
|
|
|
|
|
.color10 {fill: #00ff00;}
|
|
|
|
|
.color11 {fill: #ffff00;}
|
|
|
|
|
.color12 {fill: #0000ff;}
|
|
|
|
|
.color13 {fill: #ff00ff;}
|
|
|
|
|
.color14 {fill: #00ffff;}
|
|
|
|
|
.color15 {fill: #ffffff;}
|
|
|
|
|
|
|
|
|
|
@keyframes progress-bar-animation {
|
|
|
|
|
from {
|
|
|
|
|
transform: translate(0px, calc(100% - 5px)) scale(0, 1);
|
|
|
|
|
}
|
|
|
|
|
to {
|
|
|
|
|
transform: translate(0px, calc(100% - 5px)) scale(1, 1);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
#progress-bar {
|
|
|
|
|
animation-duration: var(--animation-duration);
|
|
|
|
|
animation-iteration-count: infinite;
|
|
|
|
|
animation-name: progress-bar-animation;
|
|
|
|
|
animation-timing-function: linear;
|
|
|
|
|
transform-origin: left;
|
|
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|
</defs>
|
|
|
|
|
<rect id="terminalui" width="100%" height="100%" class="background" ry="4.582691"/>
|
|
|
|
|
<circle cx="24" cy="23" r="7" class="color1"/>
|
|
|
|
|
<circle cx="44" cy="23" r="7" class="color3"/>
|
|
|
|
|
<circle cx="64" cy="23" r="7" class="color2"/>
|
2022-02-15 15:11:37 +01:00
|
|
|
<svg id="screen" width="552" height="187" viewBox="0 0 552 187" x="23" y="50" preserveAspectRatio="xMidYMin slice"><rect class="background" height="100%" width="100%" x="0" y="0"/><defs><g id="g1"><text x="0" textLength="72" font-weight="bold" class="color14">podidemo </text><text x="72" textLength="16" font-weight="bold" class="color12">$ </text><text x="88" textLength="8" class="background"> </text></g><g id="g2"><text x="0" textLength="72" font-weight="bold" class="color14">podidemo </text><text x="72" textLength="16" font-weight="bold" class="color12">$ </text><text x="88" textLength="8" class="foreground">c</text><text x="96" textLength="8" class="background"> </text></g><g id="g3"><text x="0" textLength="72" font-weight="bold" class="color14">podidemo </text><text x="72" textLength="16" font-weight="bold" class="color12">$ </text><text x="88" textLength="16" class="foreground">cd</text><text x="104" textLength="8" class="background"> </text></g><g id="g4"><text x="0" textLength="72" font-weight="bold" class="color14">podidemo </text><text x="72" textLength="16" font-weight="bold" class="color12">$ </text><text x="88" textLength="24" class="foreground">cd </text><text x="112" textLength="8" class="background"> </text></g><g id="g5"><text x="0" textLength="72" font-weight="bold" class="color14">podidemo </text><text x="72" textLength="16" font-weight="bold" class="color12">$ </text><text x="88" textLength="32" class="foreground">cd /</text><text x="120" textLength="8" class="background"> </text></g><g id="g6"><text x="0" textLength="72" font-weight="bold" class="color14">podidemo </text><text x="72" textLength="16" font-weight="bold" class="color12">$ </text><text x="88" textLength="40" class="foreground">cd /t</text><text x="128" textLength="8" class="background"> </text></g><g id="g7"><text x="0" textLength="72" font-weight="bold" class="color14">podidemo </text><text x="72" textLength="16" font-weight="bold" class="color12">$ </text><text x="88" textLength="48" class="foreground">cd /tm</text><text x="136" textLength="8" class="background"> </text></g><g id="g8"><text x="0" textLength="72" font-weight="bold" class="color14">podidemo </text><text x="72" textLength="16" font-weight="bold" class="color12">$ </text><text x="88" textLength="56" class="foreground">cd /tmp</text><text x="144" textLength="8" class="background"> </text></g><g id="g9"><text x="0" textLength="72" font-weight="bold" class="color14">podidemo </text><text x="72" textLength="16" font-weight="bold" class="color12">$ </text><text x="88" textLength="64" class="foreground">cd /tmp/</text><text x="152" textLength="8" class="background"> </text></g><g id="g10"><text x="0" textLength="72" font-weight="bold" class="color14">podidemo </text><text x="72" textLength="16" font-weight="bold" class="color12">$ </text><text x="88" textLength="72" class="foreground">cd /tmp/m</text><text x="160" textLength="8" class="background"> </text></g><g id="g11"><text x="0" textLength="72" font-weight="bold" class="color14">podidemo </text><text x="72" textLength="16" font-weight="bold" class="color12">$ </text><text x="88" textLength="80" class="foreground">cd /tmp/my</text><text x="168" textLength="8" class="background"> </text></g><g id="g12"><text x="0" textLength="72" font-weight="bold" class="color14">podidemo </text><text x="72" textLength="16" font-weight="bold" class="color12">$ </text><text x="88" textLength="88" class="foreground">cd /tmp/mya</text><text x="176" textLength="8" class="background"> </text></g><g id="g13"><text x="0" textLength="72" font-weight="bold" class="color14">podidemo </text><text x="72" textLength="16" font-weight="bold" class="color12">$ </text><text x="88" textLength="96" class="foreground">cd /tmp/myap</text><text x="184" textLength="8" class="background"> </text></g><g id="g14"><text x="0" textLength="72" font-weight="bold" class="color14">podidemo </text><text x="72" textLength="16" font-weight="bold" class="color12">$ </text><text x="88" textLength="104" class="foreground">cd /tmp/myapp</text><text x="192" textLength="8" class
|
2022-02-15 15:06:41 +01:00
|
|
|
<rect id="progress-bar" width="100%" height="5" class="color2"/>
|
|
|
|
|
</svg>
|
