Skip to content

Commit

Permalink
Update to 0.7 "Lumina"
Browse files Browse the repository at this point in the history 
- Now using Aeolus, Redesign
- Dark Mode
- Word Counter
- Confirm if you want to delete all
- Distraction Free Mode
- Better JS
- Placeholder
- Code Clean Up
& Others

Testing Ground "Markdown"
- Markdown Support
- Preview Markdown
  • Loading branch information
@GabsEdits
GabsEdits committed Oct 28, 2023
1 parent d660ddb commit 21f3e4e
Show file tree
Hide file tree
Showing 16 changed files with 837 additions and 819 deletions.
1 change: 1 addition & 0 deletions .gitignore
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
.vscode
276 changes: 52 additions & 224 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,244 +4,72 @@
Beta - v0.7 - v0.9
Stable v1.0+
-->

<!DOCTYPE html>
<html>
<html lang="en">
<head>
<link rel="stylesheet" href="./style.css">
<link rel="stylesheet" href="src/assets/css/main.css">
<link rel="preconnect" href="https://rsms.me/">
<link rel="stylesheet" href="https://rsms.me/inter/inter.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" />
<link rel="icon" type="image/png" sizes="180x180" href="/logo.png">
<link rel="icon" type="image/png" sizes="180x180" href="src/assets/images/logo.png">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>Keímeno</title>

</head>
<body>
<h1 style="font-weight: bolder;" id="hover-element">Keímeno</h1>
<p id="desc">Just Text. Just Notes. Save.</p>
<p id="version" onclick="toggleAMOLEDMode()">v0.5 Alpha</p>

<div id="editableArea" contenteditable="true" placeholder="Click and type your text here"></div>

<div class="under-construction"></div>
<p id="owner">Made with ❤️ by <span>Gabs</span></p>
<p class="footer-copyright">© 2023 Gabs/Gabriel Cozma. All rights reserved.</p>
<p class="github"><a href="https://github.com/GabsEdits/keimeno" aria-label="Check out the source code"><i class="fab fa-github"></i></a></p>

<div class="keyboard-shortcuts-toggle" onclick="toggleKeyboardShortcuts()">
<i class="fas fa-keyboard"></i>
</div>

<div class="keyboard-shortcut-modal-background" onclick="toggleKeyboardShortcuts()"></div>
<div class="keyboard-shortcuts-container">
<h2 class="keyboard-shortcuts-title">Keyboard Shortcuts</h2>
<div class="keyboard-shortcut">
<div class="keyboard-shortcut-key">Ctrl + B</div>
<div class="keyboard-shortcut-description">Toggle Bold</div>
<header>
<h1 style="font-weight: bolder;" id="hover-element">Keímeno</h1>
</header>

<main>
<div id="editableArea" contenteditable="true" placeholder="Hi"></div>
</main>

<section>
<div class="under-construction"></div>
</section>
<footer>
<p id="desc">Just Text. Just Notes. Save. Secure.</p>
<p id="version">v0.7 "Lumina"</p>
<p id="owner">Made with ❤️ by <a href="https://gabs.eu.org">Gabs</a></p>
<p class="footer-copyright">© 2023 Gabs/Gabriel Cozma. All rights reserved.</p>
<p class="github"><a href="https://github.com/GabsEdits/keimeno" aria-label="Check out the source code"><i
class="fab fa-github"></i></a></p>
</footer>

<aside>
<p id="wordCountDisplay">Words: <span class="wordCountDisplayNumber">0</span></p>
<div class="keyboard-shortcuts-toggle" onclick="toggleKeyboardShortcuts()">
<i class="fas fa-keyboard"></i>
</div>
<div class="keyboard-shortcut">
<div class="keyboard-shortcut-key">Ctrl + I</div>
<div class="keyboard-shortcut-description">Toggle Italic</div>
</div>
<div class="keyboard-shortcut">
<div class="keyboard-shortcut-key">Ctrl + Alt + Q</div>
<div class="keyboard-shortcut-description">Toggle Spoiler</div>
</div>
<div class="keyboard-shortcut">
<div class="keyboard-shortcut-key">Ctrl + Alt + C</div>
<div class="keyboard-shortcut-description">Clear All Text <span style="color: gray; font-size: 10px; text-align: left; font-weight: 600;">(Coming Soon)</span></div>

<div class="focus-toggle" onclick="toggleDistractionFreeMode()">
<i class="fas fa-eye"></i>
</div>

<div class="settings-modal-background" onclick="toggleSettingsContainer()"></div>
<div class="settings-container">
<h2 class="settings-title">Settings</h2>
<div class="setting">
<div class="setting-label">Dark Mode</div>
<div class="setting-toggle">
<input type="checkbox" id="darkModeToggle" onchange="toggleDarkMode()">
<label for="darkModeToggle"></label>
</div>
<div class="keyboard-shortcut-modal-background" onclick="toggleKeyboardShortcuts()"></div>
<div class="keyboard-shortcuts-container">
<h2 class="keyboard-shortcuts-title">Keyboard Shortcuts</h2>
<div class="keyboard-shortcut">
<div class="keyboard-shortcut-key">Ctrl + B</div>
<div class="keyboard-shortcut-description">Toggle Bold</div>
</div>
<div class="keyboard-shortcut">
<div class="keyboard-shortcut-key">Ctrl + I</div>
<div class="keyboard-shortcut-description">Toggle Italic</div>
</div>
<div class="keyboard-shortcut">
<div class="keyboard-shortcut-key">Ctrl + Alt + Q</div>
<div class="keyboard-shortcut-description">Toggle Spoiler</div>
</div>
<div class="setting">
<div class="setting-label">Notifications</div>
<div class="setting-toggle">
<input type="checkbox" id="notificationToggle" onchange="toggleNotifications()">
<label for="notificationToggle"></label>
</div>
<div class="keyboard-shortcut">
<div class="keyboard-shortcut-key">Alt + C</div>
<div class="keyboard-shortcut-description">Clear All Text</div>
</div>
</div>
<script>
// JavaScript code to enable the input field to display entered text
var editableArea = document.getElementById("editableArea");

// Load the saved text from local storage on page load
window.addEventListener("load", function () {
var savedText = localStorage.getItem("savedText");
if (savedText) {
editableArea.innerHTML = savedText;
}
});

// Save the text to local storage when the user types or makes changes
editableArea.addEventListener("input", function () {
var text = editableArea.innerHTML;
localStorage.setItem("savedText", text);
});


// Function to modify text on specific keystrokes
editableArea.addEventListener("keydown", function (event) {
// Check for bold keystrokes: Ctrl + B or Command + B
if ((event.ctrlKey || event.metaKey) && event.key === "b") {
event.preventDefault(); // Prevent the default browser behavior
document.execCommand("bold", false, null); // Toggle bold formatting
}

// Check for italic keystrokes: Ctrl + I or Command + I
if ((event.ctrlKey || event.metaKey) && event.key === "i") {
event.preventDefault(); // Prevent the default browser behavior
document.execCommand("italic", false, null); // Toggle italic formatting
}

// Prevent bold formatting when pressing Enter
if (event.key === "Enter") {
event.preventDefault(); // Prevent the default browser behavior
insertNewLine();
}
});

// Function to insert a new line at the current cursor position
function insertNewLine() {
var selection = window.getSelection();
var range = selection.getRangeAt(0);
var br = document.createElement("br");
range.insertNode(br);
range.collapse(false);
selection.removeAllRanges();
selection.addRange(range);
}

// Toggle AMOLED mode
function toggleAMOLEDMode() {
document.body.classList.toggle("amoled-mode");
}

// Function to clear all the text in the editable area
function clearText() {
editableArea.innerHTML = "";
}

// Attach the clearText() function to the logo click event
var logo = document.querySelector("h1");
logo.addEventListener("click", clearText);

function handleKeyDown(event) {
// Check if the Ctrl and Alt keys are pressed simultaneously and the C key is pressed
if (event.ctrlKey && event.altKey && event.key === "c") {
event.preventDefault(); // Prevent the default browser behavior
clearText(); // Call the clearText() function
}
}

// Attach the handleKeyDown() function to the keydown event on the document
document.addEventListener("keydown", handleKeyDown);

// Function to toggle the spoiler text
function toggleSpoiler() {
this.classList.toggle("revealed");
}

// Function to handle keydown event and check for the keyboard shortcut
function handleKeyDown(event) {
// Check if the Ctrl, Alt, and Q keys are pressed simultaneously
if (event.ctrlKey && event.altKey && event.key === "q") {
event.preventDefault(); // Prevent the default browser behavior
var selection = window.getSelection();
var range = selection.getRangeAt(0);

// Create a new span element with the spoiler class and replace the selected range with it
var spoiler = document.createElement("span");
spoiler.classList.add("spoiler");
spoiler.classList.add("revealed"); // Add the revealed class to immediately show the spoiler
spoiler.textContent = range.toString();
range.deleteContents();
range.insertNode(spoiler);

// Set the selection to the newly created spoiler element
range.selectNodeContents(spoiler);
selection.removeAllRanges();
selection.addRange(range);

// Attach the click event listener to the newly created spoiler element
spoiler.addEventListener("click", toggleSpoiler);
}
}

// Attach the handleKeyDown() function to the keydown event on the editable area
editableArea.addEventListener("keydown", handleKeyDown);

const hoverElement = document.getElementById('hover-element');
const originalColor = window.getComputedStyle(hoverElement).color;

hoverElement.addEventListener('mouseenter', function() {
const randomColor = getRandomColor();
hoverElement.style.color = randomColor;
});

hoverElement.addEventListener('mouseleave', function() {
hoverElement.style.color = originalColor;
});

function getRandomColor() {
const letters = '0123456789ABCDEF';
let color = '#';
for (let i = 0; i < 6; i++) {
color += letters[Math.floor(Math.random() * 16)];
}
return color;
}

function toggleKeyboardShortcuts() {
const modal = document.querySelector('.keyboard-shortcuts-container');
const modalBackground = document.querySelector('.keyboard-shortcut-modal-background');
modal.classList.toggle('show');
modalBackground.classList.toggle('show');
}


const settingsToggle = document.querySelector('.settings-toggle');
const keyboardToggle = document.querySelector('.keyboard-shortcuts-toggle');
const settingsContainer = document.querySelector('.settings-container');
const keyboardContainer = document.querySelector('.keyboard-shortcuts-container');
const settingsModalBackground = document.querySelector('.settings-modal-background');
const keyboardModalBackground = document.querySelector('.keyboard-shortcut-modal-background');

function toggleContainers(container) {
if (container === 'settings') {
settingsContainer.classList.toggle('show');
settingsModalBackground.classList.toggle('show');
keyboardContainer.classList.remove('show');
keyboardModalBackground.classList.remove('show');
} else if (container === 'keyboard') {
keyboardContainer.classList.toggle('show');
keyboardModalBackground.classList.toggle('show');
settingsContainer.classList.remove('show');
settingsModalBackground.classList.remove('show');
}
}

function handleOutsideClick(event) {
if (!settingsToggle.contains(event.target) && !settingsContainer.contains(event.target) &&
!keyboardToggle.contains(event.target) && !keyboardContainer.contains(event.target)) {
settingsContainer.classList.remove('show');
settingsModalBackground.classList.remove('show');
keyboardContainer.classList.remove('show');
keyboardModalBackground.classList.remove('show');
}
}

</script>
</aside>

</script>
<!-- Scripts -->
<script src="src/scripts/main.js"></script>
</body>
</html>
</html>
27 changes: 0 additions & 27 deletions logo-k.svg
View file

This file was deleted.

Binary file removed logo.png
View file
Binary file not shown.
59 changes: 59 additions & 0 deletions src/assets/css/color.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,59 @@
:root {
--aeo-c-white: #fff;
--aeo-c-white-soft: #f8f8f8;
--aeo-c-white-mute: #f2f2f2;
--aeo-c-white-7c: #ffffff7c;
--aeo-c-gray: #d9d9d9;

--aeo-c-black: #000;
--aeo-c-black-soft: #222222;
--aeo-c-black-mute: #282828;
--aeo-c-black-d6: #1e1e1ed6;
--aeo-c-dark-gray: #2c2c2c;
--aeo-c-erie-black: #181818;
--aeo-c-erie-black-soft: #1F1F1F;

--aeo-c-divider-light-1: rgba(60, 60, 60, 0.29);
--aeo-c-divider-light-2: rgba(60, 60, 60, 0.12);
--aeo-c-divider-dark-1: rgba(84, 84, 84, 0.65);
--aeo-c-divider-dark-2: rgba(84, 84, 84, 0.48);

--aeo-c-text-light-1: var(--aeo-c-black-mute);
--aeo-c-text-light-2: rgba(60, 60, 60, 0.66);
--aeo-c-text-dark-1: var(--aeo-c-white-mute);
--aeo-c-text-dark-2: rgba(235, 235, 235, 0.64);

--color-text: var(--aeo-c-text-light-1);
--color-text-dim: var(--aeo-c-divider-light-1);
}

:root {
--color-background: var(--aeo-c-white);
--color-background-soft: var(--aeo-c-white-soft);
--color-background-mute: var(--aeo-c-white-mute);
--color-background-header: var(--aeo-c-white-7c);
--color-background-text-area: var(--aeo-c-white-mute);
--color-background-focus: var(--aeo-c-gray);


--color-border: var(--aeo-c-divider-light-2);
--color-border-hover: var(--vt-c-divider-light-1);

--color-heading: var(--aeo-c-text-light-2);
}


@media (prefers-color-scheme: dark) {
:root {
--color-background-header: var(--aeo-c-black-d6);
--color-border: var(--aeo-c-divider-dark-2);
--color-text: var(--aeo-c-text-dark-1);
--color-text-dim: var(--aeo-c-divider-dark-1);
--color-background: var(--aeo-c-erie-black);
--color-background-soft: var(--aeo-c-black-soft);
--color-background-mute: var(--aeo-c-black-mute);
--color-background-text-area: var(--aeo-c-black-soft);
--color-background-focus: var(--color-background-text-area);
--color-heading: var(--aeo-c-text-dark-2)
}
}
Loading

0 comments on commit 21f3e4e

Please sign in to comment.