ҚМЖ GENERATOR — ТІРКЕЛУДІ РАСТАУ ТУРАЛЫ ХАБАРЛАМА

МАҢЫЗДЫ: Бұл код сайттың FRONTEND/интерфейсіне арналған. Cloudflare Worker кодының орнына қоймаңыз.

ҚАЙ ЖЕРГЕ ҚОЮ КЕРЕК
1. GitHub-та сайттың интерфейс файлын ашыңыз (көбіне index.html немесе тіркелу формасы орналасқан .jsx/.tsx файл).
2. Қазіргі мына хабарламаны табыңыз:
   «Тіркелгеннен кейін электрондық поштаңызды растау туралы хат келеді.»
3. Сол ескі хабарлама блогын төмендегі HTML бөлігімен ауыстырыңыз.
4. CSS бөлігі сол HTML файлының <head> ішіндегі <style> бөлігіне немесе сайттың негізгі CSS файлына қосылады.
5. Кодты сақтап, сайтты жариялаған соң жаңа тест аккаунтпен тексеріңіз.

HTML — ЕСКІ ХАБАРЛАМАНЫҢ ОРНЫНА ҚОЮ:

<div class="email-confirmation-notice" role="alert" aria-live="polite">
  <div class="email-confirmation-heading">
    <span class="email-confirmation-icon" aria-hidden="true">✉️</span>
    <h2>Тіркелу әлі аяқталған жоқ!</h2>
  </div>

  <p class="email-confirmation-intro">
    <strong>ҚМЖ Generator-ды пайдалану үшін электрондық поштаңызды растауыңыз қажет.</strong>
    Төмендегі 3 қадамды міндетті түрде орындаңыз:
  </p>

  <ol class="email-confirmation-steps">
    <li>
      <span class="email-step-number">1</span>
      <div>
        <strong>Осы беттен шығып, электрондық поштаңызды ашыңыз.</strong>
        <p>Тіркелу кезінде жазған поштаңызды ашыңыз (Gmail немесе басқа пошта сервисі).</p>
      </div>
    </li>
    <li>
      <span class="email-step-number">2</span>
      <div>
        <strong>ҚМЖ Generator жіберген хатты табыңыз.</strong>
        <p>Хат көрінбесе, «Спам», «Жарнамалар» немесе «Барлық хаттар» бөлімдерін тексеріңіз.</p>
      </div>
    </li>
    <li>
      <span class="email-step-number">3</span>
      <div>
        <strong>Хаттағы растау сілтемесін басыңыз.</strong>
        <p>Растау сілтемесін басқаннан кейін сайтқа қайта оралып, аккаунтыңызға кіріңіз.</p>
      </div>
    </li>
  </ol>

  <a class="email-confirmation-gmail-button"
     href="https://mail.google.com/"
     target="_blank"
     rel="noopener noreferrer">
    Gmail поштасын ашу ↗
  </a>

  <p class="email-confirmation-note">
    Gmail қолданбасаңыз, өзіңіздің пошта сервисіңізді ашыңыз. Растау хатын таппасаңыз,
    тіркелу кезінде электрондық поштаңызды дұрыс енгізгеніңізді тексеріңіз.
  </p>
</div>


CSS — САЙТТЫҢ НЕГІЗГІ CSS ФАЙЛЫНА НЕМЕСЕ <style> БӨЛІГІНЕ ҚОСУ:

.email-confirmation-notice {
  box-sizing: border-box;
  width: 100%;
  margin: 18px 0;
  padding: 24px;
  border: 2px solid #f0a33a;
  border-radius: 18px;
  background: #fffaf0;
  color: #172033;
  font-size: 17px;
  line-height: 1.55;
  text-align: left;
  box-shadow: 0 6px 20px rgba(27, 42, 77, 0.08);
}

.email-confirmation-heading {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 12px;
}

.email-confirmation-heading h2 {
  margin: 0;
  color: #9a4b00;
  font-size: clamp(21px, 2.5vw, 27px);
  line-height: 1.25;
  font-weight: 800;
}

.email-confirmation-icon {
  display: inline-flex;
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: #ffedc9;
  font-size: 25px;
}

.email-confirmation-intro {
  margin: 8px 0 18px;
  font-size: 17px;
}

.email-confirmation-steps {
  display: grid;
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.email-confirmation-steps li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px;
  border: 1px solid #f4d7a7;
  border-radius: 12px;
  background: #ffffff;
}

.email-step-number {
  display: inline-flex;
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #3156c8;
  color: #ffffff;
  font-size: 17px;
  font-weight: 800;
}

.email-confirmation-steps strong {
  display: block;
  margin: 1px 0 3px;
  font-size: 17px;
}

.email-confirmation-steps p {
  margin: 0;
  color: #465064;
  font-size: 15px;
}

.email-confirmation-gmail-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  margin-top: 18px;
  padding: 12px 20px;
  border-radius: 10px;
  background: #3156c8;
  color: #ffffff !important;
  font-size: 16px;
  font-weight: 800;
  text-decoration: none;
}

.email-confirmation-gmail-button:hover {
  background: #2445a8;
}

.email-confirmation-note {
  margin: 16px 0 0;
  padding-top: 14px;
  border-top: 1px solid #ead9bf;
  color: #5b6474;
  font-size: 14px;
}

@media (max-width: 600px) {
  .email-confirmation-notice {
    padding: 17px;
    border-radius: 14px;
    font-size: 16px;
  }

  .email-confirmation-heading h2 {
    font-size: 21px;
  }

  .email-confirmation-steps li {
    gap: 10px;
    padding: 11px;
  }

  .email-confirmation-steps strong {
    font-size: 16px;
  }

  .email-confirmation-steps p {
    font-size: 14px;
  }

  .email-confirmation-gmail-button {
    display: flex;
    width: 100%;
    box-sizing: border-box;
  }
}


ТЕКСТ, КОТОРЫЙ ДОЛЖЕН ВИДЕТЬ УЧИТЕЛЬ:
«Тіркелу әлі аяқталған жоқ! ҚМЖ Generator-ды пайдалану үшін электрондық поштаңызды растауыңыз қажет. Поштаңызды ашыңыз → ҚМЖ Generator жіберген хатты табыңыз → хаттағы растау сілтемесін басыңыз → сайтқа қайта оралып, аккаунтыңызға кіріңіз.»

ЕСКЕРТУ:
Бұл код тек хабарламаның көрінісін жақсартады. Ол растау хатын жіберу немесе Supabase аутентификациясын өзгертпейді. Сайт құрылымына қарай HTML блогын ескі хабарлама көрсетілетін компонентке қою қажет. Жарияламас бұрын жаңа тест аккаунтпен тіркелуді тексеріңіз.