Skip to content

Commit ecf50d0

Browse files
CodingTarikCodingTarik
committed
tools
1 parent be08183 commit ecf50d0

File tree

2 files changed

+337
-0
lines changed

2 files changed

+337
-0
lines changed

‎_posts/fun/2025-05-03-hidden-message.md

Lines changed: 209 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,209 @@
1+
---
2+
title: Emoji Nachricht Kodierer
3+
description: Verstecke deine Nachricht in Emojis!
4+
date: 2025-03-06T10:00:00.000Z
5+
tags:
6+
- emoji
7+
- coding
8+
- verschlüsselung
9+
categories:
10+
- tools
11+
- web
12+
---
13+
14+
<div class="emoji-container">
15+
<h1>Verstecke Nachrichten in Emojis</h1>
16+
17+
<label for="encodeInput">Gib deine Nachricht ein:</label>
18+
<textarea id="encodeInput" placeholder="Gib hier deine Nachricht ein"></textarea>
19+
20+
<div class="emoji-picker">
21+
<span onclick="setEmoji('😀')">😀</span>
22+
<span onclick="setEmoji('😎')">😎</span>
23+
<span onclick="setEmoji('😍')">😍</span>
24+
<span onclick="setEmoji('👍')">👍</span>
25+
<span onclick="setEmoji('💥')">💥</span>
26+
<span onclick="setEmoji('🎉')">🎉</span>
27+
<span onclick="setEmoji('💬')">💬</span>
28+
<span onclick="setEmoji('🌟')">🌟</span>
29+
</div>
30+
31+
<button onclick="encodeMessage()">Kodieren</button>
32+
33+
<h2>Versteckte Emoji-Nachricht:</h2>
34+
<p id="encodedMessage" class="encoded-output"></p>
35+
36+
<label for="decodeInput">Füge deine Emoji-Nachricht hier ein:</label>
37+
<textarea id="decodeInput" placeholder="Füge hier deine versteckte Emoji-Nachricht ein"></textarea>
38+
<button onclick="decodeMessage()">Dekodieren</button>
39+
40+
<h2>Dekodierte Nachricht:</h2>
41+
<p id="decodedMessage" class="decoded-output"></p>
42+
</div>
43+
44+
<script>
45+
const VARIATION_SELECTOR_START = 0xfe00;
46+
const VARIATION_SELECTOR_END = 0xfe0f;
47+
const VARIATION_SELECTOR_SUPPLEMENT_START = 0xe0100;
48+
const VARIATION_SELECTOR_SUPPLEMENT_END = 0xe01ef;
49+
50+
function toVariationSelector(byte) {
51+
if (byte >= 0 && byte < 16) {
52+
return String.fromCodePoint(VARIATION_SELECTOR_START + byte);
53+
} else if (byte >= 16 && byte < 256) {
54+
return String.fromCodePoint(VARIATION_SELECTOR_SUPPLEMENT_START + byte - 16);
55+
} else {
56+
return null;
57+
}
58+
}
59+
60+
function fromVariationSelector(codePoint) {
61+
if (codePoint >= VARIATION_SELECTOR_START && codePoint <= VARIATION_SELECTOR_END) {
62+
return codePoint - VARIATION_SELECTOR_START;
63+
} else if (codePoint >= VARIATION_SELECTOR_SUPPLEMENT_START && codePoint <= VARIATION_SELECTOR_SUPPLEMENT_END) {
64+
return codePoint - VARIATION_SELECTOR_SUPPLEMENT_START + 16;
65+
} else {
66+
return null;
67+
}
68+
}
69+
70+
function encode(emoji, text) {
71+
const bytes = new TextEncoder().encode(text);
72+
let encoded = emoji;
73+
74+
for (const byte of bytes) {
75+
encoded += toVariationSelector(byte);
76+
}
77+
78+
return encoded;
79+
}
80+
81+
function decode(text) {
82+
let decoded = [];
83+
const chars = Array.from(text);
84+
85+
for (const char of chars) {
86+
const byte = fromVariationSelector(char.codePointAt(0));
87+
88+
if (byte === null && decoded.length > 0) {
89+
break;
90+
} else if (byte === null) {
91+
continue;
92+
}
93+
94+
decoded.push(byte);
95+
}
96+
97+
let decodedArray = new Uint8Array(decoded);
98+
return new TextDecoder().decode(decodedArray);
99+
}
100+
101+
function encodeMessage() {
102+
const inputMessage = document.getElementById("encodeInput").value;
103+
const selectedEmoji = window.selectedEmoji || '😀';
104+
const encodedMessage = encode(selectedEmoji, inputMessage);
105+
document.getElementById("encodedMessage").textContent = encodedMessage;
106+
}
107+
108+
function decodeMessage() {
109+
const inputMessage = document.getElementById("decodeInput").value;
110+
const decodedMessage = decode(inputMessage);
111+
document.getElementById("decodedMessage").textContent = decodedMessage;
112+
}
113+
114+
function setEmoji(emoji) {
115+
window.selectedEmoji = emoji;
116+
}
117+
</script>
118+
119+
<style>
120+
/* Styles nur für diesen Blog-Post */
121+
.emoji-container {
122+
text-align: center;
123+
background: rgba(0, 0, 0, 0.6);
124+
padding: 30px;
125+
border-radius: 15px;
126+
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);
127+
width: 100%;
128+
max-width: 800px;
129+
margin: 0 auto;
130+
color: white;
131+
font-family: 'Roboto', sans-serif;
132+
}
133+
134+
h1 {
135+
font-size: 2.5rem;
136+
margin-bottom: 20px;
137+
font-weight: 700;
138+
}
139+
140+
h2 {
141+
font-size: 1.8rem;
142+
margin-top: 40px;
143+
}
144+
145+
textarea {
146+
width: 100%;
147+
height: 120px;
148+
padding: 10px;
149+
margin-top: 10px;
150+
font-size: 1rem;
151+
border-radius: 10px;
152+
border: 2px solid #ddd;
153+
background: #222;
154+
color: #fff;
155+
resize: none;
156+
font-family: 'Roboto', sans-serif;
157+
}
158+
159+
button {
160+
background-color: #4CAF50;
161+
color: white;
162+
border: none;
163+
padding: 10px 20px;
164+
font-size: 1rem;
165+
margin-top: 20px;
166+
border-radius: 5px;
167+
cursor: pointer;
168+
transition: background-color 0.3s ease;
169+
}
170+
171+
button:hover {
172+
background-color: #45a049;
173+
}
174+
175+
.emoji-picker {
176+
margin-top: 20px;
177+
font-size: 2rem;
178+
display: flex;
179+
justify-content: center;
180+
flex-wrap: wrap;
181+
gap: 10px;
182+
}
183+
184+
.emoji-picker span {
185+
cursor: pointer;
186+
transition: transform 0.3s ease;
187+
}
188+
189+
.emoji-picker span:hover {
190+
transform: scale(1.2);
191+
}
192+
193+
.encoded-output {
194+
background: rgba(255, 255, 255, 0.1);
195+
padding: 15px;
196+
margin-top: 20px;
197+
font-size: 1.2rem;
198+
border-radius: 10px;
199+
word-wrap: break-word;
200+
}
201+
202+
.decoded-output {
203+
background: rgba(255, 255, 255, 0.1);
204+
padding: 15px;
205+
margin-top: 20px;
206+
font-size: 1.2rem;
207+
border-radius: 10px;
208+
}
209+
</style>

‎_posts/fun/2025-05-03-qr-code-generator.md

Lines changed: 128 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,128 @@
1+
---
2+
title: QR Code Generator
3+
description: Generate QR codes for URLs, Text, WiFi, and vCards.
4+
date: 2025-03-06T10:00:00.000Z
5+
tags:
6+
- tools
7+
- technology
8+
- qr-codes
9+
categories:
10+
- utilities
11+
- web
12+
math: false
13+
---
14+
15+
# QR Code Generator
16+
17+
Create and download QR codes for various uses such as URLs, plain text, WiFi credentials, and even vCards.
18+
19+
## Generate Your QR Code
20+
21+
Enter the content you want to encode and select the type of QR code:
22+
23+
<form id="qrForm">
24+
<label for="qrInput">Content:</label>
25+
<input type="text" id="qrInput" placeholder="Enter URL, Text, WiFi credentials, or vCard info" required>
26+
27+
<label for="qrType">QR Code Type:</label>
28+
<select id="qrType">
29+
<option value="url">URL</option>
30+
<option value="text">Text</option>
31+
<option value="wifi">WiFi</option>
32+
<option value="vcard">vCard</option>
33+
</select>
34+
35+
<button type="submit">Generate QR Code</button>
36+
</form>
37+
38+
<div id="qrCodeContainer" style="margin-top: 20px;">
39+
<h2>Your QR Code:</h2>
40+
<div id="qrCodeOutput"></div>
41+
</div>
42+
43+
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
44+
<script src="https://cdn.rawgit.com/davidshimjs/qrcodejs/gh-pages/qrcode.min.js"></script>
45+
<script>
46+
$(document).ready(function() {
47+
$('#qrForm').submit(function(event) {
48+
event.preventDefault();
49+
50+
var content = $('#qrInput').val();
51+
var type = $('#qrType').val();
52+
53+
// Check if content is empty
54+
if (!content) {
55+
alert('Please enter some content to generate the QR code.');
56+
return;
57+
}
58+
59+
// Generate QR Code based on selected type
60+
var qrCode;
61+
if (type === 'wifi') {
62+
// WiFi QR Code format: WIFI:T:WPA;S:<SSID>;P:<password>;;
63+
var ssid = prompt("Enter your WiFi SSID");
64+
var password = prompt("Enter your WiFi password");
65+
content = `WIFI:T:WPA;S:${ssid};P:${password};;`;
66+
} else if (type === 'vcard') {
67+
// vCard format (simplified)
68+
var name = prompt("Enter name (e.g., John Doe)");
69+
var email = prompt("Enter email address (e.g., johndoe@example.com)");
70+
content = `BEGIN:VCARD\nVERSION:3.0\nFN:${name}\nEMAIL:${email}\nEND:VCARD`;
71+
}
72+
73+
// Clear previous QR Code
74+
$('#qrCodeOutput').empty();
75+
76+
// Create QR Code
77+
qrCode = new QRCode(document.getElementById('qrCodeOutput'), {
78+
text: content,
79+
width: 200,
80+
height: 200,
81+
colorDark : "#000000",
82+
colorLight : "#ffffff",
83+
correctLevel : QRCode.CorrectLevel.H
84+
});
85+
});
86+
});
87+
</script>
88+
89+
<style>
90+
#qrForm {
91+
text-align: center;
92+
padding: 20px;
93+
background-color: #f4f4f4;
94+
border-radius: 8px;
95+
margin-bottom: 20px;
96+
}
97+
98+
#qrForm input, #qrForm select {
99+
padding: 10px;
100+
margin: 10px 0;
101+
width: 80%;
102+
max-width: 400px;
103+
border: 1px solid #ddd;
104+
border-radius: 5px;
105+
}
106+
107+
#qrForm button {
108+
background-color: #4CAF50;
109+
color: white;
110+
padding: 10px 20px;
111+
border: none;
112+
border-radius: 5px;
113+
cursor: pointer;
114+
}
115+
116+
#qrForm button:hover {
117+
background-color: #45a049;
118+
}
119+
120+
#qrCodeContainer {
121+
text-align: center;
122+
}
123+
124+
#qrCodeOutput {
125+
margin-top: 20px;
126+
display: inline-block;
127+
}
128+
</style>

0 commit comments

Comments
 (0)