This is the design basic source for gizmix.org. You can use this code as a clean starting point to build new pages, customize layouts, or extend the UI.
<!DOCTYPE html>
<html>
<head>
<?php
header("Cache-Control: no-store, no-cache, must-revalidate, max-age=0");
header("Cache-Control: post-check=0, pre-check=0", false);
header("Pragma: no-cache");
header("Access-Control-Allow-Origin: *");
header("Access-Control-Allow-Methods: GET");
?>
<title>gizmix.org</title>
<link rel="icon" href="image/shihtzu_icon.png" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.5, minimum-scale=0.5">
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<meta name="google" content="notranslate">
<style>
html { scroll-behavior: smooth; }
body {
background: linear-gradient(90deg, rgb(233, 233, 233) 0%, rgb(211, 211, 211) 100%);
background-size: cover;
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
overflow-y: scroll;
margin: 0;
padding: 0;
}
/* Header styling */
.header {
position: fixed;
top: 0;
width: 100%;
padding: 1em;
background: linear-gradient(90deg, rgb(122, 135, 153) 0%, rgb(46, 69, 102) 33%, rgba(0, 0, 0, 1) 100%);
border-bottom: 1px solid #fff;
box-shadow: 1px 0 0.78em #363636;
max-height: 6.7em;
font-weight: bold;
text-align: right;
z-index: 999;
/* Smooth transition */
transition: all ease-in-out 0.3s;
}
.header.scrolled {
padding: 0.5em; /* Reduced padding for thin appearance */
max-height: 4em; /* Reduced height */
font-size: 0.9em; /* Slightly smaller font */
background: linear-gradient(90deg, rgb(80, 95, 112) 0%, rgb(30, 50, 75) 66%, rgba(0, 0, 0, 1) 100%);
}
#banR {
margin: -5.7em 0 0 0;
display: flex;
align-items: center;
font-size: 0.85em;
font-weight:bolder;
}
#banR.scrolled{
margin-top: -6.185em;
font-size: 0.66em;
}
#banR img {
width: 5.82em; /* Adjust size as needed */
height: auto;
margin: 1em 0.52em 0 0.36em; /* Spacing between logo and text */
}
#imgGizmo.scrolled {
margin-top: 1.1em;
width:4.36em
}
#subBanR{
margin:5.1em 0 0 0.2em;
font-size: 1.4em;
color: #aaffaa; /* Bright green accent for sub-banner */
text-shadow: 0 0 5px rgba(170, 255, 170, 0.7);
}
#sharpSymbol{
font-size: 1.11em;
}
a.plLink {
text-decoration:none;
color: #333;
}
/* Responsive styling */
@media (max-width: 768px) {
.header {
text-align: center;
padding: 0.8em;
}
.header.scrolled {
font-size: 0.8em;
}
#subBanR {
margin:-3.57em 0 0 -0.55em;
}
#subBanR.scrolled{
display:none;
}
}
#main {
position: relative;
width: 100%;
height: 100em;
text-align: center;
margin: 10em 0 0 0;
padding: 0 0 0 0;
}
#main-center {
position: relative;
margin: 0 auto;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
width: 98%;
max-width: 90em;
}
h1,h2 {
color: #fff;
font-weight:600;
font-size: 4.8em;
}
h1 {
text-align:left;
float:left;
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
line-height : 2.2em;
}
h2 {
text-align:right;
float:left;
font-size: 1.1em;
text-shadow: 1px 1px #333;
line-height : 2em;
padding: 0.7em;
}
h3 {
text-align:left;
}
@keyframes blink {
50% {
opacity: 0.0;
}
}
.blink {
animation: blink 1s step-start 0s infinite;
}
footer {
text-align: center;
font-size:0.9em;
margin: 4em 0 0 0;
padding: 1em 0 3.0em 0;
background: linear-gradient(90deg, rgb(122, 135, 153) 0%,rgb(46, 69, 102) 33%, rgba(0,0,0,1) 100%);
border-top: 1px solid #fff;
box-shadow: -1px 0 0.78em #363636;
color: #fff;
text-shadow: 1px 1px 1px #333;
z-index:777;
transition: all 0.67s ease;
opacity:1;
}
footer.scrolled {
height: 0;
opacity:0;
}
#bannerexample { width:100%; text-align: center; margin:3em 0 7em 0 }
#bannerexamplecenter { margin: 0 auto; }
</style>
</head>
<body>
<div class="header">
<div id="banR">
<img id="imgGizmo" src="image/shihtzu_icon.png" alt="Logo" onclick="document.location='./';" style="cursor:pointer"> <!-- Adjust path if needed -->
<div>
<h1 style="">
<span translate="no" style=" color: #fff">g<span style="text-decoration: underline; ">ızmıx</span></span>
</h1>
<h2 id="subBanR" class="toFadeOut">
<span translate="no" id="sharpSymbol" style="">#></span>
<span translate="no" id="statusDisplayName">Create Playlists From A Mix</span><span class="blink">█</span>
</h2>
</div>
<hr style="clear:both;display:none;"/>
</div>
</div>
<div id="main">
<div id="main-center">
<div id="bannerexample">
<div id="bannerexamplecenter">
<img id="imgGizmo" class="lessradius" style="border-radius:0.7em" src="image/gizmix2.png"/>
</div>
</div>
</div>
</div>
<footer id="footerId" class="">
Zero copyblah <span style="font-style:oblique;">★</span> <?php echo date("Y"); ?> gizmix.org. Zero rights reserved at all.
</footer>
</body>
</html>
<script>
const strings = ["Name It ✔", "Upload It ✔", "Narrow It Down ✔","Create Playlists From A Mix"];
const totalTimePerString = 1000; // Total time to write each string in milliseconds
const gapBetweenStrings = 2000; // Gap between displaying each string in milliseconds
const loopGap = 10000;
const spanElement = document.getElementById('statusDisplayName');
function typeString(string, duration) {
return new Promise((resolve) => {
let index = 0;
const interval = duration / string.length;
const typingInterval = setInterval(() => {
if (index < string.length) {
spanElement.textContent += string[index];
index++;
} else {
clearInterval(typingInterval);
resolve();
}
}, interval);
});
}
async function displayStrings(strings, totalTimePerString, gapBetweenStrings) {
for (const string of strings) {
spanElement.textContent = ""; // Clear the span for the next string
await typeString(string, totalTimePerString);
await new Promise(resolve => setTimeout(resolve, gapBetweenStrings));
}
}
async function startTypingEffect() {
while (true) {
await displayStrings(strings, totalTimePerString, gapBetweenStrings);
await new Promise(resolve => setTimeout(resolve, loopGap));
}
}
// Start the typing effect
async function displayStrings(strings, totalTimePerString, gapBetweenStrings) {
for (const string of strings) {
spanElement.textContent = ""; // Clear the span for the next string
await typeString(string, totalTimePerString);
await new Promise(resolve => setTimeout(resolve, gapBetweenStrings));
}
}
async function startTypingEffect() {
while (true) {
await displayStrings(strings, totalTimePerString, gapBetweenStrings);
await new Promise(resolve => setTimeout(resolve, loopGap));
}
}
startTypingEffect();
document.addEventListener("DOMContentLoaded", () => {
const elementsToScroll = [
document.querySelector(".header"),
document.getElementById("footerId"),
document.getElementById("subBanR"),
document.getElementById("imgGizmo"),
document.getElementById("banR")
];
window.addEventListener("scroll", () => {
const method = window.scrollY > 30 ? "add" : "remove";
elementsToScroll.forEach(el => el?.classList[method]("scrolled"));
if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight) {
document.getElementById("footerId").classList.remove("scrolled");
}
});
});
</script>