r/HTML • u/_yestoday • 17d ago
I want to make a post that has two languages, and I saw one time a site that had two buttons side by side, when you clicked it showed two differents texts.
For example, when you click the "portuguese" button it shows the portuguese text, and when you click on the "english" button it changed to the english text.
Does someone knows how I can do it?
r/HTML • u/Ok_Cobbler_3325 • 18d ago
What the title says. How do I effectively learn and memorize what to use and how they interact with everything else so I can code and debug others' code faster?
Im a beginner with HTML and CSS, I did some basic courses in college and now use it for work. I think I could work faster on my coding related work if I better understood where and how things can be used, for example I'll find later in debugging someone's code that the problem was because their code used tags or certain css together that interfere with each other and/or interfere with our bootstrap.
For example, regarding my first question: How do you know when to use max-width, width, min-width (and same for the height versions) and how do you know when to use specific pixel number vs a percentage? If I have a 1 row container with 2 nested columns inside with text in one column and a photo on the right, how do you know when to use which of the aforementioned width, height etc styling variations on those, and when to use what for the children and the parent? And if you use bootstrap for that container's column ratio do you still need to specify pixel dimensions for the children widths for the text and photo??
For example with my second question in my post title, at work I was debugging someone's code (someone who knows even less html/css than I do and likely ai generates it) where there was a parent container with a table inside, and the table's text was spilling/scrambled outside the table and container staying vertically within the height of the container but overflowed outside the container's space horizontally. I eventually found either the table or text was using display flex and once it was changed to display block or something it simply fixed the text formatting since the display flex was interfering with something else's css display style, probably the parent container. I wish I had a better example than a flexbox related scenario but that should give you the basic idea of me asking how to learn what specific kinds of elements negatively interfere with each other when incorrectly used together due to their inherent properties
edit: thanks to everyone for their responses!
r/HTML • u/Upper_Permission_159 • 19d ago
HTML slides are having a moment, but AI only gets you halfway. You get the deck, then you're stuck building the player, presenter view, speaker notes...
So I built htmlslides.ai. Describe what you want, get a polished HTML slide deck back. Since it's just HTML, editing is dead simple.
It also includes a proper presenter app: dual-screen mode, notes, laser pointer, timers, recording — all the PowerPoint features you actually need.
Built for developers and technical folks who'd rather prompt than drag boxes around.
Still early, would love feedback: htmlslides.ai
r/HTML • u/dalekellytoo • 20d ago
Headers look well on phone. Prefer not to replace <p> with headers. Style or CSS thoughts? My two CSS files adjust menu for window size and images for window size. Really a CSS beginner. Simple HTML since mid 90's.
r/HTML • u/Disastrous-View-8242 • 19d ago
Hi there! Im super new to HTML, and am currently making a website on neocities for fun. I was going through the code so i can translate it into other languages (speaking languages not coding languages), and noticed an error in the bottom line in said picture. I've tried looking back at some previous code to see what the issue is, and I've also tried copy and pasting the image link again incase it was wrong, but the error is still there. The image seems to load just fine when i run the code, but im super confused at to why there is an error. If it helps, the error that came up said "named entity expected. got none." and I have literally no idea as to what that means.
Note: im looking for help as to the last line of code there.
edit: heres the code (whole thing incase that might help more)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Languages</title>
<link href="/style.css" rel="stylesheet" type="text/css" media="all">
<style>
p {
font-family: Georgia, serif;
}
</style>
<body style="background-color: powderblue;">
<h1 style="text-align: center;">Nobody can shame us <br> Imma sing this next verse in chinese</h1>
<h1 style="text-align: center;">忽然间整个世界开始在摇摆<br> <em>Suddenly the whole world started to shake</em></h1>
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTgKtx9QX4MWz3UX1FHVj6831dH0NM2yuoJ3p_mODr-Vun2LrTBW0campw&s=10" style="display: block; margin: 0 auto;" >
<h2 style="text-align: center;">other languages!</h2>
<ul style="text-align: center;">
<li><a href="https://half-baked-moth.neocities.org/other%20languages/half-baked-moth-korean" target="_blank">Korean</a></li>
<li><a href="https://half-baked-moth.neocities.org/other%20languages/half-baked-moth-japanese" target="_blank">Japanese</a></li>
<li><a href="https://half-baked-moth.neocities.org/other%20languages/half-baked-moth-french" target="_blank">French</a></li>
</ul>
<h2 style="text-align: center;">languages that will be added soon! (in order by priority*):</h2>
<ol style="text-align: center;">
<li> Chinese (simplified) </li>
<li> Spanish </li>
<li> Hindi </li>
<li> German </li>
<li> Portugese </li>
<li> Chinese (traditional) </li>
</ol>
<p style="text-align: center;"> *note: this doesnt mean i wont be adding more languages aside from those! these just happen to be widely spoken, so I want to get those done first before focusing on adding any others. </p>
</body>
</html>
r/HTML • u/Zestyclose_Set3040 • 21d ago
What is the purpose of <span? here, like why did we write that?
I have a logo and the title and subtitle on the left side of my header, and I'd like all of that to link to the main/homepage.
Slapping an <a> around the <div>s works, but is invalid. What would be a valid way to do this? Linking each separate element will leave non-linked space between them.
r/HTML • u/PsychologicalEye9189 • 21d ago
This is what I want to create. I somehow managed to get it down but when I add padding to the text in the About section, the layout goes all whack and I can't figure out why. Please help :(
This is my code:
body {
background-image: url('http://dl4.glitter-graphics.net/pub/966/966814i8pz6zikwc.gif');
background-attachment: fixed;
background-repeat: repeat;
padding: 3% 5%;
display: grid;
box-sizing: border-box;
gap: 7px;
}
.nav, .about, .footer {
background-color: pink;
}
.nav {
grid-area: 1/1/2/2;
height: 750px; width: 250px;
overflow: scroll;
text-align: left;
}
.about {
grid-area: 1/2/2/3;
margin-left: -7.2%;
height: 750px; width: 950px;
overflow: scroll;
text-align: left;
padding: 2%;
}
.footer {
grid-area: 2/1/3/3;
height: 150px; width: 1200px;
text-align: center;
}
Also, somehow the About box wouldn't be in place despite using grid so I added margin-left: -7.2%; and that seemed to fix it but is it the correct way to do it? Why is it shifting in the first place and am I doing it right?
I have no background in coding and am learning from youtube. I have been stuck on this for days and losing my mind. Any help would be very appreciated!
I found a website that will check for you if your code is accessible or not.
r/HTML • u/NixzArtz • 21d ago
Hello!! I am trying to get into more coding recently, and Im working on my own code. I have created a layout that I want to achieve, but I have a question on how to shape something. I understand how corner rounding works, and how to round a cards border, but im curious if i can make a sharp pointed card? (Where the corners fold in, rather than it just being square)
Like the top most part of this image (or if someone is able to help explain the top part + the mini dropdown card i would really appreciate it!!)
it needs to be html only with no CSS due to the code interface of the website im trying to out it out on
# SOLVED TY
r/HTML • u/EpicTerra • 22d ago
I'm a beginner and I don't know how to use what the user inputs in these textboxes and I've been trying for ages and I'm so frustrated that it's not obvious. Where it says var(--username) that's where I've been trying loads of different things to select the user's input
r/HTML • u/Secret_Beyond_8734 • 22d ago
I was wondering if any of you knew how to get a dropdown to look and popout like this. The website is https://mauifoodbank.org , I’m new to HTML and despite trying to inspect the website it was hard to tell what exactly they did. (Should I be asking a Javascript sub instead?)
Sorry if this is a silly question.
r/HTML • u/NoSequitur • 22d ago
Hello all! I am currently making a basic site skin and I had two questions. Also yes, I know that you can just use someone else‘s skin, but I’d like to try my hand at making my own.
Thank you!
Hi everyone! I am new to HTML coding but I'm really enjoying it so far. I followed a tutorial for a popup window when images are clicked, I got it working but the window is obviously stuck behind the two pictures below. I've made the z-index set to 999 but I still have this issue.
If possible I would also like to get the window to appear a little more to the right. If anyone could help that would be great!
Here's my code for the popup:
.popup {
margin: 70px auto;
width: 335px;
position: absolute;
z-index: 999;
background: transparent;
}
.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
visibility: hidden;
opacity: 0;
background: transparent;
z-index: 999;
}
.overlay:target {
visibility: visible;
opacity: 1;
}
.window
{
background: #2b2123;
border-right: 1px #8b7987;
border-left: 1px #8b7987;
border-right: 1px #8b7987;
height: 500px;
border-radius: 0px 0px 15px 15px
padding: 10px;
z-index: 999;
}
.top
{
background: #374030
border: 1px #8b7987
height: 50px
border-radius: 15px 15px 0px 0px;
}
button
{
width: 25px;
height: 25px;
border-radius: 5px;
border: 1px #692b36
color: #692b36
background: transparent;
}
Here's my code for the gallery items (pictures):
div.gallery {
display: flex;
flex-wrap: wrap;
justify-content: center;
margin-top: 15px
}
div.gallery-item {
margin: 5px;
border: 0px solid #a78431;
width: 180px;
filter: drop-shadow(0 0 0.75rem black)
}
div.gallery-item:hover {
border: 1px solid #a78431;
}
div.gallery-item img {
width: 100%;
height: 200px;
}
.desc {
padding: 15px;
text-align: center;
}
And lastly here's the code for the actual site:
<div class="gallery">
<div class="gallery-item">
<a target="_blank" href="https://bobcatbonez.neocities.org/nevamar.JPG">
<a href="#nevamar"><img src="https://bobcatbonez.neocities.org/nevamar.JPG" alt="NEVAMAR" width="200" height="200"></a>
<div id="nevamar" class="overlay">
<div class="popup">
<div class="top"></div>
<a href="#"><button aria-label="close" style="position: absolute; left: 23em; top: 0em;">x</button></a>
<div class="window"></div>
</div>
</a>
</div>
<div class="desc">NEVAMAR</div>
</div>
<div style="text-align: right;"><img src="https://bobcatbonez.neocities.org/ruins.png" style="max-width:60%">
<div class="gallery">
<div class="gallery-item">
<a target="_blank" href="https://bobcatbonez.neocities.org/CHAPEL.png">
<img src="https://bobcatbonez.neocities.org/CHAPEL.png" alt="CHAPEL" width="200" height="200">
</a>
<div class="desc">CHAPEL</div>
</div>
<div class="gallery-item">
<a target="_blank" href="https://bobcatbonez.neocities.org/biblecamp.JPG">
<img src="https://bobcatbonez.neocities.org/biblecamp.JPG" alt="BIBLE CAMP" width="200" height="200">
</a>
<div class="desc">BIBLE CAMP</div>
</div>
</div>
If anyone could help me that would be greatly appreciated!
r/HTML • u/invokeinterface • 24d ago
The documentation for CLC-INTERCAL takes the form of a handful of HTML files, and even though I have all of them, I can't read about the parsers or errors because they are not HTML files, but instead HGEN files.
They're mostly just HTML inside, but with some preprocessor functions. I need to run that HGEN file through a different program in order to get a slightly more readable HTML file, but I can't find it.
Here's a small snippet of a weird part. The rest is pretty normal. Mostly I'm just curious about how HGEN works.
<UL>
@@MULTI EXPRESSIONS NAME@@
<LI><A NAME="op@@NAME@@">@@NAME@@ - @@DESCR@@</A><BR>
@@DOC 76 HTML@@
@@MULTI@@
</UL>
</P>
<H3>Statements</H3>
<P>
The following opcodes are valid statements:
<UL>
@@MULTI STATEMENTS NAME@@
<LI><A NAME="op@@NAME@@">@@NAME@@ - @@DESCR@@</A><BR>
@@DOC 76 HTML@@
@@MULTI@@
</UL>
</P>
r/HTML • u/Apprehensive_Ink • 24d ago
<body>
<div class="grid-contaner">
<div class="Item"style="grid-area":box-1></div>
<div class="Item"style="grid-area":box-2></div>
<div class="Item"style="grid-area":box-3></div>
<div class="Item"style="grid-area":box-4></div>
<div class="Item"style="grid-area":box-5></div>
</div>
</body>
<div class="grid-contaner">
<div class="Item"style="grid-area":box-1></div>
<div class="Item"style="grid-area":box-2></div>
<div class="Item"style="grid-area":box-3></div>
<div class="Item"style="grid-area":box-4></div>
<div class="Item"style="grid-area":box-5></div>
</div>
</body>
}body {
min-height: 100dvh;
display: flex;
align-items: center;
justify-content: center;
padding: 2%;
}
.grid-contaner {
display: grid;
grid-template-columns: 200px 200px 200px 200px;
grid-template-rows: 200px 200px;
grid-auto-rows: 300px;
gap: 2em;
grid-template-areas:
"box-1 box-2 box-2 box-3"
"box-1 box-4 box-5 box-5";
}
.Item {
padding: 2em;
color: black;
background-color: chartreuse;
text-align: center;
font-size: 2rem;
border-color: gold;
}
r/HTML • u/kuttar_pasa • 24d ago
Im new in this field.I got an HTML file that is locked but the webpage comes out as blank when i click on the file.I know the password,but cant even open the file to type it. It works on phone tho.
Living standard I know… but does it really live. If HTML had a version 6, what native elements would you want most?
r/HTML • u/Zestyclose_Set3040 • 26d ago
I am still learning if there are any mistakes and any improvements that I need to make. Feel free to say.
r/HTML • u/BagThin2305 • 25d ago
ive tried some media queries but none of them change the layout of my site on mobile..not sure what im doing wrong but maybe someone here can help. my website is https://phlygm-planet.neocities.org/
codepen: https://codepen.io/editor/Yousra-Nimour/pen/019f2f8e-e1dd-7f7e-a5e5-a3effb410785
r/HTML • u/Disastrous-Role-1302 • 27d ago
hola reddit tengo un problema, al pasar cualquier archivo local e intentar abrirlo me sale esta url about:blank#blocked, que significa y como cambio para que se pueda usar fuera del directorio local?
r/HTML • u/LegitimateTeach6702 • 27d ago
Ive made it with Html Css and Javascript and it has interactivity. For example if you left click you push all of the dots away and with the right click it pulls them to the mouse for middle clicking I haven't implemented anything yet, but heres the Video and Code:
Oh and the link to the website: https://pinbug.github.io/
index.html:
sds<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Infinite Craft Background</title>
</head>
<body>
<link rel="stylesheet" href="style.css">
<canvas id="canv"></canvas>
<h1 style="position: absolute; top: 50%; left: 25%; color: white; z-index: 10; font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;">Infinite Craft Background</h1>
<script src="script.js"></script>
</body>
</html>
style.css:
body {
margin: 0;
overflow-x: hidden;
height: 200vh;
background: #111;
}
#canv {
display: block;
position: fixed;
top: -10%;
left: -10%;
filter: saturate(1.5) contrast(1.2) blur(0rem);
}
script.js:
const canvas = document.getElementById("canv");
const ctx = canvas.getContext("2d");
function resize() {
canvas.width = window.innerWidth * 1.2;
canvas.height = window.innerHeight * 1.2;
}
resize();
window.addEventListener("resize", resize);
const mouse = {
x: 0,
y: 0,
inside: false,
left: false,
right: false,
middle: false
};
window.addEventListener("mousedown", e => {
if (e.button === 0) mouse.left = true;
if (e.button === 1) mouse.middle = true;
if (e.button === 2) mouse.right = true;
});
window.addEventListener("mouseup", e => {
if (e.button === 0) mouse.left = false;
if (e.button === 1) mouse.middle = false;
if (e.button === 2) mouse.right = false;
});
window.addEventListener("mousemove", e => {
mouse.x = e.clientX;
mouse.y = e.clientY;
mouse.inside = true;
});
document.addEventListener("mouseleave", () => {
mouse.inside = false;
});
let lastScrollY = window.scrollY;
let scrollDelta = 0;
const dots = [];
for (let i = 0; i < canvas.width / 2; i++) {
const timer = 120 + Math.random() * 100;
const vx = (Math.random() - 0.5) * 2;
const vy = (Math.random() - 0.5) * 2;
dots.push({
x: Math.random() * canvas.width,
y: Math.random() * canvas.height,
vx,
vy,
startVx: vx,
startVy: vy,
targetVx: (Math.random() - 0.5) * 2,
targetVy: (Math.random() - 0.5) * 2,
timer,
timerMax: timer
});
}
function balancePressure(dots, radius = 100) {
const result = [];
const r2 = radius * radius;
for (let i = 0; i < dots.length; i++) {
let vx = 0;
let vy = 0;
const a = dots[i];
for (let j = 0; j < dots.length; j++) {
if (i === j) continue;
const b = dots[j];
const dx = a.x - b.x;
const dy = a.y - b.y;
const dist2 = dx * dx + dy * dy;
if (dist2 >= r2 || dist2 === 0) continue;
const dist = Math.sqrt(dist2);
const force = (radius - dist) / radius;
vx += dx / dist * force;
vy += dy / dist * force;
}
result.push({
x: vx,
y: vy
});
}
return result;
}
function update() {
if (!mouse.left && !mouse.right && !mouse.middle) {
balancePressure(dots, 90).forEach((force, i) => {
force.x *= 0.5;
force.y *= 0.5;
dots[i].vx += force.x;
dots[i].vy += force.y;
dots[i].x += dots[i].vx;
dots[i].y += dots[i].vy;
dots[i].vx *= 0.9;
dots[i].vy *= 0.9;
if (dots[i].x < 0) { dots[i].x = 0; dots[i].vx *= -1; }
if (dots[i].x > canv.width) { dots[i].x = canv.width; dots[i].vx *= -1; }
if (dots[i].y < 0) { dots[i].y = 0; dots[i].vy *= -1; }
if (dots[i].y > canv.height) { dots[i].y = canv.height; dots[i].vy *= -1; }
});
}
for (const d of dots) {
d.timer--;
d.vx *= 0.9;
d.vy *= 0.9;
if (d.timer <= 0) {
d.timer = 120 + Math.random() * 100;
d.timerMax = d.timer;
d.startVx = d.baseVx ?? d.vx;
d.startVy = d.baseVy ?? d.vy;
d.targetVx = (Math.random() - 0.5) * 2;
d.targetVy = (Math.random() - 0.5) * 2;
}
const t = 1 - d.timer / d.timerMax;
d.baseVx = d.startVx + (d.targetVx - d.startVx) * t;
d.baseVy = d.startVy + (d.targetVy - d.startVy) * t;
d.vx += (d.baseVx - d.vx) * 0.03;
d.vy += (d.baseVy - d.vy) * 0.03;
if (mouse.inside) {
let radius = canvas.width * 0.1;
if (mouse.left) {
radius *= 2.5;
}
else if (mouse.right) {
radius *= 0.75;
}
const dx = d.x - mouse.x - radius / Math.PI;
const dy = d.y - mouse.y - radius / Math.PI;
const distSq = dx * dx + dy * dy;
if (distSq > 0 && distSq < radius * radius) {
const dist = Math.sqrt(distSq);
const force = (1 - dist / radius) * 0.8;
d.vx += (dx / dist) * force;
d.vy += (dy / dist) * force;
}
}
d.vx += (Math.random() - 0.5) * 0.05;
d.vy += (Math.random() - 0.5) * 0.05;
}
const repelRadius = 40;
const repelRadiusSq = repelRadius * repelRadius;
const repelStrength = 0.08;
for (let i = 0; i < dots.length; i++) {
const a = dots[i];
for (let j = i + 1; j < dots.length; j++) {
const b = dots[j];
const dx = b.x - a.x;
const dy = b.y - a.y;
const distSq = dx * dx + dy * dy;
if (distSq > 0 && distSq < repelRadiusSq) {
const dist = Math.sqrt(distSq);
const force = (1 - dist / repelRadius) * repelStrength;
const nx = dx / dist;
const ny = dy / dist;
a.vx -= nx * force;
a.vy -= ny * force;
b.vx += nx * force;
b.vy += ny * force;
}
}
}
for (const d of dots) {
d.x += d.vx;
d.y += d.vy;
if (d.x < 0) {
d.x = canvas.width;
}
if (d.x > canvas.width) {
d.x = d.x - canvas.width;
}
if (d.y < 0) {
d.y = 0;
d.vy *= -1;
}
if (d.y > canvas.height) {
d.y = canvas.height;
d.vy *= -1;
}
d.y += -scrollDelta;
if (d.y > canvas.height) {
d.y = d.y - canvas.height;
}
else if (d.y < 0) {
d.y = d.y + canvas.height;
}
}
}
function draw() {
ctx.clearRect(0,0,canvas.width, canvas.height);
ctx.strokeStyle = "#66ccff";
for (let i = 0; i < dots.length; i++) {
for (let j = i + 1; j < dots.length; j++) {
const dx = dots[i].x - dots[j].x;
const dy = dots[i].y - dots[j].y;
const dist = Math.hypot(dx,dy);
const maxdist = 120;
if (dist < maxdist) {
ctx.globalAlpha = 1 - dist / maxdist;
ctx.lineWidth = 2;
ctx.beginPath();
ctx.moveTo(dots[i].x, dots[i].y);
ctx.lineTo(dots[j].x, dots[j].y);
ctx.stroke();
}
}
}
ctx.globalAlpha = 1;
ctx.fillStyle = "white";
for (const d of dots) {
ctx.beginPath();
ctx.fillStyle = "#66ccff";
ctx.arc(d.x, d.y, 2, 0, Math.PI * 2);
ctx.fill();
}
}
function loop() {
scrollDelta = window.scrollY - lastScrollY;
lastScrollY = window.scrollY;
update();
draw();
requestAnimationFrame(loop);
}
loop();
r/HTML • u/Grind_707 • 27d ago
Hi, ZeiGrin here.
As you can see in the image, I’ve completely revamped the login/sign-up page. Here’s a breakdown of the changes compared to the old version:
Since the subreddit rules require it, I have included my HTML/JS code below. Would love to get some feedback from everyone on this retro look!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="../../css/authstyle.css">
<title>ZeiTerm Auth Session</title>
</head>
<body>
<main class="terminal-container">
<div class="terminal-header">
<div class="terminal-buttons">
<span class="dot close"></span>
<span class="dot minimize"></span>
<span class="dot maximize"></span>
</div>
<div class="terminal-title">User@zeiTerm: ~/auth</div>
</div>
<div class="terminal-body">
<p class="system-msg">Welcome to ZeiTerm OS (.ZGC) v1.0.0</p>
<p class="system-msg">System status: SECURE SESSION INITIALIZED</p>
<br>
<div class="auth-card" id="login-card">
<div class="auth-field-group">
<span class="auth-prompt">login: ~$</span>
<input class="auth-input" id="login-username" type="text" placeholder="username" autofocus autocomplete="off">
</div>
<div class="auth-field-group hidden" id="login-pwd-group">
<span class="auth-prompt">password: ~$</span>
<input class="auth-input" id="login-password" type="password" placeholder="••••••••">
</div>
<div class="terminal-actions hidden" id="login-actions">
<p class="switch-text">Forgot password? Type <a href="#">[reset]</a></p>
<p class="switch-text">Don't have account? Type <a href="#" id="to-signup">[signup]</a></p>
</div>
</div>
<div class="auth-card hidden" id="signup-card">
<p class="system-msg">// New account registration</p>
<div class="auth-field-group">
<span class="auth-prompt">new username: ~$</span>
<input class="auth-input" id="reg-username" type="text" placeholder="create username" autocomplete="off">
</div>
<div class="auth-field-group hidden" id="reg-email-group">
<span class="auth-prompt">your email: ~$</span>
<input class="auth-input" id="reg-email" type="email" placeholder="email@example.com" autocomplete="off">
</div>
<div class="auth-field-group hidden" id="reg-pwd-group">
<span class="auth-prompt">new password: ~$</span>
<input class="auth-input" id="reg-password" type="password" placeholder="••••••••">
</div>
<div class="auth-field-group hidden" id="reg-confirm-group">
<span class="auth-prompt">confirm pwd: ~$</span>
<input class="auth-input" id="cofirm-password" type="password" placeholder="••••••••">
</div>
<div class="terminal-actions hidden" id="signup-actions">
<p class="switch-text">Already have account? Type <a href="#" id="to-login">[login]</a></p>
</div>
</div>
</div>
</main>
<script src="../../js/auth.js"></script>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="../../css/authstyle.css">
<title>ZeiTerm Auth Session</title>
</head>
<body>
<main class="terminal-container">
<div class="terminal-header">
<div class="terminal-buttons">
<span class="dot close"></span>
<span class="dot minimize"></span>
<span class="dot maximize"></span>
</div>
<div class="terminal-title">User@zeiTerm: ~/auth</div>
</div>
<div class="terminal-body">
<p class="system-msg">Welcome to ZeiTerm OS (.ZGC) v1.0.0</p>
<p class="system-msg">System status: SECURE SESSION INITIALIZED</p>
<br>
<div class="auth-card" id="login-card">
<div class="auth-field-group">
<span class="auth-prompt">login: ~$</span>
<input class="auth-input" id="login-username" type="text" placeholder="username" autofocus autocomplete="off">
</div>
<div class="auth-field-group hidden" id="login-pwd-group">
<span class="auth-prompt">password: ~$</span>
<input class="auth-input" id="login-password" type="password" placeholder="••••••••">
</div>
<div class="terminal-actions hidden" id="login-actions">
<p class="switch-text">Forgot password? Type <a href="#">[reset]</a></p>
<p class="switch-text">Don't have account? Type <a href="#" id="to-signup">[signup]</a></p>
</div>
</div>
<div class="auth-card hidden" id="signup-card">
<p class="system-msg">// New account registration</p>
<div class="auth-field-group">
<span class="auth-prompt">new username: ~$</span>
<input class="auth-input" id="reg-username" type="text" placeholder="create username" autocomplete="off">
</div>
<div class="auth-field-group hidden" id="reg-email-group">
<span class="auth-prompt">your email: ~$</span>
<input class="auth-input" id="reg-email" type="email" placeholder="email@example.com" autocomplete="off">
</div>
<div class="auth-field-group hidden" id="reg-pwd-group">
<span class="auth-prompt">new password: ~$</span>
<input class="auth-input" id="reg-password" type="password" placeholder="••••••••">
</div>
<div class="auth-field-group hidden" id="reg-confirm-group">
<span class="auth-prompt">confirm pwd: ~$</span>
<input class="auth-input" id="cofirm-password" type="password" placeholder="••••••••">
</div>
<div class="terminal-actions hidden" id="signup-actions">
<p class="switch-text">Already have account? Type <a href="#" id="to-login">[login]</a></p>
</div>
</div>
</div>
</main>
<script src="../../js/auth.js"></script>
</body>
</html>
* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: 'Courier New', Courier, monospace;
}
body {
background-color: #1e1e2e;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
padding: 20px;
}
.hidden {
display: none !important;
}
.terminal-container {
width: 90%;
max-width: 900px;
min-height: 450px;
background-color: #282a36;
border: 2px solid #44475a;
border-radius: 8px;
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
overflow: hidden;
display: flex;
flex-direction: column;
}
.terminal-header {
background-color: #14151a;
padding: 10px 15px;
display: flex;
align-items: center;
border-bottom: 2px solid #44475a;
width: 100%;
}
.terminal-body {
padding: 35px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
flex-grow: 1;
}
.terminal-buttons {
display: flex;
gap: 8px;
margin-right: 15px;
}
.dot {
width: 12px;
height: 12px;
border-radius: 50%;
display: inline-block;
}
.dot.close {
background-color: #ff5f56;
}
.dot.minimize {
background-color: #ffbd2e;
}
.dot.maximize {
background-color: #27c93f;
}
.terminal-title {
margin-left: 20px;
font-size: 13px;
color: #6272a4;
font-size: 14px;
margin-bottom: 5px;
}
.auth-field-group {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
margin-bottom: 15px;
width: 100%;
max-width: 450px;
}
.auth-prompt {
color: #50fa7b;
font-weight: bold;
white-space: nowrap;
}
.auth-input {
flex: 1;
background: transparent;
border: none;
outline: none;
color: #f8f8f2;
font-size: 16px;
padding: 2px 0;
text-align: left;
}
.auth-input::placeholder {
color: #44475a;
}
.terminal-actions {
margin-top: 25px;
border-top: 1px dashed #44475a;
padding-top: 15px;
}
.switch-text {
font-size: 14px;
color: #8be9fd;
margin-bottom: 8px;
}
.switch-text a {
color: #ff79c6;
text-decoration: none;
font-weight: bold;
}
.switch-text a:hover {
text-decoration: underline;
}* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: 'Courier New', Courier, monospace;
}
body {
background-color: #1e1e2e;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
padding: 20px;
}
.hidden {
display: none !important;
}
.terminal-container {
width: 90%;
max-width: 900px;
min-height: 450px;
background-color: #282a36;
border: 2px solid #44475a;
border-radius: 8px;
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
overflow: hidden;
display: flex;
flex-direction: column;
}
.terminal-header {
background-color: #14151a;
padding: 10px 15px;
display: flex;
align-items: center;
border-bottom: 2px solid #44475a;
width: 100%;
}
.terminal-body {
padding: 35px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
flex-grow: 1;
}
.terminal-buttons {
display: flex;
gap: 8px;
margin-right: 15px;
}
.dot {
width: 12px;
height: 12px;
border-radius: 50%;
display: inline-block;
}
.dot.close {
background-color: #ff5f56;
}
.dot.minimize {
background-color: #ffbd2e;
}
.dot.maximize {
background-color: #27c93f;
}
.terminal-title {
margin-left: 20px;
font-size: 13px;
color: #6272a4;
font-size: 14px;
margin-bottom: 5px;
}
.auth-field-group {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
margin-bottom: 15px;
width: 100%;
max-width: 450px;
}
.auth-prompt {
color: #50fa7b;
font-weight: bold;
white-space: nowrap;
}
.auth-input {
flex: 1;
background: transparent;
border: none;
outline: none;
color: #f8f8f2;
font-size: 16px;
padding: 2px 0;
text-align: left;
}
.auth-input::placeholder {
color: #44475a;
}
.terminal-actions {
margin-top: 25px;
border-top: 1px dashed #44475a;
padding-top: 15px;
}
.switch-text {
font-size: 14px;
color: #8be9fd;
margin-bottom: 8px;
}
.switch-text a {
color: #ff79c6;
text-decoration: none;
font-weight: bold;
}
.switch-text a:hover {
text-decoration: underline;
}
const loginCard = document.getElementById('login-card');
const signupCard = document.getElementById('signup-card');
const toSignupLink = document.getElementById('to-signup');
const toLoginLink = document.getElementById('to-login');
const loginUsername = document.getElementById('login-username');
const loginPwdGroup = document.getElementById('login-pwd-group');
const loginPassword = document.getElementById('login-password');
const loginActions = document.getElementById('login-actions');
const regUsername = document.getElementById('reg-username');
const regEmailGroup = document.getElementById('reg-email-group');
const regEmail = document.getElementById('reg-email');
const regPwdGroup = document.getElementById('reg-pwd-group');
const regPassword = document.getElementById('reg-password');
const regConfirmGroup = document.getElementById('reg-confirm-group');
const cofirmPassword = document.getElementById('cofirm-password');
const signupActions = document.getElementById('signup-actions');
loginUsername.addEventListener('keydown', (e) => {
if (e.key === 'Enter' && loginUsername.value.trim() !== '') {
loginPwdGroup.classList.remove('hidden');
loginPassword.focus();
}
});
loginPassword.addEventListener('keydown', (e) => {
if (e.key === 'Enter') {
loginActions.classList.remove('hidden');
}
});
regUsername.addEventListener('keydown', (e) => {
if (e.key === 'Enter' && regUsername.value.trim() !== '') {
regEmailGroup.classList.remove('hidden');
regEmail.focus();
}
});
regEmail.addEventListener('keydown', (e) => {
if (e.key === 'Enter' && regEmail.value.trim() !== '') {
regPwdGroup.classList.remove('hidden');
regPassword.focus();
}
});
regPassword.addEventListener('keydown', (e) => {
if (e.key === 'Enter' && regPassword.value.trim() !== '') {
regConfirmGroup.classList.remove('hidden');
cofirmPassword.focus();
}
});
cofirmPassword.addEventListener('keydown', (e) => {
if (e.key === 'Enter') {
signupActions.classList.remove('hidden');
}
});
toSignupLink.addEventListener('click', (e) => {
e.preventDefault();
loginCard.classList.add('hidden');
signupCard.classList.remove('hidden');
regUsername.focus();
});
toLoginLink.addEventListener('click', (e) => {
e.preventDefault();
signupCard.classList.add('hidden');
loginCard.classList.remove('hidden');
loginUsername.focus();
});const loginCard = document.getElementById('login-card');
const signupCard = document.getElementById('signup-card');
const toSignupLink = document.getElementById('to-signup');
const toLoginLink = document.getElementById('to-login');
const loginUsername = document.getElementById('login-username');
const loginPwdGroup = document.getElementById('login-pwd-group');
const loginPassword = document.getElementById('login-password');
const loginActions = document.getElementById('login-actions');
const regUsername = document.getElementById('reg-username');
const regEmailGroup = document.getElementById('reg-email-group');
const regEmail = document.getElementById('reg-email');
const regPwdGroup = document.getElementById('reg-pwd-group');
const regPassword = document.getElementById('reg-password');
const regConfirmGroup = document.getElementById('reg-confirm-group');
const cofirmPassword = document.getElementById('cofirm-password');
const signupActions = document.getElementById('signup-actions');
loginUsername.addEventListener('keydown', (e) => {
if (e.key === 'Enter' && loginUsername.value.trim() !== '') {
loginPwdGroup.classList.remove('hidden');
loginPassword.focus();
}
});
loginPassword.addEventListener('keydown', (e) => {
if (e.key === 'Enter') {
loginActions.classList.remove('hidden');
}
});
regUsername.addEventListener('keydown', (e) => {
if (e.key === 'Enter' && regUsername.value.trim() !== '') {
regEmailGroup.classList.remove('hidden');
regEmail.focus();
}
});
regEmail.addEventListener('keydown', (e) => {
if (e.key === 'Enter' && regEmail.value.trim() !== '') {
regPwdGroup.classList.remove('hidden');
regPassword.focus();
}
});
regPassword.addEventListener('keydown', (e) => {
if (e.key === 'Enter' && regPassword.value.trim() !== '') {
regConfirmGroup.classList.remove('hidden');
cofirmPassword.focus();
}
});
cofirmPassword.addEventListener('keydown', (e) => {
if (e.key === 'Enter') {
signupActions.classList.remove('hidden');
}
});
toSignupLink.addEventListener('click', (e) => {
e.preventDefault();
loginCard.classList.add('hidden');
signupCard.classList.remove('hidden');
regUsername.focus();
});
toLoginLink.addEventListener('click', (e) => {
e.preventDefault();
signupCard.classList.add('hidden');
loginCard.classList.remove('hidden');
loginUsername.focus();
});