P42/P42_UI
Public Access
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

start btn & some css fight

Browse Source
This commit is contained in:
STEINNI
2025-08-29 21:17:04 +00:00
parent 56bc07eade
commit 3fc9b0731e
7 changed files with 165 additions and 139 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/assets/images/logop42-intro.png
BIN
View File
Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 607 KiB

After

Width:  |  Height:  |  Size: 417 KiB

app/assets/styles/app.css
+2
View File
@@ -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
+148
View File
@@ -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
+5 -1
View File
@@ -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
Vendored
+4 -5
View File
@@ -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
+3 -2
View File
@@ -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
+3 -131
View File
@@ -4,136 +4,7 @@
<meta charset="UTF-8">
<script src="/core/Sparc-core-1.0.js"></script>
<title>Project 42</title>
<style>
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>
<link rel="stylesheet" type="text/css" href="/app/assets/styles/intro.css" media="all">
</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>