Introduction
Atmos is a sleek, minimal weather app that delivers real-time forecasts using the free and privacy-respecting Open-Meteo API. No account needed — just open it and know the weather.
Installation
Atmos requires no build step. Running it locally is as simple as cloning
the repository and opening index.html in a browser.
Prerequisites
- A modern web browser (Chrome, Firefox, Safari, Edge).
- Git (optional — you can also download the ZIP).
- A local HTTP server is recommended for accurate geolocation (see note below).
Clone & Run
git clone https://github.com/kebabmario/atmos.git
cd atmos
# Option A: open directly
open index.html
# Option B: serve with any static server (recommended)
npx serve .
# or
python3 -m http.server 8080
Then open http://localhost:8080 in your browser.
GitHub Pages deployment
The repository is already configured to deploy automatically via GitHub Pages.
The main site (useatmos.me)
is served from the root, while the docs site
(docs.useatmos.me) is served from the /docs folder.
CNAME file contains
useatmos.me. The docs/CNAME file contains
docs.useatmos.me. GitHub Pages will serve each folder from its
respective domain when both are configured in the repository settings.
Setting up docs.useatmos.me
- In your DNS provider, add a
CNAMErecord pointingdocs.useatmos.me→kebabmario.github.io. - In the GitHub repository settings under Pages, set the
source to the
docs/folder on themainbranch. - In the Custom domain field enter
docs.useatmos.meand save. GitHub will create (or verify)docs/CNAMEautomatically. - Enable Enforce HTTPS once the certificate is issued.
CNAME file — it controls
the main useatmos.me domain. The docs-specific
docs/CNAME is separate and independent.
Usage
Learn how to use Atmos to get weather data for any city, and how the Open-Meteo API is integrated under the hood.
Getting weather for a city
-
Type a city name
Enter any city name in the search bar at the top of the app, e.g.
London. -
Press Go or hit Enter
The app will geocode the city name using the Open-Meteo geocoding API and retrieve coordinates.
-
View the forecast
Current conditions, hourly forecast for the next 24 h, and a 7-day daily outlook are displayed immediately.
Open-Meteo API Integration
Atmos uses two Open-Meteo endpoints: the Geocoding API to convert city names to coordinates, and the Forecast API to retrieve weather data. Both are free, require no API key, and do not track users.
| Endpoint | Purpose | Key Parameters |
|---|---|---|
geocoding-api.open-meteo.com/v1/search |
City name → lat/lng | name, count, language |
api.open-meteo.com/v1/forecast |
Weather data | latitude, longitude, hourly, daily, current_weather |
Forecast variables fetched
- Current: temperature, windspeed, weathercode
- Hourly: temperature_2m, precipitation_probability, weathercode, apparent_temperature
- Daily: temperature_2m_max, temperature_2m_min, weathercode, sunrise, sunset, precipitation_sum
Example request
const GEO_URL = 'https://geocoding-api.open-meteo.com/v1/search';
const WX_URL = 'https://api.open-meteo.com/v1/forecast';
async function fetchWeather(city) {
// 1. Geocode
const geo = await fetch(`${GEO_URL}?name=${encodeURIComponent(city)}&count=1`);
const { results } = await geo.json();
const { latitude, longitude, name } = results[0];
// 2. Fetch forecast
const wx = await fetch(
`${WX_URL}?latitude=${latitude}&longitude=${longitude}` +
`¤t_weather=true` +
`&hourly=temperature_2m,precipitation_probability,weathercode` +
`&daily=temperature_2m_max,temperature_2m_min,weathercode,sunrise,sunset` +
`&timezone=auto`
);
return wx.json();
}
Full API documentation is available at open-meteo.com/en/docs.
Accuracy
Atmos sources its data from Open-Meteo, which aggregates multiple high-resolution global numerical weather prediction (NWP) models.
Weather models used
Open-Meteo automatically selects the best available model for your location:
- ECMWF IFS — European Centre for Medium-Range Weather Forecasts (global, high resolution).
- GFS — NOAA Global Forecast System (Americas & global).
- DWD ICON — German Weather Service (Europe, very high resolution).
- MeteoFrance AROME — France & surrounding regions.
- BOM ACCESS — Australia & Oceania.
Limitations
- Forecast accuracy degrades beyond 7 days.
- Local microclimates (valleys, urban heat islands) may not be fully captured.
- Precipitation predictions are probabilistic — exact timing can vary by 1–2 hours.
Update frequency
Open-Meteo updates its forecasts every hour for short-range models, and every 6–12 hours for medium-range models. Atmos fetches fresh data on each search.
Privacy
Atmos is built with privacy at its core. We do not collect, store, or share any personal data.
What Atmos does not do
- No user accounts or sign-up required.
- No cookies set by the Atmos application.
- /li>No analytics or telemetry.
- Your location is never sent to our servers.
- No data is stored between sessions.
Third-party services
Atmos makes requests directly from your browser to the following third-party APIs:
- Open-Meteo (terms) — receives your city's coordinates to return weather data. Open-Meteo is GDPR-compliant and does not store personal data.
- Google Fonts — loads the Inter typeface. Your browser will connect to Google's CDN; see Google Fonts privacy.
Self-hosting
If you require full data sovereignty, Atmos can be self-hosted by cloning the repository and replacing the Google Fonts link with a locally bundled font. No server-side component is needed.
Credits
Atmos stands on the shoulders of open-source giants. Here's a thanks to everyone who made it possible.
Data
- Open-Meteo — Free, open-source weather API. Absolutely no API key required. Free & Open
Fonts
- Inter by Rasmus Andersson — the typeface used throughout the app and docs. SIL OFL
Icons & Design
- Weather condition icons are rendered as Unicode emoji for maximum compatibility.
- Color palette inspired by clear night-sky blues.
Built with
- Vanilla HTML, CSS & JavaScript — zero runtime dependencies.
- Hosted on GitHub Pages — free, reliable, and fast.
Contributing
Contributions are welcome! Open an issue or pull request on GitHub. Please keep PRs focused and follow the existing code style.