Support for PHP 8 and more changes.

-Compatibility extended up to PHP 8.
-Disable Gravatar function added.
-Default avatar can be add anymore.
-Some bugs fixed.
-Some design changes have been made.

Author: en0ndev

about.php

@@ -2,7 +2,7 @@
 
 /**
  ** about.php
- ** @version 1.2.1
+ ** @version 1.3
  ** @since 1.0
  ** @author en0ndev
  */
@@ -25,8 +25,8 @@
 defined('ABSPATH') || exit; // Exit if accessed directly 
 
 $template = "<div class='about'><img src='" . plugin_dir_url(__FILE__) . "/assets/img/icon-128x128.png' alt='Custom Profile Avatar' /><p class='big'>Custom Profile Avatar</p>";
-$template .= "<p>" . esc_html__('Version', 'custom-profile-avatar') . ": 1.2.1</p>";
-$template .= "<p>" . esc_html__('Developer', 'custom-profile-avatar') .  ": en0ndev</p>";
+$template .= "<p>" . esc_html__('Version', 'custom-profile-avatar') . ": 1.3</p>";
+$template .= "<p>" . esc_html__('Developer', 'custom-profile-avatar') .  ": <a class='about__author link' href='https://github.com/en0ndev' target='_blank'>en0ndev</a></p>";
 $template .= "<a class='link' target='_blank' href='https://www.youtube.com/channel/UC3CSOAThanO-LvYKFwJ24RQ'>" . esc_html__('My YouTube Channel', 'custom-profile-avatar') . "</a></div>";
 
 $page = new cpa__page__template;

assets/css/style.css

@@ -1,6 +1,6 @@
 /**
 ** File: style.css
-** Version: 1.2.1
+** Version: 1.3
 ** Since: 1.0
 ** Author: en0ndev
 
@@ -20,23 +20,29 @@ You should have received a copy of the GNU General Public License
 along with Custom Profile Avatar.  If not, see <https://www.gnu.org/licenses/>.
 */
 
-@import url("https://fonts.googleapis.com/css2?family=Ubuntu:ital,wght@0,300;0,500;0,700;1,300&display=swap");
+/*@import url("https://fonts.googleapis.com/css2?family=Ubuntu:ital,wght@0,300;0,500;0,700;1,300&display=swap");*/
+
+/*@import url("https://fonts.googleapis.com/css2?family=Raleway:wght@200;400;600&display=swap");*/
+
+@import url("https://fonts.googleapis.com/css2?family=Quicksand:wght@300;400;500;600&display=swap");
+
 body {
   background: #ddd;
   user-select: none;
   line-height: normal !important;
 }
 
-#wpbody * {
+#wpbody *,
+#author__by {
   line-height: normal !important;
-  font-family: "Ubuntu", sans-serif;
+  font-family: "Quicksand", sans-serif;
 }
 
 #author__by {
   background: #000;
-  padding: 5px 20px;
+  padding: 10px 35px;
   border-radius: 30px;
-  box-shadow: 1px 1px 5px 1px rgba(0, 0, 0, 0.6);
+  box-shadow: 1px 1px 5px 1px rgba(0, 0, 0, 0.5);
   position: absolute;
   left: 11px;
   bottom: 11px;
@@ -51,7 +57,8 @@ body {
 #author__by .bold {
   color: #fff;
   font-weight: 700;
-  padding: 1px 0;
+  padding: 0 2px;
+  margin: 0 5px;
 }
 
 #author__by .bold:hover {
@@ -65,7 +72,7 @@ body {
   /*justify-content: center;*/
   flex-direction: column;
   text-align: center;
-  padding-top: 20px;
+  padding: 40px 0;
 }
 
 .main__area h1,
@@ -84,7 +91,7 @@ input[type="button"],
 
 .inner__area {
   width: 800px;
-  height: 300px;
+  max-height: 600px;
   background: #f8f8f8;
   border-radius: 10px;
   margin-top: 20px;
@@ -110,8 +117,12 @@ input[type="button"],
   background: rgb(150, 0, 0);
   color: #fff;
   padding: 3px 15px;
-  margin-bottom: 40px;
-  display: inline-block;
+  margin: 40px 0;
+  display: block;
+}
+
+.main__area .info__card:first-child {
+  margin-top: 0;
 }
 
 .inner__area h2 {
@@ -165,6 +176,8 @@ input[type="button"],
   justify-content: center;
   align-items: center;
   flex-direction: column;
+  width: min-content;
+  margin: 0 auto;
 }
 
 .remove {
@@ -225,17 +238,30 @@ input[type="button"],
   border-bottom: 4px solid #2271b1;
 }
 
+.about > p > .about__author.link {
+  color: #000;
+  text-decoration: none;
+  padding: 2px 0;
+  border-bottom: 2px solid #000;
+}
+
+.about > p > .about__author.link:hover {
+  border-bottom: 4px solid #000;
+}
+
 #notf {
   position: absolute;
   right: 15px;
-  top: 15px;
-  box-shadow: 2px 2px 5px 1px rgba(0, 0, 0, 0.3);
+  top: 2.5px;
+  box-shadow: 1px 1px 8px -1px rgba(0, 0, 0, 0.3);
   padding: 10px 2em;
-  border-radius: 5px;
+  border-radius: 3px;
   color: #000;
   background: #fff;
   font-weight: 500;
   font-size: 16px;
+  display: none;
+  transition: transform 0.6s;
 }
 
 .scs {
@@ -267,47 +293,92 @@ input[type="button"],
   /* for .rate__box */
 }
 
-.checkbox__area {
+.checkbox__area,
+.checkbox__area__single {
   display: flex;
-  /*justify-content: space-between;*/
+  justify-content: space-evenly;
+  padding-bottom: 20px;
 }
 
 .user__permissions {
   display: block;
 }
 
-.user__permissions .permission__cont {
+.user__permissions .checkbox__area label {
   /*margin-left: 15px;*/
   /*margin-right: 15px;*/
   display: inline-flex;
   flex-direction: column;
   align-items: center;
   /*margin: 0 auto;*/
   position: relative;
-  margin: 0 25px;
+  margin: 0 15px;
 }
 
-.user__permissions .permission__cont span {
+.user__permissions .checkbox__area label span {
   font-size: 10pt;
   position: absolute;
   bottom: -20px;
   white-space: nowrap;
 }
 
-.user__permissions .permission__cont input {
+.user__permissions .checkbox__area label input {
   width: 50px;
   height: 50px;
   border: none;
   box-shadow: 1px 1px 8px -4px rgba(35, 35, 35, 0.75);
   margin: 0 !important;
 }
 
-.user__permissions .permission__cont input:checked::before {
+.user__permissions .checkbox__area .permission__cont input:checked::before {
   width: 50px !important;
   height: 50px !important;
   margin: 0 !important;
 }
 
+.user__permissions .checkbox__area__single label {
+  width: 85px;
+  height: 35px;
+  border-radius: 30px;
+  box-shadow: 0px 0px 2px 1px rgba(0, 0, 0, 0.3);
+  overflow: hidden;
+  position: relative;
+}
+
+.user__permissions .checkbox__area__single label span {
+  width: 100%;
+  height: 100%;
+  background-color: #dadada;
+  display: inline-block;
+  transition: background 0.5s;
+}
+
+.user__permissions .checkbox__area__single label span::before {
+  content: "";
+  width: 25px;
+  height: 25px;
+  border-radius: 50%;
+  box-shadow: 1px 1px 4px -1px rgba(0, 0, 0, 0.3);
+  background-color: #ffffff;
+  display: block;
+  transition: transform 0.5s;
+  position: absolute;
+  left: 5px;
+  top: 5px;
+}
+
+.user__permissions .checkbox__area__single label input {
+  display: none;
+}
+
+.user__permissions .checkbox__area__single label input:checked + span {
+  background-color: #2ab600;
+}
+
+.user__permissions .checkbox__area__single label input:checked + span::before {
+  transform: translateX(50px);
+}
+
 #change {
   background-color: transparent;
   box-shadow: none;

assets/img/default-non-user-avatar.jpg

@@ -1,6 +1,6 @@
 /**
 ** File: modules.js
-** Version: 1.2.1
+** Version: 1.3
 ** Since: 1.0
 ** Author: en0ndev
 This file is part of Custom Profile Avatar.
@@ -19,40 +19,49 @@ You should have received a copy of the GNU General Public License
 along with Custom Profile Avatar.  If not, see <https://www.gnu.org/licenses/>.
 */
 
-jQuery(document).ready(function($) {
-    var mediaUploader;
-    $('#change').click(function(e) {
-        e.preventDefault();
-        // If the uploader object has already been created, reopen the dialog
-        if (mediaUploader) {
-            mediaUploader.open();
-            return;
-        }
-        // Extend the wp.media object
-        mediaUploader = wp.media.frames.file_frame = wp.media({
-            title: 'Choose Your Custom Profile Avatar',
-            button: {
-                text: 'Choose'
-            },
-            multiple: false,
-            library: {
-                type: ['image']
-            },
-        });
-        // When a file is selected, grab the URL and set it as the text field's value
-        mediaUploader.on('select', function() {
-            attachment = mediaUploader.state().get('selection').first().toJSON();
-            $('.user__avatar > .avatar').attr('src', attachment.url);
-            $('input[name="avatar__val"]').attr('value', attachment.url);
-            if (!$('.user__avatar').children().hasClass('remove')) { $('.user__avatar > .avatar').after('<div class="remove"></div>') };
-        });
-        // Open the uploader dialog
-        mediaUploader.open();
+jQuery(document).ready(function ($) {
+  var mediaUploader;
+  $("#change").click(function (e) {
+    e.preventDefault();
+    // If the uploader object has already been created, reopen the dialog
+    if (mediaUploader) {
+      mediaUploader.open();
+      return;
+    }
+    // Extend the wp.media object
+    mediaUploader = wp.media.frames.file_frame = wp.media({
+      title: "Choose Your Custom Profile Avatar",
+      button: {
+        text: "Choose",
+      },
+      multiple: false,
+      library: {
+        type: ["image"],
+      },
     });
-    $(document).on('click', '.remove', function() {
-        var pull = $('#pull > img').attr('src');
-        $('.user__avatar .avatar').attr('src', pull);
-        $('input[name="avatar__val"]').removeAttr('value');
-        $(this).remove();
+    // When a file is selected, grab the URL and set it as the text field's value
+    mediaUploader.on("select", function () {
+      attachment = mediaUploader.state().get("selection").first().toJSON();
+      $(".user__avatar > .avatar").attr("src", attachment.url);
+      $('input[name="avatar__val"]').attr("value", attachment.url);
+      if (!$(".user__avatar").children().hasClass("remove")) {
+        $(".user__avatar > .avatar").after('<div class="remove"></div>');
+      }
     });
-});
+    // Open the uploader dialog
+    mediaUploader.open();
+  });
+  $(document).on("click", ".remove", function () {
+    var pull = $("#pull > img").attr("src");
+    $(".user__avatar .avatar").attr("src", pull);
+    $('input[name="avatar__val"]').removeAttr("value");
+    $(this).remove();
+  });
+  $(document).on("click", "[name='disable__gravatar']", function () {
+    if ($(this).is(":checked")) {
+      $(".collapse__disable__avatar").fadeIn(500);
+    } else {
+      $(".collapse__disable__avatar").fadeOut(500);
+    }
+  });
+});