wrappd.sh/internal/web/templates/result.html
2024-12-05 19:25:58 +01:00

95 lines
4.5 KiB
HTML

{{ template "header.html" . }}
<h1 class="text-xl text-center text-blue-400 cursor-pointer
hover:text-blue-600 mb-8 hidden">
<a href="{{.baseURL}}/results/{{.uniqueID}}" id="share-url">{{.baseURL}}/results/{{.uniqueID}}</a>
</h1>
<div class="relative">
<!-- Contenedor del botón -->
<div class="clipboard flex justify-between gap-2 p-2 border border-gray-600 rounded-lg
shadow cursor-pointer transition-colors duration-200 hover:bg-gray-100
mb-8"
data-clipboard-text="{{.baseURL}}/results/{{.uniqueID}}">
<span class="text-blue-600 font-medium">{{.baseURL}}/results/{{.uniqueID}}</span>
<svg class="clipboard-icon w-6 h-6 ml-auto text-gray-600 transition-colors duration-200" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
<path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4.184a3 3 0 0 1 5.632 0H19a2 2 0 0 1-2 2v14a2 2 0 0 1-2 2zM9 4H5v15h14V4h-4v1a1 1 0 1 1-2 0V4H9z"/>
</svg>
</div>
<!-- Mensaje de retroalimentación -->
<p id="feedback" class="absolute top-12 left-1/2 -translate-x-1/2
text-green-600 text-sm bg-white font-medium hidden p-4">
Copied to clipboard!
</p>
</div>
<script src="/static/custom.js"></script>
<h2 class="text-4xl sm:text-3xl font-semibold text-center text-gray-100 mb-6">
Command Statistics
</h2>
<div class="chart-container">
<h2 class="text-2xl font-bold text-gray-200 mb-4">Top Commands Chart</h2>
<div class="chart">
{{.chartHTML | safeHTML}}
</div>
</div>
<div class="container" style="align-items: flex-start; justify-content:
flex-start">
<section class="mb-8 flex-1">
<h2 class="text-2xl font-bold text-gray-200 mb-4">Top Commands</h2>
<ul class="list-disc pl-6 space-y-2">
{{range .topCommands}}
<li class="text-lg text-gray-400">{{.Command}} - <span class="font-semibold text-blue-400">{{.Count}} times</span></li>
{{end}}
</ul>
</section>
<section class="mb-8 flex-1">
<h2 class="text-2xl font-bold text-gray-200 mb-4">Tools</h2>
<ul class="list-disc pl-6 space-y-2">
{{range .categoryStats}}
<li class="text-lg text-gray-400">{{.Command}} - <span class="font-semibold text-blue-400">{{.Count}} times</span></li>
{{end}}
</ul>
</section>
<section class="mb-8 flex-1">
<h3 class="text-xl font-semibold">Common Patterns</h3>
<ul>
{{range .commonPatternStats}}
<li class="text-lg text-gray-400">{{.Command}} - <span class="font-semibold text-blue-400">{{.Count}} times</span></li>
{{end}}
</ul>
<h3 class="text-xl font-semibold mt-8">Pipe Counts</h3>
<ul>
<li class="text-lg text-gray-400"><span
class="font-semibold
text-blue-400">{{.pipeRedirectionCounts.pipe}} times</span></li>
</ul>
</section>
</div>
<div class="mt-8 flex justify-center space-x-4">
<a
href="https://twitter.com/intent/tweet?text=Wrappd.sh:%20check%20out%20my%20command%20stats!&url={{.baseURL}}/results/{{.uniqueID}}"
target="_blank"
class="bg-blue-600 hover:bg-blue-700 text-white py-2 px-4 rounded-lg transition duration-200">Share on Twitter</a>
<a
href="https://{{.mastodon}}/share?text=Wrappd.sh:%20check%20out%20my%20command%20stats!%20{{.baseURL}}/results/{{.uniqueID}}"
target="_blank"
class="bg-blue-600 hover:bg-blue-700 text-white py-2 px-4 rounded-lg transition duration-200">Share on Mastodon</a>
<a
href="https://bsky.app/share?text=Wrappd.sh:%20check%20out%20my%20command%20stats!%20{{.baseURL}}/results/{{.uniqueID}}"
target="_blank"
class="bg-blue-600 hover:bg-blue-700 text-white py-2 px-4 rounded-lg transition duration-200">Share on Bluesky</a>
<a
href="https://www.linkedin.com/sharing/share-offsite/?url={{.baseURL}}/results/{{.uniqueID}}" target="_blank" class="bg-blue-600 hover:bg-blue-700 text-white py-2 px-4 rounded-lg transition duration-200">Share on LinkedIn</a>
</div>
{{ template "footer.html" . }}