mirror of
https://github.com/SrIzan10/hc-harbor.git
synced 2026-05-01 10:45:21 +00:00
88 lines
4.0 KiB
Plaintext
88 lines
4.0 KiB
Plaintext
<% content_for :title do %>
|
|
Mailroom
|
|
<% end %>
|
|
|
|
<div class="min-h-screen bg-darker text-white">
|
|
<div class="max-w-6xl mx-auto px-6 py-8">
|
|
<header class="mb-8">
|
|
<h1 class="text-4xl font-bold text-primary mb-2">📮 The Mailroom</h1>
|
|
<p class="text-secondary text-lg">Track your physical mail and rewards</p>
|
|
</header>
|
|
|
|
<% if @has_mailing_address %>
|
|
<section class="bg-green/50 border border-green rounded-lg p-6 mb-8">
|
|
<div class="flex items-center gap-3 mb-3">
|
|
<div class="w-8 h-8 bg-green rounded-full flex items-center justify-center">
|
|
<svg class="w-5 h-5 text-white" fill="none" stroke="currentColor" stroke-width="3" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" />
|
|
</svg>
|
|
</div>
|
|
<h2 class="text-xl font-bold text-green">Address Verified</h2>
|
|
</div>
|
|
<p class="text-lg mb-4">
|
|
Your mailing address is set up and ready to receive mail!
|
|
</p>
|
|
<%= link_to my_mailing_address_path, class: "text-cyan hover:text-blue underline font-semibold" do %>
|
|
View my mailing address
|
|
<% end %>
|
|
</section>
|
|
<% else %>
|
|
<section class="bg-orange bg-opacity-10 border border-orange rounded-lg p-6 mb-8">
|
|
|
|
<div class="flex items-center gap-3 mb-3">
|
|
<img src="https://upload.wikimedia.org/wikipedia/commons/8/83/Emergency_Light.gif" alt="Emergency Light" class="w-8 h-8">
|
|
<h2 class="text-xl font-bold text-dark">No Address Added!</h2>
|
|
</div>
|
|
<p class="text-lg text-dark">You need to add your mailing address to receive physical mail and rewards.</p>
|
|
<%= link_to "Add my address", edit_my_mailing_address_path,
|
|
class: "bg-primary hover:bg-red text-white px-6 py-3 rounded-lg font-semibold transition-colors inline-block" %>
|
|
</section>
|
|
<% end %>
|
|
|
|
<section class="bg-dark rounded-lg p-6">
|
|
<h2 class="text-2xl font-bold mb-6">📦 My Mail</h2>
|
|
<% if @physical_mails.any? %>
|
|
<div class="space-y-6">
|
|
<% @physical_mails.each do |mail| %>
|
|
<% theseus_link = mail.link_to_theseus %>
|
|
<div class="bg-darkless rounded-lg p-6 border border-darkless hover:border-primary transition-colors relative group">
|
|
<% if theseus_link %>
|
|
<a href="<%= theseus_link %>" target="_blank" class="absolute inset-0 z-10"></a>
|
|
<% end %>
|
|
<div class="relative z-20">
|
|
<div class="flex items-start justify-between mb-3">
|
|
<h3 class="text-xl font-bold text-white">
|
|
<%= mail.humanized_mission_type %>
|
|
<% if theseus_link %>
|
|
<span class="text-cyan ml-2 group-hover:translate-x-1 transition-transform inline-block">↗</span>
|
|
<% end %>
|
|
</h3>
|
|
<div class="px-3 py-1 bg-primary bg-opacity-20 text-white rounded-full text-sm font-semibold">
|
|
<%= mail.status.titleize %>
|
|
</div>
|
|
</div>
|
|
<div class="flex flex-col sm:flex-row sm:items-center gap-2 text-secondary mb-3">
|
|
<span>📅 Created: <%= mail.created_at.strftime("%B %d, %Y") %></span>
|
|
</div>
|
|
<% if theseus_link %>
|
|
<div class="pt-3 border-t border-darkless">
|
|
<a href="<%= theseus_link %>" target="_blank" class="text-cyan hover:text-blue underline font-semibold relative z-30">
|
|
View on mail.hackclub.com
|
|
</a>
|
|
</div>
|
|
<% end %>
|
|
</div>
|
|
</div>
|
|
<% end %>
|
|
</div>
|
|
<% else %>
|
|
<div class="text-center py-12">
|
|
<div class="text-6xl mb-4">📪</div>
|
|
<h3 class="text-xl font-bold text-secondary mb-2">No mail yet</h3>
|
|
<p class="text-secondary">Keep coding to earn rewards and get mail!</p>
|
|
</div>
|
|
<% end %>
|
|
</section>
|
|
</div>
|
|
</div>
|