<![CDATA[
<!DOCTYPE html>
<html>
<head>
<title>Circles Grid</title>
<link rel="stylesheet" type="text/css" href="grid.css" />
</head>
<body>
<!-- Container for the grid -->
<div id="grid"></div>
<div id="body-container">
<div id="two-thirds">
<div id="two-thirds-content">
<div id="two-thirds-content-nav">navbar</div>
things go here
</div>
</div>
<div id="one-third">
<div id="one-third-content">
<div class="slide" id="slide1">
<h2 id="htmlContent"></h2>
</div>
<div class="slide" id="slide2">
<h2>go</h2>
</div>
<div class="slide" id="slide3">
<h2>here</h2>
</div>
</div>
</div>
</div>
<!-- JavaScript file for dynamic grid creation and animation -->
<script src="grid.js"></script>
<script src="slides.js"></script>
</body>
</html>
]]>
<![CDATA[
/* Resetting default margin and padding for the body */
body {
margin: 0;
padding: 0;
}
/* Styling for the grid container */
/* grid.css */
#grid {
display: flex;
flex-wrap: wrap;
max-width: 1100vh; /* Set the maximum width to the width of the viewable page */
max-height: 240px;
background-color: aqua;
margin: 0 auto; /* Center the grid container horizontally */
overflow: hidden; /* Hide content that overflows the grid */
}
/* Styling for each square */
.square {
width: 24px; /* You can adjust the width of each square */
height: 24px; /* You can adjust the height of each square */
background-color: #007bff;
margin: 0;
padding: 0;
box-sizing: border-box;
background-origin: border-box;
background-clip: border-box;
transition: background-color 0.5s;
border: none;
border-radius: 50%;
}
/* Styling for glowing effect */
.square.glowing {
background-color: #80bc02;
border: none;
}
#body-container{
background-color: beige;
width: 100%;
height: 100vh; /* You can adjust the height as needed */
display: flex;
flex-direction: row;
overflow: hidden; /* Prevent overflow */
}
#two-thirds{
display: flex;
background-color: cornflowerblue;
width: 66%;
height: 100%;
justify-content: center;
align-items: center;
}
.tab-navbar {
height: 30px;
width: 100%;
display: flex;
align-items: left;
background-color: lightseagreen;
flex-direction: row;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
overflow: hidden; /* Hide content that overflows the grid */
}
#one-third {
position: relative;
overflow: hidden;
width: 33.33%;
float: left;
}
#one-third-content {
position: absolute;
top: 50%;
left: 20%;
transform: translate(-50%, -50%);
text-align: center;
}
.slide {
display: flex;
justify-content: flex-start; /* Align content to the left */
align-items: center;
overflow: hidden; /* Prevent overflow */
white-space: nowrap; /* Prevent line breaks */
text-overflow: ellipsis; /* Show ellipsis (...) for overflowed content */
font-family: 'Consolas', monospace; /* Use Consolas font */
}
#two-thirds-content{
background-color: lightgrey;
width: 90%;
height: 90%;
margin: 50px;
border-radius: 10px;
}
#two-thirds-content-nav {
height: 60px;
width: 100%;
background-color: orange;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
display: flex;
justify-content: center;
align-items: center;
}
]]>
<![CDATA[
// grid.js
// Function to get a random integer within a specified range
function getRandomInt(max) {
return Math.floor(Math.random() * Math.floor(max));
}
// Get the grid container element
let grid = document.getElementById("grid");
// Calculate the number of squares that can fit in the grid
let numSquares = Math.floor(window.innerWidth / 24)
* Math.floor(window.innerHeight / 24);
// Create squares and add them to the grid
for (let i = 0; i < numSquares; i++) {
let square = document.createElement("div");
square.classList.add("square");
if (getRandomInt(2) === 0) {
square.classList.add("glowing");
}
grid.appendChild(square);
}
// Set interval to change the glowing squares every second
setInterval(function() {
let squares = document.getElementsByClassName("square");
let randomPositions = getRandomPositions(squares.length);
for (let i = 0; i < squares.length; i++) {
if (randomPositions.includes(i)) {
squares[i].classList.add("glowing");
} else {
squares[i].classList.remove("glowing");
}
}
}, 500);
// Function to get random positions for glowing effect
function getRandomPositions(length) {
const positions = [];
while (positions.length < length / 2) {
const randomPosition = Math.floor(Math.random() * length);
if (!positions.includes(randomPosition)) {
positions.push(randomPosition);
}
}
return positions;
}
]]>