Well, if you find document boring then this guide could be for you, this will take boring documentation that easily gets out of date and is a pain to update and modern the experience on the web so that data can be easily updated as well as those images that get easily out of date.
Note : This will need to be customised to your actual requirements and it is also mobile friendly so you can view this on a mobile device as well.
This will use some nice modern CSS style sheets to make it look interactive and engaging so lets start with the splash screen which is shown below:
The user then gets to the option to choose the correct option then the "setup cards" will take over and guide them though the setup process, first we start with a welcome screen and the options to move forward and backwards and restart the guide:
Then as you move though the guide you get a progression bar at the top of the screen for a quick "how much longer to go?" check and your instructions can be accompanied with a image if required.
When you reach the end you get a "Setup Complete" with the option to restart (which takes you to step 1) or finish (which returns you to the landing page.
This is the HTML coding for this single page experience that is easy to manage and add section if you need more sections you will need to add a section like this:
Then as you move though the guide you get a progression bar at the top of the screen for a quick "how much longer to go?" check and your instructions can be accompanied with a image if required.
When you reach the end you get a "Setup Complete" with the option to restart (which takes you to step 1) or finish (which returns you to the landing page.
This is the HTML coding for this single page experience that is easy to manage and add section if you need more sections you will need to add a section like this:
{
title: "Welcome to Windows 11 Standard Setup Guide",
text: "Let's begin the Windows 11 Standard installation process.",
image: "windows11.png"
},
Note : Remember that if a card needs to follow this one it must have a coma (,) at the end of the card of the code will assume its a "end" card
HTML Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Laptop Build Assistance</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
body {
min-height: 100vh;
background: linear-gradient(45deg, #3498db, #2ecc71, #3498db);
background-size: 200% 200%;
animation: gradientBG 15s ease infinite;
backdrop-filter: blur(10px);
}
@keyframes gradientBG {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 2rem;
min-height: 100vh;
}
.page {
display: none;
opacity: 0;
transition: opacity 0.3s ease;
}
.page.active {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 80vh;
opacity: 1;
}
.card {
background: rgba(255, 255, 255, 0.9);
padding: 2rem;
border-radius: 15px;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
width: 100%;
max-width: 800px;
margin: 1rem;
text-align: center;
}
h1 {
color: #2c3e50;
margin-bottom: 2rem;
font-size: 2.5rem;
}
h2 {
color: #2c3e50;
margin-bottom: 1.5rem;
font-size: 1.8rem;
}
.button-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 1rem;
margin-top: 2rem;
}
button {
background: #3498db;
color: white;
border: none;
padding: 1rem 2rem;
border-radius: 8px;
cursor: pointer;
font-size: 1rem;
transition: transform 0.2s, background 0.2s;
margin: 0 auto; /* Center buttons horizontally */
}
button:hover {
background: #2980b9;
transform: translateY(-2px);
}
.navigation {
display: flex;
gap: 1rem;
margin-top: 2rem;
justify-content: center; /* Center the navigation buttons */
width: 100%;
}
.progress-bar {
width: 100%;
height: 10px;
background: rgba(255, 255, 255, 0.3);
border-radius: 5px;
margin: 2rem 0;
overflow: hidden;
}
.progress {
height: 100%;
background: #2ecc71;
width: 0%;
transition: width 0.3s ease;
}
.flip-card {
perspective: 1000px;
width: 100%;
min-height: 400px;
margin: 2rem 0;
}
.card-content {
display: flex;
flex-direction: column;
align-items: center;
gap: 1.5rem;
}
.instruction-image {
max-width: 100%;
height: auto;
max-height: 300px;
border-radius: 8px;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
object-fit: contain;
}
.instruction-text {
font-size: 1.1rem;
line-height: 1.6;
color: #34495e;
max-width: 600px;
margin: 0 auto;
}
@media (max-width: 768px) {
.container {
padding: 1rem;
}
h1 {
font-size: 2rem;
}
h2 {
font-size: 1.5rem;
}
.card {
padding: 1.5rem;
}
.button-grid {
grid-template-columns: 1fr;
}
.instruction-image {
max-height: 200px;
}
.navigation {
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
}
button {
width: auto;
}
}
</style>
</head>
<body>
<div class="container">
<!-- Landing Page -->
<div class="page active" id="landing-page">
<div class="card">
<h1>Laptop Build Assistance</h1>
<div class="button-grid">
<button onclick="startGuide('windows10-standard')">Windows 10 Standard</button>
<button onclick="startGuide('windows10-enterprise')">Windows 10 Enterprise</button>
<button onclick="startGuide('windows11-standard')">Windows 11 Standard</button>
<button onclick="startGuide('windows11-enterprise')">Windows 11 Enterprise</button>
</div>
</div>
</div>
<!-- Instructions Page -->
<div class="page" id="instructions-page">
<div class="card">
<div class="progress-bar">
<div class="progress" id="progress"></div>
</div>
<div class="flip-card">
<div class="card-content" id="card-content">
<!-- Content will be dynamically inserted here -->
</div>
</div>
<div class="navigation">
<button onclick="previousStep()">Previous</button>
<button onclick="restartGuide()">Restart</button>
<button onclick="nextStep()">Next</button>
</div>
</div>
</div>
</div>
<script>
let currentStep = 0;
let totalSteps = 0;
let currentGuide = '';
const guides = {
'windows10-standard': [
{
title: "Welcome to Windows 10 Standard Setup Guide",
text: "This guide will walk you through the process of installing Windows 10 Standard edition.",
image: "windows11.png"
},
{
title: "Step 1: Insert Windows 10 installation media",
text: "Insert your Windows 10 USB drive or DVD into your computer.",
image: "windows11.png"
},
{
title: "Step 2: Configure BIOS settings",
text: "Enter BIOS and set boot priority to your installation media.",
image: "windows11.png"
},
{
title: "Step 3: Begin Windows installation",
text: "Follow the on-screen instructions to start the Windows installation process.",
image: "windows11.png"
},
{
title: "Step 4: Enter product key",
text: "Enter your Windows 10 product key when prompted.",
image: "windows11.png"
},
{
title: "Step 5: Complete installation",
text: "Wait for the installation to complete and system to restart.",
image: "windows11.png"
},
{
title: "Setup complete!",
text: "Your Windows 10 Standard installation is now complete. Click Finish to return to main menu.",
image: "windows11.png"
}
],
'windows10-enterprise': [
{
title: "Welcome to Windows 10 Enterprise Setup Guide",
text: "This guide will help you install Windows 10 Enterprise edition.",
image: "windows11.png"
},
{
title: "Step 1: Prepare enterprise installation media",
text: "Create your Windows 10 Enterprise installation media using the Media Creation Tool.",
image: "windows11.png"
}
// Add more steps as needed
],
'windows11-standard': [
{
title: "Welcome to Windows 11 Standard Setup Guide",
text: "Let's begin the Windows 11 Standard installation process.",
image: "windows11.png"
},
{
title: "Step 1: Check system requirements",
text: "Verify that your system meets Windows 11 requirements including TPM 2.0 and Secure Boot.",
image: "windows11.png"
}
// Add more steps as needed
],
'windows11-enterprise': [
{
title: "Welcome to Windows 11 Enterprise Setup Guide",
text: "Follow this guide to install Windows 11 Enterprise edition.",
image: "windows11.png"
},
{
title: "Step 1: Verify enterprise requirements",
text: "Ensure your system meets all Windows 11 Enterprise requirements.",
image: "windows11.png"
}
// Add more steps as needed
]
};
function startGuide(guideType) {
currentGuide = guideType;
currentStep = 0;
totalSteps = guides[guideType].length;
document.getElementById('landing-page').classList.remove('active');
document.getElementById('instructions-page').classList.add('active');
updateCard();
}
function updateCard() {
const step = guides[currentGuide][currentStep];
document.getElementById('card-content').innerHTML = `
<h2>${step.title}</h2>
<img src="${step.image}" alt="${step.title}" class="instruction-image">
<p class="instruction-text">${step.text}</p>
`;
updateProgress();
if (currentStep === totalSteps - 1) {
document.querySelector('.navigation button:last-child').textContent = 'Finish';
} else {
document.querySelector('.navigation button:last-child').textContent = 'Next';
}
}
function updateProgress() {
const progress = (currentStep / (totalSteps - 1)) * 100;
document.getElementById('progress').style.width = `${progress}%`;
}
function nextStep() {
if (currentStep === totalSteps - 1) {
returnToLanding();
} else {
currentStep++;
updateCard();
}
}
function previousStep() {
if (currentStep > 0) {
currentStep--;
updateCard();
}
}
function restartGuide() {
currentStep = 0;
updateCard();
}
function returnToLanding() {
document.getElementById('instructions-page').classList.remove('active');
document.getElementById('landing-page').classList.add('active');
}
</script>
</body>
</html>