Skip to content

Instantly share code, notes, and snippets.

@abdasis

abdasis/beranda.blade.php

Created May 6, 2023 15:07
Show Gist options
  • Save abdasis/e366133d507b0b99b7dec8afc26fc10b to your computer and use it in GitHub Desktop.
Save abdasis/e366133d507b0b99b7dec8afc26fc10b to your computer and use it in GitHub Desktop.
Download ZIP
Halaman Desain Tiktok Downloader
Raw
beranda.blade.php
<div>
<div class="container-fluid bg-gradient">
<div class="row justify-content-center align-items-center banner-beranda">
<div class="col-md-6">
<div class="banner-box py-5">
<h1 class="text-center">Tiktok Downloader Paling Cepat</h1>
<p class="text-center">Tanpa watermark, kualitas HD, dan Tanpa Iklan.</p>
<div class="form-group text-center">
<div class="input-group rounded border">
<input id="video-link-input" wire:model="url" type="text" class="form-control border-0"
placeholder="Masukan URL Video">
<button id="btn-paste" class="btn btn-link border-0 bg-white" type="button">
<svg xmlns="http://www.w3.org/2000/svg"
class="icon icon-tabler icon-tabler-clipboard me-0" width="40" height="40"
viewBox="0 0 24 24" stroke-width="1" stroke="currentColor" fill="none"
stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path
d="M9 5h-2a2 2 0 0 0 -2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-12a2 2 0 0 0 -2 -2h-2">
</path>
<path
d="M9 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>
</svg>
</button>
</div>
<small class="text-muted">
Dengan menggunakan layanan kami, Anda setuju dengan <a
href="{{ route('ketentuan-layanan') }}">ketentuan layanan</a> kami.
</small>
</div>
<div class="text-center">
<button class="btn btn-primary my-3" wire:click="download">
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-download"
width="40" height="40" viewBox="0 0 24 24" stroke-width="1" stroke="currentColor"
fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2 -2v-2"></path>
<path d="M7 11l5 5l5 -5"></path>
<path d="M12 4l0 12"></path>
</svg>
Download
</button>
</div>
</div>
<ul class="steps steps-primary steps-counter mb-5 mt-3">
<li class="step-item">Salin URL Video</li>
<li class="step-item">Pastekan pada Form diatas</li>
<li class="step-item active">Klik <strong>Tombol Download</strong></li>
</ul>
<div wire:loading wire:target="download">
<x-loader />
</div>
@if (!empty($data))
<div class="card border-light d-flex flex-column mb-3 rounded">
<div class="row row-0 flex-fill align-items-stretch">
<div class="col-md-3">
<a href="#">
<img src="{{ $data['cover'] }}" style="max-height: 220px !important;"
class="w-100 rounded object-cover" alt="{{ $data['cover'] }}">
</a>
</div>
<div class="col-md-9">
<div class="card-body">
<h3 class="card-title"><a href="#">Deskripsi</a></h3>
<div class="box-content">
<div class="text-muted">{{ $data['deskripsi'] }}</div>
</div>
<div class="d-flex align-items-center mt-auto pt-4">
<span class="avatar"
style="background-image: url({{ $data['avatar'] }})"></span>
<div class="ms-3">
<a href="#" class="text-body">{{ $data['author'] }}</a>
<div class="text-muted">{{ now()->format('d M Y') }}</div>
</div>
<div class="ms-auto">
<a href="#" class="icon d-none d-md-inline-block text-red ms-3">
<svg xmlns="http://www.w3.org/2000/svg" class="icon" 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
d="M19.5 12.572l-7.5 7.428l-7.5 -7.428a5 5 0 1 1 7.5 -6.566a5 5 0 1 1 7.5 6.572" />
</svg>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="d-flex align-items-center justify-content-center mb-5 gap-3 text-center">
<button wire:click.prevent="downloadFile" class="btn btn-primary mb-3">
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-cloud-download"
width="40" height="40" viewBox="0 0 24 24" stroke-width="1"
stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M19 18a3.5 3.5 0 0 0 0 -7h-1a5 4.5 0 0 0 -11 -2a4.6 4.4 0 0 0 -2.1 8.4">
</path>
<path d="M12 13l0 9"></path>
<path d="M9 19l3 3l3 -3"></path>
</svg>
Spesial Download
</button>
<button wire:click.prevent="downloadWatermark" class="btn btn-azure mb-3">
<svg xmlns="http://www.w3.org/2000/svg"
class="icon icon-tabler icon-tabler-cloud-download" width="40" height="40"
viewBox="0 0 24 24" stroke-width="1" stroke="currentColor" fill="none"
stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M19 18a3.5 3.5 0 0 0 0 -7h-1a5 4.5 0 0 0 -11 -2a4.6 4.4 0 0 0 -2.1 8.4">
</path>
<path d="M12 13l0 9"></path>
<path d="M9 19l3 3l3 -3"></path>
</svg>
Normal Download
</button>
</div>
@endif
</div>
</div>
</div>
<div class="container py-4">
<div class="row justify-content-between">
<div class="col-md-5">
<div class="tentang-kami">
<div class="container">
<div class="box-content pe-3 text-justify">
<h1 class="mb-3">Tentang</h1>
<p>
Selamat datang di Thinksave, platform terdepan untuk mengunduh video Tiktok. Kami dengan
bangga mempersembahkan Tiktok downloader terbaru kami yang dapat mengunduh video Tiktok
tanpa watermark.
</p>
<p>
Dengan Thinksave Tiktok downloader, Anda dapat mengunduh video Tiktok favorit Anda
dengan mudah dan cepat. Tidak perlu lagi repot-repot mencari cara untuk menghapus
watermark dari video yang diunduh. Dengan fitur unggulan kami, Anda dapat mengunduh
video Tiktok berkualitas tinggi tanpa watermark dalam hitungan detik.
</p>
<p>
Dengan fitur simpel dan mudah digunakan, Anda dapat mengunduh video Tiktok dengan hanya
beberapa klik saja. Nikmati pengalaman mengunduh video Tiktok tanpa ribet dengan
Thinksave Tiktok downloader.
</p>
<p>
Keunggulan lainnya dari Thinksave Tiktok downloader adalah kompatibilitas dengan
berbagai macam perangkat. Anda dapat mengunduh video Tiktok favorit Anda di komputer,
laptop, atau bahkan di ponsel pintar Anda.
</p>
</div>
</div>
</div>
</div>
<div class="col-md-7">
<h1 class="mb-3">Fitur Terbaik</h1>
<div class="row gy-4">
<div class="col-md-6">
<div class="card border-light shadow-sm">
<div class="card-stamp">
<div class="card-stamp-icon bg-primary">
<svg xmlns="http://www.w3.org/2000/svg"
class="icon icon-tabler icon-tabler-free-rights" width="40"
height="40" viewBox="0 0 24 24" stroke-width="1" stroke="currentColor"
fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path>
<path
d="M13.867 9.75c-.246 -.48 -.708 -.769 -1.2 -.75h-1.334c-.736 0 -1.333 .67 -1.333 1.5c0 .827 .597 1.499 1.333 1.499h1.334c.736 0 1.333 .671 1.333 1.5c0 .828 -.597 1.499 -1.333 1.499h-1.334c-.492 .019 -.954 -.27 -1.2 -.75">
</path>
<path d="M12 7v2"></path>
<path d="M12 15v2"></path>
<path d="M6 6l1.5 1.5"></path>
<path d="M16.5 16.5l1.5 1.5"></path>
</svg>
</div>
</div>
<div class="card-body">
<h3 class="card-title">Unduhan Gratis!</h3>
<p class="text-muted">Kamus bebas download video sepuasnya tanpa harus dikenakan biaya
</p>
</div>
</div>
</div>
<div class="col-md-6">
<div class="card border-light shadow-sm">
<div class="card-stamp">
<div class="card-stamp-icon bg-primary">
<svg xmlns="http://www.w3.org/2000/svg"
class="icon icon-tabler icon-tabler-rocket" width="40" height="40"
viewBox="0 0 24 24" stroke-width="1" stroke="currentColor" fill="none"
stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path
d="M4 13a8 8 0 0 1 7 7a6 6 0 0 0 3 -5a9 9 0 0 0 6 -8a3 3 0 0 0 -3 -3a9 9 0 0 0 -8 6a6 6 0 0 0 -5 3">
</path>
<path d="M7 14a6 6 0 0 0 -3 6a6 6 0 0 0 6 -3"></path>
<path d="M15 9m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path>
</svg>
</div>
</div>
<div class="card-body">
<h3 class="card-title">Cepat</h3>
<p class="text-muted">Kecepatan tanpa batas membuat proses download sangat cepat</p>
</div>
</div>
</div>
<div class="col-md-6">
<div class="card border-light shadow-sm">
<div class="card-stamp">
<div class="card-stamp-icon bg-primary">
<svg xmlns="http://www.w3.org/2000/svg"
class="icon icon-tabler icon-tabler-badge-hd" width="40" height="40"
viewBox="0 0 24 24" stroke-width="1" stroke="currentColor" fill="none"
stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path
d="M3 5m0 2a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v10a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2z">
</path>
<path d="M14 9v6h1a2 2 0 0 0 2 -2v-2a2 2 0 0 0 -2 -2h-1z"></path>
<path d="M7 15v-6"></path>
<path d="M10 15v-6"></path>
<path d="M7 12h3"></path>
</svg>
</div>
</div>
<div class="card-body">
<h3 class="card-title">Video HD</h3>
<p class="text-muted">Kecepatan tanpa batas membuat proses download sangat cepat</p>
</div>
</div>
</div>
<div class="col-md-6">
<div class="card border-light shadow-sm">
<div class="card-stamp">
<div class="card-stamp-icon bg-primary">
<svg xmlns="http://www.w3.org/2000/svg"
class="icon icon-tabler icon-tabler-devices-heart" width="40"
height="40" viewBox="0 0 24 24" stroke-width="1" stroke="currentColor"
fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M13 12v-3a1 1 0 0 1 1 -1h6a1 1 0 0 1 1 1v2"></path>
<path d="M18 8v-3a1 1 0 0 0 -1 -1h-13a1 1 0 0 0 -1 1v12a1 1 0 0 0 1 1h6">
</path>
<path
d="M18 22l3.35 -3.284a2.143 2.143 0 0 0 .005 -3.071a2.242 2.242 0 0 0 -3.129 -.006l-.224 .22l-.223 -.22a2.242 2.242 0 0 0 -3.128 -.006a2.143 2.143 0 0 0 -.006 3.071l3.355 3.296z">
</path>
<path d="M16 9h2"></path>
</svg>
</div>
</div>
<div class="card-body">
<h3 class="card-title">Dukungan Device</h3>
<p class="text-muted">Dukungan terhadap semua device tanpa harus install terlebih
dahulu</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="container py-4">
<div class="row justify-content-center">
<div class="col-md-6">
<div class="faq-container">
<h2>FAQ</h2>
<div class="faq-box">
<div id="faq-1" class="accordion" role="tablist" aria-multiselectable="true">
<div class="accordion-item border-light mb-3 rounded shadow-sm">
<div class="accordion-header" role="tab">
<button class="accordion-button collapsed" data-bs-toggle="collapse"
data-bs-target="#faq-1-1" aria-expanded="false">Apakah situs ini aman dari
Virus!</button>
</div>
<div id="faq-1-1" class="accordion-collapse collapse" role="tabpanel"
data-bs-parent="#faq-1" style="">
<div class="accordion-body pt-0">
<div>
<p>Tentu, situs ini sangat aman, anda tidak perlu khawatir akan ada virus
yang ikut terdownload ke device anda</p>
</div>
</div>
</div>
</div>
<div class="accordion-item border-light mb-3 rounded shadow-sm">
<div class="accordion-header" role="tab">
<button class="accordion-button collapsed" data-bs-toggle="collapse"
data-bs-target="#faq-1-2" aria-expanded="false">Sampai Kapan Situs ini akan
gratis?</button>
</div>
<div id="faq-1-2" class="accordion-collapse collapse" role="tabpanel"
data-bs-parent="#faq-1" style="">
<div class="accordion-body pt-0">
<div>
<p>Situs ini akan gratis selamanya, anda tidak perlu khawatir dan anda tidak
perlu mengeluarkan uang hanya untuk download video saja</p>
</div>
</div>
</div>
</div>
<div class="accordion-item border-light mb-3 rounded shadow-sm">
<div class="accordion-header" role="tab">
<button class="accordion-button collapsed" data-bs-toggle="collapse"
data-bs-target="#faq-1-3" aria-expanded="false">Apakah saya butuh install
aplikasi lain?</button>
</div>
<div id="faq-1-3" class="accordion-collapse collapse" role="tabpanel"
data-bs-parent="#faq-1" style="">
<div class="accordion-body pt-0">
<div>
<p>
Tidak. Untuk TikTok video download secara online, kamu hanya perlu
tautan. Tempelkan ke kolom input dan pilih format yang sesuai untuk
konversi.
</p>
</div>
</div>
</div>
</div>
<div class="accordion-item border-light mb-3 rounded shadow-sm">
<div class="accordion-header" role="tab">
<button class="accordion-button collapsed" data-bs-toggle="collapse"
data-bs-target="#faq-1-4" aria-expanded="false">
Di mana video TikTok disimpan setelah diunduh?</button>
</div>
<div id="faq-1-4" class="accordion-collapse collapse" role="tabpanel"
data-bs-parent="#faq-1" style="">
<div class="accordion-body pt-0">
<div>
<p>
Video yang diunduh biasanya disimpan ke folder apa pun yang telah Anda
tetapkan sebagai default, biasanya adalah galeri Anda. Setelah
menggunakan Pengunduh TikTok kami, Anda dapat pergi ke Galeri untuk
melihat video Anda.
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
@push('js')
<script>
// Ambil elemen input
var videoLinkInput = document.getElementById('video-link-input');
// Buat tombol "Paste"
var pasteButton = document.getElementById('btn-paste');
// Tambahkan event listener pada tombol "Paste"
pasteButton.addEventListener('click', function() {
navigator.clipboard.readText().then(function(pastedText) {
videoLinkInput.value = pastedText;
});
});
// Sisipkan tombol "Paste" ke dalam elemen input
videoLinkInput.parentNode.insertBefore(pasteButton, videoLinkInput.nextSibling);
</script>
<script type='text/javascript' src='https://assets.trakteer.id/js/trbtn-overlay.min.js'></script><script type='text/javascript' class='troverlay'>(function() {var trbtnId = trbtnOverlay.init('Trakteer Kopi','#BE1E2D','https://trakteer.id/abdasis/tip/embed/modal','https://cdn.trakteer.id/images/mix/coffee.png','40','floating-right');trbtnOverlay.draw(trbtnId);})();</script>
@endpush
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment