Merge pull request #15 from OpzekerIT/fancyer
fancy ass buttons and background
This commit is contained in:
commit
f6ff9cb90b
2 changed files with 48 additions and 11 deletions
|
|
@ -1,3 +1,6 @@
|
||||||
|
/* Add Google Fonts */
|
||||||
|
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;700&display=swap');
|
||||||
|
|
||||||
/* Reset some default styles */
|
/* Reset some default styles */
|
||||||
body, h1, h2, p, ul, li, a {
|
body, h1, h2, p, ul, li, a {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
|
|
@ -6,8 +9,8 @@ body, h1, h2, p, ul, li, a {
|
||||||
}
|
}
|
||||||
|
|
||||||
body {
|
body {
|
||||||
font-family: Arial, sans-serif;
|
font-family: 'Roboto', sans-serif;
|
||||||
background-color: black;
|
background: linear-gradient(to right, #0f2027, #203a43, #2c5364);
|
||||||
color: white;
|
color: white;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -33,6 +36,8 @@ nav a {
|
||||||
color: white;
|
color: white;
|
||||||
padding: 10px 15px;
|
padding: 10px 15px;
|
||||||
display: block;
|
display: block;
|
||||||
|
border-radius: 5px;
|
||||||
|
transition: background-color 0.3s;
|
||||||
}
|
}
|
||||||
|
|
||||||
nav a:hover {
|
nav a:hover {
|
||||||
|
|
@ -42,8 +47,10 @@ nav a:hover {
|
||||||
header, main, footer {
|
header, main, footer {
|
||||||
max-width: 800px;
|
max-width: 800px;
|
||||||
margin: 20px auto;
|
margin: 20px auto;
|
||||||
padding: 10px 20px;
|
padding: 20px;
|
||||||
border: 1px solid white;
|
border: 1px solid white;
|
||||||
|
border-radius: 10px;
|
||||||
|
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
|
||||||
}
|
}
|
||||||
|
|
||||||
header h1, section h2 {
|
header h1, section h2 {
|
||||||
|
|
@ -56,7 +63,6 @@ footer {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Responsive Styles */
|
|
||||||
@media (max-width: 600px) {
|
@media (max-width: 600px) {
|
||||||
nav li {
|
nav li {
|
||||||
display: block;
|
display: block;
|
||||||
|
|
@ -72,6 +78,7 @@ table {
|
||||||
|
|
||||||
table, th, td {
|
table, th, td {
|
||||||
border: 1px solid white;
|
border: 1px solid white;
|
||||||
|
border-radius: 5px;
|
||||||
}
|
}
|
||||||
|
|
||||||
th, td {
|
th, td {
|
||||||
|
|
@ -88,13 +95,43 @@ tr:hover {
|
||||||
}
|
}
|
||||||
|
|
||||||
.discord-logo {
|
.discord-logo {
|
||||||
width: 50px; /* Reduced from 50px to 30px */
|
width: 50px;
|
||||||
height: auto;
|
height: auto;
|
||||||
margin-top: 10px;
|
margin-top: 10px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
transition: opacity 0.3s;
|
transition: opacity 0.3s, transform 0.3s;
|
||||||
|
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
|
||||||
|
border-radius: 5px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.discord-logo:hover {
|
.discord-logo:hover {
|
||||||
|
transform: scale(1.05);
|
||||||
opacity: 0.8;
|
opacity: 0.8;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Fancy Button Styles */
|
||||||
|
|
||||||
|
.btn {
|
||||||
|
display: inline-block;
|
||||||
|
font-size: 16px;
|
||||||
|
padding: 12px 20px;
|
||||||
|
border: none;
|
||||||
|
border-radius: 25px; /* Rounded Edges */
|
||||||
|
background: linear-gradient(to right, #FF416C, #FF4B2B); /* Gradient Background */
|
||||||
|
color: white;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: transform 0.3s, box-shadow 0.3s; /* Smooth Transition for Hover Effect */
|
||||||
|
text-align: center;
|
||||||
|
text-decoration: none; /* In case you use it on anchor tags */
|
||||||
|
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.1); /* Slight Shadow */
|
||||||
|
margin: 10px 0; /* Some Margin for Space */
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn:hover {
|
||||||
|
transform: translateY(-3px); /* Slight Lift on Hover */
|
||||||
|
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.2); /* Increased Shadow on Hover */
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn:active {
|
||||||
|
transform: translateY(1px); /* Slight Pressed-In effect on Click */
|
||||||
|
}
|
||||||
|
|
|
||||||
|
|
@ -29,15 +29,15 @@ error_reporting(E_ALL);
|
||||||
|
|
||||||
// Form to select game mode
|
// Form to select game mode
|
||||||
echo "<form method='post' action=''>
|
echo "<form method='post' action=''>
|
||||||
<input type='submit' name='game_mode' value='solo'>
|
<input type='submit' name='game_mode' value='solo' class='btn'>
|
||||||
<input type='submit' name='game_mode' value='duo'>
|
<input type='submit' name='game_mode' value='duo' class='btn'>
|
||||||
<input type='submit' name='game_mode' value='squad'>
|
<input type='submit' name='game_mode' value='squad' class='btn'>
|
||||||
</form><br>";
|
</form><br>";
|
||||||
|
|
||||||
// Buttons for each player
|
// Buttons for each player
|
||||||
echo "<form method='post' action=''>";
|
echo "<form method='post' action=''>";
|
||||||
foreach ($players_data[$selected_mode] as $player_name => $player_details) {
|
foreach ($players_data[$selected_mode] as $player_name => $player_details) {
|
||||||
echo "<button type='submit' name='selected_player' value='$player_name'>$player_name</button>";
|
echo "<button type='submit' name='selected_player' value='$player_name' class='btn' >$player_name</button>";
|
||||||
}
|
}
|
||||||
echo "</form><br>";
|
echo "</form><br>";
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue