Scribd
Upload
12 views

View Page Source.com en.cryptohopper.bz Project Index.php.HTML

This document is an HTML template for a login page on the website skydivecapital247.com. It includes a form for users to enter their email and password, with options for accepting terms and conditions, resetting passwords, and registering for an account. The page also features a dark mode toggle and integrates Google Translate for multilingual support.

Uploaded by

gideon107540
Copyright
© © All Rights Reserved
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
12 views

View Page Source.com en.cryptohopper.bz Project Index.php.HTML

This document is an HTML template for a login page on the website skydivecapital247.com. It includes a form for users to enter their email and password, with options for accepting terms and conditions, resetting passwords, and registering for an account. The page also features a dark mode toggle and integrates Google Translate for multilingual support.

Uploaded by

gideon107540
Copyright
© © All Rights Reserved
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 5

<!

DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>skydivecapital247.com| Register</title>
<link
href="https://fonts.googleapis.com/css2?
family=Cairo:wght@200;300;400;600;700;900&display=swap"
rel="stylesheet"
/>
<link rel="stylesheet" href="css/tailwind.css" />
<script
src="https://cdn.jsdelivr.net/gh/alpinejs/[email protected]/dist/alpine.min.js"
defer></script>
</head>
<body>
<div x-data="setup()" x-init="$refs.loading.classList.add('hidden');
setColors(color);" :class="{ 'dark': isDark}">
<!-- Loading screen -->
<div
x-ref="loading"
class="fixed inset-0 z-50 flex items-center justify-center text-2xl font-
semibold text-white bg-primary-darker"
>
Loading.....
</div>
<div
class="flex flex-col items-center justify-center min-h-screen p-4 space-y-4
antialiased text-gray-900 bg-gray-100 dark:bg-dark dark:text-light"
>

<div class="button_container"><div id="ytWidget"></div><script


src="https://translate.yandex.net/website-widget/v1/widget.js?
widgetId=ytWidget&pageLang=en&widgetTheme=light&autoMode=true"
type="text/javascript"></script></div>
<script type="text/javascript">
function googleTranslateElementInit() {
new google.translate.TranslateElement({pageLanguage: "en"},
'google_translate_element');
}
</script>
<!-- Brand -->
<a
href="../index.html"
class="inline-block mb-6 text-3xl font-bold tracking-wider uppercase
text-primary-dark dark:text-light"
>
Welcome
</a>
<main>
<center>
<img src="image/logo.png" width="200" alt="skydivecapital247.com"
/><br>

<h1 class="text-xl font-semibold text-center">Login Form</h1>

<form id="signupform" class="form-horizontal" role="form"


method="POST" action="">
<div class="w-full max-w-sm px-4 py-6 space-y-6 bg-white rounded-md
dark:bg-darker">

<input
class="w-full px-4 py-2 border rounded-md dark:bg-darker
dark:border-gray-700 focus:outline-none focus:ring focus:ring-primary-100
dark:focus:ring-primary-darker"
type="text"
name="loginId"
id="loginId"
placeholder="email"
value=""
required
/>

<input
class="w-full px-4 py-2 border rounded-md dark:bg-darker
dark:border-gray-700 focus:outline-none focus:ring focus:ring-primary-100
dark:focus:ring-primary-darker"
type="password"
id="loginPass"
name="loginPass"
placeholder="password"
value=""
required
/>

<div class="flex items-center justify-between">


<!-- Remember me toggle -->
<label class="flex items-center">
<div class="relative inline-flex items-center">
<input
type="checkbox"
name="accept_terms" required
class="w-10 h-4 transition bg-gray-200 border-none rounded-
full shadow-inner outline-none appearance-none toggle checked:bg-primary-light
disabled:bg-gray-200 focus:outline-none"
/>
<span
class="absolute top-0 left-0 w-4 h-4 transition-all transform
scale-150 bg-white rounded-full shadow-sm"
></span>
</div>
<span class="ml-3 text-sm font-normal text-gray-500 dark:text-
gray-400">
I accept the
<a href="terms.php" class="text-sm text-blue-600
hover:underline">Terms and Conditions</a>
</span>
</label>
</div>
<div>

<button id="btn-signup" type="submit" name="login" value="Login"


class="w-full px-4 py-2 font-medium text-center text-white transition-colors
duration-200 rounded-md bg-primary hover:bg-primary-dark focus:outline-none
focus:ring-2 focus:ring-primary focus:ring-offset-1 dark:focus:ring-offset-
darker">Login</button>

</div>
</form>

<!-- Or -->
<div class="flex items-center justify-center space-x-2 flex-nowrap">
<span class="w-20 h-px bg-gray-300"></span>
<span>OR</span>
<span class="w-20 h-px bg-gray-300"></span>
</div>

<!-- Social login links -->


<!-- Brand icons src https://boxicons.com -->

<!-- Login link -->


<div class="text-sm text-gray-600 dark:text-gray-400">
Lost Password? <a href="forget_password.php" class="text-blue-600
hover:underline">Click here to Reset it</a>
</div>

<div class="text-sm text-gray-600 dark:text-gray-400">


Don't have an account? <a href="register.php" class="text-blue-600
hover:underline">Register</a>
</div>
</div>
</main>
</div>

<!-- Toggle dark mode button -->


<div class="fixed bottom-5 left-5">
<button
aria-hidden="true"
@click="toggleTheme"
class="p-2 transition-colors duration-200 rounded-full shadow-md bg-
primary hover:bg-primary-darker focus:outline-none focus:ring focus:ring-primary"
>
<svg
x-show="isDark"
class="w-8 h-8 text-white"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0
00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518
4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976
2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-
2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z"
/>
</svg>
<svg
x-show="!isDark"
class="w-8 h-8 text-white"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003
9.003 0 008.354-5.646z"
/>
</svg>
</button>
</div>
</div>

<script>
const setup = () => {
const getTheme = () => {
if (window.localStorage.getItem('dark')) {
return JSON.parse(window.localStorage.getItem('dark'))
}
return !!window.matchMedia && window.matchMedia('(prefers-color-scheme:
dark)').matches
}

const setTheme = (value) => {


window.localStorage.setItem('dark', value)
}

const getColor = () => {


if (window.localStorage.getItem('color')) {
return window.localStorage.getItem('color')
}
return 'cyan'
}

const setColors = (color) => {


const root = document.documentElement
root.style.setProperty('--color-primary', `var(--color-${color})`)
root.style.setProperty('--color-primary-50', `var(--color-${color}-50)`)
root.style.setProperty('--color-primary-100', `var(--color-${color}-
100)`)
root.style.setProperty('--color-primary-light', `var(--color-${color}-
light)`)
root.style.setProperty('--color-primary-lighter', `var(--color-${color}-
lighter)`)
root.style.setProperty('--color-primary-dark', `var(--color-${color}-
dark)`)
root.style.setProperty('--color-primary-darker', `var(--color-${color}-
darker)`)
this.selectedColor = color
window.localStorage.setItem('color', color)
}

return {
loading: true,
isDark: getTheme(),
color: getColor(),
selectedColor: 'cyan',
toggleTheme() {
this.isDark = !this.isDark
setTheme(this.isDark)
},
setColors,
}
}
</script>
</body>
</html>

You might also like