python-backend-setup/index.html at main · leoli51/python-backend-setup · 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
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
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>Python Backend Project Generator</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap" rel="stylesheet" />
  <style>
    body { font-family: 'Inter', sans-serif; }
  </style>
</head>
<body class="bg-gray-100 min-h-screen flex items-center justify-center px-4">
    <div class="w-full max-w-2xl bg-white shadow-xl rounded-2xl p-8">
      <div class="flex justify-between items-center mb-4">
        <h1 class="text-3xl font-bold text-gray-800">FastAPI Project Generator</h1>
        <a href="https://github.com/leoli51/python-backend-setup" target="_blank"
           class="text-sm text-indigo-600 hover:underline font-medium">
          ⭐ Star on GitHub? :)
        </a>
      </div>

      <p id="description" class="text-gray-500 mb-6 text-center"></p>

      <form id="projectForm" class="space-y-6">

        <fieldset class="border border-gray-200 p-4 rounded-md space-y-2">
          <legend class="text-sm font-semibold text-gray-700 px-1">Project Metadata</legend>

          <!-- Project Name -->
          <div>
            <label class="block text-sm font-medium text-gray-700">
              Project Name <span class="text-red-500">*</span>
            </label>
            <input type="text" id="project-name" required placeholder="my-fastapi-app"
              class="mt-1 w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring focus:ring-indigo-200 focus:ring-opacity-50"/>
          </div>

          <!-- Python Version -->
          <div>
            <label class="block text-sm font-medium text-gray-700">
              Python Version <span class="text-red-500">*</span>
            </label>
            <input type="text" id="python-version" required placeholder="3.10"
              class="mt-1 w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring focus:ring-indigo-200 focus:ring-opacity-50"/>
          </div>

          <!-- Authors -->
          <div>
            <label class="block text-sm font-medium text-gray-700">
              Authors <span class="text-red-500">*</span>
            </label>
            <input type="text" id="authors" placeholder="Name <email@example.com>, Another Name <mail@x.com>"
              class="mt-1 w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring focus:ring-indigo-200 focus:ring-opacity-50"/>
            <p id="authors-error" class="text-sm text-red-500 mt-1 hidden">Invalid format. Use: Name LastName &lt;email@example.com&gt;</p>
          </div>

          <!-- Description -->
          <div>
            <label class="block text-sm font-medium text-gray-700">Project Description</label>
            <input type="text" id="project-description" placeholder="My FastAPI project"
              class="mt-1 w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring focus:ring-indigo-200 focus:ring-opacity-50"/>
          </div>

          <!-- License -->
          <div>
            <label class="block text-sm font-medium text-gray-700">License</label>
            <input type="text" id="license" placeholder="MIT"
              class="mt-1 w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring focus:ring-indigo-200 focus:ring-opacity-50"/>
          </div>

          <!-- Poetry Version-->
          <div>
            <label class="block text-sm font-medium text-gray-700">Poetry Version</label>
            <select id="poetry-version"
              class="mt-1 w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring focus:ring-indigo-200 focus:ring-opacity-50">
              <option value="v1">Version 1</option>
              <option value="v2">Version 2</option>
            </select>
          </div>

        </fieldset>

        <fieldset class="border border-gray-200 p-4 rounded-md">
          <legend class="text-sm font-semibold text-gray-700 px-1">Optional Features</legend>

          <!-- VSCode Run Config -->
          <div class="flex items-center justify-between">
            <label for="include-vscode" class="text-sm text-gray-700">Include VSCode run config</label>
            <input
              id="include-vscode"
              type="checkbox"
              class="h-5 w-5 text-indigo-600 rounded border-gray-300 focus:ring-indigo-500"
            />
          </div>
        </fieldset>


      </form>


      <button id="generateBtn" disabled
        class="w-full bg-indigo-400 text-white font-semibold py-2 px-4 rounded-lg transition duration-200 mt-4 cursor-not-allowed">
        Generate Project
      </button>

      <div id="statusMessage" class="text-center mt-4 text-sm text-gray-500 hidden">Preparing your project...</div>
    </div>

    <!-- JS deps -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.0/jszip.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2.0.5/FileSaver.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/mustache@4.2.0/mustache.min.js"></script>
    <script src="script.js" defer></script>
  </body>

</html>