Spaces:
Running
Running
Add 3 files
Browse files- README.md +7 -5
- index.html +519 -18
- prompts.txt +0 -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: page-builder
|
| 3 |
+
emoji: 🐳
|
| 4 |
+
colorFrom: red
|
| 5 |
+
colorTo: purple
|
| 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,520 @@
|
|
| 1 |
-
<!
|
| 2 |
-
<html>
|
| 3 |
-
|
| 4 |
-
|
| 5 |
-
|
| 6 |
-
|
| 7 |
-
|
| 8 |
-
|
| 9 |
-
|
| 10 |
-
|
| 11 |
-
|
| 12 |
-
|
| 13 |
-
|
| 14 |
-
|
| 15 |
-
|
| 16 |
-
|
| 17 |
-
|
| 18 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 19 |
</html>
|
|
|
|
| 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>NXPLUG - AI-Powered WordPress Page Builder</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 |
+
.gradient-bg {
|
| 11 |
+
background: linear-gradient(135deg, #6e8efb 0%, #a777e3 100%);
|
| 12 |
+
}
|
| 13 |
+
.sidebar {
|
| 14 |
+
transition: all 0.3s ease;
|
| 15 |
+
}
|
| 16 |
+
.element-card:hover {
|
| 17 |
+
transform: translateY(-5px);
|
| 18 |
+
box-shadow: 0 10px 20px rgba(0,0,0,0.1);
|
| 19 |
+
}
|
| 20 |
+
.canvas-area {
|
| 21 |
+
min-height: 80vh;
|
| 22 |
+
background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%239C92AC' fill-opacity='0.05' fill-rule='evenodd'%3E%3Ccircle cx='3' cy='3' r='3'/%3E%3Ccircle cx='13' cy='13' r='3'/%3E%3C/g%3E%3C/svg%3E");
|
| 23 |
+
}
|
| 24 |
+
.droppable {
|
| 25 |
+
min-height: 100px;
|
| 26 |
+
border: 2px dashed #a777e3;
|
| 27 |
+
background-color: rgba(167, 119, 227, 0.1);
|
| 28 |
+
}
|
| 29 |
+
.ai-suggestion {
|
| 30 |
+
animation: pulse 2s infinite;
|
| 31 |
+
}
|
| 32 |
+
@keyframes pulse {
|
| 33 |
+
0% { box-shadow: 0 0 0 0 rgba(167, 119, 227, 0.4); }
|
| 34 |
+
70% { box-shadow: 0 0 0 10px rgba(167, 119, 227, 0); }
|
| 35 |
+
100% { box-shadow: 0 0 0 0 rgba(167, 119, 227, 0); }
|
| 36 |
+
}
|
| 37 |
+
</style>
|
| 38 |
+
</head>
|
| 39 |
+
<body class="bg-gray-50 font-sans">
|
| 40 |
+
<!-- Header -->
|
| 41 |
+
<header class="gradient-bg text-white shadow-lg">
|
| 42 |
+
<div class="container mx-auto px-4 py-4 flex justify-between items-center">
|
| 43 |
+
<div class="flex items-center space-x-2">
|
| 44 |
+
<i class="fas fa-cube text-2xl"></i>
|
| 45 |
+
<h1 class="text-2xl font-bold">NXPLUG Page Builder</h1>
|
| 46 |
+
</div>
|
| 47 |
+
<div class="flex space-x-4">
|
| 48 |
+
<button class="px-4 py-2 bg-white text-purple-600 rounded-lg font-medium hover:bg-gray-100 transition">
|
| 49 |
+
<i class="fas fa-save mr-2"></i>Save
|
| 50 |
+
</button>
|
| 51 |
+
<button class="px-4 py-2 bg-purple-800 text-white rounded-lg font-medium hover:bg-purple-900 transition">
|
| 52 |
+
<i class="fas fa-eye mr-2"></i>Preview
|
| 53 |
+
</button>
|
| 54 |
+
<button class="px-4 py-2 bg-green-500 text-white rounded-lg font-medium hover:bg-green-600 transition">
|
| 55 |
+
<i class="fas fa-rocket mr-2"></i>Publish
|
| 56 |
+
</button>
|
| 57 |
+
</div>
|
| 58 |
+
</div>
|
| 59 |
+
</header>
|
| 60 |
+
|
| 61 |
+
<div class="flex h-screen pt-16">
|
| 62 |
+
<!-- Left Sidebar - Elements -->
|
| 63 |
+
<div class="sidebar w-64 bg-white shadow-lg overflow-y-auto">
|
| 64 |
+
<div class="p-4 border-b">
|
| 65 |
+
<h2 class="font-bold text-lg flex items-center">
|
| 66 |
+
<i class="fas fa-shapes mr-2 text-purple-600"></i> Elements
|
| 67 |
+
</h2>
|
| 68 |
+
<div class="mt-2 relative">
|
| 69 |
+
<input type="text" placeholder="Search elements..." class="w-full px-3 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-300">
|
| 70 |
+
<i class="fas fa-search absolute right-3 top-3 text-gray-400"></i>
|
| 71 |
+
</div>
|
| 72 |
+
</div>
|
| 73 |
+
|
| 74 |
+
<div class="p-4 space-y-4">
|
| 75 |
+
<!-- Basic Elements -->
|
| 76 |
+
<div>
|
| 77 |
+
<h3 class="font-medium text-gray-700 mb-2 flex items-center">
|
| 78 |
+
<i class="fas fa-cubes mr-2 text-blue-500"></i> Basic
|
| 79 |
+
</h3>
|
| 80 |
+
<div class="grid grid-cols-2 gap-3">
|
| 81 |
+
<div class="element-card bg-white p-3 rounded-lg border cursor-pointer shadow-sm hover:shadow-md transition">
|
| 82 |
+
<div class="flex items-center">
|
| 83 |
+
<div class="w-8 h-8 bg-blue-100 rounded-full flex items-center justify-center mr-2">
|
| 84 |
+
<i class="fas fa-heading text-blue-500"></i>
|
| 85 |
+
</div>
|
| 86 |
+
<span class="text-sm">Heading</span>
|
| 87 |
+
</div>
|
| 88 |
+
</div>
|
| 89 |
+
<div class="element-card bg-white p-3 rounded-lg border cursor-pointer shadow-sm hover:shadow-md transition">
|
| 90 |
+
<div class="flex items-center">
|
| 91 |
+
<div class="w-8 h-8 bg-green-100 rounded-full flex items-center justify-center mr-2">
|
| 92 |
+
<i class="fas fa-paragraph text-green-500"></i>
|
| 93 |
+
</div>
|
| 94 |
+
<span class="text-sm">Text</span>
|
| 95 |
+
</div>
|
| 96 |
+
</div>
|
| 97 |
+
<div class="element-card bg-white p-3 rounded-lg border cursor-pointer shadow-sm hover:shadow-md transition">
|
| 98 |
+
<div class="flex items-center">
|
| 99 |
+
<div class="w-8 h-8 bg-yellow-100 rounded-full flex items-center justify-center mr-2">
|
| 100 |
+
<i class="fas fa-image text-yellow-500"></i>
|
| 101 |
+
</div>
|
| 102 |
+
<span class="text-sm">Image</span>
|
| 103 |
+
</div>
|
| 104 |
+
</div>
|
| 105 |
+
<div class="element-card bg-white p-3 rounded-lg border cursor-pointer shadow-sm hover:shadow-md transition">
|
| 106 |
+
<div class="flex items-center">
|
| 107 |
+
<div class="w-8 h-8 bg-red-100 rounded-full flex items-center justify-center mr-2">
|
| 108 |
+
<i class="fas fa-video text-red-500"></i>
|
| 109 |
+
</div>
|
| 110 |
+
<span class="text-sm">Video</span>
|
| 111 |
+
</div>
|
| 112 |
+
</div>
|
| 113 |
+
</div>
|
| 114 |
+
</div>
|
| 115 |
+
|
| 116 |
+
<!-- Layout Elements -->
|
| 117 |
+
<div>
|
| 118 |
+
<h3 class="font-medium text-gray-700 mb-2 flex items-center">
|
| 119 |
+
<i class="fas fa-th-large mr-2 text-purple-500"></i> Layout
|
| 120 |
+
</h3>
|
| 121 |
+
<div class="grid grid-cols-2 gap-3">
|
| 122 |
+
<div class="element-card bg-white p-3 rounded-lg border cursor-pointer shadow-sm hover:shadow-md transition">
|
| 123 |
+
<div class="flex items-center">
|
| 124 |
+
<div class="w-8 h-8 bg-indigo-100 rounded-full flex items-center justify-center mr-2">
|
| 125 |
+
<i class="fas fa-columns text-indigo-500"></i>
|
| 126 |
+
</div>
|
| 127 |
+
<span class="text-sm">Columns</span>
|
| 128 |
+
</div>
|
| 129 |
+
</div>
|
| 130 |
+
<div class="element-card bg-white p-3 rounded-lg border cursor-pointer shadow-sm hover:shadow-md transition">
|
| 131 |
+
<div class="flex items-center">
|
| 132 |
+
<div class="w-8 h-8 bg-pink-100 rounded-full flex items-center justify-center mr-2">
|
| 133 |
+
<i class="fas fa-boxes text-pink-500"></i>
|
| 134 |
+
</div>
|
| 135 |
+
<span class="text-sm">Container</span>
|
| 136 |
+
</div>
|
| 137 |
+
</div>
|
| 138 |
+
<div class="element-card bg-white p-3 rounded-lg border cursor-pointer shadow-sm hover:shadow-md transition">
|
| 139 |
+
<div class="flex items-center">
|
| 140 |
+
<div class="w-8 h-8 bg-teal-100 rounded-full flex items-center justify-center mr-2">
|
| 141 |
+
<i class="fas fa-table text-teal-500"></i>
|
| 142 |
+
</div>
|
| 143 |
+
<span class="text-sm">Table</span>
|
| 144 |
+
</div>
|
| 145 |
+
</div>
|
| 146 |
+
<div class="element-card bg-white p-3 rounded-lg border cursor-pointer shadow-sm hover:shadow-md transition">
|
| 147 |
+
<div class="flex items-center">
|
| 148 |
+
<div class="w-8 h-8 bg-orange-100 rounded-full flex items-center justify-center mr-2">
|
| 149 |
+
<i class="fas fa-tabs text-orange-500"></i>
|
| 150 |
+
</div>
|
| 151 |
+
<span class="text-sm">Tabs</span>
|
| 152 |
+
</div>
|
| 153 |
+
</div>
|
| 154 |
+
</div>
|
| 155 |
+
</div>
|
| 156 |
+
|
| 157 |
+
<!-- WordPress Elements -->
|
| 158 |
+
<div>
|
| 159 |
+
<h3 class="font-medium text-gray-700 mb-2 flex items-center">
|
| 160 |
+
<i class="fab fa-wordpress mr-2 text-blue-500"></i> WordPress
|
| 161 |
+
</h3>
|
| 162 |
+
<div class="grid grid-cols-2 gap-3">
|
| 163 |
+
<div class="element-card bg-white p-3 rounded-lg border cursor-pointer shadow-sm hover:shadow-md transition">
|
| 164 |
+
<div class="flex items-center">
|
| 165 |
+
<div class="w-8 h-8 bg-blue-100 rounded-full flex items-center justify-center mr-2">
|
| 166 |
+
<i class="fas fa-newspaper text-blue-500"></i>
|
| 167 |
+
</div>
|
| 168 |
+
<span class="text-sm">Post Grid</span>
|
| 169 |
+
</div>
|
| 170 |
+
</div>
|
| 171 |
+
<div class="element-card bg-white p-3 rounded-lg border cursor-pointer shadow-sm hover:shadow-md transition">
|
| 172 |
+
<div class="flex items-center">
|
| 173 |
+
<div class="w-8 h-8 bg-green-100 rounded-full flex items-center justify-center mr-2">
|
| 174 |
+
<i class="fas fa-comments text-green-500"></i>
|
| 175 |
+
</div>
|
| 176 |
+
<span class="text-sm">Comments</span>
|
| 177 |
+
</div>
|
| 178 |
+
</div>
|
| 179 |
+
<div class="element-card bg-white p-3 rounded-lg border cursor-pointer shadow-sm hover:shadow-md transition">
|
| 180 |
+
<div class="flex items-center">
|
| 181 |
+
<div class="w-8 h-8 bg-yellow-100 rounded-full flex items-center justify-center mr-2">
|
| 182 |
+
<i class="fas fa-search text-yellow-500"></i>
|
| 183 |
+
</div>
|
| 184 |
+
<span class="text-sm">Search Form</span>
|
| 185 |
+
</div>
|
| 186 |
+
</div>
|
| 187 |
+
<div class="element-card bg-white p-3 rounded-lg border cursor-pointer shadow-sm hover:shadow-md transition">
|
| 188 |
+
<div class="flex items-center">
|
| 189 |
+
<div class="w-8 h-8 bg-red-100 rounded-full flex items-center justify-center mr-2">
|
| 190 |
+
<i class="fas fa-user text-red-500"></i>
|
| 191 |
+
</div>
|
| 192 |
+
<span class="text-sm">Login Form</span>
|
| 193 |
+
</div>
|
| 194 |
+
</div>
|
| 195 |
+
</div>
|
| 196 |
+
</div>
|
| 197 |
+
|
| 198 |
+
<!-- AI Suggestions -->
|
| 199 |
+
<div class="ai-suggestion bg-purple-50 border border-purple-200 rounded-lg p-3">
|
| 200 |
+
<div class="flex items-start">
|
| 201 |
+
<div class="w-8 h-8 bg-purple-100 rounded-full flex items-center justify-center mr-2 flex-shrink-0">
|
| 202 |
+
<i class="fas fa-robot text-purple-500"></i>
|
| 203 |
+
</div>
|
| 204 |
+
<div>
|
| 205 |
+
<h4 class="font-medium text-purple-800">AI Suggestion</h4>
|
| 206 |
+
<p class="text-sm text-purple-700">Based on your content, I recommend adding a Call-to-Action section here.</p>
|
| 207 |
+
<button class="mt-2 text-xs bg-purple-500 text-white px-2 py-1 rounded hover:bg-purple-600 transition">Add CTA</button>
|
| 208 |
+
</div>
|
| 209 |
+
</div>
|
| 210 |
+
</div>
|
| 211 |
+
</div>
|
| 212 |
+
</div>
|
| 213 |
+
|
| 214 |
+
<!-- Main Canvas Area -->
|
| 215 |
+
<div class="flex-1 overflow-auto">
|
| 216 |
+
<div class="container mx-auto px-4 py-6">
|
| 217 |
+
<div class="bg-white rounded-xl shadow-lg overflow-hidden">
|
| 218 |
+
<!-- Toolbar -->
|
| 219 |
+
<div class="bg-gray-100 px-4 py-3 flex justify-between items-center border-b">
|
| 220 |
+
<div class="flex space-x-2">
|
| 221 |
+
<button class="p-2 rounded hover:bg-gray-200 transition">
|
| 222 |
+
<i class="fas fa-desktop"></i>
|
| 223 |
+
</button>
|
| 224 |
+
<button class="p-2 rounded hover:bg-gray-200 transition">
|
| 225 |
+
<i class="fas fa-tablet-alt"></i>
|
| 226 |
+
</button>
|
| 227 |
+
<button class="p-2 rounded hover:bg-gray-200 transition">
|
| 228 |
+
<i class="fas fa-mobile-alt"></i>
|
| 229 |
+
</button>
|
| 230 |
+
</div>
|
| 231 |
+
<div class="flex space-x-2">
|
| 232 |
+
<button class="p-2 rounded hover:bg-gray-200 transition">
|
| 233 |
+
<i class="fas fa-undo"></i>
|
| 234 |
+
</button>
|
| 235 |
+
<button class="p-2 rounded hover:bg-gray-200 transition">
|
| 236 |
+
<i class="fas fa-redo"></i>
|
| 237 |
+
</button>
|
| 238 |
+
<button class="p-2 rounded hover:bg-gray-200 transition">
|
| 239 |
+
<i class="fas fa-trash"></i>
|
| 240 |
+
</button>
|
| 241 |
+
</div>
|
| 242 |
+
</div>
|
| 243 |
+
|
| 244 |
+
<!-- Actual Canvas -->
|
| 245 |
+
<div class="canvas-area p-6">
|
| 246 |
+
<div class="max-w-4xl mx-auto">
|
| 247 |
+
<div class="droppable rounded-lg mb-6 p-4 flex items-center justify-center">
|
| 248 |
+
<p class="text-gray-500">Drag elements here or click the + button to add content</p>
|
| 249 |
+
<button class="ml-4 w-8 h-8 bg-purple-500 text-white rounded-full hover:bg-purple-600 transition">
|
| 250 |
+
<i class="fas fa-plus"></i>
|
| 251 |
+
</button>
|
| 252 |
+
</div>
|
| 253 |
+
|
| 254 |
+
<!-- Sample Content -->
|
| 255 |
+
<div class="bg-white rounded-lg border mb-6 overflow-hidden">
|
| 256 |
+
<div class="p-4 border-b bg-gray-50 flex justify-between items-center">
|
| 257 |
+
<div class="flex items-center">
|
| 258 |
+
<i class="fas fa-heading text-blue-500 mr-2"></i>
|
| 259 |
+
<span>Heading</span>
|
| 260 |
+
</div>
|
| 261 |
+
<div class="flex space-x-2">
|
| 262 |
+
<button class="p-1 text-gray-500 hover:text-gray-700">
|
| 263 |
+
<i class="fas fa-cog"></i>
|
| 264 |
+
</button>
|
| 265 |
+
<button class="p-1 text-gray-500 hover:text-gray-700">
|
| 266 |
+
<i class="fas fa-trash"></i>
|
| 267 |
+
</button>
|
| 268 |
+
</div>
|
| 269 |
+
</div>
|
| 270 |
+
<div class="p-4">
|
| 271 |
+
<h2 class="text-3xl font-bold" contenteditable="true">Welcome to My WordPress Site</h2>
|
| 272 |
+
</div>
|
| 273 |
+
</div>
|
| 274 |
+
|
| 275 |
+
<div class="bg-white rounded-lg border mb-6 overflow-hidden">
|
| 276 |
+
<div class="p-4 border-b bg-gray-50 flex justify-between items-center">
|
| 277 |
+
<div class="flex items-center">
|
| 278 |
+
<i class="fas fa-paragraph text-green-500 mr-2"></i>
|
| 279 |
+
<span>Text</span>
|
| 280 |
+
</div>
|
| 281 |
+
<div class="flex space-x-2">
|
| 282 |
+
<button class="p-1 text-gray-500 hover:text-gray-700">
|
| 283 |
+
<i class="fas fa-cog"></i>
|
| 284 |
+
</button>
|
| 285 |
+
<button class="p-1 text-gray-500 hover:text-gray-700">
|
| 286 |
+
<i class="fas fa-trash"></i>
|
| 287 |
+
</button>
|
| 288 |
+
</div>
|
| 289 |
+
</div>
|
| 290 |
+
<div class="p-4">
|
| 291 |
+
<p class="text-gray-700" contenteditable="true">This is a sample paragraph that you can edit right on the page. The NXPLUG Page Builder makes it easy to create beautiful layouts without any coding knowledge. Try adding more elements to see how it works!</p>
|
| 292 |
+
</div>
|
| 293 |
+
</div>
|
| 294 |
+
|
| 295 |
+
<div class="grid grid-cols-2 gap-6 mb-6">
|
| 296 |
+
<div class="bg-white rounded-lg border overflow-hidden">
|
| 297 |
+
<div class="p-4 border-b bg-gray-50 flex justify-between items-center">
|
| 298 |
+
<div class="flex items-center">
|
| 299 |
+
<i class="fas fa-image text-yellow-500 mr-2"></i>
|
| 300 |
+
<span>Image</span>
|
| 301 |
+
</div>
|
| 302 |
+
<div class="flex space-x-2">
|
| 303 |
+
<button class="p-1 text-gray-500 hover:text-gray-700">
|
| 304 |
+
<i class="fas fa-cog"></i>
|
| 305 |
+
</button>
|
| 306 |
+
<button class="p-1 text-gray-500 hover:text-gray-700">
|
| 307 |
+
<i class="fas fa-trash"></i>
|
| 308 |
+
</button>
|
| 309 |
+
</div>
|
| 310 |
+
</div>
|
| 311 |
+
<div class="p-4">
|
| 312 |
+
<div class="bg-gray-200 h-40 flex items-center justify-center text-gray-500">
|
| 313 |
+
<i class="fas fa-image fa-2x"></i>
|
| 314 |
+
</div>
|
| 315 |
+
</div>
|
| 316 |
+
</div>
|
| 317 |
+
|
| 318 |
+
<div class="bg-white rounded-lg border overflow-hidden">
|
| 319 |
+
<div class="p-4 border-b bg-gray-50 flex justify-between items-center">
|
| 320 |
+
<div class="flex items-center">
|
| 321 |
+
<i class="fas fa-button text-red-500 mr-2"></i>
|
| 322 |
+
<span>Button</span>
|
| 323 |
+
</div>
|
| 324 |
+
<div class="flex space-x-2">
|
| 325 |
+
<button class="p-1 text-gray-500 hover:text-gray-700">
|
| 326 |
+
<i class="fas fa-cog"></i>
|
| 327 |
+
</button>
|
| 328 |
+
<button class="p-1 text-gray-500 hover:text-gray-700">
|
| 329 |
+
<i class="fas fa-trash"></i>
|
| 330 |
+
</button>
|
| 331 |
+
</div>
|
| 332 |
+
</div>
|
| 333 |
+
<div class="p-4">
|
| 334 |
+
<button class="px-6 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 transition" contenteditable="true">Click Me</button>
|
| 335 |
+
</div>
|
| 336 |
+
</div>
|
| 337 |
+
</div>
|
| 338 |
+
|
| 339 |
+
<div class="droppable rounded-lg p-4 flex items-center justify-center">
|
| 340 |
+
<p class="text-gray-500">Add more content here</p>
|
| 341 |
+
<button class="ml-4 w-8 h-8 bg-purple-500 text-white rounded-full hover:bg-purple-600 transition">
|
| 342 |
+
<i class="fas fa-plus"></i>
|
| 343 |
+
</button>
|
| 344 |
+
</div>
|
| 345 |
+
</div>
|
| 346 |
+
</div>
|
| 347 |
+
</div>
|
| 348 |
+
</div>
|
| 349 |
+
</div>
|
| 350 |
+
|
| 351 |
+
<!-- Right Sidebar - Settings -->
|
| 352 |
+
<div class="sidebar w-80 bg-white shadow-lg overflow-y-auto border-l">
|
| 353 |
+
<div class="p-4 border-b">
|
| 354 |
+
<h2 class="font-bold text-lg flex items-center">
|
| 355 |
+
<i class="fas fa-sliders-h mr-2 text-purple-600"></i> Settings
|
| 356 |
+
</h2>
|
| 357 |
+
</div>
|
| 358 |
+
|
| 359 |
+
<div class="p-4">
|
| 360 |
+
<div class="mb-6">
|
| 361 |
+
<h3 class="font-medium text-gray-700 mb-3 flex items-center">
|
| 362 |
+
<i class="fas fa-layer-group mr-2 text-blue-500"></i> Page Settings
|
| 363 |
+
</h3>
|
| 364 |
+
<div class="space-y-4">
|
| 365 |
+
<div>
|
| 366 |
+
<label class="block text-sm font-medium text-gray-700 mb-1">Page Title</label>
|
| 367 |
+
<input type="text" class="w-full px-3 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-300" value="Homepage">
|
| 368 |
+
</div>
|
| 369 |
+
<div>
|
| 370 |
+
<label class="block text-sm font-medium text-gray-700 mb-1">Page Layout</label>
|
| 371 |
+
<select class="w-full px-3 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-300">
|
| 372 |
+
<option>Full Width</option>
|
| 373 |
+
<option>Boxed</option>
|
| 374 |
+
<option>Left Sidebar</option>
|
| 375 |
+
<option>Right Sidebar</option>
|
| 376 |
+
</select>
|
| 377 |
+
</div>
|
| 378 |
+
<div>
|
| 379 |
+
<label class="block text-sm font-medium text-gray-700 mb-1">Background</label>
|
| 380 |
+
<div class="flex space-x-2">
|
| 381 |
+
<div class="w-8 h-8 rounded border cursor-pointer bg-white"></div>
|
| 382 |
+
<div class="w-8 h-8 rounded border cursor-pointer bg-gray-100"></div>
|
| 383 |
+
<div class="w-8 h-8 rounded border cursor-pointer bg-gray-200"></div>
|
| 384 |
+
<div class="w-8 h-8 rounded border cursor-pointer bg-gradient-to-r from-blue-400 to-purple-500"></div>
|
| 385 |
+
<div class="w-8 h-8 rounded border cursor-pointer flex items-center justify-center text-gray-500">
|
| 386 |
+
<i class="fas fa-image"></i>
|
| 387 |
+
</div>
|
| 388 |
+
</div>
|
| 389 |
+
</div>
|
| 390 |
+
</div>
|
| 391 |
+
</div>
|
| 392 |
+
|
| 393 |
+
<div class="mb-6">
|
| 394 |
+
<h3 class="font-medium text-gray-700 mb-3 flex items-center">
|
| 395 |
+
<i class="fas fa-cog mr-2 text-green-500"></i> Element Settings
|
| 396 |
+
</h3>
|
| 397 |
+
<div class="space-y-4">
|
| 398 |
+
<div>
|
| 399 |
+
<label class="block text-sm font-medium text-gray-700 mb-1">Typography</label>
|
| 400 |
+
<div class="grid grid-cols-2 gap-2">
|
| 401 |
+
<select class="col-span-2 px-3 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-300">
|
| 402 |
+
<option>Default Font</option>
|
| 403 |
+
<option>Open Sans</option>
|
| 404 |
+
<option>Roboto</option>
|
| 405 |
+
<option>Montserrat</option>
|
| 406 |
+
</select>
|
| 407 |
+
<select class="px-3 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-300">
|
| 408 |
+
<option>Normal</option>
|
| 409 |
+
<option>Bold</option>
|
| 410 |
+
<option>Light</option>
|
| 411 |
+
</select>
|
| 412 |
+
<select class="px-3 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-300">
|
| 413 |
+
<option>16px</option>
|
| 414 |
+
<option>14px</option>
|
| 415 |
+
<option>18px</option>
|
| 416 |
+
<option>20px</option>
|
| 417 |
+
</select>
|
| 418 |
+
</div>
|
| 419 |
+
</div>
|
| 420 |
+
<div>
|
| 421 |
+
<label class="block text-sm font-medium text-gray-700 mb-1">Spacing</label>
|
| 422 |
+
<div class="grid grid-cols-4 gap-2">
|
| 423 |
+
<div>
|
| 424 |
+
<label class="text-xs block text-center text-gray-500">Top</label>
|
| 425 |
+
<input type="number" class="w-full px-2 py-1 border rounded focus:outline-none focus:ring-1 focus:ring-purple-300" value="10">
|
| 426 |
+
</div>
|
| 427 |
+
<div>
|
| 428 |
+
<label class="text-xs block text-center text-gray-500">Right</label>
|
| 429 |
+
<input type="number" class="w-full px-2 py-1 border rounded focus:outline-none focus:ring-1 focus:ring-purple-300" value="10">
|
| 430 |
+
</div>
|
| 431 |
+
<div>
|
| 432 |
+
<label class="text-xs block text-center text-gray-500">Bottom</label>
|
| 433 |
+
<input type="number" class="w-full px-2 py-1 border rounded focus:outline-none focus:ring-1 focus:ring-purple-300" value="10">
|
| 434 |
+
</div>
|
| 435 |
+
<div>
|
| 436 |
+
<label class="text-xs block text-center text-gray-500">Left</label>
|
| 437 |
+
<input type="number" class="w-full px-2 py-1 border rounded focus:outline-none focus:ring-1 focus:ring-purple-300" value="10">
|
| 438 |
+
</div>
|
| 439 |
+
</div>
|
| 440 |
+
</div>
|
| 441 |
+
<div>
|
| 442 |
+
<label class="block text-sm font-medium text-gray-700 mb-1">Animation</label>
|
| 443 |
+
<select class="w-full px-3 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-300">
|
| 444 |
+
<option>None</option>
|
| 445 |
+
<option>Fade In</option>
|
| 446 |
+
<option>Slide Up</option>
|
| 447 |
+
<option>Zoom In</option>
|
| 448 |
+
<option>Bounce</option>
|
| 449 |
+
</select>
|
| 450 |
+
</div>
|
| 451 |
+
</div>
|
| 452 |
+
</div>
|
| 453 |
+
|
| 454 |
+
<div class="ai-suggestion bg-purple-50 border border-purple-200 rounded-lg p-3">
|
| 455 |
+
<div class="flex items-start">
|
| 456 |
+
<div class="w-8 h-8 bg-purple-100 rounded-full flex items-center justify-center mr-2 flex-shrink-0">
|
| 457 |
+
<i class="fas fa-robot text-purple-500"></i>
|
| 458 |
+
</div>
|
| 459 |
+
<div>
|
| 460 |
+
<h4 class="font-medium text-purple-800">AI Optimization</h4>
|
| 461 |
+
<p class="text-sm text-purple-700">Your page could benefit from better SEO. Would you like me to optimize your headings and content?</p>
|
| 462 |
+
<button class="mt-2 text-xs bg-purple-500 text-white px-2 py-1 rounded hover:bg-purple-600 transition">Optimize Now</button>
|
| 463 |
+
</div>
|
| 464 |
+
</div>
|
| 465 |
+
</div>
|
| 466 |
+
</div>
|
| 467 |
+
</div>
|
| 468 |
+
</div>
|
| 469 |
+
|
| 470 |
+
<!-- AI Assistant Floating Button -->
|
| 471 |
+
<div class="fixed bottom-6 right-6">
|
| 472 |
+
<button class="w-14 h-14 bg-purple-600 text-white rounded-full shadow-lg hover:bg-purple-700 transition flex items-center justify-center">
|
| 473 |
+
<i class="fas fa-robot text-2xl"></i>
|
| 474 |
+
</button>
|
| 475 |
+
</div>
|
| 476 |
+
|
| 477 |
+
<script>
|
| 478 |
+
// Simple drag and drop functionality
|
| 479 |
+
document.addEventListener('DOMContentLoaded', function() {
|
| 480 |
+
const elements = document.querySelectorAll('.element-card');
|
| 481 |
+
const droppableAreas = document.querySelectorAll('.droppable');
|
| 482 |
+
|
| 483 |
+
elements.forEach(element => {
|
| 484 |
+
element.addEventListener('dragstart', function(e) {
|
| 485 |
+
e.dataTransfer.setData('text/plain', element.innerText.trim());
|
| 486 |
+
element.classList.add('opacity-50');
|
| 487 |
+
});
|
| 488 |
+
|
| 489 |
+
element.addEventListener('dragend', function() {
|
| 490 |
+
element.classList.remove('opacity-50');
|
| 491 |
+
});
|
| 492 |
+
});
|
| 493 |
+
|
| 494 |
+
droppableAreas.forEach(area => {
|
| 495 |
+
area.addEventListener('dragover', function(e) {
|
| 496 |
+
e.preventDefault();
|
| 497 |
+
area.classList.add('bg-purple-100');
|
| 498 |
+
});
|
| 499 |
+
|
| 500 |
+
area.addEventListener('dragleave', function() {
|
| 501 |
+
area.classList.remove('bg-purple-100');
|
| 502 |
+
});
|
| 503 |
+
|
| 504 |
+
area.addEventListener('drop', function(e) {
|
| 505 |
+
e.preventDefault();
|
| 506 |
+
area.classList.remove('bg-purple-100');
|
| 507 |
+
const elementType = e.dataTransfer.getData('text/plain');
|
| 508 |
+
alert(`Dropped ${elementType} element! In a real app, this would add the element to the page.`);
|
| 509 |
+
});
|
| 510 |
+
});
|
| 511 |
+
|
| 512 |
+
// AI Assistant button click
|
| 513 |
+
const aiButton = document.querySelector('.fixed button');
|
| 514 |
+
aiButton.addEventListener('click', function() {
|
| 515 |
+
alert('NXPLUG AI Assistant: How can I help you design your perfect page today?');
|
| 516 |
+
});
|
| 517 |
+
});
|
| 518 |
+
</script>
|
| 519 |
+
<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=XXXMARK/page-builder" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
|
| 520 |
</html>
|
prompts.txt
ADDED
|
File without changes
|