-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
2aef502
commit a26e58c
Showing
10 changed files
with
196 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,26 @@ | ||
.ascii-output { | ||
background-color: #1a1a1a; | ||
border: 1px solid #00fff2; | ||
border-radius: 5px; | ||
padding: 1rem; | ||
margin-top: 1rem; | ||
font-family: monospace; | ||
white-space: pre; | ||
overflow-x: auto; | ||
} | ||
|
||
#ascii-output { | ||
color: #00fff2; | ||
font-size: 0.8rem; | ||
line-height: 1; | ||
} | ||
|
||
#text-input { | ||
width: 100%; | ||
background-color: #1f2937; | ||
border: 1px solid #374151; | ||
color: #fff; | ||
padding: 0.5rem; | ||
border-radius: 5px; | ||
resize: vertical; | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,35 @@ | ||
<!DOCTYPE html> | ||
<html lang="en"> | ||
<head> | ||
<meta charset="UTF-8"> | ||
<meta name="viewport" content="width=device-width, initial-scale=1.0"> | ||
<title>ASCII Art Converter - Digital Services Hub</title> | ||
<link rel="stylesheet" href="../css/styles.css"> | ||
<link rel="stylesheet" href="../css/ascii-art.css"> | ||
</head> | ||
<body> | ||
<div class="container"> | ||
<h1 class="neon-text">ASCII Art Converter</h1> | ||
|
||
<nav id="main-nav"></nav> | ||
|
||
<div class="content"> | ||
<div class="input-group"> | ||
<label for="text-input">Enter your text:</label> | ||
<textarea id="text-input" rows="3" placeholder="Type your text here..."></textarea> | ||
</div> | ||
|
||
<button id="convert-button" class="tech-button">Convert to ASCII Art</button> | ||
|
||
<div id="output-container" class="ascii-output"> | ||
<pre id="ascii-output"></pre> | ||
</div> | ||
|
||
<p class="instructions">Enter your text and click 'Convert to ASCII Art' to see the result.</p> | ||
</div> | ||
</div> | ||
|
||
<script src="../js/common.js"></script> | ||
<script src="../js/ascii-art.js"></script> | ||
</body> | ||
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,19 @@ | ||
const textInput = document.getElementById('text-input'); | ||
const convertButton = document.getElementById('convert-button'); | ||
const asciiOutput = document.getElementById('ascii-output'); | ||
|
||
const asciiChars = ['@', '#', 'S', '%', '?', '*', '+', ';', ':', ',', '.']; | ||
|
||
function textToAscii(text) { | ||
return text.split('\n').map(line => | ||
line.split('').map(char => | ||
asciiChars[Math.floor(Math.random() * asciiChars.length)] | ||
).join('') | ||
).join('\n'); | ||
} | ||
|
||
convertButton.addEventListener('click', () => { | ||
const inputText = textInput.value; | ||
const asciiArt = textToAscii(inputText); | ||
asciiOutput.textContent = asciiArt; | ||
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,36 @@ | ||
<!DOCTYPE html> | ||
<html lang="en"> | ||
<head> | ||
<meta charset="UTF-8"> | ||
<meta name="viewport" content="width=device-width, initial-scale=1.0"> | ||
<title>QR Code Generator - Digital Services Hub</title> | ||
<link rel="stylesheet" href="../css/styles.css"> | ||
<link rel="stylesheet" href="../css/qr-generator.css"> | ||
<script src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js"></script> | ||
</head> | ||
<body> | ||
<div class="container"> | ||
<h1 class="neon-text">QR Code Generator</h1> | ||
|
||
<nav id="main-nav"></nav> | ||
|
||
<div class="content"> | ||
<div class="input-group"> | ||
<label for="qr-input">Enter text or URL:</label> | ||
<input type="text" id="qr-input" placeholder="Enter text or URL here"> | ||
</div> | ||
|
||
<button id="generate-button" class="tech-button">Generate QR Code</button> | ||
|
||
<div id="qr-output"></div> | ||
|
||
<a id="download-link" class="tech-button" style="display: none;">Download QR Code</a> | ||
|
||
<p class="instructions">Enter text or a URL and click 'Generate QR Code' to create your QR code.</p> | ||
</div> | ||
</div> | ||
|
||
<script src="../js/common.js"></script> | ||
<script src="../js/qr-generator.js"></script> | ||
</body> | ||
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,33 @@ | ||
const qrInput = document.getElementById('qr-input'); | ||
const generateButton = document.getElementById('generate-button'); | ||
const qrOutput = document.getElementById('qr-output'); | ||
const downloadLink = document.getElementById('download-link'); | ||
|
||
let qr = null; | ||
|
||
generateButton.addEventListener('click', () => { | ||
const inputText = qrInput.value; | ||
if (inputText) { | ||
if (qr) { | ||
qr.clear(); | ||
qr.makeCode(inputText); | ||
} else { | ||
qr = new QRCode(qrOutput, { | ||
text: inputText, | ||
width: 256, | ||
height: 256, | ||
colorDark: "#000000", | ||
colorLight: "#ffffff", | ||
correctLevel: QRCode.CorrectLevel.H | ||
}); | ||
} | ||
|
||
// Enable download after a short delay to ensure QR code is generated | ||
setTimeout(() => { | ||
const qrImage = qrOutput.querySelector('img'); | ||
downloadLink.href = qrImage.src; | ||
downloadLink.download = 'qrcode.png'; | ||
downloadLink.style.display = 'inline-block'; | ||
}, 100); | ||
} | ||
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,15 @@ | ||
document.addEventListener('DOMContentLoaded', (event) => { | ||
const nav = document.getElementById('main-nav'); | ||
const currentPath = window.location.pathname; | ||
|
||
const navItems = [ | ||
{ href: "index.html", text: "Home" }, | ||
{ href: "pages/image-resizer.html", text: "Image Resizer" }, | ||
{ href: "pages/color-palette.html", text: "Color Palette" }, | ||
{ href: "pages/ascii-art.html", text: "ASCII Art" }, | ||
{ href: "pages/qr-generator.html", text: "QR Code Generator" }, | ||
{ href: "pages/about.html", text: "About" } | ||
]; | ||
|
||
// ... rest of the code remains the same | ||
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,14 @@ | ||
document.addEventListener('DOMContentLoaded', (event) => { | ||
const nav = document.getElementById('main-nav'); | ||
const currentPath = window.location.pathname; | ||
|
||
const navItems = [ | ||
{ href: "index.html", text: "Home" }, | ||
{ href: "pages/image-resizer.html", text: "Image Resizer" }, | ||
{ href: "pages/color-palette.html", text: "Color Palette" }, | ||
{ href: "pages/ascii-art.html", text: "ASCII Art" }, | ||
{ href: "pages/about.html", text: "About" } | ||
]; | ||
|
||
// ... rest of the code remains the same | ||
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,3 @@ | ||
<!-- ... previous content ... --> | ||
<ul class="services-list"> | ||
<li><a href="pages/image-resizer.html">Futuristic Image Resizer</a></l |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,8 @@ | ||
<!-- ... previous content ... --> | ||
<ul class="services-list"> | ||
<li><a href="pages/image-resizer.html">Futuristic Image Resizer</a></li> | ||
<li><a href="pages/color-palette.html">Color Palette Generator</a></li> | ||
<li><a href="pages/ascii-art.html">ASCII Art Converter</a></li> | ||
<li><a href="pages/qr-generator.html">QR Code Generator</a></li> | ||
</ul> | ||
<!-- ... rest of the content ... --> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,7 @@ | ||
<!-- ... previous content ... --> | ||
<ul class="services-list"> | ||
<li><a href="pages/image-resizer.html">Futuristic Image Resizer</a></li> | ||
<li><a href="pages/color-palette.html">Color Palette Generator</a></li> | ||
<li><a href="pages/ascii-art.html">ASCII Art Converter</a></li> | ||
</ul> | ||
<!-- ... rest of the content ... --> |