Embed

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Rentura • Live Rent Estimator</title>
  <style>
    :root {
      --brand:#012F5D; /* Rentura navy */
      --ink:#0F172A;  /* slate-900 */
      --muted:#64748B; /* slate-500 */
      --bg:#F8FAFC;   /* slate-50 */
      --card:#FFFFFF;
      --ring:rgba(1,47,93,.25);
      --good:#0E9F6E;
      --warn:#D97706;
    }
    html,body {height:100%;}
    body {
      margin:0; background:radial-gradient(1200px 600px at 20% -10%, #E6EEF7 0%, transparent 60%), var(--bg);
      font:16px/1.45 Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
      color:var(--ink);
    }
    /* reduce top spacing by ~50% */
    .wrap {max-width:1100px; margin:24px auto 48px auto; padding:0 20px;}
    .title {font-weight:800; letter-spacing:.2px; color:var(--brand); font-size:28px;}
    .sub {color:var(--muted); margin-top:6px;}

    .grid {display:grid; grid-template-columns: 1.1fr .9fr; gap:22px; margin-top:24px;}
    @media (max-width: 920px){ .grid{grid-template-columns:1fr;}}

    .card {background:var(--card); border-radius:18px; box-shadow:0 8px 30px rgba(2,22,48,.08);} 
    .pad {padding:22px;}

    .sectionTitle {margin:6px 0 14px; font-weight:700; color:var(--brand);} 
    .row {display:grid; grid-template-columns: 1fr 1fr; gap:14px;}
    .row3 {display:grid; grid-template-columns: 1fr 1fr 1fr; gap:14px;}
    .full {grid-column:1 / -1}

    label {display:block; font-size:12px; font-weight:600; color:var(--muted); margin-bottom:6px;}
    input, select {width:100%; height:48px; border-radius:12px; border:1px solid #E5E7EB; background:#fff; color:var(--ink); padding:0 14px; outline:none; transition: .2s border, .2s box-shadow;}
    input:focus, select:focus {border-color:var(--brand); box-shadow:0 0 0 4px var(--ring);}  
    /* Force pointer cursor for interactive selects */
    select, select *, #parking, #storage, label[for="parking"], label[for="storage"] { cursor:pointer !important; }
    .hint {font-size:12px; color:var(--muted); margin-top:8px}

    .resHeader {display:flex; align-items:center; justify-content:space-between;}
    .chip {font-size:12px; font-weight:700; letter-spacing:.3px; padding:6px 10px; border-radius:999px; display:inline-flex; align-items:center; justify-content:center; white-space:nowrap;}
    .ok {background:rgba(14,159,110,.1); color:var(--good);} 
    .no {background:rgba(217,119,6,.1); color:var(--warn);} 

    .big {font-size:30px; font-weight:800; color:var(--ink);} 
    .mono {font-variant-numeric: tabular-nums;}  
    .stat {display:flex; align-items:baseline; gap:10px; margin:12px 0;}
    .stat .label {color:var(--muted); font-size:13px;}
    .muted {color:var(--muted)}
    .strong {font-weight:800;}

    .cta {display:inline-flex; align-items:center; justify-content:center; height:48px; padding:0 18px; border-radius:12px; border:none; cursor:pointer; background:var(--brand); color:#fff; font-weight:700; text-decoration:none;}
    .cta:focus {outline:none; box-shadow:0 0 0 4px var(--ring);} 
    .foot {font-size:12px; color:var(--muted); margin-top:14px}

    .divider {height:1px; background:#EEF2F7; margin:14px 0;}

    /* number + range combo */
    .stack {display:flex; flex-direction:column; gap:8px;}
    input[type="range"]{height:auto; padding:0;}

    /* subtle tick labels under sliders */
    .ticks {display:grid; gap:0; font-size:11px; color:var(--muted); margin-top:-2px;}
    .ticks.six {grid-template-columns:repeat(6, 1fr);} /* 0–5 */
    .ticks.five {grid-template-columns:repeat(5, 1fr);} /* 1–5 */
    .ticks span {text-align:center; white-space:nowrap;}
    @media (max-width:500px){ .ticks{font-size:10px;} }

    /* mode toggle */
    .seg {display:inline-flex; background:#F1F5F9; border-radius:12px; padding:4px; gap:4px;}
    .seg button {border:0; background:transparent; padding:6px 10px; border-radius:10px; font-weight:700; color:#334155; cursor:pointer; font-size:13px; line-height:1; white-space:nowrap;}
    .seg button.on {background:#fff; color:var(--brand); box-shadow:0 1px 2px rgba(2,22,48,.06);} 
    @media (max-width:500px){ .seg button{font-size:12px; padding:6px 8px;} }
  </style>
</head>
<body>
  <div class="wrap">
    <div class="title">Rental Income Calculator</div>
    <div class="sub">Enter a few details. Results update as you type. Postal code is used to confirm the home is in downtown Toronto.</div>

    <div class="grid">
      
      <div class="card pad" id="formCard">
        <div class="sectionTitle">Home Details</div>
        
        <div class="row">
          <div>
            <label for="postal">Postal code</label>
            <input id="postal" maxlength="7" placeholder="Format A1A 1A1" />
            <div class="hint">We only serve downtown Toronto for now.</div>
          </div>
          <div>
            <label for="sqft">Square footage</label>
            <input type="number" id="sqft" min="250" step="10" placeholder="700" />
          </div>
        </div>
        
        <div class="row">
          <div>
            <label for="bed">Bedrooms</label>
            <div class="stack">
              <input type="number" id="bed" min="0" max="5" step="1" value="1" />
              <input type="range" id="bedRange" min="0" max="5" step="1" value="1" />
              <div class="ticks six"><span>Studio</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span></div>
            </div>
          </div>
          <div>
            <label for="baths">Bathrooms</label>
            <div class="stack">
              <input type="number" id="baths" min="1" max="5" step="1" value="1" />
              <input type="range" id="bathsRange" min="1" max="5" step="1" value="1" />
              <div class="ticks five"><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span></div>
            </div>
          </div>
        </div>
        
        <div class="row">
          <div>
            <label for="parking">Parking</label>
            <select id="parking">
              <option value="0" selected>None</option>
              <option value="1">1 spot</option>
              <option value="2">2 spots</option>
            </select>
          </div>
          <div>
            <label for="storage">Storage / Locker</label>
            <select id="storage">
              <option value="0" selected>No</option>
              <option value="1">Yes</option>
            </select>
          </div>
        </div>
      </div>

      
      <div class="card pad" id="resultsCard">
        <div class="resHeader" style="gap:12px;">
          <div style="display:flex; align-items:center; gap:12px;">
            <div class="sectionTitle" id="resultTitle">Your results</div>
            <div class="seg" role="tablist" aria-label="Billing period">
              <button id="modeMonthly" class="on" aria-selected="true">Monthly</button>
              <button id="modeAnnual" aria-selected="false">Annually</button>
            </div>
          </div>
          <div id="areaChip" class="chip no">Check postal code</div>
        </div>

        <div class="stat">
          <div class="label" id="rentLabel">Estimated monthly rent</div>
        </div>
        <div class="big mono" id="rentRange">$0 – $0</div>
        
        <div class="stat">
          <div class="label">Average of range</div>
          <div class="mono" id="avgRent">$0</div>
        </div>

        <div class="divider"></div>
        
        <div class="stat">
          <div class="label" id="feeLabel">Rentura monthly fee</div>
          <div class="mono" id="fee">$179</div>
        </div>
        <div class="stat">
          <div class="label" id="hstLabel">HST (13%)</div>
          <div class="mono" id="hst">$0.00</div>
        </div>
        <div class="stat" id="adminRow" style="display:none;">
          <div class="label">One‑time admin fee + HST (first year only)</div>
          <div class="mono" id="adminTotal">$0.00</div>
        </div>
        <div class="stat" id="pctRow">
          <div class="label">Effective fee as % of avg rent</div>
          <div class="mono" id="pct">0%</div>
        </div>
        <div class="stat">
          <div class="label" id="netLabel">Owner income after fee + HST</div>
          <div class="mono strong" id="netRange">$0 – $0</div>
        </div>

        <div class="divider"></div>
        <a class="cta" id="ctaBtn" href="https://renturaproperties.com/getting-started-with-rentura">Start your free month</a>

        <div class="foot" id="note">This is a quick estimate. Final price depends on building, finishes, and current demand. We will refine this once we view the home.</div>
      </div>
    </div>
  </div>

  <script>
    // --- CONFIG ---
    const BASE_FEE = 179; // base monthly fee before HST
    const HST_RATE = 0.13; // Ontario HST
    const ADMIN_FEE = 349; // one-time admin fee (before HST)

    // Fee rule: +$20 for 1000+ sqft; +$10 per additional bedroom beyond 1; +$10 per additional bathroom beyond 1
    function computeFee(i){
      let fee = BASE_FEE;
      if (i.sqft >= 1000) fee += 20;
      fee += Math.max(0, (i.bed||0) - 1) * 10;
      fee += Math.max(0, (i.baths||1) - 1) * 10;
      return Math.round(fee);
    }

    // FSAs that count as downtown Toronto (easy to edit)
    const DOWNTOWN_FSAS = new Set([
      'M5A','M5B','M5C','M5E','M5G','M5H','M5J','M5K','M5L','M5S','M5T','M5V','M5X','M4X','M4Y'
    ]);

    // Currency helpers
    const fmt0 = (n) => n.toLocaleString(undefined, {style:'currency', currency:'CAD', maximumFractionDigits:0});
    const fmt2 = (n) => n.toLocaleString(undefined, {style:'currency', currency:'CAD', minimumFractionDigits:2, maximumFractionDigits:2});

    // Format postal on the fly (upper and space)
    const postalEl = document.getElementById('postal');
    postalEl.addEventListener('input', (e)=>{
      let v = e.target.value.toUpperCase().replace(/[^A-Z0-9]/g,'');
      if (v.length > 3) v = v.slice(0,3) + ' ' + v.slice(3,6);
      e.target.value = v.slice(0,7);
      update();
    });

    // Hook non-slider inputs
    ['sqft','parking','storage'].forEach(id=>{
      document.getElementById(id).addEventListener('input', update);
      document.getElementById(id).addEventListener('change', update);
    });

    // Bedrooms: range + number synced
    const bedNum = document.getElementById('bed');
    const bedRange = document.getElementById('bedRange');
    function syncBedFromNum(){
      let v = parseInt(bedNum.value || '0', 10);
      if (isNaN(v)) v = 0;
      v = Math.max(0, Math.min(5, v));
      bedNum.value = v; bedRange.value = v; update();
    }
    function syncBedFromRange(){ bedNum.value = bedRange.value; update(); }
    bedNum.addEventListener('input', syncBedFromNum);
    bedNum.addEventListener('change', syncBedFromNum);
    bedRange.addEventListener('input', syncBedFromRange);

    // Bathrooms: range + number synced (robust typing)
    const bathsNum = document.getElementById('baths');
    const bathsRange = document.getElementById('bathsRange');

    function normalizeInt(val, min, max){
      const n = Math.floor(Number(val));
      if (!Number.isFinite(n)) return null; // allow empty/invalid while typing
      return Math.max(min, Math.min(max, n));
    }

    // When typing, don't overwrite the field; only sync the range & results when valid
    bathsNum.addEventListener('input', ()=>{
      const n = normalizeInt(bathsNum.value, 1, 5);
      if (n === null) return; // let the user finish typing
      bathsRange.value = String(n);
      update();
    });

    // On commit (blur/enter), clamp and reflect to both controls
    bathsNum.addEventListener('change', ()=>{
      let n = normalizeInt(bathsNum.value, 1, 5);
      if (n === null) n = 1;
      bathsNum.value = String(n);
      bathsRange.value = String(n);
      update();
    });

    bathsRange.addEventListener('input', ()=>{ 
      bathsNum.value = bathsRange.value; 
      update(); 
    });

    // Read inputs
    function readInputs(){
      return {
        sqft: +document.getElementById('sqft').value || 0,
        bed: +document.getElementById('bed').value || 0,
        baths: +document.getElementById('baths').value || 1,
        parking: +document.getElementById('parking').value || 0,
        storage: +document.getElementById('storage').value || 0,
        postal: document.getElementById('postal').value.trim()
      }
    }

    // Postal helpers
    function parseFSA(postal){
      const m = postal.toUpperCase().match(/^([A-Z][0-9][A-Z])\s?[0-9][A-Z][0-9]$/);
      return m ? m[1] : null;
    }
    function isDowntown(postal){
      const fsa = parseFSA(postal);
      return fsa ? DOWNTOWN_FSAS.has(fsa) : false;
    }

    // --- RENT LOGIC (tuned for downtown Toronto) ---
    const COEFFS = {
      // Calibrated to current downtown Toronto data (Q2–Q3 2025): modestly higher PSF with diminishing returns
      corePSF: {0:3.85, 1:3.65, 2:3.45, 3:3.30, 4:3.20}, // $/sqft up to a cap by bed bucket
      coreCap: {0:550, 1:700, 2:750, 3:850, 4:900},      // sqft at full PSF before taper
      tailPSF: 1.00,                                     // $/sqft beyond the cap (adds some weight to larger units)
      bedPremium: {0:0, 1:0, 2:300, 3:1100, 4:1700, 5:2200}, // additive per month
      bathPremium: 160,          // per extra bath beyond 1
      parkingPremium: 175,       // per spot
      storagePremium: 40         // locker
    };

    function computeRentRange(i){
      if (!i.sqft) return {low:0, high:0};

      const bedKey = Math.min(i.bed, 4); // use 4+ bucket
      const premKey = Math.min(i.bed, 5); // allow extra premium bucket for 5

      // Piecewise PSF with diminishing returns on larger units
      const cap = COEFFS.coreCap[bedKey] || 700;
      const coreSqft = Math.min(i.sqft, cap);
      const tailSqft = Math.max(0, i.sqft - cap);
      let base = (coreSqft * (COEFFS.corePSF[bedKey] || 3.2)) + (tailSqft * COEFFS.tailPSF) + (COEFFS.bedPremium[premKey] || 0);

      // Adjustments
      base += (Math.max(1, i.baths) - 1) * COEFFS.bathPremium; // extra baths
      base += (i.parking || 0) * COEFFS.parkingPremium;         // parking
      base += (i.storage || 0) * COEFFS.storagePremium;         // locker

      // Slightly narrower variance to match current market
      const band = i.bed <= 1 ? 0.07 : (i.bed === 2 ? 0.09 : 0.11);
      const low = Math.max(0, Math.round(base * (1 - band)));
      const high = Math.round(base * (1 + band));
      return {low, high};
    }

    // --- MODE TOGGLE ---
    let MODE = 'monthly'; // 'monthly' | 'annual'
    const btnMonthly = document.getElementById('modeMonthly');
    const btnAnnual = document.getElementById('modeAnnual');
    btnMonthly.addEventListener('click', ()=>{ MODE='monthly'; btnMonthly.classList.add('on'); btnAnnual.classList.remove('on'); update(); });
    btnAnnual.addEventListener('click', ()=>{ MODE='annual'; btnAnnual.classList.add('on'); btnMonthly.classList.remove('on'); update(); });

    // Update UI
    function update(){
      const i = readInputs();
      const area = isDowntown(i.postal);
      const chip = document.getElementById('areaChip');
      chip.textContent = area ? 'Downtown verified' : (i.postal ? 'Outside service area' : 'Check postal code');
      chip.className = 'chip ' + (area ? 'ok' : 'no');

      const {low, high} = computeRentRange(i);
      const avg = Math.round((low + high) / 2);

      const fee = computeFee(i);
      const hst = fee * HST_RATE;
      const adminWithHST = ADMIN_FEE * (1 + HST_RATE);

      const rentLabel = document.getElementById('rentLabel');
      const feeLabel = document.getElementById('feeLabel');
      const hstLabel = document.getElementById('hstLabel');
      const adminRow = document.getElementById('adminRow');
      const adminTotalEl = document.getElementById('adminTotal');
      const netLabel = document.getElementById('netLabel');

      if (MODE === 'monthly'){
        // labels
        rentLabel.textContent = 'Estimated monthly rent';
        feeLabel.textContent = 'Rentura monthly fee';
        hstLabel.textContent = 'HST (13%)';
        netLabel.textContent = 'Owner income after fee + HST';
        adminRow.style.display = 'none';

        document.getElementById('rentRange').textContent = `${fmt0(low)} – ${fmt0(high)}`;
        document.getElementById('avgRent').textContent = fmt0(avg);
        document.getElementById('fee').textContent = fmt0(fee);
        document.getElementById('hst').textContent = fmt2(hst);

        const totalCost = fee + hst;
        const netLow = Math.max(0, low - totalCost);
        const netHigh = Math.max(0, high - totalCost);
        document.getElementById('netRange').textContent = `${fmt0(netLow)} – ${fmt0(netHigh)}`;
        const pct = avg ? Math.round((totalCost / avg) * 1000) / 10 : 0;
        document.getElementById('pct').textContent = avg ? pct + '%' : '0%';
      } else {
        // annual mode
        rentLabel.textContent = 'Estimated annual rent';
        feeLabel.textContent = 'Rentura annual fee (12 mo)';
        hstLabel.textContent = 'HST (13%) on annual fees';
        netLabel.textContent = 'Owner income (first year, after fees + HST)';
        adminRow.style.display = 'flex';

        const aLow = low * 12;
        const aHigh = high * 12;
        const aAvg = avg * 12;
        const feeAnnual = fee * 12;
        const hstAnnual = hst * 12;
        const firstYearExtras = adminWithHST;

        document.getElementById('rentRange').textContent = `${fmt0(aLow)} – ${fmt0(aHigh)}`;
        document.getElementById('avgRent').textContent = fmt0(aAvg);
        document.getElementById('fee').textContent = fmt0(feeAnnual);
        document.getElementById('hst').textContent = fmt2(hstAnnual);
        adminTotalEl.textContent = fmt2(firstYearExtras);

        const totalCostFirstYear = feeAnnual + hstAnnual + firstYearExtras;
        const netLow = Math.max(0, aLow - totalCostFirstYear);
        const netHigh = Math.max(0, aHigh - totalCostFirstYear);
        document.getElementById('netRange').textContent = `${fmt0(netLow)} – ${fmt0(netHigh)}`;
        const pct = aAvg ? Math.round((totalCostFirstYear / aAvg) * 1000) / 10 : 0;
        document.getElementById('pct').textContent = aAvg ? pct + '%' : '0%';
      }
    }

    // Initial paint
    update();
  </script>
</body>
</html>

Rentura Property Management

Rentura simplifies condo unit ownership for Downtown Toronto landlords. We offer expert tenant placement, rent collection, and oversight. We use a pricing model that offers fair flat monthly fees rather than a percentage of rent. Whether you own one unit or a growing portfolio, we handle the details so you can enjoy steady income without the daily stress. Our team specializes in downtown condos and delivers responsive, professional service tailored to urban landlords. Transparent pricing. Local expertise. Peace of mind.