simulacrumparty
/
oslo


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211
							{% import "components.html" as components %}
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>bngl://ws/</title>
    <style>
      * {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
      }

      body {
        background: #aab5a9;
        color: #000;
        font-family: Verdana, Geneva, Tahoma, sans-serif;
        font-size: 12px;
      }

      a {
        color: #000;
      }

      a:hover {
        text-decoration: none;
      }

      .btn {
        cursor: pointer;
        background: #ffffff;
        border: 1px solid #383e37;
        border-radius: 0;
        padding: 0.15em 0.3em;
      }

      .btn:hover {
        background-color: #f0f0f0;
      }

      .danger {
        color: #942626;
      }

      .container {
        margin: auto;
        max-width: 800px;
        padding: 1em;
      }

      .header {
        display: flex;
        justify-content: space-between;
        margin: 1em 0;
      }

      .header__logo {
        background-color: #ffffff;
        border: 1px solid #383e37;
        font-size: 14px;
        font-style: italic;
        font-weight: bold;
        letter-spacing: 2px;
        padding: 0.25em 0.5em;
        text-decoration: none;
      }

      .header__logo:hover {
        background-color: #f0f0f0;
      }

      .form__field {
        margin: 1em 0;
      }

      .form__label {
        display: block;
        margin-bottom: 0.5em;
      }

      .form__textarea,
      .form__text-field {
        font-family: Verdana, Geneva, Tahoma, sans-serif;
        font-size: 12px;
        padding: 0.25em;
        width: 100%;
      }

      .form__textarea {
        height: 200px;
        resize: vertical;
      }

      .post:not(:last-child) {
        margin: 3em 0;
      }

      .post__heading {
        align-items: center;
        background: white;
        border: 1px solid #383e37;
        display: flex;
        flex-wrap: wrap;
        font-size: 12px;
        font-weight: bold;
        justify-content: space-between;
        margin-bottom: 1em;
        padding: 0.5em;
      }

      .post__title {
        flex: 1;
        margin-right: 1em;
        min-width: 220px;
      }

      .post__date {
        font-style: italic;
        white-space: nowrap;
      }

      .post__link {
        cursor: pointer;
        font-style: normal;
        font-weight: normal;
        text-decoration: underline;
      }

      .post__link:hover {
        text-decoration: none;
      }

      .post__body {
        border-top: none;
        padding: 0.5em;
      }

      .message {
        border: 1px solid #383e37;
        color: #fff;
        margin: .5em 0;
        padding: .25em 1.5em;
        text-align: center;
        width: 100%;
      }

      .message--error {
        background-color: #942626;
      }

      .message--success {
        background-color: #289426;
      }

      .error__heading {
        margin: 2em 0 1em;
      }

      .error__message {
        font-size: 18px;
      }

      @media (max-width: 500px) {
        .form__button {
          width: 100%;
        }
      }
    </style>
  </head>
  <body>
    <div class="container">
      <header class="header">
        <a class="header__logo" href="/">bngl://ws/</a>
        {% if logged_in %}
        <form action="/logout" method="POST">
          <input class="btn" type="submit" value="Log out" />
        </form>
        {% endif %}
      </header>
      <div class="messages">
        {% if flash_error %}
          <p class="message message--error">{{ flash_error }}</p>
        {% endif %}

        {% if flash_success %}
          <p class="message message--success">{{ flash_success }}</p>
        {% endif %}
      </div>
      {% block content %} {% endblock %}
    </div>
    <script>
      document.querySelectorAll('[data-delete]').forEach((el) => {
        el.addEventListener('click', (e) => {
          if (confirm('Are you sure? This cannot be undone.')) {
            let postId = e.target.dataset.delete;
            fetch(`/posts/${postId}`, {
              method: 'DELETE',
            }).then((r) => {
              r.json().then((data) => {
                if (data.success) {
                  window.location = '/';
                }
              });
            });
          }
        });
      });
    </script>
  </body>
</html>