this.me 2.8.3 → 2.8.5

package/README.md

@@ -1,66 +1,64 @@
 # This.Me  
-<img src="./cleak_me-removebg.png" alt="SVG Image" style="width:89px;">
-<img src="./this.me.png" alt="SVG Image" style="width:89px;">
+<img src="./docs/cleak_me-removebg.png" alt="SVG Image" style="width:89px;">
+<img src="./docs/this.me.png" alt="SVG Image" style="width:89px;">
 
-**This.Me** defines a digital identity through a cryptographic lens. Each user is equipped with a unique **'Me'** identity, secured by public-private key cryptography, enabling robust autonomous identity verification and transactional security.
+**This.Me** is a class focused on encapsulating user identity, specifically crafted to facilitate the creation of instances ready for hashing and cryptographic signature generation. It opens the door to coding and decoding through "me" signatures, offering a modular framework that prioritizes privacy and integrity in application-wide identity management.
 
-**This.Me** incorporates hashing for unimpeachable data integrity and digital signatures for undeniable authenticity. Users gain unparalleled control over their digital footprint, marking a shift towards a user-centric model of data management.
 
-In essence, **This.Me** grants users a self-sovereign digital identity, fully within their control and independent from external entities.
 
-### CLI Usage:
-Install globally to use `this.me` as a CLI tool:
+1. **Install `this.me`:**
+   Open your terminal and run the following command to install the `this.me` package:
 
-```js
-npm install -g this.me
-```
+   ```js
+   npm install this.me
+   ```
 
-Then, interact with `this.me` directly from your command line.
+2. **Import `Me` in Your Project:**
+   In the JavaScript file where you want to use `this.me`, import the `Me` class.
 
+   ```js
+   import Me from 'this.me';
+   ```
 
-### Usage in Node.js:
+3. **Create an Instance of `Me`:**
+   Instantiate the `Me` class with the required user details.
 
-## Installation
+   ```js
+   const user = new Me('John', 'Doe', '1990-01-01', 'password123', '1234');
+   ```
 
-```bash
-npm install this.me
-```
+4. **Validate and Use the Instance:**
+   Utilize the instance for user data validation and preparation for cryptographic actions.
 
-```js
-const ThisMe = require('this.me');
-// Create a new user identity
-const user = new ThisMe('John', 'Doe', '1990-01-01', 'mypassword123', '1234');
-// Retrieve the user's identity object
-const identityObject = user.getIdentityObject();
-```
+   ```js
+   try {
+       const identity = user.getMe();
+       // Ready for hashing and cryptographic signatures
+   } catch (error) {
+       console.error(error.message);
+       // Error handling for missing fields
+   }
+   ```
 
-## Core Principles
+This quick start guide provides a straightforward path to incorporating `this.me` into your project, enabling you to manage user identities and prepare them for secure cryptographic processes efficiently.
 
-- The `Me` class encapsulates personal information:
+-----
 
-name, 
-last name, 
-birthday,
-password, 
-PIN 
+# What is All.This?
+**This.me** serves as the **identity representation** in our system.
 
-This serves as the identity representation in our system.
+The `[all.this](https://www.neurons.me/what-is-all-this)` collection of packages, along with the proposed `cleaker` functionality, is an approach to create a modular system where each module (like `this.text`, `this.video`, `this.img`, etc.) (all.this family) represents a distinct data structure or class. These modules, when combined with `cleaker`, generate unique **public and private key pairs**, essentially giving each instance its cryptographic identity.
 
-The `all.this` collection of packages, along with the proposed `cleaker` functionality, is an approach to create a modular system where each module (like `this.text`, `this.video`, `this.img`, etc.) (all.this family) represents a distinct data structure or class. These modules, when combined with `cleaker`, generate unique **public and private key pairs**, essentially giving each instance its cryptographic identity.
-
-### Hashing and Digital Signatures
-
-**This.Me** leverages hashing to protect data integrity, with each transaction generating a unique, tamper-proof hash. Digital signatures, created using private keys, provide a layer of authenticity and non-repudiation, linking data unmistakably to its owner.
 
 ## Contextual Environment
-
 **This.Me** adapts to various environments, enabling `.me` objects to function both locally and within a network. A `.me` object authenticated on a network accesses data beyond the local scope, while unauthenticated instances are confined to local data. This dual functionality ensures seamless interoperability and heightened security.
 
 ## Setting up your Context. 	👋🏻👋🏼👋🏽👋🏾👋🏿
-
 Defining the **environment** and context in which your code runs, especially when you're interacting with intelligent agents or services like **me.**
 
 Having a clear declaration of the environment and the context can have a series of implications for security, interoperability, and clarity. The codebase is often vast, dynamic, and continually evolving. Given the dynamic nature of such environments, ensuring the integrity of the code and data becomes paramount. You wouldn't want an agent to execute or rely on code that has been tampered with or is different from the expected version. This is where hashing comes into play.
 
 `.me` objects to serve as both a local identity on the user's host machine and as an identity within a larger network. When a `.me` object is authenticated on a network, it can access data not only on the local host but also from other nodes within that network. Conversely, if it's not authenticated or recognized by the network, it should only access local data. 
 
+
+

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "this.me",
-  "version": "2.8.3",
+  "version": "2.8.5",
   "description": "User-Centric.",
   "type": "module",
   "main": "index.js",
@@ -8,7 +8,6 @@
     "start": "node index.js",
     "test": "test"
   },
-  "build": "browserify src/me.js -s Me -o dist/me.bundle.js",
   "keywords": [
     "this.me",
     "user"
@@ -25,6 +24,7 @@
   "author": "suiGn",
   "license": "MIT",
   "repoType": "NPM Package",
+  "category": "dataformatter",
   "dependencies": {
     "commander": "^11.1.0",
     "inquirer": "^9.2.12"

package/src/me.html

@@ -1,8 +1,390 @@
-<html>
-    <head>
-        <title>.me</title>
-    </head>
-    <body>
-        Hello, me!
-    </body>
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Neurons Gateway</title>
+    <style>
+        body, html {
+            height: 100%;
+            margin: 0;
+            font-family: Arial, sans-serif;
+            background: #e8e8e8;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            text-align: center;
+        }
+        .circle-container {
+            position: relative;
+        }
+        .button-circle {
+            border: none;
+            outline: none;
+            width: 300px;
+            height: 300px;
+            border-radius: 50%;
+            background: linear-gradient(145deg, #cacaca, #f0f0f0);
+            box-shadow:  20px 20px 60px #bebebe, 
+                         -20px -20px 60px #ffffff;
+            font-size: 5rem;
+            color: #555;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            cursor: pointer;
+            transition: background 0.3s ease-in-out;
+            position: relative; /* Needed for absolute positioning of child elements */
+        }
+        .button-circle:hover {
+            background: linear-gradient(145deg, #f0f0f0, #cacaca);
+        }
+        .button-circle:active {
+            background: #e0e0e0;
+        }
+        .plus-icon {
+            position: absolute;
+            top: -10px; /* Adjust to position the plus icon */
+            right: -10px; /* Adjust to position the plus icon */
+            width: 40px; /* Size of the plus icon */
+            height: 40px; /* Size of the plus icon */
+            background: #555;
+            color: white;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            border-radius: 50%;
+            font-size: 2rem;
+            cursor: pointer;
+        }
+        .plus-icon:before {
+            content: '+';
+            font-weight: bold;
+        }
+
+    /* The Modal (background) */
+    .modal-overlay {
+    display: none; /* Hidden by default */
+    position: fixed; /* Stay in place */
+    z-index: 2; /* Sit on top */
+    left: 0;
+    top: 0;
+    width: 100%; /* Full width */
+    height: 100%; /* Full height */
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background-color: transparent; /* No background color */
+}
+
+.modal-content {
+    background-color: #ffffff;
+    margin: auto; /* Centered in the viewport */
+    padding: 1rem 1rem;
+    border-radius: 8px; /* Rounded corners */
+    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
+    width: 20%; /* More compact width */
+    position: relative; /* For absolute positioning of children */
+    transform: translate(-50%, -50%);
+    top: 50%;
+    left: 50%;
+    text-align: left; /* Align text to the left */
+}
+
+.close-button {
+    color: #000000;
+    position: absolute;
+    top: 0.5rem;
+    right: 0.5rem;
+    font-size: 24px;
+    font-weight: bold;
+}
+
+.close-button:hover,
+.close-button:focus {
+    color: #555;
+    text-decoration: none;
+    cursor: pointer;
+}
+
+.form-group {
+    margin-bottom: 0.5rem;
+}
+
+.form-group label {
+    display: block;
+    margin-bottom: 0.25rem; /* Less space between label and input */
+    color: #333;
+    font-weight: 600;
+}
+
+.form-group input {
+    width: 100%;
+    padding: 0.4rem; /* Less padding for a more compact look */
+    border: 1px solid #ccc;
+    border-radius: 4px; /* Slightly less rounded corners for a sharper look */
+}
+
+.form-group button {
+    width: 100%;
+    padding: 0.5rem;
+    background: #03354e; /* Updated button color */
+    color: white;
+    border: none;
+    border-radius: 4px; /* Consistent with input fields */
+    cursor: pointer;
+    font-weight: 600;
+    margin-top: 0.5rem; /* Added margin for spacing */
+}
+
+.form-group button:hover {
+    background-color: #36A166; /* Darker shade on hover */
+}
+
+.form-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+  border-radius: 50%; /* Make it circular */
+  overflow: hidden; /* Ensure contents respect the circle shape */
+  background: white; /* Match your circle background */
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Add some shadow if you like */
+}
+
+/* Style the form inside the expanded circle */
+.circle-form {
+  display: flex;
+  flex-direction: column;
+  width: 80%; /* Set a max width for the form */
+  margin: auto; /* Center the form */
+}
+
+.circle-form input,
+.circle-form button {
+  margin: 10px;
+  padding: 10px;
+  width: 80%; /* Adjust width to not touch the border */
+  border: 1px solid #ccc;
+  border-radius: 20px; /* Rounded corners */
+}
+/* Add styles for the content inside the small circle */
+.circle-content {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100%;
+}
+
+.circle-form button {
+  background: #03354e; /* Updated button color */
+  color: white;
+  border: none;
+  cursor: pointer;
+  font-weight: 600;
+}
+
+/* When collapsed, you want the small-circle to go back to original size */
+.small-circle:not(.expanded-circle) {
+  transition: transform 0.5s ease-in-out, z-index 0s, width 0.5s, height 0.5s;
+}
+
+/* small circle */
+.small-circle {
+    position: absolute;
+    bottom: -15px; /* Adjust to stick to the circumference */
+    right: -15px; /* Adjust to stick to the circumference */
+    width: 80px; /* Size of the small circle */
+    height: 80px; /* Size of the small circle */
+    border-radius: 50%;
+    background: #FFF;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-size: 1rem;
+    color: #555;
+    cursor: pointer;
+    transform-origin: center; /* Ensures scaling is centered */
+     z-index: 10; /* Ensure it's above other content but below the modal overlay */
+     transition: transform 0.3s ease, width 0.3s ease, height 0.3s ease;
+  overflow: hidden; /* Hide the overflow during transition */
+}
+
+
+/* Style adjustments for the hover effect on the small circle */
+.small-circle:hover {
+    background: #f2f2f2;
+}
+
+.expanded-circle {
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  width: 300px;
+  height: 300px;
+  border-radius: 150px; /* Half of width and height to maintain circle shape */
+  z-index: 20; /* Above small-circle z-index */
+  /* Rest of your styles */
+}
+/* Overlay to close the expanded circle */
+.circle-overlay {
+  display: none;
+  position: fixed;
+  z-index: 15; /* Between the small circle and the expanded circle */
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent background */
+}
+
+/* Define a CSS class for the expanded state */
+.small-circle.expanded {
+  width: 300px; /* New width for the expanded state */
+  height: 300px; /* New height for the expanded state */
+  border-radius: 50%;
+  position: absolute;
+  transform: translate(-50%, -50%) scale(1); /* Adjust the scale as needed */
+  top: 50%; /* Center vertically */
+  left: 50%; /* Center horizontally */
+}
+
+    /* Adjustments for smaller screens */
+        @media (max-width: 768px) {
+            .button-circle {
+                width: 200px;
+                height: 200px;
+                font-size: 3rem;
+            }
+            .plus-icon {
+                width: 30px;
+                height: 30px;
+                font-size: 1.5rem;
+            }
+            .modal-content {
+        width: 90%;
+    }
+            
+        }
+       
+    </style>
+</head>
+<body>
+    <div class="circle-container">
+        <button class="button-circle">.me</button>
+        <div class="plus-icon" onclick="showModal('modal_add_me')"></div>
+        <div class="small-circle" id="001">.me</div> <!-- Small circle -->
+        <div class="small-circle" id="002">.me</div> <!-- Small circle -->
+        <div class="small-circle" id="004" onclick="toggleCircle(this)">
+            <div class="circle-content">.me</div>
+          </div>
+    </div>
+
+    <div id="modal_add_me" class="modal-overlay" style="display:none;">
+        <div class="modal-content">
+            <span class="close-button" onclick="closeModal('modal_add_me')">&times;</span>
+            <h2>Add .me</h2>
+            <form id="loginForm">
+            <div class="form-group">
+            <input type="text" id="username" name="username" placeholder="Username" required>
+            </div>
+            <div class="form-group">
+            <input type="password" id="password" name="password" placeholder="Password" required>
+            </div>
+            <div class="form-group">
+            <input type="text" inputmode="numeric" pattern="[0-9]*" id="pin" name="pin" placeholder="PIN" required>
+            </div>
+            <div class="form-group">
+            <button type="submit">Submit</button>
+            </div>
+            </form>
+        </div>
+    </div>
+
+    <script>
+
+// Add the overlay to the HTML
+document.body.insertAdjacentHTML('beforeend', '<div class="circle-overlay" onclick="collapseAllCircles()"></div>');
+// Function to collapse all circles when overlay is clicked
+function collapseAllCircles() {
+  document.querySelectorAll('.small-circle.expanded-circle').forEach(collapseCircle);
+  hideOverlay();
+}
+
+        // MODALS
+        function showModal(modalID) {
+            document.getElementById(modalID).style.display = "block";
+        }
+
+        function closeModal(modalID) {
+            document.getElementById(modalID).style.display = "none";
+        }
+
+ // When the User Clicks Anywhere in the Window.
+    window.onclick = function(event) {
+    var modal = document.getElementById('modal_add_me');
+        if (event.target == modal) {
+                closeModal();
+            }
+        }
+    // Add event listener for form submission
+    document.getElementById('loginForm').addEventListener('submit', function(event) {
+    event.preventDefault(); // Prevent the default form submit action
+        // Collect the form data
+        var username = document.getElementById('username').value;
+        var password = document.getElementById('password').value;
+        var pin = document.getElementById('pin').value;
+        // TODO: Implement your logic to handle the login data, like sending it to a server
+        console.log('Form Submitted!', { username, password, pin });
+        // Optionally close the modal after form submission
+        closeModal();
+    });
+
+    // Function to position small circles
+function positionSmallCircles() {
+  const bigCircle = document.querySelector('.button-circle');
+  const radius = bigCircle.offsetWidth / 2; // Radius of the big circle
+  const smallCircles = document.querySelectorAll('.small-circle');
+  smallCircles.forEach((circle, index) => {
+    const total = smallCircles.length;
+    const angle = (index / total) * (2 * Math.PI); // Angle in radians
+    const circleRadius = circle.offsetWidth / 2; // Radius of the small circle
+    // Cartesian coordinates
+    const x = radius + radius * Math.cos(angle) - circleRadius;
+    const y = radius + radius * Math.sin(angle) - circleRadius;
+    // Apply the position
+    circle.style.right = 'auto';
+    circle.style.bottom = 'auto';
+    circle.style.left = `${x}px`;
+    circle.style.top = `${y}px`;
+  });
+}
+
+
+// Function to toggle the expanded state of the circle
+function toggleCircle(circle) {
+  var isExpanded = circle.classList.contains('expanded');
+  if (isExpanded) {
+    // Collapse the circle
+    circle.classList.remove('expanded');
+    circle.innerHTML = '<div class="circle-content">.me</div>';
+  } else {
+    // Expand the circle
+    circle.classList.add('expanded');
+    circle.innerHTML = `
+      <form class="circle-form" onsubmit="submitForm(event, this)">
+        <input type="text" id="username" placeholder="Username" required />
+        <input type="password" id="password" placeholder="Password" required />
+        <input type="text" id="pin" placeholder="PIN" required />
+        <button type="submit">Submit</button>
+      </form>
+    `;
+  }
+}
+
+// Call this function on load to position small circles correctly
+positionSmallCircles();
+    </script>
+</body>
 </html>

package/nino.js

@@ -1,2 +0,0 @@
-
-

package/src/searchImages.js

@@ -1,31 +0,0 @@
-/**
- * Filters and displays images based on the user's search input.
- * It searches through the filenames of the images in each gallery.
- * The function is case-insensitive and matches any part of the filename.
- * 
- * @example
- * // Assuming there's an input field with id 'searchInput' and images in galleries.
- * // User types 'example' in the search input.
- * searchImages();
- * // Images with 'example' in their filenames will be displayed.
- */
-function searchImages() {
-    var input, filter, gallery, img, src, i;
-    input = document.getElementById("searchInput");
-    filter = input.value.toUpperCase();
-    gallery = document.getElementsByClassName("gallery");
-
-    for (var g = 0; g < gallery.length; g++) {
-        img = gallery[g].getElementsByTagName("img");
-
-        for (i = 0; i < img.length; i++) {
-            src = img[i].src;
-            var fileName = src.substring(src.lastIndexOf('/') + 1);
-            if (fileName.toUpperCase().indexOf(filter) > -1) {
-                img[i].style.display = "";
-            } else {
-                img[i].style.display = "none";
-            }
-        }
-    }
-}