Skip to content

Commit

Permalink
Inital Commit
Browse files Browse the repository at this point in the history
  • Loading branch information
@papierkorp
papierkorp committed Oct 14, 2024
0 parents commit bde11c8
Show file tree
Hide file tree
Showing 11 changed files with 710 additions and 0 deletions.
33 changes: 33 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
# Card Generator

```bash
#temp webserver
python3 -m http.server 8000
```

these are the inital requirements i set myself:

- learn tailwindcss
- the preview should be in the middle and the selectors on the left top right and bottom of the preview
- let me set the height + width of the card with sliders
- let me add content to each of the 4 edges
- let me select the direction of the text (e.g. horiztonal/vertical)
- lets me add unlimited content in the middle and set the proportional height in % with a slider and show the correct %
- let me use text/image/list/table as content
- for each content i want to be able to set the following:
- let me change the size, font, color and alignment of each text individually
- let me set the background color of each content part
- let me set the different borders to each content
- let me choose a border side
- allow me to choose 2 or more border sides
- the border type
- p.dotted {border-style: dotted;}p.dashed {border-style: dashed;}p.solid {border-style: solid;}p.double {border-style: double;}p.groove {border-style: groove;}p.ridge {border-style: ridge;}p.inset {border-style: inset;}p.outset {border-style: outset;}p.none {border-style: none;}p.hidden {border-style: hidden;}p.mix {border-style: dotted dashed solid double;}
- rounded borders
- shadow
- shift right/down
- spread
- blur
- opacity
- inset
- color
- separate the different parts so they are more distingushable
86 changes: 86 additions & 0 deletions border_settings.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,86 @@
<div class="p-4 border rounded-lg shadow-sm bg-white">
<h3 class="text-lg font-semibold mb-4">Border Settings</h3>

<div class="mb-4">
<label class="block text-sm font-medium text-gray-700 mb-1">Border Sides</label>
<div class="flex flex-wrap gap-2">
<label><input type="checkbox" value="top" /> Top</label>
<label><input type="checkbox" value="right" /> Right</label>
<label><input type="checkbox" value="bottom" /> Bottom</label>
<label><input type="checkbox" value="left" /> Left</label>
</div>
</div>

<div class="mb-4">
<label for="borderType" class="block text-sm font-medium text-gray-700 mb-1">Border Type</label>
<select id="borderType" class="w-full p-2 border rounded">
<option value="solid">Solid</option>
<option value="dotted">Dotted</option>
<option value="dashed">Dashed</option>
<option value="double">Double</option>
<option value="groove">Groove</option>
<option value="ridge">Ridge</option>
<option value="inset">Inset</option>
<option value="outset">Outset</option>
<option value="none">None</option>
<option value="hidden">Hidden</option>
</select>
</div>

<div class="mb-4">
<div class="flex justify-between items-center mb-1">
<label for="borderRadius" class="text-sm font-medium text-gray-700">Rounded Corners</label>
<span id="borderRadiusValue" class="text-sm text-gray-500">0px</span>
</div>
<input type="range" id="borderRadius" min="0" max="50" value="0" class="w-full accent-lime-400" />
</div>

<div class="mb-4">
<h4 class="text-sm font-medium text-gray-700 mb-2">Shadow Settings</h4>
<div class="flex space-x-4 mb-2">
<label><input type="checkbox" id="shadowEnabled" /> Shadow</label>
<label><input type="checkbox" id="shadowInset" /> Inset Shadow</label>
</div>
<div class="grid grid-cols-2 gap-4">
<div>
<div class="flex justify-between items-center mb-1">
<label for="shadowRight" class="text-xs text-gray-600">Shift Right</label>
<span id="shadowRightValue" class="text-xs text-gray-500">0px</span>
</div>
<input type="range" id="shadowRight" min="-50" max="50" value="0" class="w-full accent-lime-400" />
</div>
<div>
<div class="flex justify-between items-center mb-1">
<label for="shadowDown" class="text-xs text-gray-600">Shift Down</label>
<span id="shadowDownValue" class="text-xs text-gray-500">0px</span>
</div>
<input type="range" id="shadowDown" min="-50" max="50" value="0" class="w-full accent-lime-400" />
</div>
<div>
<div class="flex justify-between items-center mb-1">
<label for="shadowSpread" class="text-xs text-gray-600">Spread</label>
<span id="shadowSpreadValue" class="text-xs text-gray-500">0px</span>
</div>
<input type="range" id="shadowSpread" min="0" max="50" value="0" class="w-full accent-lime-400" />
</div>
<div>
<div class="flex justify-between items-center mb-1">
<label for="shadowBlur" class="text-xs text-gray-600">Blur</label>
<span id="shadowBlurValue" class="text-xs text-gray-500">0px</span>
</div>
<input type="range" id="shadowBlur" min="0" max="50" value="0" class="w-full accent-lime-400" />
</div>
</div>
<div class="mt-4">
<div class="flex justify-between items-center mb-1">
<label for="shadowOpacity" class="text-xs text-gray-600">Opacity</label>
<span id="shadowOpacityValue" class="text-xs text-gray-500">100%</span>
</div>
<input type="range" id="shadowOpacity" min="0" max="100" value="100" class="w-full accent-lime-400" />
</div>
<div class="mt-4">
<label for="shadowColor" class="block text-xs text-gray-600 mb-1">Shadow Color</label>
<input type="color" id="shadowColor" value="#000000" class="w-full" />
</div>
</div>
</div>
45 changes: 45 additions & 0 deletions card_settings.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,45 @@
<div class="bg-white p-4 rounded-lg shadow-sm">
<h3 class="text-lg font-semibold mb-4">Card Dimensions</h3>
<div class="flex space-x-4 mb-4">
<div class="flex-1">
<div class="flex justify-between items-center mb-1">
<label for="cardWidth" class="text-sm font-medium text-gray-700">Width</label>
<div class="flex items-center">
<span id="cardWidthValue" class="text-sm text-gray-500">400</span>
<span class="text-sm text-gray-500 ml-1">px</span>
</div>
</div>
<input type="range" id="cardWidth" min="20" max="2048" value="400" class="w-full accent-lime-400" />
</div>
<div class="flex-1">
<div class="flex justify-between items-center mb-1">
<label for="cardHeight" class="text-sm font-medium text-gray-700">Height</label>
<div class="flex items-center">
<span id="cardHeightValue" class="text-sm text-gray-500">600</span>
<span class="text-sm text-gray-500 ml-1">px</span>
</div>
</div>
<input type="range" id="cardHeight" min="20" max="2048" value="600" class="w-full accent-lime-400" />
</div>
</div>

<div>
<label for="contentSelector" class="block text-sm font-medium text-gray-700 mb-1">Select Content Area</label>
<div class="flex items-center">
<select id="contentSelector" class="w-full p-2 border rounded">
<option value="card">Entire Card</option>
<option value="top">Top Edge</option>
<option value="right">Right Edge</option>
<option value="bottom">Bottom Edge</option>
<option value="left">Left Edge</option>
<option value="middle1">Middle Section 1</option>
<option value="middle2">Middle Section 2</option>
<option value="middle3">Middle Section 3</option>
<option value="middle4">Middle Section 4</option>
<option value="middle5">Middle Section 5</option>
<option value="middle6">Middle Section 6</option>
<option value="middle7">Middle Section 7</option>
</select>
</div>
</div>
</div>
47 changes: 47 additions & 0 deletions content_settings.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,47 @@
<div class="p-4 border rounded-lg shadow-sm bg-white">
<h3 class="text-lg font-semibold mb-4">Content Settings</h3>

<div id="contentEditor" class="mb-6" style="display: none">
<h4 class="text-md font-semibold mb-2">Content Editor</h4>
<div id="textEditor" class="mb-2">
<textarea id="textContent" class="w-full p-2 border rounded" rows="1" placeholder="Enter text content"></textarea>
</div>
<div class="flex justify-between">
<button id="saveContent" class="bg-lime-600 text-white px-3 py-1 text-sm rounded hover:bg-lime-700">
Save Content
</button>
<button id="resetContent" class="bg-slate-600 text-white px-3 py-1 text-sm rounded hover:bg-slate-700">
Reset Content
</button>
</div>
</div>

<div id="sectionDimensions" class="flex space-x-4 mb-4" style="display: none">
<div id="middleSectionHeight" class="flex-1">
<div class="flex justify-between items-center mb-1">
<label for="sectionHeightSlider" class="text-sm font-medium text-gray-700">Section Height</label>
<div class="flex items-center">
<span id="sectionHeightSliderValue" class="text-sm text-gray-500">512</span>
<span class="text-sm text-gray-500 ml-1">px</span>
</div>
</div>
<input type="range" id="sectionHeightSlider" min="10" max="2048" value="512" class="w-full accent-lime-400" />
</div>

<div id="middleSectionWidth" class="flex-1">
<div class="flex justify-between items-center mb-1">
<label for="sectionWidthSlider" class="text-sm font-medium text-gray-700">Section Width</label>
<div class="flex items-center">
<span id="sectionWidthSliderValue" class="text-sm text-gray-500">32</span>
<span class="text-sm text-gray-500 ml-1">px</span>
</div>
</div>
<input type="range" id="sectionWidthSlider" min="10" max="512" value="32" class="w-full accent-lime-400" />
</div>
</div>

<div class="mb-4">
<label for="backgroundColor" class="block text-sm font-medium text-gray-700 mb-1">Background Color</label>
<input type="color" id="backgroundColor" value="#ffffff" class="w-full" />
</div>
</div>
82 changes: 82 additions & 0 deletions index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,82 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Card Generator</title>
<script src="https://cdn.tailwindcss.com"></script>
<style>
#cardPreviewContainer {
height: 70vh;
position: relative;
overflow: hidden;
}
</style>
</head>
<body class="bg-gray-100">
<div class="container mx-auto px-4 py-8">
<h1 class="text-3xl font-bold mb-8 text-center">Card Generator</h1>

<div class="grid grid-cols-1 md:grid-cols-4 gap-8">
<!-- Left Column -->
<div class="space-y-8">
<div id="contentSettings"></div>
<div id="textSettings"></div>
</div>

<!-- Middle Columns (Card Settings and Preview) -->
<div class="md:col-span-2 space-y-8">
<div id="cardSettings" class="bg-white p-4 rounded-lg shadow-sm"></div>
<div>
<h2 class="text-xl font-semibold mb-4">Card Preview</h2>
<div id="cardPreviewContainer" class="border border-gray-300 p-4">
<div id="cardPreview" class="absolute">
<div id="topEdge" class="border-b p-2">Top Edge Content</div>
<div class="flex h-full">
<div id="leftEdge" class="border-r p-2 writing-vertical-lr">Left Edge Content</div>
<div id="middleContentContainer" class="flex-1 overflow-auto flex flex-col">
<div id="middleContent-1" class="p-2 flex-grow">Middle Content 1</div>
</div>
<div id="rightEdge" class="border-l p-2 writing-vertical-rl">Right Edge Content</div>
</div>
<div id="bottomEdge" class="border-t p-2">Bottom Edge Content</div>
</div>
</div>
</div>
<div>
<h2 class="text-xl font-semibold mb-4">HTML Output</h2>
<pre id="htmlOutput" class="bg-gray-100 p-4 rounded overflow-x-auto text-sm" style="max-height: 200px"></pre>
</div>
<div id="staticPreviewContainer"></div>
</div>

<!-- Right Column (Border Settings) -->
<div class="space-y-8">
<div id="borderSettings"></div>
</div>
</div>
</div>

<script>
// Function to fetch and insert HTML components
async function fetchComponent(url, targetId) {
try {
const response = await fetch(url);
const html = await response.text();
document.getElementById(targetId).innerHTML = html;
} catch (error) {
console.error('Error fetching component:', error);
}
}

// Fetch and insert components
fetchComponent('card_settings.html', 'cardSettings');
fetchComponent('content_settings.html', 'contentSettings');
fetchComponent('text_settings.html', 'textSettings');
fetchComponent('border_settings.html', 'borderSettings');
</script>

<!-- JavaScript files -->
<script type="module" src="js/main.js"></script>
</body>
</html>
82 changes: 82 additions & 0 deletions js/core/state.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,82 @@
// core/state.js

export function createState() {
const state = {
dimensions: { width: '400px', height: '600px' },
sections: {
card: { content: null, style: {}, border: {} },
top: { content: { type: 'text', value: 'Top Edge Content' }, style: {}, border: {} },
right: { content: { type: 'text', value: 'Right Edge Content' }, style: {}, border: {} },
bottom: { content: { type: 'text', value: 'Bottom Edge Content' }, style: {}, border: {} },
left: { content: { type: 'text', value: 'Left Edge Content' }, style: {}, border: {} },
middle1: { content: { type: 'text', value: 'Middle Content 1' }, style: {}, border: {}, height: 50 },
middle2: { content: { type: 'text', value: 'Middle Content 2' }, style: {}, border: {}, height: 50 },
middle3: { content: { type: 'text', value: 'Middle Content 3' }, style: {}, border: {}, height: 50 },
middle4: { content: { type: 'text', value: 'Middle Content 4' }, style: {}, border: {}, height: 50 },
middle5: { content: { type: 'text', value: 'Middle Content 5' }, style: {}, border: {}, height: 50 },
middle6: { content: { type: 'text', value: 'Middle Content 6' }, style: {}, border: {}, height: 50 },
middle7: { content: { type: 'text', value: 'Middle Content 7' }, style: {}, border: {}, height: 50 },
},
selectedSection: 'card',
};

function setState(newState) {
Object.assign(state, newState);
}

function getState() {
return { ...state };
}

function getDimensions() {
return { ...state.dimensions };
}

function getSelectedSection() {
return state.selectedSection;
}

function getSection(sectionName) {
return state.sections[sectionName] ? { ...state.sections[sectionName] } : null;
}

function getAllSections() {
return { ...state.sections };
}

function updateSection(sectionName, updates) {
if (state.sections[sectionName]) {
state.sections[sectionName] = {
...state.sections[sectionName],
...updates,
};
}
}

function updateSelectedSection(updates) {
updateSection(state.selectedSection, updates);
}

function setSelectedSection(sectionName) {
if (state.sections[sectionName]) {
state.selectedSection = sectionName;
}
}

function updateDimensions(dimensions) {
state.dimensions = { ...state.dimensions, ...dimensions };
}

return {
setState,
getState,
getDimensions,
getSelectedSection,
getSection,
getAllSections,
updateSection,
updateSelectedSection,
setSelectedSection,
updateDimensions,
};
}
Loading

0 comments on commit bde11c8

Please sign in to comment.