WIP: Change Okazu view

resources/views/components/okazu-card.blade.php

@@ -0,0 +1,9 @@
+<div class="card okazu-card overflow-hidden d-none">
+    <a href="{{ $link }}" target="_blank" rel="noopener">
+        <img src="" class="card-img" alt="">
+        <div class="card-img-overlay d-flex align-items-end p-3">
+            <h5 class="card-title overflow-hidden m-0 font-weight-bold p-1" style="text-overflow: ellipsis;white-space: nowrap;background: rgba(229, 63, 177, 0.75);color: white;">Card title</h5>
+            <p class="card-text overflow-hidden d-none" style="text-overflow: ellipsis;white-space: nowrap;">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
+        </div>
+    </a>
+</div>

resources/views/user/profile.blade.php

@@ -31,6 +31,41 @@
     <p class="mt-4">
         <span class="oi oi-lock-locked"></span> このユーザはチェックイン履歴を公開していません。
     </p>
+@elseif (Route::currentRouteName() === 'user.okazu')
+    @push('script')
+        <script>
+            document.querySelectorAll(".okazu-card").forEach(card => {
+                const title = card.querySelector(".card-title");
+                const description = card.querySelector(".card-text");
+                const image = card.querySelector(".card-img");
+
+                const params = new URLSearchParams();
+                params.set('url', card.querySelector("a").href);
+
+                fetch("/api/checkin/card?" + params.toString())
+                    .then(response => response.json())
+                    .then(json => {
+                        if (json.image) {
+                            title.innerText = json.title;
+                            description.innerText = json.description;
+                            image.setAttribute("src", json.image);
+                            card.classList.remove("d-none");
+                        }
+                    })
+            });
+        </script>
+    @endpush
+
+    <div class="card-columns mt-3">
+        @forelse ($ejaculations as $ejaculation)
+            @component('components.okazu-card', ['link' => $ejaculation->link])
+            @endcomponent
+        @empty
+        <li class="list-group-item border-bottom-only">
+            <p>まだチェックインしていません。</p>
+        </li>
+        @endforelse
+    </div>
 @else
     <ul class="list-group">
         @forelse ($ejaculations as $ejaculation)