Scriptify/test.html at main · ArafathUIU/Scriptify · GitHub

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
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>AI Writing Assistant</title>
  <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/forms"></script>
  <script src="https://cdn.jsdelivr.net/npm/alpinejs" defer></script>
</head>
<body class="bg-gray-50 text-gray-800">
  <div class="max-w-4xl mx-auto p-6">
    <header class="text-center mb-8">
      <h1 class="text-4xl font-bold text-blue-700">AI Writing Assistant ✍️</h1>
      <p class="text-gray-600 mt-2">Paraphrase, Improve Style, and Write Better Instantly</p>
    </header>

    <div class="bg-white rounded-2xl shadow-lg p-6 space-y-6">
      <form method="post" class="space-y-4">
        <textarea name="input_text" rows="6" placeholder="Paste your text here..." class="w-full border-gray-300 rounded-xl shadow-sm p-4 focus:ring-blue-500 focus:border-blue-500"></textarea>

        <div class="flex flex-wrap gap-3 justify-center">
          <button name="action" value="paraphrase" class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-xl font-medium">Paraphrase</button>
          <button name="action" value="formal" class="bg-green-600 hover:bg-green-700 text-white px-4 py-2 rounded-xl font-medium">Make Formal</button>
          <button name="action" value="concise" class="bg-yellow-500 hover:bg-yellow-600 text-white px-4 py-2 rounded-xl font-medium">Make Concise</button>
          <button name="action" value="vocabulary" class="bg-purple-600 hover:bg-purple-700 text-white px-4 py-2 rounded-xl font-medium">Enhance Vocabulary</button>
        </div>
      </form>

      {% if result %}
      <div class="mt-6">
        <h2 class="text-xl font-semibold mb-2 text-gray-700">✨ Improved Output:</h2>
        <div class="bg-gray-100 p-4 rounded-xl shadow-inner whitespace-pre-wrap">{{ result }}</div>

        <div class="flex gap-4 mt-4">
          <button onclick="navigator.clipboard.writeText(`{{ result }}`)" class="text-sm text-white bg-blue-500 hover:bg-blue-600 px-3 py-1 rounded-lg">Copy</button>
          <a href="data:text/plain;charset=utf-8,{{ result|urlencode }}" download="result.txt" class="text-sm text-white bg-gray-600 hover:bg-gray-700 px-3 py-1 rounded-lg">Download</a>
        </div>
      </div>
      {% endif %}
    </div>

    <footer class="text-center text-sm text-gray-500 mt-12">
      Created by <a href="https://github.com/ArafathUIU" target="_blank" class="text-blue-600 hover:underline">Md. Arafath Hossain Akash</a>
    </footer>
  </div>
</body>
</html>