{"id":24200002,"url":"https://github.com/elhussin/static-apps","last_synced_at":"2026-04-27T01:31:33.049Z","repository":{"id":214180587,"uuid":"584202407","full_name":"Elhussin/static-apps","owner":"Elhussin","description":" Multi-Language Encoder/Decoder Tool  This project is a web-based tool that allows users to encode or decode text using Base64 encoding. It includes functionality for switching between Arabic and English languages, and provides options for copying the encoded/decoded result to the clipboard.","archived":false,"fork":false,"pushed_at":"2024-12-25T23:10:02.000Z","size":1393,"stargazers_count":0,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-07-04T11:05:18.714Z","etag":null,"topics":["css","decoder","html","javascript","uncode"],"latest_commit_sha":null,"homepage":"https://Elhussin.github.io/static-apps/","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Elhussin.png","metadata":{"files":{"readme":"README.MD","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-01-01T20:12:06.000Z","updated_at":"2024-12-25T23:27:45.000Z","dependencies_parsed_at":"2023-12-26T13:00:51.082Z","dependency_job_id":"ce8d79d7-96a0-41dd-9cf7-7908abd23e1a","html_url":"https://github.com/Elhussin/static-apps","commit_stats":null,"previous_names":["first-maker/static-wep-malti-langueg","elhussin/static-wep-malti-langueg","elhussin/static-apps"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/Elhussin/static-apps","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Elhussin%2Fstatic-apps","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Elhussin%2Fstatic-apps/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Elhussin%2Fstatic-apps/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Elhussin%2Fstatic-apps/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Elhussin","download_url":"https://codeload.github.com/Elhussin/static-apps/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Elhussin%2Fstatic-apps/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":263499192,"owners_count":23476021,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["css","decoder","html","javascript","uncode"],"created_at":"2025-01-13T20:40:18.703Z","updated_at":"2026-04-27T01:31:33.005Z","avatar_url":"https://github.com/Elhussin.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Multi-Language Encoder/Decoder Tool\n\nThis project is a web-based tool that allows users to encode or decode text using Base64 encoding. It includes functionality for switching between Arabic and English languages, and provides options for copying the encoded/decoded result to the clipboard. allows users to view the current time and date in real-time, change the background color of the webpage, and customize the background of a specific section.\n\n## Features\n\n- **Multi-Language Support**: Easily toggle between Arabic and English languages for the interface.\n- **Base64 Encoding/Decoding**: Encode input text or decode Base64 strings.\n- **Dynamic Output Updates**: Real-time updates of the output based on user input and selection.\n- **Copy to Clipboard**: One-click functionality to copy the output result.\n- **Code Editor with CodeMirror**: Integrated advanced code editor with syntax highlighting for JavaScript.\n- **Real-Time Time and Date Display**: Displays the current time and date and updates them every second.\n- **Background Color Customization**: Allows users to select a background color for the entire page and a separate background color for a specific section (`main2`).\n- **Responsive Layout**: The page layout adjusts based on the screen width, ensuring a good user experience on mobile devices.\n\n## Installation\n\n1. Clone the repository:\n   ```bash\n   git clone https://github.com/Elhussin/static-wep-malti-langueg.git\n   ```\n\n2. Navigate to the project directory:\n   ```bash\n   cd static-wep-malti-langueg\n   ```\n\n3. Open `index.html` in any modern browser to use the tool.\n\n## Usage\n\n### Language Toggle\n- Use the **\"Language\"** button to switch between Arabic and English.\n\n### Encoding/Decoding\n1. Enter the text you want to encode or decode in the input box.\n2. Click the corresponding **Encode** or **Decode** button.\n3. View the result in the output box.\n\n### Code Editing\n1. Write JavaScript code in the integrated editor.\n2. Click the **Run** button to execute the code and view the result below the editor.\n3. Use the **Clear** button to clear the editor and result.\n4. Click the **Undo** button to revert to a previous version of the code.\n\n### Copy Result\n- Click the **Copy Result** button to copy the output to the clipboard.\n\n### Clokc\n\n1. Clone or download the project files to your local machine.\n2. Open the `index.html` file in your browser.\n3. The page will display the current time and date, which will be updated every second.\n4. You can change the background color of the page and the `main2` section by using the color pickers.\n5. The layout will adapt to mobile devices by adjusting the width of the `main` section on smaller screens.\n\n## File Structure\n\n```\nproject-directory/\n├── index.html       # Main HTML file\n├── uncode.html      # Encoding/Decoding Html\n├── code.html        # Code Editing Html\n├── static\n    ├── style.css    # CSS for styling\n    ├── script.js    # JavaScript functionality\n    ├── code.js      # JavaScript Code Editing\n    ├── uncode.js    # JavaScript Encoding/Decoding\n├── README.md        # Project documentation\n```\n\n## Code Explanation\n\n### JavaScript Highlights\n\n- **Dynamic Language Switching**:\n  ```javascript\n  const languageToggle = document.getElementById(\"language-toggle\");\n  languageToggle.addEventListener(\"click\", () =\u003e {\n      const currentLang = document.documentElement.lang;\n      setLanguage(currentLang === \"en\" ? \"ar\" : \"en\");\n  });\n  ```\n\n- **Base64 Encoding/Decoding**:\n  ```javascript\n  encodeButton.addEventListener(\"click\", () =\u003e {\n      try {\n          outputField.value = btoa(inputField.value);\n      } catch (error) {\n          alert(\"Invalid characters for encoding.\");\n      }\n  });\n  \n  decodeButton.addEventListener(\"click\", () =\u003e {\n      try {\n          outputField.value = atob(inputField.value);\n      } catch (error) {\n          alert(\"Invalid Base64 string.\");\n      }\n  });\n  ```\n\n- **CodeMirror Integration**:\n  ```javascript\n  const editor = CodeMirror.fromTextArea(document.getElementById(\"code\"), {\n      mode: \"javascript\",\n      lineNumbers: true,\n      theme: \"monokai\",\n      autoCloseBrackets: true,\n      matchBrackets: true\n  });\n\n  document.getElementById(\"run\").onclick = () =\u003e {\n      const userCode = editor.getValue();\n      document.getElementById(\"rusalt\").innerHTML = userCode;\n  };\n  ```\n\n- **Copy to Clipboard**:\n  ```javascript\n  copyButton.addEventListener(\"click\", () =\u003e {\n      if (outputField.value) {\n          navigator.clipboard.writeText(outputField.value);\n          alert(\"Result copied to clipboard!\");\n      } else {\n          alert(\"Nothing to copy. Please generate a result first.\");\n      }\n  });\n  ```\n- **Time and Date Update**\n    - The time and date are updated dynamically using JavaScript and displayed in the `div_time` and `div_date` elements, respectively.\n    - The time is updated every second to keep it accurate.\n\n- **Background Color Customization**\n    - Users can choose a background color for the entire page using the color input (`\u003cinput type=\"color\" id=\"color\"\u003e`).\n    - Users can also customize the background color for the `main2` section with another color input (`\u003cinput type=\"color\" id=\"color2\"\u003e`).\n    - The selected colors are saved using `localStorage`, so the colors remain the same when the page is refreshed.\n\n\n## Contribution\n\nFeel free to fork the repository and submit pull requests for improvements or bug fixes.\n\n## License\n\nThis project is open-source and available under the [MIT License](LICENSE).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Felhussin%2Fstatic-apps","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Felhussin%2Fstatic-apps","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Felhussin%2Fstatic-apps/lists"}