89 lines
2.6 KiB
PHP
89 lines
2.6 KiB
PHP
|
|
<!-- <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:400,700"> -->
|
|
<div class="google-fonts-container">
|
|
<h1 class="google-fonts-heading">Google Fonts Pair Finder</h1>
|
|
<label for="selectedFont" class="google-fonts-label">Select a Font:</label>
|
|
<select id="selectedFont" class="google-fonts-select">
|
|
<!-- Options will be populated dynamically -->
|
|
</select>
|
|
|
|
<div class="google-fonts-preview">
|
|
<h2>Preview:</h2>
|
|
<p id="previewText">The quick brown fox jumps over the lazy dog.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
// Function to fetch all Google Fonts and populate dropdown
|
|
function fetchGoogleFonts() {
|
|
fetch('https://www.googleapis.com/webfonts/v1/webfonts?key=AIzaSyAssce4aiUByEQGByr49fHVn3TSzdBkQQE')
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
const fonts = data.items.map(item => item.family);
|
|
const fontSelect = document.getElementById('selectedFont');
|
|
fonts.forEach(font => {
|
|
const option = document.createElement('option');
|
|
option.value = font;
|
|
option.textContent = font;
|
|
fontSelect.appendChild(option);
|
|
});
|
|
})
|
|
.catch(error => console.error('Error fetching Google Fonts:', error));
|
|
}
|
|
|
|
// Function to update font preview
|
|
function updatePreview() {
|
|
const selectedFont = document.getElementById('selectedFont').value;
|
|
const previewText = document.getElementById('previewText');
|
|
previewText.style.fontFamily = selectedFont;
|
|
}
|
|
|
|
// Add event listener to font dropdown
|
|
document.getElementById('selectedFont').addEventListener('change', updatePreview);
|
|
|
|
// Call function to fetch and populate Google Fonts
|
|
fetchGoogleFonts();
|
|
|
|
// Initial call to update preview
|
|
updatePreview();
|
|
</script>
|
|
<style>
|
|
.google-fonts-container {
|
|
max-width: 600px;
|
|
margin: 0 auto;
|
|
padding: 20px;
|
|
border: 1px solid #ccc;
|
|
border-radius: 8px;
|
|
background-color: #3d3d3d;
|
|
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
|
margin-top: 30px;
|
|
}
|
|
|
|
.google-fonts-heading {
|
|
font-family: 'Roboto', sans-serif;
|
|
font-weight: 400;
|
|
margin-bottom: 20px;
|
|
text-align: center;
|
|
}
|
|
|
|
.google-fonts-select {
|
|
font-family: 'Roboto', sans-serif;
|
|
font-size: 16px;
|
|
padding: 8px;
|
|
width: 100%;
|
|
margin-bottom: 20px;
|
|
border: 1px solid #ccc;
|
|
border-radius: 4px;
|
|
background-color: #3d3d3d;
|
|
}
|
|
|
|
.google-fonts-preview {
|
|
font-family: 'Roboto', sans-serif;
|
|
font-size: 25px;
|
|
padding: 10px;
|
|
border: 1px solid #ccc;
|
|
border-radius: 4px;
|
|
background-color: #3d3d3d;
|
|
}
|
|
</style>
|