Hugging Face's logo

Spaces:
allknowingroger
/
Madewithwebsim
Running

App Files Community
Madewithwebsim
File size: 5,341 Bytes 
ad1dcd6
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
 
<html><head><base href="https://websim.ai/portmanteau-poet"><title>Portmanteau Poet: Word Fusion Extraordinaire</title>
<script src="https://cdn.tailwindcss.com"></script>
<style>
  @keyframes morph {
    0%, 100% { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; }
    50% { border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%; }
  }
  .morph-animation {
    animation: morph 8s ease-in-out infinite;
  }
</style>
</head>
<body class="bg-gradient-to-br from-purple-600 to-indigo-800 text-white min-h-screen font-sans">
  <header class="py-6 relative">
    <div class="container mx-auto px-4">
      <h1 class="text-4xl font-bold text-center">Portmanteau Poet</h1>
      <p class="mt-2 text-center text-purple-200">Word Fusion Extraordinaire</p>
    </div>
  </header>

  <main class="container mx-auto px-4 py-8">
    <div class="bg-white bg-opacity-20 backdrop-filter backdrop-blur-lg rounded-lg shadow-lg p-6 mb-8">
      <h2 class="text-2xl font-semibold mb-4">Craft Your Portmanteau</h2>
      <form id="portmanteau-form" class="space-y-4">
        <div>
          <label for="word1" class="block text-sm font-medium text-purple-200">First Word</label>
          <input type="text" id="word1" class="mt-1 block w-full px-3 py-2 bg-purple-700 border border-purple-500 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 text-white" placeholder="Enter first word">
        </div>
        <div>
          <label for="word2" class="block text-sm font-medium text-purple-200">Second Word</label>
          <input type="text" id="word2" class="mt-1 block w-full px-3 py-2 bg-purple-700 border border-purple-500 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 text-white" placeholder="Enter second word">
        </div>
        <div>
          <button type="submit" class="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-purple-900 bg-purple-300 hover:bg-purple-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500">
            Blend Words
          </button>
        </div>
      </form>
    </div>

    <div id="portmanteau-container" class="bg-white bg-opacity-20 backdrop-filter backdrop-blur-lg rounded-lg shadow-lg p-6 hidden">
      <h2 class="text-2xl font-semibold mb-4">Your Linguistic Creation</h2>
      <div id="portmanteau-content" class="space-y-4">
        <!-- Portmanteau will be inserted here -->
      </div>
    </div>
  </main>

  <div class="fixed bottom-4 right-4 w-32 h-32">
    <div class="w-full h-full bg-gradient-to-r from-pink-500 to-yellow-500 morph-animation"></div>
  </div>

  <script>
    document.getElementById('portmanteau-form').addEventListener('submit', function(e) {
      e.preventDefault();
      const word1 = document.getElementById('word1').value.trim();
      const word2 = document.getElementById('word2').value.trim();
      
      if (!word1 || !word2) {
        alert('Please enter both words.');
        return;
      }

      generatePortmanteau(word1, word2);
    });

    function generatePortmanteau(word1, word2) {
      // Show loading state
      const portmanteauContainer = document.getElementById('portmanteau-container');
      portmanteauContainer.classList.remove('hidden');
      const portmanteauContent = document.getElementById('portmanteau-content');
      portmanteauContent.innerHTML = '<p>Fusing lexical elements...</p>';

      // Simulate API call with setTimeout
      setTimeout(() => {
        const portmanteau = createPortmanteau(word1, word2);
        portmanteauContent.innerHTML = `
          <h3 class="text-3xl font-bold text-center">${portmanteau.word}</h3>
          <p class="italic text-center">${portmanteau.pronunciation}</p>
          <p class="mt-4">${portmanteau.definition}</p>
          <div class="mt-4">
            <h4 class="font-semibold">Etymology:</h4>
            <p>${portmanteau.etymology}</p>
          </div>
          <div class="mt-4">
            <h4 class="font-semibold">Example usage:</h4>
            <p class="italic">"${portmanteau.example}"</p>
          </div>
        `;
      }, 2000);
    }

    function createPortmanteau(word1, word2) {
      // This is a simplified portmanteau generation. In a real application, this would be much more sophisticated.
      const splitIndex1 = Math.floor(word1.length / 2);
      const splitIndex2 = Math.floor(word2.length / 2);

      const portmanteau = word1.slice(0, splitIndex1) + word2.slice(splitIndex2);

      // Generate a mock pronunciation
      const pronunciation = `/${portmanteau.split('').join('·')}/`;

      // Create a definition based on the original words
      const definition = `A combination of ${word1} and ${word2}, typically referring to a fusion of their characteristics or concepts.`;

      // Generate an etymology
      const etymology = `From ${word1} (${splitIndex1} letters) + ${word2} (${word2.length - splitIndex2} letters)`;

      // Create an example usage
      const example = `The new ${portmanteau} trend is taking the world by storm, combining the best aspects of ${word1} and ${word2}.`;

      return {
        word: portmanteau,
        pronunciation: pronunciation,
        definition: definition,
        etymology: etymology,
        example: example
      };
    }
  </script>
</body></html>