ASSISTANT
Da bismo poboljšali dizajn i smanjili količinu crnog prostora ispod sekcije sa linkom za "ticket", kao i da dodamo bolji stil pozadini i rubovima, možemo primeniti sledeće izmene:
1. **Smanjenje crnog prostorna**: Možemo smanjiti marginu i padding kod `center-message` da smanjimo prostor.
2. **Dizajn za `center-message`**: Dodajmo blagu senku i promenimo boju pozadine da bude manje stroga.
3. **Dizajn za `.file`**: Dodaćemo detaljnije stilove, poput senke i blura, kako bi kartice izgledale privlačnije.
Evo kako može izgledati ažurirani kod sa unapređenim dizajnom:
```html
<!DOCTYPE html>
<html lang="sr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Midnight Roleplay / Dozvoljeni Modovi</title>
<style>
body {
font-family: 'Arial', sans-serif;
text-align: center;
background: radial-gradient(circle, rgba(0, 15, 26, 1) 0%, rgba(0, 27, 51, 1) 100%);
color: #ffffff;
margin: 0;
padding: 0;
overflow-x: hidden;
}
/* Sidebar */
.sidebar {
position: fixed;
top: 20px;
left: 20px;
z-index: 10;
}
/* Naslov */
.sidebar h1 {
font-size: 42px;
color: #00bcd4;
text-shadow: 0 0 20px rgba(0, 188, 212, 0.9);
cursor: pointer;
margin: 0;
margin-bottom: 20px; /* Razmak ispod naslova */
}
.sidebar h1:hover {
color: #81d4fa;
transform: scale(1.05);
transition: 0.3s ease;
}
/* Butoni */
.container {
display: flex;
justify-content: center;
gap: 20px;
margin-top: 20px; /* Razmak iznad dugmadi */
margin-bottom: 50px; /* Razmak ispod dugmadi */
}
.button {
padding: 15px 30px;
background: linear-gradient(90deg, #00bcd4, #00796b);
border: none;
color: white;
font-size: 20px;
cursor: pointer;
border-radius: 30px;
box-shadow: 0 10px 30px rgba(0, 188, 212, 0.5);
transition: transform 0.3s ease, box-shadow 0.3s ease;
letter-spacing: 1px;
}
.button:hover {
transform: translateY(-4px);
box-shadow: 0 15px 40px rgba(0, 188, 212, 0.7);
}
/* Prikaz fajlova */
#files {
display: flex;
flex-wrap: wrap; /* Omogućava višestruke redove */
justify-content: flex-start; /* Pomeranje levo */
margin-top: 60px; /* Veći razmak između naslova i fajlova */
margin-left: 20px; /* Manji razmak sa leve strane */
}
.file {
background-color: rgba(255, 255, 255, 0.1);
border: 2px solid rgba(255, 255, 255, 0.2); /* Dodan border */
border-radius: 20px;
padding: 15px;
margin: 10px; /* Razmak između fajlova */
width: 250px;
text-align: left; /* Tekst levo poravnat */
transition: transform 0.3s ease, box-shadow 0.3s ease;
backdrop-filter: blur(10px);
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3); /* Dodana senka */
}
.file:hover {
transform: scale(1.05);
box-shadow: 0 0 25px rgba(255, 255, 255, 0.4);
border-color: #00bcd4; /* Menja boju border-a na hover */
}
.file img {
max-width: 100%;
border-radius: 10px;
margin-bottom: 10px;
}
.file a {
color: #00bcd4;
text-decoration: none;
font-weight: bold;
transition: color 0.3s ease;
}
.file a:hover {
color: #00796b;
}
/* Donja slika */
.bottom-right-image {
position: fixed;
bottom: 20px;
right: 20px;
width: 100px;
height: 100px;
border-radius: 10px;
animation: fadeIn 1s ease-in-out;
}
/* Poruka na donjem levom kutu */
.center-message {
position: fixed;
bottom: 20px;
left: 0; /* Postaviti na levo */
background-color: rgba(30, 30, 30, 0.8); /* Smanjena crna pozadina */
color: white;
padding: 10px; /* Manji padding */
border-radius: 10px;
box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
width: 95%; /* Širina koja se može smanjiti */
max-width: 500px;
font-size: 18px;
text-align: center;
animation: slideIn 1s forwards;
transition: background-color 0.3s, box-shadow 0.3s; /* Efekt pri hover */
}
.center-message:hover {
background-color: rgba(30, 30, 30, 0.9);
box-shadow: 0 0 25px rgba(0, 0, 0, 0.7);
}
/* Animacije */
@keyframes fadeIn {
0% {
opacity: 0;
transform: scale(0.5);
}
100% {
opacity: 1;
transform: scale(1);
}
}
@keyframes slideIn {
0% {
transform: translateX(-100%);
opacity: 0;
}
100% {
transform: translateX(0);
opacity: 1;
}
}
.hidden {
display: none;
}
</style>
</head>
<body>
<div class="sidebar">
<h1 onclick="showHome()">Midnight Roleplay</h1>
</div>
<div class="container" id="buttons">
<button class="button" onclick="showFiles('citizen')">CITIZEN</button>
<button class="button" onclick="showFiles('reshade')">RESHADE</button>
<button class="button" onclick="showFiles('traces')">TRACES</button>
<button class="button" onclick="showFiles('skinovi')">SKINOVI</button>
</div>
<div id="files"></div> <!-- Premešteno ispod sidebar -->
<div class="bottom-right-image">
<img src="images/rp.png" alt="RP Image">
</div>
<div class="center-message">
<p>Ako želite da dodate nešto, <a href="https://discord.gg/rpmidnigt" target="_blank">otvorite tiket</a></p>
<p>Discord: <a href="https://discord.gg/rpmidnigt" target="_blank">https://discord.gg/rpmidnigt</a></p>
</div>
<script>
const files = {
citizen: [
{ name: '999', link: 'downloads/999.rpf', image: 'images/999.jpg' },
{ name: 'Moon Bula', link: 'downloads/moonbula.rpf', image: 'images/moonbula.jpg' },
{ name: 'Mornar5', link: 'downloads/mornar.rpf', image: 'images/mornar.jpg' },
{ name: 'Lacoste', link: 'downloads/lacoste.rpf', image: 'images/lacoste.jpg' }
],
reshade: [
{ name: 'Reshade Setup', link: 'downloads/reshade_setup.exe', image: 'images/reshade_setup.jpg' }
],
traces: [
{ name: 'Trace File 1', link: 'downloads/trace_1.rpf', image: 'images/trace_1.jpg' },
{ name: 'Trace File 2', link: 'downloads/trace_2.rpf', image: 'images/trace_2.jpg' }
],
skinovi: [
{ name: 'Skin 1', link: 'downloads/skin_1.rpf', image: 'images/skin_1.jpg' },
{ name: 'Skin 2', link: 'downloads/skin_2.rpf', image: 'images/skin_2.jpg' }
]
};
function showFiles(category) {
const fileContainer = document.getElementById('files');
const buttonsContainer = document.getElementById('buttons');
// Hide buttons
buttonsContainer.classList.add('hidden');
// Change title
const sidebarTitle = document.querySelector('.sidebar h1');
sidebarTitle.innerHTML = `Midnight RP - ${category.charAt(0).toUpperCase() + category.slice(1)}`;
// Display category files
fileContainer.innerHTML = '';
files[category].forEach(file => {
fileContainer.innerHTML += `
<div class='file'>
<img src="${file.image}" alt="${file.name}">
<a href="${file.link}" download>${file.name}</a>
</div>`;
});
}
function showHome() {
// Show buttons and reset the title
const fileContainer = document.getElementById('files');
const buttonsContainer = document.getElementById('buttons');
buttonsContainer.classList.remove('hidden');
fileContainer.innerHTML = '';
const sidebarTitle = document.querySelector('.sidebar h1');
sidebarTitle.innerHTML = 'Midnight Roleplay'; // Reset title to original
}
</script>
</body>
</html>
```
### Objašnjenja izmena:
1. **Smanjenje crnog prostora**:
- Smanjili smo padding kod `center-message` i prilagodili pozadinsku boju (`rgba(30, 30, 30, 0.8)`) da bude manje stroga.
- Uklonili smo dodatni razmak na dnu da ne bi zauzimao toliko mesta.
2. **Dizajn `center-message`**:
- Dodali smo efekat promene pozadine i senke kada korisnik pređe mišem preko poruke.
3. **Unapređenje dizajna `file`**:
- Dodali smo margine i paddinge da bi kartice izgledale urednije i bile vizuelno privlačnije.
Ovim pristupom trebali bismo dobiti lepši i pristupačniji dizajn. Ako imate još nekih specifičnih zahteva za dizajn ili dalje prilagođavanje, slobodno ih navedite!