From 4b86da61cc9e61369dddd569337a5699fc53a821 Mon Sep 17 00:00:00 2001 From: Memma <132008224+MeMMa137@users.noreply.github.com> Date: Tue, 6 Jan 2026 17:05:58 +0100 Subject: [PATCH 1/3] Removed shop banner --- app/controllers/pages_controller.rb | 4 ++-- app/views/pages/shop.html.erb | 5 ----- 2 files changed, 2 insertions(+), 7 deletions(-) diff --git a/app/controllers/pages_controller.rb b/app/controllers/pages_controller.rb index 7227c79..014cfbf 100644 --- a/app/controllers/pages_controller.rb +++ b/app/controllers/pages_controller.rb @@ -105,8 +105,8 @@ def request_review # Shows the under construction page. Requires authentication. def shop require_auth or return - # @shop_items = ShopItem.where(status: [ "active", "in stock", "stock", nil, "" ]).order(:cost) - render :shop_under_construction + @shop_items = ShopItem.where(status: [ "active", "in stock", "stock", nil, "" ]).order(:cost) + # Renders app/views/pages/shop.html.erb by default end # POST /shop/purchase diff --git a/app/views/pages/shop.html.erb b/app/views/pages/shop.html.erb index d1ee27b..264d532 100644 --- a/app/views/pages/shop.html.erb +++ b/app/views/pages/shop.html.erb @@ -121,9 +121,6 @@ -
- Working progress! We're building the shop page, more items will be added soon! -
@@ -150,9 +147,7 @@ <%= form_with url: purchase_path, method: :post, local: true, id: "shop-modal-form" do %> - - <% end %> From 21a26cb831172e1b1af231afee161b848e5a7e47 Mon Sep 17 00:00:00 2001 From: Memma <132008224+MeMMa137@users.noreply.github.com> Date: Tue, 6 Jan 2026 17:30:29 +0100 Subject: [PATCH 2/3] Update general graphics --- app/assets/stylesheets/application.css | 23 +++++++++++++ app/views/layouts/application.html.erb | 2 +- app/views/pages/shop.html.erb | 4 ++- public/stylesheets/application.css | 47 ++++++++++++++++++++++++++ 4 files changed, 74 insertions(+), 2 deletions(-) diff --git a/app/assets/stylesheets/application.css b/app/assets/stylesheets/application.css index 940bd98..6eaa96b 100644 --- a/app/assets/stylesheets/application.css +++ b/app/assets/stylesheets/application.css @@ -354,6 +354,29 @@ h1, h2, h3, h4, h5, h6 { padding: 14px 24px; } +/* Button size/shape utilities */ +.btn--xl { + font-size: 20px; + padding: 14px 22px; +} +.btn--pill { + border-radius: 999px; +} + +/* Subtle animated glow for call-to-action buttons */ +@keyframes btn-glow-pulse { + 0%, 100% { + box-shadow: 0 6px 14px var(--shadow), 0 0 0 0 rgba(210, 127, 70, 0.0); + transform: translateY(0); + } + 50% { + box-shadow: 0 10px 22px var(--shadow), 0 0 18px 2px rgba(210, 127, 70, 0.35); + } +} +.btn--glow { + animation: btn-glow-pulse 2.4s ease-in-out infinite; +} + /* Flash messages */ .flash { padding: 12px 16px; diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb index e8fa514..fcb3f41 100644 --- a/app/views/layouts/application.html.erb +++ b/app/views/layouts/application.html.erb @@ -8,7 +8,7 @@ - + diff --git a/app/views/pages/shop.html.erb b/app/views/pages/shop.html.erb index 264d532..b56d23a 100644 --- a/app/views/pages/shop.html.erb +++ b/app/views/pages/shop.html.erb @@ -6,7 +6,9 @@

Shop

- Recent Purchases + + Recent Purchases +
diff --git a/public/stylesheets/application.css b/public/stylesheets/application.css index 2ccbbca..4abeb40 100644 --- a/public/stylesheets/application.css +++ b/public/stylesheets/application.css @@ -395,6 +395,47 @@ a.project-row:hover { font-size: 18px; padding: 14px 24px; } +/* Button size/shape utilities */ +.btn--xl { + font-size: 18px; + padding: 12px 20px; +} +.btn--pill { + border-radius: 999px; +} + +/* Subtle animated glow for call-to-action buttons */ +@keyframes btn-glow-pulse { + 0%, 100% { + box-shadow: 0 6px 14px var(--shadow), 0 0 0 0 rgba(210, 127, 70, 0.0); + transform: translateY(0); + } + 50% { + box-shadow: 0 10px 22px var(--shadow), 0 0 18px 2px rgba(210, 127, 70, 0.35); + } +} +.btn--glow { + animation: btn-glow-pulse 2.4s ease-in-out infinite; +} + +/* Animated accent gradient for CTA button */ +@keyframes accent-gradient-shift { + 0% { background-position: 0% 50%; } + 50% { background-position: 100% 50%; } + 100% { background-position: 0% 50%; } +} +.btn--accent-gradient { + background: linear-gradient(90deg, #d27f46, #e05a2a, #d27f46); + background-size: 200% 200%; + color: var(--white); + border: 0; + animation: accent-gradient-shift 6s ease infinite; +} +.btn--accent-gradient:hover:not(:disabled) { + filter: brightness(1.02); + transform: translateY(-1px) scale(1.02); + box-shadow: 0 10px 22px var(--shadow); +} /* Flash messages */ .flash { @@ -911,6 +952,12 @@ a.project-row:hover { overflow: hidden; } +/* FAQ Page - custom background */ +[data-page="faq"] { + background: var(--bg) url('https://files.slack.com/files-pri/T09V59WQY1E-F0A71GFN7N2/untitled_artwork.png?pub_secret=e6e1934613') no-repeat center center fixed; + background-size: cover; +} + .signin-page { position: relative; width: 100%; From dcf680dbf9f786e544c4842bcce6f41b624cfe5d Mon Sep 17 00:00:00 2001 From: Memma <132008224+MeMMa137@users.noreply.github.com> Date: Tue, 6 Jan 2026 18:17:59 +0100 Subject: [PATCH 3/3] Update general graphics again --- app/views/layouts/application.html.erb | 8 +- app/views/pages/faq.html.erb | 32 +++++-- app/views/pages/shop.html.erb | 18 +++- app/views/pages/signin.html.erb | 4 +- public/stylesheets/application.css | 120 +++++++++++++++++++------ 5 files changed, 136 insertions(+), 46 deletions(-) diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb index fcb3f41..1bb107e 100644 --- a/app/views/layouts/application.html.erb +++ b/app/views/layouts/application.html.erb @@ -8,7 +8,7 @@ - + @@ -20,9 +20,7 @@ <% end %> <%= yield %> - <% unless content_for?(:page) && yield(:page) == 'signin' %> - bottom-left decoration - bottom-right decoration - <% end %> + bottom-left decoration + bottom-right decoration diff --git a/app/views/pages/faq.html.erb b/app/views/pages/faq.html.erb index 11d3e4b..1e2d327 100644 --- a/app/views/pages/faq.html.erb +++ b/app/views/pages/faq.html.erb @@ -46,19 +46,35 @@
diff --git a/app/views/pages/shop.html.erb b/app/views/pages/shop.html.erb index b56d23a..bebbc5e 100644 --- a/app/views/pages/shop.html.erb +++ b/app/views/pages/shop.html.erb @@ -15,14 +15,26 @@ @@ -34,7 +46,7 @@ - <% categories.each_with_index do |cat, idx| %> + <% categories_active.each_with_index do |cat, idx| %> <% item = @shop_items.find { |i| i.name.to_s.downcase.strip == cat.downcase } %> <% base_cost = (item&.cost || 0).to_i %>
diff --git a/app/views/pages/signin.html.erb b/app/views/pages/signin.html.erb index b456fcb..6e16b17 100644 --- a/app/views/pages/signin.html.erb +++ b/app/views/pages/signin.html.erb @@ -7,7 +7,7 @@
- + <%= form_tag("/auth/hack_club", method: :post) do %>
- Mole +
diff --git a/public/stylesheets/application.css b/public/stylesheets/application.css index 4abeb40..d28395e 100644 --- a/public/stylesheets/application.css +++ b/public/stylesheets/application.css @@ -58,44 +58,48 @@ h1, h2, h3, h4, h5, h6 { /* Top bar */ .topbar { - display: flex; - align-items: center; - justify-content: space-between; - padding: 12px 20px; - position: sticky; - top: 0; - z-index: 100; - background: rgba(243, 227, 207, 0.75); - backdrop-filter: blur(10px); - -webkit-backdrop-filter: blur(10px); - border-radius: 0; - margin: 0; - border-bottom: 1px solid rgba(58, 42, 24, 0.15); - box-shadow: 0 8px 24px rgba(58, 42, 24, 0.12); + display: flex; + align-items: center; + justify-content: space-between; + padding: 14px 22px; + position: sticky; + top: 12px; + z-index: 120; + width: min(1200px, 94vw); + margin: 12px auto 0; + background: rgba(243, 227, 207, 0.78); + backdrop-filter: blur(14px) saturate(125%); + -webkit-backdrop-filter: blur(14px) saturate(125%); + border-radius: 16px; + border: 1px solid rgba(58, 42, 24, 0.14); + box-shadow: 0 12px 28px rgba(58, 42, 24, 0.16); } .topbar__right { display: flex; align-items: center; - gap: 8px; + gap: 10px; } .nav { display: flex; - gap: 28px; + gap: 24px; } .nav__item { color: #221b12; text-decoration: none; - font-weight: 700; - padding: 6px 12px; - border-radius: 10px; - transition: transform 120ms ease, background-color 160ms ease, box-shadow 160ms ease; + font-weight: 800; + padding: 8px 14px; + border-radius: 999px; + transition: transform 120ms ease, background-color 160ms ease, box-shadow 160ms ease, color 160ms ease; } .nav__item[aria-disabled="true"] { opacity: 0.6; pointer-events: none; } .nav__item--active { - text-decoration: underline; + background: rgba(200, 163, 110, 0.28); + color: #20170f; + box-shadow: 0 0 0 2px rgba(214, 161, 97, 0.24) inset; + text-decoration: none; } .nav__item:hover { transform: translateY(-1px); @@ -107,11 +111,12 @@ h1, h2, h3, h4, h5, h6 { box-shadow: none; } .coins { - background: #f2d39e; + background: linear-gradient(135deg, #f2d39e, #efd1a4); color: #3a2a18; - border-radius: 12px; - padding: 6px 10px; - font-weight: 700; + border-radius: 999px; + padding: 6px 12px; + font-weight: 800; + box-shadow: 0 4px 10px rgba(58, 42, 24, 0.12); } /* Containers */ @@ -389,6 +394,24 @@ a.project-row:hover { box-shadow: none; border: 1px solid var(--border); } +/* Refine ghost button in topbar */ +.topbar__right .btn--ghost { + border-color: rgba(58, 42, 24, 0.18); + color: #2a2118; + padding: 8px 12px; + border-radius: 12px; + background: rgba(255, 255, 255, 0.2); + transition: background-color 160ms ease, box-shadow 160ms ease, transform 120ms ease; +} +.topbar__right .btn--ghost:hover { + background: rgba(255, 255, 255, 0.36); + box-shadow: 0 6px 14px rgba(58, 42, 24, 0.12); + transform: translateY(-1px); +} +.topbar__right .btn--ghost:active { + transform: translateY(0); + box-shadow: none; +} .btn--hca { background: #ec3750; color: white; @@ -635,6 +658,22 @@ a.project-row:hover { border-color: var(--gold); box-shadow: 0 0 0 2px rgba(214, 161, 97, 0.2); } +.shop-category-item[disabled] { + opacity: 0.6; + cursor: not-allowed; + position: relative; +} +.shop-category-item__badge { + position: absolute; + top: 5px; + right: 6px; + width: 90px; + height: auto; + transform: rotate(35deg); + pointer-events: none; + border-radius: 6px; + box-shadow: 0 6px 14px rgba(0,0,0,0.18); +} .shop-items { padding: 16px; } @@ -956,6 +995,7 @@ a.project-row:hover { [data-page="faq"] { background: var(--bg) url('https://files.slack.com/files-pri/T09V59WQY1E-F0A71GFN7N2/untitled_artwork.png?pub_secret=e6e1934613') no-repeat center center fixed; background-size: cover; + font-size: 20px; /* bump base size on FAQ */ } .signin-page { @@ -994,8 +1034,10 @@ a.project-row:hover { /* Start button image */ .signin-start-img { - width: clamp(100px, 22vw, 200px); + width: clamp(250px, 22vw, 200px); height: auto; + animation: signin-bob 2.6s ease-in-out infinite; + will-change: transform; } .signin-content form { @@ -1037,6 +1079,13 @@ a.project-row:hover { z-index: 2; } +/* Mirror animal on bottom-right for signin page */ +.signin-mole--right { + right: 0; + left: auto; + transform: scaleX(-1); +} + /* Animations */ @keyframes fade-in-up { from { @@ -1059,6 +1108,15 @@ a.project-row:hover { } } +@keyframes signin-bob { + 0%, 100% { + transform: translateY(0); + } + 50% { + transform: translateY(-6px); + } +} + /* Global corner images */ .corner-img { position: fixed; @@ -1069,15 +1127,21 @@ a.project-row:hover { } .corner-img--left { left: 0; - width: clamp(120px, 14vw, 220px); + width: clamp(160px, 20vw, 320px); height: auto; } .corner-img--right { right: 0; - width: clamp(120px, 16vw, 260px); + width: clamp(160px, 22vw, 360px); height: auto; } +/* Signin-only tweaks: make bottom-left corner image bigger and slightly lower */ +[data-page="signin"] .corner-img--left { + width: clamp(220px, 28vw, 440px); + bottom: -50px; +} + /* Respect reduced motion */ @media (prefers-reduced-motion: reduce) { * {