ADD : new welcome page (#1495)

* ADD: new welcome page * ADD: logo animation * ADD: new welcome page * FIX: eslint
stereum-dev · Oct 19, 2023 · 85db794 · 85db794
1 parent 781329d
commit 85db794
Show file tree

Hide file tree

Showing 16 changed files with 590 additions and 15 deletions.
diff --git a/launcher/public/img/icon/stereum-logo/stereum-logo-2.png b/launcher/public/img/icon/stereum-logo/stereum-logo-2.png
diff --git a/launcher/public/img/icon/welcome-page/dislike.png b/launcher/public/img/icon/welcome-page/dislike.png
diff --git a/launcher/public/img/icon/welcome-page/like.png b/launcher/public/img/icon/welcome-page/like.png
diff --git a/launcher/public/output.css b/launcher/public/output.css
@@ -515,7 +515,7 @@ video {
   --tw-backdrop-sepia:  ;
 }
 
-::-webkit-backdrop{
+::-ms-backdrop{
   --tw-border-spacing-x: 0;
   --tw-border-spacing-y: 0;
   --tw-translate-x: 0;
@@ -796,6 +796,10 @@ video {
   right: 0.25rem;
 }
 
+.right-10{
+  right: 2.5rem;
+}
+
 .right-2{
   right: 0.5rem;
 }
@@ -824,10 +828,18 @@ video {
   top: 0.25rem;
 }
 
+.top-10{
+  top: 2.5rem;
+}
+
 .top-\[-18px\]{
   top: -18px;
 }
 
+.top-\[-2px\]{
+  top: -2px;
+}
+
 .z-0{
   z-index: 0;
 }
@@ -940,10 +952,18 @@ video {
   grid-column-end: 2;
 }
 
+.col-end-20{
+  grid-column-end: 20;
+}
+
 .col-end-21{
   grid-column-end: 21;
 }
 
+.col-end-23{
+  grid-column-end: 23;
+}
+
 .col-end-25{
   grid-column-end: 25;
 }
@@ -988,6 +1008,10 @@ video {
   grid-row-start: 1;
 }
 
+.row-start-11{
+  grid-row-start: 11;
+}
+
 .row-start-12{
   grid-row-start: 12;
 }
@@ -1614,6 +1638,10 @@ video {
   max-width: 32rem;
 }
 
+.max-w-xs{
+  max-width: 20rem;
+}
+
 .flex-auto{
   -webkit-box-flex: 1;
       -ms-flex: 1 1 auto;
@@ -1984,6 +2012,11 @@ video {
       align-self: flex-start;
 }
 
+.self-end{
+  -ms-flex-item-align: end;
+      align-self: flex-end;
+}
+
 .self-center{
   -ms-flex-item-align: center;
       align-self: center;
@@ -2043,6 +2076,10 @@ video {
   white-space: pre;
 }
 
+.break-words{
+  overflow-wrap: break-word;
+}
+
 .rounded{
   border-radius: 0.25rem;
 }
@@ -2100,6 +2137,11 @@ video {
   border-top-right-radius: 0.5rem;
 }
 
+.rounded-t-md{
+  border-top-left-radius: 0.375rem;
+  border-top-right-radius: 0.375rem;
+}
+
 .rounded-bl-\[37px\]{
   border-bottom-left-radius: 37px;
 }
@@ -2174,6 +2216,16 @@ video {
   border-color: rgb(28 54 52 / var(--tw-border-opacity));
 }
 
+.border-\[\#262626\]{
+  --tw-border-opacity: 1;
+  border-color: rgb(38 38 38 / var(--tw-border-opacity));
+}
+
+.border-\[\#336666\]{
+  --tw-border-opacity: 1;
+  border-color: rgb(51 102 102 / var(--tw-border-opacity));
+}
+
 .border-blue-100{
   --tw-border-opacity: 1;
   border-color: rgb(219 234 254 / var(--tw-border-opacity));
@@ -2278,6 +2330,10 @@ video {
   border-right-color: rgb(38 71 68 / var(--tw-border-opacity));
 }
 
+.border-r-transparent{
+  border-right-color: transparent;
+}
+
 .bg-\[\#111315\]{
   --tw-bg-opacity: 1;
   background-color: rgb(17 19 21 / var(--tw-bg-opacity));
@@ -2318,6 +2374,11 @@ video {
   background-color: rgb(25 27 30 / var(--tw-bg-opacity));
 }
 
+.bg-\[\#1E2429\]{
+  --tw-bg-opacity: 1;
+  background-color: rgb(30 36 41 / var(--tw-bg-opacity));
+}
+
 .bg-\[\#1c1d1d\]{
   --tw-bg-opacity: 1;
   background-color: rgb(28 29 29 / var(--tw-bg-opacity));
@@ -2328,6 +2389,11 @@ video {
   background-color: rgb(28 32 33 / var(--tw-bg-opacity));
 }
 
+.bg-\[\#1d1f20\]{
+  --tw-bg-opacity: 1;
+  background-color: rgb(29 31 32 / var(--tw-bg-opacity));
+}
+
 .bg-\[\#1f2123\]{
   --tw-bg-opacity: 1;
   background-color: rgb(31 33 35 / var(--tw-bg-opacity));
@@ -2353,6 +2419,11 @@ video {
   background-color: rgb(36 61 54 / var(--tw-bg-opacity));
 }
 
+.bg-\[\#262626\]{
+  --tw-bg-opacity: 1;
+  background-color: rgb(38 38 38 / var(--tw-bg-opacity));
+}
+
 .bg-\[\#264744\]{
   --tw-bg-opacity: 1;
   background-color: rgb(38 71 68 / var(--tw-bg-opacity));
@@ -2373,6 +2444,11 @@ video {
   background-color: rgb(46 81 81 / var(--tw-bg-opacity));
 }
 
+.bg-\[\#303232\]{
+  --tw-bg-opacity: 1;
+  background-color: rgb(48 50 50 / var(--tw-bg-opacity));
+}
+
 .bg-\[\#33393E\]{
   --tw-bg-opacity: 1;
   background-color: rgb(51 57 62 / var(--tw-bg-opacity));
@@ -2388,6 +2464,11 @@ video {
   background-color: rgb(51 77 77 / var(--tw-bg-opacity));
 }
 
+.bg-\[\#336666\]{
+  --tw-bg-opacity: 1;
+  background-color: rgb(51 102 102 / var(--tw-bg-opacity));
+}
+
 .bg-\[\#38504e\]{
   --tw-bg-opacity: 1;
   background-color: rgb(56 80 78 / var(--tw-bg-opacity));
@@ -2590,10 +2671,18 @@ video {
   --tw-gradient-to-position: 95%;
 }
 
+.bg-contain{
+  background-size: contain;
+}
+
 .bg-cover{
   background-size: cover;
 }
 
+.bg-fixed{
+  background-attachment: fixed;
+}
+
 .bg-center{
   background-position: center;
 }
@@ -2650,6 +2739,11 @@ video {
   padding-right: 0.5rem;
 }
 
+.px-3{
+  padding-left: 0.75rem;
+  padding-right: 0.75rem;
+}
+
 .px-4{
   padding-left: 1rem;
   padding-right: 1rem;
@@ -2741,6 +2835,11 @@ video {
   font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
 }
 
+.text-2xl{
+  font-size: 1.5rem;
+  line-height: 2rem;
+}
+
 .text-\[10px\]{
   font-size: 10px;
 }
@@ -2835,6 +2934,11 @@ video {
   color: rgb(251 191 36 / var(--tw-text-opacity));
 }
 
+.text-amber-500{
+  --tw-text-opacity: 1;
+  color: rgb(245 158 11 / var(--tw-text-opacity));
+}
+
 .text-amber-600{
   --tw-text-opacity: 1;
   color: rgb(217 119 6 / var(--tw-text-opacity));
@@ -3071,6 +3175,11 @@ video {
   --tw-shadow: var(--tw-shadow-colored);
 }
 
+.shadow-\[\#303232\]{
+  --tw-shadow-color: #303232;
+  --tw-shadow: var(--tw-shadow-colored);
+}
+
 .shadow-black{
   --tw-shadow-color: #000;
   --tw-shadow: var(--tw-shadow-colored);
@@ -3432,6 +3541,13 @@ html body {
   border-color: rgb(255 255 255 / var(--tw-border-opacity));
 }
 
+.hover\:scale-110:hover{
+  --tw-scale-x: 1.1;
+  --tw-scale-y: 1.1;
+  -webkit-transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+          transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
 .hover\:scale-95:hover{
   --tw-scale-x: .95;
   --tw-scale-y: .95;
@@ -3594,6 +3710,23 @@ html body {
           box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 
+.hover\:shadow-xl:hover{
+  --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
+  --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
+  -webkit-box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+          box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+
+.hover\:shadow-\[\#1a1b1b\]:hover{
+  --tw-shadow-color: #1a1b1b;
+  --tw-shadow: var(--tw-shadow-colored);
+}
+
+.hover\:shadow-\[\#303232\]:hover{
+  --tw-shadow-color: #303232;
+  --tw-shadow: var(--tw-shadow-colored);
+}
+
 .hover\:brightness-110:hover{
   --tw-brightness: brightness(1.1);
   -webkit-filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
@@ -3640,6 +3773,13 @@ html body {
   --tw-ring-opacity: 0.8;
 }
 
+.active\:scale-100:active{
+  --tw-scale-x: 1;
+  --tw-scale-y: 1;
+  -webkit-transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+          transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
 .active\:scale-75:active{
   --tw-scale-x: .75;
   --tw-scale-y: .75;

diff --git a/launcher/src/components/UI/node-header/ServerAccessManagement.vue b/launcher/src/components/UI/node-header/ServerAccessManagement.vue
@@ -10,7 +10,7 @@
           <div class="management-info_box_row">
             <span>{{ serverNam }}</span
             ><span @mouseenter="cursorLocation = serverNam" @mouseleave="cursorLocation = ''">{{
-              selectedConnection.name
+              selectedConnection?.name
             }}</span>
           </div>
           <div class="management-info_box_row">
@@ -20,7 +20,7 @@
           <div class="management-info_box_row">
             <span>{{ userNam }}</span
             ><span @mouseenter="cursorLocation = userNam" @mouseleave="cursorLocation = ''">{{
-              selectedConnection.user
+              selectedConnection?.user
             }}</span>
           </div>
         </div>
@@ -32,7 +32,7 @@
           <div class="management-info_box_row">
             <span>{{ port }}</span
             ><span @mouseenter="cursorLocation = port" @mouseleave="cursorLocation = ''">{{
-              selectedConnection.port ? selectedConnection.port : 22
+              selectedConnection?.port ? selectedConnection.port : 22
             }}</span>
           </div>
           <div class="management-info_box_row" />