Embed

<section id="nouvote-login" style="text-align:center;padding:60px;background:rgba(255,255,255,0.03);border-radius:10px;">
  <h2 style="font-size:30px;color:#000;font-weight:800;">👤 Member Login</h2>
  <p style="color:#000;font-size:16px;">Please log in or create an account to access your private gallery.</p>

  <div id="formFields">
    <input id="name" type="text" placeholder="Full Name" style="display:none;padding:12px;margin:6px;border-radius:8px;border:1px solid #ccc;width:260px;"><br>
    <input id="email" type="email" placeholder="Enter your email" style="padding:12px;margin:6px;border-radius:8px;border:1px solid #ccc;width:260px;"><br>
    <input id="password" type="password" placeholder="Enter your password" style="padding:12px;margin:6px;border-radius:8px;border:1px solid #ccc;width:260px;"><br>

    <label id="phoneLabel" style="display:none;color:#111;font-size:14px;">Optional: Enter your phone number to receive your access code by SMS.</label><br>
    <input id="phone" type="text" placeholder="Ex: 7865551122" style="display:none;padding:12px;margin:6px;border-radius:8px;border:1px solid #ccc;width:260px;"><br>

    <label id="carrierLabel" style="display:none;color:#111;font-size:14px;">Select your carrier for SMS notification.</label><br>
    <select id="carrier" onchange="toggleCustomCarrier()" style="display:none;padding:12px;margin:6px;border-radius:8px;border:1px solid #ccc;width:260px;">
      <option value="">Skip (no SMS)</option>
      <option value="txt.att.net">AT&T</option>
      <option value="tmomail.net">T-Mobile</option>
      <option value="vtext.com">Verizon / Spectrum / Xfinity / Straight Talk</option>
      <option value="messaging.sprintpcs.com">Sprint</option>
      <option value="sms.cricketwireless.net">Cricket</option>
      <option value="mymetropcs.com">MetroPCS</option>
      <option value="sms.myboostmobile.com">Boost Mobile</option>
      <option value="email.uscc.net">US Cellular</option>
      <option value="msg.fi.google.com">Google Fi</option>
      <option value="mailmymobile.net">Consumer Cellular</option>
      <option value="message.ting.com">Ting</option>
      <option value="other">Other (enter manually)</option>
    </select><br>
    <input id="customCarrier" type="text" placeholder="Ex: sms.tracfone.com" style="display:none;padding:12px;margin:6px;border-radius:8px;border:1px solid #ccc;width:260px;"><br>
  </div>

  <div id="loginButtons">
    <button id="loginBtn" style="background:#111827;color:white;padding:12px 30px;border:none;border-radius:8px;font-weight:700;margin:8px;">Login</button>
    <p><a id="forgotBtn" href="#" style="color:#F59E0B;font-weight:700;text-decoration:none;">Forgot Password?</a></p>
    <p>Don’t have an account? <a id="createBtn" href="#" style="color:#204E3A;font-weight:700;text-decoration:none;">Create one</a></p>
  </div>

  <div id="signupButtons" style="display:none;">
    <button id="signupBtn" style="background:#204E3A;color:white;padding:12px 30px;border:none;border-radius:8px;font-weight:700;margin:8px;">Sign Up</button>
    <p><a id="backBtn" href="#" style="color:#111827;font-weight:700;text-decoration:none;">← Back to Login</a></p>
  </div>

  <div id="spinner" style="display:none;margin-top:20px;">
    <div style="border:5px solid #ccc;border-top:5px solid #204E3A;border-radius:50%;width:40px;height:40px;margin:auto;animation:spin 1s linear infinite;"></div>
  </div>

  <p id="message" style="margin-top:15px;font-weight:600;color:#000;"></p>
</section>


<div id="accessModal" style="display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.6);backdrop-filter:blur(4px);text-align:center;z-index:9999;">
  <div style="background:white;padding:30px;border-radius:10px;display:inline-block;margin-top:15%;max-width:350px;">
    <h3 style="color:#000;">🔑 Access Your Gallery</h3>
    <p style="color:#111;font-size:15px;">Enter the access code you received by email or SMS.</p>
    <input id="accessInput" type="text" placeholder="Ex: nouvote_1234" style="padding:12px;margin:10px;border-radius:8px;border:1px solid #ccc;width:250px;"><br>
    <button id="accessBtn" style="background:#204E3A;color:white;padding:10px 25px;border:none;border-radius:8px;font-weight:700;">Access</button>
    <p id="accessMsg" style="margin-top:10px;font-weight:600;"></p>
  </div>
</div>


<div id="resetOverlay" style="display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.6);backdrop-filter:blur(4px);z-index:99999;text-align:center;">
  <div style="background:white;padding:25px;border-radius:10px;display:inline-block;margin-top:20%;max-width:320px;">
    <h3 style="color:#000;">🔒 Reset Password</h3>
    <p style="font-size:15px;color:#333;">Enter your email to receive a password reset link.</p>
    <input id="resetEmail" type="email" placeholder="Your email address" style="padding:10px;margin:10px;border-radius:8px;border:1px solid #ccc;width:90%;"><br>
    <button id="sendReset" style="background:#204E3A;color:#fff;border:none;padding:10px 25px;border-radius:8px;font-weight:700;">Send Link</button>
    <button id="cancelReset" style="background:#ccc;color:#111;border:none;padding:8px 20px;border-radius:8px;margin-left:5px;">Cancel</button>
    <p id="resetMsg" style="margin-top:10px;font-weight:600;"></p>
  </div>
</div>

<style>@keyframes spin{0%{transform:rotate(0deg);}100%{transform:rotate(360deg);}}</style>
<script src="https://cdn.jsdelivr.net/npm/emailjs-com@3/dist/email.min.js"></script>
<script src="https://www.gstatic.com/firebasejs/10.13.0/firebase-app-compat.js"></script>
<script src="https://www.gstatic.com/firebasejs/10.13.0/firebase-auth-compat.js"></script>
<script src="https://www.gstatic.com/firebasejs/10.13.0/firebase-database-compat.js"></script>

<script>
document.addEventListener("DOMContentLoaded", async function () {
  // 🧠 Prevent multiple reloads & delay small init
  if (window.NouvoteLoaded) return;
  window.NouvoteLoaded = true;

  await new Promise(r => setTimeout(r, 300)); // preload delay

  // 🔥 Firebase setup
  const firebaseConfig = {
    apiKey:"AIzaSyD4zstyj0bycf1ABiWL1ZxJcGnUexIxPvk",
    authDomain:"nouvote-production.firebaseapp.com",
    databaseURL:"https://nouvote-production-default-rtdb.firebaseio.com/",
    projectId:"nouvote-production",
    storageBucket:"nouvote-production.firebasestorage.app",
    messagingSenderId:"620501366831",
    appId:"1:620501366831:web:aa3c3a318ada3f470baeda"
  };
  if (!firebase.apps.length) firebase.initializeApp(firebaseConfig);
  const auth = firebase.auth();
  const db = firebase.database();
  emailjs.init("ba0AtedSr5fhj7OQw");

  const msg = (t,c="#000") => { const el=document.getElementById("message"); el.style.color=c; el.innerHTML=t; };
  const spin = s => { document.getElementById("spinner").style.display = s ? "block" : "none"; };

  // --- Forgot Password ---
  document.getElementById("forgotBtn").onclick = () => document.getElementById("resetOverlay").style.display="block";
  document.getElementById("cancelReset").onclick = () => document.getElementById("resetOverlay").style.display="none";
  document.getElementById("sendReset").onclick = async () => {
    const e=document.getElementById("resetEmail").value.trim().toLowerCase();
    const r=document.getElementById("resetMsg");
    if(!e){r.innerText="⚠️ Enter your email.";r.style.color="#DC2626";return;}
    try{await auth.sendPasswordResetEmail(e);
      r.innerText="✅ Reset link sent!";r.style.color="#204E3A";
      setTimeout(()=>document.getElementById("resetOverlay").style.display="none",2000);
    }catch(err){r.innerText="⚠️ "+err.message;r.style.color="#DC2626";}
  };

  // --- Signup ---
  async function signup() {
    try {
      const n=document.getElementById("name").value.trim(),
            e=document.getElementById("email").value.trim().toLowerCase(),
            p=document.getElementById("password").value.trim(),
            ph=document.getElementById("phone").value.trim().replace(/\D/g,"");
      let c=document.getElementById("carrier").value.trim(),
          cu=document.getElementById("customCarrier").value.trim();
      if (c==="other"&&cu) c=cu;
      if(!n||!e||!p) return msg("⚠️ Fill all fields.","#DC2626");

      const code="nouvote_"+Math.floor(1000+Math.random()*9000);
      spin(true); msg("⏳ Creating account...","#204E3A");
      await auth.createUserWithEmailAndPassword(e,p);
      await db.ref("clients/"+code).set({name:n,email:e,phone:ph,carrier:c,accessCode:code,galleryLink:`https://nouvoteproduction.pixieset.com/${code}/`,createdAt:new Date().toISOString()});
      await Promise.allSettled([
        emailjs.send("service_1cgfm6u","template_mncftvj",{user_name:n,user_email:e,access_code:code,gallery_link:`https://nouvoteproduction.pixieset.com/${code}/`}),
        emailjs.send("service_1cgfm6u","template_k3vdmxe",{user_name:n,user_email:"contact@nouvoteproduction.com",phone:ph,access_code:code,gallery_link:`https://nouvoteproduction.pixieset.com/${code}/`}),
        (ph&&c)?emailjs.send("service_1cgfm6u","template_82l7viy",{user_name:n,user_email:`${ph}@${c}`,access_code:code}):Promise.resolve()
      ]);
      spin(false);
      msg(`✅ Sign-Up successful! Keep access code <b>${code}</b> safe.`,"#204E3A");
      setTimeout(()=>toggleSignUp(false),2500);
    } catch(err){spin(false);msg("⚠️ "+(err.message||"Signup failed."),"#DC2626");}
  }

  // --- Login ---
  async function login() {
    const e=document.getElementById("email").value.trim().toLowerCase();
    const p=document.getElementById("password").value.trim();
    if(!e||!p) return msg("⚠️ Enter email & password.","#DC2626");
    spin(true); msg("⏳ Logging in...","#204E3A");
    try {
      await auth.signInWithEmailAndPassword(e,p);
      spin(false);
      msg("✅ Login successful! Enter your access code.","#204E3A");
      document.getElementById("accessModal").style.display="block";
    } catch(err) { spin(false); msg("⚠️ "+(err.message||"Login failed."),"#DC2626"); }
  }

  // --- Access Code ---
  document.getElementById("accessBtn").onclick = () => {
    const c=document.getElementById("accessInput").value.trim().toLowerCase();
    const m=document.getElementById("accessMsg");
    if(!c){m.innerText="⚠️ Enter your access code.";m.style.color="#DC2626";return;}
    m.innerText="✅ Redirecting...";m.style.color="#204E3A";
    setTimeout(()=>window.location.href=`https://nouvoteproduction.pixieset.com/${c}/`,900);
  };

  // --- Toggle Create/Login ---
  function toggleSignUp(isSignUp){
    ["signupButtons","loginButtons","name","phone","carrier","customCarrier","phoneLabel","carrierLabel"].forEach(id=>{
      const el=document.getElementById(id);
      if(el) el.style.display=isSignUp?"block":"none";
    });
    msg("");
  }

  // --- Instant Event Binding ---
  document.getElementById("signupBtn").onclick=signup;
  document.getElementById("loginBtn").onclick=login;
  document.getElementById("createBtn").onclick=()=>toggleSignUp(true);
  document.getElementById("backBtn").onclick=()=>toggleSignUp(false);
});
</script>

Nouvote Production

Nouvote Production is a photography studio located in Coldwater, United States, offering creative visual solutions. As a newly launched venture, the company is just starting out and building its portfolio.