mirror of
https://github.com/pacnpal/thrillwiki_django_no_react.git
synced 2025-12-20 11:31:07 -05:00
cb944485b8
Integrates Django Cotton components with new test pages, updating button and input component templates to correctly handle `x_data` and `x_on` attributes for improved interactivity. Replit-Commit-Author: Agent Replit-Commit-Session-Id: eff39de1-3afa-446d-a965-acaf61837fc7 Replit-Commit-Checkpoint-Type: intermediate_checkpoint Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/d6d61dac-164d-45dd-929f-7dcdfd771b64/eff39de1-3afa-446d-a965-acaf61837fc7/J3NgjVS
64 lines
2.3 KiB
HTML
64 lines
2.3 KiB
HTML
{% extends 'base/base.html' %}
|
|
{% load static %}
|
|
{% load cotton %}
|
|
|
|
{% block title %}Simple Cotton Test - ThrillWiki{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="max-w-4xl mx-auto space-y-8">
|
|
<div class="text-center">
|
|
<h1 class="text-3xl font-bold text-gray-900 dark:text-white mb-4">
|
|
Simple Cotton Components Test
|
|
</h1>
|
|
<p class="text-lg text-gray-600 dark:text-gray-400">
|
|
Basic test of Cotton components
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Test 1: Simple Button -->
|
|
<section class="bg-white dark:bg-gray-800 rounded-lg p-6 shadow-sm border">
|
|
<h2 class="text-xl font-semibold mb-4">1. Button Component</h2>
|
|
|
|
<div class="space-y-3">
|
|
<c-ui.button text="Test Button" />
|
|
<c-ui.button variant="outline" text="Outline Button" />
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Test 2: Simple Card -->
|
|
<section class="bg-white dark:bg-gray-800 rounded-lg p-6 shadow-sm border">
|
|
<h2 class="text-xl font-semibold mb-4">2. Card Component</h2>
|
|
|
|
<c-ui.card title="Test Card" description="This is a test card">
|
|
<c-slot:content>
|
|
<p>Card content goes here.</p>
|
|
</c-slot:content>
|
|
</c-ui.card>
|
|
</section>
|
|
|
|
<!-- Test 3: Simple Input -->
|
|
<section class="bg-white dark:bg-gray-800 rounded-lg p-6 shadow-sm border">
|
|
<h2 class="text-xl font-semibold mb-4">3. Input Component</h2>
|
|
|
|
<c-ui.input placeholder="Test input field" />
|
|
</section>
|
|
|
|
<!-- Test 4: Simple Status Badge -->
|
|
<section class="bg-white dark:bg-gray-800 rounded-lg p-6 shadow-sm border">
|
|
<h2 class="text-xl font-semibold mb-4">4. Status Badge Component</h2>
|
|
|
|
<c-ui.status_badge status="OPERATIONAL" />
|
|
</section>
|
|
|
|
<!-- Success indicator -->
|
|
<section class="bg-green-50 dark:bg-green-900/20 rounded-lg p-6 border border-green-200 dark:border-green-700">
|
|
<h2 class="text-xl font-semibold mb-4 text-green-800 dark:text-green-200">
|
|
<i class="fas fa-check-circle mr-2"></i>
|
|
Basic Cotton Test Complete
|
|
</h2>
|
|
<p class="text-green-700 dark:text-green-300">
|
|
If you can see this page without errors, basic Cotton components are working.
|
|
</p>
|
|
</section>
|
|
</div>
|
|
{% endblock %} |