Spaces:
Running
Running
Add 3 files
Browse files- README.md +7 -5
- index.html +663 -19
- prompts.txt +1 -0
README.md
CHANGED
|
@@ -1,10 +1,12 @@
|
|
| 1 |
---
|
| 2 |
-
title:
|
| 3 |
-
emoji:
|
| 4 |
-
colorFrom:
|
| 5 |
-
colorTo:
|
| 6 |
sdk: static
|
| 7 |
pinned: false
|
|
|
|
|
|
|
| 8 |
---
|
| 9 |
|
| 10 |
-
Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
|
|
|
|
| 1 |
---
|
| 2 |
+
title: cmd
|
| 3 |
+
emoji: 🐳
|
| 4 |
+
colorFrom: purple
|
| 5 |
+
colorTo: blue
|
| 6 |
sdk: static
|
| 7 |
pinned: false
|
| 8 |
+
tags:
|
| 9 |
+
- deepsite
|
| 10 |
---
|
| 11 |
|
| 12 |
+
Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
|
index.html
CHANGED
|
@@ -1,19 +1,663 @@
|
|
| 1 |
-
<!
|
| 2 |
-
<html>
|
| 3 |
-
|
| 4 |
-
|
| 5 |
-
|
| 6 |
-
|
| 7 |
-
|
| 8 |
-
|
| 9 |
-
|
| 10 |
-
|
| 11 |
-
|
| 12 |
-
|
| 13 |
-
|
| 14 |
-
|
| 15 |
-
|
| 16 |
-
|
| 17 |
-
|
| 18 |
-
|
| 19 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
<!DOCTYPE html>
|
| 2 |
+
<html lang="en">
|
| 3 |
+
<head>
|
| 4 |
+
<meta charset="UTF-8">
|
| 5 |
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
| 6 |
+
<title>Visual Batch Scripter - Create Windows Batch Files Visually</title>
|
| 7 |
+
<script src="https://cdn.tailwindcss.com"></script>
|
| 8 |
+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
| 9 |
+
<style>
|
| 10 |
+
.action-card:hover {
|
| 11 |
+
transform: translateY(-2px);
|
| 12 |
+
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
|
| 13 |
+
}
|
| 14 |
+
.code-preview {
|
| 15 |
+
font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
|
| 16 |
+
font-size: 0.9rem;
|
| 17 |
+
white-space: pre-wrap;
|
| 18 |
+
background-color: #1e293b;
|
| 19 |
+
}
|
| 20 |
+
.step-item:hover {
|
| 21 |
+
background-color: #f8fafc;
|
| 22 |
+
}
|
| 23 |
+
.dragging {
|
| 24 |
+
opacity: 0.5;
|
| 25 |
+
background-color: #e2e8f0;
|
| 26 |
+
}
|
| 27 |
+
.properties-panel {
|
| 28 |
+
transition: all 0.3s ease;
|
| 29 |
+
}
|
| 30 |
+
</style>
|
| 31 |
+
</head>
|
| 32 |
+
<body class="bg-gray-50 text-gray-800">
|
| 33 |
+
<div class="flex flex-col h-screen">
|
| 34 |
+
<!-- Header -->
|
| 35 |
+
<header class="bg-blue-600 text-white p-4 shadow-md">
|
| 36 |
+
<div class="container mx-auto flex justify-between items-center">
|
| 37 |
+
<div class="flex items-center space-x-2">
|
| 38 |
+
<i class="fas fa-terminal text-2xl"></i>
|
| 39 |
+
<h1 class="text-2xl font-bold">Visual Batch Scripter</h1>
|
| 40 |
+
</div>
|
| 41 |
+
<div class="flex space-x-2">
|
| 42 |
+
<button id="new-script" class="bg-blue-700 hover:bg-blue-800 px-3 py-1 rounded-md transition">
|
| 43 |
+
<i class="fas fa-file mr-1"></i> New
|
| 44 |
+
</button>
|
| 45 |
+
<button id="save-project" class="bg-blue-700 hover:bg-blue-800 px-3 py-1 rounded-md transition">
|
| 46 |
+
<i class="fas fa-save mr-1"></i> Save
|
| 47 |
+
</button>
|
| 48 |
+
<button id="load-project" class="bg-blue-700 hover:bg-blue-800 px-3 py-1 rounded-md transition">
|
| 49 |
+
<i class="fas fa-folder-open mr-1"></i> Open
|
| 50 |
+
</button>
|
| 51 |
+
<button id="generate-bat" class="bg-green-600 hover:bg-green-700 px-3 py-1 rounded-md transition">
|
| 52 |
+
<i class="fas fa-file-export mr-1"></i> Generate .BAT
|
| 53 |
+
</button>
|
| 54 |
+
</div>
|
| 55 |
+
</div>
|
| 56 |
+
</header>
|
| 57 |
+
|
| 58 |
+
<!-- Main Content -->
|
| 59 |
+
<div class="flex flex-1 overflow-hidden">
|
| 60 |
+
<!-- Left Sidebar - Actions Palette -->
|
| 61 |
+
<div class="w-64 bg-white border-r border-gray-200 p-4 overflow-y-auto">
|
| 62 |
+
<h2 class="text-lg font-semibold mb-4 text-gray-700 flex items-center">
|
| 63 |
+
<i class="fas fa-cubes mr-2 text-blue-600"></i> Actions
|
| 64 |
+
</h2>
|
| 65 |
+
|
| 66 |
+
<!-- Search -->
|
| 67 |
+
<div class="mb-4">
|
| 68 |
+
<div class="relative">
|
| 69 |
+
<input type="text" placeholder="Search actions..."
|
| 70 |
+
class="w-full pl-8 pr-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
|
| 71 |
+
<i class="fas fa-search absolute left-3 top-3 text-gray-400"></i>
|
| 72 |
+
</div>
|
| 73 |
+
</div>
|
| 74 |
+
|
| 75 |
+
<!-- Accordion for action categories -->
|
| 76 |
+
<div class="space-y-2">
|
| 77 |
+
<!-- File Operations -->
|
| 78 |
+
<div class="accordion-group">
|
| 79 |
+
<button class="accordion-btn flex justify-between items-center w-full p-2 bg-blue-50 rounded-md">
|
| 80 |
+
<span class="font-medium text-blue-700">
|
| 81 |
+
<i class="fas fa-file-alt mr-2"></i> File Operations
|
| 82 |
+
</span>
|
| 83 |
+
<i class="fas fa-chevron-down text-xs"></i>
|
| 84 |
+
</button>
|
| 85 |
+
<div class="accordion-content mt-2 pl-2 space-y-2">
|
| 86 |
+
<div class="action-card bg-white p-2 rounded border border-gray-200 cursor-pointer hover:shadow-md transition" draggable="true" data-action="copy-file">
|
| 87 |
+
<p class="font-medium text-sm"><i class="fas fa-copy text-blue-500 mr-1"></i> Copy File</p>
|
| 88 |
+
<p class="text-xs text-gray-500">Copy a file to another location</p>
|
| 89 |
+
</div>
|
| 90 |
+
<div class="action-card bg-white p-2 rounded border border-gray-200 cursor-pointer hover:shadow-md transition" draggable="true" data-action="move-file">
|
| 91 |
+
<p class="font-medium text-sm"><i class="fas fa-exchange-alt text-blue-500 mr-1"></i> Move File</p>
|
| 92 |
+
<p class="text-xs text-gray-500">Move a file to another location</p>
|
| 93 |
+
</div>
|
| 94 |
+
<div class="action-card bg-white p-2 rounded border border-gray-200 cursor-pointer hover:shadow-md transition" draggable="true" data-action="delete-file">
|
| 95 |
+
<p class="font-medium text-sm"><i class="fas fa-trash text-blue-500 mr-1"></i> Delete File</p>
|
| 96 |
+
<p class="text-xs text-gray-500">Delete a specific file</p>
|
| 97 |
+
</div>
|
| 98 |
+
<div class="action-card bg-white p-2 rounded border border-gray-200 cursor-pointer hover:shadow-md transition" draggable="true" data-action="create-folder">
|
| 99 |
+
<p class="font-medium text-sm"><i class="fas fa-folder-plus text-blue-500 mr-1"></i> Create Folder</p>
|
| 100 |
+
<p class="text-xs text-gray-500">Create a new directory</p>
|
| 101 |
+
</div>
|
| 102 |
+
</div>
|
| 103 |
+
</div>
|
| 104 |
+
|
| 105 |
+
<!-- Program Execution -->
|
| 106 |
+
<div class="accordion-group mt-3">
|
| 107 |
+
<button class="accordion-btn flex justify-between items-center w-full p-2 bg-blue-50 rounded-md">
|
| 108 |
+
<span class="font-medium text-blue-700">
|
| 109 |
+
<i class="fas fa-play-circle mr-2"></i> Program Execution
|
| 110 |
+
</span>
|
| 111 |
+
<i class="fas fa-chevron-down text-xs"></i>
|
| 112 |
+
</button>
|
| 113 |
+
<div class="accordion-content mt-2 pl-2 space-y-2">
|
| 114 |
+
<div class="action-card bg-white p-2 rounded border border-gray-200 cursor-pointer hover:shadow-md transition" draggable="true" data-action="run-program">
|
| 115 |
+
<p class="font-medium text-sm"><i class="fas fa-laptop-code text-green-500 mr-1"></i> Run Program</p>
|
| 116 |
+
<p class="text-xs text-gray-500">Launch an application or file</p>
|
| 117 |
+
</div>
|
| 118 |
+
<div class="action-card bg-white p-2 rounded border border-gray-200 cursor-pointer hover:shadow-md transition" draggable="true" data-action="run-cmd">
|
| 119 |
+
<p class="font-medium text-sm"><i class="fas fa-terminal text-green-500 mr-1"></i> Run CMD Command</p>
|
| 120 |
+
<p class="text-xs text-gray-500">Execute custom command</p>
|
| 121 |
+
</div>
|
| 122 |
+
</div>
|
| 123 |
+
</div>
|
| 124 |
+
|
| 125 |
+
<!-- Control Flow -->
|
| 126 |
+
<div class="accordion-group mt-3">
|
| 127 |
+
<button class="accordion-btn flex justify-between items-center w-full p-2 bg-blue-50 rounded-md">
|
| 128 |
+
<span class="font-medium text-blue-700">
|
| 129 |
+
<i class="fas fa-code-branch mr-2"></i> Control Flow
|
| 130 |
+
</span>
|
| 131 |
+
<i class="fas fa-chevron-down text-xs"></i>
|
| 132 |
+
</button>
|
| 133 |
+
<div class="accordion-content mt-2 pl-2 space-y-2">
|
| 134 |
+
<div class="action-card bg-white p-2 rounded border border-gray-200 cursor-pointer hover:shadow-md transition" draggable="true" data-action="if-statement">
|
| 135 |
+
<p class="font-medium text-sm"><i class="fas fa-question text-purple-500 mr-1"></i> If Condition</p>
|
| 136 |
+
<p class="text-xs text-gray-500">Conditional execution</p>
|
| 137 |
+
</div>
|
| 138 |
+
<div class="action-card bg-white p-2 rounded border border-gray-200 cursor-pointer hover:shadow-md transition" draggable="true" data-action="for-loop">
|
| 139 |
+
<p class="font-medium text-sm"><i class="fas fa-redo text-purple-500 mr-1"></i> For Loop</p>
|
| 140 |
+
<p class="text-xs text-gray-500">Repeat actions</p>
|
| 141 |
+
</div>
|
| 142 |
+
<div class="action-card bg-white p-2 rounded border border-gray-200 cursor-pointer hover:shadow-md transition" draggable="true" data-action="goto">
|
| 143 |
+
<p class="font-medium text-sm"><i class="fas fa-arrow-right text-purple-500 mr-1"></i> Goto Label</p>
|
| 144 |
+
<p class="text-xs text-gray-500">Jump to label</p>
|
| 145 |
+
</div>
|
| 146 |
+
</div>
|
| 147 |
+
</div>
|
| 148 |
+
|
| 149 |
+
<!-- Other Commands -->
|
| 150 |
+
<div class="accordion-group mt-3">
|
| 151 |
+
<button class="accordion-btn flex justify-between items-center w-full p-2 bg-blue-50 rounded-md">
|
| 152 |
+
<span class="font-medium text-blue-700">
|
| 153 |
+
<i class="fas fa-terminal mr-2"></i> Basic Commands
|
| 154 |
+
</span>
|
| 155 |
+
<i class="fas fa-chevron-down text-xs"></i>
|
| 156 |
+
</button>
|
| 157 |
+
<div class="accordion-content mt-2 pl-2 space-y-2">
|
| 158 |
+
<div class="action-card bg-white p-2 rounded border border-gray-200 cursor-pointer hover:shadow-md transition" draggable="true" data-action="echo">
|
| 159 |
+
<p class="font-medium text-sm"><i class="fas fa-comment text-yellow-500 mr-1"></i> Echo Text</p>
|
| 160 |
+
<p class="text-xs text-gray-500">Display message in console</p>
|
| 161 |
+
</div>
|
| 162 |
+
<div class="action-card bg-white p-2 rounded border border-gray-200 cursor-pointer hover:shadow-md transition" draggable="true" data-action="pause">
|
| 163 |
+
<p class="font-medium text-sm"><i class="fas fa-pause text-yellow-500 mr-1"></i> Pause</p>
|
| 164 |
+
<p class="text-xs text-gray-500">Wait for user input</p>
|
| 165 |
+
</div>
|
| 166 |
+
<div class="action-card bg-white p-2 rounded border border-gray-200 cursor-pointer hover:shadow-md transition" draggable="true" data-action="timeout">
|
| 167 |
+
<p class="font-medium text-sm"><i class="fas fa-clock text-yellow-500 mr-1"></i> Timeout</p>
|
| 168 |
+
<p class="text-xs text-gray-500">Wait for specified seconds</p>
|
| 169 |
+
</div>
|
| 170 |
+
<div class="action-card bg-white p-2 rounded border border-gray-200 cursor-pointer hover:shadow-md transition" draggable="true" data-action="set-variable">
|
| 171 |
+
<p class="font-medium text-sm"><i class="fas fa-memory text-yellow-500 mr-1"></i> Set Variable</p>
|
| 172 |
+
<p class="text-xs text-gray-500">Create/change variable</p>
|
| 173 |
+
</div>
|
| 174 |
+
</div>
|
| 175 |
+
</div>
|
| 176 |
+
</div>
|
| 177 |
+
</div>
|
| 178 |
+
|
| 179 |
+
<!-- Main Script Editor Area -->
|
| 180 |
+
<div class="flex-1 flex flex-col overflow-hidden">
|
| 181 |
+
<!-- Steps List -->
|
| 182 |
+
<div class="flex-1 overflow-y-auto p-4">
|
| 183 |
+
<div class="max-w-3xl mx-auto">
|
| 184 |
+
<h2 class="text-lg font-semibold mb-4 text-gray-700 flex items-center">
|
| 185 |
+
<i class="fas fa-list-ol mr-2 text-blue-600"></i> Script Steps
|
| 186 |
+
</h2>
|
| 187 |
+
|
| 188 |
+
<div id="steps-container" class="bg-white rounded-lg border border-gray-200 divide-y divide-gray-200 shadow-sm">
|
| 189 |
+
<!-- Placeholder when empty -->
|
| 190 |
+
<div id="empty-state" class="p-8 text-center text-gray-400">
|
| 191 |
+
<i class="fas fa-hand-point-left text-2xl mb-2 block"></i>
|
| 192 |
+
<p>Drag actions here from the left panel to build your script</p>
|
| 193 |
+
<p class="text-sm mt-2">or try one of our <a href="#" class="text-blue-600">templates</a></p>
|
| 194 |
+
</div>
|
| 195 |
+
|
| 196 |
+
<!-- Example steps would appear here -->
|
| 197 |
+
<!-- The steps will be added dynamically via JavaScript -->
|
| 198 |
+
</div>
|
| 199 |
+
</div>
|
| 200 |
+
</div>
|
| 201 |
+
|
| 202 |
+
<!-- Properties Panel (Collapsible) -->
|
| 203 |
+
<div class="border-t border-gray-200 bg-white shadow-inner properties-panel" id="properties-panel">
|
| 204 |
+
<div class="p-3 border-b border-gray-200 flex justify-between items-center bg-gray-50">
|
| 205 |
+
<h3 class="font-medium text-gray-700 flex items-center">
|
| 206 |
+
<i class="fas fa-cog mr-2 text-blue-600"></i>
|
| 207 |
+
<span id="properties-title">Step Properties</span>
|
| 208 |
+
</h3>
|
| 209 |
+
<button id="collapse-properties" class="text-gray-500 hover:text-gray-700">
|
| 210 |
+
<i class="fas fa-chevron-down"></i>
|
| 211 |
+
</button>
|
| 212 |
+
</div>
|
| 213 |
+
<div class="p-4" id="properties-content">
|
| 214 |
+
<div id="empty-properties" class="text-center text-gray-400 py-4">
|
| 215 |
+
<p>Select a step to edit its properties</p>
|
| 216 |
+
</div>
|
| 217 |
+
|
| 218 |
+
<!-- Different property forms will be shown here based on selected action -->
|
| 219 |
+
<div id="run-program-properties" class="hidden">
|
| 220 |
+
<div class="space-y-4">
|
| 221 |
+
<div>
|
| 222 |
+
<label class="block text-sm font-medium text-gray-700 mb-1">Program/File Path</label>
|
| 223 |
+
<div class="flex">
|
| 224 |
+
<input type="text" class="flex-1 border border-gray-300 rounded-l-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500">
|
| 225 |
+
<button class="bg-gray-200 px-3 rounded-r-md hover:bg-gray-300">
|
| 226 |
+
<i class="fas fa-folder-open"></i>
|
| 227 |
+
</button>
|
| 228 |
+
</div>
|
| 229 |
+
<p class="text-xs text-gray-500 mt-1">Path to the executable file (e.g., C:\Program Files\App\app.exe)</p>
|
| 230 |
+
</div>
|
| 231 |
+
<div>
|
| 232 |
+
<label class="block text-sm font-medium text-gray-700 mb-1">Arguments</label>
|
| 233 |
+
<input type="text" class="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500">
|
| 234 |
+
<p class="text-xs text-gray-500 mt-1">Optional command-line arguments</p>
|
| 235 |
+
</div>
|
| 236 |
+
<div>
|
| 237 |
+
<label class="block text-sm font-medium text-gray-700 mb-1">Working Directory</label>
|
| 238 |
+
<input type="text" class="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500" placeholder="(Optional)">
|
| 239 |
+
<p class="text-xs text-gray-500 mt-1">Directory where the program will run from</p>
|
| 240 |
+
</div>
|
| 241 |
+
<div class="flex justify-end">
|
| 242 |
+
<button class="bg-blue-600 text-white px-4 py-1 rounded-md hover:bg-blue-700 transition">Save Changes</button>
|
| 243 |
+
</div>
|
| 244 |
+
</div>
|
| 245 |
+
</div>
|
| 246 |
+
</div>
|
| 247 |
+
</div>
|
| 248 |
+
</div>
|
| 249 |
+
|
| 250 |
+
<!-- Right Sidebar - Code Preview -->
|
| 251 |
+
<div class="w-80 bg-gray-800 border-l border-gray-700 flex flex-col">
|
| 252 |
+
<div class="p-4 border-b border-gray-700 bg-gray-900">
|
| 253 |
+
<h2 class="text-lg font-semibold text-gray-200 flex items-center">
|
| 254 |
+
<i class="fas fa-code mr-2 text-blue-400"></i> Batch Script Preview
|
| 255 |
+
</h2>
|
| 256 |
+
<p class="text-xs text-gray-400 mt-1">Generated in real-time as you build</p>
|
| 257 |
+
</div>
|
| 258 |
+
<div class="flex-1 p-4 overflow-y-auto">
|
| 259 |
+
<div id="code-preview" class="code-preview text-gray-300 rounded-md p-3 text-sm">
|
| 260 |
+
@echo off
|
| 261 |
+
:: Script generated by Visual Batch Scripter
|
| 262 |
+
:: Date: 2023-11-15
|
| 263 |
+
|
| 264 |
+
|
| 265 |
+
rem Your commands will appear here as you build your script
|
| 266 |
+
|
| 267 |
+
echo Hello World
|
| 268 |
+
pause
|
| 269 |
+
</div>
|
| 270 |
+
</div>
|
| 271 |
+
<div class="p-3 border-t border-gray-700 bg-gray-900 flex justify-between">
|
| 272 |
+
<button id="copy-code" class="bg-gray-700 hover:bg-gray-600 text-gray-200 px-3 py-1 rounded-md text-sm flex items-center">
|
| 273 |
+
<i class="fas fa-copy mr-1"></i> Copy
|
| 274 |
+
</button>
|
| 275 |
+
<button id="save-bat" class="bg-blue-600 hover:bg-blue-700 text-white px-3 py-1 rounded-md text-sm flex items-center">
|
| 276 |
+
<i class="fas fa-download mr-1"></i> Save as .BAT
|
| 277 |
+
</button>
|
| 278 |
+
</div>
|
| 279 |
+
</div>
|
| 280 |
+
</div>
|
| 281 |
+
|
| 282 |
+
<!-- Status Bar -->
|
| 283 |
+
<div class="bg-gray-800 text-gray-300 text-xs p-1 flex justify-between items-center">
|
| 284 |
+
<div class="flex items-center space-x-4 ml-2">
|
| 285 |
+
<span id="status-message">Ready</span>
|
| 286 |
+
<span class="hidden md:inline"><span id="step-count">0</span> steps in script</span>
|
| 287 |
+
</div>
|
| 288 |
+
<div class="flex items-center space-x-2 mr-2">
|
| 289 |
+
<span>v1.0.0</span>
|
| 290 |
+
<button class="hover:text-blue-400" title="Help">
|
| 291 |
+
<i class="fas fa-question-circle"></i>
|
| 292 |
+
</button>
|
| 293 |
+
<button class="hover:text-blue-400" title="Templates">
|
| 294 |
+
<i class="fas fa-clone"></i>
|
| 295 |
+
</button>
|
| 296 |
+
</div>
|
| 297 |
+
</div>
|
| 298 |
+
</div>
|
| 299 |
+
|
| 300 |
+
<!-- Modal for script generation -->
|
| 301 |
+
<div id="generate-modal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden z-50">
|
| 302 |
+
<div class="bg-white rounded-lg shadow-xl max-w-md w-full">
|
| 303 |
+
<div class="p-4 border-b border-gray-200 flex justify-between items-center">
|
| 304 |
+
<h3 class="text-lg font-medium">Save Batch File</h3>
|
| 305 |
+
<button id="close-modal" class="text-gray-500 hover:text-gray-700">
|
| 306 |
+
<i class="fas fa-times"></i>
|
| 307 |
+
</button>
|
| 308 |
+
</div>
|
| 309 |
+
<div class="p-4">
|
| 310 |
+
<div class="mb-4">
|
| 311 |
+
<label class="block text-sm font-medium text-gray-700 mb-1">Filename</label>
|
| 312 |
+
<input type="text" class="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500" placeholder="script.bat">
|
| 313 |
+
<p class="text-xs text-gray-500 mt-1">File will be saved with .bat extension</p>
|
| 314 |
+
</div>
|
| 315 |
+
<div class="mb-4">
|
| 316 |
+
<label class="flex items-center">
|
| 317 |
+
<input type="checkbox" class="rounded text-blue-600" checked>
|
| 318 |
+
<span class="ml-2 text-sm text-gray-700">Add @echo off at the beginning</span>
|
| 319 |
+
</label>
|
| 320 |
+
<label class="flex items-center mt-2">
|
| 321 |
+
<input type="checkbox" class="rounded text-blue-600">
|
| 322 |
+
<span class="ml-2 text-sm text-gray-700">Include metadata comments</span>
|
| 323 |
+
</label>
|
| 324 |
+
<label class="flex items-center mt-2">
|
| 325 |
+
<input type="checkbox" class="rounded text-blue-600" checked>
|
| 326 |
+
<span class="ml-2 text-sm text-gray-700">Add pause at the end (for debugging)</span>
|
| 327 |
+
</label>
|
| 328 |
+
</div>
|
| 329 |
+
</div>
|
| 330 |
+
<div class="bg-gray-50 px-4 py-3 rounded-b-lg flex justify-end space-x-2">
|
| 331 |
+
<button id="cancel-generate" class="px-4 py-2 border border-gray-300 rounded-md text-sm font-medium text-gray-700 hover:bg-gray-50">
|
| 332 |
+
Cancel
|
| 333 |
+
</button>
|
| 334 |
+
<button id="confirm-generate" class="px-4 py-2 bg-blue-600 border border-transparent rounded-md text-sm font-medium text-white hover:bg-blue-700">
|
| 335 |
+
Generate Batch File
|
| 336 |
+
</button>
|
| 337 |
+
</div>
|
| 338 |
+
</div>
|
| 339 |
+
</div>
|
| 340 |
+
|
| 341 |
+
<script>
|
| 342 |
+
document.addEventListener('DOMContentLoaded', function() {
|
| 343 |
+
// Accordion functionality for action categories
|
| 344 |
+
document.querySelectorAll('.accordion-btn').forEach(button => {
|
| 345 |
+
button.addEventListener('click', () => {
|
| 346 |
+
const content = button.nextElementSibling;
|
| 347 |
+
const icon = button.querySelector('.fa-chevron-down');
|
| 348 |
+
|
| 349 |
+
if (content.style.maxHeight) {
|
| 350 |
+
content.style.maxHeight = null;
|
| 351 |
+
icon.classList.remove('transform', 'rotate-180');
|
| 352 |
+
} else {
|
| 353 |
+
content.style.maxHeight = content.scrollHeight + 'px';
|
| 354 |
+
icon.classList.add('transform', 'rotate-180');
|
| 355 |
+
}
|
| 356 |
+
});
|
| 357 |
+
|
| 358 |
+
// Initialize open state for first accordion
|
| 359 |
+
if (button.textContent.includes('File Operations')) {
|
| 360 |
+
button.click();
|
| 361 |
+
}
|
| 362 |
+
});
|
| 363 |
+
|
| 364 |
+
// Drag and drop for script steps
|
| 365 |
+
const stepsContainer = document.getElementById('steps-container');
|
| 366 |
+
const emptyState = document.getElementById('empty-state');
|
| 367 |
+
|
| 368 |
+
document.querySelectorAll('.action-card').forEach(card => {
|
| 369 |
+
card.addEventListener('dragstart', function(e) {
|
| 370 |
+
e.dataTransfer.setData('action-type', this.dataset.action);
|
| 371 |
+
this.classList.add('dragging');
|
| 372 |
+
});
|
| 373 |
+
|
| 374 |
+
card.addEventListener('dragend', function() {
|
| 375 |
+
this.classList.remove('dragging');
|
| 376 |
+
});
|
| 377 |
+
});
|
| 378 |
+
|
| 379 |
+
stepsContainer.addEventListener('dragover', function(e) {
|
| 380 |
+
e.preventDefault();
|
| 381 |
+
const afterElement = getDragAfterElement(this, e.clientY);
|
| 382 |
+
const draggable = document.querySelector('.dragging');
|
| 383 |
+
|
| 384 |
+
if (afterElement == null) {
|
| 385 |
+
this.appendChild(draggable);
|
| 386 |
+
} else {
|
| 387 |
+
this.insertBefore(draggable, afterElement);
|
| 388 |
+
}
|
| 389 |
+
|
| 390 |
+
// Hide empty state if we have items
|
| 391 |
+
if (this.children.length > 0 && emptyState.style.display !== 'none') {
|
| 392 |
+
emptyState.style.display = 'none';
|
| 393 |
+
}
|
| 394 |
+
});
|
| 395 |
+
|
| 396 |
+
function getDragAfterElement(container, y) {
|
| 397 |
+
const draggableElements = [...container.querySelectorAll('.step-item:not(.dragging)')];
|
| 398 |
+
|
| 399 |
+
return draggableElements.reduce((closest, child) => {
|
| 400 |
+
const box = child.getBoundingClientRect();
|
| 401 |
+
const offset = y - box.top - box.height / 2;
|
| 402 |
+
|
| 403 |
+
if (offset < 0 && offset > closest.offset) {
|
| 404 |
+
return { offset: offset, element: child };
|
| 405 |
+
} else {
|
| 406 |
+
return closest;
|
| 407 |
+
}
|
| 408 |
+
}, { offset: Number.NEGATIVE_INFINITY }).element;
|
| 409 |
+
}
|
| 410 |
+
|
| 411 |
+
// Generate example step when an action is clicked
|
| 412 |
+
document.querySelectorAll('.action-card').forEach(card => {
|
| 413 |
+
card.addEventListener('click', function() {
|
| 414 |
+
addStepToScript(this.dataset.action);
|
| 415 |
+
updateStepCount();
|
| 416 |
+
|
| 417 |
+
// Hide empty state if we have items
|
| 418 |
+
if (stepsContainer.children.length > 0 && emptyState.style.display !== 'none') {
|
| 419 |
+
emptyState.style.display = 'none';
|
| 420 |
+
}
|
| 421 |
+
});
|
| 422 |
+
});
|
| 423 |
+
|
| 424 |
+
function addStepToScript(actionType) {
|
| 425 |
+
if (emptyState.style.display !== 'none') {
|
| 426 |
+
emptyState.style.display = 'none';
|
| 427 |
+
}
|
| 428 |
+
|
| 429 |
+
const stepId = 'step-' + Date.now();
|
| 430 |
+
const stepName = getActionName(actionType);
|
| 431 |
+
const stepIcon = getActionIcon(actionType);
|
| 432 |
+
|
| 433 |
+
const stepElement = document.createElement('div');
|
| 434 |
+
stepElement.className = 'step-item p-3 hover:bg-gray-50 cursor-pointer flex items-center group';
|
| 435 |
+
stepElement.id = stepId;
|
| 436 |
+
stepElement.dataset.action = actionType;
|
| 437 |
+
|
| 438 |
+
stepElement.innerHTML = `
|
| 439 |
+
<div class="flex items-center flex-1">
|
| 440 |
+
<div class="w-8 h-8 rounded-full bg-blue-100 flex items-center justify-center mr-3 text-blue-600">
|
| 441 |
+
<i class="${stepIcon}"></i>
|
| 442 |
+
</div>
|
| 443 |
+
<div>
|
| 444 |
+
<p class="font-medium">${stepName}</p>
|
| 445 |
+
<p class="text-xs text-gray-500">${getActionDescription(actionType)}</p>
|
| 446 |
+
</div>
|
| 447 |
+
</div>
|
| 448 |
+
<div class="opacity-0 group-hover:opacity-100 transition-opacity flex space-x-1">
|
| 449 |
+
<button class="p-1 text-gray-400 hover:text-blue-600 step-up">
|
| 450 |
+
<i class="fas fa-arrow-up"></i>
|
| 451 |
+
</button>
|
| 452 |
+
<button class="p-1 text-gray-400 hover:text-blue-600 step-down">
|
| 453 |
+
<i class="fas fa-arrow-down"></i>
|
| 454 |
+
</button>
|
| 455 |
+
<button class="p-1 text-gray-400 hover:text-red-600 step-remove">
|
| 456 |
+
<i class="fas fa-trash"></i>
|
| 457 |
+
</button>
|
| 458 |
+
</div>
|
| 459 |
+
`;
|
| 460 |
+
|
| 461 |
+
stepsContainer.appendChild(stepElement);
|
| 462 |
+
|
| 463 |
+
// Add event listeners to the step buttons
|
| 464 |
+
stepElement.querySelector('.step-up').addEventListener('click', function(e) {
|
| 465 |
+
e.stopPropagation();
|
| 466 |
+
const prev = stepElement.previousElementSibling;
|
| 467 |
+
if (prev) {
|
| 468 |
+
stepsContainer.insertBefore(stepElement, prev);
|
| 469 |
+
}
|
| 470 |
+
});
|
| 471 |
+
|
| 472 |
+
stepElement.querySelector('.step-down').addEventListener('click', function(e) {
|
| 473 |
+
e.stopPropagation();
|
| 474 |
+
const next = stepElement.nextElementSibling;
|
| 475 |
+
if (next) {
|
| 476 |
+
stepsContainer.insertBefore(next, stepElement);
|
| 477 |
+
}
|
| 478 |
+
});
|
| 479 |
+
|
| 480 |
+
stepElement.querySelector('.step-remove').addEventListener('click', function(e) {
|
| 481 |
+
e.stopPropagation();
|
| 482 |
+
stepElement.remove();
|
| 483 |
+
updateStepCount();
|
| 484 |
+
|
| 485 |
+
// Show empty state if no items left
|
| 486 |
+
if (stepsContainer.children.length === 1 && emptyState.style.display === 'none') {
|
| 487 |
+
emptyState.style.display = 'block';
|
| 488 |
+
}
|
| 489 |
+
});
|
| 490 |
+
|
| 491 |
+
// Click on step to show properties
|
| 492 |
+
stepElement.addEventListener('click', function() {
|
| 493 |
+
showPropertiesForStep(this);
|
| 494 |
+
});
|
| 495 |
+
}
|
| 496 |
+
|
| 497 |
+
function getActionName(actionType) {
|
| 498 |
+
const names = {
|
| 499 |
+
'copy-file': 'Copy File',
|
| 500 |
+
'move-file': 'Move File',
|
| 501 |
+
'delete-file': 'Delete File',
|
| 502 |
+
'create-folder': 'Create Folder',
|
| 503 |
+
'run-program': 'Run Program',
|
| 504 |
+
'run-cmd': 'Run CMD Command',
|
| 505 |
+
'if-statement': 'If Condition',
|
| 506 |
+
'for-loop': 'For Loop',
|
| 507 |
+
'goto': 'Goto Label',
|
| 508 |
+
'echo': 'Echo Text',
|
| 509 |
+
'pause': 'Pause',
|
| 510 |
+
'timeout': 'Timeout',
|
| 511 |
+
'set-variable': 'Set Variable'
|
| 512 |
+
};
|
| 513 |
+
return names[actionType] || actionType;
|
| 514 |
+
}
|
| 515 |
+
|
| 516 |
+
function getActionIcon(actionType) {
|
| 517 |
+
const icons = {
|
| 518 |
+
'copy-file': 'fas fa-copy',
|
| 519 |
+
'move-file': 'fas fa-exchange-alt',
|
| 520 |
+
'delete-file': 'fas fa-trash',
|
| 521 |
+
'create-folder': 'fas fa-folder-plus',
|
| 522 |
+
'run-program': 'fas fa-laptop-code',
|
| 523 |
+
'run-cmd': 'fas fa-terminal',
|
| 524 |
+
'if-statement': 'fas fa-question',
|
| 525 |
+
'for-loop': 'fas fa-redo',
|
| 526 |
+
'goto': 'fas fa-arrow-right',
|
| 527 |
+
'echo': 'fas fa-comment',
|
| 528 |
+
'pause': 'fas fa-pause',
|
| 529 |
+
'timeout': 'fas fa-clock',
|
| 530 |
+
'set-variable': 'fas fa-memory'
|
| 531 |
+
};
|
| 532 |
+
return icons[actionType] || 'fas fa-question-circle';
|
| 533 |
+
}
|
| 534 |
+
|
| 535 |
+
function getActionDescription(actionType) {
|
| 536 |
+
const descriptions = {
|
| 537 |
+
'copy-file': 'Copies a file to a new location',
|
| 538 |
+
'move-file': 'Moves a file to a new location',
|
| 539 |
+
'delete-file': 'Deletes a specific file',
|
| 540 |
+
'create-folder': 'Creates a new directory',
|
| 541 |
+
'run-program': 'Launches an application or file',
|
| 542 |
+
'run-cmd': 'Executes a custom command',
|
| 543 |
+
'if-statement': 'Conditional execution block',
|
| 544 |
+
'for-loop': 'Iterates over a set of items',
|
| 545 |
+
'goto': 'Jumps to a label in the script',
|
| 546 |
+
'echo': 'Displays message in console',
|
| 547 |
+
'pause': 'Waits for user input',
|
| 548 |
+
'timeout': 'Waits for specified seconds',
|
| 549 |
+
'set-variable': 'Creates or changes a variable'
|
| 550 |
+
};
|
| 551 |
+
return descriptions[actionType] || 'Action description';
|
| 552 |
+
}
|
| 553 |
+
|
| 554 |
+
function showPropertiesForStep(stepElement) {
|
| 555 |
+
const actionType = stepElement.dataset.action;
|
| 556 |
+
document.getElementById('properties-title').textContent = getActionName(actionType) + ' Properties';
|
| 557 |
+
|
| 558 |
+
// Hide all property forms
|
| 559 |
+
document.getElementById('empty-properties').style.display = 'none';
|
| 560 |
+
document.querySelectorAll('#properties-content > div').forEach(el => {
|
| 561 |
+
el.classList.add('hidden');
|
| 562 |
+
});
|
| 563 |
+
|
| 564 |
+
// Show the correct form
|
| 565 |
+
if (actionType === 'run-program') {
|
| 566 |
+
document.getElementById('run-program-properties').classList.remove('hidden');
|
| 567 |
+
} else {
|
| 568 |
+
// Show empty state with a message about no specific properties
|
| 569 |
+
document.getElementById('empty-properties').style.display = 'block';
|
| 570 |
+
const emptyMsg = document.getElementById('empty-properties');
|
| 571 |
+
emptyMsg.innerHTML = `
|
| 572 |
+
<p>This action doesn't require specific configuration.</p>
|
| 573 |
+
<p class="text-sm mt-2 text-gray-500">Select another step to edit its properties</p>
|
| 574 |
+
`;
|
| 575 |
+
}
|
| 576 |
+
|
| 577 |
+
// Expand properties panel if collapsed
|
| 578 |
+
const panel = document.getElementById('properties-panel');
|
| 579 |
+
if (panel.classList.contains('properties-collapsed')) {
|
| 580 |
+
togglePropertiesPanel();
|
| 581 |
+
}
|
| 582 |
+
}
|
| 583 |
+
|
| 584 |
+
function updateStepCount() {
|
| 585 |
+
const count = stepsContainer.querySelectorAll('.step-item').length;
|
| 586 |
+
document.getElementById('step-count').textContent = count;
|
| 587 |
+
}
|
| 588 |
+
|
| 589 |
+
// Properties panel collapse/expand
|
| 590 |
+
function togglePropertiesPanel() {
|
| 591 |
+
const panel = document.getElementById('properties-panel');
|
| 592 |
+
const content = document.getElementById('properties-content');
|
| 593 |
+
const toggleBtn = document.getElementById('collapse-properties');
|
| 594 |
+
|
| 595 |
+
panel.classList.toggle('properties-collapsed');
|
| 596 |
+
|
| 597 |
+
if (panel.classList.contains('properties-collapsed')) {
|
| 598 |
+
content.style.display = 'none';
|
| 599 |
+
toggleBtn.innerHTML = '<i class="fas fa-chevron-up"></i>';
|
| 600 |
+
panel.style.maxHeight = '44px';
|
| 601 |
+
} else {
|
| 602 |
+
content.style.display = 'block';
|
| 603 |
+
toggleBtn.innerHTML = '<i class="fas fa-chevron-down"></i>';
|
| 604 |
+
panel.style.maxHeight = 'none';
|
| 605 |
+
}
|
| 606 |
+
}
|
| 607 |
+
|
| 608 |
+
document.getElementById('collapse-properties').addEventListener('click', togglePropertiesPanel);
|
| 609 |
+
|
| 610 |
+
// Modal functionality
|
| 611 |
+
document.getElementById('generate-bat').addEventListener('click', function() {
|
| 612 |
+
document.getElementById('generate-modal').classList.remove('hidden');
|
| 613 |
+
});
|
| 614 |
+
|
| 615 |
+
document.getElementById('close-modal').addEventListener('click', function() {
|
| 616 |
+
document.getElementById('generate-modal').classList.add('hidden');
|
| 617 |
+
});
|
| 618 |
+
|
| 619 |
+
document.getElementById('cancel-generate').addEventListener('click', function() {
|
| 620 |
+
document.getElementById('generate-modal').classList.add('hidden');
|
| 621 |
+
});
|
| 622 |
+
|
| 623 |
+
document.getElementById('confirm-generate').addEventListener('click', function() {
|
| 624 |
+
alert('Batch file generated successfully!');
|
| 625 |
+
document.getElementById('generate-modal').classList.add('hidden');
|
| 626 |
+
});
|
| 627 |
+
|
| 628 |
+
// New script button
|
| 629 |
+
document.getElementById('new-script').addEventListener('click', function() {
|
| 630 |
+
if (confirm('Create new script? Any unsaved changes will be lost.')) {
|
| 631 |
+
stepsContainer.innerHTML = '';
|
| 632 |
+
const emptyState = document.getElementById('empty-state').cloneNode(true);
|
| 633 |
+
stepsContainer.appendChild(emptyState);
|
| 634 |
+
emptyState.style.display = 'block';
|
| 635 |
+
updateStepCount();
|
| 636 |
+
|
| 637 |
+
// Reset code preview
|
| 638 |
+
document.getElementById('code-preview').textContent = `
|
| 639 |
+
@echo off
|
| 640 |
+
:: Script generated by Visual Batch Scripter
|
| 641 |
+
:: Date: ${new Date().toISOString().split('T')[0]}
|
| 642 |
+
|
| 643 |
+
|
| 644 |
+
rem Your commands will appear here as you build your script
|
| 645 |
+
`;
|
| 646 |
+
}
|
| 647 |
+
});
|
| 648 |
+
|
| 649 |
+
// Initial setup
|
| 650 |
+
updateStepCount();
|
| 651 |
+
|
| 652 |
+
// Add some example steps on first load
|
| 653 |
+
if (stepsContainer.children.length === 1) {
|
| 654 |
+
setTimeout(() => {
|
| 655 |
+
addStepToScript('run-program');
|
| 656 |
+
addStepToScript('echo');
|
| 657 |
+
addStepToScript('pause');
|
| 658 |
+
}, 300);
|
| 659 |
+
}
|
| 660 |
+
});
|
| 661 |
+
</script>
|
| 662 |
+
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=kamioll999/cmd" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
|
| 663 |
+
</html>
|
prompts.txt
ADDED
|
@@ -0,0 +1 @@
|
|
|
|
|
|
|
| 1 |
+
1. Working Application Name (Examples): CMD/BAT Script Creator BatchBuilder Windows Task Automator CMD Automagic Visual Batch Scripter 2. Main Application Goal (Summary): A desktop application (or potentially web-based?) designed for the visual (or simplified) creation of Windows batch files (.bat, .cmd). It allows users, even those without advanced knowledge of CMD syntax, to create scripts that automate repetitive tasks. 3. Problem the Application Solves: Manually creating .bat/.cmd scripts requires familiarity with specific commands, their parameters, and correct syntax. This process can be time-consuming and prone to errors (typos, flawed logic). Individuals who are not technically inclined or are beginners often find it difficult to automate even simple tasks in Windows using scripts. There's a lack of an easy-to-use, visual tool for "assembling" such scripts from pre-defined functional blocks. 4. Target Users: Home Users: Wanting to automate simple actions (e.g., launching multiple programs at once, cleaning temporary folders). Office Workers: Performing repetitive computer tasks (e.g., copying files to specific locations, launching specific applications in sequence). IT Administrators / Power Users: Seeking a faster way to generate simpler or template-based scripts, or wanting to provide less technical users with a tool for basic automation. Software Testers: Needing simple scripts to set up testing environments. 5. Key Features (What the application will do): Graphical User Interface (GUI): A user-friendly interface allowing selection of actions from a list/palette. Action Library: A predefined set of basic and advanced actions that can be added to the script, such as: Run Program/File: Select an .exe file or other document to open. Option to add command-line arguments. File/Folder Operations: Copy, Move, Delete, Rename, Create Folder. Basic CMD Commands: ECHO (display text), PAUSE (halt script), EXIT (terminate), CLS (clear screen), CD (change directory). Directory Navigation: Change the current working directory. Delay/Wait: Pause execution for a specified number of seconds (TIMEOUT). (Optional/Advanced): Simple Conditions (IF), Loops (FOR), Working with Environment Variables (SET), Getting User Input (SET /P). Visual/List-Based Editor: Ability to arrange selected actions in the correct sequence (e.g., a list of steps, drag-and-drop). Action Configuration: For each action, the ability to set its parameters (e.g., file path, destination folder name, text to display). Script Preview: A window showing the generated .bat/.cmd code in real-time. Save/Load Projects: Ability to save the script configuration in the application's format for later editing. Generate Output File: A "Generate" or "Save as .bat/.cmd" button that creates the final executable script file. (Optional) Validation: Basic checks for the validity of entered data (e.g., checking if a path exists - though this can be tricky and not always desirable). (Optional) Templates: Pre-configured sets of actions for common tasks. 6. User Interface (How it will look and work): Main Area: A list/sequence of the added steps (actions). Side Panel/Menu: A list of available actions to add (e.g., grouped by category: File Operations, Execution, Control Flow, etc.). Properties Panel: When a step in the list is selected, fields appear to configure its parameters. Toolbar: Buttons for: New Script, Open Project, Save Project, Generate .bat/.cmd File, Add Action, Remove Action, Move Up/Down. Optional: A tab with a preview of the generated code. 7. User Benefits: Time Savings: Faster script creation compared to manual coding. Error Reduction: Lower risk of syntax mistakes. Accessibility: Enables automation creation for individuals without programming knowledge. Ease of Use: Intuitive interface instead of memorizing commands. Organization: Ability to save and manage automation "projects." 8. Potential Enhancements (Future Ideas): More advanced actions (working with the registry, network operations, service management). More complex control structures (advanced loops, functions/subroutines). Integration with Windows Task Scheduler. Support for user-defined variables within the application. Importing existing .bat files (can be complex to implement reliably). Example Short Description (e.g., for a README file): CMD/BAT Script Creator is a Windows desktop application that enables easy, visual creation of batch files (.bat/.cmd). Instead of manually writing commands, users select actions from a list (e.g., 'Run Program,' 'Copy File,' 'Display Message'), configure their parameters, and arrange them in the desired sequence. The application generates a ready-to-use script, automating repetitive tasks without needing knowledge of CMD syntax. It's an ideal tool for home users, office workers, and administrators looking to simplify everyday computer operations.
|