ABOUT CHRONO

Created for the sidepanel in Vivaldi browser. ( https://vivaldi.com )

You can create your own list of timezone inside the side panel of Vivaldi browser.

One LOCAL file with the functionalities I wanted + extra's. The file can be moved to another computer and everything remains in tact. The core of Chrono does not, nor should it depend on internet connection. The extra's (Map and Weather) do need internet connection, but they are optional. All icons are inline, no externals.

Chrono is highly customizable and offers a couple simple functions. The default colors are for the Vivaldi Dark Theme, but you can theme it as you like. You don't want the Weather? Disable it! You don't want to use the map function? Disable it! It's that simple. To edit things, some very, very basic HTML knowledge is recommended.

I've created Chrono for the Vivaldi Browser community, but I have tested it in Waterfox and Brave Browser as well. You can test it in other browsers, but I refuse to install other browsers on my system to fix things. As far as I'm concerned Vivaldi is the only browser that has a proper sidepanel. (No to Edge!)

NOSCRIPT:

For what-ever reason, Vivaldi with NoScript blocked my connection to Open Meteo. See Developer Tools > Inspect > Network (ctrl+shift+i in Vivaldi). Disable NoScript, restart you browser/computer, enable NoScript again and refresh the page. It worked for me. Removing the extension would be terrible advice... (but you could... :devil: )

– Brave Browser with NoScript works, but you will have to add the local page in the settings. Settings > Privacy and Security > Add chrono.html+location to "Allowed to use JavaScript". – Waterfox with NoScript works. In the drop-down of NoScript you do have to allow "file:" and "...open-meteo.com".

FUNCTIONALITY:

• Option to add or remove cities to a list. The list will render a new card* for each city you added.
• Option to change fonts/colors/shapes/gaps between cards*. All the variables for these type settings are located at the top of the CSS.
• Option to change from 24h to 12h (AM/PM), I don't know why you want to do that, but I'm 100% sure some people want it, hence it's there.
• Option to disable linking by setting const MAP_LINKS_ENABLED = true; to const MAP_LINKS_ENABLED = false;
• Option to choose between Google Earth and Open Street Maps.
• Option to set the zoom-values for the maps.
• Option to enable or disable the Weather function by setting const WEATHER_ENABLED = true; to const WEATHER_ENABLED = false;
• Option to change the time-interval for fetching the weather. >60 minutes renders the function useless.
• Option to change the type of weather unit to metric or imperial.
• Option to change the format of the date below the time at the bottom of function updateDate(card) {...}.

*"card" is the rounded square which contains the city, time, weather etc

THE BASICS:

• As soon as you've downloaded the file, make a copy of it and name it chrono_backup.html. Store the pages wherever you want.
• Open de chrono.html in the browser to see what it does.
• Open the chrono.html in your favorite text-editor and go through the settings and change what you want.

There are multiple annotations in the file that should make it easier. Variable-names have actual meaning and make it clearer what it does. I recommend to mess around and see what things do. You have a backup to replace all the code. Change, save and reload the page (F5).

– Add cities and time zones::

Inside const TIMEZONE_MAP = {...}; there are 500+ cities with time-zones and lat/long coordinates. You can remove as many cities as you like and or you can add yours. You do not have to provide a latlong (put latlong: ""), but it's recommended. If there is no latlong the "lookup" map won't work. Make sure you use the proper format, you have over 500 examples for the same thing. Only after you have added your city to the const TIMEZONE_MAP = {...} => Example: "YourTown": { timeZone: "Europe/Andorra", latLong: "5.3364,-4.0267" }, you can add it to your list.

– Add the city to the list::

Inside const CARDS = [...]; You can add your city and it will render a new card inside the page.

Example => { label: "My Home Town, not in Antarctica", city: "YourTown" },

You can set the label to whatever you want, but you cannot tamper with the "city". The name of the city has to be part of const TIMEZONE_MAP = {...}; (example "YourTown").

Save the file and refresh the page to update.

There is a globe-icon on the top-right of the card. Clicking it will open a new page in your browser with the Map-provider you provided and it will zoom to the city.

– Adding the file to the Vivaldi side-panel::

Right-click the toolbar and select "customize panels". Next to the button [+] is a field where you add the location + chrono.html (example: C:\chrono.html) Press the [+] to add the page. A globe-icon will appear in the sidebar. Use it.

FUTURE IMPLEMENTATIONS:

– A better logo (svg) for Chrono.
– Maybe adding more type of maps.