zirei/Frutiger-Aero-Assets
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Upload files to "/"

Browse Source
This commit is contained in:
zirei
2025-07-12 18:16:57 -07:00
parent 9e396e63a0
commit f3096d7784
4 changed files with 1130 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

171
Buttons.html Normal file
View File

@ -0,0 +1,171 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Buttons</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background: linear-gradient(135deg, #1e3c72 0%, #2a5298 25%, #4a90e2 50%, #7bb3f0 75%, #a8d0f0 100%);
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
}
.container {
text-align: center;
background: linear-gradient(135deg,
rgba(255,255,255,0.15) 0%,
rgba(255,255,255,0.08) 50%,
rgba(255,255,255,0.05) 100%);
border: 1px solid rgba(255,255,255,0.2);
border-radius: 8px;
padding: 40px;
backdrop-filter: blur(20px);
box-shadow: 0 8px 32px rgba(0,0,0,0.3),
inset 0 1px 0 rgba(255,255,255,0.4);
}
h1 {
color: #ffffff;
font-size: 2rem;
margin-bottom: 30px;
text-shadow: 0 0 20px rgba(255,255,255,0.3);
font-weight: 300;
}
.button-showcase {
display: flex;
gap: 20px;
flex-wrap: wrap;
justify-content: center;
margin-bottom: 30px;
}
.btn {
background: linear-gradient(180deg,
rgba(255,255,255,0.3) 0%,
rgba(255,255,255,0.1) 50%,
rgba(255,255,255,0.05) 100%);
border: 1px solid rgba(255,255,255,0.4);
color: #ffffff;
padding: 12px 24px;
font-size: 14px;
border-radius: 3px;
cursor: pointer;
box-shadow: 0 2px 8px rgba(0,0,0,0.3),
inset 0 1px 0 rgba(255,255,255,0.5);
transition: all 0.2s ease;
position: relative;
overflow: hidden;
text-shadow: 0 1px 2px rgba(0,0,0,0.3);
font-family: 'Segoe UI', sans-serif;
font-weight: 400;
}
.btn::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 50%;
background: linear-gradient(180deg, rgba(255,255,255,0.2), transparent);
pointer-events: none;
}
.btn:hover {
background: linear-gradient(180deg,
rgba(255,255,255,0.4) 0%,
rgba(255,255,255,0.15) 50%,
rgba(255,255,255,0.08) 100%);
box-shadow: 0 2px 12px rgba(0,0,0,0.4),
inset 0 1px 0 rgba(255,255,255,0.6);
}
.btn:active {
background: linear-gradient(180deg,
rgba(255,255,255,0.1) 0%,
rgba(255,255,255,0.2) 50%,
rgba(255,255,255,0.15) 100%);
box-shadow: inset 0 2px 8px rgba(0,0,0,0.3);
}
.btn.primary {
background: linear-gradient(180deg,
rgba(74,144,226,0.8) 0%,
rgba(58,115,180,0.9) 50%,
rgba(42,82,138,0.95) 100%);
border: 1px solid rgba(74,144,226,0.6);
}
.btn.primary:hover {
background: linear-gradient(180deg,
rgba(74,144,226,0.9) 0%,
rgba(58,115,180,0.95) 50%,
rgba(42,82,138,1) 100%);
}
.btn:disabled {
opacity: 0.6;
cursor: not-allowed;
}
.message {
color: #ffffff;
padding: 15px;
background: linear-gradient(135deg,
rgba(255,255,255,0.1) 0%,
rgba(255,255,255,0.05) 100%);
border: 1px solid rgba(255,255,255,0.2);
border-radius: 4px;
margin-top: 20px;
text-shadow: 0 1px 2px rgba(0,0,0,0.3);
display: none;
backdrop-filter: blur(15px);
}
@media (max-width: 768px) {
.button-showcase {
flex-direction: column;
align-items: center;
}
}
</style>
</head>
<body>
<div class="container">
<h1>Buttons</h1>
<div class="button-showcase">
<button class="btn" onclick="showMessage('Standard button clicked!')">Standard</button>
<button class="btn primary" onclick="showMessage('Primary button clicked!')">Primary</button>
<button class="btn" onclick="showMessage('Another button clicked!')">Another Button</button>
<button class="btn" disabled>Disabled</button>
</div>
<div id="message" class="message"></div>
</div>
<script>
function showMessage(text) {
const messageDiv = document.getElementById('message');
messageDiv.textContent = text;
messageDiv.style.display = 'block';
setTimeout(() => {
messageDiv.style.display = 'none';
}, 3000);
}
</script>
</body>
</html>

388
Form.html Normal file
View File

@ -0,0 +1,388 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Form Elements</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background: linear-gradient(135deg, #1e3c72 0%, #2a5298 25%, #4a90e2 50%, #7bb3f0 75%, #a8d0f0 100%);
min-height: 100vh;
padding: 40px 20px;
position: relative;
}
body::before {
content: '';
position: fixed;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: radial-gradient(circle at 30% 20%, rgba(255,255,255,0.1) 0%, transparent 50%),
radial-gradient(circle at 70% 80%, rgba(173,216,230,0.2) 0%, transparent 50%),
radial-gradient(circle at 20% 70%, rgba(135,206,235,0.15) 0%, transparent 50%);
animation: aurora 20s ease-in-out infinite;
pointer-events: none;
z-index: -1;
}
@keyframes aurora {
0%, 100% { transform: rotate(0deg) scale(1); }
33% { transform: rotate(120deg) scale(1.1); }
66% { transform: rotate(240deg) scale(0.9); }
}
.container {
max-width: 800px;
margin: 0 auto;
}
h1 {
text-align: center;
color: #ffffff;
font-size: 2.5rem;
margin-bottom: 40px;
text-shadow: 0 0 20px rgba(255,255,255,0.3);
font-weight: 300;
}
.form-container {
background: linear-gradient(135deg,
rgba(255,255,255,0.15) 0%,
rgba(255,255,255,0.08) 50%,
rgba(255,255,255,0.05) 100%);
border: 1px solid rgba(255,255,255,0.2);
border-radius: 8px;
padding: 40px;
backdrop-filter: blur(20px);
box-shadow: 0 8px 32px rgba(0,0,0,0.3),
inset 0 1px 0 rgba(255,255,255,0.4);
}
.form-group {
margin-bottom: 25px;
}
.form-label {
display: block;
color: #ffffff;
font-size: 14px;
margin-bottom: 8px;
text-shadow: 0 1px 2px rgba(0,0,0,0.3);
font-weight: 400;
}
.input {
background: linear-gradient(180deg,
rgba(255,255,255,0.8) 0%,
rgba(255,255,255,0.9) 100%);
border: 1px solid rgba(255,255,255,0.5);
border-radius: 3px;
padding: 12px 16px;
font-size: 14px;
color: #333;
box-shadow: inset 0 2px 4px rgba(0,0,0,0.1),
0 1px 0 rgba(255,255,255,0.5);
transition: all 0.2s ease;
font-family: 'Segoe UI', sans-serif;
width: 100%;
}
.input:focus {
outline: none;
border-color: rgba(74,144,226,0.8);
box-shadow: inset 0 2px 4px rgba(0,0,0,0.1),
0 0 8px rgba(74,144,226,0.3);
}
.textarea {
background: linear-gradient(180deg,
rgba(255,255,255,0.8) 0%,
rgba(255,255,255,0.9) 100%);
border: 1px solid rgba(255,255,255,0.5);
border-radius: 3px;
padding: 12px 16px;
font-size: 14px;
color: #333;
box-shadow: inset 0 2px 4px rgba(0,0,0,0.1),
0 1px 0 rgba(255,255,255,0.5);
transition: all 0.2s ease;
font-family: 'Segoe UI', sans-serif;
width: 100%;
min-height: 120px;
resize: vertical;
}
.textarea:focus {
outline: none;
border-color: rgba(74,144,226,0.8);
box-shadow: inset 0 2px 4px rgba(0,0,0,0.1),
0 0 8px rgba(74,144,226,0.3);
}
.select {
background: linear-gradient(180deg,
rgba(255,255,255,0.8) 0%,
rgba(255,255,255,0.9) 100%);
border: 1px solid rgba(255,255,255,0.5);
border-radius: 3px;
padding: 12px 16px;
font-size: 14px;
color: #333;
box-shadow: inset 0 2px 4px rgba(0,0,0,0.1),
0 1px 0 rgba(255,255,255,0.5);
transition: all 0.2s ease;
font-family: 'Segoe UI', sans-serif;
width: 100%;
cursor: pointer;
}
.select:focus {
outline: none;
border-color: rgba(74,144,226,0.8);
box-shadow: inset 0 2px 4px rgba(0,0,0,0.1),
0 0 8px rgba(74,144,226,0.3);
}
.progress {
background: linear-gradient(180deg,
rgba(255,255,255,0.1) 0%,
rgba(255,255,255,0.05) 100%);
border: 1px solid rgba(255,255,255,0.2);
border-radius: 3px;
height: 22px;
overflow: hidden;
box-shadow: inset 0 2px 4px rgba(0,0,0,0.2);
margin-bottom: 25px;
}
.progress-fill {
height: 100%;
background: linear-gradient(180deg,
rgba(120,220,120,0.9) 0%,
rgba(80,180,80,0.95) 50%,
rgba(60,140,60,1) 100%);
border-radius: 2px;
transition: width 0.5s ease;
position: relative;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.3);
}
.progress-fill::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(90deg,
transparent 0%,
rgba(255,255,255,0.3) 50%,
transparent 100%);
animation: progress-shine 2s ease-in-out infinite;
}
@keyframes progress-shine {
0% { transform: translateX(-100%); }
100% { transform: translateX(100%); }
}
.btn {
background: linear-gradient(180deg,
rgba(255,255,255,0.3) 0%,
rgba(255,255,255,0.1) 50%,
rgba(255,255,255,0.05) 100%);
border: 1px solid rgba(255,255,255,0.4);
color: #ffffff;
padding: 12px 24px;
font-size: 14px;
border-radius: 3px;
cursor: pointer;
box-shadow: 0 2px 8px rgba(0,0,0,0.3),
inset 0 1px 0 rgba(255,255,255,0.5);
transition: all 0.2s ease;
position: relative;
overflow: hidden;
text-shadow: 0 1px 2px rgba(0,0,0,0.3);
font-family: 'Segoe UI', sans-serif;
font-weight: 400;
margin-right: 10px;
}
.btn::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 50%;
background: linear-gradient(180deg, rgba(255,255,255,0.2), transparent);
pointer-events: none;
}
.btn:hover {
background: linear-gradient(180deg,
rgba(255,255,255,0.4) 0%,
rgba(255,255,255,0.15) 50%,
rgba(255,255,255,0.08) 100%);
box-shadow: 0 2px 12px rgba(0,0,0,0.4),
inset 0 1px 0 rgba(255,255,255,0.6);
}
.btn.primary {
background: linear-gradient(180deg,
rgba(74,144,226,0.8) 0%,
rgba(58,115,180,0.9) 50%,
rgba(42,82,138,0.95) 100%);
border: 1px solid rgba(74,144,226,0.6);
}
.btn.primary:hover {
background: linear-gradient(180deg,
rgba(74,144,226,0.9) 0%,
rgba(58,115,180,0.95) 50%,
rgba(42,82,138,1) 100%);
}
.checkbox-group {
display: flex;
align-items: center;
margin-bottom: 15px;
}
.checkbox {
width: 16px;
height: 16px;
margin-right: 10px;
accent-color: #4a90e2;
}
.checkbox-label {
color: #ffffff;
font-size: 14px;
text-shadow: 0 1px 2px rgba(0,0,0,0.3);
cursor: pointer;
}
.form-actions {
margin-top: 30px;
text-align: center;
}
.progress-info {
color: #ffffff;
font-size: 14px;
margin-bottom: 10px;
text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}
</style>
</head>
<body>
<div class="container">
<h1>Form</h1>
<div class="form-container">
<form>
<div class="form-group">
<label class="form-label" for="name">Discord Username</label>
<input type="text" id="name" class="input" placeholder="Enter your Discord username">
</div>
<div class="form-group">
<label class="form-label" for="email">Roblox username</label>
<input class="input" placeholder="Enter your Roblox username">
</div>
<div class="form-group">
<label class="form-label" for="country">Issue</label>
<select id="country" class="select">
<option value="">Select</option>
<option value="us">Issue?</option>
<option value="uk">Issue?</option>
<option value="ca">Issue?</option>
<option value="au">Issue?</option>
<option value="de">Issue?</option>
<option value="fr">Issue?</option>
<option value="jp">Issue?</option>
</select>
</div>
<div class="form-group">
<label class="form-label" for="message">More detail</label>
<textarea id="message" class="textarea" placeholder="Enter your message"></textarea>
</div>
<div class="form-group">
<div class="checkbox-group">
<input type="checkbox" id="newsletter" class="checkbox">
<label class="checkbox-label" for="newsletter">Check mark</label>
</div>
<div class="checkbox-group">
<input type="checkbox" id="terms" class="checkbox">
<label class="checkbox-label" for="terms">TOS maybe?</label>
</div>
</div>
<div class="form-group">
<div class="progress-info">Form completion progress:</div>
<div class="progress">
<div class="progress-fill" id="progressBar" style="width: 0%;"></div>
</div>
</div>
<div class="form-actions">
<button type="button" class="btn" onclick="clearForm()">Clear</button>
<button type="submit" class="btn primary">Submit</button>
</div>
</form>
</div>
</div>
<script>
function updateProgress() {
const form = document.querySelector('form');
const inputs = form.querySelectorAll('input, textarea, select');
let filledCount = 0;
inputs.forEach(input => {
if (input.type === 'checkbox') {
if (input.checked) filledCount++;
} else if (input.value.trim() !== '') {
filledCount++;
}
});
const progress = (filledCount / inputs.length) * 100;
document.getElementById('progressBar').style.width = progress + '%';
}
function clearForm() {
document.querySelector('form').reset();
updateProgress();
}
document.addEventListener('DOMContentLoaded', function() {
const form = document.querySelector('form');
const inputs = form.querySelectorAll('input, textarea, select');
inputs.forEach(input => {
input.addEventListener('input', updateProgress);
input.addEventListener('change', updateProgress);
});
form.addEventListener('submit', function(e) {
e.preventDefault();
alert('Good job!!');
});
});
</script>
</body>
</html>

384
LoginPane.html Normal file
View File

@ -0,0 +1,384 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Windows Vista Login</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
height: 100vh;
overflow: hidden;
background: linear-gradient(135deg, #0066cc 0%, #4d94ff 50%, #80b3ff 100%);
position: relative;
}
.background-effects {
position: absolute;
width: 100%;
height: 100%;
overflow: hidden;
}
.wave {
position: absolute;
width: 200%;
height: 200%;
background: radial-gradient(ellipse at center, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.05) 30%, transparent 70%);
border-radius: 50%;
animation: wave-animation 20s linear infinite;
}
.wave:nth-child(1) {
top: -50%;
left: -50%;
animation-delay: 0s;
}
.wave:nth-child(2) {
top: -30%;
right: -60%;
animation-delay: -7s;
animation-duration: 15s;
}
.wave:nth-child(3) {
bottom: -40%;
left: -40%;
animation-delay: -14s;
animation-duration: 25s;
}
@keyframes wave-animation {
0% { transform: rotate(0deg) scale(1); opacity: 0.3; }
50% { transform: rotate(180deg) scale(1.2); opacity: 0.6; }
100% { transform: rotate(360deg) scale(1); opacity: 0.3; }
}
.flow-line {
position: absolute;
width: 2px;
height: 100px;
background: linear-gradient(to bottom, transparent, rgba(255,255,255,0.4), transparent);
animation: flow 8s linear infinite;
}
.flow-line:nth-child(4) {
top: 10%;
left: 20%;
animation-delay: 0s;
}
.flow-line:nth-child(5) {
top: 30%;
right: 15%;
animation-delay: -2s;
}
.flow-line:nth-child(6) {
bottom: 20%;
left: 60%;
animation-delay: -4s;
}
@keyframes flow {
0% { transform: translateY(-100px) rotate(45deg); opacity: 0; }
50% { opacity: 1; }
100% { transform: translateY(100vh) rotate(45deg); opacity: 0; }
}
.login-container {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 400px;
padding: 40px;
text-align: center;
}
.user-avatar {
width: 128px;
height: 128px;
margin: 0 auto 30px;
background: linear-gradient(145deg, #e6f3ff, #b3d9ff);
border: 3px solid rgba(255,255,255,0.8);
border-radius: 12px;
box-shadow:
0 0 0 1px rgba(255,255,255,0.3),
0 8px 32px rgba(0,0,0,0.3),
inset 0 1px 0 rgba(255,255,255,0.8),
inset 0 -1px 0 rgba(0,0,0,0.1);
backdrop-filter: blur(10px);
position: relative;
overflow: hidden;
}
.user-avatar::before {
content: '';
position: absolute;
top: 10px;
left: 10px;
right: 10px;
bottom: 10px;
background: linear-gradient(135deg, rgba(255,255,255,0.2), transparent);
border-radius: 8px;
}
.input-group {
margin-bottom: 20px;
}
.input-field {
width: 100%;
padding: 12px 16px;
border: 2px solid rgba(255,255,255,0.3);
border-radius: 6px;
background: rgba(255,255,255,0.9);
backdrop-filter: blur(5px);
font-size: 14px;
color: #333;
box-shadow:
inset 0 1px 3px rgba(0,0,0,0.1),
0 1px 0 rgba(255,255,255,0.8);
transition: all 0.3s ease;
}
.input-field:focus {
outline: none;
border-color: #4d94ff;
background: rgba(255,255,255,0.95);
box-shadow:
inset 0 1px 3px rgba(0,0,0,0.1),
0 1px 0 rgba(255,255,255,0.8),
0 0 0 2px rgba(77,148,255,0.3);
}
.input-field::placeholder {
color: #666;
}
.login-button {
width: 60px;
height: 40px;
background: linear-gradient(145deg, #4d94ff, #0066cc);
border: 1px solid rgba(255,255,255,0.3);
border-radius: 6px;
box-shadow:
0 2px 8px rgba(0,0,0,0.2),
inset 0 1px 0 rgba(255,255,255,0.3);
cursor: pointer;
margin-left: 10px;
position: relative;
overflow: hidden;
transition: all 0.3s ease;
}
.login-button::before {
content: '→';
color: white;
font-size: 18px;
font-weight: bold;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.login-button:hover {
background: linear-gradient(145deg, #66a3ff, #1a75ff);
transform: translateY(-1px);
box-shadow:
0 4px 12px rgba(0,0,0,0.3),
inset 0 1px 0 rgba(255,255,255,0.4);
}
.login-button:active {
transform: translateY(0);
box-shadow:
0 2px 4px rgba(0,0,0,0.2),
inset 0 1px 0 rgba(255,255,255,0.3);
}
.password-row {
display: flex;
align-items: center;
justify-content: center;
}
.password-row .input-field {
margin-right: 10px;
flex: 1;
}
.domain-text {
color: rgba(255,255,255,0.9);
font-size: 14px;
margin-top: 20px;
text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}
.domain-link {
color: rgba(255,255,255,0.8);
text-decoration: underline;
cursor: pointer;
transition: color 0.3s ease;
}
.domain-link:hover {
color: white;
}
.switch-user {
position: absolute;
bottom: 40px;
left: 50%;
transform: translateX(-50%);
padding: 12px 24px;
background: rgba(255,255,255,0.1);
border: 1px solid rgba(255,255,255,0.3);
border-radius: 6px;
color: white;
font-size: 14px;
cursor: pointer;
backdrop-filter: blur(5px);
box-shadow:
0 2px 8px rgba(0,0,0,0.2),
inset 0 1px 0 rgba(255,255,255,0.2);
transition: all 0.3s ease;
}
.switch-user:hover {
background: rgba(255,255,255,0.2);
transform: translateX(-50%) translateY(-2px);
box-shadow:
0 4px 12px rgba(0,0,0,0.3),
inset 0 1px 0 rgba(255,255,255,0.3);
}
.vista-orb {
position: absolute;
width: 40px;
height: 40px;
background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.4), rgba(255,255,255,0.1));
border-radius: 50%;
animation: float 6s ease-in-out infinite;
}
.vista-orb:nth-of-type(1) {
top: 15%;
right: 15%;
animation-delay: 0s;
}
.vista-orb:nth-of-type(2) {
bottom: 25%;
left: 10%;
animation-delay: -3s;
}
@keyframes float {
0%, 100% { transform: translateY(0px); }
50% { transform: translateY(-20px); }
}
@media (max-width: 480px) {
.login-container {
width: 90%;
padding: 30px 20px;
}
.user-avatar {
width: 100px;
height: 100px;
}
}
</style>
</head>
<body>
<div class="background-effects">
<div class="wave"></div>
<div class="wave"></div>
<div class="wave"></div>
<div class="flow-line"></div>
<div class="flow-line"></div>
<div class="flow-line"></div>
</div>
<div class="vista-orb"></div>
<div class="vista-orb"></div>
<div class="login-container">
<div class="user-avatar"></div>
<div class="input-group">
<input type="text" class="input-field" placeholder="User name" id="username">
</div>
<div class="input-group">
<div class="password-row">
<input type="password" class="input-field" placeholder="Password" id="password">
<button class="login-button" onclick="handleLogin()"></button>
</div>
</div>
<div class="domain-text">
Log on to: TGP<br>
<a href="#" class="domain-link" onclick="showDomainDialog()">Need help?</a>
</div>
</div>
<button class="switch-user" onclick="showSwitchUser()">Switch User</button>
<script>
function handleLogin() {
const username = document.getElementById('username').value;
const password = document.getElementById('password').value;
if (username && password) {
const button = document.querySelector('.login-button');
button.style.background = 'linear-gradient(145deg, #4CAF50, #45a049)';
button.innerHTML = '✓';
setTimeout(() => {
alert('Login successful! (Change this later)');
button.style.background = 'linear-gradient(145deg, #4d94ff, #0066cc)';
button.innerHTML = '';
}, 1000);
} else {
alert('Please enter both username and password');
}
}
function showDomainDialog() {
alert('Help dialog would show up here');
}
function showSwitchUser() {
alert('Idk if you want to do something with this or not.');
}
document.addEventListener('keydown', function(e) {
if (e.key === 'Enter') {
handleLogin();
}
});
document.querySelectorAll('.input-field').forEach(field => {
field.addEventListener('focus', function() {
this.style.transform = 'translateY(-1px)';
});
field.addEventListener('blur', function() {
this.style.transform = 'translateY(0)';
});
});
</script>
</body>
</html>

187
Menu.html Normal file
View File

@ -0,0 +1,187 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Menu</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background: linear-gradient(135deg, #1e3c72 0%, #2a5298 25%, #4a90e2 50%, #7bb3f0 75%, #a8d0f0 100%);
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
}
.container {
text-align: center;
max-width: 400px;
width: 100%;
}
h1 {
color: #ffffff;
font-size: 2rem;
margin-bottom: 30px;
text-shadow: 0 0 20px rgba(255,255,255,0.3);
font-weight: 300;
}
.menu {
background: linear-gradient(135deg,
rgba(255,255,255,0.15) 0%,
rgba(255,255,255,0.08) 100%);
border: 1px solid rgba(255,255,255,0.3);
border-radius: 6px;
overflow: hidden;
backdrop-filter: blur(20px);
box-shadow: 0 8px 24px rgba(0,0,0,0.4),
inset 0 1px 0 rgba(255,255,255,0.4);
margin-bottom: 20px;
}
.menu-item {
padding: 12px 16px;
color: #ffffff;
cursor: pointer;
transition: all 0.2s ease;
border-bottom: 1px solid rgba(255,255,255,0.1);
text-shadow: 0 1px 2px rgba(0,0,0,0.3);
position: relative;
font-size: 14px;
text-align: left;
display: flex;
align-items: center;
gap: 10px;
}
.menu-item::before {
content: '';
width: 16px;
height: 16px;
background: linear-gradient(135deg,
rgba(255,255,255,0.3) 0%,
rgba(255,255,255,0.1) 100%);
border-radius: 2px;
flex-shrink: 0;
}
.menu-item:hover {
background: linear-gradient(90deg,
rgba(255,255,255,0.2) 0%,
rgba(255,255,255,0.1) 100%);
}
.menu-item:last-child {
border-bottom: none;
}
.menu-item.active {
background: linear-gradient(90deg,
rgba(74,144,226,0.3) 0%,
rgba(74,144,226,0.15) 100%);
border-left: 3px solid rgba(74,144,226,0.8);
}
.message {
color: #ffffff;
padding: 15px;
background: linear-gradient(135deg,
rgba(255,255,255,0.1) 0%,
rgba(255,255,255,0.05) 100%);
border: 1px solid rgba(255,255,255,0.2);
border-radius: 4px;
text-shadow: 0 1px 2px rgba(0,0,0,0.3);
display: none;
backdrop-filter: blur(15px);
}
.menu-separator {
height: 1px;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
margin: 5px 0;
}
.menu-item.disabled {
opacity: 0.5;
cursor: not-allowed;
}
.menu-item.disabled:hover {
background: none;
}
@media (max-width: 768px) {
.container {
margin: 10px;
}
}
</style>
</head>
<body>
<div class="container">
<h1>Menu</h1>
<div class="menu">
<div class="menu-item active" onclick="selectMenuItem(this, 'Home')">
<span>Placeholder</span>
</div>
<div class="menu-item" onclick="selectMenuItem(this, 'Documents')">
<span>Placeholder</span>
</div>
<div class="menu-item" onclick="selectMenuItem(this, 'Pictures')">
<span>Placeholder</span>
</div>
<div class="menu-item" onclick="selectMenuItem(this, 'Music')">
<span>Placeholder</span>
</div>
<div class="menu-separator"></div>
<div class="menu-item" onclick="selectMenuItem(this, 'Computer')">
<span>Placeholder</span>
</div>
<div class="menu-item" onclick="selectMenuItem(this, 'Network')">
<span>Placeholder</span>
</div>
<div class="menu-separator"></div>
<div class="menu-item" onclick="selectMenuItem(this, 'Control Panel')">
<span>Placeholder</span>
</div>
<div class="menu-item disabled">
<span>Disabled thing</span>
</div>
</div>
<div id="message" class="message"></div>
</div>
<script>
function selectMenuItem(element, itemName) {
if (element.classList.contains('disabled')) {
return;
}
document.querySelectorAll('.menu-item').forEach(item => {
item.classList.remove('active');
});
element.classList.add('active');
const messageDiv = document.getElementById('message');
messageDiv.textContent = `Selected: ${itemName}`;
messageDiv.style.display = 'block';
setTimeout(() => {
messageDiv.style.display = 'none';
}, 3000);
}
</script>
</body>
</html>