CINXE.COM
Dateful World Clock
<!doctype html> <html> <head> <title>Dateful World Clock</title> <meta name="description" content="World Clock lets you quickly find times around the world. It uniquely features scenario planning, for what if questions." /> <!-- Browser meta tags --> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <meta charset="utf-8"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta name="google" content="notranslate" /> <link rel="icon" href="/assets/img/blue-calendar-favicon/blue-calendar.svg" /> <link rel="shortcut icon" type="image/png" href="/assets/img/blue-calendar-favicon/blue-calendar-300.png"/> <link rel="apple-touch-icon" href="/assets/img/blue-calendar-favicon/square-calendar-300.png" /> <!-- CSS Includes --> <link href="https://fonts.googleapis.com/css?family=Open+Sans" type='text/css' rel='stylesheet' > <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" type='text/css' rel="stylesheet" /> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> <!-- Google Analytics - with 'google_analytics_id' as variable --> <script async src="https://www.googletagmanager.com/gtag/js?id=UA-12539927-1"></script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-12539927-1'); </script> <script type="text/javascript"> window.lstrings = { "LOCAL_TIME":"Local time", "YOUR_LOCAL_TIME":"Your local time", "NEXT_DAY":"next day", "LOCALE":"en", "HTTP_ACCEPT_LANGUAGE":'<!--#echo var="HTTP_ACCEPT_LANGUAGE" -->', } var loc_strings = {} var SERVER_URL = window.location.origin; var TYPESENSE_URL = 'https://dateful.com/app2'; var TYPESENSE_API_KEY = 'ywkaaYXX39trymoVSUgMNeLFGnbE4Kae'; window.AUTOCOMPLETE_URL = SERVER_URL + '/app/'; window.GET_CO_URL = SERVER_URL + '/app/item/'; window.GET_OLDTTZC_URL = SERVER_URL + '/app/oldttzc/'; window.TYPESENSE = TYPESENSE_URL + '/collections/timezones-' + window.lstrings['LOCALE'] + '/documents/search'; window.TYPESENSE_API_KEY = TYPESENSE_API_KEY; </script> <!-- CSS --> <link href="/assets/css/main.css" rel="stylesheet"> <style type="text/css"> .select2-results__option { /* This helps country information fit better. */ font-size:1em; } .smaller-input-font { /* For when dates with years are showing */ font-size:0.8rem; } </style> <!--My includes--> <script src="/assets/js/main.js" type="text/javascript"></script> <!--Library Includes--> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script> <script src="/assets/js/luxon.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.min.js" integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s" crossorigin="anonymous"></script> </head> <body class=""> <nav id="topnav" class="navbar navbar-expand"> <div class="container px-sm-3"> <div class="navbar-brand"> <a class="navbar-brand" href="/world-clock"> <img src="/assets/img/logo2_w_18px.png"> Dateful </a> <div class="navbar-text d-none d-sm-inline" style="text-transform:none;"> </div> </div> <ul class="navbar-nav"> <!-- You removed "d-none d-sm-block" from the a class list --> <li><a class="nav-link" href="/accounts/login/?next=/world-clock">Sign In</a></li> </ul> </div> </nav> <section style="flex:0.5;"></section> <section> <div class="container"> <h1 class="text-center title">World Clock</h1> <div id="clock_holder" class="row justify-content-center"> <!-- On large screens, each "clock" gets its own column. On medium screens, each clock takes up twice as many columns, so they will intentionally overflow resulting in two clocks per row. --> <!-- clock --> <div id="clock0" style="display:none;" class="col-lg-3 col-md-6 mt-4 mt-md-5 px-md-4 "> <!-- We use Bootstrap "Nesting" (a row within an existing column). On medium (and up) screens, both time and timezone occupy the entire width of this nested row (which recall from comment above, is inside a column itself). However, when screens are smaller than medium, time and timezone occupy only half the space. And as a result appear side-by-side. When time and timezone take up the entire row, 'flex-row-reverse' causes no noticeable difference. But at the smaller size, when time and timezone only occupy part of the row this class swaps their position for a better mobile UI. --> <div class="row flex-row-reverse"> <!-- Date input --> <div class="d-none col-1 pl-1"> <input id="date0" class="date-input" spellcheck="false" type="search"/> </div> <!-- Time input --> <div class="col-md-12 col-6 pl-1 pr-2 px-md-3" style="position:relative;"> <div class="timeinfo" id="time0i" onclick="document.getElementById('time0').focus();"></div> <input id="time0" class="time-input" type="search"/> </div> <!-- Timezone input --> <div class="col-md-12 col-6 mt-md-2 pl-2 pr-1 px-md-3" style="position:relative;"> <div class="abbrev-div" id="abbrev0" style="color:#72B6EC; font-variant:small-caps; width:auto; text-align:right; float:right; z-index:1; position:absolute;"></div> <select id="c0"></select> </div> </div> </div> <!-- On large screens, each "clock" gets its own column. On medium screens, each clock takes up twice as many columns, so they will intentionally overflow resulting in two clocks per row. --> <!-- clock --> <div id="clock1" class="col-lg-3 col-md-6 mt-4 mt-md-5 px-md-4 "> <!-- We use Bootstrap "Nesting" (a row within an existing column). On medium (and up) screens, both time and timezone occupy the entire width of this nested row (which recall from comment above, is inside a column itself). However, when screens are smaller than medium, time and timezone occupy only half the space. And as a result appear side-by-side. When time and timezone take up the entire row, 'flex-row-reverse' causes no noticeable difference. But at the smaller size, when time and timezone only occupy part of the row this class swaps their position for a better mobile UI. --> <div class="row flex-row-reverse"> <!-- Date input --> <div class="d-none col-1 pl-1"> <input id="date1" class="date-input" spellcheck="false" type="search"/> </div> <!-- Time input --> <div class="col-md-12 col-6 pl-1 pr-2 px-md-3" style="position:relative;"> <div class="timeinfo" id="time1i" onclick="document.getElementById('time1').focus();"></div> <input id="time1" class="time-input" type="search"/> </div> <!-- Timezone input --> <div class="col-md-12 col-6 mt-md-2 pl-2 pr-1 px-md-3" style="position:relative;"> <div class="abbrev-div" id="abbrev1" style="color:#72B6EC; font-variant:small-caps; width:auto; text-align:right; float:right; z-index:1; position:absolute;"></div> <select id="c1"></select> </div> </div> </div> <!-- On large screens, each "clock" gets its own column. On medium screens, each clock takes up twice as many columns, so they will intentionally overflow resulting in two clocks per row. --> <!-- clock --> <div id="clock2" class="col-lg-3 col-md-6 mt-4 mt-md-5 px-md-4 "> <!-- We use Bootstrap "Nesting" (a row within an existing column). On medium (and up) screens, both time and timezone occupy the entire width of this nested row (which recall from comment above, is inside a column itself). However, when screens are smaller than medium, time and timezone occupy only half the space. And as a result appear side-by-side. When time and timezone take up the entire row, 'flex-row-reverse' causes no noticeable difference. But at the smaller size, when time and timezone only occupy part of the row this class swaps their position for a better mobile UI. --> <div class="row flex-row-reverse"> <!-- Date input --> <div class="d-none col-1 pl-1"> <input id="date2" class="date-input" spellcheck="false" type="search"/> </div> <!-- Time input --> <div class="col-md-12 col-6 pl-1 pr-2 px-md-3" style="position:relative;"> <div class="timeinfo" id="time2i" onclick="document.getElementById('time2').focus();"></div> <input id="time2" class="time-input" type="search"/> </div> <!-- Timezone input --> <div class="col-md-12 col-6 mt-md-2 pl-2 pr-1 px-md-3" style="position:relative;"> <div class="abbrev-div" id="abbrev2" style="color:#72B6EC; font-variant:small-caps; width:auto; text-align:right; float:right; z-index:1; position:absolute;"></div> <select id="c2"></select> </div> </div> </div> <!-- On large screens, each "clock" gets its own column. On medium screens, each clock takes up twice as many columns, so they will intentionally overflow resulting in two clocks per row. --> <!-- clock --> <div id="clock3" class="col-lg-3 col-md-6 mt-4 mt-md-5 px-md-4 "> <!-- We use Bootstrap "Nesting" (a row within an existing column). On medium (and up) screens, both time and timezone occupy the entire width of this nested row (which recall from comment above, is inside a column itself). However, when screens are smaller than medium, time and timezone occupy only half the space. And as a result appear side-by-side. When time and timezone take up the entire row, 'flex-row-reverse' causes no noticeable difference. But at the smaller size, when time and timezone only occupy part of the row this class swaps their position for a better mobile UI. --> <div class="row flex-row-reverse"> <!-- Date input --> <div class="d-none col-1 pl-1"> <input id="date3" class="date-input" spellcheck="false" type="search"/> </div> <!-- Time input --> <div class="col-md-12 col-6 pl-1 pr-2 px-md-3" style="position:relative;"> <div class="timeinfo" id="time3i" onclick="document.getElementById('time3').focus();"></div> <input id="time3" class="time-input" type="search"/> </div> <!-- Timezone input --> <div class="col-md-12 col-6 mt-md-2 pl-2 pr-1 px-md-3" style="position:relative;"> <div class="abbrev-div" id="abbrev3" style="color:#72B6EC; font-variant:small-caps; width:auto; text-align:right; float:right; z-index:1; position:absolute;"></div> <select id="c3"></select> </div> </div> </div> <!-- On large screens, each "clock" gets its own column. On medium screens, each clock takes up twice as many columns, so they will intentionally overflow resulting in two clocks per row. --> <!-- clock --> <div id="clock4" class="col-lg-3 col-md-6 mt-4 mt-md-5 px-md-4 "> <!-- We use Bootstrap "Nesting" (a row within an existing column). On medium (and up) screens, both time and timezone occupy the entire width of this nested row (which recall from comment above, is inside a column itself). However, when screens are smaller than medium, time and timezone occupy only half the space. And as a result appear side-by-side. When time and timezone take up the entire row, 'flex-row-reverse' causes no noticeable difference. But at the smaller size, when time and timezone only occupy part of the row this class swaps their position for a better mobile UI. --> <div class="row flex-row-reverse"> <!-- Date input --> <div class="d-none col-1 pl-1"> <input id="date4" class="date-input" spellcheck="false" type="search"/> </div> <!-- Time input --> <div class="col-md-12 col-6 pl-1 pr-2 px-md-3" style="position:relative;"> <div class="timeinfo" id="time4i" onclick="document.getElementById('time4').focus();"></div> <input id="time4" class="time-input" type="search"/> </div> <!-- Timezone input --> <div class="col-md-12 col-6 mt-md-2 pl-2 pr-1 px-md-3" style="position:relative;"> <div class="abbrev-div" id="abbrev4" style="color:#72B6EC; font-variant:small-caps; width:auto; text-align:right; float:right; z-index:1; position:absolute;"></div> <select id="c4"></select> <div id="instructions" style="font-size:11px; color:#72B6EC; margin-top:5px;"></div> </div> </div> </div> </div> <div id="warning" class="mt-3" style="text-align:center; font-size:13px;"> </div> <!-- Widget holder --> <div class="row justify-content-center mt-4"> <!-- Time/Date Widget --> <div class="col-4 col-md-2 mb-4 mb-md-0" style="padding-top:4px;"> <label for="td-widget" class="visuallyhidden">Time Date toggle</label> <div id="td-widget" class="widget" style="display:table; position:relative;"> <div id="timedate-bg" class="widget-bg rounded" style="display:table-cell; position:absolute; width:55%; right:52%; top:0px; z-index:-1;"> </div> <div id="widget-time" class="sm-font align-middle w-selected" style="display:table-cell; width:45%;">TIME</div> <div style="display:table-cell; width:10%;"> </div> <div id="widget-date" class="sm-font align-middle" style="display:table-cell; width:45%;">DATE</div> </div> </div> <!-- 24h Widget --> <div class="col-4 col-md-2 mb-4 mb-md-0 text-center" style="padding-top:4px;"> <label for="widget-1224" class="visuallyhidden">12 hour 24 hour toggle</label> <div id="widget-1224" class="widget" style="display:inline-block; position:relative;"> <div id="bg1224" class="widget-bg rounded" style="display:table-cell; position:absolute; width:60%; right: 48%; z-index:-1;"> </div> <div id="w12" style="display:table-cell; width:45%;">12</div> <div style="display:table-cell; width:10%;"> </div> <div id="w24" style="display:table-cell; width:45%">24</div> </div> </div> <!-- Force next columns to break to new line --> <div class="w-100 d-md-none d-block"></div> <!-- Copy Link Widget --> <div class="col-4 col-md-2" style="padding-top:4px;"> <label for="copylink-widget" class="visuallyhidden">Copy Link</label> <div id="copylink-widget" class="widget mx-auto rounded" style="display:table; background:#72B6EC;" onclick="app.copyWidgetClick();"> <div class="" style="display:table-cell;"> </div> <div id="widget-copy" class="sm-font align-middle text-center text-uppercase" style="display:table-cell; color:white;">Copy Link</div> <div class="" style="display:table-cell;"> </div> </div> </div> <!-- Num Clocks Widget --> <div class="col-4 col-md-2" style=""> <div class="" style="display:table;"> <div style="display:table-cell;"> <div class="" style="display:table-cell;"> </div> <div class="num_clocks sm-font align-middle" style="display:table-cell;">CLOCKS </div> </div> <div style="display:table-cell;"> <div class="" style="display:table-cell;"> <input id="num_clocks" class="num_clocks" style="display:table-cell;" type="number" pattern="\d*" value="0" min="1" max="20" /> </div> </div> </div> </div> </div> </div> </section> <section class="flex"> <section></section> <section> <div class="mx-auto" style="width:320px;"> </div> </section> <section></section> <footer id="v2"> <div class="container"> <div class="row"> <div class="col-sm"> <ul> <li><a href="/time-calculator">Time Calculator</a></li> <li><a href="/time-zone-converter">Time Zone Converter</a></li> <li><a href="/schedule">Schedule <sup class="homepage">New</sup></a></li> <li> <a href="/eventlink">Eventlink</a> | <a href="/eventlink/more.html">More</a> | <a href="/eventlink/api.html">API</a> </li> <li><a href="/world-clock">World Clock</a></li> </ul> </div> <div class="col-sm"> <ul> <li><a href="https://dateful.com/about.html">About</a></li> <li><a href="mailto:jonathan@dateful.com">Feedback</a></li> </ul> </div> </div> </div> </footer> </section> <script> var app = new main.Dateful.WorldClock(lstrings); </script> </body> </html>