Skip to content

Commit

Permalink
reduce code duplication
Browse files Browse the repository at this point in the history
  • Loading branch information
@nopara73
nopara73 committed Oct 30, 2024
1 parent 724c9bb commit 449be61
Show file tree
Hide file tree
Showing 7 changed files with 146 additions and 283 deletions.
4 changes: 4 additions & 0 deletions LongevityWorldCup.Website/wwwroot/leaderboard/leaderboard.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,10 @@
<body>
<!--HEADER-->
<main>
<h2>Leaderboard🏆</h2>
<div class="options-container">
<button class="option-button back-button" onclick="window.location.href='/'">Go Back to Homepage</button>
</div>
</main>
<!--FOOTER-->
</body>
Expand Down
43 changes: 4 additions & 39 deletions LongevityWorldCup.Website/wwwroot/onboarding/application-review.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,47 +8,12 @@
display: none;
}

/* Button Styles */
.options-container {
display: flex;
flex-direction: column;
align-items: center;
margin-top: 2rem;
.option-button.already-have {
background-color: #4CAF50; /* Green */
}

.option-button {
padding: 1rem 2rem;
margin: 0.5rem 0;
font-size: 1.2rem;
background-color: var(--primary-color);
color: white;
border: none;
border-radius: 50px;
cursor: pointer;
transition: background-color 0.3s ease, transform 0.2s ease;
width: 80%;
max-width: 400px;
height: 60px; /* Fixed height for all buttons */
display: flex;
justify-content: center;
align-items: center; /* Vertically center the text */
}

.option-button.already-have {
background-color: #4CAF50; /* Green */
}

.option-button.already-have:hover {
background-color: #388E3C; /* Darker Green */
}

/* Adjust the back button styling */
.back-button {
background-color: #607D8B;
}

.back-button:hover {
background-color: #455A64;
.option-button.already-have:hover {
background-color: #388E3C; /* Darker Green */
}
</style>
</head>
Expand Down
190 changes: 75 additions & 115 deletions LongevityWorldCup.Website/wwwroot/onboarding/convergence.html
View file

Large diffs are not rendered by default.

53 changes: 11 additions & 42 deletions LongevityWorldCup.Website/wwwroot/onboarding/join-game.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,54 +8,23 @@
display: none;
}

/* Button Styles */
.options-container {
display: flex;
flex-direction: column;
align-items: center;
margin-top: 2rem;
/* Specific styles for different buttons */
.option-button.beer, .option-button.beef, .option-button.veggies {
background-color: #607D8B; /* Blue Grey */
}

.option-button {
padding: 1rem 2rem;
margin: 0.5rem 0;
font-size: 1.2rem;
background-color: var(--primary-color);
color: white;
border: none;
border-radius: 50px;
cursor: pointer;
transition: background-color 0.3s ease, transform 0.2s ease;
width: 80%;
max-width: 400px;
height: 60px; /* Fixed height for all buttons */
display: flex;
justify-content: center;
align-items: center; /* Vertically center the text */
}

.option-button:hover {
background-color: var(--secondary-color);
transform: scale(1.03);
}

/* Specific styles for different buttons */
.option-button.beer, .option-button.beef, .option-button.veggies {
background-color: #607D8B; /* Blue Grey */
/* Hover effects for specific buttons */
.option-button.beer:hover, .option-button.beef:hover, .option-button.veggies:hover {
background-color: #455A64; /* Darker Blue Grey */
}

/* Hover effects for specific buttons */
.option-button.beer:hover, .option-button.beef:hover, .option-button.veggies:hover {
background-color: #455A64; /* Darker Blue Grey */
}
.option-button.already-have {
background-color: #4CAF50; /* Green */
}

.option-button.already-have {
background-color: #4CAF50; /* Green */
.option-button.already-have:hover {
background-color: #388E3C; /* Darker Green */
}

.option-button.already-have:hover {
background-color: #388E3C; /* Darker Green */
}
</style>
</head>
<body>
Expand Down
56 changes: 8 additions & 48 deletions LongevityWorldCup.Website/wwwroot/onboarding/pheno-age.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,45 +8,14 @@
display: none;
}

/* Button Styles */
.options-container {
display: flex;
flex-direction: column;
align-items: center;
margin-top: 2rem;
.option-button.already-have {
background-color: #4CAF50; /* Green */
}

.option-button {
padding: 1rem 2rem;
margin: 0.5rem 0;
font-size: 1.2rem;
background-color: var(--primary-color);
color: white;
border: none;
border-radius: 50px;
cursor: pointer;
transition: background-color 0.3s ease, transform 0.2s ease;
width: 80%;
max-width: 400px;
height: 60px; /* Fixed height for all buttons */
display: flex;
justify-content: center;
align-items: center; /* Vertically center the text */
}

.option-button:hover {
background-color: var(--secondary-color);
transform: scale(1.03);
}

.option-button.already-have {
background-color: #4CAF50; /* Green */
.option-button.already-have:hover {
background-color: #388E3C; /* Darker Green */
}

.option-button.already-have:hover {
background-color: #388E3C; /* Darker Green */
}

/* Add these styles inside your <style> tag */
.bioageform {
max-width: 600px;
Expand Down Expand Up @@ -102,15 +71,6 @@
}
}

/* Adjust the back button styling */
.back-button {
background-color: #607D8B;
}

.back-button:hover {
background-color: #455A64;
}

/* Fieldset Styles */
.bioageform fieldset {
border: 1px solid #ccc;
Expand Down Expand Up @@ -409,10 +369,10 @@ <h2>Your Chronological vs Biological Age🧬</h2>
} else {
continueButton.style.display = "block"; // Show button if calculation is successful
resultField.innerHTML = `
<p class="result">
Chronologically, you are ${chronologicalAge.toFixed(2)} years old. Biologically, you are <strong>${phenoAge.toFixed(2)} years old.</strong>
Age ${phenoAge < chronologicalAge ? "reduction" : "acceleration"}: <strong>${(phenoAge < chronologicalAge ? "-" : "")}${Math.abs(chronologicalAge - phenoAge).toFixed(2)} years</strong>
</p>`;
<p class="result">
Chronologically, you are ${chronologicalAge.toFixed(2)} years old. Biologically, you are <strong>${phenoAge.toFixed(2)} years old.</strong>
Age ${phenoAge < chronologicalAge ? "reduction" : "acceleration"}: <strong>${(phenoAge < chronologicalAge ? "-" : "")}${Math.abs(chronologicalAge - phenoAge).toFixed(2)} years</strong>
</p>`;

}
}
Expand Down
43 changes: 4 additions & 39 deletions LongevityWorldCup.Website/wwwroot/onboarding/waiting-for-lab.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,47 +8,12 @@
display: none;
}

/* Button Styles */
.options-container {
display: flex;
flex-direction: column;
align-items: center;
margin-top: 2rem;
.option-button.already-have {
background-color: #4CAF50; /* Green */
}

.option-button {
padding: 1rem 2rem;
margin: 0.5rem 0;
font-size: 1.2rem;
background-color: var(--primary-color);
color: white;
border: none;
border-radius: 50px;
cursor: pointer;
transition: background-color 0.3s ease, transform 0.2s ease;
width: 80%;
max-width: 400px;
height: 60px; /* Fixed height for all buttons */
display: flex;
justify-content: center;
align-items: center; /* Vertically center the text */
}

.option-button.already-have {
background-color: #4CAF50; /* Green */
}

.option-button.already-have:hover {
background-color: #388E3C; /* Darker Green */
}

/* Adjust the back button styling */
.back-button {
background-color: #607D8B;
}

.back-button:hover {
background-color: #455A64;
.option-button.already-have:hover {
background-color: #388E3C; /* Darker Green */
}
</style>

Expand Down
40 changes: 40 additions & 0 deletions LongevityWorldCup.Website/wwwroot/partials/header.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -177,6 +177,46 @@
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
border-radius: 8px;
}

/* Button Styles */
.options-container {
display: flex;
flex-direction: column;
align-items: center;
margin-top: 2rem;
}

.option-button {
padding: 1rem 2rem;
margin: 0.5rem 0;
font-size: 1.2rem;
background-color: var(--primary-color);
color: white;
border: none;
border-radius: 50px;
cursor: pointer;
transition: background-color 0.3s ease, transform 0.2s ease;
width: 80%;
max-width: 400px;
height: 60px; /* Fixed height for all buttons */
display: flex;
justify-content: center;
align-items: center; /* Vertically center the text */
}

.option-button:hover {
background-color: var(--secondary-color, #2980b9); /* Default hover color */
transform: scale(1.03);
}

/* Adjust the back button styling */
.back-button {
background-color: #607D8B;
}

.back-button:hover {
background-color: #455A64;
}
</style>

<header>
Expand Down

0 comments on commit 449be61

Please sign in to comment.