Tool Page: Video Ideas — single column

Ready

HTML
View
Context
Info
Notes


        
        <header class="dashboard-header" style="position:fixed;top:0;left:0;right:0;background:#fff;border-bottom:1px solid var(--primary-light);padding:0 20px;height:56px;display:flex;align-items:center;z-index:20;">
    <a href="#" style="display:flex;align-items:center;gap:8px;text-decoration:none;margin-right:auto;">
        <img src="https://app.tubespanner.com/themes/custom/tubespanner_purple/images/logo.svg" alt="TubeSpanner" style="height:28px;" onerror="this.style.display='none';this.nextElementSibling.style.display='block'">
        <strong style="display:none;font-family:'Satoshi';color:var(--primary-color);">TubeSpanner</strong>
    </a>
    <div style="display:flex;align-items:center;gap:8px;">
        <button class="btn btn-primary" style="font-size:0.875rem;padding:6px 14px;display:flex;align-items:center;gap:6px;">
            <span style="font-weight:300;font-size:1rem;">+</span> Create
            <span style="border-left:1px solid rgba(255,255,255,0.4);margin-left:4px;padding-left:8px;font-size:0.7rem;">&#9660;</span>
        </button>
        <div style="width:36px;height:36px;border-radius:50%;background:var(--primary-color);color:#fff;display:flex;align-items:center;justify-content:center;font-family:'Satoshi';font-weight:700;font-size:13px;cursor:pointer;">FK</div>
    </div>
</header>

<div class="dashaboard-main">

    <div class="app-sidebar-wrapper">
        <div class="app-sidebar" style="border-right:1px solid var(--primary-light);overflow-y:auto;">
            <ul class="list-unstyled sidebar-list-item" style="margin:0;padding:6px 0;">
                <li class="nav-item">
                    <a href="#" style="display:flex;align-items:center;padding:10px 14px;border-left:3px solid transparent;background:transparent;color:var(--title);text-decoration:none;font-family:'Satoshi';font-size:0.875rem;font-weight:500;">
                        <span style="width:20px;height:20px;border-radius:4px;background:#e5e7eb;flex-shrink:0;margin-right:10px;display:inline-block;"></span>
                        <span style="flex:1;">Dashboard</span>

                    </a>
                </li>
                <li class="nav-item active">
                    <a href="#" style="display:flex;align-items:center;padding:10px 14px;border-left:3px solid var(--primary-color);background:var(--primary-light);color:var(--primary-color);text-decoration:none;font-family:'Satoshi';font-size:0.875rem;font-weight:700;">
                        <span style="width:20px;height:20px;border-radius:4px;background:var(--primary-color);flex-shrink:0;margin-right:10px;display:inline-block;"></span>
                        <span style="flex:1;">Ideas</span>
                        <span style="font-size:0.6rem;color:var(--paragraph);">&#9660;</span>
                    </a>
                </li>
                <li class="nav-item">
                    <a href="#" style="display:flex;align-items:center;padding:10px 14px;border-left:3px solid transparent;background:transparent;color:var(--title);text-decoration:none;font-family:'Satoshi';font-size:0.875rem;font-weight:500;">
                        <span style="width:20px;height:20px;border-radius:4px;background:#e5e7eb;flex-shrink:0;margin-right:10px;display:inline-block;"></span>
                        <span style="flex:1;">Discover</span>
                        <span style="font-size:0.6rem;color:var(--paragraph);">&#9660;</span>
                    </a>
                </li>
                <li class="nav-item">
                    <a href="#" style="display:flex;align-items:center;padding:10px 14px;border-left:3px solid transparent;background:transparent;color:var(--title);text-decoration:none;font-family:'Satoshi';font-size:0.875rem;font-weight:500;">
                        <span style="width:20px;height:20px;border-radius:4px;background:#e5e7eb;flex-shrink:0;margin-right:10px;display:inline-block;"></span>
                        <span style="flex:1;">Plan</span>
                        <span style="font-size:0.6rem;color:var(--paragraph);">&#9660;</span>
                    </a>
                </li>
                <li class="nav-item">
                    <a href="#" style="display:flex;align-items:center;padding:10px 14px;border-left:3px solid transparent;background:transparent;color:var(--title);text-decoration:none;font-family:'Satoshi';font-size:0.875rem;font-weight:500;">
                        <span style="width:20px;height:20px;border-radius:4px;background:#e5e7eb;flex-shrink:0;margin-right:10px;display:inline-block;"></span>
                        <span style="flex:1;">Projects</span>
                        <span style="font-size:0.6rem;color:var(--paragraph);">&#9660;</span>
                    </a>
                </li>
                <li class="nav-item">
                    <a href="#" style="display:flex;align-items:center;padding:10px 14px;border-left:3px solid transparent;background:transparent;color:var(--title);text-decoration:none;font-family:'Satoshi';font-size:0.875rem;font-weight:500;">
                        <span style="width:20px;height:20px;border-radius:4px;background:#e5e7eb;flex-shrink:0;margin-right:10px;display:inline-block;"></span>
                        <span style="flex:1;">Growth</span>
                        <span style="font-size:0.6rem;color:var(--paragraph);">&#9660;</span>
                    </a>
                </li>
                <li class="nav-item">
                    <a href="#" style="display:flex;align-items:center;padding:10px 14px;border-left:3px solid transparent;background:transparent;color:var(--title);text-decoration:none;font-family:'Satoshi';font-size:0.875rem;font-weight:500;">
                        <span style="width:20px;height:20px;border-radius:4px;background:#e5e7eb;flex-shrink:0;margin-right:10px;display:inline-block;"></span>
                        <span style="flex:1;">Settings</span>

                    </a>
                </li>
            </ul>
            <div style="border-top:1px solid var(--primary-light);padding:12px 14px;margin-top:auto;">
                <div style="font-family:'Satoshi';font-size:0.8125rem;font-weight:700;color:var(--title);margin-bottom:2px;">Fluffy Kiwi</div>
                <div style="font-family:'Satoshi';font-size:0.75rem;color:var(--paragraph);">48 / 50 scripts used</div>
            </div>
        </div>
    </div>

    <div class="dashaboard-content" style="background:#f9fafb;overflow-y:auto;min-height:calc(100vh - 56px);">
        <div style="padding:20px 24px;">

            <div style="display:flex;align-items:flex-start;gap:14px;margin-bottom:20px;">
                <div style="width:44px;height:44px;border-radius:10px;background:var(--primary-color);flex-shrink:0;display:flex;align-items:center;justify-content:center;">
                    <div style="width:22px;height:3px;background:#fff;border-radius:2px;opacity:0.9;box-shadow:0 6px 0 #fff, 0 -6px 0 #fff;"></div>
                </div>
                <div style="flex:1;">
                    <div style="display:flex;align-items:center;gap:8px;margin-bottom:3px;">
                        <h1 style="font-family:'Satoshi';font-size:1.25rem;font-weight:700;color:var(--title);margin:0;">Video Ideas &amp; Title Suggestions</h1>
                        <span class="badge">AI</span>
                    </div>
                    <p style="font-family:'Satoshi';font-size:0.8125rem;color:var(--paragraph);margin:0;">Generate title and video ideas based on your channel niche.</p>
                </div>
                <div style="flex-shrink:0;text-align:right;">
                    <div style="font-family:'Satoshi';font-size:0.75rem;color:var(--paragraph);margin-bottom:2px;">Used this month</div>
                    <div style="font-family:'Satoshi';font-size:1rem;font-weight:700;color:var(--title);">12 / 250</div>
                </div>
            </div>

            <div style="display:grid;grid-template-columns:1fr;gap:20px;">

                <div class="card" style="padding:20px;">
                    <h2 style="font-family:'Satoshi';font-size:0.9375rem;font-weight:700;color:var(--title);margin:0 0 16px;">What&#x27;s your video about?</h2>

                    <div style="display:flex;flex-direction:column;gap:14px;">
                        <div>
                            <label style="display:block;font-family:'Satoshi';font-size:0.8125rem;font-weight:600;color:var(--title);margin-bottom:5px;">Topic or keyword</label>
                            <input type="text" placeholder="e.g. YouTube growth tips" value="" style="width:100%;border:1px solid var(--primary-light);border-radius:6px;padding:9px 12px;font-family:'Satoshi';font-size:0.875rem;color:var(--title);box-sizing:border-box;">
                        </div>
                        <div>
                            <label style="display:block;font-family:'Satoshi';font-size:0.8125rem;font-weight:600;color:var(--title);margin-bottom:5px;">Tone</label>
                            <select style="width:100%;border:1px solid var(--primary-light);border-radius:6px;padding:9px 12px;font-family:'Satoshi';font-size:0.875rem;color:var(--title);background:#fff;">
                                <option selected>Informative</option>
                                <option>Entertaining</option>
                                <option>Inspirational</option>
                            </select>
                        </div>
                    </div>

                    <button class="btn btn-primary" style="width:100%;margin-top:20px;font-weight:700;padding:10px;display:flex;align-items:center;justify-content:center;gap:8px;">
                        ✨ Generate Ideas
                    </button>
                </div>

            </div>
        </div>
    </div>

</div>


        {{! Standard tool page shell — used by Script Generator, Thumbnail Editor, Video Ideas, etc. }}
<header class="dashboard-header" style="position:fixed;top:0;left:0;right:0;background:#fff;border-bottom:1px solid var(--primary-light);padding:0 20px;height:56px;display:flex;align-items:center;z-index:20;">
  <a href="#" style="display:flex;align-items:center;gap:8px;text-decoration:none;margin-right:auto;">
    <img src="https://app.tubespanner.com/themes/custom/tubespanner_purple/images/logo.svg" alt="TubeSpanner" style="height:28px;" onerror="this.style.display='none';this.nextElementSibling.style.display='block'">
    <strong style="display:none;font-family:'Satoshi';color:var(--primary-color);">TubeSpanner</strong>
  </a>
  <div style="display:flex;align-items:center;gap:8px;">
    <button class="btn btn-primary" style="font-size:0.875rem;padding:6px 14px;display:flex;align-items:center;gap:6px;">
      <span style="font-weight:300;font-size:1rem;">+</span> Create
      <span style="border-left:1px solid rgba(255,255,255,0.4);margin-left:4px;padding-left:8px;font-size:0.7rem;">&#9660;</span>
    </button>
    <div style="width:36px;height:36px;border-radius:50%;background:var(--primary-color);color:#fff;display:flex;align-items:center;justify-content:center;font-family:'Satoshi';font-weight:700;font-size:13px;cursor:pointer;">{{userInitials}}</div>
  </div>
</header>

<div class="dashaboard-main">

  {{! Sidebar }}
  <div class="app-sidebar-wrapper">
    <div class="app-sidebar" style="border-right:1px solid var(--primary-light);overflow-y:auto;">
      <ul class="list-unstyled sidebar-list-item" style="margin:0;padding:6px 0;">
        {{#each navGroups}}
        <li class="nav-item{{#if this.active}} active{{/if}}">
          <a href="#" style="display:flex;align-items:center;padding:10px 14px;border-left:3px solid {{#if this.active}}var(--primary-color){{else}}transparent{{/if}};background:{{#if this.active}}var(--primary-light){{else}}transparent{{/if}};color:{{#if this.active}}var(--primary-color){{else}}var(--title){{/if}};text-decoration:none;font-family:'Satoshi';font-size:0.875rem;font-weight:{{#if this.active}}700{{else}}500{{/if}};">
            <span style="width:20px;height:20px;border-radius:4px;background:{{#if this.active}}var(--primary-color){{else}}#e5e7eb{{/if}};flex-shrink:0;margin-right:10px;display:inline-block;"></span>
            <span style="flex:1;">{{this.label}}</span>
            {{#if this.expandable}}<span style="font-size:0.6rem;color:var(--paragraph);">&#9660;</span>{{/if}}
          </a>
        </li>
        {{/each}}
      </ul>
      <div style="border-top:1px solid var(--primary-light);padding:12px 14px;margin-top:auto;">
        <div style="font-family:'Satoshi';font-size:0.8125rem;font-weight:700;color:var(--title);margin-bottom:2px;">{{userName}}</div>
        <div style="font-family:'Satoshi';font-size:0.75rem;color:var(--paragraph);">{{usageLabel}}</div>
      </div>
    </div>
  </div>

  {{! Main content }}
  <div class="dashaboard-content" style="background:#f9fafb;overflow-y:auto;min-height:calc(100vh - 56px);">
    <div style="padding:20px 24px;">

      {{! Tool header }}
      <div style="display:flex;align-items:flex-start;gap:14px;margin-bottom:20px;">
        <div style="width:44px;height:44px;border-radius:10px;background:var(--primary-color);flex-shrink:0;display:flex;align-items:center;justify-content:center;">
          <div style="width:22px;height:3px;background:#fff;border-radius:2px;opacity:0.9;box-shadow:0 6px 0 #fff, 0 -6px 0 #fff;"></div>
        </div>
        <div style="flex:1;">
          <div style="display:flex;align-items:center;gap:8px;margin-bottom:3px;">
            <h1 style="font-family:'Satoshi';font-size:1.25rem;font-weight:700;color:var(--title);margin:0;">{{toolName}}</h1>
            {{#if isAI}}<span class="badge">AI</span>{{/if}}
          </div>
          <p style="font-family:'Satoshi';font-size:0.8125rem;color:var(--paragraph);margin:0;">{{toolDescription}}</p>
        </div>
        {{#if usageStat}}
        <div style="flex-shrink:0;text-align:right;">
          <div style="font-family:'Satoshi';font-size:0.75rem;color:var(--paragraph);margin-bottom:2px;">Used this month</div>
          <div style="font-family:'Satoshi';font-size:1rem;font-weight:700;color:var(--title);">{{usageStat}}</div>
        </div>
        {{/if}}
      </div>

      {{! Tabs (if tool has tabs) }}
      {{#if tabs}}
      <div style="display:flex;border-bottom:2px solid var(--primary-light);margin-bottom:20px;gap:0;">
        {{#each tabs}}
        <button style="padding:10px 18px;border:none;background:none;cursor:pointer;font-family:'Satoshi';font-size:0.875rem;font-weight:{{#if this.active}}700{{else}}500{{/if}};color:{{#if this.active}}var(--primary-color){{else}}var(--paragraph){{/if}};border-bottom:2px solid {{#if this.active}}var(--primary-color){{else}}transparent{{/if}};margin-bottom:-2px;">{{this.label}}</button>
        {{/each}}
      </div>
      {{/if}}

      {{! Two-column tool layout (input left, output right) }}
      <div style="display:grid;grid-template-columns:{{#if splitLayout}}1fr 1fr{{else}}1fr{{/if}};gap:20px;">

        {{! Input / settings panel }}
        <div class="card" style="padding:20px;">
          <h2 style="font-family:'Satoshi';font-size:0.9375rem;font-weight:700;color:var(--title);margin:0 0 16px;">{{inputPanelTitle}}</h2>

          <div style="display:flex;flex-direction:column;gap:14px;">
            {{#each inputFields}}
            <div>
              <label style="display:block;font-family:'Satoshi';font-size:0.8125rem;font-weight:600;color:var(--title);margin-bottom:5px;">{{this.label}}</label>
              {{#if this.textarea}}
              <textarea rows="4" placeholder="{{this.placeholder}}" style="width:100%;border:1px solid var(--primary-light);border-radius:6px;padding:9px 12px;font-family:'Satoshi';font-size:0.875rem;color:var(--title);resize:vertical;box-sizing:border-box;">{{this.value}}</textarea>
              {{else if this.select}}
              <select style="width:100%;border:1px solid var(--primary-light);border-radius:6px;padding:9px 12px;font-family:'Satoshi';font-size:0.875rem;color:var(--title);background:#fff;">
                {{#each this.options}}<option {{#if this.selected}}selected{{/if}}>{{this.label}}</option>{{/each}}
              </select>
              {{else}}
              <input type="text" placeholder="{{this.placeholder}}" value="{{this.value}}" style="width:100%;border:1px solid var(--primary-light);border-radius:6px;padding:9px 12px;font-family:'Satoshi';font-size:0.875rem;color:var(--title);box-sizing:border-box;">
              {{/if}}
            </div>
            {{/each}}
          </div>

          <button class="btn btn-primary" style="width:100%;margin-top:20px;font-weight:700;padding:10px;display:flex;align-items:center;justify-content:center;gap:8px;">
            {{#if isAI}}✨ {{/if}}{{generateLabel}}
          </button>
        </div>

        {{! Output panel }}
        {{#if splitLayout}}
        <div class="card" style="padding:20px;">
          <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;">
            <h2 style="font-family:'Satoshi';font-size:0.9375rem;font-weight:700;color:var(--title);margin:0;">{{outputPanelTitle}}</h2>
            {{#if hasOutput}}
            <div style="display:flex;gap:8px;">
              <button class="btn btn-light" style="font-size:0.8rem;padding:5px 12px;">Copy</button>
              <button class="btn btn-light" style="font-size:0.8rem;padding:5px 12px;">Download</button>
            </div>
            {{/if}}
          </div>
          {{#if hasOutput}}
          <div style="font-family:'Satoshi';font-size:0.875rem;color:var(--title);line-height:1.6;white-space:pre-wrap;">{{outputContent}}</div>
          {{else}}
          <div style="display:flex;flex-direction:column;align-items:center;justify-content:center;padding:48px 24px;text-align:center;">
            <div style="width:56px;height:56px;border-radius:12px;background:var(--primary-light);display:flex;align-items:center;justify-content:center;margin-bottom:16px;">
              <div style="width:28px;height:4px;background:var(--primary-color);border-radius:2px;opacity:0.4;box-shadow:0 6px 0 var(--primary-color), 0 -6px 0 var(--primary-color);"></div>
            </div>
            <p style="font-family:'Satoshi';font-size:0.875rem;color:var(--paragraph);margin:0;">{{emptyOutputMessage}}</p>
          </div>
          {{/if}}
        </div>
        {{/if}}

      </div>
    </div>
  </div>

</div>


        
            
            {
  "userInitials": "FK",
  "userName": "Fluffy Kiwi",
  "usageLabel": "48 / 50 scripts used",
  "toolName": "Video Ideas & Title Suggestions",
  "toolDescription": "Generate title and video ideas based on your channel niche.",
  "isAI": true,
  "usageStat": "12 / 250",
  "splitLayout": false,
  "generateLabel": "Generate Ideas",
  "inputPanelTitle": "What's your video about?",
  "outputPanelTitle": "Generated script",
  "hasOutput": false,
  "emptyOutputMessage": "Fill in your script details and click Generate Script.",
  "outputContent": null,
  "tabs": null,
  "navGroups": [
    {
      "label": "Dashboard",
      "active": false
    },
    {
      "label": "Ideas",
      "active": true,
      "expandable": true
    },
    {
      "label": "Discover",
      "active": false,
      "expandable": true
    },
    {
      "label": "Plan",
      "active": false,
      "expandable": true
    },
    {
      "label": "Projects",
      "active": false,
      "expandable": true
    },
    {
      "label": "Growth",
      "active": false,
      "expandable": true
    },
    {
      "label": "Settings",
      "active": false
    }
  ],
  "inputFields": [
    {
      "label": "Topic or keyword",
      "placeholder": "e.g. YouTube growth tips",
      "value": "",
      "textarea": false,
      "select": false
    },
    {
      "label": "Tone",
      "select": true,
      "options": [
        {
          "label": "Informative",
          "selected": true
        },
        {
          "label": "Entertaining",
          "selected": false
        },
        {
          "label": "Inspirational",
          "selected": false
        }
      ]
    }
  ]
}

Handle: @tool-page--video-ideas
Variants (3): Script Generator — empty , Script Generator — with output , Video Ideas — single column
Preview:
- With layout
- Component only
Filesystem Path: src/components/04-layouts/tool-page/tool-page.hbs

Generic shell for all tool pages — Script Generator, Video Ideas, Description Generator, Upload Assistant, Discovery Optimiser etc. Two-column layout (inputs left, output right) is the standard pattern. Tabs appear in tools with multiple modes.