Forma de idea

2,431 Andev.web

Abrir en el editor Publica tu código

Recomendado

24 November 2025

GTA

22 August 2025

Comentario de marcador de posición de código HTML

22 November 2025

Formulario de inicio de sesión de Liquid Glass HTML CSS

HTML

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>Andev Web</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"><link rel='stylesheet' href='https://fonts.googleapis.com/css2?family=Montserrat&display=swap'><link rel="stylesheet" href="./style.css">

</head>
<body>
<form id="idea" class="idea-form" action="">
	<svg class="idea-form__icon" viewBox="0 0 32 32" width="32px" height="32px" aria-hidden="true">
		<g fill="currentcolor">
			<path d="M16,2A10,10,0,0,0,6,12a9.19,9.19,0,0,0,3.46,7.62c1,.93,1.54,1.46,1.54,2.38h2c0-1.84-1.11-2.87-2.19-3.86A7.2,7.2,0,0,1,8,12a8,8,0,0,1,16,0,7.2,7.2,0,0,1-2.82,6.14c-1.07,1-2.18,2-2.18,3.86h2c0-.92.53-1.45,1.54-2.39A9.18,9.18,0,0,0,26,12,10,10,0,0,0,16,2Z" />
			<rect x="11" y="24" width="10" height="2"/>
			<rect x="13" y="28" width="6" height="2"/>
		</g>
	</svg>
	<button class="idea-form__btn idea-form__btn--start" type="button" data-toggle>I have an idea</button>
	<div class="idea-form__fill"></div>
	<div class="idea-form__content">
		<label for="my-idea" class="idea-form__label">Idea</label>
		<textarea id="my-idea" class="idea-form__textarea" placeholder="My idea is…">

CSS

* {
  border: 0;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  --hue: 53;
  --bg: hsl(var(--hue),10%,90%);
  --fg: hsl(var(--hue),10%,10%);
  --primary: hsl(var(--hue),90%,50%);
  --trans-dur: 0.3s;
  --trans-timing1: cubic-bezier(0.65,0,0.35,1);
  --trans-timing2: cubic-bezier(0.65,0,0.35,1.35);
  font-size: calc(14px + (30 - 14) * (100vw - 280px) / (3840 - 280));
}

body,
button,
textarea {
  font: 1em/1.5 Montserrat, sans-serif;
}

body {
  background-color: var(--bg);
  color: var(--fg);
  display: flex;
  height: 100vh;
  transition: background-color var(--trans-dur), color var(--trans-dur);
}

.idea-form {
  background-color: black;
  color: white;
  margin: auto;
  overflow: hidden;
  position: relative;
  width: 16.5em;
  height: 4.5em;
  transition: background-color var(--trans-dur), color var(--trans-dur), height var(--trans-dur) var(--trans-timing2);
}
.idea-form, .idea-form__btn, .idea-form__content {
  border-radius: 1.5em;
}
.idea-form, .idea-form__btn {
  position: relative;
}
.idea-form__btn, .idea-form__textarea {
  outline: transparent;
  transition: background-color var(--trans-dur), box-shadow var(--trans-dur), opacity var(--trans-dur) var(--trans-timing1);
  -webkit-appearance: none;
  appearance: none;
  -webkit-tap-highlight-color: transparent;
}
.idea-form__btn:disabled, .idea-form__textarea:disabled {
  cursor: not-allowed;
  opacity: 0.3;
}
.idea-form__btn {
  background-color: black;
  box-shadow: 0 0 0 0.25em hsla(var(--hue), 90%, 30%, 0);
  color: white;
  cursor: pointer;
  display: flex;
  margin-inline-start: auto;
  padding: 0.5em 1em;
  z-index: 2;
}
.idea-form__btn--start {
  background-color: transparent;
  box-shadow: none;
  color: currentColor;
  display: flex;
  align-items: center;
  letter-spacing: 0.0625em;
  padding-inline-start: 5.25em;
  width: 100%;
  height: 4.5em;
  text-transform: uppercase;
  transition: opacity var(--trans-dur) var(--trans-timing1), visibility var(--trans-dur) steps(1, start);
}
.idea-form__btn:focus-visible {
  box-shadow: 0 0 0 0.25em hsla(var(--hue), 90%, 30%, 1);
}
.idea-form__content {
  opacity: 0;
  padding: 1.5em 1em 0.75em;
  padding-inline-start: 5.25em;
  position: absolute;
  top: 0;
  left: 0;
  visibility: hidden;
  transition: opacity var(--trans-dur) var(--trans-timing1), visibility var(--trans-dur) steps(1, end);
}
.idea-form__fill, .idea-form__icon, .idea-form__label {
  position: absolute;
}
.idea-form__fill {
  background-color: hsl(var(--hue), 90%, 50%);
  border-radius: 50%;
  top: 1.75em;
  left: 2em;
  width: 1em;
  height: 1em;
  transform: translateY(50%) scale(0);
  transition: transform var(--trans-dur) var(--trans-timing1);
}
[dir=rtl] .idea-form__fill {
  right: 2em;
  left: auto;
}
.idea-form__btn--start:focus-visible {
  box-shadow: none;
}
.idea-form__btn--start:focus-visible + .idea-form__fill, .idea-form__btn--start:hover + .idea-form__fill {
  transform: translateY(0) scale(1);
}
.idea-form__icon {
  color: currentColor;
  display: block;
  top: 0.75em;
  left: 1em;
  width: 3em;
  height: 3em;
  z-index: 1;
}
[dir=rtl] .idea-form__icon {
  right: 1em;
  left: auto;
}
.idea-form__label {
  overflow: hidden;
  width: 1px;
  height: 1px;
}
.idea-form__textarea {
  background-color: transparent;
  color: black;
  display: block;
  margin-bottom: 0.75em;
  resize: none;
  width: 100%;
  height: 3em;
}
.idea-form__textarea::placeholder {
  color: hsl(var(--hue), 10%, 50%);
}
.idea-form[data-expanded=true] {
  background-color: transparent;
  height: 8.5em;
  transition-timing-function: steps(1, end), ease, var(--trans-timing2);
}
.idea-form[data-expanded=true] .idea-form__btn--start {
  opacity: 0;
  pointer-events: none;
  transition-timing-function: var(--trans-timing1), steps(1, end);
  visibility: hidden;
}
.idea-form[data-expanded=true] .idea-form__content {
  opacity: 1;
  transition-timing-function: var(--trans-timing1), steps(1, start);
  visibility: visible;
}
.idea-form[data-expanded=true] .idea-form__fill {
  transform: translateY(0) scale(32);
}

/* Dark theme */
@media (prefers-color-scheme: dark) {
  :root {
    --bg: hsl(var(--hue),10%,10%);
    --fg: hsl(var(--hue),10%,90%);
  }

.idea-form {
    background-color: white;
    color: black;
  }
}

"use strict";
window.addEventListener("DOMContentLoaded", () => {
    const ideaForm = new IdeaForm("#idea");
});
class IdeaForm {
    /**
     * @param el CSS selector of the form
     */
    constructor(el) {
        var _a, _b, _c;
        /** Timeout function for submission */
        this.timeout = 0;
        this._idea = "";
        this._expanded = false;
        this._state = SubmitState.Default;
        this.form = document.querySelector(el);
        (_a = this.form) === null || _a === void 0 ? void 0 : _a.addEventListener("click", this.toggle.bind(this));
        (_b = this.form) === null || _b === void 0 ? void 0 : _b.addEventListener("input", this.ideaUpdate.bind(this));
        (_c = this.form) === null || _c === void 0 ? void 0 : _c.addEventListener("submit", this.ideaSubmit.bind(this));
        document.addEventListener("click", this.outsideToCollapse.bind(this));
        document.addEventListener("keydown", this.escToCollapse.bind(this));
    }
    get idea() {
        return this._idea;
    }
    set idea(value) {
        var _a;
        this._idea = value;
        const submitBtn = (_a = this.form) === null || _a === void 0 ? void 0 : _a.querySelector("[type=submit]");
        if (submitBtn) {
            submitBtn.disabled = value.length === 0;
        }
    }
    get expanded() {
        return this._expanded;
    }
    set expanded(value) {
        var _a;
        this._expanded = value;
        (_a = this.form) === null || _a === void 0 ? void 0 : _a.setAttribute("data-expanded", `${value}`);
    }
    get state() {
        return this._state;
    }
    set state(value) {
        var _a, _b;
        this._state = value;
        const textarea = (_a = this.form) === null || _a === void 0 ? void 0 : _a.querySelector("#my-idea");
        const submitBtn = (_b = this.form) === null || _b === void 0 ? void 0 : _b.querySelector("[type=submit]");
        if (textarea) {
            textarea.disabled = value !== SubmitState.Default;
        }
        if (submitBtn) {
            if (value === SubmitState.Sending) {
                submitBtn.textContent = Label.Sending;
                submitBtn.disabled = true;
            }
            else if (value === SubmitState.Done) {
                submitBtn.textContent = Label.Sent;
            }
            else {
                submitBtn.textContent = Label.Submit;
            }
        }
    }
    /**
     * Click outside the form to collapse.
     * @param e Click event
     * */
    outsideToCollapse(e) {
        if (this.state !== SubmitState.Default)
            return;
        let parent = e.target;
        while (parent !== null) {
            if (parent === this.form) {
                return;
            }
            parent = parent.parentElement;
        }
        this.expanded = false;
    }
    /**
     * Hide the form by pressing Esc.
     * @param e Keyboard event
     * */
    escToCollapse(e) {
        if (e.code === "Escape" && this.state === SubmitState.Default) {
            this.expanded = false;
        }
    }
    /**
     * Show or hide the form.
     * @param e Click event
     * */
    toggle(e) {
        var _a;
        const button = e.target;
        if (button.hasAttribute("data-toggle")) {
            this.expanded = !this.expanded;
            if (this.expanded) {
                const textarea = (_a = this.form) === null || _a === void 0 ? void 0 : _a.querySelector("#my-idea");
                textarea === null || textarea === void 0 ? void 0 : textarea.focus();
            }
        }
    }
    /**
     * Submit the idea content.
     * @param e Submit event
     * */
    async ideaSubmit(e) {
        e.preventDefault();
        if (this.state !== SubmitState.Default)
            return;
        const delaySending = 1000;
        const delayDone = 600;
        const delayReset = 300;
        this.state = SubmitState.Sending;
        return await new Promise(resolve => {
            // send
            clearTimeout(this.timeout);
            this.timeout = setTimeout(() => {
                resolve();
            }, delaySending);
        }).then(async () => {
            // submitted
            this.state = SubmitState.Done;
            return await new Promise(resolve => {
                clearTimeout(this.timeout);
                this.timeout = setTimeout(() => {
                    resolve();
                }, delayDone);
            });
        }).then(() => {
            // collapse and reset
            this.expanded = false;
            clearTimeout(this.timeout);
            this.timeout = setTimeout(() => {
                var _a;
                (_a = this.form) === null || _a === void 0 ? void 0 : _a.reset();
                this.idea = "";
                this.state = SubmitState.Default;
            }, delayReset);
        });
    }
    /**
     * Update the idea content internally.
     * @param e Input event
     * */
    ideaUpdate(e) {
        const textarea = e.target;
        this.idea = textarea.value;
    }
}
var Label;
(function (Label) {
    Label["Sending"] = "Sending\u2026";
    Label["Sent"] = "Sent";
    Label["Submit"] = "Submit";
})(Label || (Label = {}));
var SubmitState;
(function (SubmitState) {
    SubmitState[SubmitState["Default"] = 0] = "Default";
    SubmitState[SubmitState["Sending"] = 1] = "Sending";
    SubmitState[SubmitState["Done"] = 2] = "Done";
})(SubmitState || (SubmitState = {}));