Flickr Letter Art Generator (Spell with Photos)

Open In Editor Video Publish Your Code

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

Flickr Letter Art Generator (Spell with Photos)

Recommended

HTML Light Effects Container with CSS

Portfolio Carousel with Synchronized Sliders

404 Page Not Found with CSS

HTML

CSS

JS

Recommended

HTML Light Effects Container with CSS

Portfolio Carousel with Synchronized Sliders

404 Page Not Found with CSS

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS