theshtify 1.0.4 → 2.0.0

package/.claude/settings.local.json

@@ -0,0 +1,8 @@
+{
+  "permissions": {
+    "allow": [
+      "Bash(npm create vite@latest:*)",
+      "Bash(npm install:*)"
+    ]
+  }
+}

package/LICENSE

@@ -1,21 +1,21 @@
-MIT License
-
-Copyright (c) 2024 thesharsol
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
+MIT License
+
+Copyright (c) 2024 thesharsol
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/css/theshtify.css

@@ -1,41 +1,51 @@
-.notif {
-  width: 30%;
-  position: absolute;
-  padding: 10px 20px;
-  background-color: white;
-  font-family: "nunito";
-  border-radius: 5px;
-  box-shadow: 0px 0px 10px silver;
-  opacity: 0;
-  color: white;
-  z-index: 2000;
-}
-
-.notif.warning {
-  background-color: #f89406;
-}
-
-.notif.danger {
-  background-color: red;
-}
-
-.notif.info {
-  background-color: rgba(7, 133, 250, 0.822);
-}
-
-.notif.success {
-  background-color: rgba(1, 191, 102, 0.822);
-}
-
-.close-icon:after {
-  display: inline-block;
-  content: "\00d7";
-  /* This will render the 'X' */
-
-}
-
-.Thesharsol-notifyer {
-  overflow: hidden;
-  padding: 2px;
-  transition: top linear 0.2s;
+.notif {
+  width: 30%;
+  position: absolute;
+  padding: 10px 20px;
+  background-color: white;
+  font-family: "nunito";
+  border-radius: 5px;
+  box-shadow: 0px 0px 10px silver;
+  opacity: 0;
+  color: white;
+  z-index: 2000;
+}
+
+.notif.warning {
+  background-color: #f89406;
+}
+
+.notif.danger {
+  background-color: red;
+}
+
+.notif.info {
+  background-color: rgba(7, 133, 250, 0.822);
+}
+
+.notif.success {
+  background-color: rgba(1, 191, 102, 0.822);
+}
+
+.close-icon:after {
+  display: inline-block;
+  content: "\00d7";
+  /* This will render the 'X' */
+
+}
+
+.Thesharsol-notifyer {
+  overflow: hidden;
+  padding: 2px;
+  transition: top linear 0.2s, opacity 0.15s ease-in;
+  opacity: 0;
+}
+
+.Thesharsol-notifyer.fade-out {
+  opacity: 0 !important;
+  transition: opacity 0.3s ease-out;
+}
+
+.Thesharsol-notifyer .progress .content {
+  transition: width linear;
 }

package/dist/assets/index-CGwBVT47.css

@@ -0,0 +1 @@
+.notif{width:30%;position:absolute;padding:10px 20px;background-color:#fff;font-family:nunito;border-radius:5px;box-shadow:0 0 10px silver;opacity:0;color:#fff;z-index:2000}.notif.warning{background-color:#f89406}.notif.danger{background-color:red}.notif.info{background-color:#0785fad2}.notif.success{background-color:#01bf66d2}.close-icon:after{display:inline-block;content:"×"}.Thesharsol-notifyer{overflow:hidden;padding:2px;transition:top linear .2s,opacity .15s ease-in;opacity:0}.Thesharsol-notifyer.fade-out{opacity:0!important;transition:opacity .3s ease-out}.Thesharsol-notifyer .progress .content{transition:width linear}

package/dist/index.html

@@ -0,0 +1,65 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>theshtify</title>
+    <link rel="stylesheet" crossorigin href="/assets/index-CGwBVT47.css">
+  </head>
+
+  <body>
+    <button id="notif_button" onclick="notify()">theshtify</button>
+  </body>
+  <script src="./lib/theshtifyCDN.js"></script>
+  <script>
+    function notify() {
+      let config = {
+        main_box_classes:'thesh',
+        x_align: "right",
+        y_align: "top",
+        duration: 5000,
+        font: {
+          size: 15,
+          weight: 100,
+          family: "sans-serif,arial",
+        },
+        padding:16,
+        custom_colors: {
+          success: {
+            bg: "#fff",
+            color: "#000",
+            border: {
+              type: "solid",
+              color: "#efefef",
+            },
+            progress: {
+              bg: "#E0BC29",
+            },
+          },
+          /** you can also add other types configs */
+        },
+        radius: 10,
+        bordered: false,
+        border_width: 1,
+        closer: false,
+        // progress: true,
+        progress_height: 2,
+      };
+      theshtify({
+        title:"Welcome Ivan",
+        message: "welcome to theshtify",
+        type: "success",
+        config: config,
+        callback: () => {
+          console.log("awesome callback");
+        },
+      });
+    }
+  </script>
+  <style>
+    .thesh{
+
+        box-shadow: 0px 0px 10px #efefef;
+    }
+  </style>
+</html>