Skip to content

Instantly share code, notes, and snippets.

@princetechs

princetechs/html erb file :- rails hot wire code for sign up and sign in slider

Created November 23, 2023 14:25
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save princetechs/09a29ef309b234f8940de57f10f08a62 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save princetechs/09a29ef309b234f8940de57f10f08a62 to your computer and use it in GitHub Desktop.
Download ZIP
html erb file :- rails hot wire code for sign up and sign in slider
Raw
html erb file :- rails hot wire code for sign up and sign in slider
<div class="container" id="container" data-controller="auth-form">
<div class="form-container sign-up-container">
<form action="#" name="register">
<h1>Create Account</h1>
<div class="social-container hidden">
<a href="#" class="social"><i class="fab fa-facebook-f"></i></a>
<a href="#" class="social"><i class="fab fa-google-plus-g"></i></a>
<a href="#" class="social"><i class="fab fa-linkedin-in"></i></a>
</div>
<span>or use your email for registration</span>
<input id="inputr1" type="text" placeholder="Name" data-auth-form-target="name" />
<input id="inputr2" type="email" placeholder="Email" data-auth-form-target="email" />
<input id="inputr3" type="password" placeholder="Password" data-auth-form-target="password" />
<button data-action="click->auth-form#checkEmptyFields">Sign Up</button>
</form>
</div>
<div class="form-container sign-in-container">
<form action="#" name="login">
<h1>Sign in</h1>
<div class="social-container hidden">
<a href="#" class="social"><i class="fab fa-facebook-f"></i></a>
<a href="#" class="social"><i class="fab fa-google-plus-g"></i></a>
<a href="#" class="social"><i class="fab fa-linkedin-in"></i></a>
</div>
<span>or use your account</span>
<input id="inputr4" type="email" placeholder="Email" data-auth-form-target="email" />
<input id="inputr5" type="password" placeholder="Password" data-auth-form-target="password" />
<a href="#">Forgot your password?</a>
<button data-action="click->auth-form#checkEmptyFields">Sign In</button>
</form>
</div>
<div class="overlay-container">
<div class="overlay">
<div class="overlay-panel overlay-left">
<h1>Welcome Back!</h1>
<p>To keep connected with us please login with your personal info</p>
<button class="ghost" id="signIn">Sign In</button>
</div>
<div class="overlay-panel overlay-right">
<h1>Hello, Friend!</h1>
<p>Enter your personal details and start journey with us</p>
<button class="ghost" id="signUp">Sign Up</button>
</div>
</div>
</div>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment