Add splash page and improve user registration views.
This commit is contained in:
@@ -1,14 +1,144 @@
|
||||
{% extends "layout.html" %}
|
||||
|
||||
{% block content %}
|
||||
<div class="hero">
|
||||
<h1>Welcome to TimeTrack</h1>
|
||||
<p>Track your work hours easily and efficiently</p>
|
||||
</div>
|
||||
|
||||
{% if not g.user %}
|
||||
|
||||
Please <a href="{{ url_for('login') }}">login</a> or <a href="{{ url_for('register') }}">register</a> to access your dashboard.
|
||||
<!-- Decadent Splash Page -->
|
||||
<div class="splash-container">
|
||||
<!-- Hero Section -->
|
||||
<section class="splash-hero">
|
||||
<div class="hero-content">
|
||||
<h1 class="hero-title">Transform Your Productivity</h1>
|
||||
<p class="hero-subtitle">Experience the future of time management with TimeTrack's intelligent tracking system</p>
|
||||
<div class="cta-buttons">
|
||||
<a href="{{ url_for('register') }}" class="btn-primary">Get Started Free</a>
|
||||
<a href="{{ url_for('login') }}" class="btn-secondary">Sign In</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="hero-visual">
|
||||
<div class="floating-clock">
|
||||
<div class="clock-face">
|
||||
<div class="hour-hand"></div>
|
||||
<div class="minute-hand"></div>
|
||||
<div class="second-hand"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Features Grid -->
|
||||
<section class="features-grid">
|
||||
<h2 class="section-title">Powerful Features for Modern Teams</h2>
|
||||
<div class="feature-cards">
|
||||
<div class="feature-card">
|
||||
<div class="feature-icon">⚡</div>
|
||||
<h3>Lightning Fast</h3>
|
||||
<p>Start tracking in seconds with our intuitive one-click interface</p>
|
||||
</div>
|
||||
<div class="feature-card">
|
||||
<div class="feature-icon">📊</div>
|
||||
<h3>Advanced Analytics</h3>
|
||||
<p>Gain insights with comprehensive reports and visual dashboards</p>
|
||||
</div>
|
||||
<div class="feature-card">
|
||||
<div class="feature-icon">🏃♂️</div>
|
||||
<h3>Sprint Management</h3>
|
||||
<p>Organize work into sprints with agile project tracking</p>
|
||||
</div>
|
||||
<div class="feature-card">
|
||||
<div class="feature-icon">👥</div>
|
||||
<h3>Team Collaboration</h3>
|
||||
<p>Manage teams, projects, and resources all in one place</p>
|
||||
</div>
|
||||
<div class="feature-card">
|
||||
<div class="feature-icon">🔒</div>
|
||||
<h3>Enterprise Security</h3>
|
||||
<p>Bank-level encryption with role-based access control</p>
|
||||
</div>
|
||||
<div class="feature-card">
|
||||
<div class="feature-icon">🌐</div>
|
||||
<h3>Multi-Company Support</h3>
|
||||
<p>Perfect for agencies managing multiple client accounts</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Why TimeTrack Section -->
|
||||
<section class="statistics">
|
||||
<h2 class="section-title">Why Choose TimeTrack?</h2>
|
||||
<div class="stat-item">
|
||||
<div class="stat-number">100%</div>
|
||||
<div class="stat-label">Free & Open Source</div>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
<div class="stat-number">∞</div>
|
||||
<div class="stat-label">Unlimited Tracking</div>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
<div class="stat-number">0</div>
|
||||
<div class="stat-label">Hidden Fees</div>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
<div class="stat-number">24/7</div>
|
||||
<div class="stat-label">Always Available</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Getting Started Section -->
|
||||
<section class="testimonials">
|
||||
<h2 class="section-title">Get Started in Minutes</h2>
|
||||
<div class="testimonial-grid">
|
||||
<div class="testimonial-card">
|
||||
<div class="feature-icon">1️⃣</div>
|
||||
<h3>Sign Up</h3>
|
||||
<p>Create your free account in seconds. No credit card required.</p>
|
||||
</div>
|
||||
<div class="testimonial-card">
|
||||
<div class="feature-icon">2️⃣</div>
|
||||
<h3>Set Up Your Workspace</h3>
|
||||
<p>Add your company, teams, and projects to organize your time tracking.</p>
|
||||
</div>
|
||||
<div class="testimonial-card">
|
||||
<div class="feature-icon">3️⃣</div>
|
||||
<h3>Start Tracking</h3>
|
||||
<p>Click "Arrive" to start tracking, "Leave" when done. It's that simple!</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Open Source Section -->
|
||||
<section class="pricing">
|
||||
<h2 class="section-title">Forever Free, Forever Open</h2>
|
||||
<div class="pricing-cards">
|
||||
<div class="pricing-card featured">
|
||||
<div class="badge">100% Free</div>
|
||||
<h3>TimeTrack Community</h3>
|
||||
<div class="price">$0<span>/forever</span></div>
|
||||
<ul class="pricing-features">
|
||||
<li>✓ Unlimited users</li>
|
||||
<li>✓ All features included</li>
|
||||
<li>✓ Time tracking & analytics</li>
|
||||
<li>✓ Sprint management</li>
|
||||
<li>✓ Team collaboration</li>
|
||||
<li>✓ Project management</li>
|
||||
<li>✓ Self-hosted option</li>
|
||||
<li>✓ No restrictions</li>
|
||||
</ul>
|
||||
<a href="{{ url_for('register') }}" class="btn-pricing">Get Started Free</a>
|
||||
</div>
|
||||
</div>
|
||||
<p style="text-align: center; margin-top: 2rem; color: #666;">
|
||||
TimeTrack is open source software. Host it yourself or use our free hosted version.
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<!-- Final CTA -->
|
||||
<section class="final-cta">
|
||||
<h2>Ready to Take Control of Your Time?</h2>
|
||||
<p>Start tracking your time effectively today - no strings attached</p>
|
||||
<a href="{{ url_for('register') }}" class="btn-primary large">Create Free Account</a>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
{% else %}
|
||||
|
||||
@@ -115,27 +245,6 @@ Please <a href="{{ url_for('login') }}">login</a> or <a href="{{ url_for('regist
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% endif %}
|
||||
|
||||
<div class="features">
|
||||
<div class="feature">
|
||||
<h3>Easy Time Tracking</h3>
|
||||
<p>Simply click "Arrive" when you start working and "Leave" when you're done.</p>
|
||||
</div>
|
||||
<div class="feature">
|
||||
<h3>Break Management</h3>
|
||||
<p>Use the Pause button when taking breaks. Your break time is tracked separately.</p>
|
||||
</div>
|
||||
<div class="feature">
|
||||
<h3>Detailed History</h3>
|
||||
<p>View your complete work history with precise timestamps and durations.</p>
|
||||
</div>
|
||||
<div class="feature">
|
||||
<h3>Simple Interface</h3>
|
||||
<p>No complicated setup or configuration needed. Start tracking right away!</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Edit Entry Modal -->
|
||||
<div id="edit-modal" class="modal">
|
||||
<div class="modal-content">
|
||||
@@ -578,4 +687,6 @@ Please <a href="{{ url_for('login') }}">login</a> or <a href="{{ url_for('regist
|
||||
}
|
||||
</style>
|
||||
|
||||
{% endif %}
|
||||
|
||||
{% endblock %}
|
||||
@@ -5,9 +5,13 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>{{ title }} - TimeTrack{% if g.company %} - {{ g.company.name }}{% endif %}</title>
|
||||
<link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
|
||||
{% if not g.user %}
|
||||
<link rel="stylesheet" href="{{ url_for('static', filename='css/splash.css') }}">
|
||||
{% endif %}
|
||||
</head>
|
||||
<body>
|
||||
<body{% if g.user %} class="has-user"{% endif %}>
|
||||
<!-- Mobile header -->
|
||||
{% if g.user %}
|
||||
<header class="mobile-header">
|
||||
<div class="mobile-nav-brand">
|
||||
<a href="{{ url_for('home') }}">TimeTrack</a>
|
||||
@@ -21,21 +25,44 @@
|
||||
<span></span>
|
||||
</button>
|
||||
</header>
|
||||
{% endif %}
|
||||
|
||||
<!-- Sidebar navigation -->
|
||||
{% if g.user %}
|
||||
<aside class="sidebar" id="sidebar">
|
||||
<div class="sidebar-header">
|
||||
<h2><a href="{{ url_for('home') }}">TimeTrack</a></h2>
|
||||
{% if g.company %}
|
||||
<div class="company-info">
|
||||
<small class="text-muted">{{ g.company.name }}</small>
|
||||
</div>
|
||||
{% endif %}
|
||||
<button class="sidebar-toggle" id="sidebar-toggle">
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</button>
|
||||
{% if g.user %}
|
||||
<!-- User Account Menu -->
|
||||
<a href="#" class="user-dropdown-toggle" id="user-dropdown-toggle" data-tooltip="{{ g.user.username }}">
|
||||
<i class="nav-icon">👤</i>
|
||||
<span class="nav-text">{{ g.user.username }}<span class="dropdown-arrow">▼</span></span>
|
||||
</a>
|
||||
|
||||
<!-- User Dropdown Context Menu -->
|
||||
<div class="user-dropdown-modal" id="user-dropdown-modal">
|
||||
<div class="user-dropdown-header">
|
||||
<h3>{{ g.user.username }}</h3>
|
||||
<div class="user-info">
|
||||
{% if g.user.email %}
|
||||
{{ g.user.email }}
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
<div class="user-dropdown-menu">
|
||||
<ul>
|
||||
<li><a href="{{ url_for('profile') }}"><i class="nav-icon">👤</i>Profile</a></li>
|
||||
<li><a href="{{ url_for('config') }}"><i class="nav-icon">⚙️</i>Settings</a></li>
|
||||
<li class="user-dropdown-divider"></li>
|
||||
<li><a href="{{ url_for('logout') }}"><i class="nav-icon">🚪</i>Logout</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
<nav class="sidebar-nav">
|
||||
<ul>
|
||||
@@ -49,8 +76,6 @@
|
||||
<!-- Role-based menu items -->
|
||||
{% if g.user.role == Role.ADMIN or g.user.role == Role.SYSTEM_ADMIN %}
|
||||
<li class="nav-divider">Admin</li>
|
||||
<li><a href="{{ url_for('profile') }}" data-tooltip="Profile"><i class="nav-icon">👤</i><span class="nav-text">Profile</span></a></li>
|
||||
<li><a href="{{ url_for('config') }}" data-tooltip="Config"><i class="nav-icon">⚙️</i><span class="nav-text">Config</span></a></li>
|
||||
<li><a href="{{ url_for('dashboard') }}" data-tooltip="Dashboard"><i class="nav-icon">📈</i><span class="nav-text">Dashboard</span></a></li>
|
||||
<li><a href="{{ url_for('admin_company') }}" data-tooltip="Company"><i class="nav-icon">🏢</i><span class="nav-text">Company</span></a></li>
|
||||
<li><a href="{{ url_for('admin_users') }}" data-tooltip="Manage Users"><i class="nav-icon">👥</i><span class="nav-text">Manage Users</span></a></li>
|
||||
@@ -64,21 +89,12 @@
|
||||
<li><a href="{{ url_for('system_admin_announcements') }}" data-tooltip="Announcements"><i class="nav-icon">📢</i><span class="nav-text">Announcements</span></a></li>
|
||||
{% endif %}
|
||||
{% elif g.user.role in [Role.TEAM_LEADER, Role.SUPERVISOR] %}
|
||||
<li class="nav-divider">{{ g.user.username }}</li>
|
||||
<li><a href="{{ url_for('profile') }}" data-tooltip="Profile"><i class="nav-icon">👤</i><span class="nav-text">Profile</span></a></li>
|
||||
<li><a href="{{ url_for('config') }}" data-tooltip="Config"><i class="nav-icon">⚙️</i><span class="nav-text">Config</span></a></li>
|
||||
<li class="nav-divider">Team</li>
|
||||
<li><a href="{{ url_for('dashboard') }}" data-tooltip="Dashboard"><i class="nav-icon">📈</i><span class="nav-text">Dashboard</span></a></li>
|
||||
{% if g.user.role == Role.SUPERVISOR %}
|
||||
<li><a href="{{ url_for('admin_projects') }}" data-tooltip="Manage Projects"><i class="nav-icon">📝</i><span class="nav-text">Manage Projects</span></a></li>
|
||||
{% endif %}
|
||||
{% else %}
|
||||
<li class="nav-divider">{{ g.user.username }}</li>
|
||||
<li><a href="{{ url_for('profile') }}" data-tooltip="Profile"><i class="nav-icon">👤</i><span class="nav-text">Profile</span></a></li>
|
||||
<li><a href="{{ url_for('config') }}" data-tooltip="Config"><i class="nav-icon">⚙️</i><span class="nav-text">Config</span></a></li>
|
||||
{% endif %}
|
||||
|
||||
<li class="nav-divider"></li>
|
||||
<li><a href="{{ url_for('logout') }}" data-tooltip="Logout"><i class="nav-icon">🚪</i><span class="nav-text">Logout</span></a></li>
|
||||
{% else %}
|
||||
<li><a href="{{ url_for('about') }}" data-tooltip="About"><i class="nav-icon">ℹ️</i><span class="nav-text">About</span></a></li>
|
||||
<li><a href="{{ url_for('login') }}" data-tooltip="Login"><i class="nav-icon">🔑</i><span class="nav-text">Login</span></a></li>
|
||||
@@ -87,9 +103,12 @@
|
||||
</ul>
|
||||
</nav>
|
||||
</aside>
|
||||
{% endif %}
|
||||
|
||||
<!-- Mobile overlay -->
|
||||
{% if g.user %}
|
||||
<div class="mobile-overlay" id="mobile-overlay"></div>
|
||||
{% endif %}
|
||||
|
||||
<main class="main-content">
|
||||
<!-- System Announcements -->
|
||||
@@ -135,6 +154,12 @@
|
||||
|
||||
<script src="{{ url_for('static', filename='js/script.js') }}"></script>
|
||||
<script src="{{ url_for('static', filename='js/sidebar.js') }}"></script>
|
||||
<script src="{{ url_for('static', filename='js/password-strength.js') }}"></script>
|
||||
{% if g.user %}
|
||||
<script src="{{ url_for('static', filename='js/user-dropdown.js') }}"></script>
|
||||
{% else %}
|
||||
<script src="{{ url_for('static', filename='js/splash.js') }}"></script>
|
||||
{% endif %}
|
||||
|
||||
<!-- Custom Tracking Script -->
|
||||
{% if tracking_script_enabled and tracking_script_code %}
|
||||
|
||||
@@ -1,8 +1,18 @@
|
||||
{% extends "layout.html" %}
|
||||
|
||||
{% block content %}
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Login - TimeTrack</title>
|
||||
<link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
|
||||
<link rel="stylesheet" href="{{ url_for('static', filename='css/auth.css') }}">
|
||||
</head>
|
||||
<body class="auth-page">
|
||||
<div class="auth-container">
|
||||
<h1>Login to TimeTrack</h1>
|
||||
<div class="auth-brand">
|
||||
<h1>Welcome Back</h1>
|
||||
<p>Sign in to continue tracking</p>
|
||||
</div>
|
||||
|
||||
{% with messages = get_flashed_messages(with_categories=true) %}
|
||||
{% if messages %}
|
||||
@@ -13,31 +23,42 @@
|
||||
{% endwith %}
|
||||
|
||||
<form method="POST" action="{{ url_for('login') }}" class="auth-form">
|
||||
<div class="form-group">
|
||||
<div class="form-group input-icon">
|
||||
<i>👤</i>
|
||||
<input type="text" id="username" name="username" class="form-control" placeholder="Enter your username" required autofocus>
|
||||
<label for="username">Username</label>
|
||||
<input type="text" id="username" name="username" class="form-control" required autofocus>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<div class="form-group input-icon">
|
||||
<i>🔒</i>
|
||||
<input type="password" id="password" name="password" class="form-control" placeholder="Enter your password" required>
|
||||
<label for="password">Password</label>
|
||||
<input type="password" id="password" name="password" class="form-control" required>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label class="checkbox-container">
|
||||
<input type="checkbox" name="remember"> Remember me
|
||||
<span class="checkmark"></span>
|
||||
<div class="form-check">
|
||||
<input type="checkbox" class="form-check-input" id="remember" name="remember">
|
||||
<label class="form-check-label" for="remember">
|
||||
Keep me signed in
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<button type="submit" class="btn btn-primary">Login</button>
|
||||
<button type="submit" class="btn btn-primary">Sign In</button>
|
||||
</div>
|
||||
|
||||
<div class="social-divider">
|
||||
<span>New to TimeTrack?</span>
|
||||
</div>
|
||||
|
||||
<div class="auth-links">
|
||||
<p>Don't have an account?</p>
|
||||
<p><a href="{{ url_for('register') }}">Register with Company Code</a> | <a href="{{ url_for('register_freelancer') }}">Register as Freelancer</a></p>
|
||||
<p>
|
||||
<a href="{{ url_for('register') }}" style="margin-right: 1rem;">Join a Company</a>
|
||||
<a href="{{ url_for('register_freelancer') }}">Start Freelancing</a>
|
||||
</p>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
<script src="{{ url_for('static', filename='js/auth-animations.js') }}"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,9 +1,18 @@
|
||||
{% extends "layout.html" %}
|
||||
|
||||
{% block content %}
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Register - TimeTrack</title>
|
||||
<link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
|
||||
<link rel="stylesheet" href="{{ url_for('static', filename='css/auth.css') }}">
|
||||
</head>
|
||||
<body class="auth-page">
|
||||
<div class="auth-container">
|
||||
<h1>Register for TimeTrack</h1>
|
||||
<p class="text-muted">Join your company team</p>
|
||||
<div class="auth-brand">
|
||||
<h1>Welcome to TimeTrack</h1>
|
||||
<p>Join your company team</p>
|
||||
</div>
|
||||
|
||||
{% with messages = get_flashed_messages(with_categories=true) %}
|
||||
{% if messages %}
|
||||
@@ -22,36 +31,47 @@
|
||||
</div>
|
||||
|
||||
<form method="POST" action="{{ url_for('register') }}" class="auth-form">
|
||||
<div class="form-group">
|
||||
<div class="form-group company-code-group">
|
||||
<label for="company_code">Company Code</label>
|
||||
<input type="text" id="company_code" name="company_code" class="form-control" required autofocus
|
||||
placeholder="Enter your company code">
|
||||
<small class="form-text text-muted">Get this code from your company administrator.</small>
|
||||
placeholder="ENTER-CODE">
|
||||
<small class="form-text text-muted">Get this code from your company administrator</small>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<div class="form-group input-icon">
|
||||
<i>👤</i>
|
||||
<input type="text" id="username" name="username" class="form-control" placeholder="Choose a username" required>
|
||||
<label for="username">Username</label>
|
||||
<input type="text" id="username" name="username" class="form-control" required>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="email">Email</label>
|
||||
<input type="email" id="email" name="email" class="form-control" required>
|
||||
<small class="form-text text-muted">A verification link will be sent to this email address.</small>
|
||||
<div class="form-group input-icon">
|
||||
<i>📧</i>
|
||||
<input type="email" id="email" name="email" class="form-control" placeholder="your@email.com" required>
|
||||
<label for="email">Email Address</label>
|
||||
<small class="form-text text-muted">We'll send a verification link to this address</small>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<div class="form-group input-icon">
|
||||
<i>🔒</i>
|
||||
<input type="password" id="password" name="password" class="form-control" placeholder="Create a strong password" required>
|
||||
<label for="password">Password</label>
|
||||
<input type="password" id="password" name="password" class="form-control" required>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<div class="form-group input-icon">
|
||||
<i>🔒</i>
|
||||
<input type="password" id="confirm_password" name="confirm_password" class="form-control" placeholder="Confirm your password" required>
|
||||
<label for="confirm_password">Confirm Password</label>
|
||||
<input type="password" id="confirm_password" name="confirm_password" class="form-control" required>
|
||||
</div>
|
||||
|
||||
<div class="form-check">
|
||||
<input type="checkbox" class="form-check-input" id="terms" required>
|
||||
<label class="form-check-label" for="terms">
|
||||
I agree to the Terms of Service and Privacy Policy
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<button type="submit" class="btn btn-primary">Register</button>
|
||||
<button type="submit" class="btn btn-primary">Create Account</button>
|
||||
</div>
|
||||
|
||||
<div class="auth-links">
|
||||
@@ -59,8 +79,12 @@
|
||||
</div>
|
||||
|
||||
<div class="verification-notice">
|
||||
<p>After registration, you'll need to verify your email address before you can log in.</p>
|
||||
<p>📨 After registration, you'll need to verify your email address before you can log in.</p>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
<script src="{{ url_for('static', filename='js/password-strength.js') }}"></script>
|
||||
<script src="{{ url_for('static', filename='js/auth-animations.js') }}"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,9 +1,18 @@
|
||||
{% extends "layout.html" %}
|
||||
|
||||
{% block content %}
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Freelancer Registration - TimeTrack</title>
|
||||
<link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
|
||||
<link rel="stylesheet" href="{{ url_for('static', filename='css/auth.css') }}">
|
||||
</head>
|
||||
<body class="auth-page">
|
||||
<div class="auth-container">
|
||||
<h1>Register as Freelancer</h1>
|
||||
<p class="text-muted">Create your independent freelancer account</p>
|
||||
<div class="auth-brand">
|
||||
<h1>Start Freelancing</h1>
|
||||
<p>Create your independent workspace</p>
|
||||
</div>
|
||||
|
||||
{% with messages = get_flashed_messages(with_categories=true) %}
|
||||
{% if messages %}
|
||||
@@ -13,36 +22,63 @@
|
||||
{% endif %}
|
||||
{% endwith %}
|
||||
|
||||
<div class="registration-progress">
|
||||
<div class="progress-step active">
|
||||
<div class="progress-step-number">1</div>
|
||||
<div class="progress-step-label">Account Info</div>
|
||||
</div>
|
||||
<div class="progress-step">
|
||||
<div class="progress-step-number">2</div>
|
||||
<div class="progress-step-label">Verify Email</div>
|
||||
</div>
|
||||
<div class="progress-step">
|
||||
<div class="progress-step-number">3</div>
|
||||
<div class="progress-step-label">Start Tracking</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<form method="POST" action="{{ url_for('register_freelancer') }}" class="auth-form">
|
||||
<div class="form-group">
|
||||
<div class="form-group input-icon">
|
||||
<i>👤</i>
|
||||
<input type="text" id="username" name="username" class="form-control" placeholder="Choose your username" required autofocus>
|
||||
<label for="username">Username</label>
|
||||
<input type="text" id="username" name="username" class="form-control" required autofocus>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="email">Email</label>
|
||||
<input type="email" id="email" name="email" class="form-control" required>
|
||||
<div class="form-group input-icon">
|
||||
<i>📧</i>
|
||||
<input type="email" id="email" name="email" class="form-control" placeholder="your@email.com" required>
|
||||
<label for="email">Email Address</label>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="business_name">Business Name (Optional)</label>
|
||||
<div class="form-group input-icon">
|
||||
<i>🏢</i>
|
||||
<input type="text" id="business_name" name="business_name" class="form-control"
|
||||
placeholder="Your business or freelance name">
|
||||
<small class="form-text text-muted">Leave blank to use your username as your workspace name.</small>
|
||||
placeholder="Your Business Name (optional)">
|
||||
<label for="business_name">Business Name</label>
|
||||
<small class="form-text text-muted">Leave blank to use your username as workspace name</small>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<div class="form-group input-icon">
|
||||
<i>🔒</i>
|
||||
<input type="password" id="password" name="password" class="form-control" placeholder="Create a strong password" required>
|
||||
<label for="password">Password</label>
|
||||
<input type="password" id="password" name="password" class="form-control" required>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<div class="form-group input-icon">
|
||||
<i>🔒</i>
|
||||
<input type="password" id="confirm_password" name="confirm_password" class="form-control" placeholder="Confirm your password" required>
|
||||
<label for="confirm_password">Confirm Password</label>
|
||||
<input type="password" id="confirm_password" name="confirm_password" class="form-control" required>
|
||||
</div>
|
||||
|
||||
<div class="form-check">
|
||||
<input type="checkbox" class="form-check-input" id="terms" required>
|
||||
<label class="form-check-label" for="terms">
|
||||
I agree to the Terms of Service and Privacy Policy
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<button type="submit" class="btn btn-primary">Create Freelancer Account</button>
|
||||
<button type="submit" class="btn btn-primary">Create My Workspace</button>
|
||||
</div>
|
||||
|
||||
<div class="auth-links">
|
||||
@@ -60,6 +96,20 @@
|
||||
<li>No company code required</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="social-divider">
|
||||
<span>Why choose TimeTrack?</span>
|
||||
</div>
|
||||
|
||||
<div class="freelancer-benefits" style="text-align: center; margin-top: 1.5rem;">
|
||||
<p style="color: #666; font-size: 0.9rem;">
|
||||
✓ Free forever ✓ No credit card required ✓ Unlimited projects
|
||||
</p>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
<script src="{{ url_for('static', filename='js/password-strength.js') }}"></script>
|
||||
<script src="{{ url_for('static', filename='js/auth-animations.js') }}"></script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user