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>
<script>

document.addEventListener('DOMContentLoaded', () => {

	let previouslng = localStorage.getItem('userLanguage');

	const userLocale = Intl.DateTimeFormat().resolvedOptions().locale; // e.g., "es-ES"
    const userLang = userLocale.split('-')[0];                         // e.g., "es"
    const currentLang = document.documentElement.lang || 'en';

    // Define what is considered "English-related"
    const englishVariants = ['en', 'en-US', 'en-GB', 'en-CA', 'en-AU'];

    // If not English and different from current document <html lang>
    if (!englishVariants.includes(userLang) && userLang !== currentLang) {
		const languageNames = new Intl.DisplayNames([userLang], { type: 'language' });
		const suggestedLang = languageNames.of(userLang); // "Español", "Français", etc.

      
        document.documentElement.lang = userLang;
        
        // Optionally trigger a visual or functional change (your logic here)
        console.log(`Language switched to: ${userLang} (Prevent translation)`);
     
    }

	const elementIds = ["banR", "sharpSymbol", "statusDisplayName", "menubody", "playlistContent", "footerId"];

    // Loop through each ID in the array
    elementIds.forEach(function(id) {
        const element = document.getElementById(id);
        if (element) {
        // Assign the class and set the translate attribute to "no"
        element.classList.add('doNotTranslatePlease');
        element.setAttribute('translate', 'no');
        }
    });
			
});

</script>


	<head>
		<link rel="preconnect" href="https://accounts.google.com">
		<link rel="preconnect" href="https://www.gstatic.com">

		
		<title>gizmix.org</title>
		<link rel="icon" href="https://sonicsyncast.net/src_gizmix/image/shihtzu_icon.png" id="IdIconEl"/>
		<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>
		<script src="https://cdn.jsdelivr.net/npm/popper.js@1.14.7/dist/umd/popper.min.js"></script>
		<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/js/bootstrap.min.js"></script>
		<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
		
		<script src="https://apis.google.com/js/platform.js" async defer></script>		
		
		<meta name="google" content="notranslate">

		<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
		<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/css/bootstrap.min.css">
		<link rel="stylesheet" href="https://sonicsyncast.net/src_gizmix/css/startupop.css">
		<link rel="stylesheet" href="">
		

	</head>

<body>



<div id="justToFillWithPopup"></div>
<script>
	
function confirmAge(isAdult) {
                localStorage.setItem('age_checked', isAdult);
             
				$.ajax({
					url: 'phpfunctions/ageverification.php',
					type: 'POST',
					data: { isAdult: isAdult },
					success: function(response) {
						if (isAdult) {
							document.getElementById('popup').style.display = 'none';
							document.body.style.overflow = 'auto';
							
							
						} else {
							alert("You must be 14 or older to access this site.");
							window.location.href = "https://nesteddejavu.org";
						}
					},
					error: function() {
						alert("An error occurred. Please try again.");
					}
				});
			}

let age_check_passed = localStorage.getItem('age_checked'); 
if (!age_check_passed) { 
				document.getElementById("justToFillWithPopup").innerHTML = ` 
							<div id="popup">
									<div id="popup-content">
										<div style="width:100%; text-align:center;">
											<h3>Welcome to </h3>
										</div>
										<div style="width:100%; text-align:left;">
											Please confirm that you are at least 14 years old.
										</div>
										<div id="popupbuttons">
											<button class="confirm buttonone" onclick="confirmAge(true)" >I agree</button>
											<button class="deny buttonone"    onclick="confirmAge(false)">I'm younger than 14</button>
										</div>
									</div>
							</div>
							`;
 } else {
	$.ajax({
				url: 'phpfunctions/ageverificationstatic.php',
				success: function(response) {
						console.log('ssss: '+response);
					},
					error: function() {
						alert("An error occurred. Please try again.");
					}
				});
	document.body.style.overflow = 'auto';
 }
</script>


<div class="header">	

		<div id="banR"> 
			<img id="imgGizmo" src="" alt="Logo" onclick='document.location="index.php";' style="cursor:pointer">  <!-- Adjust path if needed -->
			<div>
				<h1 style="">
					<span translate="no" style=" color: #fff"></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 id="offAnim">
					
										<nav class="mainmenu">
						<button class="menu-toggle" onclick="toggleMenu()">
							<div></div>
							<div></div>
							<div></div>
						</button>
						<div id="menubody">
							<ul class="menu" style="padding: 0.9em; "><li><span style="width:20em"></span></li></ul>
"Outside" Base Template Source
