fiee-official-website/src/views/email-alerts/size768/index.vue

<script setup>
import { NCarousel, NDivider, NMarquee, NPopselect } from "naive-ui";
import { onUnmounted, ref, watch, onMounted, computed } from "vue";

const form = ref({
  firstName: '',
  lastName: '',
  email: '',
  company: '',
  phone: '',
  alertType: 'all',
});
const submitted = ref(false);

function handleSubmit(e) {
  e.preventDefault();
  submitted.value = true;
}
</script>

<template>
 
  <main ref="main">
    <main class="min-h-70vh flex flex-col items-center justify-center relative px-6 py-10">
      <div class="w-[640px] max-w-90vw p-6 bg-white/95 rounded-2xl shadow-lg animate-bounce-in">
        <template v-if="!submitted">
          <h2 class="text-2xl font-bold text-#8A5AFB mb-3 text-center tracking-wide">E-Mail Alerts</h2>
          <p class="text-sm text-gray-500 mb-5 text-center">* Required Fields</p>
          <form class="flex flex-col gap-4" @submit="handleSubmit">
            <div>
              <label class="block text-gray-700 font-semibold mb-1.5 text-base">* First Name</label>
              <input v-model="form.firstName" type="text" class="w-full px-4 py-2.5 rounded-lg border border-gray-300 outline-none bg-white/90 text-base" />
            </div>
            <div>
              <label class="block text-gray-700 font-semibold mb-1.5 text-base">* Last Name</label>
              <input v-model="form.lastName" type="text" class="w-full px-4 py-2.5 rounded-lg border border-gray-300 outline-none bg-white/90 text-base" />
            </div>
            <div>
              <label class="block text-gray-700 font-semibold mb-1.5 text-base">* Email</label>
              <input v-model="form.email" type="email" class="w-full px-4 py-2.5 rounded-lg border border-gray-300 outline-none bg-white/90 text-base" />
            </div>
            <div>
              <label class="block text-gray-700 font-semibold mb-1.5 text-base">* Company</label>
              <input v-model="form.company" type="text" class="w-full px-4 py-2.5 rounded-lg border border-gray-300 outline-none bg-white/90 text-base" />
            </div>
            <div>
              <label class="block text-gray-700 font-semibold mb-1.5 text-base">Phone</label>
              <input v-model="form.phone" type="tel" class="w-full px-4 py-2.5 rounded-lg border border-gray-300 outline-none bg-white/90 text-base" />
            </div>
            <button type="submit" class="w-full py-3.5 rounded-xl bg-#8A5AFB text-white font-bold text-lg active:scale-95 transition-all duration-200 animate-bounce-in animate-delay-200 mt-3">
              Submit
            </button>
          </form>
        </template>
        <template v-else>
          <div class="flex flex-col items-center justify-center min-h-[240px] animate-bounce-in">
            <span class="i-mdi:check-circle-outline text-green-500 text-5xl mb-4"></span>
            <h2 class="text-xl font-bold text-#8A5AFB mb-3">Submitted successfully!</h2>
            <div class="text-gray-700 text-base mb-4">The information you submitted is as follows:</div>
            <div class="w-full bg-white/90 rounded-xl shadow p-4 space-y-2 text-gray-800 text-base">
              <div><span class="font-semibold">First Name：</span>{{ form.firstName }}</div>
              <div><span class="font-semibold">Last Name：</span>{{ form.lastName }}</div>
              <div><span class="font-semibold">Email：</span>{{ form.email }}</div>
              <div><span class="font-semibold">Company：</span>{{ form.company }}</div>
              <div><span class="font-semibold">Phone：</span>{{ form.phone || '(Not filled)' }}</div>
              <div><span class="font-semibold">Alert Type：</span>{{ form.alertType === 'all' ? 'All Alerts' : 'Customize Alerts' }}</div>
            </div>
          </div>
        </template>
      </div>
    </main>
  </main>

</template>

<style scoped lang="scss">
/* Keep tablet background simple */
</style>