Skip to content

Commit 53a4071

Browse files
MeMMa137MeMMa137
authored
Merge pull request #30 from MeMMa137/frontend
Frontend
2 parents c65d7a4 + dcf680d commit 53a4071

File tree

7 files changed

+211
-54
lines changed

7 files changed

+211
-54
lines changed

‎app/assets/stylesheets/application.css‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -354,6 +354,29 @@ h1, h2, h3, h4, h5, h6 {
354354
padding: 14px 24px;
355355
}
356356

357+
/* Button size/shape utilities */
358+
.btn--xl {
359+
font-size: 20px;
360+
padding: 14px 22px;
361+
}
362+
.btn--pill {
363+
border-radius: 999px;
364+
}
365+
366+
/* Subtle animated glow for call-to-action buttons */
367+
@keyframes btn-glow-pulse {
368+
0%, 100% {
369+
box-shadow: 0 6px 14px var(--shadow), 0 0 0 0 rgba(210, 127, 70, 0.0);
370+
transform: translateY(0);
371+
}
372+
50% {
373+
box-shadow: 0 10px 22px var(--shadow), 0 0 18px 2px rgba(210, 127, 70, 0.35);
374+
}
375+
}
376+
.btn--glow {
377+
animation: btn-glow-pulse 2.4s ease-in-out infinite;
378+
}
379+
357380
/* Flash messages */
358381
.flash {
359382
padding: 12px 16px;

‎app/controllers/pages_controller.rb‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -105,8 +105,8 @@ def request_review
105105
# Shows the under construction page. Requires authentication.
106106
def shop
107107
require_auth or return
108-
# @shop_items = ShopItem.where(status: [ "active", "in stock", "stock", nil, "" ]).order(:cost)
109-
render :shop_under_construction
108+
@shop_items = ShopItem.where(status: [ "active", "in stock", "stock", nil, "" ]).order(:cost)
109+
# Renders app/views/pages/shop.html.erb by default
110110
end
111111

112112
# POST /shop/purchase

‎app/views/layouts/application.html.erb‎

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88
<meta name="csrf-token" content="<%= form_authenticity_token %>">
99
<link rel="icon" type="image/png" href="https://files.slack.com/files-pri/T09V59WQY1E-F0A6UD211JS/animal.png?pub_secret=3e17f8e9df">
1010
<link rel="shortcut icon" type="image/png" href="https://files.slack.com/files-pri/T09V59WQY1E-F0A6UD211JS/animal.png?pub_secret=3e17f8e9df">
11-
<link rel="stylesheet" href="/stylesheets/application.css?v=6">
11+
<link rel="stylesheet" href="/stylesheets/application.css?v=18">
1212
<script defer src="/javascripts/application.js?v=2"></script>
1313
</head>
1414
<body data-page="<%= content_for?(:page) ? yield(:page) : '' %>">
@@ -20,9 +20,7 @@
2020
<% end %>
2121

2222
<%= yield %>
23-
<% unless content_for?(:page) && yield(:page) == 'signin' %>
24-
<img src="/images/img_2180.png" alt="bottom-left decoration" class="corner-img corner-img--left">
25-
<img src="/images/untitled_artwork.png" alt="bottom-right decoration" class="corner-img corner-img--right">
26-
<% end %>
23+
<img src="/images/img_2180.png" alt="bottom-left decoration" class="corner-img corner-img--left">
24+
<img src="/images/untitled_artwork.png" alt="bottom-right decoration" class="corner-img corner-img--right">
2725
</body>
2826
</html>

‎app/views/pages/faq.html.erb‎

Lines changed: 24 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -46,19 +46,35 @@
4646
</main>
4747

4848
<style>
49+
.page-title {
50+
font-size: 64px;
51+
letter-spacing: 0.5px;
52+
text-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
53+
margin-bottom: 10px;
54+
}
55+
4956
.faq-section {
5057
margin-bottom: 2rem;
5158
border-radius: 12px;
5259
}
5360

5461
.faq-section__title {
55-
color: #8b5cf6;
56-
font-size: 1.75rem;
62+
color: var(--gold);
63+
font-size: 2.5rem;
5764
font-weight: 700;
5865
margin: 0 0 1.5rem 0;
5966
padding-bottom: 1rem;
6067
border-bottom: 2px solid #f0f0f0;
6168
}
69+
.faq-section__title::after {
70+
content: "";
71+
display: block;
72+
width: 80px;
73+
height: 6px;
74+
border-radius: 6px;
75+
margin-top: 10px;
76+
background: linear-gradient(90deg, var(--accent), rgba(210, 127, 70, 0.2));
77+
}
6278

6379
.faq-qa {
6480
display: flex;
@@ -77,15 +93,15 @@
7793

7894
.faq-item__question {
7995
color: #1f2430;
80-
font-size: 1rem;
96+
font-size: 1.3rem;
8197
font-weight: 700;
8298
margin: 0 0 0.5rem 0;
8399
line-height: 1.4;
84100
}
85101

86102
.faq-item__answer {
87103
color: #6b7280;
88-
font-size: 0.95rem;
104+
font-size: 1.2rem;
89105
margin: 0;
90106
line-height: 1.6;
91107
}
@@ -101,7 +117,7 @@
101117

102118
.faq-list li {
103119
color: #1f2430;
104-
font-size: 0.95rem;
120+
font-size: 1.2rem;
105121
line-height: 1.6;
106122
padding-left: 1.75rem;
107123
position: relative;
@@ -111,13 +127,13 @@
111127
content: "•";
112128
position: absolute;
113129
left: 0;
114-
color: #8b5cf6;
130+
color: var(--accent);
115131
font-weight: bold;
116132
font-size: 1.2rem;
117133
}
118134

119135
.link {
120-
color: #8b5cf6;
136+
color: var(--accent);
121137
text-decoration: none;
122138
font-weight: 600;
123139
transition: opacity 0.2s ease;
@@ -129,7 +145,7 @@
129145
}
130146

131147
.highlight {
132-
color: #8b5cf6;
148+
color: var(--gold);
133149
font-weight: 700;
134150
}
135151
</style>

‎app/views/pages/shop.html.erb‎

Lines changed: 18 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -6,21 +6,35 @@
66
<main class="container">
77
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem;">
88
<h1 class="page-title" style="margin: 0;">Shop</h1>
9-
<a href="/purchases" class="btn btn--secondary">Recent Purchases</a>
9+
<a href="/purchases" class="btn btn--accent btn--accent-gradient btn--xl btn--pill btn--glow" style="display:inline-flex;align-items:center;gap:10px;">
10+
<span>Recent Purchases</span>
11+
</a>
1012
</div>
1113

1214
<div class="shop-layout">
1315
<aside class="shop-categories card">
1416
<h3 class="shop-heading">Category</h3>
1517
<ul class="shop-category-list">
16-
<% categories = [ "Keyboard", "Mouse", "Monitor", "Headphones", "Webcam" ] %>
17-
<% categories.each_with_index do |cat, idx| %>
18+
<% categories_active = [ "Keyboard", "Mouse", "Monitor", "Headphones", "Webcam" ] %>
19+
<% categories_soon = [ "Chair", "PC Components", "Desktop Accessories", "Suggest Something!" ] %>
20+
<% categories_active.each_with_index do |cat, idx| %>
1821
<li>
1922
<button class="shop-category-item <%= 'is-active' if idx == 0 %>" data-target="cat-<%= cat.downcase %>">
2023
<%= cat %>
2124
</button>
2225
</li>
2326
<% end %>
27+
<% categories_soon.each do |cat| %>
28+
<li>
29+
<button class="shop-category-item" disabled>
30+
<span class="shop-category-item__label"><%= cat %></span>
31+
<img
32+
src="https://files.slack.com/files-pri/T09V59WQY1E-F0A73PBKWEN/1000_f_108839823_c2hrfq0hbz7wkf6ngjesajlakz74zm7b.jpg?pub_secret=76883edfeb"
33+
alt="Coming Soon"
34+
class="shop-category-item__badge">
35+
</button>
36+
</li>
37+
<% end %>
2438
</ul>
2539
</aside>
2640

@@ -32,7 +46,7 @@
3246
</div>
3347
</div>
3448

35-
<% categories.each_with_index do |cat, idx| %>
49+
<% categories_active.each_with_index do |cat, idx| %>
3650
<% item = @shop_items.find { |i| i.name.to_s.downcase.strip == cat.downcase } %>
3751
<% base_cost = (item&.cost || 0).to_i %>
3852
<div id="cat-<%= cat.downcase %>" class="shop-item-detail <%= 'is-active' if idx == 0 %>">
@@ -121,9 +135,6 @@
121135

122136
</section>
123137
</div>
124-
<div class="card" style="margin-top: 12px; background: #fff3cd; border: 1px solid #ffeeba; color: #856404; padding: 10px; text-align: center;">
125-
Working progress! We're building the shop page, more items will be added soon!
126-
</div>
127138
</main>
128139

129140
<!-- Item Modal -->
@@ -150,9 +161,7 @@
150161
</div>
151162
<%= form_with url: purchase_path, method: :post, local: true, id: "shop-modal-form" do %>
152163
<input type="hidden" name="item_id" id="shop-modal-item-id" value="">
153-
<input type="hidden" name="category" id="shop-modal-category" value="">
154164
<input type="hidden" name="variant" id="shop-modal-variant" value="">
155-
<input type="hidden" name="quantity" id="shop-modal-quantity" value="1">
156165
<button id="shop-modal-buy" type="submit" class="btn btn--primary btn--block">Purchase</button>
157166
<% end %>
158167
</div>

‎app/views/pages/signin.html.erb‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
</a>
88

99
<div class="signin-content">
10-
<img src="https://files.slack.com/files-pri/T09V59WQY1E-F0A6LSXCXPF/image.png?pub_secret=dc0d11081a" class="signin-crane-text" alt="Reboot">
10+
<img src="https://files.slack.com/files-pri/T09V59WQY1E-F0A6XFGE0M9/img_2185.png?pub_secret=1776d88b52" class="signin-crane-text" alt="Reboot">
1111

1212
<%= form_tag("/auth/hack_club", method: :post) do %>
1313
<button type="submit" class="signin-btn" style="background: transparent; padding: 0; box-shadow: none; border: none;">
@@ -23,5 +23,5 @@
2323
<p class="signin-subtitle">Restore old projects --> upgrade your desktop setup!</p>
2424
</div>
2525

26-
<img src="/images/signin/animal.png" class="signin-mole" alt="Mole">
26+
<!-- Corner images now handled globally in layout -->
2727
</div>

0 commit comments

Comments
 (0)