Kode Isi File register.html

Kode Isi File register.html

Bantu buatkan kode isi file register.html.

FarmerSmartAI - Halaman Registrasi

Berikut kode lengkap untuk file register.html (halaman pendaftaran) FarmerSmartAI:

```html

<!DOCTYPE html>

<head>

<title>Daftar - FarmerSmartAI</title>

<style>

:root {

--primary: #2e7d32;

--primary-dark: #1b5e20;

--primary-light: #4caf50;

--secondary: #ff9800;

--accent: #8bc34a;

--light: #f5f5f5;

--dark: #333;

--gray: #757575;

--white: #ffffff;

--error: #f44336;

--success: #4caf50;

}

* {

margin: 0;

padding: 0;

box-sizing: border-box;

font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;

}

body {

background: linear-gradient(135deg, var(--primary-light), var(--primary-dark));

min-height: 100vh;

display: flex;

align-items: center;

justify-content: center;

color: var(--dark);

padding: 20px;

}

.register-container {

display: flex;

width: 90%;

max-width: 1100px;

background-color: var(--white);

border-radius: 15px;

overflow: hidden;

box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);

}

.register-left {

flex: 1;

background: linear-gradient(rgba(46, 125, 50, 0.8), rgba(27, 94, 32, 0.9)), url('https://images.unsplash.com/photo-1586771107445-d3ca888129ff?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80');

background-size: cover;

background-position: center;

color: var(--white);

padding: 50px;

display: flex;

flex-direction: column;

justify-content: center;

}

.register-right {

flex: 1.2;

padding: 50px;

display: flex;

flex-direction: column;

justify-content: center;

overflow-y: auto;

max-height: 90vh;

}

.logo {

display: flex;

align-items: center;

margin-bottom: 30px;

}

.logo-icon {

font-size: 2.5rem;

color: var(--primary);

margin-right: 15px;

}

.logo h1 {

color: var(--primary);

font-size: 1.8rem;

}

.welcome-text h2 {

font-size: 2rem;

margin-bottom: 10px;

color: var(--dark);

}

.welcome-text p {

color: var(--gray);

margin-bottom: 30px;

}

.register-form {

width: 100%;

}

.form-row {

display: flex;

gap: 20px;

margin-bottom: 20px;

}

.form-group {

flex: 1;

margin-bottom: 20px;

position: relative;

}

.form-group label {

display: block;

margin-bottom: 8px;

font-weight: 500;

color: var(--dark);

}

.input-with-icon {

position: relative;

}

.input-with-icon i {

position: absolute;

left: 15px;

top: 50%;

transform: translateY(-50%);

color: var(--gray);

}

.form-control {

width: 100%;

padding: 15px 15px 15px 45px;

border: 1px solid #ddd;

border-radius: 5px;

font-size: 1rem;

transition: border 0.3s, box-shadow 0.3s;

}

.form-control:focus {

border-color: var(--primary);

box-shadow: 0 0 0 2px rgba(46, 125, 50, 0.2);

outline: none;

}

.password-toggle {

position: absolute;

right: 15px;

top: 50%;

transform: translateY(-50%);

background: none;

border: none;

color: var(--gray);

cursor: pointer;

}

.form-options {

display: flex;

justify-content: space-between;

align-items: center;

margin-bottom: 25px;

}

.terms-agreement {

display: flex;

align-items: flex-start;

}

.terms-agreement input {

margin-right: 8px;

margin-top: 3px;

}

.terms-agreement label {

font-size: 0.9rem;

color: var(--gray);

}

.terms-agreement a {

color: var(--primary);

text-decoration: none;

}

.terms-agreement a:hover {

text-decoration: underline;

}

.btn-register {

width: 100%;

padding: 15px;

background-color: var(--primary);

color: white;

border: none;

border-radius: 5px;

font-size: 1rem;

font-weight: 600;

cursor: pointer;

transition: background 0.3s;

margin-bottom: 20px;

}

.btn-register:hover {

background-color: var(--primary-dark);

}

.btn-register:disabled {

background-color: #cccccc;

cursor: not-allowed;

}

.divider {

text-align: center;

margin: 20px 0;

position: relative;

color: var(--gray);

}

.divider::before {

content: '';

position: absolute;

top: 50%;

left: 0;

right: 0;

height: 1px;

background-color: #ddd;

}

.divider span {

background-color: var(--white);

padding: 0 15px;

}

.social-register {

display: flex;

gap: 15px;

margin-bottom: 25px;

}

.btn-social {

flex: 1;

padding: 12px;

border: 1px solid #ddd;

border-radius: 5px;

background-color: white;

display: flex;

align-items: center;

justify-content: center;

cursor: pointer;

transition: background 0.3s;

}

.btn-social:hover {

background-color: #f9f9f9;

}

.btn-social i {

margin-right: 8px;

font-size: 1.2rem;

}

.btn-google i {

color: #DB4437;

}

.btn-facebook i {

color: #4267B2;

}

.login-link {

text-align: center;

margin-top: 20px;

}

.login-link a {

color: var(--primary);

text-decoration: none;

font-weight: 500;

}

.login-link a:hover {

text-decoration: underline;

}

.back-to-home {

text-align: center;

margin-top: 15px;

}

.back-to-home a {

color: var(--gray);

text-decoration: none;

font-size: 0.9rem;

}

.back-to-home a:hover {

text-decoration: underline;

}

.app-features {

margin-top: 40px;

}

.feature-item {

display: flex;

align-items: center;

margin-bottom: 20px;

}

.feature-icon {

font-size: 1.5rem;

margin-right: 15px;

color: var(--accent);

}

.feature-text h4 {

margin-bottom: 5px;

font-size: 1.1rem;

}

.feature-text p {

font-size: 0.9rem;

color: rgba(255, 255, 255, 0.8);

}

/* Alert Messages */

.alert {

padding: 12px 15px;

border-radius: 5px;

margin-bottom: 20px;

display: none;

}

.alert-error {

background-color: #ffebee;

border: 1px solid var(--error);

color: var(--error);

}

.alert-success {

background-color: #e8f5e9;

border: 1px solid var(--success);

color: var(--success);

}

/* Progress Indicator */

.progress-indicator {

display: flex;

margin-bottom: 30px;

justify-content: space-between;

position: relative;

}

.progress-step {

display: flex;

flex-direction: column;

align-items: center;

z-index: 2;

}

.step-number {

width: 40px;

height: 40px;

border-radius: 50%;

background-color: #e0e0e0;

color: var(--gray);

display: flex;

align-items: center;

justify-content: center;

font-weight: bold;

margin-bottom: 8px;

transition: all 0.3s;

}

.step-number.active {

background-color: var(--primary);

color: white;

}

.step-label {

font-size: 0.8rem;

color: var(--gray);

text-align: center;

}

.step-label.active {

color: var(--primary);

font-weight: 500;

}

.progress-bar {

position: absolute;

top: 20px;

left: 0;

height: 2px;

background-color: #e0e0e0;

width: 100%;

z-index: 1;

}

.progress-fill {

height: 100%;

background-color: var(--primary);

width: 0%;

transition: width 0.3s;

}

/* Form Steps */

.form-step {

display: none;

}

.form-step.active {

display: block;

}

.step-buttons {

display: flex;

justify-content: space-between;

margin-top: 30px;

}

.btn-prev, .btn-next {

padding: 12px 25px;

border: 1px solid var(--primary);

border-radius: 5px;

background-color: white;

color: var(--primary);

font-weight: 600;

cursor: pointer;

transition: all 0.3s;

}

.btn-prev:hover {

background-color: #f5f5f5;

}

.btn-next {

background-color: var(--primary);

color: white;

}

.btn-next:hover {

background-color: var(--primary-dark);

}

/* Responsive Design */

@media (max-width: 768px) {

.register-container {

flex-direction: column;

max-width: 550px;

}

.register-left {

padding: 30px;

}

.register-right {

padding: 30px;

}

.form-row {

flex-direction: column;

gap: 0;

}

.social-register {

flex-direction: column;

}

@media (max-width: 480px) {

.register-left, .register-right {

padding: 25px;

}

.form-options {

flex-direction: column;

align-items: flex-start;

}

.step-buttons {

flex-direction: column;

gap: 10px;

}

.btn-prev, .btn-next {

width: 100%;

}

/* Password Strength Indicator */

.password-strength {

margin-top: 5px;

height: 5px;

border-radius: 5px;

background-color: #e0e0e0;

overflow: hidden;

}

.password-strength-bar {

height: 100%;

width: 0%;

transition: width 0.3s, background-color 0.3s;

}

.strength-weak {

background-color: var(--error);

width: 33%;

}

.strength-medium {

background-color: var(--secondary);

width: 66%;

}

.strength-strong {

background-color: var(--success);

width: 100%;

}

.password-strength-text {

font-size: 0.8rem;

margin-top: 5px;

color: var(--gray);

}

</style>

</head>

<body>

<h1>FarmerSmartAI</h1>

</div>

<h4>Monitoring Real-time</h4>

<p>Pantau kondisi lahan Anda secara real-time dengan sensor IoT</p>

</div>

<h4>Analisis Berbasis AI</h4>

<p>Dapatkan rekomendasi cerdas untuk meningkatkan produktivitas</p>

</div>

<h4>Prediksi Panen Akurat</h4>

<p>Perkirakan hasil panen dengan algoritma prediktif canggih</p>

</div>

<h2>Daftar Akun Baru</h2>

<p>Bergabunglah dengan FarmerSmartAI untuk mengoptimalkan pertanian Anda</p>

</div>

</div>

</div>

<div class="step-label" id="step2Label">Data Pertanian</div>

</div>

<div class="step-label" id="step3Label">Konfirmasi</div>

</div>

<i class="fas fa-exclamation-circle"></i> <span id="errorMessage">Terjadi kesalahan. Harap periksa data Anda.</span>

</div>

<i class="fas fa-check-circle"></i> <span id="successMessage">Pendaftaran berhasil! Mengarahkan ke dashboard...</span>

</div>

<label for="firstName">Nama Depan</label>

</div>

<label for="lastName">Nama Belakang</label>

</div>

<label for="email">Email</label>

</div>

<label for="phone">Nomor Telepon</label>

</div>

<button type="button" class="btn-next" id="nextStep1">Lanjut</button>

</div>

<label for="farmName">Nama Lahan/Peternakan</label>

</div>

<label for="farmSize">Luas Lahan (hektar)</label>

</div>

<label for="farmLocation">Lokasi Lahan</label>

</div>

<label for="cropType">Jenis Tanaman/Ternak</label>

<option value="">Pilih jenis tanaman/ternak</option>

<option value="jagung">Jagung</option>

<option value="kedelai">Kedelai</option>

<option value="sayuran">Sayuran</option>

<option value="buah">Buah-buahan</option>

<option value="ternak">Ternak</option>

<option value="lainnya">Lainnya</option>

</select>

</div>

<button type="button" class="btn-prev" id="prevStep2">Kembali</button>

<button type="button" class="btn-next" id="nextStep2">Lanjut</button>

</div>

<label for="password">Kata Sandi</label>

</button>

</div>

</div>

<div class="password-strength-text" id="passwordStrengthText">Kekuatan kata sandi</div>

</div>

<label for="confirmPassword">Konfirmasi Kata Sandi</label>

</button>

</div>

</div>

<label for="terms">Saya setuju dengan <a href="#">Syarat & Ketentuan</a> dan <a href="#">Kebijakan Privasi</a> FarmerSmartAI</label>

</div>

<button type="button" class="btn-prev" id="prevStep3">Kembali</button>

<button type="submit" class="btn-register" id="submitRegister">Daftar</button>

</div>

</form>

Sudah punya akun? <a href="login.html">Masuk di sini</a>

</div>

<a href="index.html"><i class="fas fa-arrow-left"></i> Kembali ke halaman utama</a>

</div>

// Form steps management

let currentStep = 1;

const totalSteps = 3;

// Initialize progress bar

updateProgressBar();

// Step navigation

document.getElementById('nextStep1').addEventListener('click', function() {

if (validateStep1()) {

goToStep(2);

}

});

document.getElementById('prevStep2').addEventListener('click', function() {

goToStep(1);

});

document.getElementById('nextStep2').addEventListener('click', function() {

if (validateStep2()) {

goToStep(3);

}

});

document.getElementById('prevStep3').addEventListener('click', function() {

goToStep(2);

});

function goToStep(step) {

// Hide current step

document.getElementById(`step${currentStep}`).classList.remove('active');

document.getElementById(`step${currentStep}Number`).classList.remove('active');

document.getElementById(`step${currentStep}Label`).classList.remove('active');

// Show new step

document.getElementById(`step${step}`).classList.add('active');

document.getElementById(`step${step}Number`).classList.add('active');

document.getElementById(`step${step}Label`).classList.add('active');

currentStep = step;

updateProgressBar();

}

function updateProgressBar() {

const progress = ((currentStep - 1) / (totalSteps - 1)) * 100;

document.getElementById('progressFill').style.width = `${progress}%`;

}

// Form validation functions

function validateStep1() {

const firstName = document.getElementById('firstName').value;

const lastName = document.getElementById('lastName').value;

const email = document.getElementById('email').value;

const phone = document.getElementById('phone').value;

if (!firstName || !lastName || !email || !phone) {

showError('Harap isi semua field pada langkah ini');

return false;

}

// Simple email validation

const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;

if (!emailRegex.test(email)) {

showError('Format email tidak valid');

return false;

}

// Simple phone validation

const phoneRegex = /^[0-9+\-\s()]{10,}$/;

if (!phoneRegex.test(phone)) {

showError('Format nomor telepon tidak valid');

return false;

}

return true;

}

function validateStep2() {

const farmName = document.getElementById('farmName').value;

const farmSize = document.getElementById('farmSize').value;

const farmLocation = document.getElementById('farmLocation').value;

const cropType = document.getElementById('cropType').value;

if (!farmName || !farmSize || !farmLocation || !cropType) {

showError('Harap isi semua field pada langkah ini');

return false;

}

if (parseFloat(farmSize) <= 0) {

showError('Luas lahan harus lebih dari 0');

return false;

}

return true;

}

// Password strength indicator

document.getElementById('password').addEventListener('input', function() {

checkPasswordStrength(this.value);

});

function checkPasswordStrength(password) {

const strengthBar = document.getElementById('passwordStrengthBar');

const strengthText = document.getElementById('passwordStrengthText');

// Reset

strengthBar.className = 'password-strength-bar';

strengthBar.style.width = '0%';

if (password.length === 0) {

strengthText.textContent = 'Kekuatan kata sandi';

return;

}

// Calculate strength

let strength = 0;

// Length check

if (password.length >= 8) strength += 1;

// Contains lowercase

if (/[a-z]/.test(password)) strength += 1;

// Contains uppercase

if (/[A-Z]/.test(password)) strength += 1;

// Contains numbers

if (/[0-9]/.test(password)) strength += 1;

// Contains special characters

if (/[^A-Za-z0-9]/.test(password)) strength += 1;

// Update UI based on strength

if (strength <= 2) {

strengthBar.classList.add('strength-weak');

strengthText.textContent = 'Kata sandi lemah';

strengthText.style.color = 'var(--error)';

} else if (strength <= 4) {

strengthBar.classList.add('strength-medium');

strengthText.textContent = 'Kata sandi cukup kuat';

strengthText.style.color = 'var(--secondary)';

} else {

strengthBar.classList.add('strength-strong');

strengthText.textContent = 'Kata sandi kuat';

strengthText.style.color = 'var(--success)';

}

// Password confirmation check

document.getElementById('confirmPassword').addEventListener('input', function() {

checkPasswordMatch();

});

function checkPasswordMatch() {

const password = document.getElementById('password').value;

const confirmPassword = document.getElementById('confirmPassword').value;

const messageElement = document.getElementById('passwordMatchMessage');

if (confirmPassword.length === 0) {

messageElement.textContent = '';

return;

}

if (password === confirmPassword) {

messageElement.textContent = 'Kata sandi cocok';

messageElement.style.color = 'var(--success)';

} else {

messageElement.textContent = 'Kata sandi tidak cocok';

messageElement.style.color = 'var(--error)';

}

// Toggle password visibility

document.getElementById('togglePassword').addEventListener('click', function() {

togglePasswordVisibility('password', this);

});

document.getElementById('toggleConfirmPassword').addEventListener('click', function() {

togglePasswordVisibility('confirmPassword', this);

});

function togglePasswordVisibility(fieldId, button) {

const passwordInput = document.getElementById(fieldId);

const icon = button.querySelector('i');

if (passwordInput.type === 'password') {

passwordInput.type = 'text';

icon.classList.remove('fa-eye');

icon.classList.add('fa-eye-slash');

} else {

passwordInput.type = 'password';

icon.classList.remove('fa-eye-slash');

icon.classList.add('fa-eye');

}

// Form submission handling

document.getElementById('registerForm').addEventListener('submit', function(e) {

e.preventDefault();

const password = document.getElementById('password').value;

const confirmPassword = document.getElementById('confirmPassword').value;

const terms = document.getElementById('terms').checked;

// Validate step 3

if (!password || !confirmPassword) {

showError('Harap isi semua field kata sandi');

return;

}

if (password !== confirmPassword) {

showError('Kata sandi tidak cocok');

return;

}

if (password.length < 8) {

showError('Kata sandi harus minimal 8 karakter');

return;

}

if (!terms) {

showError('Anda harus menyetujui Syarat & Ketentuan');

return;

}

// If all validations pass, submit the form

submitRegistration();

});

function submitRegistration() {

const errorAlert = document.getElementById('errorAlert');

const successAlert = document.getElementById('successAlert');

// Hide previous alerts

errorAlert.style.display = 'none';

successAlert.style.display = 'none';

// Show success message

successAlert.style.display = 'block';

// In a real application, this would be an API call to register the user

// For demo purposes, we'll simulate a successful registration

// Simulate API call delay

setTimeout(function() {

// Redirect to dashboard (in a real app, this would happen after successful registration)

window.location.href = 'farmer_smart_ai_dashboard.html';

}, 2000);

}

function showError(message) {

const errorAlert = document.getElementById('errorAlert');

const errorMessage = document.getElementById('errorMessage');

errorMessage.textContent = message;

errorAlert.style.display = 'block';

// Scroll to error message

errorAlert.scrollIntoView({ behavior: 'smooth', block: 'center' });

}

</script>

</body>

</html>

```

Fitur Halaman Register.html:

1. Proses Pendaftaran Bertahap - 3 langkah pendaftaran yang terorganisir:

· Langkah 1: Data Diri (nama, email, telepon)

· Langkah 2: Data Pertanian (nama lahan, luas, lokasi, jenis tanaman)

· Langkah 3: Setup Akun (password, konfirmasi, persetujuan)

2. Indikator Progress - Visualisasi progress pendaftaran

3. Validasi Form Lengkap:

· Validasi email dan nomor telepon

· Indikator kekuatan password

· Pengecekan kecocokan password

· Validasi semua field wajib

4. Fitur Toggle Password - Tombol untuk menampilkan/menyembunyikan password

5. Persetujuan Syarat & Ketentuan - Checkbox wajib sebelum mendaftar

6. Desain Responsif - Tampilan optimal di semua perangkat

7. Pesan Error/Success - Notifikasi untuk feedback pengguna

8. Link ke Halaman Login - Tautan untuk pengguna yang sudah memiliki akun

9. Branding dan Fitur Aplikasi - Panel kiri yang menampilkan fitur unggulan FarmerSmartAI

File ini dapat disimpan sebagai register.html dan akan menjadi halaman pendaftaran yang user-friendly dan fungsional bagi calon pengguna FarmerSmartAI.

Bersambung ke: Kode Isi File field_monitoring.html

Search This Blog

Aplikasi FarmerSmartAI

Kode Isi File register.html

Comments

Post a Comment

Popular posts from this blog

logo-placeholder.html

Aplikasi FarmerSmartAI:

icon-generator.html