{
    "id": "bhaskar/welcome-back-sign-in-form",
    "kind": "component",
    "title": "Welcome Back Sign In Form",
    "summary": "A sign-in card with email, password reveal, forgot link, remember checkbox and create-account link.",
    "author": "Admin",
    "stars": 0,
    "url": "https://ownlyplans.com/bhaskar/welcome-back-sign-in-form/",
    "stack": [],
    "tools": [
        "claude-code",
        "cursor",
        "lovable"
    ],
    "difficulty": "beginner",
    "license": "mit",
    "version": "1.0",
    "overview": "A complete login layout: heading, email and password fields with a show/hide eye, remember-me checkbox, dark Sign in button and a create account prompt.",
    "steps": [],
    "files": [],
    "install": "",
    "how_to_use": "Use the component code (html, css, js, or react) directly, or run the install command.",
    "component": {
        "category": "Other",
        "html": "<form class='lg' id='lgf'><h3>Welcome back</h3><p class='lg-s'>Sign in to continue to your account.</p><label for='lg1'>Email</label><input id='lg1' type='email' placeholder='you@company.com' required><div class='lg-h'><label for='lg2'>Password</label><a href='#'>Forgot password?</a></div><div class='lg-w'><input id='lg2' type='password' placeholder='Enter your password' required><button type='button' id='lge' aria-label='Show password'><svg width='17' height='17' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M2 12s3.6-7 10-7 10 7 10 7-3.6 7-10 7S2 12 2 12z'/><circle cx='12' cy='12' r='3'/></svg></button></div><label class='lg-c'><input type='checkbox'><span></span>Remember me for 30 days</label><button type='submit' class='lg-go'>Sign in <svg width='13' height='13' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='M9 6l6 6-6 6'/></svg></button><p class='lg-f'>Don't have an account? <a href='#'>Create one</a></p></form>",
        "css": ".lg{width:min(340px,92%);margin:auto;font-family:Inter,Arial,sans-serif;color:#111}.lg h3{margin:0 0 8px;font-size:24px;font-weight:700;letter-spacing:-.01em}.lg-s{margin:0 0 20px;font-size:13.5px;color:#737373}.lg label{display:block;margin-bottom:8px;font-size:13.5px;font-weight:500}.lg input:not([type=checkbox]){width:100%;box-sizing:border-box;height:40px;padding:0 14px;font:inherit;font-size:13.5px;background:#fff;border:1px solid #ececec;border-radius:10px;outline:0;margin-bottom:16px;transition:border-color .15s,box-shadow .15s}.lg input:not([type=checkbox]):focus{border-color:#111;box-shadow:0 0 0 3px rgba(17,17,17,.08)}.lg input::placeholder{color:#a3a3a3}.lg-h{display:flex;justify-content:space-between;align-items:baseline}.lg-h a{font-size:12.5px;color:#111;text-decoration:underline;text-underline-offset:3px}.lg-w{position:relative}.lg-w input{padding-right:42px!important}.lg-w button{position:absolute;right:6px;top:5px;width:30px;height:30px;display:grid;place-items:center;border:0;background:none;color:#8a8a8a;cursor:pointer;border-radius:8px}.lg-c{display:flex!important;align-items:center;gap:10px;margin:2px 0 18px!important;font-weight:400!important;cursor:pointer}.lg-c input{position:absolute;opacity:0}.lg-c span{width:16px;height:16px;border:1.5px solid #bdbdbd;border-radius:4px;display:grid;place-items:center;transition:all .15s}.lg-c input:checked+span{background:#111;border-color:#111}.lg-c input:checked+span:after{content:'';width:4px;height:8px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg) translate(-1px,-1px)}.lg-go{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;height:42px;border:0;border-radius:10px;background:#0a0a0a;color:#fff;font:600 14px Inter,Arial,sans-serif;cursor:pointer}.lg-f{margin:16px 0 0;text-align:center;font-size:13px;color:#737373}.lg-f a{color:#111;font-weight:600;text-decoration:underline;text-underline-offset:3px}",
        "js": "const i=document.getElementById('lg2'),b=document.getElementById('lge');b.addEventListener('click',()=>{const s=i.type==='password';i.type=s?'text':'password';b.setAttribute('aria-label',s?'Hide password':'Show password')});document.getElementById('lgf').addEventListener('submit',e=>e.preventDefault());document.querySelectorAll('.lg a').forEach(a=>a.addEventListener('click',e=>e.preventDefault()));",
        "react": "",
        "dependencies": [],
        "install": "",
        "licence_notice": ""
    }
}