kennethnym/7am
1
0
Fork 1
Code Issues Pull Requests Actions Packages Projects Releases 4 Wiki Activity

add ios instructions

Browse Source
This commit is contained in:
Kenneth
2025-05-11 13:11:46 +01:00
parent 081481132b
commit 40f4cdad5a
5 changed files with 73 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
main.go
View File

@@ -301,6 +301,9 @@ func handleHTTPRequest(state *state) http.HandlerFunc {
} else {
writer.WriteHeader(http.StatusMethodNotAllowed)
}
} else if path == "instructions" {
f, _ := webDir.ReadFile("web/instructions.html")
writer.Write(f)
} else if path == "vapid" {
if request.Method == "" || request.Method == "GET" {
writer.Write([]byte(state.vapidPublicKey))

2
web/index.html
View File

@@ -5,7 +5,7 @@
<title>7am - Daily weather summary</title>
<meta name="description" content="Daily weather summary delivered to you at 7am.">
<meta name="twitter:card" content="summary" />
<meta name="twitter:card" content="summary_large_image" />
<meta property="og:title" content="7am Weather">
<meta property="og:description" content="Daily weather summary delivered to you at 7am.">
<meta property="og:image" content="/hero.png">

52
web/instructions.html Normal file
View File

@@ -0,0 +1,52 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title>7am - Instructions for iOS</title>
<meta name="description" content="7am instructions for iOS users">
<meta name="twitter:card" content="summary_large_image" />
<meta property="og:title" content="7am Weather">
<meta property="og:description" content="7am instructions for iOS users">
<meta property="og:image" content="/hero.png">
<link rel="icon" type="image/png" href="/favicon.png">
<link rel="manifest" href="/manifest.json">
<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=Geist:wght@100..900&display=swap" rel="stylesheet">
<link href="/style.css" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div class="container">
<header>
<h1>7am</h1>
<h2>Instructions for iOS</h2>
</header>
<main class="instructions">
<p>On iOS devices, you need to install 7am as an app first before you can receive push notifications. Follow these steps:</p>
<ol>
<li>Open the share menu in Safari (the share button is in the middle, below the address bar)</li>
<li>Swipe up, then tap "Add to Home Screen"</li>
<li>Tap "Add" on the top right hand corner</li>
<li>Tap on the newly added 7am icon.</li>
</ol>
<p>You should now be able to subscribe to updates and receive them via push notifications.</p>
<a href="/">Start using 7am.</a>
</main>
</div>
<script>
window.addEventListener("load", () => {
navigator.serviceWorker.register("/sw.js")
})
</script>
</body>
</html>

16
web/style.css
View File

@@ -86,7 +86,7 @@ button {
border-radius: 4px;
width: 100%;
font-weight: 500;
box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 0px 1px;
box-shadow: rgba(0, 0, 0, 0.05) 0 0 0 1px;
}
@media (prefers-color-scheme: dark) {
button {
@@ -116,6 +116,20 @@ footer > p {
padding-bottom: 1rem;
}
.instructions {
max-width: 40ch;
line-height: 1.5em;
padding-top: 1rem;
padding-bottom: 1rem;
}
.instructions-link {
font-size: 0.8em;
display: block;
text-align: center;
margin-top: 1rem;
}
.back-link {
font-size: 0.8em;
}

4
web/summary.html
View File

@@ -5,7 +5,7 @@
<title>7am weather for {{.LocationName}}</title>
<meta name="description" content="Weather summary for {{.LocationName}}">
<meta name="twitter:card" content="summary">
<meta name="twitter:card" content="summary_large_image" />
<meta property="og:title" content="7am Weather">
<meta property="og:description" content="Weather summary for {{.LocationName}}">
<meta property="og:image" content="/hero.png">
@@ -27,9 +27,9 @@
<a class="back-link" href="/">&lt;- All locations</a>
<p class="summary">{{.Summary}}</p>
<button type="button" id="get-summary-btn" data-loc="{{.Location}}">Get daily summary at 7am</button>
<a href="/instructions" class="instructions-link">Instructions for iPhone</a>
</main>
</div>
<script src="/summary.js"></script>
</body>
</html>