-
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.
Merge pull request #1 from TMHSDigital/Cutting-Edge-Theme
Cutting edge theme->>merge to main
- Loading branch information
Showing
12 changed files
with
331 additions
and
22 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-wrap; | ||
| 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
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,43 @@ | ||
| #qr-input, #qr-size, #qr-correction { | ||
| width: 100%; | ||
| background-color: #1f2937; | ||
| border: 1px solid #374151; | ||
| color: #fff; | ||
| padding: 0.5rem; | ||
| border-radius: 5px; | ||
| } | ||
|
|
||
| #qr-output { | ||
| display: flex; | ||
| justify-content: center; | ||
| margin-top: 1rem; | ||
| background-color: #fff; | ||
| padding: 1rem; | ||
| border-radius: 5px; | ||
| } | ||
|
|
||
| #download-link { | ||
| display: block; | ||
| margin-top: 1rem; | ||
| text-align: center; | ||
| } | ||
|
|
||
| .options-grid { | ||
| display: grid; | ||
| grid-template-columns: repeat(2, 1fr); | ||
| gap: 1rem; | ||
| margin-bottom: 1rem; | ||
| } | ||
|
|
||
| #qr-color, #qr-bg-color { | ||
| width: 100%; | ||
| height: 40px; | ||
| padding: 0; | ||
| border: none; | ||
| cursor: pointer; | ||
| } | ||
|
|
||
| #qr-rounded { | ||
| width: 20px; | ||
| height: 20px; | ||
| } |
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
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
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,18 @@ | ||
| 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('').map(char => { | ||
| const index = Math.floor(Math.random() * asciiChars.length); | ||
| return asciiChars[index]; | ||
| }).join(''); | ||
| } | ||
|
|
||
| convertButton.addEventListener('click', () => { | ||
| const inputText = textInput.value; | ||
| const asciiArt = inputText.split('\n').map(line => textToAscii(line)).join('\n'); | ||
| 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
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 |
|---|---|---|
| @@ -1,17 +1,30 @@ | ||
| document.addEventListener('DOMContentLoaded', (event) => { | ||
| const nav = document.getElementById('main-nav'); | ||
| nav.innerHTML = ` | ||
| <a href="../index.html">Home</a> | ||
| <a href="image-resizer.html">Image Resizer</a> | ||
| <a href="color-palette.html">Color Palette</a> | ||
| <a href="about.html">About</a> | ||
| `; | ||
| const currentPath = window.location.pathname; | ||
|
|
||
| // Adjust links if we're on the homepage | ||
| if (window.location.pathname.endsWith('index.html') || window.location.pathname.endsWith('/')) { | ||
| nav.innerHTML = nav.innerHTML.replace('../index.html', 'index.html'); | ||
| nav.innerHTML = nav.innerHTML.replace('image-resizer.html', 'pages/image-resizer.html'); | ||
| nav.innerHTML = nav.innerHTML.replace('color-palette.html', 'pages/color-palette.html'); | ||
| nav.innerHTML = nav.innerHTML.replace('about.html', 'pages/about.html'); | ||
| } | ||
| 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" }, | ||
| { href: "pages/about.html", text: "About" } | ||
| ]; | ||
|
|
||
| const navHTML = navItems.map(item => { | ||
| let href = item.href; | ||
| if (currentPath.includes('/pages/')) { | ||
| href = href.replace('pages/', ''); | ||
| if (item.href === 'index.html') { | ||
| href = '../' + href; | ||
| } | ||
| } else if (currentPath.endsWith('/') || currentPath.endsWith('index.html')) { | ||
| if (item.href !== 'index.html') { | ||
| href = 'pages/' + href.replace('pages/', ''); | ||
| } | ||
| } | ||
| return `<a href="${href}">${item.text}</a>`; | ||
| }).join(''); | ||
|
|
||
| nav.innerHTML = navHTML; | ||
| }); |
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,48 @@ | ||
| const qrInput = document.getElementById('qr-input'); | ||
| const qrSize = document.getElementById('qr-size'); | ||
| const qrCorrection = document.getElementById('qr-correction'); | ||
| const qrColor = document.getElementById('qr-color'); | ||
| const qrBgColor = document.getElementById('qr-bg-color'); | ||
| const qrRounded = document.getElementById('qr-rounded'); | ||
| 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) { | ||
| qrOutput.innerHTML = ''; // Clear previous QR code | ||
|
|
||
| qr = new QRCode(qrOutput, { | ||
| text: inputText, | ||
| width: parseInt(qrSize.value), | ||
| height: parseInt(qrSize.value), | ||
| colorDark: qrColor.value, | ||
| colorLight: qrBgColor.value, | ||
| correctLevel: QRCode.CorrectLevel[qrCorrection.value] | ||
| }); | ||
|
|
||
| // Apply rounded corners if selected | ||
| if (qrRounded.checked) { | ||
| setTimeout(() => { | ||
| const qrImage = qrOutput.querySelector('img'); | ||
| qrImage.style.borderRadius = '15px'; | ||
| }, 50); | ||
| } | ||
|
|
||
| // 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); | ||
| } | ||
| }); | ||
|
|
||
| // Update QR code in real-time as options change | ||
| [qrSize, qrCorrection, qrColor, qrBgColor, qrRounded].forEach(element => { | ||
| element.addEventListener('change', () => generateButton.click()); | ||
| }); |
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
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> |
Oops, something went wrong.