feat: Add AI model templates section to README and enhance sidebar resizer functionality

Author: Ashjha75

Readme.md

@@ -49,6 +49,33 @@ The user interface is built with a clean, professional dark theme inspired by mo
 -   **Dark (Background)**: `#141413`
 -   **Accent (UI Elements)**: `#e3dacc`
 
+## 🤖 AI Model Templates
+
+CodeToContext optimizes the output format for different AI models. Choose the template that matches your target AI:
+
+### 📝 GPT-4 (Markdown Format)
+**Best for:** ChatGPT, GPT-4, OpenAI API
+- Clean markdown structure with code blocks
+- Clear instructions at the top
+- Language-specific syntax highlighting
+- Easy to read and parse for GPT models
+
+### 🤖 Claude (XML Format)
+**Best for:** Claude (Anthropic), Claude API
+- Structured XML tags for semantic understanding
+- Explicit `<context>`, `<file>`, `<content>` hierarchy
+- Better comprehension of project structure
+- Optimized for Claude's training on structured data
+
+### ✨ Gemini (Hybrid Format)
+**Best for:** Google Gemini, Bard
+- Combination of markdown and metadata
+- File metadata with language tags
+- Organized sections for better navigation
+- Balanced between readability and structure
+
+**How to use:** Select your preferred AI model from the dropdown in the editor header before generating context. The output will be automatically formatted for optimal performance with that AI.
+
 ## 🛠️ Key JavaScript Functions
 
 The application's logic is contained within a single `<script>` tag in `index.html`. Here are some of the core functions:

index.html

@@ -101,6 +101,7 @@ <h3>EXPLORER</h3>
                     </div>
                 </div>
             </aside>
+            <div class="sidebar-resizer" id="sidebarResizer" role="separator" aria-orientation="vertical" title="Drag to resize sidebar"></div>
 
             <!-- CONTENT AREA -->
             <div class="content-area">

index.js

@@ -373,6 +373,7 @@
         exp: $safe('expandAll'), col: $safe('collapseAll'),
         all: $safe('selectAll'), none: $safe('deselectAll'),
         gen: $safe('generateContextBtn'), ed: $safe('codeEditor'),
+        resizer: $safe('sidebarResizer'),
         cnt: $safe('fileCount'), tok: $safe('tokenCount'), sz: $safe('totalSize'),
         pron: $safe('tokenPronunciation'), lang: $safe('languagesList'),
         copy: $safe('copyBtn'), txt: $safe('downloadTxtBtn'),

style.css

@@ -255,13 +255,31 @@ html, body {
     transition: width 0.2s ease;
     overflow: hidden;
     flex-shrink: 0;
+    min-width: 280px;
+    max-width: 520px;
 }
 
 .sidebar.collapsed {
     width: 0;
     border-right: none;
 }
 
+.sidebar-resizer {
+    width: 6px;
+    cursor: ew-resize;
+    background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.25) 50%, rgba(255,255,255,0) 100%);
+    border-radius: 3px;
+    margin-left: 1px;
+    flex-shrink: 0;
+    transition: background 0.2s ease;
+    height: 100%;
+}
+
+.sidebar-resizer:hover,
+.sidebar-resizer.active {
+    background: linear-gradient(180deg, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0.85) 50%, rgba(255,255,255,0.5) 100%);
+}
+
 .content-area {
     flex: 1;
     display: flex;