start btn & some css fight

app/assets/styles/app.css

@@ -219,6 +219,8 @@ body[eicapp] {
     display: grid;
     grid-template-columns: min-content;
     grid-gap: 10px;
+    position: absolute;
+    right: 160px;
 }
 .eic-session button.status {
     display: inline-grid;

app/assets/styles/intro.css

@@ -0,0 +1,148 @@
+body {
+    display: flex; 
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+    min-height: 100vh;
+    background: #000;
+    overflow: hidden;
+}
+
+.glowing {
+    position: absolute;
+    width: 60vw;
+    height: 100vh;
+    transform-origin: right;
+    animation: colorChange 5s linear infinite;
+    animation: fadeaway 30s forwards; 
+    left: calc(50% + var(--j) * 50%);
+    transform: translateX(-50%);
+}
+
+.glowing:nth-child(even) {
+    transform-origin: left;
+}
+
+@keyframes colorChange {
+    0% {
+        filter: hue-rotate(0deg);
+        transform: rotate(0deg);
+    }
+    100% {
+        filter: hue-rotate(360deg);
+        transform: rotate(360deg);
+    }
+}
+
+.glowing span {
+    position: absolute;
+    top: calc(80px * var(--i));
+    left: calc(80px * var(--i));
+    bottom: calc(80px * var(--i));
+    right: calc(80px * var(--i));
+    filter: blur(2px);
+}
+
+.glowing span::before {
+    content: "";
+    position: absolute;
+    top: 50%;
+    left: -8px;
+    width: 10px;
+    height: 10px;
+    background: #f00;
+    border-radius: 50%;
+}
+
+.glowing span:nth-child(3n + 1)::before {
+    background: rgba(134,255,0,1);
+    box-shadow: 0 0 20px rgba(134,255,0,1),
+    0 0 40px rgba(134,255,0,1),
+    0 0 60px rgba(134,255,0,1),
+    0 0 80px rgba(134,255,0,1),
+    0 0 0 8px rgba(134,255,0,.1);
+}
+
+.glowing span:nth-child(3n + 2)::before {
+    background: rgba(0,255,183,1);
+    box-shadow: 0 0 20px rgba(0,255,183,1),
+    0 0 40px rgba(0,255,183,1),
+    0 0 60px rgba(0,255,183,1),
+    0 0 80px rgba(0,255,183,1),
+    0 0 0 8px rgba(0,255,183,.1);
+}
+
+.glowing span:nth-child(3n + 3)::before {
+    background: rgba(0,226,255,1);
+    box-shadow: 0 0 20px rgba(0,226,255,1),
+    0 0 40px rgba(0,226,255,1),
+    0 0 60px rgba(0,226,255,1),
+    0 0 80px rgba(0,226,255,1),
+    0 0 0 8px rgba(0,226,255,.1);
+}
+
+.glowing span:nth-child(3n + 1) {
+    animation: rotatedots 15s alternate infinite;
+}
+
+.glowing span:nth-child(3n + 2) {
+    animation: rotatedots-reverse 5s alternate infinite;
+}
+
+.glowing span:nth-child(3n + 3) {
+    animation: rotatedots 11s alternate infinite; 
+}
+        
+@keyframes fadeaway {
+    0% { opacity: 1; }
+    15% { opacity: 1; }
+    100% { opacity: 0; }
+}
+
+@keyframes rotatedots {
+    0% { transform: rotate(180deg); }
+    50% { transform: rotate(0deg); }
+    100% { transform: rotate(360deg); }
+}
+
+@keyframes rotatedots-reverse {
+    0% { transform: rotate(360deg); }            
+    50% { transform: rotate(180deg); }
+    100% { transform: rotate(0deg); }
+}   
+.logointro{
+    filter: blur(14px);
+    opacity: 0;
+    animation: logoanim 5s ease-out forwards; /* runs once */
+    will-change: filter, opacity;
+    color: #FFF;
+    position: absolute;
+    font-family: sans;
+    text-shadow: 3px -3px 5px #C5F7FF;
+}
+
+@keyframes logoanim{
+    0%   { filter: blur(14px); opacity: 0; transform: scale(0.1) }
+    100% { filter: blur(0);    opacity: 1; transform: scale(0.7)  }
+}
+    
+@keyframes startbtnanim{
+    0%   { opacity: 0; }
+    40%   { opacity: 0.8; }
+    100% { opacity: 1;   }
+}
+
+#startbtn{
+    cursor: default;
+    position: absolute;
+    bottom: 25%;
+    color: aliceblue;
+    font-family: sans;
+    font-style: italic;
+    font-size: 40px;
+    border-radius: 100px;
+    padding: 5px 40px;
+    background: radial-gradient(#282362, #0a8200);
+    box-shadow: 2px 2px 10px #BAFFEF, -2px -2px 10px #BAFFEF, -2px 0 10px #BAFFEF, 0 -2px 10px #BAFFEF;
+    animation: startbtnanim 5s ease-out forwards;
+}

app/libs/myUser.js

@@ -96,13 +96,17 @@ class myUser extends app.LoadedClasses.User {
             headers = { 'x-requested-path': url.pathname };
         }
 
+        document.getElementById('startbtn').addEventListener('click', () => {
+            console.log('====> click')
+            callBack()
+        })
         this.identity = {
             uuid: 'nike',
             email: 'info@nicsys.eu'
         };
         this.roles = ['admin']
         this.isAuthenticated = true
-        setTimeout(callBack, 20000);
+        //setTimeout(callBack, 20000);
         /*
         
         fetch(app.config.userLib.authEndpoint+'?'+crypto.randomUUID(),{

app/thirdparty/eicui/eicui-2.0.css

@@ -553,7 +553,7 @@ body[eicapp] {
     --eicui-body-font-family: var(--eicui-base-font-family);
     --eicui-body-font-size: var(--eicui-base-font-size);
     --eicui-body-line-height: var(--eicui-base-line-height);
-    background-color: #555;
+    background: radial-gradient(#263c20, #282828 );
     color: var(--eicui-body-color);
     font-family: var(--eicui-body-font-family);
     font-feature-settings: "liga";
@@ -575,7 +575,6 @@ body[eicapp] {
 [eicapp] [eicapptoolbar] {
     background: #1d261d;
     align-items: center;
-    border-bottom: 4px ridge #7D7;
     color: var(--eicui-app-toolbar-color);
     width: 100%;
     height: var(--eicui-app-toolbar-height-active);
@@ -587,7 +586,8 @@ body[eicapp] {
 
 [eicapp] [eicapptoolbar] img.logo{
     height: var(--eicui-app-toolbar-height-active); 
-    border-right: 4px ridge #7D7;
+    position: absolute;
+    right: 0px;
 }
 [eicapp] [eicapptoolbar] .app-menu {
     margin: 0 var(--eicui-base-spacing-xs) 0 0;
@@ -2306,7 +2306,7 @@ menu[eicmenu] {
     position: relative;
 }
 menu[eicmenu] .menu-lookup {
-    padding: var(--eicui-base-spacing-m);
+    padding: 0 .5em .2em .5em;
 }
 menu[eicmenu] .menu-lookup:before {
     content: "\f002";
@@ -2323,7 +2323,6 @@ menu[eicmenu] .menu-lookup input {
 }
 menu[eicmenu] [menuitem] {
     display: flex;
-    border-top: 0.1rem solid #efefef;
     color: white !important;
     height: auto;
     text-transform: uppercase;

app/views/templates/EICAppTemplate.html

@@ -1,7 +1,8 @@
 <header eicapptoolbar>
     <button eicbutton icon="icon-menu" xxxlarge rounded class="app-menu" role="button" aria-label="Button" aria-enabled="true"></button>
-    <h1><img src="/app/assets/images/logop42.png" class="logo"/></h1>
+    <img src="/app/assets/images/logop42.png" class="logo"/>
 </header>
-<menu eicmenu lookup class="app-menu"></menu>
+<menu eicmenu class="app-menu">
+</menu>
 <div class="app-workspace"></div>
 <div class="app-content-thesaurus"></div>

index.html

@@ -4,136 +4,7 @@
     <meta charset="UTF-8">
     <script src="/core/Sparc-core-1.0.js"></script>
     <title>Project 42</title>
-    <style>
+    <link rel="stylesheet" type="text/css" href="/app/assets/styles/intro.css" media="all">
-        body {
-            display: flex; 
-            justify-content: center;
-            align-items: center;
-            width: 100%;
-            min-height: 100vh;
-            background: #000;
-            overflow: hidden;
-        }
-        
-        .glowing {
-            position: absolute;
-            width: 60vw;
-            height: 100vh;
-            transform-origin: right;
-            animation: colorChange 5s linear infinite;
-            animation: fadeaway 30s forwards; 
-            left: calc(50% + var(--j) * 50%);
-            transform: translateX(-50%);
-        }
-        
-        .glowing:nth-child(even) {
-            transform-origin: left;
-        }
-        
-        @keyframes colorChange {
-            0% {
-                filter: hue-rotate(0deg);
-                transform: rotate(0deg);
-            }
-            100% {
-                filter: hue-rotate(360deg);
-                transform: rotate(360deg);
-            }
-        }
-        
-        .glowing span {
-            position: absolute;
-            top: calc(80px * var(--i));
-            left: calc(80px * var(--i));
-            bottom: calc(80px * var(--i));
-            right: calc(80px * var(--i));
-            filter: blur(2px);
-        }
-        
-        .glowing span::before {
-            content: "";
-            position: absolute;
-            top: 50%;
-            left: -8px;
-            width: 10px;
-            height: 10px;
-            background: #f00;
-            border-radius: 50%;
-        }
-        
-        .glowing span:nth-child(3n + 1)::before {
-            background: rgba(134,255,0,1);
-            box-shadow: 0 0 20px rgba(134,255,0,1),
-            0 0 40px rgba(134,255,0,1),
-            0 0 60px rgba(134,255,0,1),
-            0 0 80px rgba(134,255,0,1),
-            0 0 0 8px rgba(134,255,0,.1);
-        }
-        
-        .glowing span:nth-child(3n + 2)::before {
-            background: rgba(255,214,0,1);
-            box-shadow: 0 0 20px rgba(255,214,0,1),
-            0 0 40px rgba(255,214,0,1),
-            0 0 60px rgba(255,214,0,1),
-            0 0 80px rgba(255,214,0,1),
-            0 0 0 8px rgba(255,214,0,.1);
-        }
-        
-        .glowing span:nth-child(3n + 3)::before {
-            background: rgba(0,226,255,1);
-            box-shadow: 0 0 20px rgba(0,226,255,1),
-            0 0 40px rgba(0,226,255,1),
-            0 0 60px rgba(0,226,255,1),
-            0 0 80px rgba(0,226,255,1),
-            0 0 0 8px rgba(0,226,255,.1);
-        }
-
-        .glowing span:nth-child(3n + 1) {
-            animation: rotatedots 15s alternate infinite;
-        }
-        
-        .glowing span:nth-child(3n + 2) {
-            animation: rotatedots-reverse 5s alternate infinite;
-        }
-        
-        .glowing span:nth-child(3n + 3) {
-            animation: rotatedots 11s alternate infinite; 
-        }
-                
-        @keyframes fadeaway {
-            0% { opacity: 1; }
-            15% { opacity: 1; }
-            100% { opacity: 0; }
-        }
-        
-        @keyframes rotatedots {
-            0% { transform: rotate(180deg); }
-            50% { transform: rotate(0deg); }
-            100% { transform: rotate(360deg); }
-        }
-        
-        @keyframes rotatedots-reverse {
-            0% { transform: rotate(360deg); }            
-            50% { transform: rotate(180deg); }
-            100% { transform: rotate(0deg); }
-        }   
-        .deblur{
-            filter: blur(14px);
-            opacity: 0;
-            animation: deblur 5s ease-out forwards; /* runs once */
-            will-change: filter, opacity;
-            color: #FFF;
-            position: absolute;
-            font-family: sans;
-            text-shadow: 3px -3px 5px #C5F7FF;
-        }
-        
-        @keyframes deblur{
-            0%   { filter: blur(14px); opacity: 0; transform: scale(0.1) }
-            100% { filter: blur(0);    opacity: 1; transform: scale(1)  }
-        }
-            
-    </style>
 </head>
 
 <body>
@@ -153,6 +24,7 @@
         <span style="--i:2;"></span>
         <span style="--i:3;"></span>
     </div>
-    <img src="/app/assets/images/logop42-intro.png" class="deblur"/>
+    <img src="/app/assets/images/logop42-intro.png" class="logointro"/>
+    <div id="startbtn">START</div>
 </body>
 </html>