313 lines
17 KiB
HTML
313 lines
17 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Icon Viewer - Name the Icons</title>
|
|
<style>
|
|
body {
|
|
font-family: Arial, sans-serif;
|
|
margin: 20px;
|
|
background-color: #f5f5f5;
|
|
}
|
|
.header {
|
|
background-color: white;
|
|
padding: 20px;
|
|
border-radius: 8px;
|
|
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
|
margin-bottom: 20px;
|
|
}
|
|
.icon-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
|
|
gap: 20px;
|
|
padding: 20px;
|
|
}
|
|
.icon-item {
|
|
background: white;
|
|
border-radius: 8px;
|
|
padding: 15px;
|
|
text-align: center;
|
|
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
|
transition: transform 0.2s;
|
|
}
|
|
.icon-item:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 4px 8px rgba(0,0,0,0.15);
|
|
}
|
|
.icon-img {
|
|
width: 48px;
|
|
height: 48px;
|
|
margin-bottom: 10px;
|
|
}
|
|
.icon-id {
|
|
font-size: 12px;
|
|
color: #666;
|
|
margin-bottom: 5px;
|
|
}
|
|
.icon-name {
|
|
font-weight: bold;
|
|
color: #333;
|
|
min-height: 40px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
.input-field {
|
|
width: 100%;
|
|
padding: 8px;
|
|
border: 1px solid #ddd;
|
|
border-radius: 4px;
|
|
margin-top: 5px;
|
|
}
|
|
.save-btn {
|
|
background-color: #007bff;
|
|
color: white;
|
|
border: none;
|
|
padding: 10px 20px;
|
|
border-radius: 5px;
|
|
cursor: pointer;
|
|
margin-top: 20px;
|
|
}
|
|
.save-btn:hover {
|
|
background-color: #0056b3;
|
|
}
|
|
.progress {
|
|
margin-bottom: 20px;
|
|
font-size: 14px;
|
|
color: #666;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="header">
|
|
<h1>Icon Name Editor</h1>
|
|
<p>Review each icon below and enter appropriate names. Names will be saved back to the CSV file.</p>
|
|
<div class="progress">
|
|
<span id="completed-count">0</span> of <span id="total-count">138</span> icons named
|
|
</div>
|
|
<button class="save-btn" onclick="saveToCSV()">Save Names to CSV</button>
|
|
<button class="save-btn" onclick="exportNamedIcons()" style="margin-left: 10px; background-color: #28a745;">Export Named Icons</button>
|
|
</div>
|
|
|
|
<div class="icon-grid" id="iconGrid">
|
|
<!-- Icons will be loaded here -->
|
|
</div>
|
|
|
|
<script>
|
|
const icons = [
|
|
"https://storage.danakcorp.com/images/1766554365832-411750172.svg",
|
|
"https://storage.danakcorp.com/images/1766554379149-104970938.svg",
|
|
"https://storage.danakcorp.com/images/1766554389090-593863597.svg",
|
|
"https://storage.danakcorp.com/images/1766554404968-905984091.svg",
|
|
"https://storage.danakcorp.com/images/1766554415325-873800591.svg",
|
|
"https://storage.danakcorp.com/images/1766554428814-77027818.svg",
|
|
"https://storage.danakcorp.com/images/1766554438632-45072052.svg",
|
|
"https://storage.danakcorp.com/images/1766554446340-463157109.svg",
|
|
"https://storage.danakcorp.com/images/1766554456605-280166176.svg",
|
|
"https://storage.danakcorp.com/images/1766554471887-315640495.svg",
|
|
"https://storage.danakcorp.com/images/1766554485634-242317100.svg",
|
|
"https://storage.danakcorp.com/images/1766554504553-157481346.svg",
|
|
"https://storage.danakcorp.com/images/1766554528198-919877647.svg",
|
|
"https://storage.danakcorp.com/images/1766554544140-886744157.svg",
|
|
"https://storage.danakcorp.com/images/1766554565614-684869010.svg",
|
|
"https://storage.danakcorp.com/images/1766554578855-318583145.svg",
|
|
"https://storage.danakcorp.com/images/1766554593272-362758712.svg",
|
|
"https://storage.danakcorp.com/images/1766554606166-877198688.svg",
|
|
"https://storage.danakcorp.com/images/1766554624133-21439996.svg",
|
|
"https://storage.danakcorp.com/images/1766554641691-535696200.svg",
|
|
"https://storage.danakcorp.com/images/1766554658481-114730426.svg",
|
|
"https://storage.danakcorp.com/images/1766554671760-634916570.svg",
|
|
"https://storage.danakcorp.com/images/1766554967381-660612838.svg",
|
|
"https://storage.danakcorp.com/images/1766555106925-267924006.svg",
|
|
"https://storage.danakcorp.com/images/1766555231674-387319393.svg",
|
|
"https://storage.danakcorp.com/images/1766555290519-155637622.svg",
|
|
"https://storage.danakcorp.com/images/1766555308301-230359494.svg",
|
|
"https://storage.danakcorp.com/images/1766555420851-186440015.svg",
|
|
"https://storage.danakcorp.com/images/1766555590828-644527730.svg",
|
|
"https://storage.danakcorp.com/images/1766555606997-571682462.svg",
|
|
"https://storage.danakcorp.com/images/1766555663659-433052581.svg",
|
|
"https://storage.danakcorp.com/images/1766555713098-988242030.svg",
|
|
"https://storage.danakcorp.com/images/1766555726158-680948882.svg",
|
|
"https://storage.danakcorp.com/images/1766555746650-426516324.svg",
|
|
"https://storage.danakcorp.com/images/1766555765798-127083646.svg",
|
|
"https://storage.danakcorp.com/images/1766555784837-243715698.svg",
|
|
"https://storage.danakcorp.com/images/1766555799191-594035927.svg",
|
|
"https://storage.danakcorp.com/images/1766555894624-524350777.svg",
|
|
"https://storage.danakcorp.com/images/1766555932114-485954688.svg",
|
|
"https://storage.danakcorp.com/images/1766555949650-909996041.svg",
|
|
"https://storage.danakcorp.com/images/1766555966861-75517122.svg",
|
|
"https://storage.danakcorp.com/images/1766556006875-239689681.svg",
|
|
"https://storage.danakcorp.com/images/1766556257163-459958715.svg",
|
|
"https://storage.danakcorp.com/images/1766556293812-665835248.svg",
|
|
"https://storage.danakcorp.com/images/1766556307082-162280793.svg",
|
|
"https://storage.danakcorp.com/images/1766556340402-744632392.svg",
|
|
"https://storage.danakcorp.com/images/1766556458335-857124841.svg",
|
|
"https://storage.danakcorp.com/images/1766556479530-161860621.svg",
|
|
"https://storage.danakcorp.com/images/1766556498215-91175544.svg",
|
|
"https://storage.danakcorp.com/images/1766556677355-108854669.svg",
|
|
"https://storage.danakcorp.com/images/1766556736283-691587656.svg",
|
|
"https://storage.danakcorp.com/images/1766556759367-58066921.svg",
|
|
"https://storage.danakcorp.com/images/1766556777353-490756125.svg",
|
|
"https://storage.danakcorp.com/images/1766556870740-118553581.svg",
|
|
"https://storage.danakcorp.com/images/1766556890334-962678132.svg",
|
|
"https://storage.danakcorp.com/images/1766556921029-865260745.svg",
|
|
"https://storage.danakcorp.com/images/1766556946363-320833501.svg",
|
|
"https://storage.danakcorp.com/images/1766556973771-832565827.svg",
|
|
"https://storage.danakcorp.com/images/1766557056358-727862983.svg",
|
|
"https://storage.danakcorp.com/images/1766557199259-72955190.svg",
|
|
"https://storage.danakcorp.com/images/1766557252452-988016525.svg",
|
|
"https://storage.danakcorp.com/images/1766557274778-439028456.svg",
|
|
"https://storage.danakcorp.com/images/1766557289094-415104854.svg",
|
|
"https://storage.danakcorp.com/images/1766557300923-302277606.svg",
|
|
"https://storage.danakcorp.com/images/1766557317091-602116315.svg",
|
|
"https://storage.danakcorp.com/images/1766557647999-47333939.svg",
|
|
"https://storage.danakcorp.com/images/1766557669282-172512141.svg",
|
|
"https://storage.danakcorp.com/images/1766557705283-692546793.svg",
|
|
"https://storage.danakcorp.com/images/1766557729175-762576743.svg",
|
|
"https://storage.danakcorp.com/images/1766557756487-665300947.svg",
|
|
"https://storage.danakcorp.com/images/1766557776067-804149228.svg",
|
|
"https://storage.danakcorp.com/images/1766557797509-101726352.svg",
|
|
"https://storage.danakcorp.com/images/1766557816484-357699340.svg",
|
|
"https://storage.danakcorp.com/images/1766557837292-326521286.svg",
|
|
"https://storage.danakcorp.com/images/1766559083575-564721059.svg",
|
|
"https://storage.danakcorp.com/images/1766559099561-720966516.svg",
|
|
"https://storage.danakcorp.com/images/1766559116496-834964990.svg",
|
|
"https://storage.danakcorp.com/images/1766563021426-600579018.svg",
|
|
"https://storage.danakcorp.com/images/1766563038525-727531190.svg",
|
|
"https://storage.danakcorp.com/images/1766563051485-824602001.svg",
|
|
"https://storage.danakcorp.com/images/1766563066017-372210647.svg",
|
|
"https://storage.danakcorp.com/images/1766563124296-331607800.svg",
|
|
"https://storage.danakcorp.com/images/1766563142133-359920423.svg",
|
|
"https://storage.danakcorp.com/images/1766563164270-350101986.svg",
|
|
"https://storage.danakcorp.com/images/1766563181587-86630830.svg",
|
|
"https://storage.danakcorp.com/images/1766563204966-651499380.svg",
|
|
"https://storage.danakcorp.com/images/1766563220596-103699525.svg",
|
|
"https://storage.danakcorp.com/images/1766563265634-373953449.svg",
|
|
"https://storage.danakcorp.com/images/1766563275517-958045207.svg",
|
|
"https://storage.danakcorp.com/images/1766563286526-622849562.svg",
|
|
"https://storage.danakcorp.com/images/1766564695339-504553420.svg",
|
|
"https://storage.danakcorp.com/images/1766564706032-159367016.svg",
|
|
"https://storage.danakcorp.com/images/1766564720683-887818252.svg",
|
|
"https://storage.danakcorp.com/images/1766564734432-483528219.svg",
|
|
"https://storage.danakcorp.com/images/1766564750099-854146988.svg",
|
|
"https://storage.danakcorp.com/images/1766564758573-696060786.svg",
|
|
"https://storage.danakcorp.com/images/1766564805823-829938380.svg",
|
|
"https://storage.danakcorp.com/images/1766564891137-468827500.svg",
|
|
"https://storage.danakcorp.com/images/1766564907215-921380792.svg",
|
|
"https://storage.danakcorp.com/images/1766564926872-672612697.svg",
|
|
"https://storage.danakcorp.com/images/1766565459604-638026702.svg",
|
|
"https://storage.danakcorp.com/images/1766565476771-42527917.svg",
|
|
"https://storage.danakcorp.com/images/1766565491264-946731491.svg",
|
|
"https://storage.danakcorp.com/images/1766565502475-288189136.svg",
|
|
"https://storage.danakcorp.com/images/1766565530628-800474580.svg",
|
|
"https://storage.danakcorp.com/images/1766565547983-878658938.svg",
|
|
"https://storage.danakcorp.com/images/1766565563263-891688321.svg",
|
|
"https://storage.danakcorp.com/images/1766565600547-704332792.svg",
|
|
"https://storage.danakcorp.com/images/1766565625437-528383713.svg",
|
|
"https://storage.danakcorp.com/images/1766565641620-53176909.svg",
|
|
"https://storage.danakcorp.com/images/1766565664427-433669317.svg",
|
|
"https://storage.danakcorp.com/images/1766565971515-159903323.svg",
|
|
"https://storage.danakcorp.com/images/1766565995424-288101561.svg",
|
|
"https://storage.danakcorp.com/images/1766566026942-868807643.svg",
|
|
"https://storage.danakcorp.com/images/1766566041525-973019175.svg",
|
|
"https://storage.danakcorp.com/images/1766566064741-271844433.svg",
|
|
"https://storage.danakcorp.com/images/1766566084368-438871956.svg",
|
|
"https://storage.danakcorp.com/images/1766566106954-47179607.svg",
|
|
"https://storage.danakcorp.com/images/1766566122836-486871124.svg",
|
|
"https://storage.danakcorp.com/images/1766566143171-668309076.svg",
|
|
"https://storage.danakcorp.com/images/1766566161551-844376214.svg",
|
|
"https://storage.danakcorp.com/images/1766566176755-30806596.svg",
|
|
"https://storage.danakcorp.com/images/1766566193720-339416210.svg",
|
|
"https://storage.danakcorp.com/images/1766566293736-981836756.svg",
|
|
"https://storage.danakcorp.com/images/1766566304318-193301989.svg",
|
|
"https://storage.danakcorp.com/images/1766566327768-2675508.svg",
|
|
"https://storage.danakcorp.com/images/1766566341717-462491426.svg",
|
|
"https://storage.danakcorp.com/images/1766566357028-432111036.svg",
|
|
"https://storage.danakcorp.com/images/1766566371354-279596850.svg",
|
|
"https://storage.danakcorp.com/images/1766566385674-569493499.svg",
|
|
"https://storage.danakcorp.com/images/1766566413058-975642584.svg",
|
|
"https://storage.danakcorp.com/images/1766566427440-982841441.svg",
|
|
"https://storage.danakcorp.com/images/1766566442808-761588425.svg",
|
|
"https://storage.danakcorp.com/images/1766566468108-519151895.svg",
|
|
"https://storage.danakcorp.com/images/1766566482278-661272876.svg",
|
|
"https://storage.danakcorp.com/images/1766566494050-408184442.svg",
|
|
"https://storage.danakcorp.com/images/1766566504760-709260995.svg"
|
|
];
|
|
|
|
const iconNames = new Array(icons.length).fill('');
|
|
|
|
function loadIcons() {
|
|
const grid = document.getElementById('iconGrid');
|
|
icons.forEach((url, index) => {
|
|
const item = document.createElement('div');
|
|
item.className = 'icon-item';
|
|
|
|
item.innerHTML = `
|
|
<div class="icon-id">Icon ${index + 1}</div>
|
|
<img src="${url}" alt="Icon ${index + 1}" class="icon-img" onerror="this.src='data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDgiIGhlaWdodD0iNDgiIHZpZXdCb3g9IjAgMCA0OCA0OCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3Qgd2lkdGg9IjQ4IiBoZWlnaHQ9IjQ4IiBmaWxsPSIjZGRkIi8+Cjx0ZXh0IHg9IjI0IiB5PSIyNCIgZm9udC1mYW1pbHk9IkFyaWFsLCBzYW5zLXNlcmlmIiBmb250LXNpemU9IjEyIiBmaWxsPSIjOTk5IiB0ZXh0LWFuY2hvcj0ibWlkZGxlIiBkeT0iMC4zNWVtIj5ObyBJY29uPC90ZXh0Pgo8L3N2Zz4='">
|
|
<input type="text" class="input-field" placeholder="Enter icon name..." oninput="updateName(${index}, this.value)">
|
|
`;
|
|
|
|
grid.appendChild(item);
|
|
});
|
|
}
|
|
|
|
function updateName(index, name) {
|
|
iconNames[index] = name.trim();
|
|
updateProgress();
|
|
}
|
|
|
|
function updateProgress() {
|
|
const completed = iconNames.filter(name => name.length > 0).length;
|
|
document.getElementById('completed-count').textContent = completed;
|
|
}
|
|
|
|
function saveToCSV() {
|
|
// This will create a downloadable CSV with the names
|
|
let csvContent = '"id","created_at","updated_at","deleted_at","url","group_id","icon_name"\n';
|
|
|
|
// You'll need to load the original CSV data here and add the names
|
|
// For now, this is a placeholder - you'd need to combine with original data
|
|
|
|
const blob = new Blob([csvContent], { type: 'text/csv' });
|
|
const url = window.URL.createObjectURL(blob);
|
|
const a = document.createElement('a');
|
|
a.href = url;
|
|
a.download = 'icons_with_names.csv';
|
|
a.click();
|
|
window.URL.revokeObjectURL(url);
|
|
|
|
alert('CSV template downloaded. You\'ll need to manually add the icon names to the original CSV file.');
|
|
}
|
|
|
|
function exportNamedIcons() {
|
|
const namedIcons = [];
|
|
iconNames.forEach((name, index) => {
|
|
if (name.trim()) {
|
|
namedIcons.push({
|
|
index: index + 1,
|
|
name: name.trim(),
|
|
url: icons[index]
|
|
});
|
|
}
|
|
});
|
|
|
|
const csvContent = 'Index,Name,URL\n' +
|
|
namedIcons.map(icon => `${icon.index},"${icon.name}","${icon.url}"`).join('\n');
|
|
|
|
const blob = new Blob([csvContent], { type: 'text/csv' });
|
|
const url = window.URL.createObjectURL(blob);
|
|
const a = document.createElement('a');
|
|
a.href = url;
|
|
a.download = 'named_icons.csv';
|
|
a.click();
|
|
window.URL.revokeObjectURL(url);
|
|
}
|
|
|
|
// Load icons when page loads
|
|
window.onload = loadIcons;
|
|
</script>
|
|
</body>
|
|
</html>
|