Diff -- /var/www/vhosts/3dshawn.com/abforge.3dshawn.com/TEMPLATES/abforge_help.html

O Operator
Diff

/var/www/vhosts/3dshawn.com/abforge.3dshawn.com/TEMPLATES/abforge_help.html

added on local at 2026-07-01 16:01:51

Added
+199
lines
Removed
-0
lines
Context
0
unchanged
Blobs
from
to eaf9b242dbd6
Restore this content →
Unified diff
Naive LCS-based line diff. Additions in emerald, deletions in rose. Both sides decompressed live from BLOB_STORE.
1<div class="page-head">
2 <div>
3 <span class="page-eyebrow"><span class="dot"></span> Help &amp; resources</span>
4 <h1 class="page-title">Where do I do that?</h1>
5 <p class="page-subtitle">Quick pointers to the page that owns each thing in ABForge. Use the search box up top to jump straight to a site, experiment, or settings section.</p>
6 </div>
7</div>
8
9<div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px">
10 <div class="module">
11 <div class="module-head"><div class="left"><div class="module-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="17 8 12 3 7 8"/><line x1="12" y1="3" x2="12" y2="15"/></svg></div><div><div class="module-title">Run my first experiment</div></div></div></div>
12 <div class="module-body">
13 <ol style="padding-left:18px;margin:0;line-height:1.7;font-size:13px;color:var(--col-text-2)">
14 <li><a href="/sites.cgi" class="text-brand">Add a site</a> and paste the tracker snippet</li>
15 <li><a href="/experiments.cgi" class="text-brand">Create an experiment</a> (A/B or MVT)</li>
16 <li><a href="/goals.cgi" class="text-brand">Define a goal</a> so we know what to measure</li>
17 <li><a href="/dashboard.cgi" class="text-brand">Watch results</a> roll in on the Dashboard</li>
18 </ol>
19 </div>
20 </div>
21
22 <div class="module">
23 <div class="module-head"><div class="left"><div class="module-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="2" y="5" width="20" height="14" rx="2"/><line x1="2" y1="10" x2="22" y2="10"/></svg></div><div><div class="module-title">Billing &amp; plan</div></div></div></div>
24 <div class="module-body">
25 <ul style="padding-left:18px;margin:0;line-height:1.7;font-size:13px;color:var(--col-text-2)">
26 <li><a href="/billing.cgi" class="text-brand">View invoices</a> + payment method</li>
27 <li>Upgrade or downgrade any time &mdash; prorated automatically</li>
28 <li>Monthly event allotments and overage rates on the <a href="/pricing.cgi" class="text-brand">Pricing page</a></li>
29 </ul>
30 </div>
31 </div>
32
33 <div class="module">
34 <div class="module-head"><div class="left"><div class="module-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="7"/><path d="m21 21-4.3-4.3"/></svg></div><div><div class="module-title">Understand your traffic</div></div></div></div>
35 <div class="module-body">
36 <ul style="padding-left:18px;margin:0;line-height:1.7;font-size:13px;color:var(--col-text-2)">
37 <li><a href="/sources.cgi" class="text-brand">Sources</a> &mdash; where visitors came from</li>
38 <li><a href="/heatmaps.cgi" class="text-brand">Heatmaps</a> &mdash; what they clicked</li>
39 <li><a href="/funnels.cgi" class="text-brand">Funnels</a> &mdash; where they dropped off</li>
40 </ul>
41 </div>
42 </div>
43
44 <div class="module">
45 <div class="module-head"><div class="left"><div class="module-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2Z"/></svg></div><div><div class="module-title">Team &amp; permissions</div></div></div></div>
46 <div class="module-body">
47 <ul style="padding-left:18px;margin:0;line-height:1.7;font-size:13px;color:var(--col-text-2)">
48 <li><a href="/team.cgi" class="text-brand">Invite teammates</a> by email</li>
49 <li>Assign per-site roles (Viewer, Analyst, Admin)</li>
50 <li>Audit every change from <a href="/profile.cgi" class="text-brand">Settings &rarr; Audit log</a></li>
51 </ul>
52 </div>
53 </div>
54
55 <div class="module">
56 <div class="module-head"><div class="left"><div class="module-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/></svg></div><div><div class="module-title">Try Sample Data View</div></div></div></div>
57 <div class="module-body">
58 <div style="font-size:13px;color:var(--col-text-2);line-height:1.65">Every main page has a <strong>Sample Data View</strong> button up top that fills the page with example data so you can see how it reads once you have activity. Look for it on Dashboard, Analytics, Heatmaps, Experiments, Funnels, and Admin pages.</div>
59 </div>
60 </div>
61
62 <style>
63 /* Highlighted "Talk to a human" card -- this is the support
64 lifeline for brand-new users, so it gets a blue accent
65 border, a soft pulsing glow, and double width in the help
66 grid so it's the first thing the eye lands on. */
67 .help-support-card {
68 grid-column: span 2;
69 position: relative;
70 background: linear-gradient(135deg, rgba(255,122,61,0.10) 0%, rgba(99,102,241,0.06) 100%);
71 border: 1px solid rgba(255,122,61,0.55) !important;
72 box-shadow: 0 0 24px rgba(255,122,61,0.22);
73 overflow: hidden;
74 animation: help-support-pulse 3.2s ease-in-out infinite;
75 }
76 .help-support-card::before {
77 content: '';
78 position: absolute; inset: 0;
79 pointer-events: none;
80 background: radial-gradient(ellipse 70% 60% at 0% 0%, rgba(255,122,61,0.18) 0%, transparent 60%);
81 }
82 .help-support-card .module-head { position: relative; }
83 .help-support-card .module-icon {
84 background: linear-gradient(135deg, #ff7a3d, #6366f1) !important;
85 color: #fff !important;
86 box-shadow: 0 0 12px rgba(255,122,61,0.5);
87 }
88 .help-support-card .module-title {
89 font-size: 17px !important;
90 letter-spacing: 0.2px;
91 }
92 .help-support-card .help-eyebrow {
93 display: inline-block;
94 font-size: 10px; font-weight: 800;
95 letter-spacing: 2px; text-transform: uppercase;
96 color: #93c5fd;
97 background: rgba(255,122,61,0.18);
98 border: 1px solid rgba(255,122,61,0.45);
99 border-radius: 999px;
100 padding: 3px 10px;
101 margin-bottom: 8px;
102 }
103 @keyframes help-support-pulse {
104 0%, 100% { box-shadow: 0 0 18px rgba(255,122,61,0.18); }
105 50% { box-shadow: 0 0 32px rgba(255,122,61,0.45); }
106 }
107 /* Stack on narrow viewports so the span-2 card doesn't push the
108 grid past the viewport width. */
109 @media (max-width: 720px) {
110 .help-support-card { grid-column: span 1; }
111 }
112
113 /* "Tutorials & walkthroughs" companion card -- same shape and span
114 as the support card, themed in violet (the optimization /
115 experiments accent color used elsewhere) so it sits as a clear
116 second pillar next to support. */
117 .help-tutorials-card {
118 grid-column: span 2;
119 position: relative;
120 background: linear-gradient(135deg, rgba(124,58,237,0.10) 0%, rgba(168,85,247,0.06) 100%);
121 border: 1px solid rgba(124,58,237,0.55) !important;
122 box-shadow: 0 0 24px rgba(124,58,237,0.22);
123 overflow: hidden;
124 animation: help-tutorials-pulse 3.2s ease-in-out infinite;
125 }
126 .help-tutorials-card::before {
127 content: '';
128 position: absolute; inset: 0;
129 pointer-events: none;
130 background: radial-gradient(ellipse 70% 60% at 0% 0%, rgba(124,58,237,0.18) 0%, transparent 60%);
131 }
132 .help-tutorials-card .module-head { position: relative; }
133 .help-tutorials-card .module-icon {
134 background: linear-gradient(135deg, #7c3aed, #a855f7) !important;
135 color: #fff !important;
136 box-shadow: 0 0 12px rgba(124,58,237,0.5);
137 }
138 .help-tutorials-card .module-title {
139 font-size: 17px !important;
140 letter-spacing: 0.2px;
141 }
142 .help-tutorials-card .help-eyebrow {
143 display: inline-block;
144 font-size: 10px; font-weight: 800;
145 letter-spacing: 2px; text-transform: uppercase;
146 color: #c4b5fd;
147 background: rgba(124,58,237,0.18);
148 border: 1px solid rgba(124,58,237,0.45);
149 border-radius: 999px;
150 padding: 3px 10px;
151 margin-bottom: 8px;
152 }
153 @keyframes help-tutorials-pulse {
154 0%, 100% { box-shadow: 0 0 18px rgba(124,58,237,0.18); }
155 50% { box-shadow: 0 0 32px rgba(124,58,237,0.45); }
156 }
157 @media (max-width: 720px) {
158 .help-tutorials-card { grid-column: span 1; }
159 }
160 </style>
161
162 <!-- Tutorials & walkthroughs -- parallel pillar to the support card.
163 Surfaces /tutorials.cgi (full library), the A/B & MVT testing
164 sub-section, and /tour.cgi (long-form product tour). -->
165 <div class="module help-tutorials-card">
166 <div class="module-head"><div class="left"><div class="module-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20"/><path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z"/></svg></div><div><span class="help-eyebrow">Learn the platform</span><div class="module-title">Tutorials &amp; walkthroughs</div></div></div></div>
167 <div class="module-body">
168 <div style="font-size:14px;color:var(--col-text-2);line-height:1.7;margin-bottom:16px;max-width:680px">
169 <strong style="color:var(--col-text)">Step-by-step guides for every feature</strong> &mdash; installing the tracker, your first A/B test, MVT setup, heatmaps, goals, and funnels. Each tutorial takes 3&ndash;5 minutes; viewed ones are marked so you can pick up where you left off.
170 </div>
171 <div style="display:flex;gap:10px;flex-wrap:wrap;align-items:center">
172 <a href="/tutorials.cgi" class="btn btn-primary" style="display:inline-flex;align-items:center;gap:8px;padding:11px 18px;font-size:14px;font-weight:700;background:linear-gradient(135deg,#7c3aed,#a855f7);border:none;box-shadow:0 6px 18px rgba(124,58,237,0.45)">
173 <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20"/><path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z"/></svg>
174 Browse tutorials
175 </a>
176 <a href="/tutorials.cgi#section-optimization" class="btn btn-ghost btn-sm">A/B &amp; MVT tutorials</a>
177 <a href="/docs.cgi" class="btn btn-ghost btn-sm">Docs</a>
178 </div>
179 </div>
180 </div>
181
182 <div class="module help-support-card">
183 <div class="module-head"><div class="left"><div class="module-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg></div><div><span class="help-eyebrow">We've got you</span><div class="module-title">Talk to a human</div></div></div></div>
184 <div class="module-body">
185 <div style="font-size:14px;color:var(--col-text-2);line-height:1.7;margin-bottom:16px;max-width:680px">
186 <strong style="color:var(--col-text)">The fastest way to reach us</strong> is the support inbox &mdash; open a thread, get replies in your account, and we can flip the conversation into a live chat when we&#39;re online together. New here? Don&#39;t hesitate to reach out &mdash; real people, fast answers.
187 </div>
188 <div style="display:flex;gap:10px;flex-wrap:wrap;align-items:center">
189 <a href="/support.cgi?new=1" class="btn btn-primary" style="display:inline-flex;align-items:center;gap:8px;padding:11px 18px;font-size:14px;font-weight:700;box-shadow:0 6px 18px rgba(255,122,61,0.45)">
190 <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>
191 Contact support
192 </a>
193 <a href="mailto:support\@abforge.3dshawn.com" class="btn btn-ghost btn-sm">Email instead</a>
194 </div>
195 </div>
196 </div>
197</div>
198
199<div class="adm-foot-spacer" data-end="help">&nbsp;</div>