login
This commit is contained in:
oliver
+15
-105
@@ -145,118 +145,28 @@
|
||||
<!-- ── Sign Up pane ── -->
|
||||
<div class="auth-pane">
|
||||
<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
|
||||
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"
|
||||
class="auth-form"
|
||||
class="hire-cta"
|
||||
style="display: none"
|
||||
onsubmit="
|
||||
event.preventDefault();
|
||||
doSignUp();
|
||||
"
|
||||
>
|
||||
<div class="form-row">
|
||||
<div class="form-group">
|
||||
<label for="signup-email">Email address</label>
|
||||
<input
|
||||
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"
|
||||
<a
|
||||
href="https://derez.ai/#pricing"
|
||||
target="_blank"
|
||||
rel="noopener"
|
||||
class="btn btn-primary btn-block"
|
||||
>
|
||||
Hire Agent
|
||||
</button>
|
||||
</form>
|
||||
</a>
|
||||
<a
|
||||
href="https://derez.ai/#pricing"
|
||||
target="_blank"
|
||||
rel="noopener"
|
||||
class="hire-link"
|
||||
>
|
||||
View plans & pricing →
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<!-- /auth-pane signup -->
|
||||
</div>
|
||||
|
||||
+20
-115
@@ -1686,114 +1686,30 @@ body.auth-layout .auth-pane {
|
||||
}
|
||||
/* Right pane: badge at top, form pushed to bottom */
|
||||
body.auth-layout .auth-pane:last-child {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
body.auth-layout #signup-form {
|
||||
margin-top: auto;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
/* Pricing badge */
|
||||
.pricing-badge {
|
||||
display: none;
|
||||
}
|
||||
body.auth-layout .pricing-badge {
|
||||
/* ─── Hire Agent CTA (replaces signup form) ──────────────────────────── */
|
||||
.hire-cta {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
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;
|
||||
gap: 14px;
|
||||
padding: 20px 24px 28px;
|
||||
}
|
||||
|
||||
/* Coupon box */
|
||||
.coupon-box {
|
||||
display: none;
|
||||
}
|
||||
body.auth-layout .coupon-box {
|
||||
.hire-link {
|
||||
display: block;
|
||||
margin: 10px 24px 0;
|
||||
}
|
||||
.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);
|
||||
text-align: center;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
color: var(--success);
|
||||
color: var(--text-muted);
|
||||
text-decoration: none;
|
||||
letter-spacing: 0.2px;
|
||||
transition: color 0.15s;
|
||||
}
|
||||
|
||||
.hire-link:hover {
|
||||
color: var(--accent);
|
||||
}
|
||||
body.auth-layout .auth-forms-divider {
|
||||
width: 1px;
|
||||
@@ -1807,6 +1723,9 @@ body.auth-layout .auth-forms-divider {
|
||||
}
|
||||
body.auth-layout #signup-form {
|
||||
display: flex !important;
|
||||
flex-direction: column;
|
||||
gap: 14px;
|
||||
padding: 24px;
|
||||
}
|
||||
/* Sign-in form stretches and pushes its button to the bottom
|
||||
so it aligns with the Create Account button on the right */
|
||||
@@ -1817,23 +1736,9 @@ body.auth-layout #signin-btn {
|
||||
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 {
|
||||
width: min(1060px, calc(100vw - 16px));
|
||||
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;
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.demo-notice {
|
||||
|
||||
Reference in New Issue
Block a user