-
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathcms.html
More file actions
135 lines (126 loc) · 8.14 KB
/
cms.html
File metadata and controls
135 lines (126 loc) · 8.14 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CMS - A Journey of Us</title>
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap" rel="stylesheet">
<style>
body { font-family: 'Poppins', sans-serif; }
</style>
</head>
<body class="bg-gray-100 text-gray-800 pb-20">
<div class="max-w-5xl mx-auto p-6">
<div class="flex justify-between items-center mb-8">
<h1 class="text-3xl font-bold text-rose-600">Propose Love CMS</h1>
<a href="/" target="_blank" class="text-blue-500 hover:underline">View Website →</a>
</div>
<div id="status-message" class="hidden mb-6 p-4 rounded-lg sticky top-4 z-50 shadow-md transition-all"></div>
<form id="cms-form" class="space-y-8">
<!-- Hero Section -->
<div class="bg-white p-6 rounded-xl shadow-sm border border-gray-200">
<h2 class="text-xl font-bold mb-4 text-gray-700 border-b pb-2">Hero Section</h2>
<div class="grid gap-4">
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">Title</label>
<input type="text" id="hero-title" class="w-full border border-gray-300 rounded-md p-2 focus:ring-rose-500 focus:border-rose-500" required>
</div>
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">Subtitle</label>
<input type="text" id="hero-subtitle" class="w-full border border-gray-300 rounded-md p-2 focus:ring-rose-500 focus:border-rose-500" required>
</div>
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">Description</label>
<textarea id="hero-description" rows="3" class="w-full border border-gray-300 rounded-md p-2 focus:ring-rose-500 focus:border-rose-500" required></textarea>
</div>
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">Footer Text</label>
<input type="text" id="hero-footerText" class="w-full border border-gray-300 rounded-md p-2 focus:ring-rose-500 focus:border-rose-500" required>
</div>
</div>
</div>
<!-- Timeline Section -->
<div class="bg-white p-6 rounded-xl shadow-sm border border-gray-200">
<div class="flex justify-between items-center mb-4 border-b pb-2">
<h2 class="text-xl font-bold text-gray-700">Timeline Section</h2>
<button type="button" id="add-timeline-btn" class="bg-blue-100 text-blue-700 hover:bg-blue-200 px-3 py-1 rounded text-sm font-medium transition-colors">+ Add Event</button>
</div>
<div class="grid gap-4 mb-6">
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">Section Title</label>
<input type="text" id="timeline-title" class="w-full border border-gray-300 rounded-md p-2 focus:ring-rose-500 focus:border-rose-500" required>
</div>
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">Section Subtitle</label>
<input type="text" id="timeline-subtitle" class="w-full border border-gray-300 rounded-md p-2 focus:ring-rose-500 focus:border-rose-500" required>
</div>
</div>
<!-- Container for dynamic items -->
<div id="timeline-container" class="space-y-4"></div>
</div>
<!-- Gallery Section -->
<div class="bg-white p-6 rounded-xl shadow-sm border border-gray-200">
<div class="flex justify-between items-center mb-4 border-b pb-2">
<h2 class="text-xl font-bold text-gray-700">Gallery Section</h2>
<button type="button" id="add-gallery-btn" class="bg-blue-100 text-blue-700 hover:bg-blue-200 px-3 py-1 rounded text-sm font-medium transition-colors">+ Add Photo</button>
</div>
<div class="grid gap-4 mb-6">
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">Section Title</label>
<input type="text" id="gallery-title" class="w-full border border-gray-300 rounded-md p-2 focus:ring-rose-500 focus:border-rose-500" required>
</div>
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">Section Subtitle</label>
<input type="text" id="gallery-subtitle" class="w-full border border-gray-300 rounded-md p-2 focus:ring-rose-500 focus:border-rose-500" required>
</div>
</div>
<!-- Container for dynamic items -->
<div id="gallery-container" class="space-y-4 grid sm:grid-cols-2 gap-4"></div>
</div>
<!-- Reasons Section -->
<div class="bg-white p-6 rounded-xl shadow-sm border border-gray-200">
<div class="flex justify-between items-center mb-4 border-b pb-2">
<h2 class="text-xl font-bold text-gray-700">Reasons Section</h2>
<button type="button" id="add-reasons-btn" class="bg-blue-100 text-blue-700 hover:bg-blue-200 px-3 py-1 rounded text-sm font-medium transition-colors">+ Add Reason</button>
</div>
<div class="grid gap-4 mb-6">
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">Section Title</label>
<input type="text" id="reasons-title" class="w-full border border-gray-300 rounded-md p-2 focus:ring-rose-500 focus:border-rose-500" required>
</div>
</div>
<!-- Container for dynamic items -->
<div id="reasons-container" class="space-y-4 grid sm:grid-cols-2 gap-4"></div>
</div>
<!-- Proposal Section -->
<div class="bg-white p-6 rounded-xl shadow-sm border border-gray-200">
<h2 class="text-xl font-bold mb-4 text-gray-700 border-b pb-2">Proposal Section</h2>
<div class="grid gap-4">
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">Target Name</label>
<input type="text" id="proposal-targetName" class="w-full border border-gray-300 rounded-md p-2 focus:ring-rose-500 focus:border-rose-500" required>
</div>
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">Message</label>
<textarea id="proposal-message" rows="3" class="w-full border border-gray-300 rounded-md p-2 focus:ring-rose-500 focus:border-rose-500" required></textarea>
</div>
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">Question</label>
<input type="text" id="proposal-question" class="w-full border border-gray-300 rounded-md p-2 focus:ring-rose-500 focus:border-rose-500" required>
</div>
</div>
</div>
<!-- Submit Button -->
<div class="fixed bottom-0 left-0 right-0 bg-white p-4 shadow-[0_-4px_6px_-1px_rgba(0,0,0,0.1)] flex justify-center z-50">
<div class="max-w-4xl w-full flex justify-end">
<button type="submit" id="save-btn" class="bg-rose-600 hover:bg-rose-700 text-white font-bold py-3 px-8 rounded-lg transition-colors flex items-center shadow-md">
<span>Simpan Data & Push ke GitHub</span>
</button>
</div>
</div>
</form>
</div>
<script src="apps/assets/js/cms.js"></script>
</body>
</html>