How to Customize and Design with Code

General
1

Custom Sign-Up & Pricing Pages on DreamNav

I’ve been working on my app here: https://app.dreamnav.ai/Dream_Interpreter_CT3KH and wanted to share something that might help others.

By adding a little custom code in the footer, I was able to completely restyle the sign-up page and the pricing page so they look more like a polished website instead of the stock layout. Things like:

  • Turning the sign-up screen into a proper landing card with features listed out.

  • Renaming buttons (ex: “Add” → “Add to Cart”, “Summary” → “Cart”).

  • Splitting the pricing into Subscriptions and Pay-As-You-Go with cleaner grids.

  • Adding a sticky cart that follows you down the page.

  • Changing “About” to “Back to Site” with a link to my main website.

FOR EXAMPLE:

By default, the access denied screen is just two plain buttons (“Sign up” and “Log in”) stacked on a blank background. I rebuilt it into a proper welcome card with:

  • A glassy background + subtle drop shadow

  • A headline and description that explain the app

  • A short feature list with checkmarks

  • Styled buttons that match my brand (transparent white outline for “Sign Up Free” and a soft translucent fill for “Log In”)

  • A small note at the bottom for reassurance (“Your dreams are private. Always.”)

<style>
  .dn-card {
    max-width: 640px;
    margin: 2rem auto;
    padding: 2rem;
    border-radius: 1rem;
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(12px);
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
    color: #fff;
    text-align: center;
  }
  .dn-card h1 { font-size: 2rem; font-weight: 800; margin-bottom: 1rem; }
  .dn-card p { margin-bottom: 1.5rem; opacity: 0.85; line-height: 1.5; }
  .dn-features { text-align: left; margin-bottom: 2rem; list-style: none; padding: 0; }
  .dn-features li { display: flex; gap: 0.5rem; margin-bottom: 0.75rem; }
  .dn-features li span:first-child { color: #21D7E8; font-weight: bold; }
  .dn-note { font-size: 0.75rem; opacity: 0.6; margin-top: 1.5rem; }

  /* Buttons */
  .dn-card button {
    width: 100% !important;
    padding: 0.75rem 1.25rem !important;
    font-size: 1.1rem !important;
    font-weight: 600 !important;
    border-radius: 0.5rem !important;
    margin-top: 0.75rem !important;
    cursor: pointer;
    transition: all 0.2s ease;
  }
  /* Primary (Sign Up) */
  .dn-card button:first-of-type {
    background: transparent !important;
    border: 2px solid #fff !important;
    color: #fff !important;
  }
  .dn-card button:first-of-type:hover {
    border-color: #21D7E8 !important;
    transform: scale(0.98);
  }
  /* Secondary (Log In) */
  .dn-card button:last-of-type {
    background: rgba(255,255,255,0.15) !important;
    border: 1px solid rgba(255,255,255,0.25) !important;
    color: #fff !important;
  }
  .dn-card button:last-of-type:hover {
    background: rgba(255,255,255,0.25) !important;
  }
</style>

<script>
(function() {
  function enhanceSignupPage() {
    const container = document.querySelector('.flex.flex-grow.items-center.justify-center.p-4');
    if (!container || container.dataset.enhanced) return;
    container.dataset.enhanced = "true";

    const signupBtn = container.querySelector('button:nth-of-type(1)');
    const loginBtn = container.querySelector('button:nth-of-type(2)');
    if (!signupBtn || !loginBtn) return;

    container.innerHTML =
      '<div class="dn-card">' +
        '<h1>Join DreamNav Today</h1>' +
        '<p>Unlock the full power of <strong>AI-guided dream interpretation</strong>. ' +
        'Your dreams deserve more than guessing — get clarity, privacy, and deeper insights.</p>' +
        '<ul class="dn-features">' +
          '<li><span>✔</span><span>30 free credits every month</span></li>' +
          '<li><span>✔</span><span>Step-by-step conversations for detailed interpretations</span></li>' +
          '<li><span>✔</span><span>Private and secure — your dreams are never shared</span></li>' +
        '</ul>' +
        '<div class="dn-btn-wrap"></div>' +
        '<p class="dn-note">Your dreams are private. Always.</p>' +
      '</div>';

    const btnWrap = container.querySelector('.dn-btn-wrap');
    btnWrap.appendChild(signupBtn);
    btnWrap.appendChild(loginBtn);

    signupBtn.textContent = "Sign Up Free";
    loginBtn.textContent = "Log In";
  }

  enhanceSignupPage();
  const observer = new MutationObserver(enhanceSignupPage);
  observer.observe(document.body, { childList: true, subtree: true });
})();
</script>

How to do this yourself

  1. In Google Chrome, right click on what ever you want changed and select Inspect. (like the whole pricing section)

  2. A window will open, right click whats highlighted and select Copy > Element

  3. Ask Grok, or ChatGPT to look into the code and have it write Javascript for the things you want to change so you want use it as footer code injection.

  4. Drop the script in the footer code injection of your Pickaxe and verify.

This isn’t TOO complicated once you try it.

I’m sharing because I know a lot of people here want their apps to look more custom and branded. Again the main thing is to just go into dev-tools on either chrome or safari, and using their element highlight tool just highlight the section you want to change and either do it yourself or have ChatGPT or Grok make those changes for you.

Cheers.

Derrich.