improve website style

This commit is contained in:
2025-05-10 16:21:43 +01:00
parent 0ffd6b9b94
commit 3b00a71391
4 changed files with 80 additions and 25 deletions

13
main.go
View File

@@ -89,7 +89,7 @@ type state struct {
//go:embed web //go:embed web
var webDir embed.FS var webDir embed.FS
var prompt = "Provide a summaries of the weather below, mentioning the location. Provide suggestions on how to cope with the weather. Use celsius and fahrenheit for temperature. Do not add anything else. Respond in one line." var prompt = "The current time is 7am. Provide a summary of today's weather in %v below, as well as how to deal with the weather, such as how to dress for the weather, and whether they need an umbrella Use celsius and fahrenheit for temperature. Mention %v in the summary, but don't add anything else, as the summary will be displayed on a website."
var supportedLocations = map[string]location{ var supportedLocations = map[string]location{
"london": {51.507351, -0.127758, "Europe/London"}, "london": {51.507351, -0.127758, "Europe/London"},
@@ -100,6 +100,15 @@ var supportedLocations = map[string]location{
"tokyo": {35.689487, 139.691711, "Asia/Tokyo"}, "tokyo": {35.689487, 139.691711, "Asia/Tokyo"},
} }
var locationNames = map[string]string{
"london": "London",
"sf": "San Francisco",
"sj": "San Jose",
"la": "Los Angeles",
"nyc": "New York City",
"tokyo": "Tokyo",
}
func main() { func main() {
port := flag.Int("port", 8080, "the port that the server should listen on") port := flag.Int("port", 8080, "the port that the server should listen on")
genKeys := flag.Bool("generate-vapid-keys", false, "generate a new vapid key pair, which will be outputted to stdout.") genKeys := flag.Bool("generate-vapid-keys", false, "generate a new vapid key pair, which will be outputted to stdout.")
@@ -469,7 +478,7 @@ func updateSummaries(state *state, locKey string, loc *location) {
result, err := state.genai.Models.GenerateContent(state.ctx, "gemini-2.0-flash", []*genai.Content{{ result, err := state.genai.Models.GenerateContent(state.ctx, "gemini-2.0-flash", []*genai.Content{{
Parts: []*genai.Part{ Parts: []*genai.Part{
{Text: prompt}, {Text: fmt.Sprintf(prompt, locationNames[locKey])},
{Text: string(b)}, {Text: string(b)},
}, },
}}, nil) }}, nil)

View File

@@ -7,25 +7,36 @@
<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <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="https://fonts.googleapis.com/css2?family=Geist:wght@100..900&display=swap" rel="stylesheet">
<link href="./style.css" rel="stylesheet"> <link href="/style.css" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head> </head>
<body> <body>
<main> <div class="container">
<h1>7am</h1> <header>
<h2>Daily weather updates delivered to you at 7am.</h2> <h1>7am</h1>
<hr class="divider" /> <h2>Daily weather updates delivered to you at 7am.</h2>
<ul> </header>
<li><a href="/london">London</a></li>
<li><a href="/sf">San Francisco</a></li> <main>
<li><a href="/sj">San Jose</a></li> <hr class="divider" />
<li><a href="/la">Los Angeles</a></li> <ul>
<li><a href="/nyc">New York City</a></li> <li><a href="/london">London</a></li>
<li><a href="/tokyo">Tokyo</a></li> <li><a href="/sf">San Francisco</a></li>
</ul> <li><a href="/sj">San Jose</a></li>
</main> <li><a href="/la">Los Angeles</a></li>
<li><a href="/nyc">New York City</a></li>
<li><a href="/tokyo">Tokyo</a></li>
</ul>
</main>
<footer>
<p>
Source code:&nbsp;<a href="https://github.com">GitHub</a>
</p>
</footer>
</div>
</body> </body>
</html> </html>

View File

@@ -17,14 +17,27 @@
html, body { html, body {
font-family: Geist, sans-serif; font-family: Geist, sans-serif;
width: 100%; width: 100%;
padding-top: 4rem; height: 100%;
display: flex; display: flex;
align-items: center;
justify-content: center; justify-content: center;
background-color: var(--background-color); background-color: var(--background-color);
color: var(--text-color); color: var(--text-color);
} }
body {
margin: 0;
}
.container {
display: flex;
flex-direction: column;
align-items: start;
justify-content: center;
padding-top: 8rem;
padding-left: 1rem;
padding-right: 1rem;
}
h1 { h1 {
font-weight: bolder; font-weight: bolder;
font-size: 1em; font-size: 1em;
@@ -57,11 +70,12 @@ a {
hr.divider { hr.divider {
border-color: var(--text-color); border-color: var(--text-color);
margin: 1.5rem 0; margin: 1.5rem 0;
width: 100%;
} }
main { main {
padding-left: 1rem; width: 100%;
padding-right: 1rem; flex: 1;
} }
button { button {
@@ -73,7 +87,25 @@ button {
font-weight: bold; font-weight: bold;
} }
footer {
padding-top: 2rem;
padding-bottom: 4rem;
opacity: 80%;
font-size: 0.8em;
display: flex;
flex-direction: column;
justify-content: center;
}
footer > p {
margin: 0;
}
.summary { .summary {
max-width: 30ch; max-width: 30ch;
font-size: 2em; font-size: 2em;
} }
.back-link {
font-size: 0.8em;
}

View File

@@ -7,16 +7,19 @@
<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <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="https://fonts.googleapis.com/css2?family=Geist:wght@100..900&display=swap" rel="stylesheet">
<link href="/style.css" rel="stylesheet"> <link href="./style.css" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head> </head>
<body> <body>
<main> <div class="container">
<p class="summary">{{.Summary}}</p> <main>
<button type="button" id="get-summary-btn" data-loc="{{.Location}}">Get daily updates at 7am</button> <a href="/">&lt;- All locations</a>
</main> <p class="summary">{{.Summary}}</p>
<button type="button" id="get-summary-btn" data-loc="{{.Location}}">Get daily updates at 7am</button>
</main>
</div>
<script src="/summary.js"></script> <script src="/summary.js"></script>
</body> </body>