buildHtml
baseUrl https://kanbanscroll.pub
metaTags
editButton /edit.html
title Kanban Scroll | Beautiful Project Management
style.css

header
 class app-header
 div
  class header-content
  h1 Kanban Scroll
  div
   class board-actions
   button
    class new-board-btn
    id newBoardBtn
    + New Board
   div
    class board-selector
    select
     id boardSelector
     option Select Board...
nav
 class toolbar
 div
  class left-tools
  button
   class settings-btn
   id settingsBtn
   title Settings
   div ⚙️
  button
   class theme-btn
   id themeBtn
   title Toggle Theme
   div 🌓
 div
  class right-tools
  button
   class export-btn
   id exportBtn
   title Export Data
   div 📤
  button
   class import-btn
   id importBtn
   title Import Data
   div 📥
main
 class kanban-container
 div
  class columns-container
  id columnsContainer
  div
   class column
   id todoColumn
   h2 To Do
   div
    class add-card-btn
    id addTodoCard
    + Add Card
   div
    class cards-container
    id todoCards
  div
   class column
   id progressColumn
   h2 In Progress
   div
    class add-card-btn
    id addProgressCard
    + Add Card
   div
    class cards-container
    id progressCards
  div
   class column
   id doneColumn
   h2 Done
   div
    class add-card-btn
    id addDoneCard
    + Add Card
   div
    class cards-container
    id doneCards
div
 class modal-overlay
 id modalOverlay
div
 class card-modal
 id cardModal
 div
  class modal-header
  h2 Edit Card
  button
   class close-modal
   id closeModal
   ×
 div
  class modal-content
  div
   class card-title-section
   input
    type text
    id cardTitleInput
    placeholder Card title
  div
   class card-description-section
   textarea
    id cardDescriptionInput
    placeholder Add description...
  div
   class card-details
   div
    class detail-row
    label Due Date
    input
     type date
     id cardDueDate
   div
    class detail-row
    label Priority
    select
     id cardPriority
     option Low
     option Medium
     option High
     option Critical
   div
    class detail-row
    label Assignee
    input
     type text
     id cardAssignee
     placeholder Assign to...
   div
    class detail-row
    label Labels
    div
     class labels-container
     id cardLabels
     input
      type text
      id newLabelInput
      placeholder Add label...
     button
      class add-label-btn
      id addLabelBtn
      +
  div
   class modal-footer
   button
    class save-card-btn
    id saveCardBtn
    Save
   button
    class delete-card-btn
    id deleteCardBtn
    Delete
div
 class settings-modal
 id settingsModal
 div
  class modal-header
  h2 Settings
  button
   class close-modal
   id closeSettingsModal
   ×
 div
  class modal-content
  div
   class settings-section
   h3 Board Settings
   div
    class setting-row
    label Board Name
    input
     type text
     id boardNameInput
   div
    class setting-row
    label Add Column
    div
     class add-column-controls
     input
      type text
      id newColumnName
      placeholder Column name
     button
      class add-column-btn
      id addColumnBtn
      Add
   div
    class setting-row
    label Columns
    ul
     class columns-list
     id columnsList
  div
   class settings-section
   h3 Appearance
   div
    class setting-row
    label Theme Color
    select
     id themeColorSelect
     option Default
     option Blue
     option Green
     option Purple
     option Red
 div
  class modal-footer
  button
   class save-settings-btn
   id saveSettingsBtn
   Save Settings

script.js