This is how it's supposed to look and functions perfectly fine in my browser, but I've have had to start over and rebuild it from scratch for Android Webview since it doesn't like a lot of my code. I got the JavaScript to work inline, but now I'm trying to creating a loading splash screen that gives time for each JavaScript file to load but the HTML isn't even loading nor the JavaScript... I'm at a loss and have a really cool app going. It's basically CaDNAno for Android... At least I hope it is. I'd post the JS but the last time I did that my question got flagged. Just ask if you need it. Even if I remove my JS my elements still don't render...
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>DNA Origami Touch Editor</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@500;700&display=swap');
html, body {
margin: 0;
padding: 0;
background-color: #0f0f1a;
font-family: 'Orbitron', sans-serif;
color: #00ffff;
overflow: hidden;
height: 100%;
}
#splash {
position: absolute;
width: 100%;
height: 100%;
background: #0f0f1a;
display: flex;
align-items: center;
justify-content: center;
z-index: 9999;
font-size: 24px;
font-weight: bold;
}
canvas, #ui, #toggleSeqView, #toggle3D, #exportOXDNA {
visibility: hidden;
}
</style>
</head>
<body>
<div id="splash">🧬 Loading DNA Editor...</div>
<!-- All UI and Canvas like before -->
<canvas id="dnaCanvas"></canvas>
<div id="ui">...</div>
<button id="toggleSeqView">...</button>
<button id="toggle3D">...</button>
<button id="exportOXDNA">...</button>
<!-- Stage scripts using timeout and onload -->
<script>
// Super basic async loader with delay
setTimeout(() => {
const script = document.createElement('script');
script.src = 'ATCG_GRID.js'; // make sure path is correct
script.onload = () => console.log("✅ ATCG_GRID.js loaded successfully.");
script.onerror = () => console.error("❌ Failed to load ATCG_GRID.js.");
document.body.appendChild(script);
}, 750); // wait a bit for DOM/UI to settle
</script>
</body>
</html>
Basically reformatting my code several times. I've tried inline, external, asking ai, I've tried everything
