new

osinaweb/customercore/templates/invoice-payment.html

@@ -39,7 +39,7 @@
 
                     <div class="w-full bg-osiblue py-3 px-3 flex justify-between items-center text-white mt-5">
                         <p>Due Date: <span class="font-semibold">{{invoice.order.due_date}}</span></p>
-                        <p>Invoice <span class="font-semibold">${{invoice.invoice_number}}</span></p>
+                        <p>Invoice <span class="font-semibold">{{invoice.invoice_number}}</span></p>
                     </div>
 
                     <div class="w-full p-5">

osinaweb/customercore/templates/products/osicard-plans.html

@@ -14,7 +14,7 @@
 
         <!-- PRICING ON DESKTOP -->
         <div class="w-full hidden l:grid grid-cols-3 mt-10">
-            <div class="w-full h-full border border-gray-200 p-9 flex flex-col gap-5 items-center">
+            <div class="w-full h-full border border-gray-200 p-9 flex flex-col gap-5 items-center  {% if active_order_item_basic %} bg-black bg-opacity-20 {% endif %}">
                 <p class="text-secondosiblue uppercase font-poppinsBold text-2xl text-center">Basic</p>
 
                 <div class="w-full flex flex-col justify-center items-center">
@@ -22,12 +22,17 @@
                     <p class="text-gray-500">monthly/individual</p>
                 </div>
 
+                {% if not active_order_item_basic %}
                 <a href="{% url 'buyfreeosicard' %}">
                     <button
                         class="w-fit px-9 py-2 bg-secondosiblue border border-secondosiblue text-white uppercase hover:bg-white hover:text-secondosiblue duration-300">Get
                         Started
                     </button>
                 </a>
+                {% else %}
+                <button
+                    class="w-fit px-9 py-2 bg-white border border-green-700 text-green-700 uppercase cursor-default">Currently Subscribed</button>
+                {% endif %}
 
                 <div class="w-full flex flex-col gap-3 mt-5">
                     <h1 class="text-gray-500 text-[17px] font-light">Features:</h1>

osinaweb/customercore/views.py

@@ -144,7 +144,7 @@ def all_products(request, *args, **kwargs):
 @customer_login_required
 def customer_orders(request, *args, **kwargs):
     customer = request.user.customerprofile
-    orders = Order.objects.filter(customer=customer, status='Completed').order_by()
+    orders = Order.objects.filter(customer=customer, status='Completed').order_by('-id')
 
     
     context = {
@@ -248,9 +248,12 @@ def osimenu_plans(request, *args, **kwargs):
 
 @customer_login_required
 def osicard_plans(request, *args, **kwargs):
+
+    osicard_basic = Item.objects.filter(title='OSICARD BASIC').first()
+    active_order_item_basic = OrderItem.objects.filter(order__customer=request.user.customerprofile, item=osicard_basic, active=True)
     
     context = {
-        
+        'active_order_item_basic': active_order_item_basic,  
     }
 
     return render(request, 'products/osicard-plans.html', context)

osinaweb/osinacore/templates/customer_index.html

@@ -13,31 +13,33 @@
             {% if subscription.item.item_type.name == 'OSIMENU' %}
                 <a href="{% url 'redirectosimenu' %}">
                     <div class="flex flex-col justify-center items-center shadow-md rounded-md cursor-pointer hover:scale-105 transition-transform duration-300 relative">
-                        <div class="w-full py-8 px-3 bg-gray-50 flex justify-center items-center rounded-t-md relative h-[150px]">
+                        <div class="w-full py-8 px-3 bg-gray-50 flex justify-center items-center rounded-t-md relative h-[130px]">
                             {% if subscription.item.item_type.name == 'OSIMENU' %}
                             <img src="{% static 'images/ositcom_logos/osimenublue.png' %}" class="w-[80%] h-auto">
                             {% endif %}
 
                         </div>
-                        <div class="w-[80%] absolute bottom-[-35px] left-1/2 -translate-x-1/2 bg-white border border-gray-100 shadow-md flex justify-center items-center p-3">
+                        <div class="w-full  bg-white border border-gray-100 shadow-md flex justify-start items-center p-3">
-                            <p class="text-secondosiblue text-[17px]">Expires: <span class="font-semibold">{{subscription.end_at}}</span>
+                            <p class="text-secondosiblue text-[17px]">Expires:{% if subscription.end_at %} <span class="font-semibold">{{subscription.end_at}} {% else %} <span class="font-semibold">No Expiry {% endif %}</span>
                             </p>
                         </div>
                     </div>
                 </a>
-
             {% elif subscription.item.item_type.name == 'OSICARD' %}
             <a href="{% url 'redirectosicard' %}">
-                    <div class="flex flex-col justify-center items-center shadow-md rounded-md cursor-pointer hover:scale-105 transition-transform duration-300 relative">
+                <div class="flex flex-col justify-center items-center shadow-md rounded-md cursor-pointer hover:scale-105 transition-transform duration-300 relative">
-                        <div class="w-full py-8 px-3 bg-gray-50 flex justify-center items-center rounded-t-md">
+                    <div class="w-full py-8 px-3 bg-gray-50 flex justify-center items-center rounded-t-md relative h-[130px]">
+                            {% if subscription.item.item_type.name == 'OSICARD' %}
                             <img src="{% static 'images/ositcom_logos/osicardblue.png' %}" class="w-[80%] h-auto">
-                        </div>
+                            {% endif %}
-                        <div class="w-[80%] absolute bottom-[-35px] left-1/2 -translate-x-1/2 bg-white border border-gray-100 shadow-md flex justify-center items-center p-3">
+
-                            <p class="text-secondosiblue text-[17px]">Expires: <span class="font-semibold">{{subscription.end_at}}</span>
-                            </p>
-                        </div>
                     </div>
-                </a>
+                    <div class="w-full  bg-white border border-gray-100 shadow-md flex justify-start items-center p-3">
+                        <p class="text-secondosiblue text-[17px]">Expires:{% if subscription.end_at %} <span class="font-semibold">{{subscription.end_at}} {% else %} <span class="font-semibold">No Expiry {% endif %}</span>
+                        </p>
+                    </div>
+                </div>
+            </a>
             {% endif %}
             {% endfor %}
 

osinaweb/osinacore/templates/customer_main.html

@@ -432,6 +432,7 @@
                                 <path class="cls-1" d="M502.56,144.47c-58.22,0-105.67,47.44-105.67,105.67v2.88c1.44,56.97,48.34,102.79,105.67,102.79s105.67-47.44,105.67-105.67-47.44-105.67-105.67-105.67ZM502.56,239.89c21.38,0,38.82,17.43,38.82,38.82,0,17.79-12.22,32.89-28.57,37.56v13.48c0,5.75-4.67,10.24-10.24,10.24s-10.24-4.67-10.24-10.24v-13.48c-16.53-4.49-28.57-19.59-28.57-37.56,0-5.75,4.67-10.24,10.24-10.24s10.24,4.67,10.24,10.24c0,10.06,8.27,18.33,18.33,18.33s18.33-8.27,18.33-18.33-8.27-18.33-18.33-18.33c-21.38,0-38.82-17.43-38.82-38.82,0-17.79,12.22-32.89,28.57-37.56v-13.48c0-5.75,4.67-10.24,10.24-10.24s10.24,4.67,10.24,10.24v13.48c16.53,4.49,28.57,19.59,28.57,37.56,0,5.75-4.67,10.24-10.24,10.24s-10.24-4.67-10.24-10.24c0-10.06-8.27-18.33-18.33-18.33s-18.33,8.27-18.33,18.33,8.09,18.33,18.33,18.33Z"/>
                                 <path class="cls-1" d="M196.34,476.02h295.8v-99.92c-31.45-2.52-59.66-16.71-80.33-38.1H82.23c-5.75,0-10.24-4.67-10.24-10.24s4.67-10.24,10.24-10.24h313.41c-10.06-15.99-16.71-34.32-18.69-54.09H82.23c-5.75,0-10.24-4.67-10.24-10.24s4.67-10.24,10.24-10.24h294.18c1.08-19.59,6.83-37.92,15.81-54.09H82.23c-5.75,0-10.24-4.67-10.24-10.24s4.67-10.24,10.24-10.24h324.37c21.03-24.62,51.4-40.97,85.54-43.67V30.17H16.64v454.48c0,23,8.99,44.57,25.34,60.92,16.35,16.35,37.92,25.34,60.92,25.34,46.54,0,83.2-37.2,83.2-84.46,0-5.93,4.67-10.42,10.24-10.42ZM82.23,93.25h195.34c5.75,0,10.24,4.67,10.24,10.24s-4.67,10.24-10.24,10.24H82.23c-5.75,0-10.24-4.67-10.24-10.24-.18-5.57,4.49-10.24,10.24-10.24ZM82.23,412.77c-5.75,0-10.24-4.67-10.24-10.24s4.67-10.24,10.24-10.24h344.5c5.75,0,10.24,4.67,10.24,10.24s-4.67,10.24-10.24,10.24H82.23Z"/>
                               </svg>
+                              
                         </div>
                         <div
                             class="w-[60px] h-[60px] bg-white border-2 rounded-full border-secondosiblue flex justify-center items-center">

osinaweb/osinacore/templates/email_templates/forgot_password_email.html

@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Account Activation</title>
+    <style>
+        body {
+            font-family: Arial, sans-serif;
+            line-height: 1.6;
+            margin: 0;
+            padding: 0;
+            background-color: #f9f9f9;
+            text-align: center;
+        }
+        .container {
+            max-width: 600px;
+            margin: 0 auto;
+            padding: 20px;
+            background-color: #ffffff;
+            border-radius: 8px;
+            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+        }
+        h2 {
+            color: #20336b;
+        }
+        p {
+            color: #374a7a;
+        }
+        .btn {
+            display: inline-block;
+            padding: 10px 20px;
+            background-color: #20336b;
+            color: #ffffff;
+            text-decoration: none;
+            border-radius: 5px;
+            transition: background-color 0.3s ease;
+        }
+        .btn:hover {
+            background-color: #374a7a;
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <h2>Reset your account password at Ositcom</h2>
+        <p>Hello {{ user.first_name }},</p>
+        <p>You recently requested to reset your password for your account. Click the button below to reset it.</p>
+        <p><a class="btn"href="{{ reset_link }}">>Reset Password</a></p>
+        <p>If you did not request a password reset, please ignore this email. Your account is safe, don't worry.</p>
+        <p>Regards,<br>The Ositcom Team</p>
+    </div>
+</body>
+</html>

osinaweb/osinacore/templates/forgot-password-confirmation.html

@@ -77,7 +77,7 @@
 
 
                 <!-- LOGIN FORM -->
-                <form id="forgotPasswordConfirmationForm" method="POST" action=""
+                <form id="forgotPasswordConfirmationForm" method="POST" 
                     class="w-full s:w-fit flex flex-col gap-5 justify-center items-center relative">
                     {% csrf_token %}
 
@@ -91,11 +91,11 @@
                         <div class="w-full s:w-[550px] h-fit bg-slate-50 rounded-md shadow-md p-5 s:p-9">
                             <p class="text-secondosiblue text-center font-light text-base s:text-[17px]">Enter your new password.</p>
 
-                            <input type="password" placeholder="Password" name="password1"
+                            <input type="password" placeholder="Password" name="new_password"
                                 class="w-full p-3 border border-gray-300 rounded-md bg-transparent outline-none mt-8"
                                 required>
 
-                            <input type="password" placeholder="Password Confirmation" name="password2"
+                            <input type="password" placeholder="Password Confirmation" name="confirm_password"
                                 class="w-full p-3 border border-gray-300 rounded-md bg-transparent outline-none mt-3"
                                 required>
 

osinaweb/osinacore/templates/forgot-password-sent.html

@@ -0,0 +1,100 @@
+{% load static %}
+
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Osina</title>
+
+    <link rel="stylesheet" type="text/css" href='{% static "dist/output.css" %}'>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
+
+    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
+</head>
+
+
+<body class="font-poppinsLight">
+    <div class="w-full h-fit xlg1:h-[100vh] grid grid-cols-1 xlg1:grid-cols-2 gap-5">
+        <!-- SIDE BANNER -->
+        <div
+            class="bg-gradient-to-b from-gray-100 to-blue-950 p-5 s:p-9 overflow-hidden w-full h-full border-r border-gray-100 duration-500 hidden xlg1:block relative">
+            <div class="relative w-full h-full flex justify-center items-center">
+                <div
+                    class="absolute top-0 left-32 w-[400px] h-[400px] bg-slate-800 mix-blend-multiply filter blur-xl opacity-70 animate-blob animation-delay-2000">
+                </div>
+                <div
+                    class="absolute top-20 right-0 w-[400px] h-[400px] bg-osiblue mix-blend-multiply filter blur-xl opacity-70 animate-blob animation-delay-2000">
+                </div>
+                <div
+                    class="absolute bottom-0 left-10 w-[400px] h-[400px] bg-blue-900 mix-blend-multiply filter blur-xl opacity-70 animate-blob animation-delay-2000">
+                </div>
+                <div
+                    class="absolute bottom-0 right-36 w-[400px] h-[400px] bg-gray-400 mix-blend-multiply filter blur-xl opacity-70 animate-blob animation-delay-2000">
+                </div>
+            </div>
+
+
+            <div class="absolute w-full h-full hidden xlg1:flex justify-between items-center m-auto inset-0 z-10 p-9">
+                <div class="flex flex-col">
+                    <p class="text-white text-[30px] lg:text-[48px] xll:text-[70px] font-poppinsExtraBold">
+                        PROVIDING
+                        OPTIMAL
+                        <br />SOLUTIONS<br />
+                    </p>
+                    <div class="flex justify-start items-center gap-2 mt-5">
+                        <div class="w-[30px] h-[3px] bg-blue-500"></div>
+                        <img src="{% static 'images/ositcom_logos/ositcomwhite.png' %}" class="w-[120px] h-auto">
+                    </div>
+                </div>
+                <div class="absolute w-[400px] lg:w-[480px] xll:w-[550px] h-auto -right-40 bottom-5 animate-bouncePop">
+                    <img src="{% static 'images/ositcom_logos/ositcomwhite(o).png' %}" class="w-full h-auto">
+                </div>
+            </div>
+        </div>
+
+
+        <!-- FORGOT PASSWORD FORM -->
+        <div class="w-full h-[100vh] xlg1:h-full flex justify-center py-9 px-0 s:px-5 relative overflow-hidden xlg1:overflow-visible bg-gradient-to-b from-gray-100 to-blue-950 xlg1:from-white xlg1:to-white"
+            id="loginRegisterContainer">
+
+            <!-- Background blobs -->
+            <div class="relative w-full flex justify-center items-center">
+                <div
+                    class="absolute top-0 left-32 w-[400px] h-[400px] bg-slate-800 mix-blend-multiply filter blur-xl opacity-70 animate-blob animation-delay-2000 block xlg1:hidden">
+                </div>
+                <div
+                    class="absolute top-20 right-0 w-[400px] h-[400px] bg-osiblue mix-blend-multiply filter blur-xl opacity-70 animate-blob animation-delay-2000 block xlg1:hidden">
+                </div>
+                <div
+                    class="absolute bottom-0 left-10 w-[400px] h-[400px] bg-blue-900 mix-blend-multiply filter blur-xl opacity-70 animate-blob animation-delay-2000 block xlg1:hidden">
+                </div>
+                <div
+                    class="absolute bottom-0 right-36 w-[400px] h-[400px] bg-gray-400 mix-blend-multiply filter blur-xl opacity-70 animate-blob animation-delay-2000 block xlg1:hidden">
+                </div>
+
+
+                <!-- EMAIL CONFIRMATION MESSAGE -->
+                <div class="w-full s:w-fit flex flex-col gap-5 justify-center items-center relative">
+
+                    <!-- OSINA LOGO ON DESKTOP -->
+                    <img src="{% static 'images/ositcom_logos/osinablue.png' %}" class="w-[250px] h-auto hidden xlg1:block">
+
+                    <!-- OSINA LOGO ON MOBILE -->
+                    <img src="{% static 'images/ositcom_logos/osinawhite.png' %}" class="w-[220px] h-auto block xlg1:hidden">
+
+                    <div class="w-full flex justify-center items-center px-5 s:px-0">
+                        <div class="w-full s:w-[550px] gap-5 h-fit bg-slate-50 rounded-md shadow-md p-5 s:p-9">
+                            <p class="text-secondosiblue font-light text-center text-base s:text-[17px]">We’ve emailed you instructions for resetting your password. You should receive them shortly.</br></br>
+                                If you don’t receive an email, please make sure you’ve entered the address you registered with, and check your spam folder.</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</body>
+
+</html>

osinaweb/osinacore/templates/forgot-password.html

@@ -77,7 +77,7 @@
 
 
                 <!-- LOGIN FORM -->
-                <form method="POST" action=""
+                <form method="POST" action="{% url 'forgot-password' %}"
                     class="w-full s:w-fit flex flex-col gap-5 justify-center items-center relative">
                     {% csrf_token %}
 
@@ -92,7 +92,16 @@
                             <p class="text-secondosiblue text-center font-light">Enter your email address below, and
                                 we'll email you instructions for setting a new password.</p>
 
-                            <input type="email" placeholder="Email" name=""
+                            <div id="error-message"
+                                class="messages opacity-0 absolute top-20 w-[85%] s:w-fit left-0 right-0 mx-auto px-9 s:px-14 py-3 rounded-md bg-red-500 bg-opacity-80 text-white text-center rounded-t-md shadow-md text-xl z-10 pointer-events-none">
+                                {% for message in messages %}
+                                <p
+                                    class="{{ message.tags }} text-white text-base s:text-[17px] font-light text-center">
+                                    {{ message }}</p>
+                                {% endfor %}
+                            </div>
+
+                            <input type="email" placeholder="Email" name="email"
                                 class="w-full p-3 border border-gray-300 rounded-md bg-transparent outline-none mt-8"
                                 required>
 
@@ -105,6 +114,24 @@
                 </form>
             </div>
         </div>
+
+        <script>
+            function showError() {
+            const errorMessage = document.getElementById('error-message');
+            errorMessage.classList.add("show-message");
+
+            // Automatically hide the message container after 10 seconds
+            setTimeout(() => {
+                errorMessage.classList.add("hide-message");
+            }, 10000);
+        }
+
+        // Check if error messages are present in the rendered HTML
+        const errorMessages = document.querySelectorAll('.messages p');
+        if (errorMessages.length > 0) {
+            showError();
+        }
+        </script>
 </body>
 
 </html>

osinaweb/osinacore/urls.py

@@ -23,15 +23,17 @@ urlpatterns = [
     path('api/', include('osinacore.api.urls')),
     path('login/<str:email>/<str:key>/', views.login_with_email, name='login_with_email'),
     path('login', views.signin, name='signin'),
-    path('forgot-password/', views.forgot_password, name='forgot-password'),
-    path('forgot-password-confirmation/', views.forgot_password_confirmation, name='forgot-password-confirmation'),
     path('signup', views.signup, name='signup'),
-    path('email-confirmation-sent/', views.confirmation_sent, name='email-confirmation-sent'),
+    path('check-email-availability/', views.check_email_availability, name='check-email-availability'),
     path('activate/<uidb64>/<token>/', views.activate, name='activate'),
     path('confirmation-sent/', views.confirmation_sent, name='activation_sent'),
+    path('forgot-password/', views.forgot_password, name='forgot-password'),
+    path('reset-password/<uidb64>/<token>/', views.forgot_password, name='forgot-password'),
+
+
     path('go_online/', views.go_online, name='go_online'),
     path('logout/', views.signout, name='signout'),
-    path('check-email-availability/', views.check_email_availability, name='check-email-availability'),
+   
     path('', views.home, name='home'),
     path('statusmobilemodal/', views.status_mobile_modal, name='statusmobilemodal'),
     path('userrecentativities/<int:user_id>', views.user_recent_activities_modal, name='userrecentativities'),

osinaweb/osinacore/views.py

@@ -69,16 +69,6 @@ def confirmation_sent(request, *args, **kwargs):
     return render(request, 'email-confirmation-sent.html', context) 
 
 
-def forgot_password(request):
-
-    return render(request, 'forgot-password.html')
-
-
-def forgot_password_confirmation(request):
-
-    return render(request, 'forgot-password-confirmation.html')
-
-
 def signup(request):
     form = CreateUserForm()
     reference = Reference.objects.get(name='Osina')
@@ -713,3 +703,56 @@ def recent_activities_page(request):
 
     return render(request, 'recent-activities-page.html', context)
 
+
+
+
+
+from django.contrib.auth.tokens import PasswordResetTokenGenerator
+
+
+
+def forgot_password(request):
+    if request.method == 'POST':
+        email = request.POST.get('email')
+        user = User.objects.filter(email=email).first()
+        if user:
+            token = PasswordResetTokenGenerator().make_token(user)
+            current_site = get_current_site(request)
+        
+            uid = urlsafe_base64_encode(force_bytes(user.pk))
+            reset_link = f"{current_site}/reset-password/{uid}/{token}/"
+
+            mail_subject = 'Reset your password'
+            message = render_to_string('email_templates/forgot_password_email.html', {
+                'user': user,
+                'reset_link': reset_link,
+            })
+            send_mail(mail_subject, message, settings.EMAIL_HOST_USER, [user.email], html_message=message)
+            return render(request, 'forgot-password-sent.html')
+        else:
+            messages.error(request, 'No account is associated with this email.')
+    return render(request, 'forgot-password.html')
+     
+
+def reset_password(request, uidb64, token):
+    try:
+        uid = urlsafe_base64_decode(uidb64).decode()
+        user = User.objects.get(pk=uid)
+    except (TypeError, ValueError, OverflowError, User.DoesNotExist):
+        user = None
+
+    if user and PasswordResetTokenGenerator().check_token(user, token):
+        if request.method == 'POST':
+            new_password = request.POST.get('new_password')
+            confirm_password = request.POST.get('confirm_password')
+
+            if new_password == confirm_password:
+                user.set_password(new_password)
+                user.save()
+                return render(request, 'frontend/frontend-templates/reset_password/reset-password-done.html')
+            else:
+                return render(request, 'forgot-password-confirmation.html')
+        else:
+            return render(request, 'forgot-password-confirmation.html')
+    else:
+        return HttpResponse('Activation link is invalid!')

osinaweb/static/dist/output.css

@@ -758,10 +758,6 @@ video {
   bottom: 1.25rem;
 }
 
-.bottom-\[-35px\] {
-  bottom: -35px;
-}
-
 .left-0 {
   left: 0px;
 }
@@ -770,10 +766,6 @@ video {
   left: 0.25rem;
 }
 
-.left-1\/2 {
-  left: 50%;
-}
-
 .left-10 {
   left: 2.5rem;
 }
@@ -1092,6 +1084,10 @@ video {
   height: 12px;
 }
 
+.h-\[130px\] {
+  height: 130px;
+}
+
 .h-\[13px\] {
   height: 13px;
 }
@@ -1448,11 +1444,6 @@ video {
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
 
-.-translate-x-1\/2 {
-  --tw-translate-x: -50%;
-  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-}
-
 .-translate-y-1 {
   --tw-translate-y: -0.25rem;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));