Styling for challenge card

spatie · Nov 14, 2024 · 12fccb7 · 12fccb7
1 parent 9f189eb
commit 12fccb7
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 18 deletions.
diff --git a/app/Livewire/TopSecretComponent.php b/app/Livewire/TopSecretComponent.php
@@ -105,7 +105,7 @@ public function render(): View
 
         $this->reward = DB::table('bf24_rewards')
             ->where('day', $this->currentDay)
-            ->where('user_id', Auth::user()->id)
+            ->where('user_id', Auth::user()->id ?? null)
             ->first()
             ?->reward;
 

diff --git a/resources/css/front/utilities/black-friday.css b/resources/css/front/utilities/black-friday.css
@@ -23,6 +23,23 @@
     z-index: -1;
 }
 
+.bf-date-border:before {
+    content: "";
+    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 148 62"><path fill="%23EAE9D8" d="M94.52 9.742c12.017-.16 23.897 2.768 35 7.206 6.977 2.966 16.357 6.161 17.912 14.618 1.258 13.436-14.351 19.155-24.843 22.32-15.412 4.384-31.433 6.108-47.377 7.023-15.968.716-32.142.48-47.797-3.089-24.82-5.452-39.057-23.189-13.146-40.674C37.603 2.093 68.493-.667 95.617 1.346c14.878 1.35 29.961 3.638 43.786 9.524l2.73 1.243-.061.138-2.746-1.182c-13.901-5.521-28.946-7.527-43.777-8.67C69.004.75 37.885 3.701 15.115 18.396-9.728 35.119 4.097 51.179 27.69 56.63c27.322 6.268 67.592 3.843 94.685-3.47 10.211-3.027 25.637-8.449 24.531-21.511-1.472-8.228-10.759-11.4-17.523-14.344a114.139 114.139 0 0 0-11.278-3.935c-7.649-2.219-15.594-3.522-23.578-3.47V9.75l-.008-.007Z"/></svg>');
+    background-repeat: no-repeat;
+    background-position: center;
+    background-size: contain;
+    position: absolute;
+    inset: 0;
+
+}
+
+.challenge-sheet {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
 .paper-stack .paper-stack-item {
     grid-row: 1;
     grid-column: 1;
@@ -33,6 +50,7 @@
     order: 1;
     z-index: 1;
 }
+
 .textured-paper {
     background-image: url("/images/black-friday/paper-texture.png");
     background-size: contain;
@@ -67,7 +85,7 @@
 }
 
 .paper-dotted-border {
-   border: 2px dashed rgba(80, 80, 80, 0.2);
+    border: 2px dashed rgba(80, 80, 80, 0.2);
 }
 
 .paper-action-btn {
@@ -110,7 +128,7 @@
 .sheet-highlight-markup em {
     @apply text-bf-red-dark;
     background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" fill="none" viewBox="0 0 262 12"><path fill="%23EB5757" d="M88.71 2.767c7.252-.19 15.035-.148 22.407-.949a64.241 64.241 0 0 1 7.415-.115c7.194.193 14.4.323 21.84.175 1.106-.022 2.3.036 3.305-.035 10.242-.728 20.466-.28 30.674-.544 7.2-.187 14.408-.059 21.649-.64 4-.322 8.786-.308 13.194-.351 13.29-.129 26.574-.231 39.85-.308 4.129-.025 7.707.032 8.231 1.066.3.587 3.7.962 3.874 1.717.451 1.979-5.149 3.543-15.707 3.971-4.725.192-9.558.225-14.337.348-9.137.235-18.191.834-27.439.437-3.3-.141-7.314.062-10.958.191-10.386.368-20.613.278-30.879.261-3.28-.005-6.681-.071-9.863.076-8.409.389-16.813.6-25.3.736-4.034.064-7.938.168-12.03.11-4.231-.06-8.777.223-13.189.34-11.67.31-23.317.828-35.036.762-13.606.866-27.934.415-41.537 1.528-4.71.38-9.439.492-14.162.337C-.8 11.474-2.04 11.116 2.333 8.941A28.179 28.179 0 0 1 6.3 7.429c2.187-.684 4.837-1.076 9.711-1.239 6.8-.228 13.487-.826 20.048-1.354 5.257-.423 10.274-.9 16.081-.865 2.09.013 4.37-.169 6.5-.3 9.754-.618 19.6-.958 30.065-.9"/></svg>');
-} 
+}
 
 .sheet-highlight-markup p:last-child {
     margin-bottom: 0;
@@ -126,6 +144,7 @@
 .rewards-card-markup a {
     @apply underline hover:no-underline;
 }
+
 .raffle-token {
     @apply absolute -top-2 right-12 rotate-6 transition hover:rotate-2;
     cursor: pointer;

diff --git a/resources/views/front/pages/top-secret/index.blade.php b/resources/views/front/pages/top-secret/index.blade.php
@@ -54,10 +54,10 @@ class="grid gap-6 items-start"
                                     >
                                         <div
                                             x-on:click="showInput = true"
-                                            class="px-8 border-b border-bf-beige paper-markup text-lg"
-                                            x-bind:class="showInput ? '' : 'cursor-pointer underline decoration-bf-beige'"
+                                            class="px-8 paper-markup text-lg group"
+                                            x-bind:class="showInput ? '' : 'cursor-pointer'"
                                         >
-                                            {{ $question }}
+                                            <span class="group-hover:underline">{{ $question }}</span>
                                         </div>
 
                                         <textarea
@@ -70,27 +70,27 @@ class="form-input mx-8 border border-bf-dark-gray h-24"
                                         ></textarea>
 
                                         <div x-show="showInput" class="px-8 border-b border-bf-beige">
-                                            <button class="underline decoration-bf-beige" wire:click="submitAnswer">> Submit your solution</button>
+                                            <button class="paper-action-btn" wire:click="submitAnswer">Submit your solution</button>
                                         </div>
                                     </div>
                                 @endif
                             </div>
 
                         </div>
 
-                        <div class="mt-[-1px] pointer-events-none">
-                            <img src="../images/black-friday/scrap-1.svg" alt="">
+                        <div class="mt-[-2px] pointer-events-none">
+                            <img src="../images/black-friday/scrap-{{ $currentDay }}.svg" alt="">
                         </div>
 
                         <div class="textured-paper absolute inset-0"></div>
 
                     </div>
 
-                    <div class="flex text-white gap-4">
+                    <div class="p-24 mt-auto flex text-white gap-4">
                         @foreach ($days as $day => $date)
                             <div
-                                class="
-                                    {{ $currentDay === $day ? 'border border-white' : '' }}
+                                class="p-8
+                                    {{ $currentDay === $day ? 'bf-date-border' : '' }}
                                     {{ $date->isFuture() ? 'opacity-50' : 'cursor-pointer' }}
                                 "
                                 @if ($date->isPast())
@@ -101,7 +101,7 @@ class="
                                     ✔︎
                                 @endif
 
-                                Day {{ $day }}
+                                <span class="font-obviously-narrow uppercase font-semibold tracking-[0.2em]">Day {{ $day }}</span>
                             </div>
                         @endforeach
                     </div>
@@ -120,11 +120,8 @@ class="
                             <p>Agent,</p>
                             <p>Your last transmission was positive. Good job.</p>
                             <p>You've earned a token of encouragement.</p>
-                            <div
-                                class="sheet-highlight-markup text-bf-red-dark p-4 paper-dotted-border text-center mb-[1em]">
-                                <p>Use the next coupon to get <em>20% off</em> on every next purchase on <a
-                                        href="https://spatie.be/products">spatie.be</a>:</p>
-                                <p>24-TOPSECRET-CODE</p>
+                            <div class="sheet-highlight-markup text-bf-red-dark p-4 paper-dotted-border text-center mb-[1em]">
+                                {{ $reward }}
                             </div>
                             <p>Information regarding the reward will also be transmitted to your secure channel.</p>
                             <p>Awaiting your transmission tomorrow.</p>