-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
136 lines (116 loc) · 6.14 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Rem Clamp Generator</title>
<link rel="icon" type="image/png" sizes="32x32" href="/favicon.png">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css" rel="stylesheet">
</head>
<body>
<div class="container mx-auto p-4">
<h1 class="text-2xl font-bold mb-4">Responsive Font Size Generator</h1>
<div class="grid grid-cols-2 gap-4 mb-4">
<div>
<label for="minWidthPx" class="block mb-1">Minimum viewport width (px)</label>
<input type="number" id="minWidthPx" class="w-full border rounded px-2 py-1" value="414">
</div>
<div>
<label for="maxWidthPx" class="block mb-1">Maximum viewport width (px)</label>
<input type="number" id="maxWidthPx" class="w-full border rounded px-2 py-1" value="1440">
</div>
</div>
<div id="fontSizeInputs" class="space-y-4">
<!-- Font size inputs will be generated here -->
</div>
<button id="generateBtn" class="mt-4 bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600">Generate Clamp Code</button>
<div class="mt-4 relative">
<pre id="resultBox" class="p-4 bg-gray-100 rounded overflow-x-auto"></pre>
<button id="copyBtn" class="absolute top-2 right-2 bg-gray-300 hover:bg-gray-400 text-gray-800 font-bold py-1 px-2 rounded text-sm">Copy</button>
</div>
</div>
<script>
const fontSizeInputs = document.getElementById('fontSizeInputs');
const generateBtn = document.getElementById('generateBtn');
const resultBox = document.getElementById('resultBox');
const copyBtn = document.getElementById('copyBtn');
const minWidthPxInput = document.getElementById('minWidthPx');
const maxWidthPxInput = document.getElementById('maxWidthPx');
// Generate 13 font size input rows
for (let i = 1; i <= 13; i++) {
const row = document.createElement('div');
row.className = 'grid grid-cols-3 gap-4';
row.innerHTML = `
<div>
<label for="minFontSize${i}" class="block mb-1">${i} - Min Font Size (px)</label>
<input type="number" id="minFontSize${i}" class="w-full border rounded px-2 py-1">
<span id="minFontSizeRem${i}" class="text-sm text-gray-600"></span>
</div>
<div>
<label for="maxFontSize${i}" class="block mb-1">${i} - Max Font Size (px)</label>
<input type="number" id="maxFontSize${i}" class="w-full border rounded px-2 py-1">
<span id="maxFontSizeRem${i}" class="text-sm text-gray-600"></span>
</div>
<div>
<label for="lineHeight${i}" class="block mb-1">${i} - Line Height (px)</label>
<input type="number" id="lineHeight${i}" class="w-full border rounded px-2 py-1">
</div>
`;
fontSizeInputs.appendChild(row);
}
const updateRemValue = (pxInput, remSpan) => {
const pxValue = parseFloat(pxInput.value);
if (!isNaN(pxValue)) {
remSpan.textContent = (pxValue / 16).toFixed(2) + 'rem';
} else {
remSpan.textContent = '';
}
};
minWidthPxInput.addEventListener('input', () => updateRemValue(minWidthPxInput, document.getElementById('minWidthRem')));
maxWidthPxInput.addEventListener('input', () => updateRemValue(maxWidthPxInput, document.getElementById('maxWidthRem')));
for (let i = 1; i <= 13; i++) {
const minFontSizeInput = document.getElementById(`minFontSize${i}`);
const maxFontSizeInput = document.getElementById(`maxFontSize${i}`);
minFontSizeInput.addEventListener('input', () => updateRemValue(minFontSizeInput, document.getElementById(`minFontSizeRem${i}`)));
maxFontSizeInput.addEventListener('input', () => updateRemValue(maxFontSizeInput, document.getElementById(`maxFontSizeRem${i}`)));
}
generateBtn.addEventListener('click', () => {
const minWidthPx = parseFloat(document.getElementById('minWidthPx').value);
const maxWidthPx = parseFloat(document.getElementById('maxWidthPx').value);
let result = '';
for (let i = 1; i <= 13; i++) {
const minFontSize = parseFloat(document.getElementById(`minFontSize${i}`).value);
const maxFontSize = parseFloat(document.getElementById(`maxFontSize${i}`).value);
const lineHeight = parseFloat(document.getElementById(`lineHeight${i}`).value);
if (isNaN(minFontSize) || isNaN(maxFontSize) || isNaN(lineHeight)) continue;
const minFontSizeRem = minFontSize / 16;
const maxFontSizeRem = maxFontSize / 16;
const minWidthRem = minWidthPx / 16;
const maxWidthRem = maxWidthPx / 16;
const slope = (maxFontSizeRem - minFontSizeRem) / (maxWidthRem - minWidthRem)
const yAxisIntersection = -minWidthRem * slope + minFontSizeRem
result += `/* font-size ${minFontSize} - ${maxFontSize} */
.sz-text-${i} {
font-size: clamp(${minFontSizeRem.toFixed(4)}rem, ${yAxisIntersection.toFixed(4)}rem + ${(slope * 100).toFixed(4)}vw, ${maxFontSizeRem.toFixed(4)}rem);
line-height: ${lineHeight}px;
}`;
}
resultBox.innerHTML = result;
copyBtn.textContent = 'Copy';
copyBtn.disabled = false;
});
copyBtn.addEventListener('click', () => {
navigator.clipboard.writeText(resultBox.textContent).then(() => {
copyBtn.textContent = 'Copied!';
copyBtn.disabled = true;
setTimeout(() => {
copyBtn.textContent = 'Copy';
copyBtn.disabled = false;
}, 2000);
}).catch(err => {
console.error('Failed to copy text: ', err);
});
});
</script>
</body>
</html>