diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..496ee2c
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1 @@
+.DS_Store
\ No newline at end of file
diff --git a/README.md b/README.md
new file mode 100644
index 0000000..0f8b372
--- /dev/null
+++ b/README.md
@@ -0,0 +1,18 @@
+# Copper
+### Copper: A Minimalistic Front-End Framework
+
+Copper is a lightweight front-end framework designed for simplicity and efficiency in modern web development. Striving for minimalism, Copper offers essential tools and features to streamline the creation of web interfaces while maintaining a lightweight footprint.
+
+## Key Features of Copper:
+
+1. Minimal JavaScript Scripts: Copper includes two minimal JavaScript scripts to enhance user interaction. These scripts provide basic functionalities such as form validation and simple DOM manipulation, ensuring a smooth and intuitive user experience without unnecessary complexity.
+
+2. Minimalist Styling: Copper follows a minimalist approach to styling, using a simple :root selector to define basic styling properties such as font families, sizes, and spacing. This minimalist styling ensures a clean and consistent appearance across all elements of the interface without overwhelming developers with excessive styling options.
+
+## Customization and Adaptability:
+
+While Copper emphasizes simplicity, it still offers flexibility for customization to suit individual project requirements. Developers can easily adjust the styling properties defined in the :root selector to match their preferred color scheme or typography choices, providing a tailored look and feel without sacrificing the framework's minimalist ethos.
+
+## Conclusion:
+
+In conclusion, Copper is a minimalist front-end framework that prioritizes simplicity and efficiency in web development. With its lightweight JavaScript scripts and minimalist styling approach, Copper provides the essential tools needed to create modern and responsive web interfaces without unnecessary complexity. Whether building a small personal website or a minimalist web application, Copper offers a lightweight and streamlined solution for front-end development needs.
\ No newline at end of file
diff --git a/dist/css/copper.css b/dist/css/copper.css
new file mode 100644
index 0000000..c3c9a94
--- /dev/null
+++ b/dist/css/copper.css
@@ -0,0 +1,138 @@
+:root {
+    --cu-red: #ffc7b8;
+    --cu-blue: #c2d4ff;
+    --cu-green: #c2e0c2;
+    --cu-yellow: #fff5c2;
+    --cu-purple: #d2b8ff;
+    --cu-orange: #ffccae;
+    --cu-cyan: #b8e9ed;
+    --cu-pink: #ffb8d9;
+
+    --cu-red-secondary: #ff9980;
+    --cu-blue-secondary: #a6c5ff;
+    --cu-green-secondary: #9fd59f;
+    --cu-yellow-secondary: #fff099;
+    --cu-purple-secondary: #b38cff;
+    --cu-orange-secondary: #ffae80;
+    --cu-cyan-secondary: #80ccd9;
+    --cu-pink-secondary: #ff80bf;
+
+    --cu-white: #ffffff;
+    --cu-gray-lightest: #f9f9f9;
+    --cu-gray-lighter: #e5e5e5;
+    --cu-gray-light: #cccccc;
+    --cu-gray-medium: #999999;
+    --cu-gray-dark: #666666;
+    --cu-gray-darker: #333333;
+    --cu-dark-blue: #16202b;
+    --cu-black: #000000;
+
+    --text-color: var(--cu-dark-blue);
+    --bg-color: var(--cu-gray-lightest);
+}
+
+/* Light Mode Styles */
+[data-cu-theme="light"] {
+    --text-color: var(--text-color);
+}
+
+/* Dark Mode Styles */
+[data-cu-theme="dark"] {
+    --bg-color: var(--cu-gray-darker);
+    --text-color: var(--cu-gray-lightest);
+}
+
+html {
+    scroll-behavior: smooth;
+}
+
+body {
+    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+    margin: 0;
+    background-color: var(--bg-color);
+    color: var(--text-color);
+}
+
+.cu-w {
+    color: var(--cu-white);
+}
+
+.cu-b {
+    color: var(--cu-black);
+}
+
+.b {
+    font-weight: bold;
+}
+
+.alert-w {
+    margin: 20px;
+    padding: 20px;
+    border-radius: 20px;
+    background-color: var(--cu-red);
+    border: 2px solid var(--cu-red-secondary);
+}
+
+.alert-w b {
+    color: var(--cu-gray-dark);
+}
+
+.alert-w a {
+    color: var(--cu-gray-dark);
+}
+
+.display {
+    position: relative;
+    margin: 10px;
+    padding: 20px;
+    background-color: var(--cu-gray-dark);
+    color: var(--cu-orange);
+    border-radius: 20px;
+    border: 2px solid var(--cu-gray-medium);
+}
+
+.header-f {
+    width: 100%;
+    z-index: 100;
+    position: fixed;
+    top: 0;
+}
+
+.jc-center, .jc-c {
+    display: flex;
+    justify-content: center;
+}
+
+.jc-space-around, .jc-sa {
+    display: flex;
+    justify-content:space-around;
+}
+
+.jc-space-between, .jc-sb {
+    display: flex;
+    justify-content: space-between;
+}
+
+.d-f {
+    display: flex;
+}
+
+.d-b {
+    display: block;
+}
+
+.td-none, .td-n {
+    text-decoration: none;
+}
+
+.td-underline, .td-u {
+    text-decoration: underline;
+}
+
+a {
+    color: var(--cu-gray-dark);
+}
+
+a:hover {
+    color: var(--cu-gray-darker);
+}
\ No newline at end of file
diff --git a/dist/css/copper.min.css b/dist/css/copper.min.css
new file mode 100644
index 0000000..73fc140
--- /dev/null
+++ b/dist/css/copper.min.css
@@ -0,0 +1 @@
+:root{--cu-red:#ffc7b8;--cu-blue:#c2d4ff;--cu-green:#c2e0c2;--cu-yellow:#fff5c2;--cu-purple:#d2b8ff;--cu-orange:#ffccae;--cu-cyan:#b8e9ed;--cu-pink:#ffb8d9;--cu-red-secondary:#ff9980;--cu-blue-secondary:#a6c5ff;--cu-green-secondary:#9fd59f;--cu-yellow-secondary:#fff099;--cu-purple-secondary:#b38cff;--cu-orange-secondary:#ffae80;--cu-cyan-secondary:#80ccd9;--cu-pink-secondary:#ff80bf;--cu-white:#ffffff;--cu-gray-lightest:#f9f9f9;--cu-gray-lighter:#e5e5e5;--cu-gray-light:#cccccc;--cu-gray-medium:#999999;--cu-gray-dark:#666666;--cu-gray-darker:#333333;--cu-dark-blue:#16202b;--cu-black:#000000;--text-color:var(--cu-dark-blue);--bg-color:var(--cu-gray-lightest);}/*LightModeStyles*/[data-cu-theme="light"]{--text-color:var(--text-color);}/*DarkModeStyles*/[data-cu-theme="dark"]{--bg-color:var(--cu-gray-darker);--text-color:var(--cu-gray-lightest);}html{scroll-behavior:smooth;}body{font-family:system-ui,-apple-system,"SegoeUI",Roboto,"HelveticaNeue","NotoSans","LiberationSans",Arial,sans-serif,"AppleColorEmoji","SegoeUIEmoji","SegoeUISymbol","NotoColorEmoji";margin:0;background-color:var(--bg-color);color:var(--text-color);}.cu-w{color:var(--cu-white);}.cu-b{color:var(--cu-black);}.b{font-weight:bold;}.alert-w{margin:20px;padding:20px;border-radius:20px;background-color:var(--cu-red);border:2pxsolidvar(--cu-red-secondary);}.alert-wb{color:var(--cu-gray-dark);}.alert-wa{color:var(--cu-gray-dark);}.display{position:relative;margin:10px;padding:20px;background-color:var(--cu-gray-dark);color:var(--cu-orange);border-radius:20px;border:2pxsolidvar(--cu-gray-medium);}.header-f{width:100%;z-index:100;position:fixed;top:0;}.jc-center,.jc-c{display:flex;justify-content:center;}.jc-space-around,.jc-sa{display:flex;justify-content:space-around;}.jc-space-between,.jc-sb{display:flex;justify-content:space-between;}.d-f{display:flex;}.d-b{display:block;}.td-none,.td-n{text-decoration:none;}.td-underline,.td-u{text-decoration:underline;}a{color:var(--cu-gray-dark);}a:hover{color:var(--cu-gray-darker);}
\ No newline at end of file
diff --git a/dist/js/copper.bundle.js b/dist/js/copper.bundle.js
new file mode 100644
index 0000000..fd5ec84
--- /dev/null
+++ b/dist/js/copper.bundle.js
@@ -0,0 +1,206 @@
+function toggleMode() {
+  const currentTheme = document.documentElement.getAttribute("data-cu-theme");
+  let newTheme;
+  if (currentTheme === "light") {
+    newTheme = "dark";
+  } else {
+    newTheme = "light";
+  }
+  setThemePreference(newTheme);
+}
+
+function setThemePreference(theme) {
+  document.documentElement.setAttribute("data-cu-theme", theme);
+  localStorage.setItem("theme", theme);
+}
+
+function setIconBasedOnTheme() {
+  const currentTheme = document.documentElement.getAttribute("data-cu-theme");
+  if (currentTheme === "dark") {
+  } else {
+  }
+}
+
+const currentTheme = localStorage.getItem("theme");
+if (!currentTheme) {
+  setThemePreference("dark");
+}
+setThemePreference(currentTheme || "light");
+setIconBasedOnTheme();
+
+function p(value) {
+  console.log(value);
+}
+
+function display(value) {
+  var display = `<div class="display" role="alert"><div>${value}</div></div>`;
+  document.body.insertAdjacentHTML("beforeend", display);
+}
+
+function clipboard(text) {
+  var dummy = document.createElement("textarea");
+  dummy.value = text;
+  document.body.appendChild(dummy);
+  dummy.select();
+  document.execCommand("copy");
+  document.body.removeChild(dummy);
+}
+
+function cu_import(scriptPath, attribute = "") {
+  return new Promise((resolve, reject) => {
+    const script = document.createElement("script");
+    script.src = scriptPath;
+    if (attribute) {
+      script.setAttribute(attribute, "");
+    }
+    script.onload = resolve;
+    script.onerror = reject;
+    document.head.appendChild(script);
+  });
+}
+
+class Params {
+  constructor(url) {
+    if (url) {
+      const urlObject = new URL(url);
+      this.urlPath = urlObject.pathname;
+      this.host = urlObject.host;
+      this.protocol = urlObject.protocol;
+      this.searchParams = urlObject.searchParams;
+      this.isExternal = true;
+    } else {
+      this.urlPath = window.location.pathname;
+      this.host = window.location.host;
+      this.protocol = window.location.protocol;
+      this.searchParams = new URLSearchParams(window.location.search);
+      this.isExternal = false;
+    }
+  }
+
+  get(query) {
+    return toBoolOrNull(this.searchParams.get(query));
+  }
+
+  is(key, value = null) {
+    if (value == null) {
+      if (this.searchParams.get(key) == null) {
+        return false;
+      } else {
+        return true;
+      }
+    } else {
+      if (!(this.searchParams.get(key) == null)) {
+        var vquery = this.searchParams.get(key);
+        if (toBoolOrNull(vquery) == value) {
+          return true;
+        } else return false;
+      } else return false;
+    }
+  }
+
+  add(array, goto = false) {
+    if (goto && this.isExternal) {
+      this.searchParams = new URLSearchParams();
+    } else if (goto && !this.isExternal) {
+      this.searchParams = new URLSearchParams(this.searchParams);
+    }
+
+    var data = array;
+    if (Array.isArray(data)) {
+      this.searchParams = new URLSearchParams();
+      data.forEach((param) => {
+        if ("name" in param && "value" in param) {
+          this.searchParams.set(param.name, param.value);
+        } else {
+          const key = Object.keys(param)[0];
+          this.searchParams.set(key, param[key]);
+        }
+      });
+    } else if (typeof data === "object") {
+      this.searchParams = new URLSearchParams();
+      for (const key in data) {
+        if (data.hasOwnProperty(key)) {
+          this.searchParams.set(key, data[key]);
+        }
+      }
+    }
+
+    if (!goto) {
+      const urlWithParams = `${this.protocol}//${this.host}${
+        this.urlPath
+      }?${this.searchParams.toString()}`;
+      console.log(urlWithParams);
+      return urlWithParams;
+    }
+
+    const urlWithParams = `${this.protocol}//${this.host}${
+      this.urlPath
+    }?${this.searchParams.toString()}`;
+    if (!this.isExternal) {
+      window.location.href = urlWithParams;
+    } else {
+      window.location.replace(urlWithParams);
+    }
+  }
+
+  all() {
+    return this.searchParams;
+  }
+}
+
+function toBoolOrNull(value) {
+  if (value === "true") {
+    return true;
+  } else if (value === "false") {
+    return false;
+  } else if (value === "null") {
+    return null;
+  } else if (!isNaN(value)) {
+    return parseFloat(value);
+  } else {
+    return value;
+  }
+}
+
+// @ts-nocheck
+var Jsapi = /** @class */ (function () {
+  function Jsapi(apiUrl, headers) {
+      if (headers === void 0) { headers = { 'Content-Type': 'application/json' }; }
+      this.apiUrl = apiUrl;
+      this.headers = headers;
+  }
+  Jsapi.prototype.getData = function () {
+      return fetch(this.apiUrl, {
+          headers: this.headers
+      })
+          .then(function (response) { return response.json(); })
+          .then(function (data) { return data; })["catch"](function (error) { return console.error('Error fetching data:', error); });
+  };
+  Jsapi.prototype.fetchData = function (method, data, url) {
+      if (method === void 0) { method = 'GET'; }
+      if (data === void 0) { data = null; }
+      if (url === void 0) { url = this.apiUrl; }
+      var options = {
+          method: method,
+          headers: this.headers
+      };
+      if (method !== 'GET' && data) {
+          options.body = JSON.stringify(data);
+      }
+      return fetch(url, options)
+          .then(function (response) { return response.json(); })
+          .then(function (data) { return data; })["catch"](function (error) { return console.error("Error ".concat(method.toLowerCase(), "ing data:"), error); });
+  };
+  Jsapi.prototype.attach = function (params, method, data) {
+      if (params === void 0) { params = {}; }
+      if (method === void 0) { method = 'GET'; }
+      if (data === void 0) { data = null; }
+      var url = this.apiUrl;
+      var queryString = Object.keys(params).map(function (key) { return "".concat(key, "=").concat(params[key]); }).join('&');
+      if (queryString) {
+          url += '?' + queryString;
+      }
+      return this.fetchData(method, data, url);
+  };
+  return Jsapi;
+}());
\ No newline at end of file
diff --git a/dist/js/copper.bundle.min.js b/dist/js/copper.bundle.min.js
new file mode 100644
index 0000000..5269d9a
--- /dev/null
+++ b/dist/js/copper.bundle.min.js
@@ -0,0 +1 @@
+function toggleMode(){let t=document.documentElement.getAttribute("data-cu-theme"),e;setThemePreference(e="light"===t?"dark":"light")}function setThemePreference(t){document.documentElement.setAttribute("data-cu-theme",t),localStorage.setItem("theme",t)}function setIconBasedOnTheme(){document.documentElement.getAttribute("data-cu-theme")}const currentTheme=localStorage.getItem("theme");function p(t){console.log(t)}function display(t){var e=`<div class="display" role="alert"><div>${t}</div></div>`;document.body.insertAdjacentHTML("beforeend",e)}function clipboard(t){var e=document.createElement("textarea");e.value=t,document.body.appendChild(e),e.select(),document.execCommand("copy"),document.body.removeChild(e)}function cu_import(t,e=""){return new Promise((r,a)=>{let n=document.createElement("script");n.src=t,e&&n.setAttribute(e,""),n.onload=r,n.onerror=a,document.head.appendChild(n)})}currentTheme||setThemePreference("dark"),setThemePreference(currentTheme||"light"),setIconBasedOnTheme();class Params{constructor(t){if(t){let e=new URL(t);this.urlPath=e.pathname,this.host=e.host,this.protocol=e.protocol,this.searchParams=e.searchParams,this.isExternal=!0}else this.urlPath=window.location.pathname,this.host=window.location.host,this.protocol=window.location.protocol,this.searchParams=new URLSearchParams(window.location.search),this.isExternal=!1}get(t){return toBoolOrNull(this.searchParams.get(t))}is(t,e=null){return null==e?null!=this.searchParams.get(t):null!=this.searchParams.get(t)&&toBoolOrNull(this.searchParams.get(t))==e}add(t,e=!1){e&&this.isExternal?this.searchParams=new URLSearchParams:e&&!this.isExternal&&(this.searchParams=new URLSearchParams(this.searchParams));var r=t;if(Array.isArray(r))this.searchParams=new URLSearchParams,r.forEach(t=>{if("name"in t&&"value"in t)this.searchParams.set(t.name,t.value);else{let e=Object.keys(t)[0];this.searchParams.set(e,t[e])}});else if("object"==typeof r)for(let a in this.searchParams=new URLSearchParams,r)r.hasOwnProperty(a)&&this.searchParams.set(a,r[a]);if(!e){let n=`${this.protocol}//${this.host}${this.urlPath}?${this.searchParams.toString()}`;return console.log(n),n}let s=`${this.protocol}//${this.host}${this.urlPath}?${this.searchParams.toString()}`;this.isExternal?window.location.replace(s):window.location.href=s}all(){return this.searchParams}}function toBoolOrNull(t){return"true"===t||"false"!==t&&("null"===t?null:isNaN(t)?t:parseFloat(t))}var Jsapi=function(){function t(t,e){void 0===e&&(e={"Content-Type":"application/json"}),this.apiUrl=t,this.headers=e}return t.prototype.getData=function(){return fetch(this.apiUrl,{headers:this.headers}).then(function(t){return t.json()}).then(function(t){return t}).catch(function(t){return console.error("Error fetching data:",t)})},t.prototype.fetchData=function(t,e,r){void 0===t&&(t="GET"),void 0===e&&(e=null),void 0===r&&(r=this.apiUrl);var a={method:t,headers:this.headers};return"GET"!==t&&e&&(a.body=JSON.stringify(e)),fetch(r,a).then(function(t){return t.json()}).then(function(t){return t}).catch(function(e){return console.error("Error ".concat(t.toLowerCase(),"ing data:"),e)})},t.prototype.attach=function(t,e,r){void 0===t&&(t={}),void 0===e&&(e="GET"),void 0===r&&(r=null);var a=this.apiUrl,n=Object.keys(t).map(function(e){return"".concat(e,"=").concat(t[e])}).join("&");return n&&(a+="?"+n),this.fetchData(e,r,a)},t}();
\ No newline at end of file
diff --git a/dist/js/copper.js b/dist/js/copper.js
new file mode 100644
index 0000000..d2b001c
--- /dev/null
+++ b/dist/js/copper.js
@@ -0,0 +1,59 @@
+function toggleMode() {
+  const currentTheme = document.documentElement.getAttribute('data-cu-theme');
+  let newTheme;
+  if (currentTheme === 'light') {
+      newTheme = 'dark';
+  } else {
+      newTheme = 'light';
+  }
+  setThemePreference(newTheme);
+}
+
+function setThemePreference(theme) {
+  document.documentElement.setAttribute('data-cu-theme', theme);
+  localStorage.setItem('theme', theme);
+}
+
+function setIconBasedOnTheme() {
+  const currentTheme = document.documentElement.getAttribute('data-cu-theme');
+  if (currentTheme === 'dark') {} else {}
+}
+
+const currentTheme = localStorage.getItem('theme');
+if (!currentTheme) {
+  setThemePreference('dark');
+}
+setThemePreference(currentTheme || 'light');
+setIconBasedOnTheme();
+
+
+function p(value) {
+  console.log(value);
+}
+
+function display(value) {
+  var display = `<div class="display" role="alert"><div>${value}</div></div>`;
+  document.body.insertAdjacentHTML("beforeend", display);
+}
+
+function clipboard(text) {
+  var dummy = document.createElement("textarea");
+  dummy.value = text;
+  document.body.appendChild(dummy);
+  dummy.select();
+  document.execCommand("copy");
+  document.body.removeChild(dummy);
+}
+
+function cu_import(scriptPath, attribute = "") {
+  return new Promise((resolve, reject) => {
+    const script = document.createElement("script");
+    script.src = scriptPath;
+    if (attribute) {
+      script.setAttribute(attribute, "");
+    }
+    script.onload = resolve;
+    script.onerror = reject; 
+    document.head.appendChild(script);
+  });
+}
\ No newline at end of file
diff --git a/dist/js/copper.min.js b/dist/js/copper.min.js
new file mode 100644
index 0000000..0f635ea
--- /dev/null
+++ b/dist/js/copper.min.js
@@ -0,0 +1 @@
+function toggleMode(){let e=document.documentElement.getAttribute("data-cu-theme"),t;setThemePreference(t="light"===e?"dark":"light")}function setThemePreference(e){document.documentElement.setAttribute("data-cu-theme",e),localStorage.setItem("theme",e)}function setIconBasedOnTheme(){document.documentElement.getAttribute("data-cu-theme")}const currentTheme=localStorage.getItem("theme");function p(e){console.log(e)}function display(e){var t=`<div class="display" role="alert"><div>${e}</div></div>`;document.body.insertAdjacentHTML("beforeend",t)}function clipboard(e){var t=document.createElement("textarea");t.value=e,document.body.appendChild(t),t.select(),document.execCommand("copy"),document.body.removeChild(t)}function cu_import(e,t=""){return new Promise((n,r)=>{let c=document.createElement("script");c.src=e,t&&c.setAttribute(t,""),c.onload=n,c.onerror=r,document.head.appendChild(c)})}currentTheme||setThemePreference("dark"),setThemePreference(currentTheme||"light"),setIconBasedOnTheme();
\ No newline at end of file
diff --git a/dist/js/jsapi.js b/dist/js/jsapi.js
new file mode 100644
index 0000000..3fdf151
--- /dev/null
+++ b/dist/js/jsapi.js
@@ -0,0 +1,42 @@
+// @ts-nocheck
+var Jsapi = /** @class */ (function () {
+    function Jsapi(apiUrl, headers) {
+        if (headers === void 0) { headers = { 'Content-Type': 'application/json' }; }
+        this.apiUrl = apiUrl;
+        this.headers = headers;
+    }
+    Jsapi.prototype.getData = function () {
+        return fetch(this.apiUrl, {
+            headers: this.headers
+        })
+            .then(function (response) { return response.json(); })
+            .then(function (data) { return data; })["catch"](function (error) { return console.error('Error fetching data:', error); });
+    };
+    Jsapi.prototype.fetchData = function (method, data, url) {
+        if (method === void 0) { method = 'GET'; }
+        if (data === void 0) { data = null; }
+        if (url === void 0) { url = this.apiUrl; }
+        var options = {
+            method: method,
+            headers: this.headers
+        };
+        if (method !== 'GET' && data) {
+            options.body = JSON.stringify(data);
+        }
+        return fetch(url, options)
+            .then(function (response) { return response.json(); })
+            .then(function (data) { return data; })["catch"](function (error) { return console.error("Error ".concat(method.toLowerCase(), "ing data:"), error); });
+    };
+    Jsapi.prototype.attach = function (params, method, data) {
+        if (params === void 0) { params = {}; }
+        if (method === void 0) { method = 'GET'; }
+        if (data === void 0) { data = null; }
+        var url = this.apiUrl;
+        var queryString = Object.keys(params).map(function (key) { return "".concat(key, "=").concat(params[key]); }).join('&');
+        if (queryString) {
+            url += '?' + queryString;
+        }
+        return this.fetchData(method, data, url);
+    };
+    return Jsapi;
+}());
diff --git a/dist/js/jsapi.min.js b/dist/js/jsapi.min.js
new file mode 100644
index 0000000..3006a3f
--- /dev/null
+++ b/dist/js/jsapi.min.js
@@ -0,0 +1 @@
+var Jsapi=function(){function t(t,n){void 0===n&&(n={"Content-Type":"application/json"}),this.apiUrl=t,this.headers=n}return t.prototype.getData=function(){return fetch(this.apiUrl,{headers:this.headers}).then(function(t){return t.json()}).then(function(t){return t}).catch(function(t){return console.error("Error fetching data:",t)})},t.prototype.fetchData=function(t,n,r){void 0===t&&(t="GET"),void 0===n&&(n=null),void 0===r&&(r=this.apiUrl);var o={method:t,headers:this.headers};return"GET"!==t&&n&&(o.body=JSON.stringify(n)),fetch(r,o).then(function(t){return t.json()}).then(function(t){return t}).catch(function(n){return console.error("Error ".concat(t.toLowerCase(),"ing data:"),n)})},t.prototype.attach=function(t,n,r){void 0===t&&(t={}),void 0===n&&(n="GET"),void 0===r&&(r=null);var o=this.apiUrl,e=Object.keys(t).map(function(n){return"".concat(n,"=").concat(t[n])}).join("&");return e&&(o+="?"+e),this.fetchData(n,r,o)},t}();
\ No newline at end of file
diff --git a/dist/js/jsapi.ts b/dist/js/jsapi.ts
new file mode 100644
index 0000000..e2fae48
--- /dev/null
+++ b/dist/js/jsapi.ts
@@ -0,0 +1,44 @@
+// @ts-nocheck
+class Jsapi {
+    private apiUrl: string;
+    private headers: Record<string, string>;
+    
+    constructor(apiUrl: string, headers: Record<string, string> = { 'Content-Type': 'application/json' }) {
+        this.apiUrl = apiUrl;
+        this.headers = headers;
+    }
+    
+    getData() {
+        return fetch(this.apiUrl, {
+            headers: this.headers
+        })
+            .then(response => response.json())
+            .then(data => data)
+            .catch(error => console.error('Error fetching data:', error));
+    }
+    
+    fetchData(method = 'GET', data = null, url = this.apiUrl) {
+        const options = {
+            method: method,
+            headers: this.headers
+        };
+    
+        if (method !== 'GET' && data) {
+            options.body = JSON.stringify(data);
+        }
+    
+        return fetch(url, options)
+            .then(response => response.json())
+            .then(data => data)
+            .catch(error => console.error(`Error ${method.toLowerCase()}ing data:`, error));
+    }
+    
+    attach(params = {}, method = 'GET', data = null) {
+        let url = this.apiUrl;
+        const queryString = Object.keys(params).map(key => `${key}=${params[key]}`).join('&');
+        if (queryString) {
+            url += '?' + queryString;
+        }
+        return this.fetchData(method, data, url);
+    }
+}
\ No newline at end of file
diff --git a/dist/js/params.js b/dist/js/params.js
new file mode 100644
index 0000000..8c8114c
--- /dev/null
+++ b/dist/js/params.js
@@ -0,0 +1,102 @@
+class Params {
+  constructor(url) {
+    if (url) {
+      const urlObject = new URL(url);
+      this.urlPath = urlObject.pathname;
+      this.host = urlObject.host;
+      this.protocol = urlObject.protocol;
+      this.searchParams = urlObject.searchParams;
+      this.isExternal = true;
+    } else {
+      this.urlPath = window.location.pathname;
+      this.host = window.location.host;
+      this.protocol = window.location.protocol;
+      this.searchParams = new URLSearchParams(window.location.search);
+      this.isExternal = false;
+    }
+  }
+
+  get(query) {
+    return toBoolOrNull(this.searchParams.get(query));
+  }
+
+  is(key, value = null) {
+    if (value == null) {
+      if (this.searchParams.get(key) == null) {
+        return false;
+      } else {
+        return true;
+      }
+    } else {
+      if (!(this.searchParams.get(key) == null)) {
+        var vquery = this.searchParams.get(key);
+        if (toBoolOrNull(vquery) == value) {
+          return true;
+        } else return false;
+      } else return false;
+    }
+  }
+
+  add(array, goto = false) {
+    if (goto && this.isExternal) {
+      this.searchParams = new URLSearchParams();
+    } else if (goto && !this.isExternal) {
+      this.searchParams = new URLSearchParams(this.searchParams);
+    }
+
+    var data = array;
+    if (Array.isArray(data)) {
+      this.searchParams = new URLSearchParams();
+      data.forEach((param) => {
+        if ("name" in param && "value" in param) {
+          this.searchParams.set(param.name, param.value);
+        } else {
+          const key = Object.keys(param)[0];
+          this.searchParams.set(key, param[key]);
+        }
+      });
+    } else if (typeof data === "object") {
+      this.searchParams = new URLSearchParams();
+      for (const key in data) {
+        if (data.hasOwnProperty(key)) {
+          this.searchParams.set(key, data[key]);
+        }
+      }
+    }
+
+    if (!goto) {
+      const urlWithParams = `${this.protocol}//${this.host}${
+        this.urlPath
+      }?${this.searchParams.toString()}`;
+      console.log(urlWithParams);
+      return urlWithParams;
+    }
+
+    const urlWithParams = `${this.protocol}//${this.host}${
+      this.urlPath
+    }?${this.searchParams.toString()}`;
+    if (!this.isExternal) {
+      window.location.href = urlWithParams;
+    } else {
+      window.location.replace(urlWithParams);
+    }
+  }
+
+  all() {
+    return this.searchParams;
+  }
+}
+
+function toBoolOrNull(value) {
+  if (value === "true") {
+    return true;
+  } else if (value === "false") {
+    return false;
+  } else if (value === "null") {
+    return null;
+  } else if (!isNaN(value)) {
+    return parseFloat(value);
+  } else {
+    return value;
+  }
+}
\ No newline at end of file
diff --git a/dist/js/params.min.js b/dist/js/params.min.js
new file mode 100644
index 0000000..b328abd
--- /dev/null
+++ b/dist/js/params.min.js
@@ -0,0 +1 @@
+class Params{constructor(s){if(s){let t=new URL(s);this.urlPath=t.pathname,this.host=t.host,this.protocol=t.protocol,this.searchParams=t.searchParams,this.isExternal=!0}else this.urlPath=window.location.pathname,this.host=window.location.host,this.protocol=window.location.protocol,this.searchParams=new URLSearchParams(window.location.search),this.isExternal=!1}get(s){return toBoolOrNull(this.searchParams.get(s))}is(s,t=null){return null==t?null!=this.searchParams.get(s):null!=this.searchParams.get(s)&&toBoolOrNull(this.searchParams.get(s))==t}add(s,t=!1){t&&this.isExternal?this.searchParams=new URLSearchParams:t&&!this.isExternal&&(this.searchParams=new URLSearchParams(this.searchParams));var a=s;if(Array.isArray(a))this.searchParams=new URLSearchParams,a.forEach(s=>{if("name"in s&&"value"in s)this.searchParams.set(s.name,s.value);else{let t=Object.keys(s)[0];this.searchParams.set(t,s[t])}});else if("object"==typeof a)for(let r in this.searchParams=new URLSearchParams,a)a.hasOwnProperty(r)&&this.searchParams.set(r,a[r]);if(!t){let e=`${this.protocol}//${this.host}${this.urlPath}?${this.searchParams.toString()}`;return console.log(e),e}let h=`${this.protocol}//${this.host}${this.urlPath}?${this.searchParams.toString()}`;this.isExternal?window.location.replace(h):window.location.href=h}all(){return this.searchParams}}function toBoolOrNull(s){return"true"===s||"false"!==s&&("null"===s?null:isNaN(s)?s:parseFloat(s))}
\ No newline at end of file
diff --git a/docs/copper.js.md b/docs/copper.js.md
new file mode 100644
index 0000000..bf47b34
--- /dev/null
+++ b/docs/copper.js.md
@@ -0,0 +1,47 @@
+# copper.js
+## toggleMode()
+
+This function toggles between light and dark themes by updating the theme preference stored in local storage and applying the corresponding theme to the document.
+
+```js
+toggleMode(); // Toggles between light and dark themes
+```
+
+## setThemePreference(theme)
+This function sets the theme preference and stores it in local storage.
+```js
+setThemePreference('light'); // Sets the theme preference to 'light'
+```
+
+## setIconBasedOnTheme()
+This function can be used to dynamically set icons based on the current theme. You can add your logic to this function as needed.
+
+```js
+setIconBasedOnTheme(); // Sets icons based on the current theme
+```
+
+## p(value)
+This function logs the provided value to the console.
+```js
+p("Hello, world!"); // Logs "Hello, world!" to the console
+```
+
+## display(value)
+This function displays the provided value in a div at the bottom of the page.
+```js
+display("Message displayed at the bottom!"); // Displays a message at the bottom of the page
+```
+
+## clipboard(text)
+This function copies the provided text to the clipboard.
+```js
+clipboard("Text to be copied to clipboard"); // Copies text to clipboard
+```
+
+## cu_import(scriptPath, attribute = "")
+This function dynamically imports a script with an optional attribute, such as 'async'.
+```js
+cu_import("exampleScript.js", "async"); // Dynamically imports a script with async attribute
+```
+
+These examples demonstrate the functionality of each function and how they can be used within your script to perform various tasks such as theme toggling, logging messages, displaying content, copying text to clipboard, and dynamically importing scripts.
\ No newline at end of file
diff --git a/docs/params.md b/docs/params.md
new file mode 100644
index 0000000..4772910
--- /dev/null
+++ b/docs/params.md
@@ -0,0 +1,58 @@
+# Params
+
+The Params class is a JavaScript utility class designed to facilitate the management and manipulation of URL parameters. It provides methods for initializing parameters based on either the current URL or a provided URL, retrieving parameter values, checking parameter existence and values, adding new parameters, and updating existing parameters. The class offers flexibility for handling both internal and external URLs.
+
+Key features of the Params class include:
+
+1. Initialization: The class can be initialized with either the current URL or a provided URL. When initialized, it extracts various components of the URL such as the pathname, host, protocol, and search parameters.
+
+2. Retrieval: It provides methods for retrieving parameter values based on their keys. These methods automatically convert parameter values to boolean values or null using a specified conversion function.
+
+3. Checking: The class allows for checking the existence of parameters and their values. The is method checks if a parameter exists and optionally verifies its value against a provided value.
+
+4. Modification: Parameters can be added or updated using the add method. This method accepts an array of parameter objects and optionally allows for reloading the page with the updated URL.
+
+5. Utility Functions: The class includes a utility function toBoolOrNull for converting parameter values to boolean values or null based on predefined rules.
+
+Overall, the Params class provides a convenient and efficient way to work with URL parameters in JavaScript applications, enabling developers to easily manipulate URLs and interact with query parameters.
+
+Example 1: Initialization based on the current URL
+```js
+const params = new Params();
+console.log(params.all()); // Returns all URL parameters as a JavaScript object
+console.log(params.get('param1')); // Returns the value of parameter 'param1', converted to a boolean value or null
+console.log(params.is('param2', true)); // Checks if the parameter 'param2' has the value 'true'
+```
+
+Example 2: Initialization based on a provided URL
+```js
+const url = 'https://example.com/path?param1=true&param2=false';
+const params = new Params(url);
+console.log(params.all()); // Returns all URL parameters as a JavaScript object
+console.log(params.get('param1')); // Returns the value of parameter 'param1', converted to a boolean value or null
+console.log(params.is('param2', false)); // Checks if the parameter 'param2' has the value 'false'
+```
+
+Example 3: Adding new parameters to the current URL
+```js
+const params = new Params();
+params.add([{ name: 'newParam', value: 'newValue' }]);
+// Updated URL and return the url
+```
+
+Example 4: Adding new parameters and reloading the page
+```js
+const params = new Params();
+params.add([{ name: 'newParam', value: 'newValue' }], true);
+// The page reloads with the updated URL
+```
+
+Example 5: Updating existing parameters and redirecting to an external URL
+```js
+const externalUrl = 'https://example.com/new-path';
+const params = new Params(externalUrl);
+params.add([{ name: 'param1', value: 'updatedValue' }], true);
+// The page redirects to the updated external URL
+```
+
+These are just a few examples of how you can utilize the Params class. With this class, you can read, check, update, and add new URL parameters, simplifying URL manipulation in JavaScript.
\ No newline at end of file