Generatore di lettere artistiche Flickr (incantesimo con foto)

Apri nell'Editor Video Pubblica il Tuo Codice

Consigliato

9 February 2025

Modello di sito Web moderno per portfolio

27 May 2025

<?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>

<div class="footer">
        © 2010 Spell-Generator Utility | Powered by Flickr API (Mockup)
    </div>
</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>

Generatore di lettere artistiche Flickr (incantesimo con foto)

Consigliato

Cursore di immagini 2.0

Modello di sito Web moderno per portfolio

Un codice di alejandrokundrah

HTML

CSS

JS

Consigliato

Cursore di immagini 2.0

Modello di sito Web moderno per portfolio

Un codice di alejandrokundrah

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS