html explanations of code i listing event<br>
button
<!DOCTYPE html>
<html>
<head>
<title>test 253 white letters on black backgruond, red background when mouseover, greenback ground when selected
252 is a good manu.
</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {box-sizing: border-box}
/* Set height of body and the document to 100% */
body, html {
height: 100%;
margin: 0;
font-family: Arial;
}
/* Style tab links */
.tablink {
background-color:black;
color: white;
float: left;
border: none;
outline: none;
cursor: pointer;
padding: 14px 16px;
font-size: 17px;
width: 15%;
}
.round-button {
width: 80px; /* Set a fixed width */
height: 80px; /* Set a fixed height equal to the width for a perfect circle */
border-radius: 50%; /* This is the key to making it round */
background-color: #007bff; /* Example background color */
color: white; /* Text color */
border: none; /* Remove default button border */
font-size: 16px; /* Adjust font size as needed */
text-align: center; /* Center the text */
cursor: pointer; /* Indicate it's clickable */
display: inline-flex; /* Use flexbox for easy content centering */
justify-content: center; /* Center horizontally */
align-items: center; /* Center vertically */
transition: background-color 0.3s ease; /* Smooth transition on hover */
}
.tablink:hover {
background-color:red;
}
/* Style the tab content (and add height:100% for full page content) */
.tabcontent {
color:grey;
display: none;
padding: 80px 20px;
height: 100%;
}
<!-- these are the page below the tabs -->
#listevents {background-color:grey;color:black;}
#addanevent {background-color:white;color:black;}
#myaccount {background-color: white;color:black;}
#more {background-color:white;color:black;}
</style>
</head>
<body>
<button class="tablink";"round-button";" onClick="openPage('listevents', this, 'green')">list events</button>
<button class="tablink" ; onClick="openPage('search', this, 'green')" >search box to find events</button>
<button class="tablink" ; onClick="openPage('add', this, 'green')" >add</button>
<button class="tablink" ; onClick="openPage('account', this, 'green')">account</button>
<button class="tablink" ; onClick="openPage('more', this, 'green')">more</button>
<div id="listevents" class="tabcontent">
<h3>list events</h3>
search box instead of list events. </p>
text insidesearch box is italix,greyed "search for events"herewhich disappears when focus inside search box </p>
also below the search box is search help informationwhich disappears </p>
</p>
</div>
<div id="search" class="tabcontent">
<h3>add an event</h3>
</div>
<div id="add" class="tabcontent">
<h3>add an event</h3>
</div>
<div id="account" class="tabcontent">
<h3>add an account</h3>
</div>
<div id="more" class="tabcontent">
<h3>more</h3>
</div>
<script>
function openPage(pageName,elmnt,color) {
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tablink");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].style.backgroundColor = "";
}
document.getElementById(pageName).style.display = "block";
elmnt.style.backgroundColor = color;
}
// Get the element with id="defaultOpen" and click on it
document.getElementById("defaultOpen").click();
</script>
</body>
</html>