From 68a35fca605dca9e2c0c52b9e22ed3a61b81fdaf Mon Sep 17 00:00:00 2001 From: ahmadzaid1 <142598865+ahmadzaid1@users.noreply.github.com> Date: Sat, 4 Jan 2025 18:16:20 +0200 Subject: [PATCH] Delete cardMakerTool directory --- cardMakerTool/cardMaker.html | 112 ---------------- cardMakerTool/scripts.js | 203 ----------------------------- cardMakerTool/styles.css | 245 ----------------------------------- 3 files changed, 560 deletions(-) delete mode 100644 cardMakerTool/cardMaker.html delete mode 100644 cardMakerTool/scripts.js delete mode 100644 cardMakerTool/styles.css diff --git a/cardMakerTool/cardMaker.html b/cardMakerTool/cardMaker.html deleted file mode 100644 index 06eadeb..0000000 --- a/cardMakerTool/cardMaker.html +++ /dev/null @@ -1,112 +0,0 @@ - - - - - - - - Character Card Maker - - - -
-

Character Card Maker

-
-
- -
-
-

Export / Import

- - -
- -
- -
-

Image Attributes

- - - - - - -
- -
-

Character Attributes

- - - - - - - - - - - - - -
-
- -
- -
-
-
- -
-
-

-

-

-

-

-

-
-
- -
- -
-

Card Settings

- - - - - - - - -
- -
-
- - - - - diff --git a/cardMakerTool/scripts.js b/cardMakerTool/scripts.js deleted file mode 100644 index 9737c5f..0000000 --- a/cardMakerTool/scripts.js +++ /dev/null @@ -1,203 +0,0 @@ -const previewImage = document.getElementById('preview-image'); -const characterName = document.getElementById('character-name'); -const characterAge = document.getElementById('character-age'); -const characterRace = document.getElementById('character-race'); -const characterRaceOther = document.getElementById('character-race-other'); -const characterAppearance = document.getElementById('character-appearance'); -const characterOverview = document.getElementById('character-overview'); -const characterGoals = document.getElementById('character-goals'); -const cardBorderColor = document.getElementById('card-border-color'); -const fontSize = document.getElementById('font-size'); -const fontColor = document.getElementById('font-color'); -const fontStyle = document.getElementById('font-style'); -const card = document.getElementById('card'); -const exportBtn = document.getElementById('export-btn'); -const importBtn = document.getElementById('import-btn'); - -// Image handling -document.getElementById('character-image').addEventListener('change', function(event) { - const file = event.target.files[0]; - if (file) { - const reader = new FileReader(); - reader.onload = function(e) { - previewImage.src = e.target.result; - previewImage.style.display = 'block'; - }; - reader.readAsDataURL(file); - } -}); - -document.getElementById('image-size').addEventListener('input', function(event) { - previewImage.style.width = event.target.value + 'px'; - previewImage.style.height = event.target.value + 'px'; -}); - -document.getElementById('image-shape').addEventListener('change', function(event) { - previewImage.style.borderRadius = event.target.value === 'circle' ? '50%' : '0'; -}); - -// Preview text updates -characterName.addEventListener('input', () => { - document.getElementById('preview-name').textContent = characterName.value; -}); - -characterAge.addEventListener('input', () => { - document.getElementById('preview-age').textContent = characterAge.value ? `Age: ${characterAge.value}` : ''; -}); - -// Race handling with custom option -characterRace.addEventListener('change', () => { - if (characterRace.value === 'custom') { - characterRaceOther.style.display = 'block'; - document.getElementById('preview-race').textContent = characterRaceOther.value ? `Race: ${characterRaceOther.value}` : 'Race: Custom'; - } else { - characterRaceOther.style.display = 'none'; - document.getElementById('preview-race').textContent = `Race: ${characterRace.value}`; - } -}); - -characterRaceOther.addEventListener('input', () => { - if (characterRace.value === 'custom') { - document.getElementById('preview-race').textContent = `Race: ${characterRaceOther.value}`; - } -}); - -// Character details updates -characterAppearance.addEventListener('input', () => { - document.getElementById('preview-appearance').textContent = characterAppearance.value ? `Appearance: ${characterAppearance.value}` : ''; -}); - -characterOverview.addEventListener('input', () => { - document.getElementById('preview-overview').textContent = characterOverview.value ? `Overview: ${characterOverview.value}` : ''; -}); - -characterGoals.addEventListener('input', () => { - document.getElementById('preview-goals').textContent = characterGoals.value ? `Goals: ${characterGoals.value}` : ''; -}); - -// Style controls -cardBorderColor.addEventListener('input', () => { - card.style.borderColor = cardBorderColor.value; -}); - -fontSize.addEventListener('input', (event) => { - card.style.fontSize = `${event.target.value}px`; -}); - -fontColor.addEventListener('input', (event) => { - card.style.color = event.target.value; - // Update all preview elements to ensure consistent coloring - const previewElements = card.getElementsByTagName('*'); - for(let element of previewElements) { - element.style.color = event.target.value; - } -}); - -fontStyle.addEventListener('change', (event) => { - card.style.fontFamily = event.target.value; -}); - -// Export as PNG -document.getElementById('export-png').addEventListener('click', () => { - html2canvas(card).then(canvas => { - const link = document.createElement('a'); - link.download = 'character-card.png'; - link.href = canvas.toDataURL(); - link.click(); - }); -}); - -// Export character data -exportBtn.addEventListener('click', () => { - try { - const characterData = { - name: characterName.value || '', - age: characterAge.value || '', - race: characterRace.value === 'custom' ? characterRaceOther.value : characterRace.value, - appearance: characterAppearance.value || '', - overview: characterOverview.value || '', - goals: characterGoals.value || '', - fontSize: fontSize.value || '', - fontColor: fontColor.value || '', - fontStyle: fontStyle.value || '', - borderColor: cardBorderColor.value || '' - }; - - const jsonString = JSON.stringify(characterData, null, 2); - const downloadLink = document.createElement('a'); - downloadLink.href = 'data:application/json;charset=utf-8,' + encodeURIComponent(jsonString); - downloadLink.download = `${characterData.name || 'character'}.json`; - downloadLink.style.display = 'none'; - document.body.appendChild(downloadLink); - downloadLink.click(); - document.body.removeChild(downloadLink); - } catch (error) { - console.error('Error exporting character data:', error); - } -}); - -// Import character data -importBtn.addEventListener('change', (event) => { - const file = event.target.files[0]; - if (file && file.type === 'application/json') { - const reader = new FileReader(); - - reader.onload = (e) => { - try { - const characterData = JSON.parse(e.target.result); - - // Populate form fields - characterName.value = characterData.name || ''; - characterAge.value = characterData.age || ''; - - // Handle race selection - if (characterData.race && ['human', 'elf', 'orc'].includes(characterData.race)) { - characterRace.value = characterData.race; - characterRaceOther.style.display = 'none'; - } else { - characterRace.value = 'custom'; - characterRaceOther.value = characterData.race || ''; - characterRaceOther.style.display = 'block'; - } - - characterAppearance.value = characterData.appearance || ''; - characterOverview.value = characterData.overview || ''; - characterGoals.value = characterData.goals || ''; - - // Apply styles - if (characterData.fontSize) fontSize.value = characterData.fontSize; - if (characterData.fontColor) fontColor.value = characterData.fontColor; - if (characterData.fontStyle) fontStyle.value = characterData.fontStyle; - if (characterData.borderColor) cardBorderColor.value = characterData.borderColor; - - // Update preview - updatePreview(); - - console.log('Character data imported successfully'); - } catch (error) { - console.error('Error importing character data:', error); - alert('Failed to load JSON. Please check the file format.'); - } - }; - - reader.readAsText(file); - } else { - alert('Please select a valid JSON file.'); - } -}); - -// Update preview after import -function updatePreview() { - document.getElementById('preview-name').textContent = characterName.value; - document.getElementById('preview-age').textContent = characterAge.value ? `Age: ${characterAge.value}` : ''; - document.getElementById('preview-race').textContent = `Race: ${characterRace.value === 'custom' ? characterRaceOther.value : characterRace.value}`; - document.getElementById('preview-appearance').textContent = characterAppearance.value ? `Appearance: ${characterAppearance.value}` : ''; - document.getElementById('preview-overview').textContent = characterOverview.value ? `Overview: ${characterOverview.value}` : ''; - document.getElementById('preview-goals').textContent = characterGoals.value ? `Goals: ${characterGoals.value}` : ''; - - // Apply styles - card.style.fontSize = `${fontSize.value}px`; - card.style.color = fontColor.value; - card.style.fontFamily = fontStyle.value; - card.style.borderColor = cardBorderColor.value; -} diff --git a/cardMakerTool/styles.css b/cardMakerTool/styles.css deleted file mode 100644 index bfb4849..0000000 --- a/cardMakerTool/styles.css +++ /dev/null @@ -1,245 +0,0 @@ -* { - margin: 0; - padding: 0; - box-sizing: border-box; - font-family: 'Palatino', 'Times New Roman', serif; -} - -body { - padding: 20px; - background: #f4e4bc; - color: #2c1810; - background-blend-mode: multiply; -} - -.header { - text-align: center; - margin-bottom: 30px; -} - -h1 { - font-size: 2.5em; - color: #2c1810; - text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2); - margin-bottom: 30px; -} - -.container { - max-width: 1200px; - margin: 0 auto; - display: flex; - justify-content: space-between; - background-color: #fff9e6; - padding: 30px; - border-radius: 15px; - border: 3px solid #8b4513; - box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); - gap: 40px; - position: relative; -} - -.container::before { - content: ''; - position: absolute; - top: -10px; - left: -10px; - right: -10px; - bottom: -10px; - border: 2px solid #8b4513; - border-radius: 20px; - z-index: -1; -} - -.form-section { - width: 45%; -} - -.card-preview { - width: 45%; -} - -/* Section Styling */ -.section { - margin-bottom: 20px; - padding: 30px; - background: #fff9e6; - border: 2px solid #8b4513; - border-radius: 12px; - box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); -} - -.section-title { - color: #4a2810; - font-size: 1.5em; - margin-bottom: 20px; - font-weight: bold; -} - -/* Form Elements */ -label { - display: block; - margin-bottom: 8px; - color: #4a2810; - font-weight: bold; - font-size: 1.1em; -} - -input[type="text"], -input[type="file"], -select, -textarea { - width: 100%; - padding: 12px; - margin-bottom: 15px; - background-color: #fff9e6; - border: 2px solid #8b4513; - border-radius: 8px; - color: #2c1810; - font-size: 1em; - transition: all 0.3s ease; -} - -textarea { - min-height: 100px; - resize: vertical; -} - -input[type="range"] { - width: 100%; - margin: 10px 0; -} - -input[type="color"] { - width: 100px; - height: 40px; - padding: 2px; - border: 2px solid #8b4513; - border-radius: 4px; -} - -/* Card Preview */ -.card { - background-color: #fff9e6; - padding: 20px; - border: 5px solid #8b4513; - border-radius: 12px; - box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); - margin-bottom: 20px; -} - -#vertical-split-layout { - display: flex; - gap: 20px; -} - -#preview-image, -#stack-preview-image { - border: 2px solid #8b4513; - border-radius: 8px; - max-width: 100%; - height: auto; -} - -/* Preview Text */ -#preview-name { - font-size: 1.8em; - color: #4a2810; - margin-bottom: 15px; - font-weight: bold; -} - -#preview-age, -#preview-race, -#preview-appearance, -#preview-overview, -#preview-goals { - color: #2c1810; - margin: 10px 0; - line-height: 1.6; -} - -/* Export/Import Section */ -#export-import-section { - background-color: #fff9e6; - padding: 20px; - border: 2px solid #8b4513; - border-radius: 12px; - margin-bottom: 20px; -} - -#export-import-section h3 { - color: #4a2810; - margin-bottom: 15px; - font-size: 1.3em; -} - -/* Buttons */ -button, -#import-label, -#export-btn { - background-color: #8b4513; - color: #fff9e6; - border: none; - padding: 12px 25px; - border-radius: 8px; - cursor: pointer; - font-size: 1.1em; - font-weight: bold; - transition: all 0.3s ease; - margin-right: 10px; -} - -button:hover, -#import-label:hover, -#export-btn:hover { - background-color: #6b3410; - transform: translateY(-2px); -} - -#export-png { - margin-top: 20px; -} - -/* Icon Selection */ -.icon-select { - margin-bottom: 15px; -} - -.icon-select label { - display: inline-block; - margin-right: 15px; - cursor: pointer; -} - -.icon-select input[type="radio"] { - display: none; -} - -.icon-select i { - font-size: 24px; - padding: 10px; - border: 2px solid transparent; - border-radius: 5px; - color: #8b4513; -} - -.icon-select input[type="radio"]:checked + i { - border-color: #8b4513; - background-color: #fff3d4; -} - -/* Responsive Design */ -@media (max-width: 1024px) { - .container { - flex-direction: column; - } - - .form-section, - .card-preview { - width: 100%; - } - - #vertical-split-layout { - flex-direction: column; - } -}