Name: Liveweave
Author: Liveweave

<div class="form-header">
      <div>
        <span class="eyebrow">PROJECT SETUP</span>
        <h1>Create your workspace</h1>
        <p>Configure your project and preferences.</p>
      </div>

<div class="progress">
        <span>3 of 4 sections</span>
        <div class="progress-bar">
          <div class="progress-value"></div>
        </div>
      </div>
    </div>

<div>
              <h2>General information</h2>
              <p>Basic details about your project.</p>
            </div>
          </div>

</button>

<div class="field">
              <label for="name">
                Project name
              </label>

<span class="hint">
                This will be visible to your team.
              </span>
            </div>

<div class="field">
              <label for="slug">
                Project URL
              </label>

<div class="input-group">
                <span>
                  liveweave.com/
                </span>

</div>

<div class="field">
            <label for="description">
              Description
            </label>

<div class="field-footer">
              <span>
                Briefly describe what you're building.
              </span>

</div>

</section>

<div>
              <h2>Appearance</h2>
              <p>Customize your workspace.</p>
            </div>
          </div>

</button>

<label>
              Interface theme
            </label>

<div class="theme-title">
                  Light
                </div>

</label>

</label>

<div class="theme-title">
                  System
                </div>

</label>

</div>

<div>
              <strong>
                Compact editor
              </strong>

<p>
                Reduce spacing to display more code.
              </p>
            </div>

</div>

<div>
              <strong>
                Show line numbers
              </strong>

<p>
                Display line numbers in the editor.
              </p>
            </div>

</div>

</section>

<div>
              <h2>Privacy & access</h2>
              <p>Choose who can access this project.</p>
            </div>
          </div>

</button>

<div>
                <strong>
                  Public
                </strong>

<p>
                  Anyone with the link can view your project.
                </p>
              </div>

</label>

<div>
                <strong>
                  Private
                </strong>

<p>
                  Only you and invited members can access it.
                </p>
              </div>

</label>

<p>
                  Accessible to members of your workspace.
                </p>
              </div>

</label>

</div>

</section>

<div>
              <h2>Advanced settings</h2>
              <p>Optional configuration.</p>
            </div>
          </div>

</button>

<div class="field">
              <label>
                Framework
              </label>

<select>
                <option>
                  Vanilla HTML / CSS / JS
                </option>

<option>
                  React
                </option>

<option>
                  Svelte
                </option>
              </select>
            </div>

<div class="field">
              <label>
                Region
              </label>

<select>
                <option>
                  United States
                </option>

<option>
                  Europe
                </option>

<option>
                  Asia Pacific
                </option>
              </select>
            </div>

</div>

<div>
              <strong>
                Automatic backups
              </strong>

<p>
                Periodically save project snapshots.
              </p>
            </div>

</div>

<div>
              <strong>
                Experimental features
              </strong>

<p>
                Enable features still under development.
              </p>
            </div>

</div>

</section>

<button
          type="button"
          class="button secondary"
        >
          Cancel
        </button>

<button
          type="submit"
          class="button primary"
        >
          Create project
        </button>

</div>

</form>

<div
      class="toast"
      id="toast"
    >
      ✓ Project created successfully
    </div>

</div>
</div>

* {
  box-sizing: border-box;
}

:root {
  --background: #fafafa;
  --card: #ffffff;
  --foreground: #18181b;
  --muted: #71717a;

--border: #e4e4e7;

--primary: #18181b;
  --primary-hover: #27272a;

--radius: 10px;
}

html,
body {
  margin: 0;
  min-height: 100%;

font-family:
    Inter,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;

color: var(--foreground);

background:
    radial-gradient(
      circle at 50% -20%,
      #ffffff,
      #f4f4f5 55%,
      #eeeeef
    );
}

button,
input,
textarea,
select {
  font: inherit;
}

.page {
  min-height: 100vh;

display: flex;
  justify-content: center;

padding: 55px 22px;
}

.form-shell {
  width: min(780px, 100%);
}

.form-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;

margin-bottom: 24px;
}

.eyebrow {
  font-size: 11px;
  font-weight: 700;

letter-spacing: 1.4px;

color: #a1a1aa;
}

.form-header h1 {
  margin: 6px 0 6px;

font-size: 30px;
  letter-spacing: -1px;
}

.form-header p {
  margin: 0;

color: var(--muted);
  font-size: 14px;
}

.progress {
  width: 150px;

color: var(--muted);
  font-size: 11px;

text-align: right;
}

.progress-bar {
  height: 4px;

margin-top: 8px;

overflow: hidden;

border-radius: 10px;

background: #e4e4e7;
}

.progress-value {
  width: 75%;
  height: 100%;

border-radius: inherit;

background: #18181b;
}

/* SECTIONS */

.form-section {
  margin-bottom: 12px;

overflow: hidden;

border: 1px solid var(--border);
  border-radius: 12px;

background: var(--card);

box-shadow:
    0 1px 2px rgba(0,0,0,.025);
}

.section-trigger {
  width: 100%;

display: flex;
  align-items: center;
  justify-content: space-between;

padding: 18px 20px;

border: 0;

color: inherit;
  background: transparent;

cursor: pointer;

text-align: left;
}

.section-trigger:hover {
  background: #fafafa;
}

.section-heading {
  display: flex;
  align-items: center;

gap: 13px;
}

.section-icon {
  width: 34px;
  height: 34px;

display: flex;
  align-items: center;
  justify-content: center;

border: 1px solid var(--border);
  border-radius: 8px;

background: #fafafa;

color: #71717a;

font-size: 10px;
  font-weight: 700;
}

.section-heading h2 {
  margin: 0 0 3px;

font-size: 14px;
  font-weight: 600;
}

.section-heading p {
  margin: 0;

font-size: 12px;
  color: var(--muted);
}

.chevron {
  font-size: 20px;
  color: var(--muted);

transition:
    transform .25s ease;
}

.form-section.open .chevron {
  transform:
    rotate(180deg);
}

/* COLLAPSIBLE */

.section-content {
  max-height: 0;

overflow: hidden;

opacity: 0;

padding:
    0 20px;

border-top:
    1px solid transparent;

transition:
    max-height .4s ease,
    opacity .25s ease,
    padding .35s ease,
    border-color .25s ease;
}

.form-section.open
.section-content {

max-height: 900px;

opacity: 1;

padding:
    22px 20px;

border-top-color:
    var(--border);
}

/* FORM */

.grid {
  display: grid;

gap: 18px;
}

.grid.two {
  grid-template-columns:
    repeat(2,1fr);
}

.field {
  margin-bottom: 19px;
}

.field label {
  display: block;

margin-bottom: 7px;

font-size: 12px;
  font-weight: 550;
}

input,
textarea,
select {
  width: 100%;

border:
    1px solid #d4d4d8;

border-radius:
    8px;

background:
    white;

color:
    #18181b;

outline: none;

transition:
    border-color .15s,
    box-shadow .15s;
}

input,
select {
  height: 40px;

padding:
    0 11px;
}

textarea {
  min-height: 100px;

padding: 11px;

resize: vertical;
}

input:focus,
textarea:focus,
select:focus {

border-color:
    #18181b;

box-shadow:
    0 0 0 3px
    rgba(24,24,27,.08);
}

input::placeholder,
textarea::placeholder {
  color: #a1a1aa;
}

.hint,
.field-footer {
  display: flex;
  justify-content: space-between;

margin-top: 6px;

color: var(--muted);

font-size: 10px;
}

/* INPUT GROUP */

.input-group {
  display: flex;

overflow: hidden;

height: 40px;

border:
    1px solid #d4d4d8;

border-radius:
    8px;

background: white;
}

.input-group:focus-within {

border-color:
    #18181b;

box-shadow:
    0 0 0 3px
    rgba(24,24,27,.08);
}

.input-group span {
  display: flex;
  align-items: center;

padding:
    0 10px;

border-right:
    1px solid var(--border);

background:
    #fafafa;

color:
    #71717a;

font-size: 11px;
}

.input-group input {
  border: 0;
  box-shadow: none;
}

.input-group input:focus {
  box-shadow: none;
}

/* THEME CARDS */

.theme-picker {
  display: grid;

grid-template-columns:
    repeat(3,1fr);

gap: 12px;
}

.theme-card {
  padding: 8px;

border:
    1px solid var(--border);

border-radius:
    9px;

cursor: pointer;

transition:
    border-color .2s,
    box-shadow .2s;
}

.theme-card input {
  display: none;
}

.theme-card.selected {
  border-color:
    #18181b;

box-shadow:
    0 0 0 1px
    #18181b;
}

.theme-preview {
  height: 75px;

padding: 12px;

border-radius:
    6px;

display: flex;
  flex-direction: column;

gap: 8px;
}

.theme-preview span {
  display: block;

height: 7px;

border-radius:
    10px;
}

.light-preview {
  background: #f4f4f5;
}

.light-preview span {
  background: #d4d4d8;
}

.dark-preview {
  background: #18181b;
}

.dark-preview span {
  background: #52525b;
}

.system-preview {
  background:
    linear-gradient(
      90deg,
      #f4f4f5 50%,
      #18181b 50%
    );
}

.system-preview span {
  background:
    rgba(120,120,130,.45);
}

.theme-title {
  margin: 8px 2px 2px;

font-size: 11px;
  font-weight: 550;
}

/* SETTING ROWS */

.setting-row {
  display: flex;
  align-items: center;
  justify-content: space-between;

padding:
    12px 0;
}

.setting-row strong {
  display: block;

margin-bottom: 3px;

font-size: 12px;
}

.setting-row p {
  margin: 0;

color: var(--muted);

font-size: 11px;
}

.divider {
  height: 1px;

margin:
    10px 0;

background:
    var(--border);
}

/* SWITCH */

.switch {
  position: relative;

display: inline-block;

width: 38px;
  height: 21px;

flex-shrink: 0;
}

.switch input {
  display: none;
}

.slider {
  position: absolute;

inset: 0;

border-radius:
    20px;

background:
    #d4d4d8;

cursor: pointer;

transition:
    .2s;
}

.slider::before {
  content: "";

position: absolute;

width: 17px;
  height: 17px;

left: 2px;
  top: 2px;

border-radius: 50%;

background:
    white;

box-shadow:
    0 1px 3px
    rgba(0,0,0,.2);

transition:
    .2s;
}

.switch input:checked
+ .slider {

background:
    #18181b;
}

.switch input:checked
+ .slider::before {

transform:
    translateX(17px);
}

/* RADIO CARDS */

.radio-list {
  display: grid;

gap: 9px;
}

.radio-card {
  display: flex;
  align-items: flex-start;

gap: 11px;

padding:
    14px;

border:
    1px solid var(--border);

border-radius:
    9px;

cursor: pointer;

transition:
    .2s;
}

.radio-card input {
  display: none;
}

.radio-card:hover {
  background:
    #fafafa;
}

.radio-card.selected {
  border-color:
    #18181b;

box-shadow:
    0 0 0 1px
    #18181b;
}

.radio-dot {
  width: 16px;
  height: 16px;

margin-top: 1px;

border:
    1px solid #a1a1aa;

border-radius: 50%;

flex-shrink: 0;
}

.radio-card.selected
.radio-dot {

border:
    5px solid
    #18181b;
}

.radio-card strong {
  display: block;

margin-bottom: 3px;

font-size: 12px;
}

.radio-card p {
  margin: 0;

color: var(--muted);

font-size: 11px;
}

/* BUTTONS */

.form-actions {
  display: flex;

justify-content:
    flex-end;

gap: 9px;

margin-top: 20px;
}

.button {
  height: 39px;

padding:
    0 16px;

border-radius:
    8px;

font-size: 12px;
  font-weight: 550;

cursor: pointer;

transition:
    .2s;
}

.secondary {
  border:
    1px solid var(--border);

background:
    white;

color:
    #18181b;
}

.secondary:hover {
  background:
    #f4f4f5;
}

.primary {
  border:
    1px solid
    #18181b;

background:
    #18181b;

color:
    white;
}

.primary:hover {
  background:
    #27272a;
}

/* TOAST */

.toast {
  position: fixed;

right: 25px;
  bottom: 25px;

padding:
    12px 16px;

border:
    1px solid var(--border);

border-radius:
    9px;

background:
    white;

box-shadow:
    0 8px 30px
    rgba(0,0,0,.12);

font-size: 12px;

opacity: 0;

transform:
    translateY(15px);

pointer-events: none;

transition:
    .3s;
}

.toast.show {
  opacity: 1;

transform:
    translateY(0);
}

/* MOBILE */

@media (
  max-width: 650px
) {

.form-header {
    align-items:
      flex-start;

flex-direction:
      column;

gap: 18px;
  }

.progress {
    width: 100%;
    text-align: left;
  }

.grid.two {
    grid-template-columns:
      1fr;
  }

.theme-picker {
    grid-template-columns:
      1fr;
  }

.theme-preview {
    height: 55px;
  }

}

/* COLLAPSIBLE SECTIONS */

const sections =
  document.querySelectorAll(
    ".form-section"
  );

sections.forEach(
  function(section) {

const trigger =
      section.querySelector(
        ".section-trigger"
      );

trigger.addEventListener(
      "click",
      function() {

section.classList.toggle(
          "open"
        );

}
    );

}
);

/* CHARACTER COUNT */

const description =
  document.getElementById(
    "description"
  );

const charCount =
  document.getElementById(
    "charCount"
  );

description.addEventListener(
  "input",
  function() {

if (
      description.value.length >
      200
    ) {

description.value =
        description.value.slice(
          0,
          200
        );

}

charCount.textContent =
      description.value.length +
      " / 200";

}
);

/* THEME SELECTION */

const themeCards =
  document.querySelectorAll(
    ".theme-card"
  );

themeCards.forEach(
  function(card) {

card.addEventListener(
      "click",
      function() {

themeCards.forEach(
          function(item) {

item.classList.remove(
              "selected"
            );

}
        );

card.classList.add(
          "selected"
        );

}
    );

}
);

/* PRIVACY SELECTION */

const radioCards =
  document.querySelectorAll(
    ".radio-card"
  );

radioCards.forEach(
  function(card) {

card.addEventListener(
      "click",
      function() {

radioCards.forEach(
          function(item) {

item.classList.remove(
              "selected"
            );

}
        );

card.classList.add(
          "selected"
        );

}
    );

}
);

/* FORM SUBMIT */

const form =
  document.getElementById(
    "projectForm"
  );

const toast =
  document.getElementById(
    "toast"
  );

form.addEventListener(
  "submit",
  function(event) {

event.preventDefault();

const projectName =
      document.getElementById(
        "name"
      );

if (
      !projectName.value.trim()
    ) {

projectName.focus();

projectName.style.borderColor =
        "#dc2626";

projectName.style.boxShadow =
        "0 0 0 3px rgba(220,38,38,.08)";

return;

}

projectName.style.borderColor =
      "";

projectName.style.boxShadow =
      "";

toast.classList.add(
      "show"
    );

setTimeout(
      function() {

toast.classList.remove(
          "show"
        );

},
      2600
    );

}
);

Liveweave: Generative AI Web Editor & HTML/CSS/JS Playground