Scribd
Upload
20 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
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
20 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
We take content rights seriously. If you suspect this is your content, claim it here.
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