Forma de idea

Abrir en el editor Publica tu código

Recomendado

12 August 2024

<!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;
  }
}

JS

"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 = {}));

Forma de idea

Recomendado

Perfil de información

Escalada de la torre circular

Página de espera.

HTML

CSS

JS

Recomendado

Perfil de información

Escalada de la torre circular

Página de espera.

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS