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

766 jhgtdfhgg

Abrir en el editor Publica tu código

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

Recomendado

29 July 2024

horario de eventos

19 February 2026

Cifrador de archivos y texto AES en línea

27 January 2025

Un sitio de periódico responsivo

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