#!/usr/bin/env python3 # --------------------------------------------------------------------------- # sidebar-inner.html — option sheet for the inner service page's sidebar. # # Adi asked two things at once, and the second one answers the first: # "buatkan opsi tampilan untuk sidebar ... menurutmu apakah tetap perlu ada # form? karena di bagian hero sudah ada form dan ... sudah ada ctatab" # # So the options span the whole range — no form, the smallest possible form, # and the form exactly as it is — and the sheet carries the count that makes # the question answerable rather than a matter of taste. # # Every option is shown IN CONTEXT: the real 1280 container, the real 832px # article column beside it at real type size, the sidebar at its real 384px. # A sidebar judged out of context tells you nothing about a sidebar. # # The sheet's own chrome (page-head, boxes, option labels, stage) is LIFTED # from the hero option sheet's generator so the two sheets read as one series. # --------------------------------------------------------------------------- import io, sys OUT = "/srv/apps/leaguelaw/wp-content/prototype/sidebar-inner.html" R1GEN = "/srv/apps/leaguelaw/prototyping/gen_heroinner.py" TEL = "tel:+12508880002" INJURY = [ ("Car Accident Claims", True), ("Motorcycle Accident Claims", False), ("Cyclist Accident Claims", False), ("Passenger Injury Claims", False), ("Pedestrian Injury Claims", False), ("Hit and Run Injury Claims", False), ("Slip and Fall", False), ("Premises Liability Claims", False), ("School Accident Claims", False), ("Product Liability", False), ("Dog Attack", False), ("Boat Accidents", False), ("Assault & Battery", False), ] BENCH = [ ("Darren Williams", "/wp-content/uploads/DARRENorangebowtie.jpg"), ("Joji Kawaguchi", "/wp-content/uploads/Joji-20220126-028-Hi-Res-scaled-e1709583455555-761x1024.jpg"), ("Matthew Melnyk", "/wp-content/uploads/matthew-melnyk-sm.jpg"), ("Reid Warren", "/wp-content/uploads/Reid-20240403-030-Hi-Res-scaled-e1715983076700-761x1024.jpg"), ("Georgia Lockhart", "/wp-content/uploads/Georgia-20260119-069-Hi-Res-V2-BW-scaled-e1773087958989-761x1024.jpg"), ] # the article's real opening, so the column beside each option is the real one PROSE = """

Being involved in a car accident can be scary and often those injured in motor vehicle accidents are unaware of how to ensure the best recovery possible. Those injured in car accidents in British Columbia, whether as a driver, passenger, pedestrian or cyclist are entitled to pursue compensation for their injuries. Car accident victims who are injured may claim for pain and suffering, out-of-pocket expenses, loss of housekeeping capacity, loss of income and diminished earning capacity, and for cost of future care.

Typically those involved in car accidents in British Columbia may make two types of claims – a Tort claim and a Part 7 claim.

A Tort claim is available for those who are injured and who can prove that another person was, at least partly, at fault or responsible for causing the accident. The person must also establish that they suffered damages, and that those damages were the result of the accident.

""" def lift_chrome(): """The sheet chrome from the hero option sheet — same series, same look.""" src = io.open(R1GEN, encoding="utf-8").read() i = src.index('CSS = r"""') + len('CSS = r"""') j = src.index(" /* ---------- header stand-in", i) css = src[i:j] assert ".page-head h1" in css and ".opt-label .tag" in css and ".stage {" in css, \ "the sheet chrome did not survive the lift" return css SIDEBAR_CSS = r""" /* ===================================================================== THE PAGE, AS CONTEXT 832 article + 64 gutter + 384 sidebar = 1280. The article is real copy at real size, dimmed — the point of comparison is the 384px column, but a 384px column only means something next to the 832 it has to hold its own against. ===================================================================== */ .pg { background:#fff; padding:40px 0 46px; } .pg .cols { display:flex; } .pg .col { width:832px; flex:none; } .pg .rail { width:384px; margin-left:64px; flex:none; } .pg .prose { font-size:16.5px; line-height:1.9; color:#4A453F; opacity:.42; } .pg .prose p { margin-bottom:22px; } .pg .h2 { font-family:Raleway,sans-serif; font-weight:400; font-size:22px; line-height:1.5; color:var(--brown); margin-bottom:16px; opacity:.42; } /* ---------- the sidebar vocabulary, home_v1's ---------- */ .fh { font-family:Raleway,sans-serif; font-weight:700; font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; color:#8D867E; padding-bottom:11px; margin-bottom:4px; border-bottom:1px solid var(--line); } .rlist a { display:block; position:relative; font-size:13.5px; font-weight:600; color:#4A453F; padding:11px 2px 11px 19px; border-bottom:1px solid #EEECE7; transition:color .14s ease; } .rlist a:before { content:""; position:absolute; left:0; top:50%; width:9px; height:10.392px; background:var(--orange); clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%); transform:translateY(-50%) translateX(-7px) scale(0); transition:transform .14s ease; } .rlist a:hover { color:var(--orange); } .rlist a:hover:before, .rlist a.cur:before { transform:translateY(-50%) translateX(0) scale(1); } .rlist a.cur { color:var(--orange); } .rcard { background:var(--paper); border:1px solid var(--line); border-top:4px solid var(--orange); padding:24px 26px 26px; } .rcard .rh { font-family:Raleway,sans-serif; font-weight:800; font-size:18px; color:var(--brown); letter-spacing:.02em; margin-bottom:8px; } .rcard p { font-size:13.5px; line-height:1.75; color:var(--muted); margin-bottom:16px; } .rcard .rphone { display:block; font-family:Raleway,sans-serif; font-weight:800; font-size:26px; line-height:32px; color:var(--orange); } .rcard .rphone .cn { display:block; color:var(--teal); font-weight:600; font-size:10.5px; line-height:14px; letter-spacing:.16em; text-transform:uppercase; } .rcard .rsafe { display:block; font-size:11.5px; line-height:16px; color:#9A948B; margin-top:12px; } .swarmbtn { display:inline-block; position:relative; background:var(--brown); color:#fff; font-family:Raleway,sans-serif; font-weight:700; font-size:13px; line-height:17px; letter-spacing:.06em; text-transform:uppercase; padding:12px 44px 12px 20px; cursor:pointer; border:0; } .swarmbtn.wide { display:block; width:100%; text-align:left; } .swarmbtn i { position:absolute; display:block; width:9px; height:10.392px; background:var(--orange); clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%); transition:all .25s ease; } .swarmbtn .w1 { right:12px; top:6px; transform:rotate(14deg); } .swarmbtn .w2 { right:26px; top:16px; transform:rotate(-20deg); } .swarmbtn .w3 { right:8px; top:24px; transform:rotate(32deg); } .swarmbtn:hover .w1 { right:16px; top:5px; transform:rotate(0); } .swarmbtn:hover .w2 { right:21.5px; top:14.6px; transform:rotate(0); } .swarmbtn:hover .w3 { right:10.5px; top:14.6px; transform:rotate(0); } /* ---------- S2's bench card ---------- */ .who { margin-top:30px; } .who .faces { display:flex; gap:6px; margin:14px 0 14px; } .who .faces span { flex:1; position:relative; overflow:hidden; } .who .faces img { width:100%; height:74px; object-fit:cover; filter:grayscale(1); display:block; } .who .nm { font-size:12px; line-height:1.7; color:var(--muted); } .who .nm b { color:var(--brown); font-weight:600; } .who .more { display:inline-block; margin-top:12px; font-family:Raleway,sans-serif; font-weight:700; font-size:11.5px; line-height:16px; letter-spacing:.1em; text-transform:uppercase; color:var(--brown); box-shadow:inset 0 -2px 0 var(--orange); padding-bottom:2px; } /* ---------- S3's one-field callback ---------- */ .oneline { margin-top:30px; background:var(--brown); color:#fff; padding:22px 24px 24px; } .oneline .rh { font-family:Raleway,sans-serif; font-weight:800; font-size:17px; line-height:22px; margin-bottom:5px; } .oneline p { font-size:12.5px; line-height:18px; color:#C9C3BB; margin-bottom:14px; } .oneline .row { display:flex; } .oneline input { flex:1; min-width:0; border:0; font-family:"Open Sans",sans-serif; font-size:13px; padding:12px 13px; color:#444; outline:none; background:#fff; } .oneline input::placeholder { color:#9A948B; } .oneline button { flex:none; border:0; background:var(--orange); color:#fff; cursor:pointer; font-family:Raleway,sans-serif; font-weight:700; font-size:12px; line-height:16px; letter-spacing:.06em; text-transform:uppercase; padding:12px 16px; } /* ---------- S4's full form — the live one, in the new vocabulary ------- */ .bigform { margin-top:30px; border:1px solid var(--line); } .bigform .fhead { background:var(--orange); color:#fff; padding:18px 22px 16px; } .bigform .fhead img { width:180px; height:auto; display:block; margin-bottom:10px; } .bigform .fhead p { font-family:Raleway,sans-serif; font-weight:600; font-size:14px; line-height:19px; letter-spacing:.04em; } .bigform .fbody { padding:20px 22px 22px; background:#fff; } .bigform .legend { font-size:11px; line-height:15px; color:#9A948B; margin-bottom:12px; } .bigform .gf { display:flex; margin-bottom:12px; } .bigform .gf .icon { width:38px; flex:none; background:var(--orange); color:#fff; display:flex; align-items:flex-start; justify-content:center; padding-top:12px; font-size:14px; } .bigform .gf input, .bigform .gf textarea { flex:1; min-width:0; border:1px solid var(--line); border-left:0; font-family:"Open Sans",sans-serif; font-size:13px; padding:11px 12px; color:#444; outline:none; } .bigform .gf textarea { height:110px; resize:vertical; } .bigform .safe { display:block; font-size:11.5px; line-height:16px; color:#9A948B; margin-bottom:12px; } /* ---------- S5's sticky rail ---------- */ .stickynote { margin-top:14px; font-size:11.5px; line-height:17px; color:#9A948B; border-left:2px solid var(--line); padding-left:11px; } /* the tab, drawn on the stage so its role in the argument is visible */ .tabghost { position:absolute; right:0; top:50%; transform:translateY(-50%); background:var(--orange); color:#fff; font-family:Raleway,sans-serif; font-weight:700; font-size:13px; letter-spacing:.1em; writing-mode:vertical-rl; padding:20px 14px; z-index:5; box-shadow:-4px 4px 16px rgba(0,0,0,.22); } .stage { position:relative; } """ def nav(cur=True): rows = "".join('%s' % (' class="cur"' if c else '', n) for n, c in INJURY) return '

Injury claims

' % rows def card(head, body, btn=True): b = ('') if btn else "" return ('

%s' 'Call now250-888-0002' '🔒 Your information is kept safe.%s

' % (head, body, TEL, b)) def S1(): return ('

' + nav() + '

' + card("We’ve got your back", "

Free consultations for those injured in car accidents. Our email is monitored " "seven days a week.

") + '

') def S2(): faces = "".join('

' % src for _, src in BENCH) return ('

' + nav() + '

Who handles this claim

' '

' + faces + '

' '

Five lawyers take injury claims: Darren Williams, ' 'Joji Kawaguchi, Matthew Melnyk, Reid Warren and ' 'Georgia Lockhart.

' 'Meet the injury team

' '

' + card("We’ve got your back", "", btn=False) + '

') def S3(): return ('

' + nav() + '

Rather be called?

' '

Leave a number. One field, nothing else — a lawyer calls you back.

' '

') def S4(): return ('

' + nav() + '

' '

“*” indicates required fields

' '

' '🔒 Your information is kept safe.' '' '

') def S5(): return ('

' + nav() + '

Sticky: the list stays with the reader for the whole ' '1,534px of article. Contact is the tab on the right edge.

' '

') OPTIONS = [ ("S1", "Navigation, then one card", "no form", "The thirteen sibling claims, then a single card carrying the phone and one Book Consultation " "button — which opens the same modal the tab opens. No fields in the sidebar at all.", "This is the recommendation. The card keeps a visible call to action in the column (the tab " "is on the screen edge and easy to read past) without asking for four fields the page already asks " "for twice elsewhere.", S1), ("S2", "Navigation, then who takes the case", "no form", "The claims list, then the five lawyers who actually handle injury work, as faces, with a link to " "the team — and a small card with the phone under it.", "The only option that puts something in the sidebar that exists nowhere else on the page. " "“Who would I be dealing with” is a real question on a claims page and nothing on this " "page answers it. The faces are the live site’s own headshots, monochrome so they sit behind " "the type rather than in front of it.", S2), ("S3", "Navigation, then one field", "1 field", "The claims list, then a brown block asking for a phone number and nothing else — the " "smallest ask on the page.", "If a form has to stay, this is the one that does not duplicate anything: the footer already asks " "for name, email, phone and message. Asking for one field is a different offer, not the same " "offer twice — and it matches the hero’s own Call Me Back promise.", S3), ("S4", "Navigation, then the form as it is", "4 fields", "The status quo: the claims list, then the four-field form the live sidebar carries, redrawn in the " "new vocabulary so the comparison is about the form and not about the styling.", "Kept in the sheet so the cost is visible rather than argued. This form is character-for-character " "the footer’s form — same four fields, same legend, same “Your information is " "kept safe”, same button. Two identical components on one page.", S4), ("S5", "Navigation only, sticky", "no form", "Nothing but the claims list — but it sticks, so it stays beside the reader for the whole " "article instead of scrolling away after the first screen.", "The article column is 1,534px; the claims list is about 500. In every other option the " "bottom two thirds of the sidebar is empty space that scrolls past. This is the only option that " "uses the column’s real length — and the only one where the sibling claims are reachable " "from anywhere in the article.", S5), ] HEAD = """ League Law — inner service sidebar options

Inner service sidebar — options

Adi asked for sidebar options and, in the same breath, the question that decides them: does the sidebar still need a form, now that the hero has one and the consultation tab is on every screen? Below is the count that makes that answerable, then five options spanning no form to the form exactly as it is.

The answer is no — and it is a count, not an opinion. Here is every way the page as it stands asks to be contacted:

where	what it asks for
hero contact panel	phone at display size + 2 fields + Call Me Back
article, opening line	“Contact us today for a consultation” + the number
article, closing line	“may be contacted by phone … or via email”
sidebar form	4 fields + Send Message
contact strip, full width	phone + email
Get in touch	“Please contact us for more information”
footer form	4 fields + Send Message
footer bottom	phone, fax, email, address
consultation tab (new)	always on screen → modal with 4 fields

Nine places. 14 input fields. The phone number 11 times. Four submit buttons.

The sidebar form is not merely one of several — it is a literal duplicate. It has the same four fields, the same “* indicates required fields” legend, the same “Your information is kept safe” and the same SEND MESSAGE button as the footer form. The page ships the same component twice.
The tab does the sidebar form’s job better. A sidebar form is on screen for part of the scroll; the tab is on screen for all of it, and opens the same four fields.
Three forms is three different definitions of “enough” — the hero asks two fields, the sidebar and footer ask four. That is a decision pushed onto the reader.
The sidebar has a job nothing else can do: it is the only route to the other twelve injury claims. Today the form pushes that list up and competes with it.

Recommendation: S1 — navigation, then one card with the phone and a Book Consultation button that opens the tab’s modal. If a form has to stay, S3: one field, which is a different offer rather than the same offer a third time.

How the column is spent. The article column on this page is 1,534px tall. The claims list is about 500 of that, so what an option does with the other 1,000 is the real question.

option	sidebar height	column left empty	fields
S5 — navigation only, sticky	__H5__	follows the reader instead	0
S1 — navigation + one card	__H1__	__E1__	0
S3 — navigation + one field	__H3__	__E3__	1
S2 — navigation + who takes the case	__H2__	__E2__	0
S4 — navigation + the form as it is	__H4__	__E4__	4

Two things this sheet does not decide:

The article still opens with its own contact line — teal hexagon, then “Contact us today for a consultation · (250) 888-0002” — about 200px under a hero that has just given the same number at 54px. That is the article’s part, not the sidebar’s, and it is still the replica.
Whether the footer form stays either. If the sidebar form goes because the tab does its job, the same argument reaches the footer form. Worth deciding once, for both.

Reading the frames: each stage is the real page geometry — 832 + 64 + 384 = 1280 — with the article column in real copy at real size, dimmed, because a 384px column only means something next to the 832 it sits beside. The orange tab is drawn on the right edge of every frame: it is on the page now, and it is half the argument.

Sidebar — S1 … S5

""" def build(heights): out = [HEAD.replace("__CSS__", lift_chrome() + SIDEBAR_CSS)] for k, v in heights.items(): out[0] = out[0].replace(k, v) for tag, name, hint, what, note, fn in OPTIONS: out.append( '\n

\n' '

%s%s' '%s%s

\n' '

WE’VE GOT YOUR BACK' '

' '

League & Williams are Experienced Car Accident ' 'Injury Claims Lawyers

' '%s

\n' '

\n' % (tag, name, hint, what, PROSE, fn(), note)) out.append("\n\n\n") return "".join(out) if __name__ == "__main__": # placeholders filled in after the browser measures them h = {"__H%d__" % i: "—" for i in range(1, 6)} h.update({"__E%d__" % i: "—" for i in range(1, 6)}) import json, os if os.path.exists("sidebar_heights.json"): h.update(json.load(open("sidebar_heights.json"))) html = build(h) dest = sys.argv[1] if len(sys.argv) > 1 else OUT io.open(dest, "w", encoding="utf-8").write(html) print("wrote %s (%d bytes)" % (dest, len(html)))