Skip to content

Commit

Permalink
Add files via upload
Browse files Browse the repository at this point in the history
  • Loading branch information
@ahmadzaid1
ahmadzaid1 authored Dec 13, 2024
1 parent ec4d2b1 commit 2a262cb
Show file tree
Hide file tree
Showing 6 changed files with 553 additions and 0 deletions.
91 changes: 91 additions & 0 deletions cardMakerTool/cardMaker.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,91 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<title>Character Card Maker</title>
</head>

<body>
<div class="header">
<h1>Character Card Maker</h1>
</div>
<div class="container">
<!-- Left Section: Form -->
<div class="form-section">
<!-- Image Attributes -->
<div class="section">
<h2 class="section-title">Image Attributes</h2>
<label for="character-image">Character Image</label>
<input type="file" id="character-image" accept="image/*">
<label for="image-size">Image Size</label>
<input type="range" id="image-size" min="50" max="300" value="100">
<label for="image-shape">Image Shape</label>
<select id="image-shape">
<option value="circle">Circle</option>
<option value="rectangle">Rectangle</option>
</select>
</div>
<!-- Character Attributes -->
<div class="section">
<h2 class="section-title">Character Attributes</h2>
<label for="character-name">Name</label>
<input type="text" id="character-name" placeholder="Character Name">
<label for="character-age">Age</label>
<input type="text" id="character-age" placeholder="Character Age">
<label for="character-race">Race</label>
<select id="character-race">
<option value="human">Human</option>
<option value="elf">Elf</option>
<option value="orc">Orc</option>
</select>
<input type="text" id="character-race-other" placeholder="Or enter a custom race">
<label for="character-appearance">Appearance</label>
<textarea id="character-appearance" placeholder="Describe appearance"></textarea>
<label for="character-overview">Overview</label>
<textarea id="character-overview" placeholder="Give an overview"></textarea>
<label for="character-goals">Goals</label>
<textarea id="character-goals" placeholder="Describe character's goals"></textarea>
</div>
</div>
<!-- Right Section: Card Preview and Settings -->
<div class="card-preview">
<!-- Character Card -->
<div class="card" id="card" style="display: flex; padding: 20px; border: 5px solid #b07a3b; border-radius: 12px; max-width: 400px; margin-bottom: 20px;">
<div style="flex: 1;">
<img id="preview-image" src="" alt="Character Image" style="display: none; margin-bottom: 10px;">
<p id="preview-overview"></p>
<p id="preview-goals"></p>
</div>
<div style="flex: 1; padding-left: 10px;">
<h3 id="preview-name"></h3>
<p id="preview-age"></p>
<p id="preview-race"></p>
<p id="preview-appearance"></p>
</div>
</div>
<!-- Card Settings -->
<div class="section">
<h2 class="section-title">Card Settings</h2>
<label for="card-border-color">Card Border Color</label>
<input type="color" id="card-border-color" value="#b07a3b">
<label for="font-size">Font Size</label>
<input type="range" id="font-size" min="12" max="24" value="16">
<label for="font-color">Font Color</label>
<input type="color" id="font-color" value="#333333">
<label for="font-style">Font Style</label>
<select id="font-style">
<option value="Arial, sans-serif">Arial</option>
<option value="Cinzel, serif">Cinzel</option>
<option value="Uncial Antiqua, cursive">Uncial Antiqua</option>
<option value="Courier New, monospace">Courier New</option>
</select>
</div>
</div>
</div>
<script src="scripts.js"></script>
</body>

</html>
45 changes: 45 additions & 0 deletions cardMakerTool/scripts.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,45 @@
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 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');

// Image handling
document.getElementById('character-image').addEventListener('change', function(event) {
const file = event.target.files[0];
if (file) {
previewImage.src = URL.createObjectURL(file);
previewImage.style.display = 'block';
}
});

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';
});

// Update character attributes in the card preview
characterName.addEventListener('input', () => document.getElementById('preview-name').textContent = characterName.value);
characterAge.addEventListener('input', () => document.getElementById('preview-age').textContent = characterAge.value);
characterRace.addEventListener('input', () => document.getElementById('preview-race').textContent = characterRace.value);
characterAppearance.addEventListener('input', () => document.getElementById('preview-appearance').textContent = characterAppearance.value);
characterOverview.addEventListener('input', () => document.getElementById('preview-overview').textContent = characterOverview.value);
characterGoals.addEventListener('input', () => document.getElementById('preview-goals').textContent = characterGoals.value);

// Update card settings
cardBorderColor.addEventListener('input', () => card.style.borderColor = cardBorderColor.value);
fontSize.addEventListener('input', () => card.style.fontSize = fontSize.value + 'px');
fontColor.addEventListener('input', () => card.style.color = fontColor.value);
fontStyle.addEventListener('change', () => card.style.fontFamily = fontStyle.value);

94 changes: 94 additions & 0 deletions cardMakerTool/styles.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,94 @@
body {
font-family: Arial, sans-serif;
background-color: #f1f1f1;
margin: 0;
padding: 20px;
}

.container {
display: flex;
justify-content: space-between;
max-width: 1200px;
margin: 0 auto;
background: #fdf2e9;
border-radius: 15px;
padding: 20px;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
}

.form-section {
width: 45%;
}

/* Header section */
.header {
text-align: center;
margin-bottom: 20px;
}

h1 {
font-size: 36px;
color: #b07a3b;
text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.2);
}

/* Form sections */
.section-title {
font-size: 24px;
color: #5c3e1a;
margin-top: 15px;
}

.section {
margin-bottom: 20px;
padding: 10px;
border: 1px solid #ddd;
border-radius: 10px;
background-color: #fff;
}

label {
font-size: 16px;
color: #333;
display: block;
margin-top: 10px;
}

input[type="text"],
select,
textarea,
input[type="color"],
input[type="range"] {
width: 100%;
padding: 8px;
margin-top: 5px;
font-size: 16px;
border: 1px solid #ccc;
border-radius: 5px;
background-color: #f1f1f1;
}

/* Preview card */
.card-preview {
width: 45%;
text-align: center;
}

.card {
background-color: #fdf2e9;
border: 5px solid #b07a3b;
border-radius: 12px;
padding: 20px;
max-width: 400px;
margin: 0 auto;
box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
text-align: left;
}

.card img {
width: 100px;
height: 100px;
border-radius: 50%;
display: block;
margin: 0 auto 10px;
}
79 changes: 79 additions & 0 deletions timeLineManager/scripts.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,79 @@
document.addEventListener('DOMContentLoaded', () => {
const timelineContainer = document.getElementById('timeline-container');
const addEventBtn = document.getElementById('add-event-btn');
const exportBtn = document.getElementById('export-btn');
const feedbackMessage = document.getElementById('feedback-message');

let draggedEvent = null;

// Add a new event
addEventBtn.addEventListener('click', () => {
const title = document.getElementById('title').value;
const description = document.getElementById('description').value;
const date = document.getElementById('date').value;

if (title && description && date) {
const eventDiv = document.createElement('div');
eventDiv.classList.add('event');
eventDiv.setAttribute('draggable', 'true');
eventDiv.innerHTML = `
<div class="event-title">${title}</div>
<div class="event-description">${description}</div>
<div class="event-date">Date: ${new Date(date).toLocaleDateString()}</div>
`;

// Add drag-and-drop event listeners
eventDiv.addEventListener('dragstart', handleDragStart);
eventDiv.addEventListener('dragend', handleDragEnd);

timelineContainer.appendChild(eventDiv);
feedbackMessage.textContent = 'Event Added! Drag it to the timeline.';
feedbackMessage.style.color = 'green';

// Reset form
document.getElementById('event-form').reset();
} else {
feedbackMessage.textContent = 'Please fill out all fields!';
feedbackMessage.style.color = 'red';
}
});

// Drag-and-drop handlers
function handleDragStart(event) {
draggedEvent = event.target;
draggedEvent.classList.add('dragging');
}

function handleDragEnd(event) {
draggedEvent.classList.remove('dragging');
draggedEvent = null;
}

// Allow dropping on the timeline container
timelineContainer.addEventListener('dragover', (event) => {
event.preventDefault(); // Allow drop
});

timelineContainer.addEventListener('drop', (event) => {
event.preventDefault();
if (draggedEvent) {
// Position the event where it was dropped
const rect = timelineContainer.getBoundingClientRect();
const offsetX = event.clientX - rect.left;
const offsetY = event.clientY - rect.top;

draggedEvent.style.left = `${offsetX - draggedEvent.offsetWidth / 2}px`;
draggedEvent.style.top = `${offsetY - draggedEvent.offsetHeight / 2}px`;
}
});

// Export timeline as PNG
exportBtn.addEventListener('click', () => {
html2canvas(timelineContainer).then(canvas => {
const link = document.createElement('a');
link.href = canvas.toDataURL();
link.download = 'timeline.png';
link.click();
});
});
});
Loading

0 comments on commit 2a262cb

Please sign in to comment.