Invalid ID<style>


@font-face {
    font-family: 'GE2';
    src: url('/wp-content/themes/woodmart-child/font/GESSTWOMEDIUM.OTF') format('opentype');
}


 @import "compass/css3";
 @import url(https://fonts.googleapis.com/css?family=Sacramento);
 @import url('https://fonts.googleapis.com/css?family=Srisakdi:700');
 @import url('https://fonts.googleapis.com/css?family=Pacifico');
 html {
	 height: 100%;
}

.button.button-30,h2,p{ font-family: 'GE2', cursive; /* Use the GE2 font-family */}
 body {
	 box-sizing: border-box;
	 background: url(https://profpioneers.com/wp-content/uploads/2024/02/blue-liquid-pixels-w-blue-background.gif);
        background-repeat: no-repeat;
            background-size: 500rem;
        background-position: center;
	 font-size: 2.6rem;
	 color: #2f2f2f;
	 text-align: center;
	 display: flex;
	 align-items: center;
	 justify-content: center;
	 flex-direction: column;
	 height: 90%;
	 perspective: 1000px;
	 font-family: 'GE2', cursive; /* Use the GE2 font-family */
}
 .envelope {
	 background: #e1e1e1;
	 border-radius: 0 0 4px 4px;
	 width: 320px;
	 height: 320px;
	 min-height: 320px;
	 margin: 20px auto;
	 position: relative;
	 transition: all 0.3s cubic-bezier(0.42, 0, 0.58, 1);
	 transform-origin: 50 50%;
	 transform: scale(1.8);
}
 .envelope:before, .envelope:after {
	 content: '';
	 display: block;
	 position: absolute;
	 bottom: 0;
	 z-index: 2;
}
 .envelope:before {
	 left: 0;
	 width: 0;
	 height: 0;
	 border-style: solid;
	 border-width: 296px 0 0 300px;
	 border-color: transparent transparent transparent #e1e1e1;
}
 .envelope:after {
	 right: 0;
	 width: 0;
	 height: 0;
	 border-style: solid;
	 border-width: 0 0 296px 300px;
	 border-color: transparent transparent #e1e1e1 transparent;
}
 .envelope.open {
	 transform: rotateZ(7deg) translateY(450px) rotateY(-9deg)scale(2);
	 box-shadow: 12px 12px 8px 5px #00000082;
}
 .envelope.open .flap-outside {
	 top: -1px;
	 animation: open-flap 0.6s ease-in-out forwards;
}
 .envelope.open .flap-outside .flap {
	 background: #e1e1e1;
}
 .envelope.open .card {
	 transform: translateX(14%) translateY(-200px);
	 transition-delay: 0.6s;
}
 .envelope .card {
	 background: #fff;
	 position: absolute;
	 overflow: hidden;
	 left: 0;
	 bottom: 0;
	 width: 70%;
	 height: 85%;
	 padding: 10px 20px;
	 transform: translateX(14%);
	 transition: all 0.3s cubic-bezier(0.42, 0, 0.58, 1) 0s;
	 z-index: 1;
}
 .envelope .card h2 {
	 font-family: 'GE2', cursive;
	 font-size: 2rem;
	 line-height: 0.6;
	 margin-top: 0.1em;
}
 .envelope .card p {
	 font-family: 'GE2', cursive;
	 font-size: 1.1rem;
	 line-height: 1.3;
}
 .envelope .flap-container {
	 border-radius: 4px;
	 overflow: hidden;
	 position: absolute;
	 top: 0;
	 left: 0;
	 width: 100%;
	 height: 100%;
	 transition: all 0.4s cubic-bezier(0.18, 0.81, 0.76, 0.93) 0s;
	 z-index: 10;
}
 .envelope .flap-outside {
	 overflow-y: auto;
	 transform-origin: 50% 0;
	 animation-delay: 0.6s;
	 animation-fill-mode: backwards;
	 z-index: 4;
	 box-shadow: 12px 12px 8px 5px #00000082;
}
 .envelope .flap-outside .flap {
	 background: #e1e1e1;
	 backface-visibility: hidden;
}
 .envelope .flap-outside .flap:after {
	 background: #e1e1e1;
	 backface-visibility: hidden;
	 content: '';
	 display: block;
	 position: absolute;
	 transform: rotateX(180deg);
	 height: 100%;
	 width: 100%;
	 left: 0;
	 top: 0;
	 z-index: 1;
}
 .envelope .flap-inside {
	 transform: rotateX(260deg);
	 border-radius: 0 0 4px 4px;
	 overflow: hidden;
}
 .envelope .flap-inside .flap {
	 border-radius: 40px 40px 80px 40px;
	 border: 1px solid #e1e1e1;
	 margin-top: 20px;
}
 .envelope .flap {
	 background: #e1e1e1;
	 border: 1px solid #e1e1e1;
	 border-radius: 40px;
	 overflow: hidden;
	 width: 300px;
	 height: 300px;
	 position: absolute;
	 top: -50%;
	 left: 50%;
	 margin: -20px 0 0 -151px;
	 transform: rotateZ(45deg);
	 transform-style: preserve-3d;
	 transition: all 0.8s ease 0s;
	 z-index: 10;
}
 .envelope .flap .lining {
	 background: url('http://jomesthewedding.com/wp-content/themes/jomes/library/images/flyer-bouquet.jpg') 50% 50% #c39f3f;
	 backface-visibility: hidden;
	 border-radius: 0 0 40px 0;
	 position: absolute;
	 top: 0;
	 left: 0;
	 width: 92%;
	 height: 92%;
	 outline: auto;
	 
}
 .envelope svg.string {
	 position: relative;
	 z-index: -1;
}
 .textclick {
    font-weight: bold;
    margin: 0;
    font-size: 3rem;
    position: relative;
    top: 10rem;
    color:#fff;
    filter: drop-shadow(12px 14px 6px black);
    background-color: #c39f3f;
    padding: 10px 30px;
    border-radius: 20px;
}
 @keyframes open-flap {
	 0% {
		 transform: rotateX(0deg);
		 z-index: 4;
	}
	 50% {
		 transform: rotateX(90deg);
		 z-index: 0;
	}
	 100% {
		 transform: rotateX(180deg);
		 z-index: 0;
	}
}
 .envelope .card.custom-height {
    height: 180%;
}





/* CSS */
.button-30 {
    align-items: center;
    appearance: none;
    background-color: rgb(195,159,63);
    border-radius: 4px;
    border-width: 0;
    box-shadow: rgb(195 159 63) 0 2px 4px, rgba(45, 35, 66, 0.3) 0 7px 13px -3px, #D6D6E7 0 -3px 0 inset;
    box-sizing: border-box;
    color: #ffffff;
    cursor: pointer;
    display: inline-flex;
    font-family: 'GE2', cursive;
    height: 48px;
    justify-content: center;
    line-height: 1;
    list-style: none;
    overflow: hidden;
    padding-left: 16px;
    padding-right: 16px;
    position: relative;
    text-align: left;
    text-decoration: none;
    transition: box-shadow .15s,transform .15s;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
    white-space: nowrap;
    will-change: box-shadow,transform;
    font-size: 20px;
    margin: 20px 0;
    width: 150px;
}


.button-30:focus {
  box-shadow: #D6D6E7 0 0 0 1.5px inset, rgba(45, 35, 66, 0.4) 0 2px 4px, rgba(45, 35, 66, 0.3) 0 7px 13px -3px, #D6D6E7 0 -3px 0 inset;
}

.button-30:hover {
  box-shadow: rgba(45, 35, 66, 0.4) 0 4px 8px, rgba(45, 35, 66, 0.3) 0 7px 13px -3px, #D6D6E7 0 -3px 0 inset;
  transform: translateY(-2px);
}

.button-30:active {
  box-shadow: #D6D6E7 0 3px 7px inset;
  transform: translateY(2px);
}

@keyframes float {
	0% {
		box-shadow: 0 5px 15px 0px rgba(0,0,0,0.6);
		transform: translatey(0px);
	}
	50% {
		box-shadow: 0 25px 15px 0px rgba(0,0,0,0.2);
		transform: translatey(-20px);
	}
	100% {
		box-shadow: 0 5px 15px 0px rgba(0,0,0,0.6);
		transform: translatey(0px);
	}
}

.float
{
    position: relative;
    top: 20rem;
    z-index: 10;
}

/*    .envelope.open {*/
/*        transform: rotateZ(7deg) translateY(450px) rotateY(-9deg) scale(2);*/
/*    }*/
/*     .float{width:80%;right: unset;}*/
/*@media screen and (min-width: 768px) {*/
/*    .envelope.open {*/
/*        transform: rotateZ(7deg) translateY(450px) rotateY(-9deg) scale(1.5);*/
/*    }*/
/*    .float{width:35%;right: 20px;}*/
/*}*/

/*@media screen and (max-width: 767px) {*/
/*    .envelope.open {*/
        /* Adjust the transformation properties for smaller screens if needed */
/*        transform: rotateZ(7deg) translateY(350px) rotateY(-9deg) scale(1.5);*/
/*        .float{width:35%;right: 20px;}*/
/*    }*/
/*}*/

</style>
<title>دعوة خاصة </title>
<body>
    <div id="title_1"><h1 style="color:#fff;font-size: 8rem;margin: 0;">دعوة خاصة</h1></div>
    <div class="float"><img src="https://profpioneers.com/wp-content/uploads/2023/09/Untitled-2.png" width="50%"></div>
  <div class="envelope">
    <div class="card">
      <h2>دعوة خاصة</h2>
      <p style="font-weight: bolder;">""</p>
<p>تتشرف الريادة الإحترافية لتنظيم المعارض والمؤتمرات</p>      
<p>لدعوتكم لتناول طعام العشاء</p>
<p>في مطعم نيالي بفندق شانغريلا</p>
<p>(الدور الثالث)</p>
<p>يوم الاحد ١١/ ٢/ ٢٠٢٤ م 
<br>في تمام الساعة ٥:٣٠ عصرا</p>

  <!-- Attendance Form -->
    <form id="attendanceForm" style="font-size: 1rem;">
        <label style="font-size: 1.2rem;">تأكيد الحضور</label>
        <br>
        <input type="radio" name="attendance" value="No" > نعم
        <input type="radio" name="attendance" value="Yes"> لا
        <br>
        <button  id="submitAttendance" type="button" class="button-30" role="button">سجل</button>
  
    </form>
    </div>
    <div class="flap-outside flap-container">
      <div class="flap">
        <div class="lining"></div>
      </div>
    </div>
    <div class="flap-inside flap-container">
      <div class="flap"></div>
    </div>
    
    <svg version="1.1" class="string" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
      viewBox="0 0 400 400" enable-background="new 0 0 400 400" xml:space="preserve" preserveAspectRatio="xMidYMid meet">
      
      <!-- Left string -->
      <path fill="none" stroke="#fff" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M0,202.768l247.674,0.566c0,0,17.438,0.373,26.027-0.333c3.292-0.086,10.681-2.608,12.901-6.277
	c9.421-15.545,10.722-22.938,14.738-32.724c14.667-35.75,37.693-52.331,50-41.333c13.166,11.766-4.703,35.756-15.667,48.333
	c-12.222,14.018-23.661,18.463-38,24.667c-12.307,5.325-44.737,16.634-59.435,25.867c-16.134,10.137-19.231,9.467-49.832,39.508"
    >
        <animate id="morphoneleft" dur="0.8" begin="9.6"
               attributeName="d" from="M0,202.768l247.674,0.566c0,0,17.438,0.373,26.027-0.333c3.292-0.086,10.681-2.608,12.901-6.277
	c9.421-15.545,10.722-22.938,14.738-32.724c14.667-35.75,37.693-52.331,50-41.333c13.166,11.766-4.703,35.756-15.667,48.333
	c-12.222,14.018-23.661,18.463-38,24.667c-12.307,5.325-44.737,16.634-59.435,25.867c-16.134,10.137-19.231,9.467-49.832,39.508" to="M0,203l247.674,0.334c0,0,17.438,0.373,26.027-0.333c3.292-0.086,10.681-2.608,12.901-6.277c2.261-3.927,2.731-14.057,9.898-13.391
	c7.167,1-9.799,17.048-11.927,19.118c-7.425,6.885-5.292,4.807-14.292,11.89c-9.167,6.667-17.411,10.963-31.75,17.167
	c-12.307,5.325-88.001,46.751-102.699,55.984C119.698,297.629,104,304.5,76,318" />

        <animate id="morphtwoleft" dur="0.2" begin="morphoneleft.end"
               attributeName="d" from="M0,203l247.674,0.334c0,0,17.438,0.373,26.027-0.333c3.292-0.086,10.681-2.608,12.901-6.277c2.261-3.927,2.731-14.057,9.898-13.391
	c7.167,1-9.799,17.048-11.927,19.118c-7.425,6.885-5.292,4.807-14.292,11.89c-9.167,6.667-17.411,10.963-31.75,17.167
	c-12.307,5.325-88.001,46.751-102.699,55.984C119.698,297.629,104,304.5,76,318" to="M-79.078,290.9l35.386,4.267c0,0,93.468,18.997,103.805,35.211c8.628,9.253,3.196,17.92-2.946,25.587
	C45.5,368.632,6.533,364.559-0.034,368.941c-7.615,4.833-39.83-1.204-45.788,2.18c-18.972,11.783-5.168,11.094-14.71,15.36
	c-10.121,5.946-21.998-7.963-34.83-1.28c-7.711,6.827-7.314,10.24-18.844,10.24c-5.964,0-23.901-2.73-37.771-0.854" />
    
        <animate id="morphthreeleft" dur="0.05" begin="morphtwoleft.end"
               attributeName="d" from="M-79.078,290.9l35.386,4.267c0,0,93.468,18.997,103.805,35.211c8.628,9.253,3.196,17.92-2.946,25.587
	C45.5,368.632,6.533,364.559-0.034,368.941c-7.615,4.833-39.83-1.204-45.788,2.18c-18.972,11.783-5.168,11.094-14.71,15.36
	c-10.121,5.946-21.998-7.963-34.83-1.28c-7.711,6.827-7.314,10.24-18.844,10.24c-5.964,0-23.901-2.73-37.771-0.854" to="M-62.5,316.167l40.487,1.666c0,0,4.197,32.816,14.534,49.03c8.628,9.253,3.196,17.92-2.946,25.587
	c-11.667,12.667-63.021,9.805-69.588,14.188c-7.615,4.833-39.83-1.204-45.788,2.18c-18.972,11.783-5.168,11.094-14.71,15.36
	c-10.121,5.946-21.998-7.963-34.83-1.28c-7.711,6.827-7.314,10.24-18.844,10.24c-5.964,0-23.901-2.73-37.771-0.854" fill="freeze" />

      </path>
      
      <!-- Right string -->
      <path fill="none" stroke="#fff" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M600,201.587l-276.18,0.127c0,0-33.438-0.151-39.313-3.339c-6.144-3.333-38.832-67.707-59.101-70.055
	c-16.598-1.923-16.888,14.444-13.663,23.347c3.156,8.713,11.264,20.667,31.125,32.889c9.736,5.991,23.593,10.774,34.574,14.636
	c1.523,0.536,6.154,2.708,9.058,3.568c50.508,14.908,73.965,32.449,87.632,40.116">
     
        <animate id="morphoneright" dur="0.8" begin="morphoneleft.begin" repeatCount="infinite"
               attributeName="d" from="M600,201.587l-276.18,0.127c0,0-33.438-0.151-39.313-3.339c-6.144-3.333-38.832-67.707-59.101-70.055
	c-16.598-1.923-16.888,14.444-13.663,23.347c3.156,8.713,11.264,20.667,31.125,32.889c9.736,5.991,23.593,10.774,34.574,14.636
	c1.523,0.536,6.154,2.708,9.058,3.568c50.508,14.908,73.965,32.449,87.632,40.116" to="M600,202.5l-276.18-0.786c0,0-33.438-0.151-39.313-3.339c-6.144-3.333-4.365-15.344-14.007-11.708
	c-5.5,4.864,6.298,10.404,19.606,18.069c10.524,5.834,38.771,22.158,50.088,25.439c35.852,14.174,61.009,28.751,71.991,32.613
	c1.521,0.536,21.243,8.804,24.147,9.663c8.181,2.457,28,10.381,41.667,18.048" />

        <animate id="morphtworight" dur="0.2" begin="morphoneright.end" repeatCount="infinite"
               attributeName="d" from="M600,202.5l-276.18-0.786c0,0-33.438-0.151-39.313-3.339c-6.144-3.333-4.365-15.344-14.007-11.708
	c-5.5,4.864,6.298,10.404,19.606,18.069c10.524,5.834,38.771,22.158,50.088,25.439c35.852,14.174,61.009,28.751,71.991,32.613
	c1.521,0.536,21.243,8.804,24.147,9.663c8.181,2.457,28,10.381,41.667,18.048" to="M678,284.233l-56.833,13.333c0,0-98.644,16.187-79.333,51.138c22.422,16,25.663-6.034,32.721-0.451
	c10.73,10.935,56.404,18.938,65.517,26.605c5.383,4.676,20.677-7.281,28.425-4c24.545,14.174,42.116,2.138,49.635,6
	c9.242,4.5,10.677,19.141,12.665,20c5.601,2.457,25.901-7.667,35.258,0" />
    
         <animate id="morphthreeright" dur="0.05" begin="morphtworight.end" repeatCount="infinite"
               attributeName="d" from="M678,284.233l-56.833,13.333c0,0-98.644,16.187-79.333,51.138c22.422,16,25.663-6.034,32.721-0.451
	c10.73,10.935,56.404,18.938,65.517,26.605c5.383,4.676,20.677-7.281,28.425-4c24.545,14.174,42.116,2.138,49.635,6
	c9.242,4.5,10.677,19.141,12.665,20c5.601,2.457,25.901-7.667,35.258,0" to="M688,304.501l-56.833,13.333c0,0-44.644,39.561-25.333,74.512c22.422,16,25.663-6.034,32.721-0.451
	c10.73,10.935,56.404,18.938,65.517,26.605c5.383,4.676,20.677-7.281,28.425-4c24.545,14.174,42.116,2.138,49.635,6
	c9.242,4.5,10.677,19.141,12.665,20c5.601,2.457,25.901-7.667,35.258,0" fill="freeze" />
        
      </path>
      
      
      <rect id="openButton" style="cursor:pointer;"
	      x="0" y="0" rx="5" height="100%" width="100%"
		  fill="none" stroke="#e1e1e1" stroke-width="0" />
   
    </svg>
    
  </div>
  <p class="textclick">افتح الدعوة</p>
  


</body>

<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>

<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>

<script>
    $(document).ready(function () {
        $(".textclick").fadeIn(3000);

        $('.textclick').on('click', function () {
            $(".envelope").toggleClass('open');
            $(".textclick").toggle();
            $(".envelope .card").toggleClass('custom-height');
            $(".envelope .card").css('bottom', '-40px');
            $(".envelope").css('width', '400px');
            $(".envelope .card").css('padding', '30px 20px');
            $(".envelope .flap-outside").css('box-shadow', 'unset');
            $(".float").hide();
            $(".float").css('top', '36rem');
            $(".float").css('transform', 'rotateZ(7deg) translateY(-60px) rotateY(-9deg)');
            $( ".float" ).fadeIn(3500);
             $("#title_1").hide();
            
            
         
        });

        // AJAX to send form data
        $("#submitAttendance").on("click", function () {
            var selectedValue = $('input[name="attendance"]:checked').val();
            var selectedName = null;

            $.ajax({
                type: 'POST',
                url: '/wp-content/themes/woodmart-child/db/invitiations.php', // Replace with your server-side script URL
                data: { 
                    attendance: selectedValue,
                    selectedName: selectedName
                },
                success: function (response) {
                       alert('شكرا، تم الارسال');
                    
                          setTimeout(function () {
                            window.location.href = 'https://profpioneers.com/';
                        }, 2000);
                },
                error: function (error) {
                    console.error(error);
                }
            });
        });
    });
</script>