20260907013020

During my upcoming stream tomorrow where I review the photos from the recent summer trip I had, I think it would be good to make an agenda page that I fill out for each day. While reviewing the photos, I can I write down where I was, what I did, and pick some favorite photos (as if I am scrapbooking).

Here's the form I made for that:

<!DOCTYPE html>
<html>
  <head>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Martian+Mono:wght@100..800&display=swap" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/remixicon@4.9.0/fonts/remixicon.css" rel="stylesheet">
    <style>
      :root {
        --outline: #ddd;
      }

      h1, p {
        font-family: "Martian Mono", monospace;
        font-optical-sizing: auto;
        font-weight: 400;
        font-style: normal;
        font-variation-settings: "wdth" 100;
        padding: 0;
        margin: 0;
      }

      div {
        display: flex;
        flex-direction: column;
        width: fit-content;
        gap: .5em;
      }

      .strip {
        flex-direction: row;
        height: 150px;
        border: 1px solid var(--outline);
        padding: .5em
      }

      .picture-slot {
        background-color: var(--outline);
      }
    </style>
  </head>
  <body>
    <div id="page">
      <h1>day</h1>
    </div>

    <template id="food">
      <div class="strip">
        <div style="width: 200px;">
          <p>Rating: <i class="ri-star-line"></i><i class="ri-star-line"></i><i class="ri-star-line"></i><i class="ri-star-line"></i><i class="ri-star-line"></i></p>
          <p>Restaurant:</p>
          <p>City:</p>
          <p>State:</p>
        </div>
        <div style="width: 200px;">
          <p>Dishes:</p>
        </div>
        <div class="picture-slot" style="width: 200px;"></div>
        <div class="picture-slot" style="width: 200px;"></div>
        <div class="picture-slot" style="width: 200px;"></div>
      </div>
    </template>

    <template id="place">
      <div class="strip">
        <div style="width: 200px;">
          <p>Rating: <i class="ri-star-line"></i><i class="ri-star-line"></i><i class="ri-star-line"></i><i class="ri-star-line"></i><i class="ri-star-line"></i></p>
          <p>State:</p>
          <p>Whereabout:</p>
        </div>
        <div style="width: 200px;">
          <p>Guys:</p>
        </div>
        <div class="picture-slot" style="width: 200px;"></div>
        <div class="picture-slot" style="width: 200px;"></div>
        <div class="picture-slot" style="width: 200px;"></div>
      </div>
    </template>
  </body>
  <script>
    const place = document.querySelector("#place");
    const food = document.querySelector("#food");
    const page = document.querySelector("#page");
    page.appendChild(document.importNode(food.content, true));
    page.appendChild(document.importNode(place.content, true));
    page.appendChild(document.importNode(food.content, true));
    page.appendChild(document.importNode(place.content, true));
    page.appendChild(document.importNode(food.content, true));
  </script>
</html>

content

meta