mirror of
https://codeberg.org/pluja/kycnot.me
synced 2024-10-01 05:05:59 +00:00
🎨 style(request_service.html): Improve form layout and styling for better user experience
🔧 chore(request_service.html): Add JavaScript functionality to toggle category select based on type select 🐛 fix(request_service.html): Fix typo in label for "Tor Onion URL(s)" ✨ feat(request_service.html): Add attributes section with checkboxes for user selection
This commit is contained in:
pluja
parent
17d2a45633
commit
9d6bdb1341
@ -1,53 +1,72 @@
|
||||
<section class="flex flex-col items-center w-full py-8">
|
||||
<h2 class="py-3 text-2xl font-bold">Request a service</h2>
|
||||
<h2 class="text-2xl font-bold">Request a service</h2>
|
||||
<small class="opacity-70">*This form requires JavaScript, <a class="text-lime-600" href="/about#request">read more here</a>.</small>
|
||||
|
||||
<form action="/request/service" method="POST" class="max-w-lg space-y-4 font-mono">
|
||||
<form action="/request/service" method="POST" class="max-w-lg my-6 space-y-4 font-mono">
|
||||
<div class="flex flex-col">
|
||||
<select name="type" id="type" required class="p-2 text-white border rounded-lg bg-opacity-30 bg-zinc-900 border-white/30">
|
||||
<option value="def" selected disabled>Select an option</option>
|
||||
<option value="exchange">exchange</option>
|
||||
<label class="font-bold" for="type">Service Type</label>
|
||||
<select name="type" id="type" required class="p-2 text-white uppercase border rounded-lg bg-opacity-30 bg-zinc-900 border-white/30">
|
||||
<option selected value="exchange">exchange</option>
|
||||
<option value="service">service</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div id="category-container" class="flex flex-col">
|
||||
<label class="font-bold" for="category">Service Category</label>
|
||||
<select name="category" id="category" required class="p-2 text-white capitalize border rounded-lg bg-opacity-30 bg-zinc-900 border-white/30">
|
||||
<option value="aggregator">aggregator</option>
|
||||
<option value="atm">physical atm</option>
|
||||
<option value="cloud">cloud storage</option>
|
||||
<option value="email">email</option>
|
||||
<option value="goods">goods</option>
|
||||
<option value="hosting">hosting / domains</option>
|
||||
<option value="market">market</option>
|
||||
<option value="proxy store">proxy store</option>
|
||||
<option value="sms">sms / phone number</option>
|
||||
<option value="tools">tools</option>
|
||||
<option value="vpn">vpn</option>
|
||||
<option value="vps">server hosting (vps)</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col">
|
||||
<label for="name">Service Name</label>
|
||||
<input class="p-2 text-white border rounded-lg bg-opacity-30 bg-zinc-900 border-white/30" type="text" name="name" id="name" required>
|
||||
<label class="font-bold" for="name">Service Name</label>
|
||||
<input class="p-2 text-white border rounded-lg placeholder-white/30 bg-opacity-30 bg-zinc-900 border-white/30" placeholder="Awesome exchange" type="text" name="name" id="name" required>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col">
|
||||
<label for="description">Description</label>
|
||||
<textarea class="p-2 font-mono text-white border rounded-lg bg-opacity-30 bg-zinc-900 border-white/30" name="description" id="description" cols="30" rows="5" required maxlength="500"></textarea>
|
||||
<label class="font-bold" for="description">Description</label>
|
||||
<textarea class="p-2 font-mono text-white border rounded-lg placeholder-white/30 bg-opacity-30 bg-zinc-900 border-white/30" name="description" id="description" placeholder="concise description about what the service is. max 500 characters." cols="30" rows="5" required maxlength="500"></textarea>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="flex flex-col">
|
||||
<label for="urls">Service URL(s)</label>
|
||||
<label class="font-bold" for="urls">Service URL(s)</label>
|
||||
<small class="text-white/30">*If more than one, separate with commas.</small>
|
||||
<input class="p-2 text-white border rounded-lg bg-opacity-30 bg-zinc-900 border-white/30" type="text" name="urls" id="urls" required placeholder="Awesome Exchange">
|
||||
<input class="p-2 text-white border rounded-lg placeholder-white/30 bg-opacity-30 bg-zinc-900 border-white/30" type="text" name="urls" id="urls" required placeholder="https://example.com">
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col">
|
||||
<label for="logo_url">Logo URL</label>
|
||||
<input class="p-2 text-white border rounded-lg bg-opacity-30 bg-zinc-900 border-white/30" type="text" name="logo_url" id="logo_url" placeholder="https://i.imgur.com/wwwHfCN.jpeg" required>
|
||||
<label class="font-bold" for="logo_url">Logo URL</label>
|
||||
<input class="p-2 text-white border rounded-lg placeholder-white/30 bg-opacity-30 bg-zinc-900 border-white/30" type="text" name="logo_url" id="logo_url" placeholder="https://i.imgur.com/wwwHfCN.jpeg" required>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col">
|
||||
<label for="tos_urls">ToS URL(s)</label>
|
||||
<label class="font-bold" for="tos_urls">ToS URL(s)</label>
|
||||
<small class="text-white/30">*If more than one, separate with commas.</small>
|
||||
<input class="p-2 text-white border rounded-lg bg-opacity-30 bg-zinc-900 border-white/30" type="text" name="tos_urls" id="tos_urls" required placeholder="https://example.com/terms">
|
||||
<input class="p-2 text-white border rounded-lg placeholder-white/30 bg-opacity-30 bg-zinc-900 border-white/30" type="text" name="tos_urls" id="tos_urls" required placeholder="https://example.com/terms">
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col">
|
||||
<label for="tor_urls">Tor Onion URL(s)</label>
|
||||
<label class="font-bold" for="onion_urls">Tor Onion URL(s)</label>
|
||||
<small class="text-white/30">*If more than one, separate with commas.</small>
|
||||
<input class="p-2 text-white border rounded-lg bg-opacity-30 bg-zinc-900 border-white/30" type="text" name="tor_urls" id="tor_urls" placeholder="http://zbiowkw...onion">
|
||||
<input class="p-2 text-white border rounded-lg placeholder-white/30 bg-opacity-30 bg-zinc-900 border-white/30" type="text" name="onion_urls" id="onion_urls" placeholder="http://zbiowkw...onion">
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col">
|
||||
<label for="tags">Keywords</label>
|
||||
<label class="font-bold" for="tags">Keywords</label>
|
||||
<small class="text-white/30">*If more than one, separate with commas.</small>
|
||||
<input class="p-2 text-white border rounded-lg bg-opacity-30 bg-zinc-900 border-white/30" type="text" name="tags" id="tags" required placeholder="private,p2p, fast">
|
||||
<input class="p-2 text-white border rounded-lg placeholder-white/30 bg-opacity-30 bg-zinc-900 border-white/30" type="text" name="tags" id="tags" required placeholder="private,p2p, fast">
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col items-center justify-center pt-4 space-x-2">
|
||||
@ -107,7 +126,7 @@
|
||||
</div>
|
||||
|
||||
<div class="space-y-4">
|
||||
<h3>KYC Level</h3>
|
||||
<h3 class="font-bold">KYC Level</h3>
|
||||
|
||||
<label class="flex flex-row items-center p-2 border rounded-lg border-white/10" for="kyclevel0">
|
||||
<input type="radio" name="kyc_level" id="kyclevel0" value="0">
|
||||
@ -126,6 +145,22 @@
|
||||
<p class="ml-3"><b class="text-lime-400">Level 3</b>: KYC is mandatory to use certain features of the platform. Non-KYC users can be asked to verify their identity at any time, for any reason and may have their service restricted or revoked.</p>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<h3 class="font-bold">Attributes</h3>
|
||||
<small class="text-white/50">* Scrollable. You must check at least 3</small>
|
||||
<div class="max-w-lg p-4 mx-4 mb-4 space-y-2 overflow-scroll border rounded-lg h-52 border-white/10">
|
||||
{{range .Attributes}}
|
||||
<span class="block p-1 border-b border-white/10">
|
||||
<input type="checkbox" id="{{.ID}}" name="attributes" value="{{.ID}}">
|
||||
<label class="ml-1
|
||||
{{if eq .Rating 0}}text-blue-400/80{{end}}
|
||||
{{if eq .Rating 1}}text-green-400/80{{end}}
|
||||
{{if eq .Rating 2}}text-yellow-400/80{{end}}
|
||||
{{if eq .Rating 3}}text-red-400/80{{end}}
|
||||
" for="{{.ID}}">{{.Title}}</label>
|
||||
</span>
|
||||
{{end}}
|
||||
</div>
|
||||
<noscript>
|
||||
<p class="my-2 font-bold text-yellow-500 uppercase">
|
||||
You need to enable JavaScript to complete this form.
|
||||
@ -143,7 +178,27 @@
|
||||
</form>
|
||||
</section>
|
||||
|
||||
|
||||
<script src="/static/js/pow.js"></script>
|
||||
<script>
|
||||
// Initialize PoW service
|
||||
startPow();
|
||||
|
||||
// Toggle category select based on type select
|
||||
document.addEventListener('DOMContentLoaded', (event) => {
|
||||
const typeSelect = document.getElementById('type');
|
||||
const categoryDiv = document.getElementById('category-container');
|
||||
|
||||
function toggleCategory() {
|
||||
if (typeSelect.value === 'service') {
|
||||
categoryDiv.style.display = 'flex'; // Show
|
||||
} else {
|
||||
categoryDiv.style.display = 'none'; // Hide
|
||||
}
|
||||
}
|
||||
// Initial toggle based on the preselected option
|
||||
toggleCategory();
|
||||
// Add change event listener to the type select element
|
||||
typeSelect.addEventListener('change', toggleCategory);
|
||||
});
|
||||
</script>
|
||||
Loading…
Reference in New Issue
Block a user