Flickr Spell : Générateur de lettres et de chiffres pour images

490 gsdffsfdsdsf

Ouvrir dans l'éditeur Publiez votre code

Flickr Spell : Générateur de lettres et de chiffres pour images

Recommandé

22 April 2023

Menu déroulant CSS

23 August 2025

Modèle HTML pour la conception de sites Web, l'expérience numérique et les podcasts

23 November 2024

Page de destination – ImprovalAI

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Spell with Flickr Generator</title>
    <style>
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background-color: #f4f4f9;
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 50px;
        }
        .container {
            background: white;
            padding: 30px;
            border-radius: 8px;
            box-shadow: 0 4px 15px rgba(0,0,0,0.1);
            text-align: center;
            max-width: 800px;
            width: 100%;
        }
        h1 { color: #ff0084; }
        p { color: #0063dc; font-weight: bold; }
        input {
            padding: 12px;
            width: 70%;
            border: 2px solid #ddd;
            border-radius: 4px;
            font-size: 16px;
            outline: none;
        }
        input:focus { border-color: #0063dc; }
        button {
            padding: 12px 25px;
            background-color: #ff0084;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 16px;
            transition: background 0.3s;
        }
        button:hover { background-color: #d4006f; }
        #output {
            margin-top: 30px;
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 10px;
        }
        .flickr-letter {
            width: 100px;
            height: 100px;
            object-fit: cover;
            border-radius: 5px;
            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
            background-color: #eee;
        }
        .space { width: 40px; }
        .error { color: red; margin-top: 10px; font-size: 0.9em; }
    </style>
</head>
<body>

<div class="container">
    <h1>Spell with Flickr</h1>
    <p>One Letter & One Digit Group Generator</p>
    <input type="text" id="userInput" placeholder="Enter letters or numbers..." maxlength="20">
    <button onclick="generateSpell()">Spell It!</button>
    <div id="error-msg" class="error"></div>
    <div id="output"></div>
</div>

async function generateSpell() {
        const text = document.getElementById('userInput').value.toLowerCase();
        const output = document.getElementById('output');
        const errorMsg = document.getElementById('error-msg');
        
        output.innerHTML = 'Loading...';
        errorMsg.innerText = '';

if (!text) {
            output.innerHTML = '';
            return;
        }

if (API_KEY === 'YOUR_FLICKR_API_KEY_HERE') {
            errorMsg.innerText = 'Please insert a valid Flickr API Key in the code.';
            output.innerHTML = '';
            return;
        }

const chars = text.split('');
        const results = [];

try {
            for (let char of chars) {
                if (char === ' ') {
                    results.push('<div class="space"></div>');
                    continue;
                }

async function fetchFlickrPhoto(char, groupId) {
        // Search for photos in the specific group with the character as a tag
        const url = `https://www.flickr.com/services/rest/?method=flickr.photos.search&api_key=${API_KEY}&group_id=${groupId}&tags=${char}&per_page=10&format=json&nojsoncallback=1&sort=interestingness-desc`;
        
        const response = await fetch(url);
        const data = await response.json();

if (data.photos && data.photos.photo.length > 0) {
            // Pick a random photo from the top results
            const randomIndex = Math.floor(Math.random() * Math.min(data.photos.photo.length, 5));
            const p = data.photos.photo[randomIndex];
            // Construct Flickr Image URL: https://live.staticflickr.com/{server-id}/{id}_{secret}_{size-suffix}.jpg
            return `https://live.staticflickr.com/${p.server}/${p.id}_${p.secret}_q.jpg`;
        }
        return null;
    }
</script>

</body>
</html>

CSS