Internet Complain-o-matic

index.html

<div v-scope="{ sent: false, processing: false }" class="container">
  <div class="nes-container">
    <h1>Internet Complain-o-matic</h1>

    <section v-if="sent" class="message-list" hidden @mounted="$el.hidden = false">
      <section class="message -left">
        <i class="nes-bcrikko"></i>
        <!-- Balloon -->
        <div class="nes-balloon from-left">
          <p>Okay! All sent. No need to follow up.</p>
          <p>Wait. Are you still mad?</p>
          <button type="button" class="nes-btn is-primary" @click="sent=false">Send another</button>

        </div>
      </section>

    </section>

    <div v-else>
      <section class="message-list">
        <section class="message -left">
          <i class="nes-bcrikko"></i>
          <!-- Balloon -->
          <div class="nes-balloon from-left">
            <p>Mad about someone or something? Just type it in here and it'll get auto-routed to the correct place by our supersmart AI.</p>

          </div>
        </section>

      </section>

      <br>

      <form>

        <textarea name="complaint" id="complaint" class="nes-textarea" cols="30" rows="10"></textarea>
        <div>
          <button type="button" class="nes-btn is-primary" @click.prevent="sent = true">Send</button>
        </div>
      </form>
    </div>
  </div>
</div>

internet-complain-o-matic.markdown

Internet Complain-o-matic

A Pen by iAMNABHON on CodePen.

License.

script.js

PetiteVue.createApp().mount();

scripts

<script src="https://unpkg.com/petite-vue"></script>

style.scss

.container {
  max-width: 980px;
  margin: 0 auto;
  margin-top: 5vh;
}
section.message-list {
  display: flex;
  flex-direction: column;
}
.message-list > .message {
  display: flex;
  margin-top: 2rem;
}
.message-list > .message > .nes-balloon {
  max-width: 550px;
}
.message-list > .message i {
  align-self: flex-end;
}
.message-list > .message.-left {
  align-self: flex-start;
}
.message-list > .message.-right {
  align-self: flex-end;
}
.message-list > .message.-left i {
  margin-right: 2rem;
}
.message-list > .message.-right i {
  margin-left: 2rem;
}

.icon-list > .blur-filter {
  filter: blur(10px);
}

styles

<link href="https://fonts.googleapis.com/css?family=Press+Start+2P" rel="stylesheet" />
<link href="https://unpkg.com/nes.css@latest/css/nes.min.css" rel="stylesheet" />