login
This commit is contained in:
oliver
+15
-105
@@ -145,118 +145,28 @@
|
|||||||
<!-- ── Sign Up pane ── -->
|
<!-- ── Sign Up pane ── -->
|
||||||
<div class="auth-pane">
|
<div class="auth-pane">
|
||||||
<div class="auth-pane-title">Hire Agent</div>
|
<div class="auth-pane-title">Hire Agent</div>
|
||||||
<div class="pricing-badge">
|
|
||||||
<div class="pricing-amount">
|
|
||||||
4,99 <span>USD / month</span>
|
|
||||||
</div>
|
|
||||||
<div class="pricing-term">Monthly termination</div>
|
|
||||||
</div>
|
|
||||||
<div id="coupon-box" class="coupon-box">
|
|
||||||
<div class="coupon-input-wrap">
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
id="coupon-input"
|
|
||||||
class="coupon-input"
|
|
||||||
placeholder="Coupon code"
|
|
||||||
onkeydown="handleCouponKey(event)"
|
|
||||||
autocomplete="off"
|
|
||||||
spellcheck="false"
|
|
||||||
/>
|
|
||||||
<span
|
|
||||||
id="coupon-spinner"
|
|
||||||
class="coupon-spinner"
|
|
||||||
style="display: none"
|
|
||||||
><div class="spinner spinner-sm"></div
|
|
||||||
></span>
|
|
||||||
</div>
|
|
||||||
<div
|
<div
|
||||||
id="coupon-error"
|
|
||||||
class="coupon-error"
|
|
||||||
style="display: none"
|
|
||||||
>
|
|
||||||
Invalid coupon code.
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
id="coupon-success"
|
|
||||||
class="coupon-success"
|
|
||||||
style="display: none"
|
|
||||||
>
|
|
||||||
<svg
|
|
||||||
width="13"
|
|
||||||
height="13"
|
|
||||||
viewBox="0 0 24 24"
|
|
||||||
fill="none"
|
|
||||||
stroke="currentColor"
|
|
||||||
stroke-width="3"
|
|
||||||
stroke-linecap="round"
|
|
||||||
stroke-linejoin="round"
|
|
||||||
>
|
|
||||||
<polyline points="20 6 9 17 4 12" />
|
|
||||||
</svg>
|
|
||||||
5 USD OpenRouter credits added — Order now below
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<form
|
|
||||||
id="signup-form"
|
id="signup-form"
|
||||||
class="auth-form"
|
class="hire-cta"
|
||||||
style="display: none"
|
style="display: none"
|
||||||
onsubmit="
|
|
||||||
event.preventDefault();
|
|
||||||
doSignUp();
|
|
||||||
"
|
|
||||||
>
|
>
|
||||||
<div class="form-row">
|
<a
|
||||||
<div class="form-group">
|
href="https://derez.ai/#pricing"
|
||||||
<label for="signup-email">Email address</label>
|
target="_blank"
|
||||||
<input
|
rel="noopener"
|
||||||
type="email"
|
|
||||||
id="signup-email"
|
|
||||||
placeholder="you@example.com"
|
|
||||||
autocomplete="email"
|
|
||||||
required
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div class="form-group">
|
|
||||||
<label for="signup-password">Password</label>
|
|
||||||
<input
|
|
||||||
type="password"
|
|
||||||
id="signup-password"
|
|
||||||
placeholder="Min. 8 characters"
|
|
||||||
autocomplete="new-password"
|
|
||||||
required
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="form-row">
|
|
||||||
<div class="form-group">
|
|
||||||
<label for="signup-agent">Agent</label>
|
|
||||||
<select id="signup-agent">
|
|
||||||
<option value="hermes">Hermes</option>
|
|
||||||
<option value="openclaw">OpenClaw</option>
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
<div class="form-group">
|
|
||||||
<label for="signup-location"
|
|
||||||
>Agent Location</label
|
|
||||||
>
|
|
||||||
<select id="signup-location">
|
|
||||||
<option value="france">
|
|
||||||
🇫🇷 France
|
|
||||||
</option>
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div id="signup-error" class="auth-error"></div>
|
|
||||||
<div id="signup-success" class="auth-success"></div>
|
|
||||||
<button
|
|
||||||
type="submit"
|
|
||||||
id="signup-btn"
|
|
||||||
class="btn btn-primary btn-block"
|
class="btn btn-primary btn-block"
|
||||||
>
|
>
|
||||||
Hire Agent
|
Hire Agent
|
||||||
</button>
|
</a>
|
||||||
</form>
|
<a
|
||||||
|
href="https://derez.ai/#pricing"
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener"
|
||||||
|
class="hire-link"
|
||||||
|
>
|
||||||
|
View plans & pricing →
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<!-- /auth-pane signup -->
|
<!-- /auth-pane signup -->
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
+20
-115
@@ -1686,114 +1686,30 @@ body.auth-layout .auth-pane {
|
|||||||
}
|
}
|
||||||
/* Right pane: badge at top, form pushed to bottom */
|
/* Right pane: badge at top, form pushed to bottom */
|
||||||
body.auth-layout .auth-pane:last-child {
|
body.auth-layout .auth-pane:last-child {
|
||||||
justify-content: flex-start;
|
justify-content: center;
|
||||||
}
|
|
||||||
body.auth-layout #signup-form {
|
|
||||||
margin-top: auto;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Pricing badge */
|
/* Pricing badge */
|
||||||
.pricing-badge {
|
/* ─── Hire Agent CTA (replaces signup form) ──────────────────────────── */
|
||||||
display: none;
|
.hire-cta {
|
||||||
}
|
|
||||||
body.auth-layout .pricing-badge {
|
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
align-items: center;
|
gap: 14px;
|
||||||
text-align: center;
|
padding: 20px 24px 28px;
|
||||||
gap: 6px;
|
|
||||||
margin: 20px 24px 0;
|
|
||||||
padding: 14px 20px;
|
|
||||||
background: var(--accent-dim);
|
|
||||||
border: 1px solid rgba(0, 245, 255, 0.35);
|
|
||||||
border-radius: var(--radius);
|
|
||||||
}
|
|
||||||
.pricing-amount {
|
|
||||||
font-size: 22px;
|
|
||||||
font-weight: 800;
|
|
||||||
color: var(--text);
|
|
||||||
letter-spacing: -0.3px;
|
|
||||||
line-height: 1;
|
|
||||||
}
|
|
||||||
.pricing-amount span {
|
|
||||||
font-size: 13px;
|
|
||||||
font-weight: 500;
|
|
||||||
color: var(--text-muted);
|
|
||||||
}
|
|
||||||
.pricing-term {
|
|
||||||
font-size: 11px;
|
|
||||||
color: var(--text-muted);
|
|
||||||
letter-spacing: 0.2px;
|
|
||||||
}
|
|
||||||
.pricing-bonus {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 5px;
|
|
||||||
font-size: 12px;
|
|
||||||
color: var(--accent);
|
|
||||||
font-weight: 500;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Coupon box */
|
.hire-link {
|
||||||
.coupon-box {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
body.auth-layout .coupon-box {
|
|
||||||
display: block;
|
display: block;
|
||||||
margin: 10px 24px 0;
|
text-align: center;
|
||||||
}
|
|
||||||
.coupon-input-wrap {
|
|
||||||
position: relative;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
.coupon-input {
|
|
||||||
width: 100%;
|
|
||||||
padding: 8px 36px 8px 12px;
|
|
||||||
background: var(--bg-input);
|
|
||||||
border: 1px solid var(--border);
|
|
||||||
border-radius: var(--radius);
|
|
||||||
color: var(--text);
|
|
||||||
font-size: 13px;
|
|
||||||
outline: none;
|
|
||||||
transition: border-color 0.15s;
|
|
||||||
box-sizing: border-box;
|
|
||||||
}
|
|
||||||
.coupon-input::placeholder {
|
|
||||||
color: var(--text-muted);
|
|
||||||
}
|
|
||||||
.coupon-input:focus {
|
|
||||||
border-color: var(--accent);
|
|
||||||
}
|
|
||||||
.coupon-input.coupon-input-error {
|
|
||||||
border-color: var(--danger);
|
|
||||||
}
|
|
||||||
.coupon-spinner {
|
|
||||||
position: absolute;
|
|
||||||
right: 10px;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
.coupon-error {
|
|
||||||
margin-top: 5px;
|
|
||||||
font-size: 11px;
|
|
||||||
color: var(--danger);
|
|
||||||
}
|
|
||||||
.coupon-success {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
body.auth-layout .coupon-success {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 6px;
|
|
||||||
margin: 10px 24px 0;
|
|
||||||
padding: 8px 12px;
|
|
||||||
background: rgba(63, 201, 126, 0.1);
|
|
||||||
border: 1px solid rgba(63, 201, 126, 0.3);
|
|
||||||
border-radius: var(--radius);
|
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
font-weight: 500;
|
color: var(--text-muted);
|
||||||
color: var(--success);
|
text-decoration: none;
|
||||||
|
letter-spacing: 0.2px;
|
||||||
|
transition: color 0.15s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hire-link:hover {
|
||||||
|
color: var(--accent);
|
||||||
}
|
}
|
||||||
body.auth-layout .auth-forms-divider {
|
body.auth-layout .auth-forms-divider {
|
||||||
width: 1px;
|
width: 1px;
|
||||||
@@ -1807,6 +1723,9 @@ body.auth-layout .auth-forms-divider {
|
|||||||
}
|
}
|
||||||
body.auth-layout #signup-form {
|
body.auth-layout #signup-form {
|
||||||
display: flex !important;
|
display: flex !important;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 14px;
|
||||||
|
padding: 24px;
|
||||||
}
|
}
|
||||||
/* Sign-in form stretches and pushes its button to the bottom
|
/* Sign-in form stretches and pushes its button to the bottom
|
||||||
so it aligns with the Create Account button on the right */
|
so it aligns with the Create Account button on the right */
|
||||||
@@ -1817,23 +1736,9 @@ body.auth-layout #signin-btn {
|
|||||||
margin-top: auto;
|
margin-top: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Demo app-shell: matches auth card width, shorter height */
|
/* Demo shell is always hidden — we no longer show a preview on the auth screen */
|
||||||
#app-shell.demo-mode {
|
#app-shell.demo-mode {
|
||||||
width: min(1060px, calc(100vw - 16px));
|
display: none !important;
|
||||||
height: min(500px, calc(100vh - 360px));
|
|
||||||
flex-shrink: 0;
|
|
||||||
animation: none; /* prevent double-play alongside auth-card */
|
|
||||||
}
|
|
||||||
|
|
||||||
#app-shell.demo-mode .app-header,
|
|
||||||
#app-shell.demo-mode .agent-tabs-bar {
|
|
||||||
opacity: 0.55;
|
|
||||||
pointer-events: none;
|
|
||||||
user-select: none;
|
|
||||||
}
|
|
||||||
#app-shell.demo-mode .app-body {
|
|
||||||
pointer-events: none;
|
|
||||||
user-select: none;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.demo-notice {
|
.demo-notice {
|
||||||
|
|||||||
Reference in New Issue
Block a user