sem/ac-server-scripts
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add css

Browse Source
This commit is contained in:
SemvdH
2025-11-18 21:32:22 +01:00
parent e45cc25759
commit de7fbd3c0b
1 changed files with 133 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

136
index.html
View File

@@ -1,7 +1,134 @@
<html> <html>
<style>
body {
background: #111;
color: #f2f2f2;
font-family: "Press Start 2P", monospace;
/* retro pixel font */
padding: 20px;
text-shadow: 0 0 8px #ff00ff;
}
/* Import pixel font */
@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');
h1 {
color: #00eaff;
margin-top: 25px;
margin-bottom: 10px;
/* font-size: 18px; */
text-shadow: 0 0 6px #00eaff;
}
/* Retro select elements */
select {
background: #222;
color: #00f6ff;
border: 2px solid #00eaff;
padding: 6px 8px;
font-size: 12px;
font-family: "Press Start 2P", monospace;
border-radius: 4px;
cursor: pointer;
text-shadow: 0 0 6px #00eaff;
margin-right: 6px;
}
select:hover {
box-shadow: 0 0 10px #00eaff;
}
/* Buttons */
button {
background: #330044;
color: #ff00ff;
border: 2px solid #ff00ff;
padding: 8px 12px;
margin-top: 10px;
font-family: "Press Start 2P", monospace;
font-size: 12px;
cursor: pointer;
border-radius: 4px;
transition: 0.15s;
text-shadow: 0 0 8px #ff00ff;
}
button:hover {
background: #550066;
box-shadow: 0 0 12px #ff00ff, 0 0 20px #ff00ff inset;
}
/* Car block layout */
.car-block {
margin-top: 15px;
padding: 12px;
background: #1a001f;
border: 2px solid #660099;
border-radius: 6px;
box-shadow: 0 0 12px #660099;
animation-name: appear_animation;
animation-duration: 0.5s;
}
.car-block.remove-anim {
animation: disappear_animation 0.35s forwards;
}
.car-select,
.skin-select {
min-width: 140px;
}
/* Car list container */
#carList {
margin-top: 20px;
}
/* Image previews */
.parent {
display: flex;
gap: 20px;
margin-top: 10px;
}
#preview,
#outline {
border: 2px solid #00eaff;
box-shadow: 0 0 12px #00eaff;
}
/* Glow for images on hover */
img:hover {
box-shadow: 0 0 16px #00eaff;
}
@keyframes appear_animation {
from {
opacity: 0;
transform: scale(0.95);
}
to {
opacity: 1;
transform: scale(1);
}
}
@keyframes disappear_animation {
from {
opacity: 1;
transform: scale(1);
}
to {
opacity: 0;
transform: scale(0.9);
}
}
</style>
<body> <body>
<h2>Choose a track</h2> <h1>Choose a track</h1>
<select id="trackSelect"> <select id="trackSelect">
{{tracks}} {{tracks}}
@@ -18,7 +145,7 @@
<img id="outline" src="" width="400"> <img id="outline" src="" width="400">
</div> </div>
<h2>Choose cars</h2> <h1>Choose cars</h1>
<button id="addCarBtn">Add Car</button> <button id="addCarBtn">Add Car</button>
<button id="applyCarsBtn">Change cars</button> <button id="applyCarsBtn">Change cars</button>
@@ -150,7 +277,10 @@
const delBtn = document.createElement("button"); const delBtn = document.createElement("button");
delBtn.textContent = "Remove"; delBtn.textContent = "Remove";
delBtn.style.marginLeft = "10px"; delBtn.style.marginLeft = "10px";
delBtn.onclick = () => wrapper.remove(); delBtn.onclick = () => {
wrapper.classList.add("remove-anim");
setTimeout(() => wrapper.remove(), 350);
};
const copyBtn = document.createElement("button"); const copyBtn = document.createElement("button");
copyBtn.textContent = "Copy"; copyBtn.textContent = "Copy";