{"id":39,"date":"2026-01-26T23:12:22","date_gmt":"2026-01-26T23:12:22","guid":{"rendered":"https:\/\/beewisersoftware.com\/?page_id=39"},"modified":"2026-02-08T15:58:45","modified_gmt":"2026-02-08T15:58:45","slug":"dashboard-one","status":"publish","type":"page","link":"https:\/\/beewisersoftware.com\/index.php\/dashboard-one\/","title":{"rendered":"Dashboard -One"},"content":{"rendered":"\n<div id=\"dashboard-container\" class=\"dark-mode\"><!-- Theme Toggle -->\n<div class=\"header-tools\">\n  <div class=\"theme-dropdown\">\n    <button id=\"theme-switch\">\ud83c\udfa8 Select Theme<\/button>\n    <div id=\"theme-menu\" class=\"theme-menu\" style=\"display: none;\">\n      <div class=\"theme-option\" data-theme=\"lavender\">\ud83d\udfe3 Lavender<\/div>\n      <div class=\"theme-option\" data-theme=\"peach\">\ud83c\udf51 Peach<\/div>\n      <div class=\"theme-option\" data-theme=\"mint\">\ud83c\udf3f Mint<\/div>\n      <div class=\"theme-option\" data-theme=\"sky\">\u2601\ufe0f Sky<\/div>\n      <div class=\"theme-option\" data-theme=\"rose\">\ud83c\udf39 Rose<\/div>\n      <div class=\"theme-option\" data-theme=\"lemon\">\ud83c\udf4b Lemon<\/div>\n      <div class=\"theme-option\" data-theme=\"lilac\">\ud83d\udc9c Lilac<\/div>\n      <div class=\"theme-option\" data-theme=\"coral\">\ud83e\udd90 Coral<\/div>\n      <div class=\"theme-option\" data-theme=\"sage\">\ud83c\udf31 Sage<\/div>\n      <div class=\"theme-option\" data-theme=\"cream\">\ud83c\udf6a Cream<\/div>\n      <div class=\"theme-option\" data-theme=\"blush\">\u263a\ufe0f Blush<\/div>\n      <div class=\"theme-option\" data-theme=\"pistachio\">\ud83d\udc9a Pistachio<\/div>\n      <div class=\"theme-option\" data-theme=\"dark-mode\">\ud83c\udf19 Dark Mode<\/div>\n      <div class=\"theme-option\" data-theme=\"light-mode\">\u2600\ufe0f Light Mode<\/div>\n    <\/div>\n  <\/div>\n<\/div>\n<div class=\"dashboard-grid\"><!-- Digital Clock -->\n<div class=\"widget clock-widget\">\n<div id=\"digital-clock\">00:00:00<\/div>\n<div id=\"current-date\">Loading date&#8230;<\/div>\n<\/div>\n<!-- Weather Widget (Placeholder - Requires API Key) -->\n<div class=\"widget weather-widget\">\n<h3>\ud83c\udf0d Weather &#8211; Toronto<\/h3>\n<div id=\"weather-icon\" style=\"font-size: 3rem; text-align: center; margin: 10px 0;\">\ud83c\udf24\ufe0f<\/div>\n<div id=\"weather-info\">Loading&#8230;<\/div>\n<small id=\"weather-feels\">Feels like: &#8211;\u00b0C<\/small>\n<div id=\"weather-forecast\" style=\"margin-top: 15px; font-size: 0.9rem;\"><\/div>\n<\/div>\n<!-- Quote of the Day -->\n<div class=\"widget quote-widget\">\n<h3>\ud83d\udca1 Quote of the Day<\/h3>\n<p id=\"daily-quote\"style=\"font-style: italic;margin-bottom: 10px;\">\n&#8220;Loading&#8230;&#8221;\n<\/p>\n<small id=\"quote-author\">&#8211; Unknown<\/small>\n<\/div>\n<!-- Word of the Day -->\n<div class=\"widget word-widget\">\n<h3>\ud83d\udcd6 Word of the Day<\/h3>\n<div id=\"word-icon\" style=\"font-size: 2rem; text-align: center; margin: 5px 0;\">\u2728<\/div>\n<strong id=\"daily-word\">Serendipity<\/strong>\n<small id=\"word-pronunciation\" style=\"color: var(--accent);\">\/ \u02ccser.\u0259n.d\u026ap.\u0259.ti \/<\/small>\n<p id=\"word-def\">The occurrence of events by chance in a happy or beneficial way.<\/p>\n<\/div>\n<\/div>\n<\/div>\n<style>\n  :root {\n    --bg-light: #f4f7f6;\n    --card-light: #ffffff;\n    --text-light: #333;\n    --bg-dark: #1a1a1a;\n    --card-dark: #2d2d2d;\n    --text-dark: #f0f0f0;\n    --accent: #6c5ce7;\n  }\n\n  \/* Pastel Themes *\/\n  #dashboard-container.theme-lavender { --bg: #f3e9ff; --card: #ede4ff; --text: #5d3a8c; --accent: #b8a0d4; }\n  #dashboard-container.theme-peach { --bg: #ffe6d5; --card: #ffd9c4; --text: #8b4513; --accent: #ff9966; }\n  #dashboard-container.theme-mint { --bg: #d5f4e6; --card: #c1ede0; --text: #1d5444; --accent: #7dd9c1; }\n  #dashboard-container.theme-sky { --bg: #d9e9f7; --card: #cce1f5; --text: #2c4a7f; --accent: #7db4e6; }\n  #dashboard-container.theme-rose { --bg: #ffe9f0; --card: #ffd9e6; --text: #8b3a50; --accent: #f4a8d4; }\n  #dashboard-container.theme-lemon { --bg: #fffdd0; --card: #ffffb3; --text: #8b8000; --accent: #ffff00; }\n  #dashboard-container.theme-lilac { --bg: #e6d9f0; --card: #d9ccff; --text: #4a3d5c; --accent: #b8a0d4; }\n  #dashboard-container.theme-coral { --bg: #ffe0d6; --card: #ffd4c4; --text: #8b4422; --accent: #ff9966; }\n  #dashboard-container.theme-sage { --bg: #e0f0e3; --card: #d4e8d9; --text: #3d5c45; --accent: #7db8a0; }\n  #dashboard-container.theme-cream { --bg: #f5f0e8; --card: #f0e8df; --text: #5c5047; --accent: #c4a080; }\n  #dashboard-container.theme-blush { --bg: #ffe6e8; --card: #ffd9dd; --text: #8b4050; --accent: #f0a0b8; }\n  #dashboard-container.theme-pistachio { --bg: #e8f5e8; --card: #dff5df; --text: #3d6b4a; --accent: #a8d9a8; }\n\n  #dashboard-container {\n    padding: 20px;\n    border-radius: 15px;\n    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\n    transition: all 0.3s ease;\n    background: var(--bg, var(--bg-dark));\n    color: var(--text, var(--text-dark));\n  }\n\n  .light-mode { background: var(--bg-light); color: var(--text-light); }\n  .dark-mode { background: var(--bg-dark); color: var(--text-dark); }\n\n  .header-tools { text-align: right; margin-bottom: 20px; }\n  \n  .theme-dropdown {\n    position: relative;\n    display: inline-block;\n  }\n  \n  #theme-switch {\n    padding: 10px 15px;\n    border: none;\n    border-radius: 20px;\n    cursor: pointer;\n    background: var(--accent, #6c5ce7);\n    color: white;\n    font-weight: bold;\n    transition: all 0.3s ease;\n  }\n\n  #theme-switch:hover {\n    transform: scale(1.05);\n    box-shadow: 0 4px 8px rgba(0,0,0,0.2);\n  }\n  \n  .theme-menu {\n    position: absolute;\n    top: 100%;\n    right: 0;\n    background: white;\n    border-radius: 12px;\n    box-shadow: 0 8px 16px rgba(0,0,0,0.2);\n    z-index: 1000;\n    min-width: 180px;\n    margin-top: 5px;\n    overflow-y: auto;\n    max-height: 400px;\n  }\n  \n  .theme-option {\n    padding: 12px 16px;\n    cursor: pointer;\n    color: #333;\n    font-weight: 500;\n    transition: all 0.2s ease;\n    border-bottom: 1px solid #f0f0f0;\n  }\n  \n  .theme-option:last-child {\n    border-bottom: none;\n  }\n  \n  .theme-option:hover {\n    background: #f5f5f5;\n    padding-left: 20px;\n  }\n  \n  .theme-option.active {\n    background: #e8e8ff;\n    color: #6c5ce7;\n  }\n\n  .dashboard-grid {\n    display: grid;\n    grid-template-columns: 1fr 1fr;\n    gap: 20px;\n    grid-auto-rows: auto;\n  }\n\n  .clock-widget {\n    grid-column: 1;\n    grid-row: 1;\n    height: auto;\n  }\n\n  .weather-widget {\n    grid-column: 2;\n    grid-row: 1;\n    height: auto;\n  }\n\n  .quote-widget {\n    grid-column: 1;\n    grid-row: 2;\n    height: auto;\n  }\n\n  .word-widget {\n    grid-column: 2;\n    grid-row: 2;\n    height: auto;\n  }\n\n  .widget {\n    padding: 25px;\n    border-radius: 12px;\n    box-shadow: 0 4px 6px rgba(0,0,0,0.1);\n    transition: transform 0.2s;\n    background: var(--card, var(--card-dark));\n    color: var(--text, var(--text-dark));\n    margin-bottom: 20px;\n    height: auto !important;\n  }\n\n  .light-mode .widget { background: var(--card-light); color: var(--text-light); }\n  .dark-mode .widget { background: var(--card-dark); color: var(--text-dark); }\n\n  \/* Weather condition backgrounds *\/\n  .weather-clear { background: linear-gradient(135deg, #FFD700, #FFA500) !important; color: #333 !important; }\n  .weather-cloudy { background: linear-gradient(135deg, #A9A9A9, #D3D3D3) !important; color: #333 !important; }\n  .weather-rainy { background: linear-gradient(135deg, #4682B4, #36648B) !important; color: #fff !important; }\n  .weather-snowy { background: linear-gradient(135deg, #B0E0E6, #E0FFFF) !important; color: #333 !important; }\n  .weather-foggy { background: linear-gradient(135deg, #778899, #B0C4DE) !important; color: #fff !important; }\n  .weather-thunderstorm { background: linear-gradient(135deg, #2F4F4F, #191970) !important; color: #fff !important; }\n  .weather-drizzle { background: linear-gradient(135deg, #87CEEB, #6495ED) !important; color: #333 !important; }\n\n  .clock-widget {\n    text-align: center;\n  }\n\n  #digital-clock { font-size: 4rem; font-weight: bold; color: var(--accent, #6c5ce7); }<\/style><script>\n  function updateClock() {\n    const clockElement = document.getElementById('digital-clock');\n    const dateElement = document.getElementById('current-date');\n    \n    if (clockElement && dateElement) {\n      const now = new Date();\n      \/\/ Format: 12:00:00 PM\n      clockElement.innerText = now.toLocaleTimeString([], { \n        hour: '2-digit', \n        minute: '2-digit', \n        second: '2-digit' \n      });\n      \/\/ Format: Monday, January 26\n      dateElement.innerText = now.toLocaleDateString(undefined, { \n        weekday: 'long', \n        month: 'long', \n        day: 'numeric' \n      });\n    }\n  }\n   updateClock();\n    \/\/ Update every 1 second\n    setInterval(updateClock, 1000);\n\n  let currentTheme = 'dark-mode';\n  const themes = ['lavender', 'peach', 'mint', 'sky', 'rose', 'lemon', 'lilac', 'coral', 'sage', 'cream', 'blush', 'pistachio', 'dark-mode', 'light-mode'];\n\n  document.addEventListener('DOMContentLoaded', () => {\n    const themeSwitch = document.getElementById('theme-switch');\n    const themeMenu = document.getElementById('theme-menu');\n    const themeOptions = document.querySelectorAll('.theme-option');\n\n    \/\/ Toggle dropdown menu\n    themeSwitch.addEventListener('click', (e) => {\n      e.stopPropagation();\n      themeMenu.style.display = themeMenu.style.display === 'none' ? 'block' : 'none';\n    });\n\n    \/\/ Close dropdown when clicking outside\n    document.addEventListener('click', (e) => {\n      if (!e.target.closest('.theme-dropdown')) {\n        themeMenu.style.display = 'none';\n      }\n    });\n\n    \/\/ Apply theme when selecting from dropdown\n    themeOptions.forEach(option => {\n      option.addEventListener('click', () => {\n        const theme = option.getAttribute('data-theme');\n        const container = document.getElementById('dashboard-container');\n        \n        \/\/ Remove all theme classes with proper prefixes\n        container.classList.remove('dark-mode', 'light-mode');\n        themes.forEach(t => {\n          container.classList.remove(t);\n          if (t !== 'dark-mode' && t !== 'light-mode') {\n            container.classList.remove('theme-' + t);\n          }\n        });\n        \n        \/\/ Add new theme with proper prefix\n        if (theme === 'dark-mode' || theme === 'light-mode') {\n          container.classList.add(theme);\n        } else {\n          container.classList.add('theme-' + theme);\n        }\n        currentTheme = theme;\n        \n        \/\/ Update active state\n        themeOptions.forEach(opt => opt.classList.remove('active'));\n        option.classList.add('active');\n        \n        \/\/ Close dropdown\n        themeMenu.style.display = 'none';\n      });\n    });\n    \n    \/\/ Set initial active state\n    document.querySelector(`[data-theme=\"${currentTheme}\"]`).classList.add('active');\n  });\n\nasync function fetchQuoteOfDay() {\n  try {\n    \/\/ Fetch random quote from Quotable API\n    const res = await fetch('https:\/\/api.quotable.io\/random');\n    if (!res.ok) throw new Error('API request failed');\n    const data = await res.json();\n    \n    if (data && data.content && data.author) {\n      const quote = data.content;\n      const author = data.author.split(',')[0]; \/\/ Get author name without extra info\n      \n      document.getElementById('daily-quote').innerText = `\"${quote}\"`;\n      document.getElementById('quote-author').innerText = `- ${author}`;\n    } else {\n      throw new Error('Invalid response data');\n    }\n  } catch (e) {\n    console.error('Error fetching quote of the day:', e);\n    document.getElementById('daily-quote').innerText = '\"The only way to do great work is to love what you do.\"';\n    document.getElementById('quote-author').innerText = '- Steve Jobs';\n  }\n}\n\nasync function fetchWordOfDay() {\n  try {\n    \/\/ Fetch random word from Free Dictionary API\n    const res = await fetch('https:\/\/random-word-api.herokuapp.com\/all');\n    const words = await res.json();\n    const randomWord = words[Math.floor(Math.random() * words.length)];\n    \n    \/\/ Fetch definition from Free Dictionary API\n    const defRes = await fetch(`https:\/\/api.dictionaryapi.dev\/api\/v2\/entries\/en\/${randomWord}`);\n    const defData = await defRes.json();\n    \n    if (defData && defData[0]) {\n      const word = defData[0].word;\n      const definition = defData[0].meanings[0].definitions[0].definition;\n      const pronunciation = defData[0].phonetic || 'N\/A';\n      \n      document.getElementById('daily-word').innerText = word.charAt(0).toUpperCase() + word.slice(1);\n      document.getElementById('word-pronunciation').innerText = pronunciation;\n      document.getElementById('word-def').innerText = definition;\n    }\n  } catch (e) {\n    console.error('Error fetching word of the day:', e);\n    document.getElementById('word-def').innerText = \"Word unavailable\";\n  }\n}\n\nasync function fetchWeather() {\n  try {\n    \/\/ Toronto coordinates: 43.70\u00b0N, -79.42\u00b0W\n    const res = await fetch('https:\/\/api.open-meteo.com\/v1\/forecast?latitude=43.70&longitude=-79.42&current=temperature_2m,apparent_temperature,weather_code&daily=weather_code,temperature_2m_max,temperature_2m_min&temperature_unit=celsius');\n    const data = await res.json();\n    const temp = Math.round(data.current.temperature_2m);\n    const feelsLike = Math.round(data.current.apparent_temperature);\n    const code = data.current.weather_code;\n    \n    \/\/ Weather code descriptions\n    const weatherCodes = {\n      0: 'Clear', 1: 'Mostly Clear', 2: 'Partly Cloudy', 3: 'Overcast',\n      45: 'Foggy', 48: 'Foggy', 51: 'Light Drizzle', 53: 'Moderate Drizzle',\n      61: 'Rainy', 63: 'Heavy Rain', 71: 'Snowy', 73: 'Heavy Snow',\n      80: 'Rainy', 82: 'Heavy Rain', 95: 'Thunderstorm'\n    };\n    \/\/ Weather emoji map based on codes\n    const weatherEmojis = {\n      0: '\u2600\ufe0f', 1: '\ud83c\udf24\ufe0f', 2: '\u26c5', 3: '\u2601\ufe0f',\n      45: '\ud83c\udf2b\ufe0f', 48: '\ud83c\udf2b\ufe0f', 51: '\ud83c\udf27\ufe0f', 53: '\ud83c\udf27\ufe0f',\n      61: '\ud83c\udf27\ufe0f', 63: '\u26c8\ufe0f', 71: '\u2744\ufe0f', 73: '\u2744\ufe0f',\n      80: '\ud83c\udf27\ufe0f', 82: '\u26c8\ufe0f', 95: '\u26c8\ufe0f'\n    };\n    const weatherIcon = weatherEmojis[code] || '\ud83c\udf24\ufe0f';\n    document.getElementById('weather-icon').innerText = weatherIcon;\n    const condition = weatherCodes[code] || 'Unknown';\n    let weatherClass = 'weather-cloudy';\n    if (code === 0 || code === 1) weatherClass = 'weather-clear';\n    else if (code === 2 || code === 3) weatherClass = 'weather-cloudy';\n    else if (code === 45 || code === 48) weatherClass = 'weather-foggy';\n    else if (code === 51 || code === 53) weatherClass = 'weather-drizzle';\n    else if (code === 61 || code === 63 || code === 80 || code === 82) weatherClass = 'weather-rainy';\n    else if (code === 71 || code === 73) weatherClass = 'weather-snowy';\n    else if (code === 95) weatherClass = 'weather-thunderstorm';\n    \n    const weatherWidget = document.querySelector('.weather-widget');\n    weatherWidget.className = 'widget weather-widget ' + weatherClass;\n    \n    document.getElementById('weather-info').innerHTML = `${temp}\u00b0C, ${condition}`;\n    document.getElementById('weather-feels').innerHTML = `Feels like: ${feelsLike}\u00b0C`;\n    \n    \/\/ Show 3-day forecast\n    let forecastHTML = '<strong>Forecast:<\/strong><br>';\n    for (let i = 1; i <= 3; i++) {\n      const date = new Date(data.daily.time[i]);\n      const dayName = date.toLocaleDateString(undefined, { weekday: 'short' });\n      const high = Math.round(data.daily.temperature_2m_max[i]);\n      const low = Math.round(data.daily.temperature_2m_min[i]);\n      const forecastCode = data.daily.weather_code[i];\n      const forecastCondition = weatherCodes[forecastCode] || 'Unknown';\n      forecastHTML += `${dayName}: ${low}\u00b0C - ${high}\u00b0C, ${forecastCondition}<br>`;\n    }\n    document.getElementById('weather-forecast').innerHTML = forecastHTML;\n  } catch (e) {\n    console.error('Error fetching weather:', e);\n    document.getElementById('weather-info').innerText = \"Weather unavailable\";\n  }\n}\n\nfetchQuoteOfDay();\nfetchWordOfDay();\nfetchWeather();\n\/\/ Refresh weather every hour\nsetInterval(fetchWeather, 3600000);\n<\/script>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>\ud83c\udfa8 Select Theme \ud83d\udfe3 Lavender \ud83c\udf51 Peach \ud83c\udf3f Mint \u2601\ufe0f Sky \ud83c\udf39 Rose \ud83c\udf4b Lemon \ud83d\udc9c Lilac \ud83e\udd90 Coral \ud83c\udf31 Sage \ud83c\udf6a Cream \u263a\ufe0f Blush \ud83d\udc9a Pistachio \ud83c\udf19 Dark Mode \u2600\ufe0f Light Mode 00:00:00 Loading date&#8230; \ud83c\udf0d Weather &#8211; Toronto \ud83c\udf24\ufe0f Loading&#8230; Feels like: &#8211;\u00b0C \ud83d\udca1 Quote of the Day &#8220;Loading&#8230;&#8221; &#8211; Unknown \ud83d\udcd6 Word [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-39","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/beewisersoftware.com\/index.php\/wp-json\/wp\/v2\/pages\/39","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/beewisersoftware.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/beewisersoftware.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/beewisersoftware.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/beewisersoftware.com\/index.php\/wp-json\/wp\/v2\/comments?post=39"}],"version-history":[{"count":16,"href":"https:\/\/beewisersoftware.com\/index.php\/wp-json\/wp\/v2\/pages\/39\/revisions"}],"predecessor-version":[{"id":60,"href":"https:\/\/beewisersoftware.com\/index.php\/wp-json\/wp\/v2\/pages\/39\/revisions\/60"}],"wp:attachment":[{"href":"https:\/\/beewisersoftware.com\/index.php\/wp-json\/wp\/v2\/media?parent=39"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}