-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathportofolio-manpumping.html
279 lines (255 loc) · 7.97 KB
/
portofolio-manpumping.html
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
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
<style type="text/css">
@import url("https://fonts.googleapis.com/css?family=Baloo+Chettan+2&display=swap");
.body2::-webkit-scrollbar {
width: 0.5em;
}
.body2::-webkit-scrollbar-track {
box-shadow: inset 0 0 6px rgb(167 167 167 / 41%);
background-color: #061e29;
}
.body2::-webkit-scrollbar-thumb {
background-color: #00f1ffab;
}
.body2 {
font-family: "Baloo Chettan 2";
color: #e5e5e5;
margin: 2%;
text-align: justify;
padding: 3%;
}
.body2 a {
color: dodgerblue;
}
/* table wisata ...................*/
.twisata {
}
.twisata tr {
background: linear-gradient(90deg, #1193a1, transparent);
color: white;
font-weight: 900;
border: 3px solid #ffffff;
}
.twisata tr td {
}
.twisata tr td span {
background: #bdffda;
font-weight: 900;
padding: 1px 6px;
border-radius: 5px;
color: #08102b;
}
/* wisata-container ...................*/
.container-wisata {
box-shadow: rgb(0 0 0 / 24%) 0px 3px 8px;
display: flex;
width: 100%;
padding: 1% 0%;
box-sizing: border-box;
height: 50vh;
border-radius: 10px;
}
.boxwisata {
flex: 1;
overflow: hidden;
transition: 0.5s;
margin: 1px 1%;
box-shadow: 0 20px 30px rgba(0, 0, 0, 0.1);
line-height: 0;
}
.boxwisata > img {
width: 200%;
height: calc(100% - 10vh);
object-fit: cover;
transition: 0.5s;
height: 100% !important;
}
.boxwisata > span {
position: relative;
left: 7px;
font-size: xx-small;
color: #f5fff7 !important;
bottom: 20px;
white-space: nowrap;
background-color: rgb(1 118 74 / 20%);
padding: 0 6px 0 4px;
border-radius: 0 10px 10px 0;
}
.boxwisata:hover {
flex: 1 1 50%;
}
.boxwisata:hover > img {
width: 100%;
height: 100%;
}
.btn-portofolio {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
font-family: inherit;
font-size: 13px;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.4px;
color: #7e97b8;
background-color: #e0e8ef;
border-style: solid;
border-width: 2px 2px 2px 2px;
border-color: rgba(255, 255, 255, 0.333);
border-radius: 40px 40px 40px 40px;
padding: 16px 24px 16px 28px;
transform: translate(0px, 0px) rotate(0deg);
transition: 0.2s;
box-shadow: -4px -2px 16px 0px #ffffff,
4px 2px 16px 0px rgb(95 157 231 / 48%);
}
.btn-portofolio:hover {
color: #516d91;
background-color: #e5edf5;
box-shadow: -2px -1px 8px 0px #ffffff, 2px 1px 8px 0px rgb(95 157 231 / 48%);
}
.btn-portofolio:active {
box-shadow: none;
}
</style>
<div class="container-wisata">
<div class="boxwisata">
<img alt="Curug Cipalasari" src="IMG/pumpingcharity/man.pumpingc1.webp" />
<span>Login Page</span>
</div>
<div class="boxwisata">
<img alt="Curug Cipalasari" src="IMG/pumpingcharity/man.pumpingc2.webp" />
<span>Laporan</span>
</div>
<div class="boxwisata">
<img alt="Curug Cipalasari" src="IMG/pumpingcharity/man.pumpingc3.webp" />
<span>Dana Kelola</span>
</div>
</div>
<br />
<body class="body2">
<a
class="btn-portofolio"
target="_blank"
href="https://surat.glccontrol.com/"
>
<svg
viewBox="0 0 24 24"
width="24"
height="24"
stroke="currentColor"
stroke-width="2"
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
class="css-i6dzq1"
>
<polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"></polygon>
</svg>
Demo : Klik di sini </a
><br />
<h1>SIPDI: Versi 2.1.1</h1>
<h2>Sistem Informasi Pengelolaan Dana</h2>
<p>
SIPDI adalah sebuah sistem informasi berbasis web yang dirancang untuk
mengelola berbagai aspek penting dalam organisasi pengumpulan dana. Ini
mencakup pengendalian pengajuan SPT, pengelolaan dana, keanggotaan,
basecamp, profit, inventaris, transaksi, kas, dan pembuatan laporan yang
kompleks. Sistem ini memiliki tiga tingkatan akses pengguna yang berbeda:
Super Admin, Admin Entry, dan View Mode.
</p>
<h2>Super Admin:</h2>
<p>Username: admin2<br />Password: admin2</p>
<p>
Super Admin memiliki hak akses tertinggi dalam sistem ini dan bertanggung
jawab atas manajemen keseluruhan. Tugas utama Super Admin adalah meninjau
data permohonan SPT dari admin entry serta memiliki kemampuan untuk mengubah
hak akses admin.
</p>
<h2>Admin Entry:</h2>
<p>Username: admin1<br />Password: admin1</p>
<p>
Admin Entry memiliki kewenangan untuk melakukan penginputan data ke dalam
sistem. Mereka dapat memperbarui informasi mengenai dana, anggota, basecamp,
transaksi, dan lain-lain. Ini membantu dalam menjaga integritas data dan
memastikan bahwa informasi yang tersimpan dalam sistem selalu akurat dan
terkini.
</p>
<h2>View Mode:</h2>
<p>Username: admin3<br />Password: admin3</p>
<p>
View Mode adalah tingkatan akses yang lebih terbatas. Pengguna dengan akses
ini dapat melihat informasi yang telah dimasukkan ke dalam sistem, termasuk
data SPT, informasi pemilik Curug Cipalasari, dan laporan yang dihasilkan
oleh Super Admin.
</p>
<h2>Fitur Unggulan:</h2>
<p>
a. Menampilkan data secara realtime secara bersamaan: Fitur unggulan yang
membedakan sistem ini adalah kemampuannya untuk menampilkan data secara
realtime secara bersamaan, yang ditangani oleh Pusher. Dengan fitur ini,
pengguna dapat melihat pembaruan data secara langsung dan simultan,
menciptakan pengalaman yang lebih responsif dan efisien dalam manajemen
informasi. Pusher memastikan distribusi instan dari perubahan data,
memungkinkan kolaborasi yang lebih efektif dan pemantauan yang akurat dalam
waktu nyata.
</p>
<p>
b. Penghitungan Profit Otomatis: SIPDI dapat menghitung profit dari
investasi selama 12 bulan secara otomatis, membantu organisasi amal untuk
memantau kinerja investasi mereka dengan lebih efisien.
</p>
<p>
c. Menghasilkan transaksi otomatis: Setiap kali terjadi profit baru, baik
dari basecamp atau anggota, sistem akan dengan otomatis menciptakan data
transaksi baru sesuai dengan pembayaran keuntungan yang dilakukan secara
otomatis.
</p>
<h2>Teknologi:</h2>
<p>
Sistem ini dibangun dengan menggunakan berbagai teknologi dan bahasa
pemrograman, termasuk:
</p>
<ul>
<li>HTML</li>
<li>Bootstrap 4.3.1</li>
<li>Pusher 4.1.1</li>
<li>PHP 7.4.33</li>
<li>CSS</li>
<li>Font Awesome 4.7.0</li>
<li>JavaScript</li>
<li>jQuery 2.2.0</li>
<li>jQuery UI 1.12.1</li>
<li>Jquery Migrate 3.4.0</li>
<li>SweetAlert2 11</li>
<li>Select2</li>
<li>Highcharts 11.2.0</li>
<li>Google Font API</li>
<li>Propper</li>
</ul>
<p>
Dengan fitur-fitur canggih dan berbagai komponen teknologi yang digunakan,
SIPDI merupakan alat yang kuat dalam pengelolaan dana amal dan pelaporan
yang kompleks. Sistem ini memungkinkan organisasi amal untuk mengoptimalkan
penggunaan sumber daya mereka dan memastikan transparansi dalam pengelolaan
dana yang diperoleh dari berbagai sumber.
</p>
Note : Aplikasi ini hanya akan beroperasi secara normal saat terhubung ke
internet dan tidak dapat digunakan dalam mode offline.
<br />
<div class="container-wisata">
<div class="boxwisata">
<img alt="Curug Cipalasari" src="IMG/pumpingcharity/man.pumpingc4.webp" />
<span>SPT</span>
</div>
<div class="boxwisata">
<img alt="Curug Cipalasari" src="IMG/pumpingcharity/man.pumpingc5.webp" />
<span>SPT Owner</span>
</div>
<div class="boxwisata">
<img alt="Curug Cipalasari" src="IMG/pumpingcharity/man.pumpingc6.webp" />
<span>Laporan</span>
</div>
</div>
<br />
</body>