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:26:20 +01:00
|
|
|
--animation-duration: 41913ms;
|
2022-02-15 15:06:41 +01:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
@keyframes roll {
|
|
|
|
|
0.000%{transform:translateY(0px)}
|
2022-02-15 15:26:20 +01:00
|
|
|
3.581%{transform:translateY(-204px)}
|
|
|
|
|
4.058%{transform:translateY(-408px)}
|
|
|
|
|
4.538%{transform:translateY(-612px)}
|
|
|
|
|
5.018%{transform:translateY(-816px)}
|
|
|
|
|
5.497%{transform:translateY(-1020px)}
|
|
|
|
|
5.977%{transform:translateY(-1224px)}
|
|
|
|
|
6.456%{transform:translateY(-1428px)}
|
|
|
|
|
6.936%{transform:translateY(-1632px)}
|
|
|
|
|
7.415%{transform:translateY(-1836px)}
|
|
|
|
|
7.893%{transform:translateY(-2040px)}
|
|
|
|
|
8.372%{transform:translateY(-2244px)}
|
|
|
|
|
8.852%{transform:translateY(-2448px)}
|
|
|
|
|
9.331%{transform:translateY(-2652px)}
|
|
|
|
|
10.290%{transform:translateY(-2856px)}
|
|
|
|
|
10.295%{transform:translateY(-3060px)}
|
|
|
|
|
13.874%{transform:translateY(-3264px)}
|
|
|
|
|
14.354%{transform:translateY(-3468px)}
|
|
|
|
|
15.313%{transform:translateY(-3672px)}
|
|
|
|
|
15.320%{transform:translateY(-3876px)}
|
|
|
|
|
15.325%{transform:translateY(-4080px)}
|
|
|
|
|
18.906%{transform:translateY(-4284px)}
|
|
|
|
|
19.385%{transform:translateY(-4488px)}
|
|
|
|
|
19.865%{transform:translateY(-4692px)}
|
|
|
|
|
20.345%{transform:translateY(-4896px)}
|
|
|
|
|
20.824%{transform:translateY(-5100px)}
|
|
|
|
|
21.304%{transform:translateY(-5304px)}
|
|
|
|
|
21.783%{transform:translateY(-5508px)}
|
|
|
|
|
22.263%{transform:translateY(-5712px)}
|
|
|
|
|
22.742%{transform:translateY(-5916px)}
|
|
|
|
|
23.222%{transform:translateY(-6120px)}
|
|
|
|
|
23.701%{transform:translateY(-6324px)}
|
|
|
|
|
24.181%{transform:translateY(-6528px)}
|
|
|
|
|
24.661%{transform:translateY(-6732px)}
|
|
|
|
|
25.143%{transform:translateY(-6936px)}
|
|
|
|
|
25.622%{transform:translateY(-7140px)}
|
|
|
|
|
26.102%{transform:translateY(-7344px)}
|
|
|
|
|
26.581%{transform:translateY(-7548px)}
|
|
|
|
|
27.061%{transform:translateY(-7752px)}
|
|
|
|
|
27.540%{transform:translateY(-7956px)}
|
|
|
|
|
28.020%{transform:translateY(-8160px)}
|
|
|
|
|
28.500%{transform:translateY(-8364px)}
|
|
|
|
|
28.979%{transform:translateY(-8568px)}
|
|
|
|
|
29.459%{transform:translateY(-8772px)}
|
|
|
|
|
29.941%{transform:translateY(-8976px)}
|
|
|
|
|
30.418%{transform:translateY(-9180px)}
|
|
|
|
|
30.897%{transform:translateY(-9384px)}
|
|
|
|
|
31.377%{transform:translateY(-9588px)}
|
|
|
|
|
31.856%{transform:translateY(-9792px)}
|
|
|
|
|
32.336%{transform:translateY(-9996px)}
|
|
|
|
|
32.816%{transform:translateY(-10200px)}
|
|
|
|
|
33.295%{transform:translateY(-10404px)}
|
|
|
|
|
33.775%{transform:translateY(-10608px)}
|
|
|
|
|
34.254%{transform:translateY(-10812px)}
|
|
|
|
|
34.734%{transform:translateY(-11016px)}
|
|
|
|
|
35.213%{transform:translateY(-11220px)}
|
|
|
|
|
35.693%{transform:translateY(-11424px)}
|
|
|
|
|
36.173%{transform:translateY(-11628px)}
|
|
|
|
|
36.652%{transform:translateY(-11832px)}
|
|
|
|
|
37.132%{transform:translateY(-12036px)}
|
|
|
|
|
37.611%{transform:translateY(-12240px)}
|
|
|
|
|
38.091%{transform:translateY(-12444px)}
|
|
|
|
|
38.570%{transform:translateY(-12648px)}
|
|
|
|
|
39.050%{transform:translateY(-12852px)}
|
|
|
|
|
39.527%{transform:translateY(-13056px)}
|
|
|
|
|
40.007%{transform:translateY(-13260px)}
|
|
|
|
|
40.486%{transform:translateY(-13464px)}
|
|
|
|
|
40.966%{transform:translateY(-13668px)}
|
|
|
|
|
41.445%{transform:translateY(-13872px)}
|
|
|
|
|
41.925%{transform:translateY(-14076px)}
|
|
|
|
|
42.405%{transform:translateY(-14280px)}
|
|
|
|
|
42.884%{transform:translateY(-14484px)}
|
|
|
|
|
43.364%{transform:translateY(-14688px)}
|
|
|
|
|
44.323%{transform:translateY(-14892px)}
|
|
|
|
|
44.335%{transform:translateY(-15096px)}
|
|
|
|
|
44.337%{transform:translateY(-15300px)}
|
|
|
|
|
44.347%{transform:translateY(-15504px)}
|
|
|
|
|
44.461%{transform:translateY(-15708px)}
|
|
|
|
|
44.485%{transform:translateY(-15912px)}
|
|
|
|
|
44.552%{transform:translateY(-16116px)}
|
|
|
|
|
44.559%{transform:translateY(-16320px)}
|
|
|
|
|
48.138%{transform:translateY(-16524px)}
|
|
|
|
|
48.617%{transform:translateY(-16728px)}
|
|
|
|
|
49.097%{transform:translateY(-16932px)}
|
|
|
|
|
49.577%{transform:translateY(-17136px)}
|
|
|
|
|
50.056%{transform:translateY(-17340px)}
|
|
|
|
|
50.536%{transform:translateY(-17544px)}
|
|
|
|
|
51.015%{transform:translateY(-17748px)}
|
|
|
|
|
51.495%{transform:translateY(-17952px)}
|
|
|
|
|
51.974%{transform:translateY(-18156px)}
|
|
|
|
|
52.452%{transform:translateY(-18360px)}
|
|
|
|
|
53.411%{transform:translateY(-18564px)}
|
|
|
|
|
53.420%{transform:translateY(-18768px)}
|
|
|
|
|
53.427%{transform:translateY(-18972px)}
|
|
|
|
|
57.001%{transform:translateY(-19176px)}
|
|
|
|
|
57.481%{transform:translateY(-19380px)}
|
|
|
|
|
58.438%{transform:translateY(-19584px)}
|
|
|
|
|
58.445%{transform:translateY(-19788px)}
|
|
|
|
|
58.452%{transform:translateY(-19992px)}
|
|
|
|
|
62.028%{transform:translateY(-20196px)}
|
|
|
|
|
62.508%{transform:translateY(-20400px)}
|
|
|
|
|
62.988%{transform:translateY(-20604px)}
|
|
|
|
|
63.467%{transform:translateY(-20808px)}
|
|
|
|
|
63.947%{transform:translateY(-21012px)}
|
|
|
|
|
64.424%{transform:translateY(-21216px)}
|
|
|
|
|
64.903%{transform:translateY(-21420px)}
|
|
|
|
|
65.385%{transform:translateY(-21624px)}
|
|
|
|
|
65.863%{transform:translateY(-21828px)}
|
|
|
|
|
66.345%{transform:translateY(-22032px)}
|
|
|
|
|
66.822%{transform:translateY(-22236px)}
|
|
|
|
|
67.304%{transform:translateY(-22440px)}
|
|
|
|
|
67.783%{transform:translateY(-22644px)}
|
|
|
|
|
68.263%{transform:translateY(-22848px)}
|
|
|
|
|
68.742%{transform:translateY(-23052px)}
|
|
|
|
|
69.222%{transform:translateY(-23256px)}
|
|
|
|
|
69.702%{transform:translateY(-23460px)}
|
|
|
|
|
70.665%{transform:translateY(-23664px)}
|
|
|
|
|
70.680%{transform:translateY(-23868px)}
|
|
|
|
|
74.261%{transform:translateY(-24072px)}
|
|
|
|
|
74.741%{transform:translateY(-24276px)}
|
|
|
|
|
75.225%{transform:translateY(-24480px)}
|
|
|
|
|
75.707%{transform:translateY(-24684px)}
|
|
|
|
|
76.186%{transform:translateY(-24888px)}
|
|
|
|
|
76.666%{transform:translateY(-25092px)}
|
|
|
|
|
77.146%{transform:translateY(-25296px)}
|
|
|
|
|
77.625%{transform:translateY(-25500px)}
|
|
|
|
|
78.102%{transform:translateY(-25704px)}
|
|
|
|
|
78.582%{transform:translateY(-25908px)}
|
|
|
|
|
79.061%{transform:translateY(-26112px)}
|
|
|
|
|
79.541%{transform:translateY(-26316px)}
|
|
|
|
|
80.021%{transform:translateY(-26520px)}
|
|
|
|
|
80.500%{transform:translateY(-26724px)}
|
|
|
|
|
80.980%{transform:translateY(-26928px)}
|
|
|
|
|
81.457%{transform:translateY(-27132px)}
|
|
|
|
|
81.936%{transform:translateY(-27336px)}
|
|
|
|
|
82.416%{transform:translateY(-27540px)}
|
|
|
|
|
83.375%{transform:translateY(-27744px)}
|
|
|
|
|
83.387%{transform:translateY(-27948px)}
|
|
|
|
|
83.394%{transform:translateY(-28152px)}
|
|
|
|
|
86.971%{transform:translateY(-28356px)}
|
|
|
|
|
87.450%{transform:translateY(-28560px)}
|
|
|
|
|
87.927%{transform:translateY(-28764px)}
|
|
|
|
|
88.407%{transform:translateY(-28968px)}
|
|
|
|
|
88.889%{transform:translateY(-29172px)}
|
|
|
|
|
89.368%{transform:translateY(-29376px)}
|
|
|
|
|
89.848%{transform:translateY(-29580px)}
|
|
|
|
|
90.328%{transform:translateY(-29784px)}
|
|
|
|
|
90.807%{transform:translateY(-29988px)}
|
|
|
|
|
91.287%{transform:translateY(-30192px)}
|
|
|
|
|
91.766%{transform:translateY(-30396px)}
|
|
|
|
|
92.246%{transform:translateY(-30600px)}
|
|
|
|
|
92.725%{transform:translateY(-30804px)}
|
|
|
|
|
93.205%{transform:translateY(-31008px)}
|
|
|
|
|
93.685%{transform:translateY(-31212px)}
|
|
|
|
|
94.164%{transform:translateY(-31416px)}
|
|
|
|
|
94.641%{transform:translateY(-31620px)}
|
|
|
|
|
95.121%{transform:translateY(-31824px)}
|
|
|
|
|
95.600%{transform:translateY(-32028px)}
|
|
|
|
|
96.080%{transform:translateY(-32232px)}
|
|
|
|
|
96.560%{transform:translateY(-32436px)}
|
|
|
|
|
97.519%{transform:translateY(-32640px)}
|
|
|
|
|
97.538%{transform:translateY(-32844px)}
|
|
|
|
|
97.545%{transform:translateY(-33048px)}
|
|
|
|
|
97.571%{transform:translateY(-33252px)}
|
|
|
|
|
97.588%{transform:translateY(-33456px)}
|
|
|
|
|
97.597%{transform:translateY(-33660px)}
|
|
|
|
|
97.614%{transform:translateY(-33864px)}
|
|
|
|
|
100.000%{transform:translateY(-33864px)}
|
2022-02-15 15:06:41 +01:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
#screen_view {
|
2022-02-15 15:26:20 +01:00
|
|
|
animation-duration: 41913ms;
|
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:26:20 +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>
|
