Skip to content

Commit db0f967

Browse files
authored
Merge pull request #4 from fredagsdeploy/feature/shareable-grad-links
Add shareable anchor links for each grad
2 parents 5ee1836 + 0349655 commit db0f967

File tree

2 files changed

+161
-19
lines changed

2 files changed

+161
-19
lines changed

README.md

Lines changed: 11 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,12 @@
1-
# bakfyllans-16-grader
2-
GitHub pages version of FB page: https://www.facebook.com/bakfyllans16grader
1+
# Bakfyllans 16 grader
32

4-
[bakis.fredag.dev](https://bakis.fredag.dev/)
3+
A simple GitHub Pages website hosting "The 16 Degrees of Hangover" - a humorous Swedish scale for rating hangover severity.
4+
5+
**Live site:** [bakis.fredag.dev](https://bakis.fredag.dev/)
6+
7+
## About
8+
9+
- Static HTML page with no build system
10+
- Hosted via GitHub Pages with custom domain
11+
- Made by [Fredagsdeploy](https://github.com/fredagsdeploy)
12+
- Based on the original [Facebook page](https://www.facebook.com/bakfyllans16grader)

index.html

Lines changed: 150 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -8,63 +8,197 @@
88
<meta property="og:title" content="Bakfyllans 16 grader" />
99
<meta property="og:description" content="Festtestad beskrivning av bakfyllans grader" />
1010
<meta property="og:url" content="https://bakis.fredag.dev" />
11+
<style>
12+
body {
13+
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
14+
}
15+
.grad-header {
16+
display: flex;
17+
align-items: center;
18+
gap: 0.5rem;
19+
}
20+
.grad-header h2 {
21+
margin: 0;
22+
}
23+
.share-btn {
24+
background: none;
25+
border: none;
26+
cursor: pointer;
27+
padding: 0.25rem;
28+
opacity: 0.5;
29+
transition: opacity 0.2s;
30+
}
31+
.share-btn:hover {
32+
opacity: 1;
33+
}
34+
.share-btn svg {
35+
width: 0.875rem;
36+
height: 0.875rem;
37+
display: block;
38+
}
39+
</style>
1140
</head>
1241
<body>
1342
<div class="container">
1443
<h1 id="header">Bakfyllans 16 grader</h1>
1544
<p>Detta är den officiella 16-gradiga skalan av bakfylla, inte helt oväntat instiftad en söndag för länge sedan. Med hjälp av listan nedan kan du lätt bedömma vilken grad du befinner dig på. Listan strävar efter förbättring för att ge en sådan rättvis bild som möjligt av bakfylla och kan därför uppdateras med justeringar. Detta är version 1.1.</p>
1645

17-
<h2>Grad 1</h2>
46+
<div class="grad-header">
47+
<h2 id="grad-1">Grad 1</h2>
48+
<button class="share-btn" data-grad="1" aria-label="Dela länk till Grad 1">
49+
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1" /></svg>
50+
</button>
51+
</div>
1852
<p>Man är helt som vanligt. Med andra ord är man alltid minst grad 1 oavsett om man druckit eller inte, vilket också betyder att man alltid är bakfull av första grad.</p>
1953

20-
<h2>Grad 2</h2>
54+
<div class="grad-header">
55+
<h2 id="grad-2">Grad 2</h2>
56+
<button class="share-btn" data-grad="2" aria-label="Dela länk till Grad 2">
57+
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1" /></svg>
58+
</button>
59+
</div>
2160
<p>Man känner lite lätt av att man festade dagen innan, men inga direkta symptom.</p>
2261

23-
<h2>Grad 3</h2>
62+
<div class="grad-header">
63+
<h2 id="grad-3">Grad 3</h2>
64+
<button class="share-btn" data-grad="3" aria-label="Dela länk till Grad 3">
65+
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1" /></svg>
66+
</button>
67+
</div>
2468
<p>Man är trött efter gårdagens bestyr.</p>
2569

26-
<h2>Grad 4</h2>
70+
<div class="grad-header">
71+
<h2 id="grad-4">Grad 4</h2>
72+
<button class="share-btn" data-grad="4" aria-label="Dela länk till Grad 4">
73+
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1" /></svg>
74+
</button>
75+
</div>
2776
<p>Man känner betydande trötthet från gårdagens festande.</p>
2877

29-
<h2>Grad 5</h2>
78+
<div class="grad-header">
79+
<h2 id="grad-5">Grad 5</h2>
80+
<button class="share-btn" data-grad="5" aria-label="Dela länk till Grad 5">
81+
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1" /></svg>
82+
</button>
83+
</div>
3084
<p>Lätt illamående, men man behöver inte känna avsky mot alkoholen. Bakfylleångest kan uppstå vid den här graden. Lätt huvudvärk.</p>
3185

32-
<h2>Grad 6</h2>
86+
<div class="grad-header">
87+
<h2 id="grad-6">Grad 6</h2>
88+
<button class="share-btn" data-grad="6" aria-label="Dela länk till Grad 6">
89+
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1" /></svg>
90+
</button>
91+
</div>
3392
<p>Energilöshet. Tomhet. Man lever på sparkraft. Vissa lider av att man vill äta men inte kan det, eftersom man inte orkar förräns alldeles för sent. Man kan ha viss grad av bakfylleångest. Lyckas man klämma en bakispizza eller liknande finns god chans till lindring.</p>
3493

35-
<h2>Grad 7</h2>
94+
<div class="grad-header">
95+
<h2 id="grad-7">Grad 7</h2>
96+
<button class="share-btn" data-grad="7" aria-label="Dela länk till Grad 7">
97+
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1" /></svg>
98+
</button>
99+
</div>
36100
<p>Normalt illamående, men kan känna sig sjuk och/eller som att man ska spy, men gör det inte. Huvudvärken tilltar.</p>
37101

38-
<h2>Grad 8</h2>
102+
<div class="grad-header">
103+
<h2 id="grad-8">Grad 8</h2>
104+
<button class="share-btn" data-grad="8" aria-label="Dela länk till Grad 8">
105+
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1" /></svg>
106+
</button>
107+
</div>
39108
<p>Illamående, kräkningar förkommer vanligen på denna grad. Bakfylleångesten tilltar i intensitet. Ett inte helt ovanligt förscenario är att man vaknar fortfarande full för att sedan övergå till tidigare nämnda symptom.</p>
40109

41-
<h2>Grad 9</h2>
110+
<div class="grad-header">
111+
<h2 id="grad-9">Grad 9</h2>
112+
<button class="share-btn" data-grad="9" aria-label="Dela länk till Grad 9">
113+
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1" /></svg>
114+
</button>
115+
</div>
42116
<p>Utslagen. Energidepåerna skriker efter påfyllning. Man orkar inte mycket, man spenerar dagen liggandes eller sittandes i apatisk position. Vanligt symptom är att det snurrar när man försöker resa sig första gången på morgonen/dagen/kvällen/natten efter.</p>
43117

44-
<h2>Grad 10 - "Olbgraden"</h2>
118+
<div class="grad-header">
119+
<h2 id="grad-10">Grad 10 - "Olbgraden"</h2>
120+
<button class="share-btn" data-grad="10" aria-label="Dela länk till Grad 10">
121+
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1" /></svg>
122+
</button>
123+
</div>
45124
<p>"Jag ska aldrig mer göra så jag känner så här"</p>
46125

47-
<h2>Grad 11</h2>
126+
<div class="grad-header">
127+
<h2 id="grad-11">Grad 11</h2>
128+
<button class="share-btn" data-grad="11" aria-label="Dela länk till Grad 11">
129+
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1" /></svg>
130+
</button>
131+
</div>
48132
<p>Kraftigt illamående. Man ber till porslinsguden, pratar i den stora vita telefonen och försöker förgäves få i sig någon form av föda eller dryck. Allting offras heligt till porslinsguden. "Not even the teaspoons of liquid was spared." Frossa och kallsvettningar. Huvudvärk kan variera i styrka men är ofta intensiv och bultande. Svåra vinfyllor brukar resultera i detta stadie.</p>
49133

50-
<h2>Grad 12</h2>
134+
<div class="grad-header">
135+
<h2 id="grad-12">Grad 12</h2>
136+
<button class="share-btn" data-grad="12" aria-label="Dela länk till Grad 12">
137+
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1" /></svg>
138+
</button>
139+
</div>
51140
<p>Styrkan av de 12 apostlarnas samlade vrede och sorg förde dig till den grad av Kristusfylla som tar dig hit ner. Bakfyllan behöver nödvändigtvis inte vara svår i intensitet, men den verkar till synes aldrig ta slut. "Först på tredje dagen är man uppstånden igen."</p>
52141

53-
<h2>Grad 13</h2>
142+
<div class="grad-header">
143+
<h2 id="grad-13">Grad 13</h2>
144+
<button class="share-btn" data-grad="13" aria-label="Dela länk till Grad 13">
145+
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1" /></svg>
146+
</button>
147+
</div>
54148
<p>Riktigt kraftig huvudvärk, riktigt kraftigt illamående, riktigt kraftig frossa, riktigt kraftig ångest, riktigt kraftig bakfylla. Riktigt ihållande.</p>
55149

56-
<h2>Grad 14</h2>
150+
<div class="grad-header">
151+
<h2 id="grad-14">Grad 14</h2>
152+
<button class="share-btn" data-grad="14" aria-label="Dela länk till Grad 14">
153+
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1" /></svg>
154+
</button>
155+
</div>
57156
<p>Man är orolig för sin egen hälsa. Sjukvårdsupplysningen får in samtal från den här graden då och då, från de starka själar som orkar lyfta en telefon.</p>
58157

59-
<h2>Grad 15</h2>
158+
<div class="grad-header">
159+
<h2 id="grad-15">Grad 15</h2>
160+
<button class="share-btn" data-grad="15" aria-label="Dela länk till Grad 15">
161+
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1" /></svg>
162+
</button>
163+
</div>
60164
<p>Det är nära nu, man kan se båtten, men man är inte riktigt där. Ljuset i tunnelns slut skimmrar knappt långt, långt borta.</p>
61165

62-
<h2>Grad 16</h2>
166+
<div class="grad-header">
167+
<h2 id="grad-16">Grad 16</h2>
168+
<button class="share-btn" data-grad="16" aria-label="Dela länk till Grad 16">
169+
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1" /></svg>
170+
</button>
171+
</div>
63172
<p>The båtten is nådd. Ytterst få är de som tagit sig ända ner hit och ytterst få är de som verkligen vet hur det ens är att vara här nere. Att kunna säga att man nått denna grad bör ha verifiering av tredjepart.</p>
64173
</div>
65174
<footer>
66175
<p>original source <a href="https://www.facebook.com/bakfyllans16grader">Bakfyllans 16 grader - Facebook page</a></p>
67176
<p>made by <a href="https://github.com/fredagsdeploy">Fredagsdeploy</a>
68177
</footer>
178+
<script>
179+
document.querySelectorAll('.share-btn').forEach(btn => {
180+
btn.addEventListener('click', async () => {
181+
const grad = btn.dataset.grad;
182+
const url = `${window.location.origin}${window.location.pathname}#grad-${grad}`;
183+
const title = `Bakfyllans Grad ${grad}`;
184+
185+
if (navigator.share) {
186+
try {
187+
await navigator.share({ title, url });
188+
} catch (err) {
189+
if (err.name !== 'AbortError') {
190+
copyToClipboard(url);
191+
}
192+
}
193+
} else {
194+
copyToClipboard(url);
195+
}
196+
});
197+
});
198+
199+
function copyToClipboard(url) {
200+
navigator.clipboard.writeText(url);
201+
}
202+
</script>
69203
</body>
70204
</html>

0 commit comments

Comments
 (0)