Upload 3 files

templates/cpanel/tags/create.html

@@ -0,0 +1,118 @@
+{% extends "base.html" %}
+
+{% block title %}Create Tag - PyRunner{% endblock %}
+
+{% block content %}
+<div class="flex">
+    {% include "cpanel/_sidebar.html" %}
+
+    <div class="flex-1 p-8">
+        <!-- Header -->
+        <div class="mb-8">
+            <nav class="flex items-center space-x-2 text-sm text-code-muted mb-4">
+                <a href="{% url 'cpanel:tag_list' %}" class="hover:text-code-accent">Tags</a>
+                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
+                </svg>
+                <span class="text-code-text">Create Tag</span>
+            </nav>
+            <h1 class="text-2xl font-bold text-code-text">Create New Tag</h1>
+            <p class="text-code-muted">Add a tag to organize and categorize your scripts</p>
+        </div>
+
+        <!-- Form -->
+        <div class="bg-code-surface border border-code-border rounded-xl p-6 max-w-2xl">
+            <form method="post">
+                {% csrf_token %}
+
+                <!-- Tag Name -->
+                <div class="mb-6">
+                    <label for="id_name" class="block text-sm font-medium text-code-text mb-2">
+                        {{ form.name.label }}
+                    </label>
+                    {{ form.name }}
+                    {% if form.name.errors %}
+                    <p class="mt-1 text-sm text-code-red">{{ form.name.errors.0 }}</p>
+                    {% endif %}
+                </div>
+
+                <!-- Color -->
+                <div class="mb-6">
+                    <label class="block text-sm font-medium text-code-text mb-2">
+                        {{ form.color.label }}
+                    </label>
+                    <input type="hidden" name="color" id="id_color" value="gray">
+                    <div class="flex items-center gap-3">
+                        <button type="button" data-color="gray" class="color-circle w-8 h-8 rounded-full ring-2 ring-white ring-offset-2 ring-offset-code-surface transition-all hover:scale-110" style="background-color: rgb(107, 114, 128);"></button>
+                        <button type="button" data-color="red" class="color-circle w-8 h-8 rounded-full ring-2 ring-transparent ring-offset-2 ring-offset-code-surface transition-all hover:scale-110" style="background-color: rgb(239, 68, 68);"></button>
+                        <button type="button" data-color="orange" class="color-circle w-8 h-8 rounded-full ring-2 ring-transparent ring-offset-2 ring-offset-code-surface transition-all hover:scale-110" style="background-color: rgb(249, 115, 22);"></button>
+                        <button type="button" data-color="yellow" class="color-circle w-8 h-8 rounded-full ring-2 ring-transparent ring-offset-2 ring-offset-code-surface transition-all hover:scale-110" style="background-color: rgb(234, 179, 8);"></button>
+                        <button type="button" data-color="green" class="color-circle w-8 h-8 rounded-full ring-2 ring-transparent ring-offset-2 ring-offset-code-surface transition-all hover:scale-110" style="background-color: rgb(34, 197, 94);"></button>
+                        <button type="button" data-color="blue" class="color-circle w-8 h-8 rounded-full ring-2 ring-transparent ring-offset-2 ring-offset-code-surface transition-all hover:scale-110" style="background-color: rgb(59, 130, 246);"></button>
+                        <button type="button" data-color="purple" class="color-circle w-8 h-8 rounded-full ring-2 ring-transparent ring-offset-2 ring-offset-code-surface transition-all hover:scale-110" style="background-color: rgb(168, 85, 247);"></button>
+                        <button type="button" data-color="pink" class="color-circle w-8 h-8 rounded-full ring-2 ring-transparent ring-offset-2 ring-offset-code-surface transition-all hover:scale-110" style="background-color: rgb(236, 72, 153);"></button>
+                    </div>
+                    <div class="mt-3">
+                        <span class="text-sm text-code-muted mr-2">Preview:</span>
+                        <span id="tag-preview" class="inline-flex items-center px-3 py-1 text-sm rounded-full tag-gray">
+                            Sample Tag
+                        </span>
+                    </div>
+                </div>
+
+                <!-- Actions -->
+                <div class="flex items-center justify-end space-x-4 pt-6 border-t border-code-border">
+                    <a href="{% url 'cpanel:tag_list' %}"
+                       class="px-4 py-2 bg-code-surface border border-code-border hover:border-code-accent text-code-text rounded-lg transition-colors">
+                        Cancel
+                    </a>
+                    <button type="submit"
+                            class="px-4 py-2 bg-code-accent hover:bg-code-accent/90 text-white font-semibold rounded-lg transition-colors">
+                        Create Tag
+                    </button>
+                </div>
+            </form>
+        </div>
+    </div>
+</div>
+
+<script>
+document.addEventListener('DOMContentLoaded', function() {
+    const colorInput = document.getElementById('id_color');
+    const nameInput = document.getElementById('id_name');
+    const preview = document.getElementById('tag-preview');
+    const colorCircles = document.querySelectorAll('.color-circle');
+
+    function updatePreview() {
+        const color = colorInput.value || 'gray';
+        const name = nameInput.value || 'Sample Tag';
+
+        preview.className = preview.className.replace(/tag-\w+/g, '');
+        preview.classList.add('tag-' + color);
+        preview.classList.add('inline-flex', 'items-center', 'px-3', 'py-1', 'text-sm', 'rounded-full');
+        preview.textContent = name;
+    }
+
+    function selectColor(color) {
+        colorInput.value = color;
+        colorCircles.forEach(circle => {
+            if (circle.dataset.color === color) {
+                circle.classList.remove('ring-transparent');
+                circle.classList.add('ring-white');
+            } else {
+                circle.classList.remove('ring-white');
+                circle.classList.add('ring-transparent');
+            }
+        });
+        updatePreview();
+    }
+
+    colorCircles.forEach(circle => {
+        circle.addEventListener('click', () => selectColor(circle.dataset.color));
+    });
+
+    nameInput.addEventListener('input', updatePreview);
+    updatePreview();
+});
+</script>
+{% endblock %}

templates/cpanel/tags/edit.html

@@ -0,0 +1,127 @@
+{% extends "base.html" %}
+
+{% block title %}Edit Tag - PyRunner{% endblock %}
+
+{% block content %}
+<div class="flex">
+    {% include "cpanel/_sidebar.html" %}
+
+    <div class="flex-1 p-8">
+        <!-- Header -->
+        <div class="mb-8">
+            <nav class="flex items-center space-x-2 text-sm text-code-muted mb-4">
+                <a href="{% url 'cpanel:tag_list' %}" class="hover:text-code-accent">Tags</a>
+                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
+                </svg>
+                <span class="text-code-text">Edit Tag</span>
+            </nav>
+            <h1 class="text-2xl font-bold text-code-text">Edit Tag</h1>
+            <p class="text-code-muted">Update tag name or color</p>
+        </div>
+
+        <!-- Form -->
+        <div class="bg-code-surface border border-code-border rounded-xl p-6 max-w-2xl">
+            <form method="post">
+                {% csrf_token %}
+
+                <!-- Tag Name -->
+                <div class="mb-6">
+                    <label for="id_name" class="block text-sm font-medium text-code-text mb-2">
+                        {{ form.name.label }}
+                    </label>
+                    {{ form.name }}
+                    {% if form.name.errors %}
+                    <p class="mt-1 text-sm text-code-red">{{ form.name.errors.0 }}</p>
+                    {% endif %}
+                </div>
+
+                <!-- Color -->
+                <div class="mb-6">
+                    <label class="block text-sm font-medium text-code-text mb-2">
+                        {{ form.color.label }}
+                    </label>
+                    <input type="hidden" name="color" id="id_color" value="{{ tag.color }}">
+                    <div class="flex items-center gap-3">
+                        <button type="button" data-color="gray" class="color-circle w-8 h-8 rounded-full ring-2 {% if tag.color == 'gray' %}ring-white{% else %}ring-transparent{% endif %} ring-offset-2 ring-offset-code-surface transition-all hover:scale-110" style="background-color: rgb(107, 114, 128);"></button>
+                        <button type="button" data-color="red" class="color-circle w-8 h-8 rounded-full ring-2 {% if tag.color == 'red' %}ring-white{% else %}ring-transparent{% endif %} ring-offset-2 ring-offset-code-surface transition-all hover:scale-110" style="background-color: rgb(239, 68, 68);"></button>
+                        <button type="button" data-color="orange" class="color-circle w-8 h-8 rounded-full ring-2 {% if tag.color == 'orange' %}ring-white{% else %}ring-transparent{% endif %} ring-offset-2 ring-offset-code-surface transition-all hover:scale-110" style="background-color: rgb(249, 115, 22);"></button>
+                        <button type="button" data-color="yellow" class="color-circle w-8 h-8 rounded-full ring-2 {% if tag.color == 'yellow' %}ring-white{% else %}ring-transparent{% endif %} ring-offset-2 ring-offset-code-surface transition-all hover:scale-110" style="background-color: rgb(234, 179, 8);"></button>
+                        <button type="button" data-color="green" class="color-circle w-8 h-8 rounded-full ring-2 {% if tag.color == 'green' %}ring-white{% else %}ring-transparent{% endif %} ring-offset-2 ring-offset-code-surface transition-all hover:scale-110" style="background-color: rgb(34, 197, 94);"></button>
+                        <button type="button" data-color="blue" class="color-circle w-8 h-8 rounded-full ring-2 {% if tag.color == 'blue' %}ring-white{% else %}ring-transparent{% endif %} ring-offset-2 ring-offset-code-surface transition-all hover:scale-110" style="background-color: rgb(59, 130, 246);"></button>
+                        <button type="button" data-color="purple" class="color-circle w-8 h-8 rounded-full ring-2 {% if tag.color == 'purple' %}ring-white{% else %}ring-transparent{% endif %} ring-offset-2 ring-offset-code-surface transition-all hover:scale-110" style="background-color: rgb(168, 85, 247);"></button>
+                        <button type="button" data-color="pink" class="color-circle w-8 h-8 rounded-full ring-2 {% if tag.color == 'pink' %}ring-white{% else %}ring-transparent{% endif %} ring-offset-2 ring-offset-code-surface transition-all hover:scale-110" style="background-color: rgb(236, 72, 153);"></button>
+                    </div>
+                    <div class="mt-3">
+                        <span class="text-sm text-code-muted mr-2">Preview:</span>
+                        <span id="tag-preview" class="inline-flex items-center px-3 py-1 text-sm rounded-full tag-{{ tag.color }}">
+                            {{ tag.name }}
+                        </span>
+                    </div>
+                </div>
+
+                <!-- Usage Info -->
+                {% if tag.script_count > 0 %}
+                <div class="mb-6 p-4 bg-code-bg border border-code-border rounded-lg">
+                    <p class="text-sm text-code-muted">
+                        This tag is used by <strong class="text-code-text">{{ tag.script_count }} script{{ tag.script_count|pluralize }}</strong>.
+                        Changes will be reflected immediately.
+                    </p>
+                </div>
+                {% endif %}
+
+                <!-- Actions -->
+                <div class="flex items-center justify-end space-x-4 pt-6 border-t border-code-border">
+                    <a href="{% url 'cpanel:tag_list' %}"
+                       class="px-4 py-2 bg-code-surface border border-code-border hover:border-code-accent text-code-text rounded-lg transition-colors">
+                        Cancel
+                    </a>
+                    <button type="submit"
+                            class="px-4 py-2 bg-code-accent hover:bg-code-accent/90 text-white font-semibold rounded-lg transition-colors">
+                        Update Tag
+                    </button>
+                </div>
+            </form>
+        </div>
+    </div>
+</div>
+
+<script>
+document.addEventListener('DOMContentLoaded', function() {
+    const colorInput = document.getElementById('id_color');
+    const nameInput = document.getElementById('id_name');
+    const preview = document.getElementById('tag-preview');
+    const colorCircles = document.querySelectorAll('.color-circle');
+
+    function updatePreview() {
+        const color = colorInput.value || 'gray';
+        const name = nameInput.value || 'Sample Tag';
+
+        preview.className = preview.className.replace(/tag-\w+/g, '');
+        preview.classList.add('tag-' + color);
+        preview.classList.add('inline-flex', 'items-center', 'px-3', 'py-1', 'text-sm', 'rounded-full');
+        preview.textContent = name;
+    }
+
+    function selectColor(color) {
+        colorInput.value = color;
+        colorCircles.forEach(circle => {
+            if (circle.dataset.color === color) {
+                circle.classList.remove('ring-transparent');
+                circle.classList.add('ring-white');
+            } else {
+                circle.classList.remove('ring-white');
+                circle.classList.add('ring-transparent');
+            }
+        });
+        updatePreview();
+    }
+
+    colorCircles.forEach(circle => {
+        circle.addEventListener('click', () => selectColor(circle.dataset.color));
+    });
+
+    nameInput.addEventListener('input', updatePreview);
+});
+</script>
+{% endblock %}

templates/cpanel/tags/list.html

@@ -0,0 +1,106 @@
+{% extends "base.html" %}
+
+{% block title %}Tags - PyRunner{% endblock %}
+
+{% block content %}
+<div class="flex">
+    {% include "cpanel/_sidebar.html" %}
+
+    <div class="flex-1 p-8">
+        <!-- Header -->
+        <div class="flex items-start justify-between mb-8">
+            <div>
+                <h1 class="text-2xl font-bold text-code-text">Tags</h1>
+                <p class="text-code-muted">Organize and categorize your scripts with tags</p>
+            </div>
+            <a href="{% url 'cpanel:tag_create' %}"
+               class="px-4 py-2 bg-code-accent hover:bg-code-accent/90 text-white font-semibold rounded-lg transition-colors inline-flex items-center">
+                <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"/>
+                </svg>
+                New Tag
+            </a>
+        </div>
+
+        <!-- Messages -->
+        {% if messages %}
+        <div class="mb-6 space-y-2">
+            {% for message in messages %}
+            <div class="p-4 rounded-lg {% if message.tags == 'error' %}bg-code-red/10 border border-code-red/30 text-code-red{% elif message.tags == 'success' %}bg-code-green/10 border border-code-green/30 text-code-green{% else %}bg-code-accent/10 border border-code-accent/30 text-code-accent{% endif %}">
+                {{ message }}
+            </div>
+            {% endfor %}
+        </div>
+        {% endif %}
+
+        <!-- Tags Table -->
+        {% if tags %}
+        <div class="bg-code-surface border border-code-border rounded-xl overflow-hidden">
+            <table class="w-full">
+                <thead class="bg-code-bg border-b border-code-border">
+                    <tr>
+                        <th class="px-6 py-3 text-left text-xs font-semibold text-code-muted uppercase tracking-wider">Tag</th>
+                        <th class="px-6 py-3 text-left text-xs font-semibold text-code-muted uppercase tracking-wider">Scripts</th>
+                        <th class="px-6 py-3 text-left text-xs font-semibold text-code-muted uppercase tracking-wider">Created</th>
+                        <th class="px-6 py-3 text-right text-xs font-semibold text-code-muted uppercase tracking-wider">Actions</th>
+                    </tr>
+                </thead>
+                <tbody class="divide-y divide-code-border">
+                    {% for tag in tags %}
+                    <tr class="hover:bg-code-bg/50 transition-colors">
+                        <td class="px-6 py-4">
+                            <span class="inline-flex items-center px-3 py-1 text-sm rounded-full tag-{{ tag.color }}">
+                                {{ tag.name }}
+                            </span>
+                        </td>
+                        <td class="px-6 py-4 text-code-text">
+                            <a href="{% url 'cpanel:script_list' %}?tag={{ tag.pk }}" class="hover:text-code-accent transition-colors">
+                                {{ tag.script_count }} script{{ tag.script_count|pluralize }}
+                            </a>
+                        </td>
+                        <td class="px-6 py-4 text-code-muted text-sm">
+                            {{ tag.created_at|timesince }} ago
+                        </td>
+                        <td class="px-6 py-4 text-right">
+                            <div class="flex items-center justify-end space-x-2">
+                                <a href="{% url 'cpanel:tag_edit' pk=tag.pk %}"
+                                   class="px-3 py-1.5 text-sm bg-code-surface border border-code-border hover:border-code-accent text-code-text rounded transition-colors">
+                                    Edit
+                                </a>
+                                <form method="post" action="{% url 'cpanel:tag_delete' pk=tag.pk %}"
+                                      onsubmit="return confirm('Are you sure you want to delete the tag &quot;{{ tag.name }}&quot;? It will be removed from all scripts.');"
+                                      class="inline">
+                                    {% csrf_token %}
+                                    <button type="submit"
+                                            class="px-3 py-1.5 text-sm bg-code-red/10 border border-code-red/30 hover:bg-code-red/20 text-code-red rounded transition-colors">
+                                        Delete
+                                    </button>
+                                </form>
+                            </div>
+                        </td>
+                    </tr>
+                    {% endfor %}
+                </tbody>
+            </table>
+        </div>
+        {% else %}
+        <div class="bg-code-surface border border-code-border rounded-xl p-12 text-center">
+            <div class="w-16 h-16 bg-code-accent/20 rounded-full flex items-center justify-center mx-auto mb-4">
+                <svg class="w-8 h-8 text-code-accent" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z"/>
+                </svg>
+            </div>
+            <h3 class="text-lg font-semibold text-code-text mb-2">No tags yet</h3>
+            <p class="text-code-muted mb-6">Create tags to organize and filter your scripts.</p>
+            <a href="{% url 'cpanel:tag_create' %}"
+               class="px-6 py-2 bg-code-accent hover:bg-code-accent/90 text-white font-semibold rounded-lg transition-colors inline-flex items-center">
+                <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"/>
+                </svg>
+                Create Tag
+            </a>
+        </div>
+        {% endif %}
+    </div>
+</div>
+{% endblock %}