<!DOCTYPE html>
<html lang="en">
<head>
<style>
/* General Styles */
body {
font-family: 'Arial', sans-serif;
margin: 0;
padding: 0;
transition: background-color 0.3s, color 0.3s;
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 20px;
text-align: center;
}
h1 {
font-size: 2.5rem;
margin-bottom: 20px;
}
/* Dark/Light Mode Toggle */
.mode-toggle {
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 20px;
}
.switch {
position: relative;
display: inline-block;
width: 60px;
height: 34px;
}
.switch input {
opacity: 0;
width: 0;
height: 0;
}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
transition: 0.4s;
border-radius: 34px;
}
.slider:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
transition: 0.4s;
border-radius: 50%;
}
input:checked + .slider {
background-color: #2196F3;
}
input:checked + .slider:before {
transform: translateX(26px);
}
#modeLabel {
margin-left: 10px;
font-size: 1rem;
}
/* Tool Options */
.tool-options {
margin-bottom: 40px;
}
#keywordInput {
padding: 10px;
width: 300px;
max-width: 100%;
border: 1px solid #ccc;
border-radius: 5px;
font-size: 1rem;
}
#searchButton {
padding: 10px 20px;
margin-left: 10px;
border: none;
background-color: #2196F3;
color: white;
border-radius: 5px;
cursor: pointer;
font-size: 1rem;
}
#searchButton:hover {
background-color: #1e88e5;
}
/* Info Boxes */
.info-boxes {
display: flex;
justify-content: space-around;
flex-wrap: wrap;
}
.info-box {
width: 45%;
padding: 20px;
border: 1px solid #ccc;
border-radius: 10px;
margin: 10px;
cursor: pointer;
transition: transform 0.3s, box-shadow 0.3s;
}
.info-box:hover {
transform: translateY(-5px);
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}
.info-box h2 {
font-size: 1.5rem;
margin-bottom: 10px;
}
.info-box p {
font-size: 1rem;
color: #666;
}
/* Dark Mode */
body.dark-mode {
background-color: #121212;
color: #ffffff;
}
body.dark-mode .info-box {
border-color: #333;
background-color: #1e1e1e;
}
body.dark-mode .info-box p {
color: #ccc;
}
body.dark-mode #keywordInput {
background-color: #333;
color: #fff;
border-color: #444;
}
body.dark-mode #searchButton {
background-color: #1e88e5;
}
body.dark-mode #searchButton:hover {
background-color: #1565c0;
}
</style>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Advanced Keyword Research Tool</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<h1>Advanced Keyword Research Tool</h1>
<div class="mode-toggle">
<label class="switch">
<input type="checkbox" id="modeToggle">
<span class="slider"></span>
</label>
<span id="modeLabel">Dark Mode</span>
</div>
<div class="tool-options">
<input type="text" id="keywordInput" placeholder="Enter a keyword...">
<button id="searchButton">Search</button>
</div>
<div class="info-boxes">
<div class="info-box" id="box1">
<h2>Option 1</h2>
<p>Click here for more info.</p>
</div>
<div class="info-box" id="box2">
<h2>Option 2</h2>
<p>Click here for more info.</p>
</div>
</div>
</div>
<script src="script.js"></script>
<script>
// Dark/Light Mode Toggle
const modeToggle = document.getElementById('modeToggle');
const modeLabel = document.getElementById('modeLabel');
const body = document.body;
modeToggle.addEventListener('change', () => {
body.classList.toggle('dark-mode');
modeLabel.textContent = body.classList.contains('dark-mode') ? 'Light Mode' : 'Dark Mode';
});
// Info Box Click Events
document.getElementById('box1').addEventListener('click', () => {
alert('More info about Option 1');
});
document.getElementById('box2').addEventListener('click', () => {
alert('More info about Option 2');
});
// Search Button Event
document.getElementById('searchButton').addEventListener('click', () => {
const keyword = document.getElementById('keywordInput').value;
if (keyword) {
alert(`Searching for: ${keyword}`);
} else {
alert('Please enter a keyword.');
}
});
</script>
</body>
</html>
Features:
Responsive Design: Works on all screen sizes.
Dark/Light Mode: Toggle between themes.
Info Boxes: Clickable boxes for additional information.
Keyword Search: Input field with a search button.
Modern UI: Clean and professional design.
You can further enhance this tool by integrating APIs for keyword research or adding more advanced features like keyword suggestions, analytics, etc. Let me know if you need additional functionality!
No comments:
Post a Comment