mirror of
https://github.com/openziti/zrok.git
synced 2025-01-03 12:39:07 +01:00
updated branding; tweaks (#724)
This commit is contained in:
Michael Quigley
parent
4411eca743
commit
96eb246241
113
ui100/index.html
113
ui100/index.html
@ -1,102 +1,17 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="icon" type="image/svg+xml" href="/zrok.png" />
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
|
||||
<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono&display=swap" rel="stylesheet">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>zrok API Console</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
<div id="footer">
|
||||
<a rel="noopener noreferrer" href="https://zrok.io">
|
||||
<svg width="150" height="45" viewBox="0 0 100 30" xml:space="preserve" style="clip-rule:evenodd;fill-rule:evenodd;stroke-miterlimit:10" id="svg48" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
|
||||
<defs id="defs48" /><namedview id="namedview48" pagecolor="#ffffff" bordercolor="#000000" borderopacity="0.25"/>
|
||||
<g transform="matrix(0.0639619,0,0,0.0388212,-1.65041,-1.44321)" id="g1">
|
||||
<path d="m 1589.31,230.468 c 0,-106.573 -52.51,-193.096 -117.2,-193.096 H 143.033 c -64.683,0 -117.198,86.523 -117.198,193.096 v 386.191 c 0,106.573 52.515,193.096 117.198,193.096 H 1472.11 c 64.69,0 117.2,-86.523 117.2,-193.096 z" style="fill:#170549" id="path1" />
|
||||
</g>
|
||||
<g transform="matrix(-0.0296355,-0.233707,-0.233707,0.0296355,76.730746,23.501948)" id="g15">
|
||||
<path d="m -30.685,-47.339 c 0.924,3.31 1.524,5.653 1.574,6.05 0.401,2.368 -0.97,54.354 -1.574,56.749 -0.171,1.029 -1.342,5.311 -2.995,10.56 -11.859,-21.982 -11.292,-51.69 2.995,-73.359" style="fill:#a3a3a3" id="path14" />
|
||||
</g>
|
||||
<g transform="matrix(0.235579,0,0,0.235579,89.174746,26.961548)" id="g23">
|
||||
<path d="m 0,-51.2 19.7,-3 c 5.6,-0.9 10.9,2.8 11.9,8.4 l 2.7,17.7 C 29.9,-18.1 23.6,-9 16,-1.3 10.9,3.9 15.9,-1.6 10,2.1 L 1,-39.8 C 0.1,-45.3 -5.7,-50.3 0,-51.2" style="fill:#b3b3b3" id="path22" />
|
||||
</g>
|
||||
<g transform="matrix(-0.160445,0.172496,0.172496,0.160445,96.828546,10.865078)" id="g24">
|
||||
<path d="m 61.55,-141.309 c -46.795,1.269 -84.666,39.929 -84.684,86.346 -0.018,46.417 37.889,83.042 84.684,81.772 46.795,-1.269 84.666,-39.929 84.684,-86.346 0.018,-46.417 -37.889,-83.042 -84.684,-81.772" id="path23" />
|
||||
</g>
|
||||
<g transform="matrix(0.235579,0,0,0.235579,56.099446,11.884458)" id="g25">
|
||||
<path d="M 0,34.1 8.7,32.5 C 4.8,21.8 3.2,10.4 4,-0.9 V -1.1 L -6.1,0.7 c -5.4,0.9 -9.2,6.1 -8.3,11.6 l 2.5,13.8 c 1.1,5.5 6.5,9.1 11.9,8" style="fill:#ffffff" id="path24" />
|
||||
</g>
|
||||
<g transform="matrix(0.235579,0,0,0.235579,99.257546,5.2882484)" id="g26">
|
||||
<path d="m 0,33.4 -8.8,1.1 C -8.3,23.1 -10.2,11.8 -14.4,1.2 V 1 L -4.2,-0.3 C 1.3,-1.1 6.4,2.8 7.2,8.3 L 9,22.2 C 9.5,27.8 5.5,32.8 0,33.4" style="fill:#ffffff" id="path25" />
|
||||
</g>
|
||||
<g transform="matrix(0.235579,0,0,0.235579,76.712646,31.343248)" id="g27">
|
||||
<path d="m 0,-161.7 c -22,0.5 -42.9,9.5 -58.3,25.2 -15.3,15.3 -23.7,36.2 -23.3,57.8 0.4,21.5 9.6,42 25.5,56.5 C -40,-7.3 -18.7,0.7 3.2,0 25.2,-0.5 46.1,-9.5 61.5,-25.2 76.7,-40.6 85.1,-61.4 84.8,-83 84.4,-104.5 75.2,-125 59.4,-139.6 43.2,-154.4 21.9,-162.4 0,-161.7 m -61.7,22.1 c 16.3,-16.6 38.4,-26.2 61.6,-26.8 23.2,-0.7 45.7,7.7 62.7,23.4 16.8,15.4 26.5,37 26.9,59.8 C 89.9,-60.3 81,-38.3 64.9,-22 48.6,-5.4 26.5,4.1 3.3,4.7 -19.8,5.4 -42.3,-3 -59.3,-18.7 c -16.8,-15.4 -26.5,-37.1 -26.9,-59.8 -0.5,-22.9 8.4,-44.9 24.5,-61.1" style="fill-rule:nonzero" id="path26" />
|
||||
</g>
|
||||
<g transform="matrix(0.235579,0,0,0.235579,56.099446,11.790228)" id="g28">
|
||||
<path d="M 0,34.5 8.7,32.9 C 4.8,22.2 3.2,10.8 4,-0.5 v -0.2 l -7.7,1.4 c 0.1,9.2 0.2,17.8 2.8,27.3 l -8.8,1.6 c -0.4,0 -0.7,0.3 -0.8,0.7 2.5,3.2 6.5,4.9 10.5,4.2" style="fill:#a3a3a3" id="path27" />
|
||||
</g>
|
||||
<g transform="matrix(0.235579,0,0,0.235579,99.257546,5.5473884)" id="g29">
|
||||
<path d="m 0,32.3 -8.8,1.1 C -8.3,22 -10.2,10.7 -14.4,0.1 v -0.2 l 7.7,-1 c 2.7,8.8 5.2,17 5.6,26.8 L 7.7,24.6 C 8.1,24.5 8.5,24.7 8.7,25 7.4,29 4,31.8 0,32.3" style="fill:#a3a3a3" id="path28" />
|
||||
</g>
|
||||
<g transform="matrix(0.235579,0,0,0.235579,57.418746,12.449848)" id="g30">
|
||||
<path d="m 0,28.3 -6,1.1 c -2,0.4 -4.2,-0.1 -5.9,-1.2 -1.7,-1.1 -2.9,-2.9 -3.3,-4.9 L -17.6,9.5 c -0.4,-2 0.1,-4.1 1.3,-5.7 1.2,-1.7 3,-2.8 5.1,-3.2 L -4,-0.7 c -0.4,9.8 1,19.6 4,29 M -5.2,34 3.6,32.4 6.4,31.9 5.5,29.3 C 1.7,18.9 0.1,7.9 0.9,-3.2 V -3.5 L 0.8,-4 0.4,-6.3 -2,-5.9 -12.1,-4.1 c -3.3,0.6 -6.2,2.4 -8.2,5.1 -1.9,2.7 -2.7,6 -2.1,9.2 l 2.5,13.8 c 0.6,3.2 2.5,6.1 5.2,7.9 2.9,2 6.2,2.7 9.5,2.1" style="fill-rule:nonzero" id="path29" />
|
||||
</g>
|
||||
<g transform="matrix(0.235579,0,0,0.235579,97.749846,5.8536384)" id="g31">
|
||||
<path d="m 0,29.5 6.1,-0.8 c 2.1,-0.3 3.9,-1.3 5.2,-3 1.3,-1.6 1.9,-3.6 1.6,-5.7 L 11.1,6.1 C 10.8,4.1 9.8,2.2 8.1,1 6.4,-0.2 4.4,-0.8 2.3,-0.5 L -5,0.4 c 1.7,4.6 2.9,9.4 3.7,14.2 0.9,5.1 1.3,10 1.3,14.9 m 6.6,3.8 -8.8,1.1 -2.8,0.4 0.1,-2.7 C -4.4,21.1 -6.3,10 -10.4,-0.2 l -0.1,-0.3 -0.1,-0.5 -0.3,-2.3 2.4,-0.3 10.2,-1.3 c 3.3,-0.4 6.7,0.4 9.3,2.4 2.6,2 4.4,4.9 4.8,8.1 l 1.8,13.9 c 0.4,3.3 -0.5,6.6 -2.6,9.1 -2,2.6 -5,4.3 -8.4,4.7" style="fill-rule:nonzero" id="path30" />
|
||||
</g>
|
||||
<g transform="matrix(-0.094487,-0.2158,-0.2158,0.094487,60.008346,10.163168)" id="g32">
|
||||
<path d="m -68.968,-142.292 c -20.852,8.475 -37.24,25.148 -45.56,46.039 -17.44,43.442 2.976,93.561 45.56,112.032 9.157,3.96 18.932,6.339 28.941,6.76 -61.01,-17.172 -106.83,-100.38 -28.941,-164.831" style="fill:#ffffff" id="path31" />
|
||||
</g>
|
||||
<g transform="matrix(0.235579,0,0,0.235579,95.346946,21.496048)" id="g33">
|
||||
<path d="m 0,-10.4 c 1.7,-4.2 3,-8.6 3.9,-13 -7.8,18.2 -18.4,31.7 -30.5,41.1 -11,8.6 -23.9,14.3 -37.7,16.6 -13.2,2.2 -26.8,1.5 -39.8,-2 -13.1,-3.4 -25.4,-9.4 -36.2,-17.6 1.5,1.7 3.2,3.4 4.9,5 16.1,14.9 37.4,22.8 59.3,22.1 22,-0.5 42.9,-9.5 58.3,-25.2 C -10,9 -4,-0.2 0,-10.4 m 10.4,-31.7 c 0.3,11.4 -1.7,22.7 -5.9,33.3 -4.3,10.7 -10.6,20.4 -18.7,28.5 -16.3,16.6 -38.4,26.1 -61.6,26.7 -23.1,0.7 -45.6,-7.7 -62.6,-23.4 -3.8,-3.5 -7.3,-7.3 -10.4,-11.4 -3.1,-4.1 -5.7,-8.4 -8,-13 l -5.1,-13.9 9.1,11.4 c 13,15.5 30.6,26.6 50.2,31.7 12.3,3.3 25.1,4 37.7,1.9 12.9,-2.1 25.1,-7.5 35.5,-15.6 15.1,-11.8 27.6,-30.2 35.2,-56.7 l 2.7,-14.9 z" style="fill-rule:nonzero" id="path32" />
|
||||
</g>
|
||||
<g transform="matrix(0.235579,0,0,0.235579,62.507246,12.284948)" id="g34">
|
||||
<path d="m 0,-59 c 32.8,-33.4 87,-34.8 121,-3.2 16.1,14.8 25.6,35.6 26.2,57.4 -12.8,-31.9 -30.4,-46.9 -51.7,-54.1 -33.2,-11.2 -64.8,-8.3 -93,24.3 -20.7,23.7 -19.6,48.4 -18,69.4 C -30.5,4.5 -25.5,-33.1 0,-59" style="fill:#ffffff" id="path33" />
|
||||
</g>
|
||||
<g transform="matrix(0.235579,0,0,0.235579,76.665546,22.037948)" id="g35">
|
||||
<path d="m 0,-124.1 c -22,0.5 -42.9,9.5 -58.3,25.2 -11.7,11.8 -19.5,27 -22.2,43.4 -1.9,11.4 -1.3,23 1.8,34.1 -0.1,-6.4 0.4,-12.9 1.4,-19.2 2.4,-13.7 8.5,-26.5 17.8,-36.9 14.5,-16.7 29.9,-25.9 46,-29.4 16.1,-3.5 32.7,-1.4 49.7,4.4 11.3,3.7 21.6,10 30,18.4 6.7,6.8 12.3,14.6 16.7,23.1 C 81.7,-66.3 80,-71.5 77.7,-76.5 73.3,-86.1 67.1,-94.7 59.3,-101.9 43.1,-116.8 21.9,-124.8 0,-124.1 m -61.8,22.1 c 16.3,-16.6 38.4,-26.2 61.7,-26.8 23.1,-0.7 45.6,7.7 62.6,23.4 8.2,7.6 14.8,16.7 19.4,26.9 4.6,10.1 7.1,21.1 7.4,32.2 l -0.2,13.2 -4.3,-12.2 C 78.5,-61 71.1,-72.4 62.7,-80.8 54.8,-88.7 45.1,-94.6 34.5,-98.1 c -16.2,-5.5 -32,-7.5 -47.1,-4.2 -15.1,3.3 -29.5,11.9 -43.3,27.8 -8.7,9.8 -14.5,21.8 -16.7,34.6 -2.1,11.5 -1.4,22.8 -0.6,33.1 l 0.9,12.2 -5.4,-11.1 c -7.7,-15.7 -10.4,-33.4 -7.5,-50.7 2.8,-17.1 11,-33.2 23.4,-45.6" style="fill-rule:nonzero" id="path34" />
|
||||
</g>
|
||||
<g transform="matrix(0.235579,0,0,0.235579,97.043046,0.69445839)" id="g36">
|
||||
<path d="m 0,37.2 c 0.3,2.4 0.5,4.8 0.5,7.3 -12.8,-31.9 -30.4,-46.9 -51.7,-54.1 -33.2,-11.2 -75.4,-3.5 -98,26.7 -6.8,9 -18.6,29.7 -15.7,54.2 -7.6,-24.3 -1.1,-48.6 20.4,-70.4 32.7,-33.5 86.8,-35 120.8,-3.3 C -12.1,8.2 -3.9,22 0,37.2" style="fill:#e6e6e6" id="path35" />
|
||||
</g>
|
||||
<g transform="matrix(0.235579,0,0,0.235579,92.166646,14.028248)" id="g37">
|
||||
<path d="m 0,-49.8 c 6.3,6.4 11.6,13.6 15.8,21.4 -1.6,-4 -3.5,-7.9 -5.7,-11.5 -3.9,-6.6 -8.8,-12.5 -14.4,-17.8 -16.2,-14.9 -37.5,-22.9 -59.5,-22.3 -22.2,0.6 -43.2,9.7 -58.7,25.5 -10.4,10.6 -17.2,21.7 -20.5,33.2 -1.4,4.9 -2.2,9.9 -2.3,15 0.5,-2.5 1,-4.8 1.7,-7.1 2.9,-9.8 7.5,-19.1 13.5,-27.3 11.1,-14.9 26.7,-24.4 43.8,-29.1 18.6,-5 38.2,-4.4 56.4,1.7 11.3,3.7 21.5,10 29.9,18.3 m 22.6,30.1 c 0.2,1.3 0.3,2.6 0.4,3.7 0.1,1.2 0.1,2.5 0.2,3.7 l 0.3,10.9 -4.1,-10.2 C 13.1,-27.3 5.6,-38.8 -2.8,-47.3 c -7.9,-7.9 -17.7,-13.9 -28.3,-17.4 -17.5,-5.8 -36.3,-6.4 -54.1,-1.6 -16.3,4.4 -31.2,13.5 -41.7,27.6 -5.8,7.9 -10.2,16.7 -13,26.1 -2.6,8.7 -3.4,17.8 -2.4,26.8 l 2.4,20.4 -6.2,-19.4 c -4,-12.2 -4.2,-25.2 -0.7,-37.5 3.5,-12 10.5,-23.7 21.4,-34.7 l 0.1,-0.1 c 16.2,-16.5 38.3,-26 61.4,-26.6 23,-0.7 45.3,7.6 62.2,23.2 l 0.1,0.1 c 5.9,5.4 10.9,11.7 15.1,18.6 4.1,6.8 7.2,14.2 9.1,21.9 z" style="fill-rule:nonzero" id="path36" />
|
||||
</g>
|
||||
<g transform="matrix(0.131129,0.19571,0.19571,-0.131129,60.042246,4.7938284)" id="g38">
|
||||
<path d="m 32.805,-16.969 c 0,0 -31.438,29.611 -14.637,74.808 1.315,4.657 15.792,4.346 14.637,-2.946 -1.154,-7.292 -9.456,-35.313 13.492,-66.457 1.659,-2.195 -8.429,-10.963 -13.492,-5.405" style="fill:#e6e6e6" id="path37" />
|
||||
</g>
|
||||
<g transform="matrix(0.235579,0,0,0.235579,52.094646,-8.3046516)" id="g45">
|
||||
<g opacity="0.25" id="g44">
|
||||
<g transform="matrix(-1,0,0,1,141,101.8)" id="g39">
|
||||
<path d="m 0,-36.8 c -10.162,0 -18.4,8.238 -18.4,18.4 C -18.4,-8.238 -10.162,0 0,0 10.162,0 18.4,-8.238 18.4,-18.4 18.4,-28.562 10.162,-36.8 0,-36.8" style="fill:#fefcf9;fill-rule:nonzero" id="path38" />
|
||||
</g>
|
||||
<g transform="matrix(-1,0,0,1,143.3,88.2)" id="g40">
|
||||
<path d="m 0,-14.2 c -3.921,0 -7.1,3.179 -7.1,7.1 0,3.921 3.179,7.1 7.1,7.1 3.921,0 7.1,-3.179 7.1,-7.1 0,-3.921 -3.179,-7.1 -7.1,-7.1" style="fill-rule:nonzero" id="path39" />
|
||||
</g>
|
||||
<g transform="matrix(-1,0,0,1,71.8,112.5)" id="g41">
|
||||
<path d="m 0,-36.8 c -10.162,0 -18.4,8.238 -18.4,18.4 C -18.4,-8.238 -10.162,0 0,0 10.162,0 18.4,-8.238 18.4,-18.4 18.4,-28.562 10.162,-36.8 0,-36.8" style="fill:#fefcf9;fill-rule:nonzero" id="path40" />
|
||||
</g>
|
||||
<g transform="translate(116.1,122.6)" id="g42">
|
||||
<path d="m 0,17.4 c -11.8,1.8 -23.8,-0.3 -34.3,-5.8 -0.9,-0.5 -1.3,-1.6 -0.8,-2.5 0.5,-0.9 1.6,-1.3 2.5,-0.8 20.1,10.8 44.9,7 60.7,-9.4 0.7,-0.7 1.9,-0.7 2.6,0 0.7,0.7 0.7,1.9 0,2.6 -7.9,8 -18,13.4 -29,15.6 -0.5,0 -1.1,0.2 -1.7,0.3 z" style="fill:none;fill-rule:nonzero;stroke:#ffffff;stroke-width:16.98px;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4" id="path41" />
|
||||
</g>
|
||||
<g transform="matrix(-1,0,0,1,76.2,97.8)" id="g43">
|
||||
<path d="m 0,-14.2 c -3.921,0 -7.1,3.179 -7.1,7.1 0,3.921 3.179,7.1 7.1,7.1 3.921,0 7.1,-3.179 7.1,-7.1 0,-3.921 -3.179,-7.1 -7.1,-7.1" style="fill-rule:nonzero" id="path42" />
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
<g id="zrok" transform="matrix(0.02734414,0,0,0.02978162,2.3966205,5.6320267)"> <path d="M 508.489,211.308 300.982,391.439 h 207.507 v 93.53 H 134.977 v -93.53 L 342.483,211.308 H 134.977 v -93.53 h 373.512 z" style="fill:#7bf600;fill-rule:nonzero" id="path45" />
|
||||
<path d="m 791.453,218.236 c -31.692,0 -64.39,6.928 -98.094,20.784 V 484.969 H 561.309 V 117.778 h 116.958 l 7.546,45.033 C 729.075,128.17 774.349,110.85 821.636,110.85 h 33.955 v 107.386 z" style="fill:#7bf600;fill-rule:nonzero" id="path46" />
|
||||
<path d="m 1300.79,381.047 c 0,34.64 -10.69,61.776 -32.07,81.405 -21.38,19.63 -50.93,29.445 -88.66,29.445 H 1006.5 c -37.723,0 -67.277,-9.815 -88.657,-29.445 -21.379,-19.629 -32.069,-46.765 -32.069,-81.405 V 221.7 c 0,-34.641 10.69,-61.776 32.069,-81.405 21.38,-19.63 50.934,-29.445 88.657,-29.445 h 173.56 c 37.73,0 67.28,9.815 88.66,29.445 21.38,19.629 32.07,46.764 32.07,81.405 z M 1168.74,232.092 c 0,-18.475 -10.06,-27.712 -30.18,-27.712 h -90.55 c -20.13,0 -30.19,9.237 -30.19,27.712 v 138.563 c 0,18.475 10.06,27.712 30.19,27.712 h 90.55 c 20.12,0 30.18,-9.237 30.18,-27.712 z" style="fill:#7bf600;fill-rule:nonzero" id="path47" />
|
||||
<path d="M 1500.75,339.478 V 484.969 H 1368.7 V 0 h 132.05 v 245.948 h 60.37 l 83,-128.17 h 139.59 l -113.18,176.667 113.18,190.524 h -139.59 l -86.78,-145.491 z" style="fill:#7bf600;fill-rule:nonzero" id="path48" />
|
||||
</g>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
<script type="module" src="/src/main.tsx"></script>
|
||||
</body>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="icon" type="image/svg+xml" href="/zrok.png" />
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
|
||||
<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono&display=swap" rel="stylesheet">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>zrok API Console</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
<script type="module" src="/src/main.tsx"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
53
ui100/public/zrok-1.0.0-rocket-white.svg
Normal file
53
ui100/public/zrok-1.0.0-rocket-white.svg
Normal file
@ -0,0 +1,53 @@
|
||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<!-- Created with Inkscape (http://www.inkscape.org/) -->
|
||||
|
||||
<svg
|
||||
width="125.797mm"
|
||||
height="166.26598mm"
|
||||
viewBox="0 0 125.797 166.26598"
|
||||
version="1.1"
|
||||
id="svg1"
|
||||
xml:space="preserve"
|
||||
inkscape:version="1.4 (e7c3feb, 2024-10-09)"
|
||||
sodipodi:docname="zrok-1.0.0-rocket-white.svg"
|
||||
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:svg="http://www.w3.org/2000/svg"><sodipodi:namedview
|
||||
id="namedview1"
|
||||
pagecolor="#ffffff"
|
||||
bordercolor="#000000"
|
||||
borderopacity="0.25"
|
||||
inkscape:showpageshadow="2"
|
||||
inkscape:pageopacity="0.0"
|
||||
inkscape:pagecheckerboard="0"
|
||||
inkscape:deskcolor="#d1d1d1"
|
||||
inkscape:document-units="mm"
|
||||
showguides="false"
|
||||
inkscape:zoom="0.57641403"
|
||||
inkscape:cx="1125.9268"
|
||||
inkscape:cy="717.3663"
|
||||
inkscape:window-width="1952"
|
||||
inkscape:window-height="1304"
|
||||
inkscape:window-x="1311"
|
||||
inkscape:window-y="48"
|
||||
inkscape:window-maximized="0"
|
||||
inkscape:current-layer="layer1"><inkscape:page
|
||||
x="0"
|
||||
y="-4.4822158e-22"
|
||||
width="125.797"
|
||||
height="166.26598"
|
||||
id="page2"
|
||||
margin="0"
|
||||
bleed="0" /></sodipodi:namedview><defs
|
||||
id="defs1" /><g
|
||||
inkscape:label="Layer 1"
|
||||
inkscape:groupmode="layer"
|
||||
id="layer1"
|
||||
transform="translate(-41.620475,-64.027978)"><path
|
||||
id="path2"
|
||||
style="fill:#ffffff;fill-opacity:1;stroke-width:0.865487"
|
||||
d="m 104.52059,64.027974 c 0,0 -12.300998,16.684095 -17.163248,24.964306 -4.8623,8.28022 -7.86765,12.84754 -10.59501,26.3339 -2.72736,13.48636 -1.27406,42.21319 -1.27406,42.21319 l -18.58752,20.04004 -15.280273,49.9615 40.422833,-6.79427 a 22.714797,11.567473 0 0 0 22.320548,9.54731 22.714797,11.567473 0 0 0 22.32712,-9.55945 l 40.72649,6.84277 -15.28027,-49.95979 -18.58916,-20.04001 c 0,0 1.45496,-28.72857 -1.2724,-42.21493 -2.72736,-13.48636 -5.73437,-18.05368 -10.59667,-26.3339 -4.8608,-8.277646 -17.14905,-24.947062 -17.15668,-24.957378 z m -0.0151,14.741718 c 0.52421,0.860497 14.76063,18.300498 18.34492,32.586238 3.65093,14.55125 3.25036,30.16797 2.29067,46.75483 -0.68395,11.82081 -5.48912,37.13724 -8.2384,50.97445 a 22.714797,11.567473 0 0 0 -12.54073,-1.9254 22.714797,11.567473 0 0 0 -12.237098,1.84921 c -2.75047,-13.84452 -7.55003,-39.12307 -8.23343,-50.93462 -0.95969,-16.58687 -1.36026,-32.20531 2.29067,-46.75656 3.57561,-14.25109 17.733538,-31.579359 18.323398,-32.548148 z m -27.999198,95.069708 6.36686,35.53319 -30.30472,9.08328 10.94985,-35.7998 z m 56.021568,0.0351 12.988,8.81667 10.9482,35.80155 -30.30311,-9.08504 z"
|
||||
inkscape:export-filename="zrok-1.0.0-rocket-white.svg"
|
||||
inkscape:export-xdpi="96"
|
||||
inkscape:export-ydpi="96" /></g></svg>
|
||||
|
After Width: | Height: | Size: 2.8 KiB |
42
ui100/public/zrok-1.0.0-rocket.svg
Normal file
42
ui100/public/zrok-1.0.0-rocket.svg
Normal file
@ -0,0 +1,42 @@
|
||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<!-- Created with Inkscape (http://www.inkscape.org/) -->
|
||||
|
||||
<svg
|
||||
width="210mm"
|
||||
height="297mm"
|
||||
viewBox="0 0 210 297"
|
||||
version="1.1"
|
||||
id="svg1"
|
||||
xml:space="preserve"
|
||||
inkscape:version="1.4 (e7c3feb, 2024-10-09)"
|
||||
sodipodi:docname="zrok-1.0.0-rocket.svg"
|
||||
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:svg="http://www.w3.org/2000/svg"><sodipodi:namedview
|
||||
id="namedview1"
|
||||
pagecolor="#ffffff"
|
||||
bordercolor="#000000"
|
||||
borderopacity="0.25"
|
||||
inkscape:showpageshadow="2"
|
||||
inkscape:pageopacity="0.0"
|
||||
inkscape:pagecheckerboard="0"
|
||||
inkscape:deskcolor="#d1d1d1"
|
||||
inkscape:document-units="mm"
|
||||
showguides="false"
|
||||
inkscape:zoom="0.57641403"
|
||||
inkscape:cx="1125.9268"
|
||||
inkscape:cy="717.3663"
|
||||
inkscape:window-width="1952"
|
||||
inkscape:window-height="1304"
|
||||
inkscape:window-x="1311"
|
||||
inkscape:window-y="48"
|
||||
inkscape:window-maximized="0"
|
||||
inkscape:current-layer="layer1" /><defs
|
||||
id="defs1" /><g
|
||||
inkscape:label="Layer 1"
|
||||
inkscape:groupmode="layer"
|
||||
id="layer1"><path
|
||||
id="path2"
|
||||
style="fill:#241774;stroke-width:0.865487;fill-opacity:1"
|
||||
d="m 104.52059,64.027974 c 0,0 -12.300998,16.684095 -17.163248,24.964306 -4.8623,8.28022 -7.86765,12.84754 -10.59501,26.3339 -2.72736,13.48636 -1.27406,42.21319 -1.27406,42.21319 l -18.58752,20.04004 -15.280273,49.9615 40.422833,-6.79427 a 22.714797,11.567473 0 0 0 22.320548,9.54731 22.714797,11.567473 0 0 0 22.32712,-9.55945 l 40.72649,6.84277 -15.28027,-49.95979 -18.58916,-20.04001 c 0,0 1.45496,-28.72857 -1.2724,-42.21493 -2.72736,-13.48636 -5.73437,-18.05368 -10.59667,-26.3339 -4.8608,-8.277646 -17.14905,-24.947062 -17.15668,-24.957378 z m -0.0151,14.741718 c 0.52421,0.860497 14.76063,18.300498 18.34492,32.586238 3.65093,14.55125 3.25036,30.16797 2.29067,46.75483 -0.68395,11.82081 -5.48912,37.13724 -8.2384,50.97445 a 22.714797,11.567473 0 0 0 -12.54073,-1.9254 22.714797,11.567473 0 0 0 -12.237098,1.84921 c -2.75047,-13.84452 -7.55003,-39.12307 -8.23343,-50.93462 -0.95969,-16.58687 -1.36026,-32.20531 2.29067,-46.75656 3.57561,-14.25109 17.733538,-31.579359 18.323398,-32.548148 z m -27.999198,95.069708 6.36686,35.53319 -30.30472,9.08328 10.94985,-35.7998 z m 56.021568,0.0351 12.988,8.81667 10.9482,35.80155 -30.30311,-9.08504 z" /></g></svg>
|
||||
|
After Width: | Height: | Size: 2.4 KiB |
@ -39,9 +39,7 @@ const ApiConsole = ({ user, logout }: ApiConsoleProps) => {
|
||||
let api = new MetadataApi(cfg);
|
||||
api.overview()
|
||||
.then(d => {
|
||||
console.log(d);
|
||||
let graph = buildVisualizerGraph(d);
|
||||
|
||||
setNodes(graph.nodes);
|
||||
setEdges(graph.edges);
|
||||
})
|
||||
@ -59,7 +57,7 @@ const ApiConsole = ({ user, logout }: ApiConsoleProps) => {
|
||||
<NavBar logout={logout} version={version} />
|
||||
<Box>
|
||||
<div style={{position: "relative", width: "100%", height: "500px"}}>
|
||||
<GraphCanvas nodes={nodes} edges={edges} theme={reagraphTheme} labelFontUrl={"https://fonts.googleapis.com/css?family=Poppins"}/>
|
||||
<GraphCanvas nodes={nodes} edges={edges} theme={reagraphTheme} />
|
||||
</div>
|
||||
</Box>
|
||||
</div>
|
||||
|
||||
@ -10,7 +10,7 @@ const App = () => {
|
||||
useEffect(() => {
|
||||
const checkUser = () => {
|
||||
const user = localStorage.getItem("user");
|
||||
if(user) {
|
||||
if (user) {
|
||||
console.log(user);
|
||||
setUser(JSON.parse(user));
|
||||
console.log("reloaded user", user);
|
||||
@ -21,6 +21,7 @@ const App = () => {
|
||||
|
||||
const login = (user: User) => {
|
||||
setUser(user);
|
||||
localStorage.setItem("user", JSON.stringify(user));
|
||||
}
|
||||
|
||||
const logout = () => {
|
||||
@ -28,12 +29,12 @@ const App = () => {
|
||||
localStorage.clear();
|
||||
}
|
||||
|
||||
const consoleRoot = user ? <ApiConsole user={user} logout={logout} /> : <Login onLogin={login} />
|
||||
const consoleRoot = user ? <ApiConsole user={user} logout={logout}/> : <Login onLogin={login}/>
|
||||
|
||||
return (
|
||||
<BrowserRouter>
|
||||
<Routes>
|
||||
<Route index element={consoleRoot} />
|
||||
<Route index element={consoleRoot}/>
|
||||
</Routes>
|
||||
</BrowserRouter>
|
||||
);
|
||||
|
||||
@ -1,7 +1,9 @@
|
||||
import {Box, Button, Container, TextField, Typography} from "@mui/material";
|
||||
import {User} from "./model/user.ts";
|
||||
import {useState} from "react";
|
||||
import {AccountApi} from "./api";
|
||||
import {useEffect, useState} from "react";
|
||||
import {AccountApi, MetadataApi} from "./api";
|
||||
import {Link} from "react-router";
|
||||
import zroket from "../public/zrok-1.0.0-rocket.svg";
|
||||
|
||||
interface LoginProps {
|
||||
onLogin: (user: User) => void;
|
||||
@ -11,10 +13,23 @@ const Login = ({ onLogin }: LoginProps) => {
|
||||
const [email, setEmail] = useState("");
|
||||
const [password, setPassword] = useState("");
|
||||
const [message, setMessage] = useState("");
|
||||
const [tou, setTou] = useState(null as string);
|
||||
|
||||
useEffect(() => {
|
||||
let api = new MetadataApi();
|
||||
api._configuration()
|
||||
.then(d => {
|
||||
if(d.touLink && d.touLink.trim() !== "") {
|
||||
setTou(d.touLink);
|
||||
}
|
||||
})
|
||||
.catch(e => {
|
||||
console.log(e);
|
||||
});
|
||||
}, []);
|
||||
|
||||
const login = async e => {
|
||||
e.preventDefault();
|
||||
console.log(email, password);
|
||||
|
||||
let api = new AccountApi();
|
||||
api.login({body: {"email": email, "password": password}})
|
||||
@ -22,15 +37,17 @@ const Login = ({ onLogin }: LoginProps) => {
|
||||
onLogin({email: email, token: d.toString()});
|
||||
})
|
||||
.catch(e => {
|
||||
setMessage("login failed: " + e.toString());
|
||||
console.log(e);
|
||||
setMessage("login failed!")
|
||||
});
|
||||
}
|
||||
|
||||
return (
|
||||
<Typography component="div">
|
||||
<Container maxWidth="xs">
|
||||
<Box sx={{ marginTop: 8, display: "flex", flexDirection: "column", alignItems: "center"}}>
|
||||
<h2>welcome to zrok...</h2>
|
||||
<Box sx={{marginTop: 8, display: "flex", flexDirection: "column", alignItems: "center"}}>
|
||||
<img src={zroket} height="300"/>
|
||||
<h1 style={{ color: "#241775" }}>z r o k</h1>
|
||||
<Box component="form" noValidate onSubmit={login}>
|
||||
<TextField
|
||||
margin="normal"
|
||||
@ -42,7 +59,10 @@ const Login = ({ onLogin }: LoginProps) => {
|
||||
autoComplete="email"
|
||||
autoFocus
|
||||
value={email}
|
||||
onChange={v => { setMessage(""); setEmail(v.target.value) }}
|
||||
onChange={v => {
|
||||
setMessage("");
|
||||
setEmail(v.target.value)
|
||||
}}
|
||||
/>
|
||||
<TextField
|
||||
margin="normal"
|
||||
@ -54,12 +74,23 @@ const Login = ({ onLogin }: LoginProps) => {
|
||||
id="password"
|
||||
autoComplete="current-password"
|
||||
value={password}
|
||||
onChange={v => { setMessage(""); setPassword(v.target.value) }}
|
||||
onChange={v => {
|
||||
setMessage("");
|
||||
setPassword(v.target.value)
|
||||
}}
|
||||
/>
|
||||
<Button type="submit" fullWidth variant="contained" sx={{ mt: 3, mb: 2 }}>
|
||||
<Button type="submit" fullWidth variant="contained" sx={{mt: 3, mb: 2}}>
|
||||
Log In
|
||||
</Button>
|
||||
<Box component="h3" style={{ color: "red" }}>{message}</Box>
|
||||
<Box component="div" style={{ textAlign: "center" }}>
|
||||
<Box component="h3" style={{color: "red"}}>{message}</Box>
|
||||
</Box>
|
||||
<Box component="div" style={{ textAlign: "center" }}>
|
||||
<Link to="/resetPassword">Forgot Password?</Link>
|
||||
</Box>
|
||||
<Box component="div" style={{ textAlign: "center" }}>
|
||||
<div dangerouslySetInnerHTML={{__html: tou}}></div>
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
</Container>
|
||||
|
||||
@ -1,13 +1,13 @@
|
||||
import {AppBar, Box, Button, Grid2, IconButton, Toolbar, Typography} from "@mui/material";
|
||||
import MenuIcon from "@mui/icons-material/Menu";
|
||||
import LogoutIcon from "@mui/icons-material/Logout";
|
||||
import zroket from "../public/zrok-1.0.0-rocket-white.svg";
|
||||
|
||||
interface NavBarProps {
|
||||
logout: () => void;
|
||||
version: string;
|
||||
}
|
||||
|
||||
const NavBar = ({ logout, version }: NavBarProps) => {
|
||||
const NavBar = ({ logout }: NavBarProps) => {
|
||||
return (
|
||||
<Box ssx={{ flexGrow: 1 }}>
|
||||
<AppBar position="static">
|
||||
@ -16,7 +16,14 @@ const NavBar = ({ logout, version }: NavBarProps) => {
|
||||
<MenuIcon />
|
||||
</IconButton>
|
||||
<Typography variant="h6" sx={{ flexGrow: 1 }} display={{ xs: "none", sm: "none", md: "block" }}>
|
||||
zrok { version !== "" ? " | " + version : ""}
|
||||
<Grid2 container sx={{ flexGrow: 1 }}>
|
||||
<Grid2 display="flex" justifyContent="left">
|
||||
<img src={zroket} height="30" />
|
||||
</Grid2>
|
||||
<Grid2 display="flex" justifyContent="left" size="grow" sx={{ ml: 3 }} color="#9bf316">
|
||||
<strong>z r o k</strong>
|
||||
</Grid2>
|
||||
</Grid2>
|
||||
</Typography>
|
||||
<Grid2 container sx={{ flexGrow: 1 }}>
|
||||
<Grid2 display="flex" justifyContent="right" size="grow">
|
||||
|
||||
@ -6,8 +6,8 @@ const buildVisualizerGraph = (overview: Overview) => {
|
||||
]
|
||||
let edges = [];
|
||||
overview.environments?.forEach((env, i) => {
|
||||
nodes.push({ id: (i+1).toString(), label: env.environment?.description! });
|
||||
edges.push({ source: (i+1).toString(), target: "1", id: (i+1)+"-1" });
|
||||
nodes.push({ id: (i+2).toString(), label: env.environment?.description! });
|
||||
edges.push({ source: (i+2).toString(), target: "1", id: (i+2)+"-1" });
|
||||
})
|
||||
return {
|
||||
nodes: nodes,
|
||||
|
||||
Loading…
Reference in New Issue
Block a user