rails_tipjar 1.0.3 → 1.0.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- checksums.yaml +4 -4
- data/README.md +3 -2
- data/app/helpers/tipjar_helper.rb +2 -2
- data/index.html +803 -0
- data/lib/rails_tipjar/version.rb +1 -1
- metadata +3 -3
- data/rails_tipjar-1.0.2.gem +0 -0
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: a9ed6ef66307fcfc411261085d63d47db03e5b1eec57c18ac9ce09d00e2b9b88
|
|
4
|
+
data.tar.gz: 8206ee7011c23b59e0038ac580e8fe732cedc9c4fb5e284876b895c965c96eb1
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: f604fb762bd7950cf3d4eca97b1a98f956910b4239330a1d49e2a1c1ae6ea245bc9b954e1a7fcb0ffb06c798feafcaaaabb1208a09384ac47c0189fdeacc36f4
|
|
7
|
+
data.tar.gz: afaad68332124f981074c91c9e95e1ee144a1ba75b05d0b26b0e7f1cc3d0d0aaaaa1eed42b6e536cbff16b4b4e488eb1ea27831a98ddc7f907201703c497a9b4
|
data/README.md
CHANGED
|
@@ -4,8 +4,8 @@ A reusable, customizable tip jar feature for Rails applications. Add a beautiful
|
|
|
4
4
|
|
|
5
5
|
Hat example:
|
|
6
6
|
|Standard|Hovered|
|
|
7
|
-
|
|
8
|
-
|<img width="63" height="66" alt="Screenshot 2025-09-12 at 10 22 51 AM" src="https://github.com/user-attachments/assets/56ebad46-ce77-4a26-8d93-525ecea8ef6a" />|<img
|
|
7
|
+
|--------|-------|
|
|
8
|
+
|<img width="63" height="66" alt="Screenshot 2025-09-12 at 10 22 51 AM" src="https://github.com/user-attachments/assets/56ebad46-ce77-4a26-8d93-525ecea8ef6a" />|<img height="66" alt="Screenshot 2025-09-12 at 10 20 50 AM" src="https://github.com/user-attachments/assets/beebe18e-a5bb-486b-835b-0caf18813781" />|
|
|
9
9
|
|
|
10
10
|
## Features
|
|
11
11
|
|
|
@@ -224,6 +224,7 @@ You can also provide a custom SVG string for complete customization.
|
|
|
224
224
|
|
|
225
225
|
## Version History
|
|
226
226
|
|
|
227
|
+
- **v1.0.4** - Fixed Safari animation rendering issue with black backgrounds (added fill to animated coins)
|
|
227
228
|
- **v1.0.3** - Removed deprecated features: analytics, backwards compatibility helpers (tipjar_button, tipjar_link, tipjar_modal), and generators
|
|
228
229
|
- **v1.0.2** - Added new `:hat` icon option (busker-style upside-down hat with animated coin drop)
|
|
229
230
|
- **v1.0.1** - Changed default button text to "Tip Jar" and default icon to jar
|
|
@@ -291,7 +291,7 @@ module TipjarHelper
|
|
|
291
291
|
<ellipse cx="13" cy="19" rx="1.3" ry="0.4" stroke-linecap="round"/>
|
|
292
292
|
<!-- Falling coin - starts above jar outside -->
|
|
293
293
|
<g class="tipjar-coin-drop-new">
|
|
294
|
-
<ellipse cx="12" cy="1.5" rx="1.5" ry="0.5" stroke-linecap="round"/>
|
|
294
|
+
<ellipse cx="12" cy="1.5" rx="1.5" ry="0.5" stroke-linecap="round" fill="currentColor"/>
|
|
295
295
|
</g>
|
|
296
296
|
</svg>'
|
|
297
297
|
when :hat
|
|
@@ -344,7 +344,7 @@ module TipjarHelper
|
|
|
344
344
|
<ellipse cx="12" cy="17" rx="1.2" ry="0.35" stroke-linecap="round" fill="none"/>
|
|
345
345
|
<!-- Animated falling coin -->
|
|
346
346
|
<g class="hat-coin-drop">
|
|
347
|
-
<ellipse cx="12" cy="3" rx="1.5" ry="0.5" stroke-linecap="round" fill="
|
|
347
|
+
<ellipse cx="12" cy="3" rx="1.5" ry="0.5" stroke-linecap="round" fill="currentColor"/>
|
|
348
348
|
</g>
|
|
349
349
|
</svg>'
|
|
350
350
|
else
|
data/index.html
ADDED
|
@@ -0,0 +1,803 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8">
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
|
+
<title>Rails Tip Jar - Professional Tipping Solution for Rails Applications</title>
|
|
7
|
+
<style>
|
|
8
|
+
* {
|
|
9
|
+
margin: 0;
|
|
10
|
+
padding: 0;
|
|
11
|
+
box-sizing: border-box;
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
body {
|
|
15
|
+
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
|
|
16
|
+
line-height: 1.6;
|
|
17
|
+
color: #1a1a1a;
|
|
18
|
+
background: #ffffff;
|
|
19
|
+
min-height: 100vh;
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
.hero-gradient {
|
|
23
|
+
background: linear-gradient(180deg, #f8f9fa 0%, #ffffff 100%);
|
|
24
|
+
border-bottom: 1px solid #e5e7eb;
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
.container {
|
|
28
|
+
max-width: 1280px;
|
|
29
|
+
margin: 0 auto;
|
|
30
|
+
padding: 0 2rem;
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
header {
|
|
34
|
+
padding: 5rem 0 4rem;
|
|
35
|
+
text-align: center;
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
h1 {
|
|
39
|
+
font-size: 3.5rem;
|
|
40
|
+
font-weight: 700;
|
|
41
|
+
color: #111827;
|
|
42
|
+
margin-bottom: 1.5rem;
|
|
43
|
+
letter-spacing: -0.02em;
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
.tagline {
|
|
47
|
+
font-size: 1.25rem;
|
|
48
|
+
color: #6b7280;
|
|
49
|
+
margin-bottom: 3rem;
|
|
50
|
+
max-width: 600px;
|
|
51
|
+
margin-left: auto;
|
|
52
|
+
margin-right: auto;
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
.stats-row {
|
|
56
|
+
display: flex;
|
|
57
|
+
justify-content: center;
|
|
58
|
+
gap: 3rem;
|
|
59
|
+
margin-bottom: 3rem;
|
|
60
|
+
flex-wrap: wrap;
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
.stat {
|
|
64
|
+
text-align: center;
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
.stat-number {
|
|
68
|
+
font-size: 2rem;
|
|
69
|
+
font-weight: 700;
|
|
70
|
+
color: #3b82f6;
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
.stat-label {
|
|
74
|
+
font-size: 0.875rem;
|
|
75
|
+
color: #6b7280;
|
|
76
|
+
text-transform: uppercase;
|
|
77
|
+
letter-spacing: 0.05em;
|
|
78
|
+
}
|
|
79
|
+
|
|
80
|
+
.cta-buttons {
|
|
81
|
+
display: flex;
|
|
82
|
+
justify-content: center;
|
|
83
|
+
gap: 1rem;
|
|
84
|
+
flex-wrap: wrap;
|
|
85
|
+
}
|
|
86
|
+
|
|
87
|
+
.btn {
|
|
88
|
+
padding: 0.875rem 2rem;
|
|
89
|
+
border-radius: 8px;
|
|
90
|
+
text-decoration: none;
|
|
91
|
+
font-weight: 600;
|
|
92
|
+
transition: all 0.2s;
|
|
93
|
+
display: inline-flex;
|
|
94
|
+
align-items: center;
|
|
95
|
+
gap: 0.5rem;
|
|
96
|
+
font-size: 1rem;
|
|
97
|
+
}
|
|
98
|
+
|
|
99
|
+
.btn:hover {
|
|
100
|
+
transform: translateY(-1px);
|
|
101
|
+
box-shadow: 0 10px 25px rgba(0,0,0,0.1);
|
|
102
|
+
}
|
|
103
|
+
|
|
104
|
+
.btn-primary {
|
|
105
|
+
background: #3b82f6;
|
|
106
|
+
color: white;
|
|
107
|
+
border: 2px solid #3b82f6;
|
|
108
|
+
}
|
|
109
|
+
|
|
110
|
+
.btn-primary:hover {
|
|
111
|
+
background: #2563eb;
|
|
112
|
+
border-color: #2563eb;
|
|
113
|
+
}
|
|
114
|
+
|
|
115
|
+
.btn-secondary {
|
|
116
|
+
background: white;
|
|
117
|
+
color: #374151;
|
|
118
|
+
border: 2px solid #e5e7eb;
|
|
119
|
+
}
|
|
120
|
+
|
|
121
|
+
.btn-secondary:hover {
|
|
122
|
+
border-color: #9ca3af;
|
|
123
|
+
}
|
|
124
|
+
|
|
125
|
+
.section {
|
|
126
|
+
padding: 5rem 0;
|
|
127
|
+
}
|
|
128
|
+
|
|
129
|
+
.section-title {
|
|
130
|
+
font-size: 2.5rem;
|
|
131
|
+
font-weight: 700;
|
|
132
|
+
text-align: center;
|
|
133
|
+
margin-bottom: 1rem;
|
|
134
|
+
color: #111827;
|
|
135
|
+
}
|
|
136
|
+
|
|
137
|
+
.section-subtitle {
|
|
138
|
+
text-align: center;
|
|
139
|
+
color: #6b7280;
|
|
140
|
+
margin-bottom: 3rem;
|
|
141
|
+
max-width: 600px;
|
|
142
|
+
margin-left: auto;
|
|
143
|
+
margin-right: auto;
|
|
144
|
+
}
|
|
145
|
+
|
|
146
|
+
.features-grid {
|
|
147
|
+
display: grid;
|
|
148
|
+
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
|
|
149
|
+
gap: 2rem;
|
|
150
|
+
margin-bottom: 3rem;
|
|
151
|
+
}
|
|
152
|
+
|
|
153
|
+
.feature-card {
|
|
154
|
+
background: #ffffff;
|
|
155
|
+
padding: 2rem;
|
|
156
|
+
border-radius: 12px;
|
|
157
|
+
border: 1px solid #e5e7eb;
|
|
158
|
+
transition: all 0.3s;
|
|
159
|
+
}
|
|
160
|
+
|
|
161
|
+
.feature-card:hover {
|
|
162
|
+
box-shadow: 0 10px 40px rgba(0,0,0,0.05);
|
|
163
|
+
transform: translateY(-2px);
|
|
164
|
+
border-color: #d1d5db;
|
|
165
|
+
}
|
|
166
|
+
|
|
167
|
+
.feature-icon {
|
|
168
|
+
width: 48px;
|
|
169
|
+
height: 48px;
|
|
170
|
+
background: #eff6ff;
|
|
171
|
+
border-radius: 12px;
|
|
172
|
+
display: flex;
|
|
173
|
+
align-items: center;
|
|
174
|
+
justify-content: center;
|
|
175
|
+
margin-bottom: 1.5rem;
|
|
176
|
+
color: #3b82f6;
|
|
177
|
+
}
|
|
178
|
+
|
|
179
|
+
.feature-title {
|
|
180
|
+
font-size: 1.25rem;
|
|
181
|
+
font-weight: 600;
|
|
182
|
+
color: #111827;
|
|
183
|
+
margin-bottom: 0.75rem;
|
|
184
|
+
}
|
|
185
|
+
|
|
186
|
+
.feature-description {
|
|
187
|
+
color: #6b7280;
|
|
188
|
+
line-height: 1.7;
|
|
189
|
+
}
|
|
190
|
+
|
|
191
|
+
.demo-section {
|
|
192
|
+
background: #f9fafb;
|
|
193
|
+
border-radius: 16px;
|
|
194
|
+
padding: 3rem;
|
|
195
|
+
margin-bottom: 3rem;
|
|
196
|
+
}
|
|
197
|
+
|
|
198
|
+
.demo-grid {
|
|
199
|
+
display: grid;
|
|
200
|
+
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
|
|
201
|
+
gap: 2rem;
|
|
202
|
+
margin-top: 3rem;
|
|
203
|
+
}
|
|
204
|
+
|
|
205
|
+
.demo-item {
|
|
206
|
+
text-align: center;
|
|
207
|
+
display: flex;
|
|
208
|
+
flex-direction: column;
|
|
209
|
+
align-items: center;
|
|
210
|
+
gap: 1.5rem;
|
|
211
|
+
}
|
|
212
|
+
|
|
213
|
+
.tip-button-actual {
|
|
214
|
+
display: inline-flex;
|
|
215
|
+
align-items: center;
|
|
216
|
+
justify-content: center;
|
|
217
|
+
padding: 12px;
|
|
218
|
+
background-color: #3b82f6;
|
|
219
|
+
color: #ffffff;
|
|
220
|
+
border-radius: 9999px;
|
|
221
|
+
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
|
|
222
|
+
transition: all 0.3s ease;
|
|
223
|
+
cursor: pointer;
|
|
224
|
+
border: none;
|
|
225
|
+
font-size: 0.875rem;
|
|
226
|
+
font-weight: 500;
|
|
227
|
+
text-decoration: none;
|
|
228
|
+
box-sizing: border-box;
|
|
229
|
+
width: 48px;
|
|
230
|
+
height: 48px;
|
|
231
|
+
position: relative;
|
|
232
|
+
}
|
|
233
|
+
|
|
234
|
+
.tip-button-actual:hover {
|
|
235
|
+
transform: scale(1.05);
|
|
236
|
+
background-color: #2563eb;
|
|
237
|
+
padding: 12px 20px;
|
|
238
|
+
width: auto;
|
|
239
|
+
}
|
|
240
|
+
|
|
241
|
+
.tip-button-text {
|
|
242
|
+
position: absolute;
|
|
243
|
+
white-space: nowrap;
|
|
244
|
+
opacity: 0;
|
|
245
|
+
transition: opacity 0.3s ease;
|
|
246
|
+
margin-left: 8px;
|
|
247
|
+
pointer-events: none;
|
|
248
|
+
}
|
|
249
|
+
|
|
250
|
+
.tip-button-actual:hover .tip-button-text {
|
|
251
|
+
position: static;
|
|
252
|
+
opacity: 1;
|
|
253
|
+
}
|
|
254
|
+
|
|
255
|
+
.demo-label {
|
|
256
|
+
font-weight: 600;
|
|
257
|
+
color: #4b5563;
|
|
258
|
+
font-size: 0.875rem;
|
|
259
|
+
}
|
|
260
|
+
|
|
261
|
+
.code-section {
|
|
262
|
+
background: #ffffff;
|
|
263
|
+
padding: 4rem 0;
|
|
264
|
+
}
|
|
265
|
+
|
|
266
|
+
.code-examples {
|
|
267
|
+
display: grid;
|
|
268
|
+
gap: 2rem;
|
|
269
|
+
max-width: 900px;
|
|
270
|
+
margin: 0 auto;
|
|
271
|
+
}
|
|
272
|
+
|
|
273
|
+
.code-block {
|
|
274
|
+
background: #1e293b;
|
|
275
|
+
color: #e2e8f0;
|
|
276
|
+
padding: 1.5rem;
|
|
277
|
+
border-radius: 12px;
|
|
278
|
+
overflow-x: auto;
|
|
279
|
+
font-family: 'SF Mono', Monaco, 'Cascadia Code', monospace;
|
|
280
|
+
font-size: 0.875rem;
|
|
281
|
+
line-height: 1.7;
|
|
282
|
+
}
|
|
283
|
+
|
|
284
|
+
.code-block pre {
|
|
285
|
+
margin: 0;
|
|
286
|
+
}
|
|
287
|
+
|
|
288
|
+
.keyword { color: #7dd3fc; }
|
|
289
|
+
.string { color: #fbbf24; }
|
|
290
|
+
.symbol { color: #c084fc; }
|
|
291
|
+
.comment { color: #64748b; }
|
|
292
|
+
|
|
293
|
+
.providers-section {
|
|
294
|
+
text-align: center;
|
|
295
|
+
padding: 4rem 0;
|
|
296
|
+
background: #f9fafb;
|
|
297
|
+
border-radius: 16px;
|
|
298
|
+
margin: 3rem 0;
|
|
299
|
+
}
|
|
300
|
+
|
|
301
|
+
.providers-grid {
|
|
302
|
+
display: flex;
|
|
303
|
+
justify-content: center;
|
|
304
|
+
gap: 1.5rem;
|
|
305
|
+
flex-wrap: wrap;
|
|
306
|
+
margin: 2rem 0;
|
|
307
|
+
}
|
|
308
|
+
|
|
309
|
+
.provider-badge {
|
|
310
|
+
padding: 0.75rem 1.5rem;
|
|
311
|
+
background: white;
|
|
312
|
+
border: 1px solid #e5e7eb;
|
|
313
|
+
border-radius: 8px;
|
|
314
|
+
font-weight: 600;
|
|
315
|
+
color: #374151;
|
|
316
|
+
transition: all 0.2s;
|
|
317
|
+
}
|
|
318
|
+
|
|
319
|
+
.provider-badge:hover {
|
|
320
|
+
border-color: #3b82f6;
|
|
321
|
+
color: #3b82f6;
|
|
322
|
+
transform: translateY(-1px);
|
|
323
|
+
}
|
|
324
|
+
|
|
325
|
+
footer {
|
|
326
|
+
padding: 4rem 0 2rem;
|
|
327
|
+
border-top: 1px solid #e5e7eb;
|
|
328
|
+
text-align: center;
|
|
329
|
+
background: #fafafa;
|
|
330
|
+
}
|
|
331
|
+
|
|
332
|
+
.footer-links {
|
|
333
|
+
display: flex;
|
|
334
|
+
justify-content: center;
|
|
335
|
+
gap: 2rem;
|
|
336
|
+
margin-bottom: 2rem;
|
|
337
|
+
}
|
|
338
|
+
|
|
339
|
+
.footer-link {
|
|
340
|
+
color: #6b7280;
|
|
341
|
+
text-decoration: none;
|
|
342
|
+
transition: color 0.2s;
|
|
343
|
+
}
|
|
344
|
+
|
|
345
|
+
.footer-link:hover {
|
|
346
|
+
color: #3b82f6;
|
|
347
|
+
}
|
|
348
|
+
|
|
349
|
+
/* Animations for SVG icons */
|
|
350
|
+
@keyframes tipjar-pulse {
|
|
351
|
+
0%, 100% { opacity: 1; }
|
|
352
|
+
50% { opacity: 0.8; }
|
|
353
|
+
}
|
|
354
|
+
|
|
355
|
+
@keyframes tipjar-coin-drop-new {
|
|
356
|
+
0% {
|
|
357
|
+
transform: translateY(0px);
|
|
358
|
+
opacity: 0;
|
|
359
|
+
}
|
|
360
|
+
10% {
|
|
361
|
+
opacity: 1;
|
|
362
|
+
transform: translateY(2px);
|
|
363
|
+
}
|
|
364
|
+
30% {
|
|
365
|
+
transform: translateY(6px);
|
|
366
|
+
}
|
|
367
|
+
50% {
|
|
368
|
+
transform: translateY(10px);
|
|
369
|
+
opacity: 1;
|
|
370
|
+
}
|
|
371
|
+
70% {
|
|
372
|
+
transform: translateY(15.5px);
|
|
373
|
+
opacity: 1;
|
|
374
|
+
}
|
|
375
|
+
75% {
|
|
376
|
+
transform: translateY(16.3px);
|
|
377
|
+
opacity: 1;
|
|
378
|
+
}
|
|
379
|
+
80% {
|
|
380
|
+
transform: translateY(15.8px);
|
|
381
|
+
opacity: 0.8;
|
|
382
|
+
}
|
|
383
|
+
100% {
|
|
384
|
+
transform: translateY(16.3px);
|
|
385
|
+
opacity: 0;
|
|
386
|
+
}
|
|
387
|
+
}
|
|
388
|
+
|
|
389
|
+
@keyframes steam1 {
|
|
390
|
+
0% { opacity: 0; transform: translateY(0) translateX(0); }
|
|
391
|
+
20% { opacity: 0.8; }
|
|
392
|
+
50% { opacity: 0.6; transform: translateY(-3px) translateX(1px); }
|
|
393
|
+
80% { opacity: 0.3; }
|
|
394
|
+
100% { opacity: 0; transform: translateY(-8px) translateX(-1px); }
|
|
395
|
+
}
|
|
396
|
+
|
|
397
|
+
@keyframes steam2 {
|
|
398
|
+
0% { opacity: 0; transform: translateY(0) translateX(0); }
|
|
399
|
+
15% { opacity: 0.7; }
|
|
400
|
+
45% { opacity: 0.5; transform: translateY(-4px) translateX(-1px); }
|
|
401
|
+
75% { opacity: 0.2; }
|
|
402
|
+
100% { opacity: 0; transform: translateY(-9px) translateX(1px); }
|
|
403
|
+
}
|
|
404
|
+
|
|
405
|
+
@keyframes steam3 {
|
|
406
|
+
0% { opacity: 0; transform: translateY(0) translateX(0); }
|
|
407
|
+
25% { opacity: 0.6; }
|
|
408
|
+
55% { opacity: 0.4; transform: translateY(-3px) translateX(0.5px); }
|
|
409
|
+
85% { opacity: 0.1; }
|
|
410
|
+
100% { opacity: 0; transform: translateY(-7px) translateX(-0.5px); }
|
|
411
|
+
}
|
|
412
|
+
|
|
413
|
+
@keyframes hat-coin-drop {
|
|
414
|
+
0% {
|
|
415
|
+
transform: translateY(0px);
|
|
416
|
+
opacity: 0;
|
|
417
|
+
}
|
|
418
|
+
10% {
|
|
419
|
+
opacity: 1;
|
|
420
|
+
transform: translateY(1px);
|
|
421
|
+
}
|
|
422
|
+
50% {
|
|
423
|
+
transform: translateY(8px);
|
|
424
|
+
opacity: 1;
|
|
425
|
+
}
|
|
426
|
+
80% {
|
|
427
|
+
transform: translateY(13px);
|
|
428
|
+
opacity: 1;
|
|
429
|
+
}
|
|
430
|
+
100% {
|
|
431
|
+
transform: translateY(14px);
|
|
432
|
+
opacity: 0;
|
|
433
|
+
}
|
|
434
|
+
}
|
|
435
|
+
|
|
436
|
+
.steam1 { animation: steam1 3s ease-out infinite; }
|
|
437
|
+
.steam2 { animation: steam2 3s ease-out infinite 0.5s; }
|
|
438
|
+
.steam3 { animation: steam3 3s ease-out infinite 1s; }
|
|
439
|
+
.tipjar-coin-drop-new { animation: tipjar-coin-drop-new 2.5s ease-in-out infinite; }
|
|
440
|
+
.hat-coin-drop { animation: hat-coin-drop 2.5s ease-in infinite; }
|
|
441
|
+
|
|
442
|
+
.pulse-animation {
|
|
443
|
+
animation: tipjar-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
|
|
444
|
+
}
|
|
445
|
+
|
|
446
|
+
@media (max-width: 768px) {
|
|
447
|
+
h1 { font-size: 2.5rem; }
|
|
448
|
+
.tagline { font-size: 1.125rem; }
|
|
449
|
+
.container { padding: 0 1rem; }
|
|
450
|
+
.section { padding: 3rem 0; }
|
|
451
|
+
.features-grid { grid-template-columns: 1fr; }
|
|
452
|
+
}
|
|
453
|
+
</style>
|
|
454
|
+
</head>
|
|
455
|
+
<body>
|
|
456
|
+
<div class="hero-gradient">
|
|
457
|
+
<div class="container">
|
|
458
|
+
<header>
|
|
459
|
+
<h1>Rails Tip Jar</h1>
|
|
460
|
+
<p class="tagline">Add tip jars to your Rails app. Works with any payment link.</p>
|
|
461
|
+
|
|
462
|
+
<div class="stats-row">
|
|
463
|
+
<div class="stat">
|
|
464
|
+
<div class="stat-number">6</div>
|
|
465
|
+
<div class="stat-label">Animated Icons</div>
|
|
466
|
+
</div>
|
|
467
|
+
<div class="stat">
|
|
468
|
+
<div class="stat-number">0</div>
|
|
469
|
+
<div class="stat-label">Dependencies</div>
|
|
470
|
+
</div>
|
|
471
|
+
<div class="stat">
|
|
472
|
+
<div class="stat-number">∞</div>
|
|
473
|
+
<div class="stat-label">Payment Providers</div>
|
|
474
|
+
</div>
|
|
475
|
+
</div>
|
|
476
|
+
|
|
477
|
+
<div class="cta-buttons">
|
|
478
|
+
<a href="https://rubygems.org/gems/rails_tipjar" class="btn btn-primary">
|
|
479
|
+
<svg width="20" height="20" fill="currentColor" viewBox="0 0 24 24">
|
|
480
|
+
<path d="M7 13v-2h14v2H7zm0 6v-2h14v2H7zM7 7V5h14v2H7zM3 13v-2h2v2H3zm0 6v-2h2v2H3zM3 7V5h2v2H3z"/>
|
|
481
|
+
</svg>
|
|
482
|
+
Install Gem
|
|
483
|
+
</a>
|
|
484
|
+
<a href="https://github.com/justinpaulson/rails_tipjar" class="btn btn-secondary">
|
|
485
|
+
<svg width="20" height="20" fill="currentColor" viewBox="0 0 24 24">
|
|
486
|
+
<path d="M12 0C5.37 0 0 5.37 0 12c0 5.31 3.435 9.795 8.205 11.385.6.105.825-.255.825-.57 0-.285-.015-1.23-.015-2.235-3.015.555-3.795-.735-4.035-1.41-.135-.345-.72-1.41-1.23-1.695-.42-.225-1.02-.78-.015-.795.945-.015 1.62.87 1.845 1.23 1.08 1.815 2.805 1.305 3.495.99.105-.78.42-1.305.765-1.605-2.67-.3-5.46-1.335-5.46-5.925 0-1.305.465-2.385 1.23-3.225-.12-.3-.54-1.53.12-3.18 0 0 1.005-.315 3.3 1.23.96-.27 1.98-.405 3-.405s2.04.135 3 .405c2.295-1.56 3.3-1.23 3.3-1.23.66 1.65.24 2.88.12 3.18.765.84 1.23 1.905 1.23 3.225 0 4.605-2.805 5.625-5.475 5.925.435.375.81 1.095.81 2.22 0 1.605-.015 2.895-.015 3.3 0 .315.225.69.825.57A12.02 12.02 0 0024 12c0-6.63-5.37-12-12-12z"/>
|
|
487
|
+
</svg>
|
|
488
|
+
View Source
|
|
489
|
+
</a>
|
|
490
|
+
</div>
|
|
491
|
+
</header>
|
|
492
|
+
</div>
|
|
493
|
+
</div>
|
|
494
|
+
|
|
495
|
+
<div class="container">
|
|
496
|
+
<section class="section">
|
|
497
|
+
<h2 class="section-title">Live Examples</h2>
|
|
498
|
+
<p class="section-subtitle">Hover to see the expand effect</p>
|
|
499
|
+
|
|
500
|
+
<div class="demo-section">
|
|
501
|
+
<div class="demo-grid">
|
|
502
|
+
<div class="demo-item">
|
|
503
|
+
<div class="tip-button-actual">
|
|
504
|
+
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" width="24" height="24">
|
|
505
|
+
<defs>
|
|
506
|
+
<style>
|
|
507
|
+
.tipjar-coin-drop-new { animation: tipjar-coin-drop-new 2.5s ease-in-out infinite; }
|
|
508
|
+
</style>
|
|
509
|
+
</defs>
|
|
510
|
+
<rect x="9.5" y="3" width="5" height="1" rx="0.25" stroke-linecap="round" stroke-linejoin="round"/>
|
|
511
|
+
<path stroke-linecap="round" stroke-linejoin="round" d="M10 4v0.8M14 4v0.8"/>
|
|
512
|
+
<path stroke-linecap="round" stroke-linejoin="round" d="M10 4.8h4M9 5.5c-1 0 -2 0.5 -2 1v12.5a2 2 0 002 2h6a2 2 0 002-2V6.5c0-0.5 -1-1 -2-1"/>
|
|
513
|
+
<ellipse cx="10.5" cy="18.5" rx="1.5" ry="0.5" stroke-linecap="round"/>
|
|
514
|
+
<ellipse cx="13.5" cy="18.3" rx="1.5" ry="0.5" stroke-linecap="round"/>
|
|
515
|
+
<ellipse cx="12" cy="17.8" rx="1.5" ry="0.5" stroke-linecap="round"/>
|
|
516
|
+
<ellipse cx="11" cy="19" rx="1.3" ry="0.4" stroke-linecap="round"/>
|
|
517
|
+
<ellipse cx="13" cy="19" rx="1.3" ry="0.4" stroke-linecap="round"/>
|
|
518
|
+
<g class="tipjar-coin-drop-new">
|
|
519
|
+
<ellipse cx="12" cy="1.5" rx="1.5" ry="0.5" stroke-linecap="round"/>
|
|
520
|
+
</g>
|
|
521
|
+
</svg>
|
|
522
|
+
<span class="tip-button-text">Tip Jar</span>
|
|
523
|
+
</div>
|
|
524
|
+
<span class="demo-label">Jar (Default)</span>
|
|
525
|
+
</div>
|
|
526
|
+
|
|
527
|
+
<div class="demo-item">
|
|
528
|
+
<div class="tip-button-actual" style="background-color: #10b981;">
|
|
529
|
+
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" width="24" height="24">
|
|
530
|
+
<defs>
|
|
531
|
+
<style>
|
|
532
|
+
.steam1 { animation: steam1 3s ease-out infinite; }
|
|
533
|
+
.steam2 { animation: steam2 3s ease-out infinite 0.5s; }
|
|
534
|
+
.steam3 { animation: steam3 3s ease-out infinite 1s; }
|
|
535
|
+
</style>
|
|
536
|
+
</defs>
|
|
537
|
+
<path class="steam1" d="M8 9c0.5-0.5 0.5-1 0-1.5s-0.5-1 0-1.5s0.5-1 0-1.5" stroke-linecap="round" fill="none" opacity="0"/>
|
|
538
|
+
<path class="steam2" d="M12 8.5c-0.3-0.4 -0.3-0.8 0-1.2s0.3-0.8 0-1.2s-0.3-0.8 0-1.2" stroke-linecap="round" fill="none" opacity="0"/>
|
|
539
|
+
<path class="steam3" d="M15.5 9c0.4-0.3 0.4-0.7 0-1s-0.4-0.7 0-1s0.4-0.7 0-1" stroke-linecap="round" fill="none" opacity="0"/>
|
|
540
|
+
<path stroke-linecap="round" stroke-linejoin="round" d="M6 10h12v7a3 3 0 01-3 3H9a3 3 0 01-3-3v-7z"/>
|
|
541
|
+
<path stroke-linecap="round" stroke-linejoin="round" d="M18 10h1.5a2.5 2.5 0 010 5H18"/>
|
|
542
|
+
<path stroke-linecap="round" stroke-linejoin="round" d="M4 20h16"/>
|
|
543
|
+
<path stroke-linecap="round" stroke-linejoin="round" d="M8 12h8" opacity="0.3"/>
|
|
544
|
+
</svg>
|
|
545
|
+
<span class="tip-button-text">Buy Coffee</span>
|
|
546
|
+
</div>
|
|
547
|
+
<span class="demo-label">Coffee</span>
|
|
548
|
+
</div>
|
|
549
|
+
|
|
550
|
+
<div class="demo-item">
|
|
551
|
+
<div class="tip-button-actual" style="background-color: #ef4444;">
|
|
552
|
+
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" width="24" height="24">
|
|
553
|
+
<path stroke-linecap="round" stroke-linejoin="round" d="M21 8.5c0-2.485-2.099-4.5-4.688-4.5-1.935 0-3.597 1.126-4.312 2.733-.715-1.607-2.377-2.733-4.313-2.733C5.1 4 3 6.015 3 8.5c0 7.5 9 11.5 9 11.5s9-4 9-11.5z" />
|
|
554
|
+
</svg>
|
|
555
|
+
<span class="tip-button-text">Support</span>
|
|
556
|
+
</div>
|
|
557
|
+
<span class="demo-label">Heart</span>
|
|
558
|
+
</div>
|
|
559
|
+
|
|
560
|
+
<div class="demo-item">
|
|
561
|
+
<div class="tip-button-actual" style="background-color: #f59e0b;">
|
|
562
|
+
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" width="24" height="24">
|
|
563
|
+
<path stroke-linecap="round" stroke-linejoin="round" d="M11.48 3.499a.562.562 0 011.04 0l2.125 5.111a.563.563 0 00.475.345l5.518.442c.499.04.701.663.321.988l-4.204 3.602a.563.563 0 00-.182.557l1.285 5.385a.562.562 0 01-.84.61l-4.725-2.885a.563.563 0 00-.586 0L6.982 20.54a.562.562 0 01-.84-.61l1.285-5.386a.562.562 0 00-.182-.557l-4.204-3.602a.563.563 0 01.321-.988l5.518-.442a.563.563 0 00.475-.345L11.48 3.5z" />
|
|
564
|
+
</svg>
|
|
565
|
+
<span class="tip-button-text">Rate Us</span>
|
|
566
|
+
</div>
|
|
567
|
+
<span class="demo-label">Star</span>
|
|
568
|
+
</div>
|
|
569
|
+
|
|
570
|
+
<div class="demo-item">
|
|
571
|
+
<div class="tip-button-actual" style="background-color: #22c55e;">
|
|
572
|
+
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" width="24" height="24">
|
|
573
|
+
<path stroke-linecap="round" stroke-linejoin="round" d="M12 6v12m-3-2.818l.879.659c1.171.879 3.07.879 4.242 0 1.172-.879 1.172-2.303 0-3.182C13.536 12.219 12.768 12 12 12c-.725 0-1.45-.22-2.003-.659-1.106-.879-1.106-2.303 0-3.182s2.9-.879 4.006 0l.415.33M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
|
|
574
|
+
</svg>
|
|
575
|
+
<span class="tip-button-text">Donate</span>
|
|
576
|
+
</div>
|
|
577
|
+
<span class="demo-label">Dollar</span>
|
|
578
|
+
</div>
|
|
579
|
+
|
|
580
|
+
<div class="demo-item">
|
|
581
|
+
<div class="tip-button-actual" style="background-color: #8b5cf6;">
|
|
582
|
+
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" width="24" height="24">
|
|
583
|
+
<defs>
|
|
584
|
+
<style>
|
|
585
|
+
.hat-coin-drop { animation: hat-coin-drop 2.5s ease-in infinite; }
|
|
586
|
+
</style>
|
|
587
|
+
</defs>
|
|
588
|
+
<ellipse cx="12" cy="8" rx="9" ry="2" stroke-linecap="round" stroke-linejoin="round" fill="none"/>
|
|
589
|
+
<path stroke-linecap="round" stroke-linejoin="round" fill="none" d="M3 8c0 0.5 0 0.5 0 0.5"/>
|
|
590
|
+
<path stroke-linecap="round" stroke-linejoin="round" fill="none" d="M21 8c0 0.5 0 0.5 0 0.5"/>
|
|
591
|
+
<path stroke-linecap="round" stroke-linejoin="round" fill="none" d="M6.5 8.5c0 0 0.5 8 1.5 9.5c0.5 0.75 1.5 1 4 1s3.5-0.25 4-1c1-1.5 1.5-9.5 1.5-9.5"/>
|
|
592
|
+
<ellipse cx="12" cy="9" rx="5.5" ry="1.3" stroke-linecap="round" stroke-linejoin="round" fill="none" opacity="0.4"/>
|
|
593
|
+
<path stroke-linecap="round" stroke-linejoin="round" fill="none" d="M10 10c0 0 0.2 5 0.3 6" opacity="0.3"/>
|
|
594
|
+
<path stroke-linecap="round" stroke-linejoin="round" fill="none" d="M14 10c0 0 -0.2 5 -0.3 6" opacity="0.3"/>
|
|
595
|
+
<ellipse cx="11" cy="16" rx="1.3" ry="0.4" stroke-linecap="round" fill="none"/>
|
|
596
|
+
<ellipse cx="13" cy="15.5" rx="1.3" ry="0.4" stroke-linecap="round" fill="none"/>
|
|
597
|
+
<ellipse cx="12" cy="17" rx="1.2" ry="0.35" stroke-linecap="round" fill="none"/>
|
|
598
|
+
<g class="hat-coin-drop">
|
|
599
|
+
<ellipse cx="12" cy="3" rx="1.5" ry="0.5" stroke-linecap="round" fill="none"/>
|
|
600
|
+
</g>
|
|
601
|
+
</svg>
|
|
602
|
+
<span class="tip-button-text">Tip Me</span>
|
|
603
|
+
</div>
|
|
604
|
+
<span class="demo-label">Hat</span>
|
|
605
|
+
</div>
|
|
606
|
+
</div>
|
|
607
|
+
</div>
|
|
608
|
+
</section>
|
|
609
|
+
|
|
610
|
+
<section class="section">
|
|
611
|
+
<h2 class="section-title">Features</h2>
|
|
612
|
+
<p class="section-subtitle">Everything you need, nothing you don't</p>
|
|
613
|
+
|
|
614
|
+
<div class="features-grid">
|
|
615
|
+
<div class="feature-card">
|
|
616
|
+
<div class="feature-icon">
|
|
617
|
+
<svg width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
|
|
618
|
+
<path stroke-linecap="round" stroke-linejoin="round" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"/>
|
|
619
|
+
</svg>
|
|
620
|
+
</div>
|
|
621
|
+
<h3 class="feature-title">No Payment Code</h3>
|
|
622
|
+
<p class="feature-description">Payment providers handle all transactions and compliance.</p>
|
|
623
|
+
</div>
|
|
624
|
+
|
|
625
|
+
<div class="feature-card">
|
|
626
|
+
<div class="feature-icon">
|
|
627
|
+
<svg width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
|
|
628
|
+
<path stroke-linecap="round" stroke-linejoin="round" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"/>
|
|
629
|
+
</svg>
|
|
630
|
+
</div>
|
|
631
|
+
<h3 class="feature-title">Zero Dependencies</h3>
|
|
632
|
+
<p class="feature-description">Self-contained with inline styles. Just Rails.</p>
|
|
633
|
+
</div>
|
|
634
|
+
|
|
635
|
+
<div class="feature-card">
|
|
636
|
+
<div class="feature-icon">
|
|
637
|
+
<svg width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
|
|
638
|
+
<path stroke-linecap="round" stroke-linejoin="round" d="M13 10V3L4 14h7v7l9-11h-7z"/>
|
|
639
|
+
</svg>
|
|
640
|
+
</div>
|
|
641
|
+
<h3 class="feature-title">Stimulus.js</h3>
|
|
642
|
+
<p class="feature-description">Uses Rails' standard JavaScript framework.</p>
|
|
643
|
+
</div>
|
|
644
|
+
|
|
645
|
+
<div class="feature-card">
|
|
646
|
+
<div class="feature-icon">
|
|
647
|
+
<svg width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
|
|
648
|
+
<path stroke-linecap="round" stroke-linejoin="round" d="M7 21a4 4 0 01-4-4V5a2 2 0 012-2h4a2 2 0 012 2v12a4 4 0 01-4 4zm0 0h12a2 2 0 002-2v-4a2 2 0 00-2-2h-2.343M11 7.343l1.657-1.657a2 2 0 012.828 0l2.829 2.829a2 2 0 010 2.828l-8.486 8.485M7 17h.01"/>
|
|
649
|
+
</svg>
|
|
650
|
+
</div>
|
|
651
|
+
<h3 class="feature-title">Customizable</h3>
|
|
652
|
+
<p class="feature-description">Control colors, position, animations, and icons.</p>
|
|
653
|
+
</div>
|
|
654
|
+
|
|
655
|
+
<div class="feature-card">
|
|
656
|
+
<div class="feature-icon">
|
|
657
|
+
<svg width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
|
|
658
|
+
<path stroke-linecap="round" stroke-linejoin="round" d="M12 18h.01M8 21h8a2 2 0 002-2V5a2 2 0 00-2-2H8a2 2 0 00-2 2v14a2 2 0 002 2z"/>
|
|
659
|
+
</svg>
|
|
660
|
+
</div>
|
|
661
|
+
<h3 class="feature-title">Responsive</h3>
|
|
662
|
+
<p class="feature-description">Works on all devices.</p>
|
|
663
|
+
</div>
|
|
664
|
+
|
|
665
|
+
<div class="feature-card">
|
|
666
|
+
<div class="feature-icon">
|
|
667
|
+
<svg width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
|
|
668
|
+
<path stroke-linecap="round" stroke-linejoin="round" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/>
|
|
669
|
+
</svg>
|
|
670
|
+
</div>
|
|
671
|
+
<h3 class="feature-title">Any Provider</h3>
|
|
672
|
+
<p class="feature-description">Stripe, PayPal, Ko-fi, or any payment link.</p>
|
|
673
|
+
</div>
|
|
674
|
+
</div>
|
|
675
|
+
</section>
|
|
676
|
+
|
|
677
|
+
<section class="code-section">
|
|
678
|
+
<div class="container">
|
|
679
|
+
<h2 class="section-title">Usage</h2>
|
|
680
|
+
<p class="section-subtitle"></p>
|
|
681
|
+
|
|
682
|
+
<div class="code-examples">
|
|
683
|
+
<div class="code-block">
|
|
684
|
+
<pre><span class="comment"># Gemfile</span>
|
|
685
|
+
<span class="keyword">gem</span> <span class="string">'rails_tipjar'</span>
|
|
686
|
+
|
|
687
|
+
<span class="comment"># Then run:</span>
|
|
688
|
+
<span class="comment"># bundle install</span></pre>
|
|
689
|
+
</div>
|
|
690
|
+
|
|
691
|
+
<div class="code-block">
|
|
692
|
+
<pre><span class="comment"># Basic implementation</span>
|
|
693
|
+
<%= <span class="symbol">tip_jar</span> <span class="symbol">payment_link:</span> <span class="string">'https://your.payment.link'</span> %>
|
|
694
|
+
|
|
695
|
+
<span class="comment"># With customization</span>
|
|
696
|
+
<%= <span class="symbol">tip_jar</span>
|
|
697
|
+
<span class="symbol">payment_link:</span> <span class="string">'https://your.payment.link'</span>,
|
|
698
|
+
<span class="symbol">icon:</span> <span class="symbol">:coffee</span>,
|
|
699
|
+
<span class="symbol">color:</span> <span class="string">'#10b981'</span>,
|
|
700
|
+
<span class="symbol">message:</span> <span class="string">'Buy me a coffee'</span>,
|
|
701
|
+
<span class="symbol">pulse:</span> <span class="keyword">true</span> %>
|
|
702
|
+
|
|
703
|
+
<span class="comment"># Modal with multiple amounts</span>
|
|
704
|
+
<%= <span class="symbol">tip_jar</span>
|
|
705
|
+
<span class="symbol">payment_links:</span> {
|
|
706
|
+
<span class="symbol">small:</span> <span class="string">'https://link.com/5'</span>,
|
|
707
|
+
<span class="symbol">medium:</span> <span class="string">'https://link.com/10'</span>,
|
|
708
|
+
<span class="symbol">large:</span> <span class="string">'https://link.com/25'</span>
|
|
709
|
+
},
|
|
710
|
+
<span class="symbol">modal_title:</span> <span class="string">'Support Development'</span> %></pre>
|
|
711
|
+
</div>
|
|
712
|
+
</div>
|
|
713
|
+
</div>
|
|
714
|
+
</section>
|
|
715
|
+
|
|
716
|
+
</div>
|
|
717
|
+
|
|
718
|
+
<!-- Actual floating tip jar button -->
|
|
719
|
+
<a href="https://buy.stripe.com/6oUcN40FI8Vyc9p4AOfrW03"
|
|
720
|
+
target="_blank"
|
|
721
|
+
rel="noopener"
|
|
722
|
+
class="tipjar-button-floating"
|
|
723
|
+
style="position: fixed; bottom: 1rem; right: 1rem; z-index: 1000; display: inline-flex; align-items: center; justify-content: center; padding: 12px; background-color: #3b82f6; color: #ffffff; border-radius: 9999px; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); transition: all 0.3s ease; cursor: pointer; border: none; font-size: 0.875rem; font-weight: 500; text-decoration: none; box-sizing: border-box; animation: tipjar-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;"
|
|
724
|
+
onmouseover="this.style.backgroundColor='#2563eb'; this.style.transform='scale(1.05)'; this.style.padding='12px 20px'; this.querySelector('.tipjar-text').style.maxWidth='200px'; this.querySelector('.tipjar-text').style.marginLeft='0.5rem';"
|
|
725
|
+
onmouseout="this.style.backgroundColor='#3b82f6'; this.style.transform='scale(1)'; this.style.padding='12px'; this.querySelector('.tipjar-text').style.maxWidth='0'; this.querySelector('.tipjar-text').style.marginLeft='0';">
|
|
726
|
+
<span style="display: inline-flex; align-items: center; justify-content: center; width: 1.5rem; height: 1.5rem;">
|
|
727
|
+
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" style="width: 24px; height: 24px;">
|
|
728
|
+
<defs>
|
|
729
|
+
<style>
|
|
730
|
+
@keyframes tipjar-coin-drop-floating {
|
|
731
|
+
0% {
|
|
732
|
+
transform: translateY(0px);
|
|
733
|
+
opacity: 0;
|
|
734
|
+
}
|
|
735
|
+
10% {
|
|
736
|
+
opacity: 1;
|
|
737
|
+
transform: translateY(2px);
|
|
738
|
+
}
|
|
739
|
+
30% {
|
|
740
|
+
transform: translateY(6px);
|
|
741
|
+
}
|
|
742
|
+
50% {
|
|
743
|
+
transform: translateY(10px);
|
|
744
|
+
opacity: 1;
|
|
745
|
+
}
|
|
746
|
+
70% {
|
|
747
|
+
transform: translateY(15.5px);
|
|
748
|
+
opacity: 1;
|
|
749
|
+
}
|
|
750
|
+
75% {
|
|
751
|
+
transform: translateY(16.3px);
|
|
752
|
+
opacity: 1;
|
|
753
|
+
}
|
|
754
|
+
80% {
|
|
755
|
+
transform: translateY(15.8px);
|
|
756
|
+
opacity: 0.8;
|
|
757
|
+
}
|
|
758
|
+
100% {
|
|
759
|
+
transform: translateY(16.3px);
|
|
760
|
+
opacity: 0;
|
|
761
|
+
}
|
|
762
|
+
}
|
|
763
|
+
.tipjar-coin-drop-floating {
|
|
764
|
+
animation: tipjar-coin-drop-floating 2.5s ease-in-out infinite;
|
|
765
|
+
}
|
|
766
|
+
</style>
|
|
767
|
+
</defs>
|
|
768
|
+
<!-- Jar lid -->
|
|
769
|
+
<rect x="9.5" y="3" width="5" height="1" rx="0.25" stroke-linecap="round" stroke-linejoin="round"/>
|
|
770
|
+
<!-- Jar threads/neck -->
|
|
771
|
+
<path stroke-linecap="round" stroke-linejoin="round" d="M10 4v0.8M14 4v0.8"/>
|
|
772
|
+
<!-- Jar body - much fatter with short taper -->
|
|
773
|
+
<path stroke-linecap="round" stroke-linejoin="round" d="M10 4.8h4M9 5.5c-1 0 -2 0.5 -2 1v12.5a2 2 0 002 2h6a2 2 0 002-2V6.5c0-0.5 -1-1 -2-1"/>
|
|
774
|
+
<!-- Coins at bottom - pile -->
|
|
775
|
+
<ellipse cx="10.5" cy="18.5" rx="1.5" ry="0.5" stroke-linecap="round"/>
|
|
776
|
+
<ellipse cx="13.5" cy="18.3" rx="1.5" ry="0.5" stroke-linecap="round"/>
|
|
777
|
+
<ellipse cx="12" cy="17.8" rx="1.5" ry="0.5" stroke-linecap="round"/>
|
|
778
|
+
<ellipse cx="11" cy="19" rx="1.3" ry="0.4" stroke-linecap="round"/>
|
|
779
|
+
<ellipse cx="13" cy="19" rx="1.3" ry="0.4" stroke-linecap="round"/>
|
|
780
|
+
<!-- Falling coin - starts above jar outside -->
|
|
781
|
+
<g class="tipjar-coin-drop-floating">
|
|
782
|
+
<ellipse cx="12" cy="1.5" rx="1.5" ry="0.5" stroke-linecap="round"/>
|
|
783
|
+
</g>
|
|
784
|
+
</svg>
|
|
785
|
+
</span>
|
|
786
|
+
<span class="tipjar-text" style="white-space: nowrap; max-width: 0; overflow: hidden; transition: all 0.3s ease; margin-left: 0;">Tip Jar</span>
|
|
787
|
+
</a>
|
|
788
|
+
|
|
789
|
+
<footer>
|
|
790
|
+
<div class="container">
|
|
791
|
+
<div class="footer-links">
|
|
792
|
+
<a href="https://github.com/justinpaulson/rails_tipjar#readme" class="footer-link">Documentation</a>
|
|
793
|
+
<a href="https://rubygems.org/gems/rails_tipjar" class="footer-link">RubyGems</a>
|
|
794
|
+
<a href="https://github.com/justinpaulson/rails_tipjar/issues" class="footer-link">Issues</a>
|
|
795
|
+
<a href="https://github.com/justinpaulson/rails_tipjar/blob/main/LICENSE" class="footer-link">MIT License</a>
|
|
796
|
+
</div>
|
|
797
|
+
<p style="color: #6b7280;">
|
|
798
|
+
Created by <a href="https://github.com/justinpaulson" style="color: #3b82f6; text-decoration: none;">Justin Paulson</a> • Version 1.0.3
|
|
799
|
+
</p>
|
|
800
|
+
</div>
|
|
801
|
+
</footer>
|
|
802
|
+
</body>
|
|
803
|
+
</html>
|
data/lib/rails_tipjar/version.rb
CHANGED
metadata
CHANGED
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
|
2
2
|
name: rails_tipjar
|
|
3
3
|
version: !ruby/object:Gem::Version
|
|
4
|
-
version: 1.0.
|
|
4
|
+
version: 1.0.4
|
|
5
5
|
platform: ruby
|
|
6
6
|
authors:
|
|
7
7
|
- Justin Paulson
|
|
8
8
|
autorequire:
|
|
9
9
|
bindir: exe
|
|
10
10
|
cert_chain: []
|
|
11
|
-
date: 2025-
|
|
11
|
+
date: 2025-11-03 00:00:00.000000000 Z
|
|
12
12
|
dependencies:
|
|
13
13
|
- !ruby/object:Gem::Dependency
|
|
14
14
|
name: rails
|
|
@@ -55,10 +55,10 @@ files:
|
|
|
55
55
|
- app/views/tipjar/_modal.html.erb
|
|
56
56
|
- blog_post.md
|
|
57
57
|
- config/importmap.rb
|
|
58
|
+
- index.html
|
|
58
59
|
- lib/rails_tipjar.rb
|
|
59
60
|
- lib/rails_tipjar/engine.rb
|
|
60
61
|
- lib/rails_tipjar/version.rb
|
|
61
|
-
- rails_tipjar-1.0.2.gem
|
|
62
62
|
- sig/rails_tipjar.rbs
|
|
63
63
|
homepage: https://github.com/justinpaulson/rails_tipjar
|
|
64
64
|
licenses: []
|
data/rails_tipjar-1.0.2.gem
DELETED
|
Binary file
|