From 854d3ad2fe15890f6db3671e03ab2151124a54e4 Mon Sep 17 00:00:00 2001 From: Jacob Coffee Date: Fri, 15 Aug 2025 09:49:14 -0500 Subject: [PATCH] feat: add ui --- inspector/static/tailwind.config.js | 23 +++ inspector/static/tailwind.css | 69 +++++++++ inspector/templates/404.html | 21 ++- inspector/templates/base.html | 211 ++++++++++++++++++++-------- inspector/templates/code.html | 48 +++++-- inspector/templates/disasm.html | 100 +++++++++---- inspector/templates/index.html | 44 ++++++ inspector/templates/links.html | 26 +++- inspector/templates/releases.html | 109 ++++++++------ 9 files changed, 511 insertions(+), 140 deletions(-) create mode 100644 inspector/static/tailwind.config.js create mode 100644 inspector/static/tailwind.css diff --git a/inspector/static/tailwind.config.js b/inspector/static/tailwind.config.js new file mode 100644 index 0000000..591dc2b --- /dev/null +++ b/inspector/static/tailwind.config.js @@ -0,0 +1,23 @@ +/** @type {import('tailwindcss').Config} */ +module.exports = { + content: [ + "./inspector/templates/**/*.{html,js}", + "./inspector/templates/*.html" + ], + theme: { + extend: { + colors: { + 'python-blue': '#3776AB', + 'python-yellow': '#FFD43B', + 'python-blue-dark': '#2D5E8B', + 'python-blue-light': '#4E8DC8', + 'python-yellow-dark': '#FFCA00', + 'python-yellow-light': '#FFE57F', + }, + fontFamily: { + 'mono': ['ui-monospace', 'SFMono-Regular', 'Consolas', 'Liberation Mono', 'Menlo', 'monospace'], + } + }, + }, + plugins: [], +} \ No newline at end of file diff --git a/inspector/static/tailwind.css b/inspector/static/tailwind.css new file mode 100644 index 0000000..4b51adc --- /dev/null +++ b/inspector/static/tailwind.css @@ -0,0 +1,69 @@ +@tailwind base; +@tailwind components; +@tailwind utilities; + +@layer components { + .btn-primary { + @apply bg-python-blue hover:bg-python-blue-dark text-white font-semibold py-2 px-4 rounded-lg transition-colors duration-200 shadow-md hover:shadow-lg; + } + + .btn-secondary { + @apply bg-python-yellow hover:bg-python-yellow-dark text-gray-900 font-semibold py-2 px-4 rounded-lg transition-colors duration-200 shadow-md hover:shadow-lg; + } + + .input-primary { + @apply border-2 border-gray-300 rounded-lg px-4 py-2 focus:outline-none focus:border-python-blue focus:ring-2 focus:ring-python-blue/20 transition-all duration-200; + } + + .table-custom { + @apply min-w-full divide-y divide-gray-200 shadow-sm rounded-lg overflow-hidden; + } + + .table-custom thead { + @apply bg-python-blue text-white; + } + + .table-custom th { + @apply px-6 py-3 text-left text-xs font-medium uppercase tracking-wider; + } + + .table-custom tbody { + @apply bg-white divide-y divide-gray-200; + } + + .table-custom td { + @apply px-6 py-4 whitespace-nowrap text-sm; + } + + .table-custom tbody tr:hover { + @apply bg-gray-50 transition-colors duration-150; + } + + .card { + @apply bg-white rounded-lg shadow-md p-6 border border-gray-200; + } + + .link-primary { + @apply text-python-blue hover:text-python-blue-dark underline transition-colors duration-200; + } + + .badge { + @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium; + } + + .badge-success { + @apply bg-green-100 text-green-800; + } + + .badge-warning { + @apply bg-python-yellow-light text-gray-900; + } + + .badge-error { + @apply bg-red-100 text-red-800; + } + + .header-gradient { + @apply bg-gradient-to-r from-python-blue via-python-blue-dark to-python-blue; + } +} \ No newline at end of file diff --git a/inspector/templates/404.html b/inspector/templates/404.html index caa47e9..544698d 100644 --- a/inspector/templates/404.html +++ b/inspector/templates/404.html @@ -1,5 +1,24 @@ {% extends 'base.html' %} {% block body %} -

NOT FOUND

+
+
+ + + +
+ +

404 - Page Not Found

+

The page or package you're looking for doesn't exist.

+ +
+

Try searching for a different package or

+ + + + + Return to Home + +
+
{% endblock %} diff --git a/inspector/templates/base.html b/inspector/templates/base.html index 87433a4..a7017ee 100644 --- a/inspector/templates/base.html +++ b/inspector/templates/base.html @@ -1,68 +1,161 @@ - + + - {% block head %}{% endblock %} - + + PyPI Inspector + + + + + {% block head %}{% endblock %} - -
-

Inspector

-
- {% if h2 %} - - {% else %} - - {% endif %} - -
-
+ + +
+
+
+

+ 🕵️ + PyPI Inspector +

+ + +
+
+ {% if h2 %} + + {% else %} + + {% endif %} + +
+
+
+
+
+ + +
{% block above_body %}{% endblock %} - {% if h2 %} -

- {% if h2_link %} - {{ h2 }} - {% else %} - {{ h2 }} - {% endif %} - {% if h2_paren_link %} - ({{ h2_paren }}) - {% endif %} -

- {% endif %} - {% if h3 %} -

- {% if h3_link %} - {{ h3 }} - {% else %} - {{ h3 }} - {% endif %} - {% if h3_paren_link %} - ({{ h3_paren }}) - {% endif %} -

- {% endif %} - {% if h4 %} -

- {% if h4_link %} - {{ h4 }} - {% else %} - {{ h4 }} - {% endif %} -

- {% endif %} - {% if h5 %} -
- {% if h5_link %} - {{ h5 }} - {% else %} - {{ h5 }} - {% endif %} -
+ + + {% if h2 or h3 or h4 or h5 %} + {% endif %} - {% block body %}{% endblock %} + + +
+ {% block body %}{% endblock %} +
-