release

.gitignore

@@ -0,0 +1 @@
+.DS_Store

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.

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);
+}

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;
+}());