prompt

by bsorrentino

HTML

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AI Prompt Sample</title>
  </head>

  <body>
    <div id="container">

      <label class="toggle-switch">
        <input type="checkbox" disabled >
        <span class="slider"></span>
      </label>
      
      <label class="toggle-switch">
        <input type="checkbox" >
        <span class="slider"></span>
      </label>

      <textarea id="input-textarea"></textarea>
      <button id="submit-button">
        <svg viewBox="0 0 24 24">
          <path d="M8 5v14l11-7z" />
        </svg>
      </button>
    </div>
  </body>


</html>

CSS

#container {
  position: relative;
  width: 400px;
}

#input-textarea {
  width: 100%;
  height: 100px;
  border-radius: 10px;
  padding-top: 5px; /* make room for the button */
  padding-right: 100px; /* make room for the button */
  padding-left: 5px; /* make room for the button */
  padding-bottom: 5px; /* make room for the button */
  resize: vertical; /* allow only vertical resizing */
  min-height: 60px;
  max-height: 200px;
  font-family: "Segoe UI", "Noto Sans", "Helvetica Neue", Arial, "Segoe UI Emoji", "Segoe UI Symbol";
  font-optical-sizing: auto;
  font-size: 16px;
  font-size-adjust: none;
  font-stretch: 100%;
  font-style: normal;
  font-variant-alternates: normal;
  font-variant-caps: normal;
  font-variant-east-asian: normal;
  font-variant-ligatures: normal;
  font-variant-numeric: normal;
  font-variant-position: normal;
  font-variation-settings: normal;
  font-weight: 400;
}

#submit-button {
  position: absolute;
  top: 50px;
  right: -100px;
  background-color: blue;
  border-radius: 50%;
  cursor: pointer;
  padding: 8px;
  border: none;
  outline: none;
}

/* Play button SVG icon within a rounded box */
#submit-button svg {
  width: 24px;
  height: 24px;
  fill: white; /* Color of the arrow */
}
        
   
.toggle-switch {
  position: relative;
  width: 35px;
  height: 20px;
  display: inline-block;
}

.toggle-switch input[type="checkbox"] {
  display: none;
}

.slider {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: grey;
  border-radius: 30px;
  transition: 0.4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 15px;
  width: 15px;
  left: 2px;
  bottom: 2px;
  background-color: white;
  border-radius: 50%;
  transition: 0.4s;
}

input:checked + .slider {
  background-color: #2196F3;
}

input:disabled + .slider {
  background-color: #ccc;
}

input:checked + .slider:before {
  transform: translateX(15px);
}

JavaScript

const textarea = document.getElementById('input-textarea');

console.log( textarea )
textarea.addEventListener('input2', function() {

  const maxLength = 25;
  const lines = this.value.split('\n');

  for(let i = 0; i < lines.length; i++) {
    if (lines[i].length > maxLength) {
      lines[i+1] = lines[i].substring(maxLength) + (lines[i+1] || "");
      lines[i] = lines[i].substring(0, maxLength);
    }
  }

  this.value = lines.join('\n');
});