{"id":303,"date":"2026-04-14T21:37:25","date_gmt":"2026-04-14T21:37:25","guid":{"rendered":"https:\/\/beginnerprojects.com\/cms\/?p=303"},"modified":"2026-04-14T21:57:42","modified_gmt":"2026-04-14T21:57:42","slug":"stop-typing-urls-build-your-own-personal-productivity-dashboard","status":"publish","type":"post","link":"https:\/\/beginnerprojects.com\/cms\/stop-typing-urls-build-your-own-personal-productivity-dashboard\/","title":{"rendered":"Stop Typing URLs: Build Your Own Personal Productivity Dashboard"},"content":{"rendered":"\n<p><strong>Note:<\/strong> This is a standalone \u201cSingle-File App.\u201d All the code, instructions, and security steps required to successfully run this software are contained within this post.<\/p>\n\n\n\n<p>How much time do you spend every day typing the same website addresses into your browser? Whether it\u2019s your email, your favorite AI tool, or your site&#8217;s search console, those repetitive keystrokes add up over a year.<\/p>\n\n\n\n<p>To solve this, I\u2019ve developed a simple, lightweight Personal Dashboard. The goal is simple: turn &#8220;typing a domain name&#8221; into &#8220;clicking a single button.&#8221; Instead of hunting through bookmarks or remembering complex URLs, I use one single local HTML file on my desktop that acts as my mission control, giving me instant access to everything I need to start my workday.<\/p>\n\n\n\n<div class=\"wp-block-group is-layout-constrained wp-block-group-is-layout-constrained\">\n<h2 class=\"wp-block-heading\">IMPORTANT: Security First (The AI Safety Check)<\/h2>\n\n\n\n<p><strong>I want you to <mark>verify this software before you run it.<\/mark><\/strong><br>Even though I have provided this for free, it is a best practice to always verify code from the internet.<\/p>\n\n\n\n<p>Before you save the code provided below, please do the following:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Copy the code from the block at the bottom of this post.<\/li>\n\n\n\n<li>Open one of these AI tools:\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/copilot.microsoft.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">Microsoft Copilot<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/chatgpt.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">ChatGPT<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/www.perplexity.ai\/\" target=\"_blank\" rel=\"noreferrer noopener\">Perplexity AI<\/a><\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>Paste the code and ask: <em>\u201cCan you check this HTML\/JavaScript code for any security issues, vulnerabilities, or viruses?\u201d<\/em><\/li>\n<\/ol>\n\n\n\n<p>In a few seconds, the AI will confirm that the code is safe. Once you have that peace of mind, you are ready to go!<\/p>\n<\/div>\n\n\n\n<h2 class=\"wp-block-heading\">How to Set Up Your Dashboard App<\/h2>\n\n\n\n<p>Once the AI has given you the green light, follow these steps to get your app running:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Save the code to your desktop. I suggest naming the file <strong><em>dashboard.html<\/em><\/strong>.\n<ul class=\"wp-block-list\">\n<li><strong>Pro Tip:<\/strong> If you plan on downloading more free tools from <a href=\"https:\/\/beginnerprojects.com\">Beginner Projects<\/a>, create a folder on your desktop called <strong>myApps<\/strong> and save your files there to keep things organized.<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Launch the App<\/strong><br>Simply double-click the dashboard.html file. It will open instantly in your web browser. For instructions on how to customize the buttons with your links, read the companion blog post: <a href=\"https:\/\/beginnerprojects.com\/cms\/how-i-built-my-personal-dashboard-and-how-to-tweak-it\/\" data-type=\"post\" data-id=\"307\">How I Built My Personal Dashboard (and How to Tweak It)<\/a><\/li>\n<\/ol>\n\n\n\n<h2 class=\"wp-block-heading\">The Code<\/h2>\n\n\n\n<pre class=\"wp-block-code has-palette-color-11-background-color has-background\"><code>&lt;!DOCTYPE html&gt;\n&lt;html lang=\"en\"&gt;\n&lt;head&gt;\n  &lt;meta charset=\"UTF-8\" \/&gt;\n  &lt;title&gt;Free Dashboard&lt;\/title&gt;\n  &lt;meta name=\"viewport\" content=\"width=1280\" \/&gt;\n  &lt;style&gt;\n    :root {\n      --bg-main: #121212;\n      --bg-surface: #34373F;\n      --text-primary: #abb2ba;\n      --text-secondary: #abb2ba;\n      --accent-primary: #4169E1;\n      --accent-secondary: #45B52D;\n      --border-subtle: #40444C;\n      --border-radius: 7px;\n      --spacing-unit: 20px;\n      --font-sans: Inter, system-ui, sans-serif;\n      --font-mono: Fira Code, monospace;\n    }\n\n    body {\n      background-color: var(--bg-main);\n      color: var(--text-primary);\n      font-family: var(--font-sans);\n      margin: 0;\n      padding: 0;\n      font-size: 1.0625rem;\n      line-height: 1.6;\n    }\n\n    .dashboard-container {\n      max-width: 1140px;\n      margin: 0 auto;\n      padding: calc(var(--spacing-unit) * 1.5) var(--spacing-unit);\n    }\n\n    .section-spacer {\n      height: 40px;\n      width: 100%;\n    }\n\n    h1.main-title {\n      font-size: 48px;\n      font-weight: 500;\n      margin-bottom: 20px;\n      color: var(--text-primary);\n      text-align: left;\n    }\n\n    h2 {\n      font-size: 1.6rem; \n      font-weight: normal;\n      margin-bottom: 20px;\n      color: var(--text-primary);\n    }\n\n    footer p {\n      font-size: 1rem;\n      font-weight: 500;\n      color: var(--text-primary);\n      margin-top: 20px;\n      text-align: center;\n    }\n\n    .link-columns-wrapper {\n      display: grid;\n      grid-template-columns: repeat(4, 1fr);\n      gap: 20px;\n      margin-bottom: 0px;\n    }\n\n    .link-list-column h3 {\n      margin: 0 0 10px;\n      font-size: 1rem;\n      font-weight: 500;\n    }\n\n    .link-list-column ul {\n      list-style: none;\n      padding: 0;\n    }\n\n    .link-list-column li a {\n      display: block;\n      padding: 10px 12px;\n      margin-bottom: 8px;\n      background-color: transparent;\n      color: var(--text-primary);\n      text-decoration: none;\n      border-radius: var(--border-radius);\n      transition: background-color 0.2s ease, color 0.2s ease, border 0.2s ease;\n      font-size: 1.05rem;\n      font-weight: 400;\n      text-align: left;\n      border: 1px solid #3a3c3f;\n    }\n\n    .link-list-column li a:hover {\n      background-color: transparent;\n      color: #abb2ba;\n      border: 1px solid #abb2ba;\n    }\n\n    .password-controls {\n      display: flex;\n      gap: 10px;\n    }\n\n    .password-controls input&#091;type=\"number\"] {\n      width: 70px;\n      background-color: var(--bg-main);\n      color: var(--text-primary);\n      border: 1px solid var(--border-subtle);\n      border-radius: var(--border-radius);\n      padding: 10px;\n      font-family: var(--font-mono);\n      font-size: 1.0625rem;\n    }\n\n    .password-controls input&#091;type=\"text\"] {\n      flex-grow: 1;\n      min-width: 300px;\n      overflow-x: auto;\n      background-color: var(--bg-main);\n      color: var(--text-primary);\n      border: 1px solid var(--border-subtle);\n      border-radius: var(--border-radius);\n      padding: 10px;\n      font-family: var(--font-mono);\n      font-size: 1.0625rem;\n    }\n\n    .password-controls button {\n      background-color: transparent;\n      color: #abb2ba;\n      border: 1px solid #525563;\n      border-radius: var(--border-radius);\n      padding: 10px 32px;\n      cursor: pointer;\n      font-size: 1.0625rem;\n      transition: background-color 0.2s ease, color 0.2s ease;\n    }\n\n    .password-controls button:hover {\n      background-color: #abb2ba;\n      color: #000;\n    }\n\n    code {background-color: #111315; padding: 4px 8px;}\n  &lt;\/style&gt;\n&lt;\/head&gt;\n&lt;body&gt;\n  &lt;div class=\"dashboard-container\"&gt;\n    &lt;!-- \ud83d\udd17 Quick Access Links --&gt;\n    &lt;section id=\"link-organizer\"&gt;\n      &lt;h1 class=\"main-title\"&gt;My Links&lt;\/h1&gt;\n      &lt;div class=\"link-columns-wrapper\"&gt;\n        &lt;div class=\"link-list-column\"&gt;\n          &lt;h3&gt;Tools&lt;\/h3&gt;\n          &lt;ul&gt;\n            &lt;li&gt;&lt;a href=\"https:\/\/pagespeed.web.dev\/\"&gt;PageSpeed&lt;\/a&gt;&lt;\/li&gt;\n            &lt;li&gt;&lt;a href=\"https:\/\/search.google.com\/search-console\/about\"&gt;Search Console&lt;\/a&gt;&lt;\/li&gt;\n          &lt;\/ul&gt;\n        &lt;\/div&gt;\n        &lt;div class=\"link-list-column\"&gt;\n          &lt;h3&gt;Websites&lt;\/h3&gt;\n          &lt;ul&gt;\n            &lt;li&gt;&lt;a href=\"https:\/\/beginnerprojects.com\/\"&gt;beginnerprojects.com&lt;\/a&gt;&lt;\/li&gt;\n            &lt;li&gt;&lt;a href=\"https:\/\/duckduckgo.com\"&gt;duckduckgo.com&lt;\/a&gt;&lt;\/li&gt;\n          &lt;\/ul&gt;\n        &lt;\/div&gt;\n        &lt;div class=\"link-list-column\"&gt;\n          &lt;h3&gt;Supplemental Sites&lt;\/h3&gt;\n          &lt;ul&gt;\n            &lt;li&gt;&lt;a href=\"https:\/\/lxer.com\/\"&gt;lxer.com&lt;\/a&gt;&lt;\/li&gt;\n            &lt;li&gt;&lt;a href=\"https:\/\/www.youtube.com\"&gt;youtube.com&lt;\/a&gt;&lt;\/li&gt;\n          &lt;\/ul&gt;\n        &lt;\/div&gt;\n        &lt;div class=\"link-list-column\"&gt;\n          &lt;h3&gt;AI&lt;\/h3&gt;\n          &lt;ul&gt;\n            &lt;li&gt;&lt;a href=\"https:\/\/chatgpt.com\"&gt;chatgpt.com&lt;\/a&gt;&lt;\/li&gt;\n            &lt;li&gt;&lt;a href=\"https:\/\/www.perplexity.ai\/\"&gt;perplexity.ai&lt;\/a&gt;&lt;\/li&gt;\n          &lt;\/ul&gt;\n        &lt;\/div&gt;\n      &lt;\/div&gt;\n    &lt;\/section&gt;\n\n    &lt;div class=\"section-spacer\"&gt;&lt;\/div&gt;\n\n    &lt;!-- \ud83d\udd10 Password Generator --&gt;\n    &lt;section id=\"password-generator-section\"&gt;\n      &lt;h2&gt;Password Generator&lt;\/h2&gt;\n      &lt;div class=\"password-controls\"&gt;\n        &lt;input id=\"password-length\" type=\"number\" min=\"8\" max=\"60\" value=\"36\" \/&gt;\n        &lt;button onclick=\"generateAndDisplayPassword()\"&gt;Generate&lt;\/button&gt;\n        &lt;input id=\"password-output\" type=\"text\" readonly \/&gt;\n        &lt;button onclick=\"copyPasswordToClipboard()\"&gt;Copy&lt;\/button&gt;\n      &lt;\/div&gt;\n    &lt;\/section&gt;\n\n    &lt;footer&gt;\n      &lt;p&gt;Today is &lt;span id=\"footer-date\"&gt;&lt;\/span&gt;&lt;\/p&gt;\n    &lt;\/footer&gt;\n  &lt;\/div&gt;\n\n  &lt;script&gt;\n    document.addEventListener(\"DOMContentLoaded\", () =&gt; {\n      const today = new Date();\n      const dateSpan = document.getElementById(\"footer-date\");\n      if (dateSpan) {\n        dateSpan.textContent = today.toLocaleDateString(undefined, {\n          weekday: \"short\",\n          year: \"numeric\",\n          month: \"short\",\n          day: \"numeric\"\n        });\n      }\n    });\n\n    function generateAndDisplayPassword() {\n      const len = Math.max(8, Math.min(60, parseInt(document.getElementById(\"password-length\").value) || 24));\n      const chars = \"ABCDEFGHJKLMNPQRSTUVWXYZabcdefghijkmnopqrstuvwxyz0123456789!@#$%^&amp;*()_+-=~`&#091;]{}:;,.&lt;&gt;?\";\n      let result = \"\";\n      while (result.length &lt; len) {\n        const c = chars&#091;Math.floor(Math.random() * chars.length)];\n        if (!\"\/\\\\&lt;&gt;|\".includes(c)) result += c;\n      }\n      document.getElementById(\"password-output\").value = result;\n    }\n\n    async function copyPasswordToClipboard() {\n      const result = document.getElementById(\"password-output\").value;\n      if (result) await navigator.clipboard.writeText(result);\n    }\n  &lt;\/script&gt;\n&lt;\/body&gt;\n&lt;\/html&gt;<\/code><\/pre>\n\n\n\n<p><a href=\"https:\/\/beginnerprojects.com\/cms\/how-i-built-my-personal-dashboard-and-how-to-tweak-it\/\" data-type=\"post\" data-id=\"307\">How the Dashboard app works<\/a><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Make it Your Own<\/h3>\n\n\n\n<p>The beauty of this dashboard is that it is entirely yours. I encourage you to dive into the code and experiment! You can add dozens of new buttons, create new categories, or even change the colors to match your favorite theme. Don\u2019t be afraid to break things\u2014that is the best way to learn how HTML and CSS work. If you accidentally delete a bracket or mess up the layout, no worries; you can always come back to this post and grab a fresh copy of the starter file.<\/p>\n\n\n\n<p>Be creative, customize your workflow, and happy coding!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Note: This is a standalone \u201cSingle-File App.\u201d All the code, instructions, and security steps required to successfully run this software are contained within this post. How much time do you spend every day typing the same website addresses into your browser? Whether it\u2019s your email, your favorite AI tool, or your site&#8217;s search console, those [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":305,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[6],"tags":[],"class_list":["post-303","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-free-apps"],"blocksy_meta":{"page_structure_type":"type-4","styles_descriptor":{"styles":{"desktop":"","tablet":"","mobile":""},"google_fonts":[],"version":6}},"_links":{"self":[{"href":"https:\/\/beginnerprojects.com\/cms\/wp-json\/wp\/v2\/posts\/303","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/beginnerprojects.com\/cms\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/beginnerprojects.com\/cms\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/beginnerprojects.com\/cms\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/beginnerprojects.com\/cms\/wp-json\/wp\/v2\/comments?post=303"}],"version-history":[{"count":3,"href":"https:\/\/beginnerprojects.com\/cms\/wp-json\/wp\/v2\/posts\/303\/revisions"}],"predecessor-version":[{"id":311,"href":"https:\/\/beginnerprojects.com\/cms\/wp-json\/wp\/v2\/posts\/303\/revisions\/311"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/beginnerprojects.com\/cms\/wp-json\/wp\/v2\/media\/305"}],"wp:attachment":[{"href":"https:\/\/beginnerprojects.com\/cms\/wp-json\/wp\/v2\/media?parent=303"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/beginnerprojects.com\/cms\/wp-json\/wp\/v2\/categories?post=303"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/beginnerprojects.com\/cms\/wp-json\/wp\/v2\/tags?post=303"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}