Upgrade Build My Route into a personal report generator with export and data hook
Adds role, faculty (typed), and budget fields; the configurator now navigates to a new per-language results page (my-route/) carrying the answers in the URL. The results page renders a branded, printable report: profile chips, tailored ordered steps, city/budget/role/level focus tips, key page links, a disclaimer, and a Save-as-PDF/print button (print CSS shows only the report). my-route.js also has a Google Form hook to collect the profile for demographics once configured. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
popovskikandClaude Opus 4.8 committed
1 parent
f88a9bb6b4
commit
b486a4a70d
9 files changed
+1177
-132
No files matched your search
@@ -636,6 +636,17 @@
|
||||
cursor: pointer;
|
||||
}
|
||||
.guide-field select:focus { outline: none; border-color: #2D738C; box-shadow: 0 0 0 3px rgba(45,115,140,0.12); }
|
||||
.guide-field input[type="text"] {
|
||||
font-family: 'Inter', sans-serif;
|
||||
font-size: 15px;
|
||||
color: #101828;
|
||||
padding: 11px 14px;
|
||||
border: 1px solid #D0D5DD;
|
||||
border-radius: 10px;
|
||||
background: #FFFFFF;
|
||||
}
|
||||
.guide-field input[type="text"]::placeholder { color: #98A2B3; }
|
||||
.guide-field input[type="text"]:focus { outline: none; border-color: #2D738C; box-shadow: 0 0 0 3px rgba(45,115,140,0.12); }
|
||||
.guide-route-actions { margin-top: 20px; display: flex; gap: 12px; flex-wrap: wrap; }
|
||||
|
||||
.guide-route-result { margin-top: 24px; border-top: 1px solid #EAECF0; padding-top: 22px; }
|
||||
@@ -854,3 +865,119 @@
|
||||
.guide-route { margin-top: 24px; padding: 22px; border-radius: 16px; }
|
||||
.guide-route-actions .btn { width: 100%; text-align: center; }
|
||||
}
|
||||
|
||||
/* ---------- Personal route results page ---------- */
|
||||
.route-report-page { max-width: 860px; margin: 40px auto; padding: 0 24px; }
|
||||
.route-report {
|
||||
background: #fff;
|
||||
border: 1px solid #EAECF0;
|
||||
border-radius: 18px;
|
||||
padding: 34px;
|
||||
box-shadow: 0 10px 30px rgba(16, 24, 40, .06);
|
||||
}
|
||||
.route-report-head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
padding-bottom: 18px;
|
||||
margin-bottom: 18px;
|
||||
border-bottom: 2px solid #F2F4F7;
|
||||
}
|
||||
.route-report-logo { height: 52px; width: auto; }
|
||||
.route-report h1 { font-size: 24px; margin: 0; color: #101828; }
|
||||
.route-report-date { margin: 4px 0 0; font-size: 13px; color: #98A2B3; }
|
||||
.route-report-intro { color: #475467; line-height: 25px; margin: 0 0 8px; }
|
||||
.route-report h2 { font-size: 17px; color: #101828; margin: 24px 0 10px; }
|
||||
.route-chips { display: flex; flex-wrap: wrap; gap: 10px; margin: 6px 0 6px; }
|
||||
.route-chip {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2px;
|
||||
min-width: 120px;
|
||||
padding: 8px 12px;
|
||||
border: 1px solid #EAECF0;
|
||||
border-radius: 10px;
|
||||
background: #FCFCFD;
|
||||
}
|
||||
.route-chip span { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: #98A2B3; }
|
||||
.route-chip strong { font-size: 14px; font-weight: 600; color: #101828; }
|
||||
.route-steps { list-style: none; counter-reset: rstep; padding: 0; margin: 0; }
|
||||
.route-steps li {
|
||||
counter-increment: rstep;
|
||||
position: relative;
|
||||
padding: 11px 0 11px 40px;
|
||||
border-bottom: 1px solid #F2F4F7;
|
||||
line-height: 24px;
|
||||
color: #344054;
|
||||
}
|
||||
.route-steps li::before {
|
||||
content: counter(rstep);
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 10px;
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
border-radius: 50%;
|
||||
background: #2D738C;
|
||||
color: #fff;
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.route-steps a, .route-focus a { color: #2D738C; font-weight: 600; text-decoration: none; }
|
||||
.route-steps a:hover, .route-focus a:hover { text-decoration: underline; }
|
||||
.route-focus { list-style: none; padding: 0; margin: 0; }
|
||||
.route-focus li { position: relative; padding: 8px 0 8px 24px; line-height: 23px; color: #344054; }
|
||||
.route-focus li::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 4px;
|
||||
top: 15px;
|
||||
width: 7px;
|
||||
height: 7px;
|
||||
border-radius: 50%;
|
||||
background: #ff6b2c;
|
||||
}
|
||||
.route-links { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 8px; }
|
||||
.route-links a {
|
||||
display: inline-block;
|
||||
padding: 7px 12px;
|
||||
border: 1px solid #D8E3E8;
|
||||
border-radius: 8px;
|
||||
background: #F6FAFB;
|
||||
color: #2D738C;
|
||||
font-size: 13.5px;
|
||||
font-weight: 500;
|
||||
text-decoration: none;
|
||||
}
|
||||
.route-links a:hover { border-color: #2D738C; background: #EEF6F8; }
|
||||
.route-disclaimer {
|
||||
margin: 22px 0;
|
||||
padding: 14px 16px;
|
||||
border: 1px solid #FED7AA;
|
||||
border-radius: 12px;
|
||||
background: #FFF7ED;
|
||||
color: #7C4A12;
|
||||
font-size: 13.5px;
|
||||
line-height: 21px;
|
||||
}
|
||||
.route-actions { display: flex; gap: 12px; flex-wrap: wrap; }
|
||||
|
||||
@media print {
|
||||
body * { visibility: hidden; }
|
||||
.route-report, .route-report * { visibility: visible; }
|
||||
.route-report-page { margin: 0; padding: 0; max-width: none; }
|
||||
.route-report {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
box-shadow: none;
|
||||
padding: 0;
|
||||
}
|
||||
.no-print { display: none !important; }
|
||||
}
|
||||
Reference in new issue
Block a user