Skip to content

Commit

Permalink
Add share intents, tweak buttons
Browse files Browse the repository at this point in the history
  • Loading branch information
@jimirobaer
jimirobaer committed Nov 19, 2024
1 parent 54946d5 commit 219d4a0
Show file tree
Hide file tree
Showing 2 changed files with 34 additions and 26 deletions.
4 changes: 2 additions & 2 deletions resources/css/front/utilities/black-friday.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@
content: "";
width: 100%;
height: 100%;
background-color: rgba(80, 80, 80, 0.3);
background-color: rgba(0, 0, 0, 0.3);
inset: 0;
position: fixed;
z-index: -1;
Expand Down Expand Up @@ -157,6 +157,6 @@

.red-sticky {
@apply shadow-bf-smooth;
@apply translate-x-[-1.5em] translate-y-[-1.05em] rotate-6;
background: linear-gradient(135.22deg, rgba(255, 255, 255, 0) 0.31%, rgba(255, 255, 255, 0.1) 100.64%), #F37D71;
transform: translate(-1.5em, -1.05em);
}
56 changes: 32 additions & 24 deletions resources/views/front/pages/top-secret/index.blade.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -63,28 +63,34 @@ class="bf-page page-challenge"

<div class="relative challenge-sheet">

<div class="max-w-[800px] overflow-hidden m-auto">
<div class="w-full max-w-[800px] m-auto">

@if ($reward)
<div class="red-sticky absolute right-0 -bottom-[4.5em] md:aspect-square w-32 flex items-center z-[1]">
<span class="block font-marker p-4 text-center text-sm md:text-base md:leading-tight">
<button
class="underline hover:no-underline"
x-on:click="showReward = true"
>
Note to self: Got this one! Received a cool reward.
</button>
</span>
</div>
@endif

<div class="flex flex-col gap-6 p-8 pb-0 lg:p-16 lg:pb-4 bg-white shadow-bf-hard">
<div class="flex flex-col gap-6 p-8 pb-0 lg:p-20 lg:pb-4 bg-white shadow-bf-hard">

<div class="font-special-elite text-lg">
<div class="font-special-elite">
@if ($reward)
{{-- TODO: style this--}}
<p>{{ $question }}</p>

<p>Answer: {{ $answer }}</p>

<button x-on:click="showReward = true">Show my reward</button>
<p class="mb-2">{{ $question }}</p>
<p class="text-blue mb-2">{{ $answer }}</p>
@elseif($days[$currentDay]->endOfDay()->isPast())
{{-- TODO: style this--}}
<p>{{ $question }}</p>

<p>Answer: {{ $answer }}</p>
@else
<div x-data="{
showInput: false,
}" class="grid gap-6 items-start">
<div x-on:click="showInput = true" class="paper-markup text-lg group"
<div x-on:click="showInput = true" class="paper-markup group"
x-bind:class="showInput ? '' : 'cursor-pointer'">
<p class="group-hover:underline">{{ $question }}</p>
</div>
Expand Down Expand Up @@ -130,17 +136,17 @@ class="form-input border border-bf-gray resize-none h-24 font-sans" name="answer

</div>

<div id="reward-message" class="bf-overlay place-items-end" x-show="showReward">
<div class="bf-overlay place-items-end" x-show="showReward" x-transition.opacity>
@if($reward)
<div class="relative max-w-[632px] w-full bg-white p-8 shadow-bf-smooth paper-holes">
<div class="relative max-w-[632px] w-full max-h-[65vh] h-full bg-white p-8 shadow-bf-smooth paper-holes">

@if($reward->enteredRaffle === false && $days[$currentDay]->isToday())
<button class="raffle-token" x-on:click="showToken = true">
<img src="../images/black-friday/raffle-token.svg" alt="Get a secret prize" class="w-56">
</button>
@endif

<div class="p-8 text-lg font-special-elite paper-markup paper-dotted-border">
<div class="h-full p-8 text-lg font-special-elite paper-markup paper-dotted-border">
<p>Agent,</p>
<p>Your last transmission was positive. Good job.</p>
<p>You've earned a token of encouragement.</p>
Expand All @@ -153,10 +159,11 @@ class="sheet-highlight-markup text-bf-red-dark p-4 paper-dotted-border text-cent
</div>
<p>Information regarding the reward will also be transmitted to your secure channel.</p>
<p>Awaiting your transmission tomorrow.</p>
<p>Broadcast your success on: <a href="#">Bluesky</a>, <a href="#">X</a></p>

{{-- TODO: style this--}}
<p><a x-on:click="showReward = false">Discard</a></p>
<p>Broadcast your success on:
<a href="https://bsky.app/intent/compose?text={{ Str::of("I decoded my daily message on topsecret.spatie.be and got a nice prize!") }}">Bluesky</a>,
<a href="https://twitter.com/intent/tweet?text={{ Str::of("I decoded my daily message on topsecret.spatie.be and got a nice prize!") }}">X</a>
</p>
<p><button class="underline hover:no-underline" x-on:click="showReward = false">Discard</button></p>
</div>

<div class="absolute inset-0 pointer-events-none flex place-content-center">
Expand All @@ -169,10 +176,10 @@ class="w-96 opacity-[0.05] rotate-[-12.5deg]">
@endif
</div>

<div id="hint-message" class="bf-overlay place-items-end" x-show="showHint">
<div class="relative max-w-[632px] w-full bg-white p-8 shadow-bf-smooth paper-holes">
<div class="bf-overlay place-items-end" x-show="showHint" x-transition.opacity>
<div class="relative max-w-[632px] w-full max-h-[65vh] h-full bg-white p-8 shadow-bf-smooth paper-holes">

<div class="p-8 text-lg font-special-elite paper-markup paper-dotted-border">
<div class="h-full p-8 text-lg font-special-elite paper-markup paper-dotted-border">
<p>Agent,</p>
<p>Your last transmission was inaccurate.</p>
<p>Decipher the code using this hint:</p>
Expand All @@ -182,7 +189,7 @@ class="sheet-highlight-markup text-bf-red-dark p-4 paper-dotted-border text-cent
</div>
<p>No additional assistance will follow.</p>
<p>Proceed with caution.</p>
<p><a x-on:click="showHint = false">Discard</a></p>
<p><button class="underline hover:no-underline" x-on:click="showHint = false">Discard</button></p>
</div>

<div class="absolute inset-0 pointer-events-none flex place-content-center">
Expand All @@ -192,6 +199,7 @@ class="w-96 opacity-[0.05] rotate-[-12.5deg]">

<div class="textured-paper absolute inset-0"></div>
</div>

</div>

<div id="token-message" class="bf-overlay" x-show="showToken" x-transition>
Expand Down

0 comments on commit 219d4a0

Please sign in to comment.