Generador de letras artísticas de Flickr (Deletrear con fotos)

881 jhgtdfhgg

Abrir en el editor Publica tu código

Generador de letras artísticas de Flickr (Deletrear con fotos)

Recomendado

18 December 2025

Pie de página de atribución CSS: fijo, centrado y transparente

29 December 2025

Diseño de tarjeta HTML: fragmento de sitio web en francés

17 September 2024

Calculadora de fecha

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>

CSS