Templates
Templates Documentation
The templates directory contains the HTML templates used by the Voters Verdict system. All templates use the Tera templating engine for dynamic content rendering.
Template Structure Overview
The templates are organized into several functional categories:
Core Templates
index.html
- The main landing page
- Contains sidebar, header, and footer components
- Provides navigation and theme management functionality
- Includes search and comments system integration
page.html
- Generic page template for content display
- Supports custom headers and footers
- Integrated with the sidebar navigation
section.html
- Used for displaying lists of items (e.g., voting sessions, ballots)
- Implements pagination and filtering
- Includes table styling and search functionality
landing.html
- Specialized template for hero sections
- Designed for marketing and welcome pages
- Supports featured content and call-to-action elements
Voting System Templates
votings.html.tera
- Lists available voting sessions
- Requires invite code authentication
- Links to voting sessions with invite codes
- Displays voting names sorted alphabetically
voting.html.tera
- Single voting session interface
- Displays voting candidates and criteria
- Handles ballot submission and viewing
- Supports voting style customization
cast-ballots.html.tera
- Ballot casting interface
- Allows users to submit their votes
- Validates input against criteria
- Displays vote confirmation
cast-user-ballots.html.tera
- User-specific ballot viewing
- Shows user's past votes
- Displays ballot details and results
closed-voting.html.tera
- Voting session closed interface
- Displays results and final tallies
- Provides voting summary
- May include administrative comments
Admin Templates
admin.html.tera
- Main admin panel
- Requires authentication with admin token
- Provides navigation to admin sub-pages
- Displays admin statistics and quick actions
admin-voting.html.tera
- Voting session management interface
- Allows creating, modifying, and closing votes
- Displays voting details and statistics
- Supports administrative actions
admin-modify-voting.html.tera
- Modify existing voting sessions
- Update voting configurations
- Change criteria and candidates
- Preview modifications before saving
admin-votings.html.tera
- List all voting sessions
- Display voting statistics
- Enable/disable voting sessions
- Quick access to voting management
admin-scripts.html.tera
- Admin script management interface
- View and manage administrative scripts
- Execute voting-related operations
manage-votings.html.tera
- General voting management
- Create new voting sessions
- Configure voting parameters
- Manage voting lifecycle
manage-votings-scripts.html.tera
- Voting-related scripts interface
- Display and manage voting scripts
- Execute voting operations programmatically
Ballot Management Templates
ballots.html.tera
- General ballot listing interface
- Display ballots for specific voting sessions
- Supports filtering and sorting
- Shows ballot details and results
user-locator.html.tera
- User lookup interface
- Find users by name or identifier
- Display user voting history
- Supports search functionality
Common and Utility Templates
macros.html.tera
- Contains reusable Tera macros for common UI elements
- Includes input fields, buttons, and form components
- Provides theme-aware styling functions
- Supports custom validation patterns
meta.html.tera
- HTML head section template
- Includes metadata, SEO tags
- Sets up theme and language preferences
- Configures social sharing tags
styles.html.tera
- CSS imports and theme configuration
- Loads external stylesheets
- Sets up CSS variables for theming
- Configures responsive design
table-styles.html.tera
- Table styling definitions
- Provides table layouts and styling
- Supports sortable and filterable tables
- Includes responsive table designs
table-wrapper.html.tera
- Table wrapper component
- Provides consistent table layout
- Supports scrolling and responsive behavior
- Includes table headers and footers
tables.html.tera
- Generic table template
- Displays data in table format
- Supports pagination and sorting
- Includes row and column styling
theme-switcher.html.tera
- Theme toggle component
- Allows users to switch between dark and light themes
- Persists theme preference in localStorage
- Provides smooth theme transitions
error.html.tera
- Error page template
- Displays error messages
- Provides navigation back to home
- Shows helpful error information
missing-data.html.tera
- Data missing interface
- Handles cases where required data is absent
- Provides instructions for data entry
- Includes administrative links
esc.html.tera
- Emergency or special voting interface
- Additional security features
- Special voting procedures
- Enhanced authentication
Template Features
Tera Features Used
- Filters: Data transformation (sorting, formatting)
- Loops: Iterating over collections
- Conditions: Conditional rendering
- Macros: Reusable template components
- Inheritance: Template inheritance and inclusion
Dynamic Content
- Voting Sessions: Dynamic voting lists
- Ballots: Real-time ballot display
- User Data: User information and history
- Results: Live voting results
- Criteria: Dynamic criteria definitions
Styling Integration
- DaisyUI Components: Pre-built UI components
- Tailwind Classes: Utility-first CSS framework
- Custom CSS: Theme-specific styles
- Responsive Design: Mobile-first approach
- Dark/Light Mode: Theme switching support
Customization
Templates can be customized by:
- Modifying HTML structure
- Adjusting Tera filters and macros
- Changing CSS classes and styles
- Adding custom JavaScript for interactivity
- Extending macros for new UI elements
Best Practices
- Use macros for reusable components
- Maintain consistent naming conventions
- Keep templates focused on single responsibilities
- Use semantic HTML for accessibility
- Include proper error handling
- Ensure responsive design across devices