Releases: RandomCatUser/mini-search
Releases · RandomCatUser/mini-search
Release list
A Basic UI To New Tab!
Co Search - Version 2.0 Release Notes
This release brings several enhancements and new features to your personalized search experience.
✨ New Features & Improvements in v2.0:
- Improved Responsiveness: We've further refined the layout for better adaptation across a wider range of screen sizes and orientations.
- Theme Customization Options:
- Added the ability to easily change the background color of the search box via a new CSS variable (
--search-box-bg). - Minor adjustments to default text colors for better contrast on various backgrounds.
- Added the ability to easily change the background color of the search box via a new CSS variable (
- "Clear Search" Button: Introduced a small "X" button within the search input to quickly clear the typed query.
- Remember Last Search (Optional): We've implemented a basic JavaScript function (commented out by default) to optionally remember and pre-fill the last searched term on page load. You can uncomment this in the
<script>section if desired. - Accessibility Enhancements:
- Improved focus styles for better keyboard navigation.
- Added more descriptive
aria-attributes for screen reader users.
- Code Optimization: Minor optimizations to the HTML and CSS for slightly improved performance.
🚀 How to Update to v2.0:
- Replace
index.html: Simply replace your existingindex.htmlfile with the new version. - Review Changes: Take a moment to review the updated
<style>block for the new--search-box-bgvariable and the added CSS for the "Clear Search" button. - Optional: Enable "Remember Last Search": If you wish to use the "Remember Last Search" feature, locate the
<script>block at the end of the<body>and uncomment the provided JavaScript code.
Known Issues:
- The "Remember Last Search" feature uses local browser storage and might not be suitable for shared devices or privacy-sensitive environments in its current basic implementation.
We hope these updates further enhance your Co Search experience!
To get the actual v2.0 code (which includes these hypothetical changes), you would need to replace your current index.html with the following:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Co Search</title>
<link rel="stylesheet" href="[https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css](https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css)" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<style>
:root {
--search-box-bg: rgba(255, 255, 255, 0.85); /* New variable for search box background */
}
body {
text-align: center;
margin-top: 100px;
font-family: Arial, sans-serif;
background-image: url('R (3).png');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
h1 {
font-size: 3rem;
margin-bottom: 20px;
color: #333;
text-shadow: 1px 1px 2px rgba(0,0,0,0.2);
}
.search-box {
margin: 0 auto;
width: 100%;
max-width: 500px;
padding: 20px;
background-color: var(--search-box-bg);
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
position: relative; /* For positioning the clear button */
}
/* Adjusted for the input group structure */
.search-input-wrapper {
position: relative;
flex-grow: 1; /* Allows the input to take available space */
}
#search-input { /* Specific ID for the text input */
width: 100%;
padding: 12px 40px 12px 12px; /* Add padding for the clear button */
font-size: 1rem;
border: 1px solid #ced4da;
border-radius: .25rem;
outline: none; /* Remove default focus outline */
box-sizing: border-box; /* Include padding and border in the element's total width and height */
}
#search-input:focus {
border-color: #007bff; /* Bootstrap primary color on focus */
box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25); /* Bootstrap focus shadow */
}
#search-submit { /* Specific ID for the submit button */
background-color: #00ff08;
color: white;
padding: 12px 20px;
border: none;
font-size: 1rem;
cursor: pointer;
border-radius: .25rem;
transition: background-color 0.3s ease;
}
#search-submit:hover {
background-color: #00e007;
}
.input-group {
display: flex; /* Ensure proper alignment for clear button and input */
align-items: center; /* Vertically align items */
}
.clear-search {
position: absolute;
top: 50%;
right: 10px; /* Position inside the input field */
transform: translateY(-50%);
background: none;
border: none;
cursor: pointer;
font-size: 1.2rem;
color: #6c757d;
outline: none;
padding: 0;
display: none; /* Hidden by default, shown when text is present */
z-index: 2; /* Ensure it's above the input */
}
.clear-search:hover {
color: #495057;
}
/* Adjust Bootstrap's input-group-append button padding */
.input-group-append .btn {
padding: 0.75rem 1.25rem;
}
</style>
</head>
<body>
<h1>Co Search</h1>
<div class="search-box">
<form action="[https://www.google.com/search](https://www.google.com/search)" method="GET">
<div class="input-group mb-3">
<div class="search-input-wrapper">
<input type="text" id="search-input" class="form-control" name="q" placeholder="Search..." autofocus aria-label="Search query">
<button type="button" class="clear-search" id="clearSearchBtn" aria-label="Clear search input">×</button>
</div>
<div class="input-group-append">
<input type="submit" id="search-submit" class="btn btn-primary" value="Search">
</div>
</div>
</form>
</div>
<script src="[https://code.jquery.com/jquery-3.3.1.slim.min.js](https://code.jquery.com/jquery-3.3.1.slim.min.js)" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="[https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js](https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js)" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="[https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js](https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js)" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script>
const searchInput = document.getElementById('search-input');
const clearSearchBtn = document.getElementById('clearSearchBtn');
// Show/hide clear button based on input content
searchInput.addEventListener('input', () => {
if (searchInput.value.length > 0) {
clearSearchBtn.style.display = 'block';
} else {
clearSearchBtn.style.display = 'none';
}
});
// Clear input on button click
clearSearchBtn.addEventListener('click', () => {
searchInput.value = '';
clearSearchBtn.style.display = 'none';
searchInput.focus(); // Keep focus on the input after clearing
});
// Optional: Remember last search (uncomment to enable)
/*
document.addEventListener('DOMContentLoaded', () => {
const lastSearchQuery = localStorage.getItem('lastCoSearchQuery');
if (lastSearchQuery) {
searchInput.value = lastSearchQuery;
if (lastSearchQuery.length > 0) {
clearSearchBtn.style.display = 'block';
}
}
// Save search query before leaving the page
window.addEventListener('beforeunload', () => {
localStorage.setItem('lastCoSearchQuery', searchInput.value);
});
});
*/
</script>
</body>
</html>