Mockup welcome modal

1 year ago · 839d6f80ab
parent af9aa1b326
commit 839d6f80ab
3 changed files with 71 additions and 0 deletions
--- a/styles/sass/style.scss
+++ b/styles/sass/style.scss
@ -120,4 +120,49 @@ a {
  &.phrase {
    color: #fab387;
  }
 }
 .servers {
  display: flex;
  gap: 0.5em;
  & > * {
    display: flex;
    flex-direction: column;
    gap: 0.5em;
    border: 2px solid;
    border-radius: 0.5em;
    padding: 0.5em;
    width: 100%;
    align-items: center;
    text-align: center;
    img {
      width: 96px;
      border-radius: 100%;
      border: 2px solid;
    }
    .name {
      display: flex;
      flex-grow: 1;
      align-items: center;
    }
  }
  .recommended {
    border-color: mediumseagreen;
    .label-wrapper {
      height: 0;
      .label {
        position: relative;
        width: fit-content;
        border: auto;
        bottom: 0px;
        background: mediumseagreen;
        color: white;
        font-weight: bold;
        font-size: 0.75em;
        text-transform: uppercase;
        padding: 0 0.5em 0 0.5em;
        border-radius: 2px;
      }
    }
  }
 }
--- a/templates/index.html.tera
+++ b/templates/index.html.tera
@ -8,6 +8,7 @@
    <link href="/css/style.css" rel="stylesheet">
 </head>
 <body>
    {% include "modal" %}
    <div id="content">
        <nav>
            <a><svg class="svg-inline" aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><path fill="currentColor" d="M41.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l192 192c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L109.3 256 278.6 86.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-192 192z"></path></svg></a>
--- a/templates/modal.html.tera
+++ b/templates/modal.html.tera
@ -0,0 +1,25 @@
 <dialog>
    <h1>Welcome to Tegaki Tuesday!</h1> 
    <p>In order to participate in challenges, you must be a member of a participating Discord server.</p>
    <h2>Join a participating server</h2>
    <div class="servers">
        <div class="recommended">
            <img src="https://cdn.discordapp.com/icons/189571157446492161/a_5df28dc3a43bc6780cb084b2ad896a9f.webp?size=96" alt="Server icon"> 
            <div class="name">English-Japanese Language Exchange</div>
            <div class="label-wrapper">
                <div class="label">Recommended</div>
            </div>
        </div>
        <div>
            <img src="https://cdn.discordapp.com/icons/116379774825267202/a_425c9b6640fdc30deb5f97eddcf8e6a7.webp?size=96" alt="Server icon"> 
            <div class="name">日本語と英語 - JP & EN</div>
        </div>
        <div>
            <img src="https://cdn.discordapp.com/icons/582147335476346880/677049f139f08cf670e20e8c5f0a656e.webp?size=96" alt="Server icon"> 
            <div class="name">Yudai La Piñata</div>
        </div>
    </div>
 </dialog>
 <script>
 document.querySelector("dialog").showModal();
 </script>