-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
234 lines (216 loc) · 9.35 KB
/
Copy pathindex.html
File metadata and controls
234 lines (216 loc) · 9.35 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Lanyard - SwiftGG</title>
<meta name="description" content="Lanyard is the digital business card for iOS developers. Show who you are and what you build." />
<link rel="icon" type="image/png" href="assets/icon.png" />
<link rel="apple-touch-icon" href="assets/icon.png" />
<!-- Figtree -->
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Figtree:wght@400;500;600;700;800&display=swap" rel="stylesheet" />
<style>
:root {
--ink: #16161a;
--muted: #9a9aa2;
--hairline: rgba(0, 0, 0, 0.09);
--page-bg: #fcfaff;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; }
body {
font-family: "Figtree", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
background: var(--page-bg);
color: var(--ink);
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
min-height: 100vh; /* fallback for older browsers */
min-height: 100lvh; /* fill the FULL screen so the hand reaches the
physical bottom, tucking under Safari's bottom bar */
padding-top: env(safe-area-inset-top);
display: flex;
flex-direction: column;
align-items: center;
overflow-x: hidden;
}
/* ---------- Brand lockup ---------- */
.brand {
display: flex;
align-items: center;
gap: 11px;
padding: 24px 0 12px;
z-index: 5;
}
.brand img {
width: 40px;
height: 40px;
border-radius: 9px;
}
.brand .wordmark {
font-weight: 700; /* Figtree Bold */
font-size: 25px;
letter-spacing: -0.02em;
}
/* ---------- Stage : mockup + call to action ---------- */
.stage {
position: relative;
width: 100%;
flex: 1;
min-height: 0;
display: flex;
flex-direction: column-reverse; /* mobile: text on top, image below */
align-items: center;
}
/* Image keeps its native aspect ratio (never distorted); on mobile it
fills the remaining height and sits flush with the bottom of the screen */
.device {
display: block;
width: 100%;
flex: 1 1 auto;
min-height: 0;
object-fit: contain;
object-position: center bottom;
user-select: none;
-webkit-user-drag: none;
}
/* ---------- Call to action ---------- */
.cta {
flex: 0 0 auto;
width: 100%;
max-width: 340px;
margin: 16px auto 22px;
display: flex;
flex-direction: column;
gap: 12px;
text-align: center;
}
.slogan {
font-weight: 600;
font-size: 21px;
line-height: 1.3;
color: var(--ink);
letter-spacing: -0.015em;
margin-bottom: 6px;
}
.subtitle {
font-weight: 400;
font-size: 14.5px;
line-height: 1.5;
color: var(--muted);
margin-bottom: 18px;
letter-spacing: 0.005em;
}
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
width: 100%;
height: 52px;
border-radius: 14px;
font-family: inherit;
font-weight: 500;
font-size: 15.5px;
letter-spacing: 0.005em;
text-decoration: none;
cursor: pointer;
transition: transform .15s ease, box-shadow .25s ease, background .2s ease;
}
.btn:active { transform: translateY(1px); }
.btn svg { width: 19px; height: 19px; flex: none; }
/* Primary — download iOS (placeholder) */
.btn-primary {
background: var(--ink);
color: #fff;
box-shadow: 0 10px 26px rgba(0, 0, 0, .16);
}
.btn-primary[aria-disabled="true"] { cursor: default; }
.btn-primary:hover { box-shadow: 0 12px 30px rgba(0, 0, 0, .2); }
.btn-primary .pill {
font-size: 10.5px;
font-weight: 600;
letter-spacing: .05em;
text-transform: uppercase;
padding: 2px 7px;
border-radius: 999px;
background: rgba(255, 255, 255, .18);
}
/* Secondary — web version */
.btn-secondary {
background: #fff;
color: var(--ink);
border: 1px solid var(--hairline);
box-shadow: 0 6px 18px rgba(0, 0, 0, .05);
}
.btn-secondary:hover { border-color: rgba(0, 0, 0, .18); }
/* ===================================================== */
/* Desktop : image full height, CTA to the right of wrist */
/* ===================================================== */
@media (min-width: 768px) {
body { justify-content: center; }
.brand {
position: fixed;
top: 36px;
left: 44px;
padding: 0;
}
.stage {
height: 100vh;
width: fit-content;
flex-direction: row;
align-items: stretch;
margin: 0 auto;
}
.device {
flex: 0 0 auto;
height: 100vh;
width: auto;
max-width: none;
object-fit: fill;
}
.cta {
position: absolute;
left: 72%;
top: 75%;
transform: translateY(-50%);
width: 300px;
max-width: none;
margin: 0;
text-align: left;
}
.slogan {
font-size: 25px;
margin-bottom: 7px;
}
}
</style>
</head>
<body>
<header class="brand">
<img src="assets/icon.png" alt="Lanyard app icon" />
<span class="wordmark">Lanyard</span>
</header>
<main class="stage">
<img class="device" src="assets/hand.png" alt="A hand holding a phone running the Lanyard app" />
<div class="cta">
<h1 class="slogan">The digital business card for iOS developers.</h1>
<p class="subtitle">Show who you are and what you build — then share it with a single tap.</p>
<a class="btn btn-primary" aria-disabled="true" role="button" tabindex="-1" href="https://apps.apple.com/us/app/lanyard-swiftgg/id6772675904">
<svg viewBox="0 0 50 50" fill="currentColor" aria-hidden="true">
<path d="M 44.527344 34.75 C 43.449219 37.144531 42.929688 38.214844 41.542969 40.328125 C 39.601563 43.28125 36.863281 46.96875 33.480469 46.992188 C 30.46875 47.019531 29.691406 45.027344 25.601563 45.0625 C 21.515625 45.082031 20.664063 47.03125 17.648438 47 C 14.261719 46.96875 11.671875 43.648438 9.730469 40.699219 C 4.300781 32.429688 3.726563 22.734375 7.082031 17.578125 C 9.457031 13.921875 13.210938 11.773438 16.738281 11.773438 C 20.332031 11.773438 22.589844 13.746094 25.558594 13.746094 C 28.441406 13.746094 30.195313 11.769531 34.351563 11.769531 C 37.492188 11.769531 40.8125 13.480469 43.1875 16.433594 C 35.421875 20.691406 36.683594 31.78125 44.527344 34.75 Z M 31.195313 8.46875 C 32.707031 6.527344 33.855469 3.789063 33.4375 1 C 30.972656 1.167969 28.089844 2.742188 26.40625 4.78125 C 24.878906 6.640625 23.613281 9.398438 24.105469 12.066406 C 26.796875 12.152344 29.582031 10.546875 31.195313 8.46875 Z"></path>
</svg>
<span>Download for iOS</span>
<!-- <span class="pill">Soon</span> -->
</a>
<a class="btn btn-secondary" href="https://event.swiftgg.team">
<svg viewBox="0 0 30 30" fill="currentColor" aria-hidden="true">
<path d="M 15 3 C 8.383 3 3 8.383 3 15 C 3 21.617 8.383 27 15 27 C 16.038 27 17.039 26.854469 18 26.605469 L 18 21.361328 C 17.212 23.604328 16.073 25 15 25 C 13.722 25 12.344938 23.039 11.585938 20 L 18 20 L 18 18 L 11.201172 18 C 11.072172 17.061 11 16.055 11 15 C 11 13.935949 11.091747 12.94581 11.222656 12 L 18.777344 12 C 18.908253 12.94581 19 13.935949 19 15 C 19 15.274 18.981656 15.534734 18.972656 15.802734 C 19.507656 15.308734 20.216 15 21 15 C 21 13.953941 20.933063 12.954186 20.818359 12 L 24.537109 12 C 24.836002 12.947479 25 13.954905 25 15 C 25 15.695 24.921156 16.370391 24.785156 17.025391 L 26.535156 18.273438 C 26.831156 17.231438 27 16.136 27 15 C 27 8.383 21.617 3 15 3 z M 15 5 C 16.274833 5 17.634576 6.9742201 18.394531 10 L 11.605469 10 C 12.365424 6.9742201 13.725167 5 15 5 z M 11.0625 5.8105469 C 10.39859 6.9380498 9.8705849 8.364904 9.5136719 10 L 6.3457031 10 C 7.4223535 8.1452689 9.0770161 6.6647343 11.0625 5.8105469 z M 18.9375 5.8105469 C 20.922984 6.6647343 22.577646 8.1452689 23.654297 10 L 20.486328 10 C 20.129415 8.364904 19.60141 6.9380498 18.9375 5.8105469 z M 5.4628906 12 L 9.1816406 12 C 9.0669367 12.954186 9 13.953941 9 15 C 9 16.046 9.0676406 17.045 9.1816406 18 L 5.4609375 18 C 5.1629375 17.052 5 16.045 5 15 C 5 13.954905 5.1639984 12.947479 5.4628906 12 z M 21.015625 16.988281 A 1.0001 1.0001 0 0 0 20 18.095703 L 20 27 C 20 27.552 20.448 28 21 28 C 21.288 28 21.542609 27.874688 21.724609 27.679688 L 21.730469 27.681641 L 23.611328 25.458984 L 25.605469 29.447266 A 1.0001163 1.0001163 0 1 0 27.394531 28.552734 L 25.359375 24.484375 L 28.275391 23.960938 L 28.277344 23.943359 C 28.691344 23.822359 29 23.454 29 23 C 29 22.651 28.809109 22.358687 28.537109 22.179688 L 28.541016 22.160156 L 21.701172 17.28125 A 1.0001 1.0001 0 0 0 21.015625 16.988281 z M 6.3535156 20 L 9.5117188 20 C 9.8677187 21.638 10.396547 23.061453 11.060547 24.189453 C 9.0775469 23.335453 7.4305156 21.854 6.3535156 20 z"></path>
</svg>
<span>Open the web version</span>
</a>
</div>
</main>
</body>
</html>