Skip to content

Commit 558afeb

Browse files
ChrompyCoderChrompyCoder
committed
theme changed
1 parent c027753 commit 558afeb

6 files changed

Lines changed: 594 additions & 58 deletions

File tree

‎AccessibilityScript.js‎

Lines changed: 105 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,105 @@
1+
const themeToggle = document.getElementById('theme-toggle');
2+
const contrastToggle = document.getElementById('contrast-toggle');
3+
const body = document.body;
4+
5+
themeToggle.addEventListener('click', function() {
6+
if (body.classList.contains('dark-theme')) {
7+
body.classList.remove('dark-theme');
8+
themeToggle.textContent = 'Dark Theme';
9+
updateCaretPattern('light');
10+
localStorage.setItem('theme', 'light');
11+
} else {
12+
body.classList.add('dark-theme');
13+
body.classList.remove('high-contrast');
14+
contrastToggle.textContent = 'High Contrast';
15+
themeToggle.textContent = 'Light Theme';
16+
updateCaretPattern('dark');
17+
localStorage.setItem('theme', 'dark');
18+
}
19+
});
20+
21+
contrastToggle.addEventListener('click', function() {
22+
if (body.classList.contains('high-contrast')) {
23+
body.classList.remove('high-contrast');
24+
contrastToggle.textContent = 'High Contrast';
25+
if (body.classList.contains('dark-theme')) {
26+
updateCaretPattern('dark');
27+
} else {
28+
updateCaretPattern('light');
29+
}
30+
} else {
31+
body.classList.add('high-contrast');
32+
body.classList.remove('dark-theme');
33+
themeToggle.textContent = 'Dark Theme';
34+
contrastToggle.textContent = 'Normal Contrast';
35+
updateCaretPattern('high-contrast');
36+
}
37+
});
38+
39+
function updateCaretPattern(theme) {
40+
let color1, color2;
41+
42+
if (theme === 'dark' || theme === 'high-contrast') {
43+
color1 = 'white';
44+
color2 = 'orange';
45+
} else {
46+
color1 = 'black';
47+
color2 = 'orange';
48+
}
49+
50+
const svgPattern = `
51+
<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" viewBox="0 0 200 200">
52+
<text x="50" y="100" font-size="50" fill="${color1}">^</text>
53+
<text x="38" y="100" font-size="50" fill="${color1}">.</text>
54+
<text x="15" y="100" font-size="50" fill="${color2}">^</text>
55+
</svg>
56+
`;
57+
const svgBase64 = btoa(svgPattern);
58+
const dataUrl = `url("data:image/svg+xml;base64,${svgBase64}")`;
59+
60+
document.body.style.backgroundImage = dataUrl;
61+
document.body.style.backgroundSize = '200px 200px';
62+
document.body.style.backgroundRepeat = 'repeat';
63+
document.body.style.backgroundPosition = '0 0';
64+
}
65+
66+
function changeFontSize(direction) {
67+
const htmlEl = document.documentElement;
68+
const currentSizeRem = parseFloat(getComputedStyle(htmlEl).fontSize) / 16; // Get current size in rem
69+
let newSizeRem;
70+
71+
if (direction === 'increase') {
72+
newSizeRem = currentSizeRem * 1.05; // Increase by 5%
73+
} else if (direction === 'decrease') {
74+
newSizeRem = currentSizeRem / 1.05; // Decrease by dividing by 1.05
75+
}
76+
77+
const maxSizeRem = 2.5;
78+
const minSizeRem = 0.7;
79+
if (newSizeRem > maxSizeRem) newSizeRem = maxSizeRem;
80+
if (newSizeRem < minSizeRem) newSizeRem = minSizeRem;
81+
82+
if (newSizeRem) {
83+
htmlEl.style.fontSize = newSizeRem + 'rem';
84+
}
85+
}
86+
87+
const increaseBtn = document.getElementById('increase-font');
88+
const decreaseBtn = document.getElementById('decrease-font');
89+
90+
if (increaseBtn) {
91+
increaseBtn.addEventListener('click', () => changeFontSize('increase'));
92+
}
93+
if (decreaseBtn) {
94+
decreaseBtn.addEventListener('click', () => changeFontSize('decrease'));
95+
}
96+
97+
document.addEventListener('DOMContentLoaded', function() {
98+
body.classList.add('dark-theme');
99+
themeToggle.textContent = 'Light Theme';
100+
updateCaretPattern('dark');
101+
});
102+
103+
body.classList.add('dark-theme');
104+
themeToggle.textContent = 'Light Theme';
105+
updateCaretPattern('dark');

‎blog/01.html‎

Lines changed: 78 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -1,48 +1,81 @@
1-
<! 01.Learning while i built a basic password manager>
2-
<!DOCTYPE html>
3-
<html>
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
5+
<title>Learning while building a basic password manager</title>
6+
<link rel="stylesheet" href="../style.css">
7+
</head>
8+
<body>
9+
<a href="#main-content" class="skip-link">Skip to main content</a>
410

5-
<head>
6-
<meta charset="utf-8">
7-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
8-
<title>Welcome file</title>
9-
<link rel="stylesheet" href="https://stackedit.io/style.css" />
10-
</head>
11+
<nav class="top-nav" aria-label="Main Navigation">
12+
<ul>
13+
<li><a href="../index.html">./home</a></li>
14+
<li><a href="../blog_index.html">./blog</a></li>
15+
<li><a href="../about.html">./about</a></li>
16+
</ul>
17+
</nav>
18+
<aside class="accessibility-controls" aria-labelledby="accessibility-heading">
19+
<h4 id="accessibility-heading">Accessibility</h4>
20+
<button id="theme-toggle">Light Theme</button>
21+
<button id="contrast-toggle">High Contrast</button>
22+
<button id="decrease-font" aria-label="Decrease font size">A-</button>
23+
<button id="increase-font" aria-label="Increase font size">A+</button>
24+
<p>Adjust settings</p>
25+
</aside>
1126

12-
<body class="stackedit">
13-
<div class="stackedit__html"><h1 id="learning-while-building-a-basic-password-manager">Learning while building a basic password manager</h1>
14-
<p>(my goal and approach)<br>
15-
Recently, i started working on a password manager( which uses hybrid encryption).</p>
16-
<p>The goal: Make a password manager in cpp which stores your password in an encrypted format in an executable file on your system but when you open the file, the contents should seem gibberish.</p>
17-
<p>The approach: Use an irreversible hashing function to store a common passkey in the file. Encrypt the username and password( which is different from the common passkey) of an application( let’s say github) using the common passkey and store it. So, the common passkey is not stored directly stored in the file.<br>
18-
Now every time you run the program, it will open the file, ask for the common passkey, hash it and match with the saved hash, if correct, decrypt the username and password stored and display it.</p>
19-
<h2 id="lets-begin-building">Let’s begin building</h2>
20-
<p>When i started building it, i developed a logic with a pen and paper. It was <code>supposed</code> to be really simple and easy.</p>
21-
<h3 id="few-bugs-and-a-feature">Few bugs and a feature?</h3>
22-
<p>(discovering a weird feature and reporting my first issue on github)</p>
23-
<p>I recently learned about VIM and started using it as by <em>go to</em> IDE, so i needed to get accustomed to the shortcuts.<br>
24-
I use WSL2 with zsh and ohmyzsh! framework.<br>
25-
Now, if you don’t know, all the terminals do not add a new line when a command execution ends. So if your code contains <code>cout&lt;&lt;"bye";</code> at the end, it will print “bye” and the prompt for the next command will continue from the same line( which is annoying to be honest). And this is the case with most of the terminals( <em>PowerShell</em>, <code>BASH</code>, <code>Cygwin terminal</code>, etc.).<br>
26-
But not <code>zsh</code>. They add a new line to the output by default and move the prompt to a new line, but they add a <code>%</code> at the end of the output to indicate it.<br>
27-
At first, i thought it was due to a bug on my program. And when i was discussing this with someone they said, "Oh, its cause you didn’t add the new line, try <code>cout&lt;&lt;"bye"&lt;&lt;endl;</code>". And it worked. Then on doing some research i found out that’s a <code>feature</code> of <code>zsh</code>, thanks to an <a href="https://www.reddit.com/r/zsh/comments/60lo09/why_does_zsh_print_after_my_program_output/?rdt=35258">old ass reddit post.</a></p>
28-
<p>When you are using something new, you tend to explore it right and observe every small thing related to them. Well that is exactly what was happened with me.<br>
29-
When my code base started to get big, and whenever i needed to refer a part of the code, it was very annoying to scroll things so stated using <code>tmux</code> with multiple panes.<br>
30-
Now with this beautiful set up, i fired up VIM and started working on the project but i noticed few bugs with VIM related to line wrapping. And when i searched if such issue has been reported in the past, i visited VIM’s github page and searched for the keywords related to the bug. I did not find any issue reported regarding this. So i successfully reported an <a href="https://github.com/vim/vim/issues/14181">issue on github.</a></p>
31-
<h3 id="uhg-librarys">Uhg! Library’s</h3>
32-
<p>Another problem which i faced was finding a suitable library for hashing. I tried many library’s from github which promised to deliver the hashing i require, but either they were fake or the documentation was really shitty( even for popular libraries like <code>cryptoPP</code>).<br>
33-
(The following method is used only when i’m desperate) I even asked <code>Gemini</code> and <code>ChatGPT 3.5</code>.<br>
34-
But in vain.<br>
35-
And now, i will try <code>bcrypt</code> and see.</p>
36-
<p>Also, the cpp file handling documentation is shitty everywhere. Which is really unfortunate. When i wanted to know how to move my cursor back to the start of the file didn’t get many successful results from brave/google search engines. Or maybe i’m dumb and don’t know how to search.</p>
37-
<h3 id="time-waste-or-investment">Time waste or investment?</h3>
38-
<p>To encrypt the data, i used a method in which i take a character from the common passkey and the username/password and perform a operation involving the ASCII code of the characters.<br>
39-
I realized that not all the characters corresponding to a number in the ASCII series can be simply printed.<br>
40-
So the printable ASCII codes are in the range (32-127). So, the value of whatever function i use for the characters of the common passkey and the username/password must give a number between 32-127. For which the best function i could think of was taking the average of the ASCII value.<br>
41-
This idea took a long time to come in my mind. You may think of some other idea but remember you need to know how to back-track also as you will be to decrypt the text while retrieving the data later.</p>
42-
<h3 id="phew-must-have-been-one-heck-of-a-read">Phew! Must have been one heck of a read</h3>
43-
<p><a href="https://chrompycoder.github.io/blog/Edit_this_page.html">Edit this blog</a>.</p>
44-
<p>@San</p>
45-
</div>
46-
</body>
27+
<main id="main-content" class="content-container">
28+
<h1>Learning while building a basic password manager</h1>
29+
30+
<p>(my goal and approach)<br>
31+
Recently, i started working on a password manager (which uses hybrid encryption).</p>
32+
33+
<p>The goal: Make a password manager in cpp which stores your password in an encrypted format in an executable file on your system but when you open the file, the contents should seem gibberish.</p>
34+
35+
<p>The approach: Use an irreversible hashing function to store a common passkey in the file. Encrypt the username and password (which is different from the common passkey) of an application (let's say github) using the common passkey and store it. So, the common passkey is not stored directly stored in the file.<br>
36+
Now every time you run the program, it will open the file, ask for the common passkey, hash it and match with the saved hash, if correct, decrypt the username and password stored and display it.</p>
37+
38+
<h2>Let's begin building</h2>
39+
40+
<p>When i started building it, i developed a logic with a pen and paper. It was <code>supposed</code> to be really simple and easy.</p>
41+
42+
<h3>Few bugs and a feature?</h3>
43+
44+
<p>(discovering a weird feature and reporting my first issue on github)</p>
45+
46+
<p>I recently learned about VIM and started using it as by <em>go to</em> IDE, so i needed to get accustomed to the shortcuts.<br>
47+
I use WSL2 with zsh and ohmyzsh! framework.<br>
48+
Now, if you don't know, all the terminals do not add a new line when a command execution ends. So if your code contains <code>cout&lt;&lt;"bye";</code> at the end, it will print "bye" and the prompt for the next command will continue from the same line (which is annoying to be honest). And this is the case with most of the terminals (<em>PowerShell</em>, <code>BASH</code>, <code>Cygwin terminal</code>, etc.).<br>
49+
But not <code>zsh</code>. They add a new line to the output by default and move the prompt to a new line, but they add a <code>%</code> at the end of the output to indicate it.<br>
50+
At first, i thought it was due to a bug on my program. And when i was discussing this with someone they said, "Oh, its cause you didn't add the new line, try <code>cout&lt;&lt;"bye"&lt;&lt;endl;</code>". And it worked. Then on doing some research i found out that's a <code>feature</code> of <code>zsh</code>, thanks to an <a href="https://www.reddit.com/r/zsh/comments/60lo09/why_does_zsh_print_after_my_program_output/?rdt=35258">old ass reddit post.</a></p>
51+
52+
<p>When you are using something new, you tend to explore it right and observe every small thing related to them. Well that is exactly what was happened with me.<br>
53+
When my code base started to get big, and whenever i needed to refer a part of the code, it was very annoying to scroll things so stated using <code>tmux</code> with multiple panes.<br>
54+
Now with this beautiful set up, i fired up VIM and started working on the project but i noticed few bugs with VIM related to line wrapping. And when i searched if such issue has been reported in the past, i visited VIM's github page and searched for the keywords related to the bug. I did not find any issue reported regarding this. So i successfully reported an <a href="https://github.com/vim/vim/issues/14181">issue on github.</a></p>
55+
56+
<h3>Uhg! Library's</h3>
57+
58+
<p>Another problem which i faced was finding a suitable library for hashing. I tried many library's from github which promised to deliver the hashing i require, but either they were fake or the documentation was really shitty (even for popular libraries like <code>cryptoPP</code>).<br>
59+
(The following method is used only when i'm desperate) I even asked <code>Gemini</code> and <code>ChatGPT 3.5</code>.<br>
60+
But in vain.<br>
61+
And now, i will try <code>bcrypt</code> and see.</p>
62+
63+
<p>Also, the cpp file handling documentation is shitty everywhere. Which is really unfortunate. When i wanted to know how to move my cursor back to the start of the file didn't get many successful results from brave/google search engines. Or maybe i'm dumb and don't know how to search.</p>
64+
65+
<h3>Time waste or investment?</h3>
66+
67+
<p>To encrypt the data, i used a method in which i take a character from the common passkey and the username/password and perform a operation involving the ASCII code of the characters.<br>
68+
I realized that not all the characters corresponding to a number in the ASCII series can be simply printed.<br>
69+
So the printable ASCII codes are in the range (32-127). So, the value of whatever function i use for the characters of the common passkey and the username/password must give a number between 32-127. For which the best function i could think of was taking the average of the ASCII value.<br>
70+
This idea took a long time to come in my mind. You may think of some other idea but remember you need to know how to back-track also as you will be to decrypt the text while retrieving the data later.</p>
71+
72+
<h3>Phew! Must have been one heck of a read</h3>
73+
74+
<p><a href="https://chrompycoder.github.io/blog/Edit_this_page.html">Edit this blog</a>.</p>
75+
76+
<p>@San</p>
77+
</main>
4778

48-
</html>
79+
<script src="../AccessibilityScript.js"> </script>
80+
</body>
81+
</html>

‎blog_index.html‎

Lines changed: 74 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Blog Index - Batsite</title>
7+
<link rel="stylesheet" href="style.css">
8+
</head>
9+
<body>
10+
<a href="#main-content" class="skip-link">Skip to main content</a>
11+
12+
<nav class="top-nav" aria-label="Main Navigation">
13+
<ul>
14+
<li><a href="./index.html">./home</a></li>
15+
<li><a href="./blog_index.html">./blog</a></li>
16+
<li><a href="./about.html">./about</a></li>
17+
</ul>
18+
</nav>
19+
20+
<aside class="accessibility-controls" aria-labelledby="accessibility-heading">
21+
<h4 id="accessibility-heading">Accessibility</h4>
22+
<button id="theme-toggle">Light Theme</button>
23+
<button id="contrast-toggle">High Contrast</button>
24+
<button id="decrease-font" aria-label="Decrease font size">A-</button>
25+
<button id="increase-font" aria-label="Increase font size">A+</button>
26+
<p>Adjust settings</p>
27+
</aside>
28+
29+
<div class="content-container">
30+
<main id="main-content">
31+
<header>
32+
<h1>Blog Posts</h1>
33+
<p>Hush, im doing this na.</p>
34+
</header>
35+
36+
<section aria-labelledby="blog-list-heading">
37+
<h2 id="blog-list-heading" class="sr-only">List of Blog Posts</h2>
38+
39+
<ul class="blog-list">
40+
<li class="blog-item">
41+
<h3 class="blog-title"><a href="./blog/01.html">Learning while building a basic password manager</a></h3>
42+
<!-- <div class="blog-meta">
43+
<span class="date">April 15, 2025</span> | <span class="category">Accessibility</span>
44+
</div> -->
45+
<p class="blog-excerpt">Things i learnt from my first project, a swifty password manager.</p>
46+
<a href="./blog/01.html" class="read-more">Read more →</a>
47+
</li>
48+
</ul>
49+
</section>
50+
<header>
51+
<h1>Community Blog Posts</h1>
52+
<p>Clink.</p>
53+
</header>
54+
55+
<section aria-labelledby="blog-list-heading">
56+
<h2 id="blog-list-heading" class="sr-only">List of Blog Posts</h2>
57+
58+
<ul class="blog-list">
59+
<li class="blog-item">
60+
<h3 class="blog-title"><a href="https://mukticommunity.github.io/learning_exp/2024/10/23/The-chain-of-topics.html">The Learning conondrum</a></h3>
61+
<!-- <div class="blog-meta">
62+
<span class="date">April 15, 2025</span> | <span class="category">Accessibility</span>
63+
</div> -->
64+
<p class="blog-excerpt">How i learn things.</p>
65+
<a href="https://mukticommunity.github.io/learning_exp/2024/10/23/The-chain-of-topics.html" class="read-more">Read more →</a>
66+
</li>
67+
</ul>
68+
</section>
69+
</main>
70+
</div>
71+
72+
<script src="./AccessibilityScript.js"> </script>
73+
</body>
74+
</html>

‎desktop.ini‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
[.ShellClassInfo]
2+
IconResource=C:\Windows\System32\SHELL32.dll,12
3+
[ViewState]
4+
Mode=
5+
Vid=
6+
FolderType=Generic

0 commit comments

Comments
 (0)