Générateur de lettres artistiques Flickr (Épelez avec des photos)

370 jhgtdfhgg

Ouvrir dans l'éditeur Video Publiez votre code

Générateur de lettres artistiques Flickr (Épelez avec des photos)

Recommandé

24 March 2025

Un code par smartarray391

27 September 2025

Achetez des TikTok Coins : rechargez et envoyez des cadeaux

13 September 2025

Animation de la barre de chargement CSS HTML

HTML

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.0//EN"
          "http://www.w3.org/TR/xhtml-basic/xhtml-basic10.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <link rel="stylesheet" type="text/css" href="kwf.css" />
  <script type="text/javascript" src="prototype-1.6.0.2.js"></script>
  <script type="text/javascript" src="kwf.js"></script>
  <title>Kotoba with Flickr</title>
</head>

<body>
  <h1>Kotoba with <span class="flick">Flick</span><span class="r">r</span></h1>

<div id="footer">
    © 2005-2008 KATO Kazuyoshi @ <a href="http://8-p.info">8-p.info</a> -
    Powered by <a href="http://www.flickr.com/services/api/">Flickr API</a>
  </p>
</body>

<!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 version 2010 Generator</title>
    <style>
        body {
            font-family: "Helvetica Neue", Arial, sans-serif;
            background-color: #f4f4f4;
            color: #333;
            text-align: center;
            padding: 50px;
        }
        .container {
            background: white;
            max-width: 800px;
            margin: 0 auto;
            padding: 30px;
            border-radius: 15px;
            box-shadow: 0 4px 15px rgba(0,0,0,0.1);
            border: 1px solid #ddd;
        }
        h1 {
            color: #ff0084; /* Flickr Pink */
            font-size: 2.5em;
            margin-bottom: 10px;
        }
        h1 span {
            color: #0063dc; /* Flickr Blue */
        }
        p {
            color: #666;
            margin-bottom: 25px;
        }
        .controls {
            margin-bottom: 30px;
        }
        input[type="text"] {
            padding: 12px;
            width: 300px;
            border: 2px solid #ccc;
            border-radius: 5px;
            font-size: 1.1em;
            outline: none;
        }
        input[type="text"]:focus {
            border-color: #0063dc;
        }
        button {
            padding: 12px 25px;
            font-size: 1.1em;
            background-color: #ff0084;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            font-weight: bold;
            transition: background 0.2s;
        }
        button:hover {
            background-color: #d4006f;
        }
        #output {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 10px;
            margin-top: 30px;
            min-height: 120px;
        }
        .letter-box {
            width: 100px;
            height: 100px;
            background: #eee;
            border: 1px solid #ccc;
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
            border-radius: 5px;
            position: relative;
        }
        .letter-box img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        .footer {
            margin-top: 40px;
            font-size: 0.8em;
            color: #999;
        }
    </style>
</head>
<body>

<div class="container">
    <h1>Spell <span>with</span> Flickr</h1>
    <p>Enter a word below to generate Flickr letter art (2010 Edition)</p>
    
    <div class="controls">
        <input type="text" id="wordInput" placeholder="Type something..." maxlength="15">
        <button onclick="generateSpell()">Spell It!</button>
    </div>

output.innerHTML = ''; // Clear previous

for (let i = 0; i < input.length; i++) {
            const char = input[i];
            const letterBox = document.createElement('div');
            letterBox.className = 'letter-box';
            
            // Simulating Flickr static image URLs for specific letters
            // In a live version, these would be dynamic IDs from a Flickr search
            const img = document.createElement('img');
            
            // Using a placeholder service that mimics the 'Flickr letter' aesthetic
            // Randomizing seed slightly to simulate different photos for the same letter
            const randomSeed = Math.floor(Math.random() * 1000);
            img.src = `https://placehold.jp/24/ff0084/ffffff/100x100.png?text=${char}&random=${randomSeed}`;
            img.alt = `Flickr Letter ${char}`;
            
            // Visual effect: Fade in
            img.style.opacity = 0;
            img.onload = function() {
                this.style.transition = "opacity 0.5s";
                this.style.opacity = 1;
            };

letterBox.appendChild(img);
            output.appendChild(letterBox);
        }
    }

// Allow 'Enter' key to trigger generation
    document.getElementById('wordInput').addEventListener('keypress', function (e) {
        if (e.key === 'Enter') {
            generateSpell();
        }
    });
</script>

</body>
</html>

Recommandé

Un code par smartarray391

Achetez des TikTok Coins : rechargez et envoyez des cadeaux

Animation de la barre de chargement CSS HTML

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS