kycnot.me/src/web/templates/service.html

<section class="pt-14">
    <div class="flex items-center justify-center space-x-4">
        <img class="w-16 h-16 rounded-full" src="{{.Service.LogoURL}}" alt="">
        <h1 class="text-2xl font-bold capitalize-first">{{.Service.Name}}</h1>
    </div>
    <!-- Links -->
    <div class="flex items-center justify-center py-4 mt-2 text-sm md:text-md">
        <div class="flex items-center justify-center">
            <a href="{{index .Service.Urls 0}}" target="_blank" class="flex items-center justify-center px-2 py-1 m-1 space-x-2 text-center text-white transition duration-300 border rounded bg-zinc-900 border-zinc-700 hover:border-lime-600 hover:text-lime-600">
                <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 tabler-world-www" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
                    <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                    <path d="M19.5 7a9 9 0 0 0 -7.5 -4a8.991 8.991 0 0 0 -7.484 4"></path>
                    <path d="M11.5 3a16.989 16.989 0 0 0 -1.826 4"></path>
                    <path d="M12.5 3a16.989 16.989 0 0 1 1.828 4"></path>
                    <path d="M19.5 17a9 9 0 0 1 -7.5 4a8.991 8.991 0 0 1 -7.484 -4"></path>
                    <path d="M11.5 21a16.989 16.989 0 0 1 -1.826 -4"></path>
                    <path d="M12.5 21a16.989 16.989 0 0 0 1.828 -4"></path>
                    <path d="M2 10l1 4l1.5 -4l1.5 4l1 -4"></path>
                    <path d="M17 10l1 4l1.5 -4l1.5 4l1 -4"></path>
                    <path d="M9.5 10l1 4l1.5 -4l1.5 4l1 -4"></path>
                 </svg>
                <span>Website</span>
            </a>
            {{if ne (len .Service.TosUrls) 0}}
            <a href="{{index .Service.TosUrls 0}}" target="_blank" class="flex items-center justify-center px-2 py-1 m-1 space-x-2 text-center text-white transition duration-300 border rounded bg-zinc-900 border-zinc-700 hover:border-lime-600 hover:text-lime-600">
                <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 tabler-report-search" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
                    <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                    <path d="M8 5h-2a2 2 0 0 0 -2 2v12a2 2 0 0 0 2 2h5.697"></path>
                    <path d="M18 12v-5a2 2 0 0 0 -2 -2h-2"></path>
                    <path d="M8 3m0 2a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v0a2 2 0 0 1 -2 2h-2a2 2 0 0 1 -2 -2z"></path>
                    <path d="M8 11h4"></path>
                    <path d="M8 15h3"></path>
                    <path d="M16.5 17.5m-2.5 0a2.5 2.5 0 1 0 5 0a2.5 2.5 0 1 0 -5 0"></path>
                    <path d="M18.5 19.5l2.5 2.5"></path>
                </svg>
                <span>ToS</span>
            </a>
            {{end}}
            {{if ne .Service.Referral ""}}
            <a href="#" target="_blank" class="flex items-center justify-center px-2 py-1 m-1 space-x-2 text-center text-white transition duration-300 border rounded bg-zinc-900 border-zinc-700 hover:border-lime-600 hover:text-lime-600">
                <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 tabler-users" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
                    <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                    <path d="M9 7m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path>
                    <path d="M3 21v-2a4 4 0 0 1 4 -4h4a4 4 0 0 1 4 4v2"></path>
                    <path d="M16 3.13a4 4 0 0 1 0 7.75"></path>
                    <path d="M21 21v-2a4 4 0 0 0 -3 -3.85"></path>
                </svg>
                <span>Referral</span>
            </a>
            {{end}}
            {{if ne (len .Service.OnionUrls) 0}}
            <a href="#" target="_blank" class="flex items-center justify-center px-2 py-1 m-1 space-x-2 text-center text-purple-600 transition duration-300 border border-purple-900 rounded bg-zinc-900 hover:border-lime-600 hover:text-lime-600">
                <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 tabler-target" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
                    <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                    <path d="M12 12m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path>
                    <path d="M12 12m-5 0a5 5 0 1 0 10 0a5 5 0 1 0 -10 0"></path>
                    <path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path>
                </svg>
                <span>Tor</span>
            </a>
            {{end}}
            <a href="#discuss" class="flex items-center justify-center px-2 py-1 m-1 space-x-2 text-center transition duration-300 border rounded text-sky-400 border-sky-700 bg-zinc-900 hover:border-lime-600 hover:text-lime-600">
                <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 messages" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
                    <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                    <path d="M21 14l-3 -3h-7a1 1 0 0 1 -1 -1v-6a1 1 0 0 1 1 -1h9a1 1 0 0 1 1 1v10"></path>
                    <path d="M14 15v2a1 1 0 0 1 -1 1h-7l-3 3v-10a1 1 0 0 1 1 -1h2"></path>
                 </svg>
            </a>
        </div>
    </div>
    
    <!-- Icons -->
    <div class="flex items-center justify-center text-xs">
        {{template "components/service_icons" .Service}}
    </div>
    
    <!-- Description -->
    <div class="flex items-center justify-center p-4">
        <p class="max-w-lg p-4 text-sm border rounded-lg md:text-base border-white/20 bg-gray-400/10">
            {{if ne .Service.Description ""}}
                {{.Service.Description}}
            {{else}}
                This {{.Service.Type}} does not have a description.
            {{end}}
        </p>
    </div>
</section>

<!-- KYC Level -->
<section class="flex items-center justify-center px-4">
    {{template "components/kyc_level" .Service.KycLevel}}
</section>

<!-- Attributes -->
<section class="flex flex-col items-center justify-center p-4">
    <div class="grid grid-cols-1 gap-2 md:grid-cols-2">
        {{range .Attributes}}
            {{template "components/attribute_line" .}}
        {{end}}
    </div>
</section>

<!-- Notes -->
<section class="flex flex-col items-center justify-center px-8 mt-4 mb-8">
    <h2 class="mb-0.5 text-xl font-bold text-center capitalize">Additional info</h2>
    <div class="max-w-lg space-y-1.5">
        <p class="block font-bold py-1.5 px-3 text-center text-sm border rounded-lg transition duration-300 border-white/30 bg-white/10 hover:bg-white/20 hover:border-white">
            * Lorem ipsum dolor sit amet.
        </p>
    </div>
</section>

<!-- ToS Checker -->
<section class="flex flex-col items-center justify-center p-8 pb-4 border-t-2 border-opacity-50 border-dashed border-t-lime-400/10" id="tos">
    
    <a href="/about#tos-checker" class="text-xl font-bold">
        Automated ToS Checker
        <svg xmlns="http://www.w3.org/2000/svg" class="inline-block w-4 h-4 question-mark" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
            <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
            <path d="M8 8a3.5 3 0 0 1 3.5 -3h1a3.5 3 0 0 1 3.5 3a3 3 0 0 1 -2 3a3 4 0 0 0 -2 4"></path>
            <path d="M12 19l0 .01"></path>
        </svg>
    </a>
    <p class="max-w-sm text-xs text-center text-gray-300 text-opacity-75">Automated, ai-driven weekly ToS checks.</p>
    <p class="max-w-sm mt-1 text-xs text-center text-gray-400 text-opacity-75">Last Check: 2023-10-18</p>

    {{range .Service.TosHighlights}}
        <div class="max-w-lg">
            {{template "components/tos_check" .}}
        </div>
    {{end}}
</section>

<!-- Comments -->
<section class="flex flex-col items-center justify-center px-8 pt-4 pb-8" id="discuss">
        <a href="https://usenostr.org" class="text-xl font-bold">
            Nostr Comments
            <svg xmlns="http://www.w3.org/2000/svg" class="inline-block w-4 h-4 question-mark" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
                <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                <path d="M8 8a3.5 3 0 0 1 3.5 -3h1a3.5 3 0 0 1 3.5 3a3 3 0 0 1 -2 3a3 4 0 0 0 -2 4"></path>
                <path d="M12 19l0 .01"></path>
            </svg>
        </a>
        <h2 class="text-xl font-bold"></h2>
        <p class="max-w-sm pb-4 mt-1 text-xs text-center text-gray-300 text-opacity-75">
            Beware of fake reviews and accounts. Verify user profiles and conduct your own research.
        </p>
        <!-- div with the ID disgus where you would like to display the comments & form -->
        <div id="disgus" class="max-w-xl">
            <noscript>
                <p class="font-bold text-center text-yellow-300">
                    You must have JavaScript enabled to see and use comments. It just will load a 200kb script to interact with Nostr. The source code is available <a target="_blank" class="underline" href="https://github.com/carlitoplatanito/disgus">here</a>.
                </p>
            </noscript>
        </div>
</section>

<!-- this can go at the end of the body -->
<script type="module" src="/static/disgus/index.js" async></script>