Skip to content

Commit e87ab3c

Browse files
butschsterbutschster
committed
Improved UI
1 parent 15b16dd commit e87ab3c

File tree

1 file changed

+70
-43
lines changed

1 file changed

+70
-43
lines changed

‎resources/views/welcome.blade.php‎

Lines changed: 70 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -12,46 +12,81 @@
1212
<link rel="manifest" href="{{ asset('favicon/site.webmanifest') }}">
1313
<link rel="mask-icon" href="{{ asset('favicon/safari-pinned-tab.svg') }}" color="#5bbad5">
1414

15-
<title>Buggregator test console</title>
15+
<title>Buggregator</title>
1616
</head>
1717
<body>
18-
@if(config('app.buggregator_url'))
19-
<div class="flex">
20-
<div class="w-1/3 border-r h-screen overflow-y-scroll">
21-
@endif
22-
<div id="app" class="max-w-screen-lg xl:max-w-screen-xl mx-auto py-10 px-5 md:px-8 lg:px-16">
23-
<img src="{{ asset('images/logo.png') }}" alt="">
24-
<h1 class="text-2xl sm:text-3xl lg:text-4xl leading-none font-extrabold tracking-tight text-blue-600 mt-6 mb-6">
25-
Buggregator is a beautiful, lightweight debug server build on Laravel that helps you debug your app.
26-
</h1>
18+
<div id="app" class="h-screen">
19+
<div class="max-w-screen-lg xl:max-w-screen-xl mx-auto py-10 px-5 md:px-8 lg:px-16">
20+
<img src="{{ asset('images/logo.png') }}" alt="">
21+
<h1 class="text-2xl sm:text-3xl lg:text-4xl leading-none font-extrabold tracking-tight text-blue-600 mt-6 mb-6">
22+
Buggregator is a beautiful, lightweight debug server build on Laravel that helps you debug your app.
23+
</h1>
2724

28-
<div class="text-sm mb-20">
29-
<div class="mb-2 text-center w-full bg-gray-50 text-gray-400 font-semibold hover:text-gray-900 font-mono px-3 py-2 border border-gray-200 rounded-xl transition-colors duration-200">
30-
docker run --pull always -p 23517:8000 -p 1025:1025 -p 9912:9912 -p 9913:9913 butschster/buggregator:latest
31-
</div>
32-
<a class="flex border border-gray-200 w-28 justify-center items-center gap-x-2 bg-gray-50 hover:bg-gray-700 text-gray-700 hover:text-white leading-6 font-semibold py-3 border border-transparent rounded-xl focus:ring-2 focus:ring-offset-2 focus:ring-offset-white focus:ring-gray-900 focus:outline-none transition-colors duration-200" href="https://github.com/buggregator/app">
33-
<svg class="w-6 h-6 fill-current" viewBox="0 0 1024 1024" fill="none" xmlns="http://www.w3.org/2000/svg">
34-
<path fill-rule="evenodd" clip-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8C0 11.54 2.29 14.53 5.47 15.59C5.87 15.66 6.02 15.42 6.02 15.21C6.02 15.02 6.01 14.39 6.01 13.72C4 14.09 3.48 13.23 3.32 12.78C3.23 12.55 2.84 11.84 2.5 11.65C2.22 11.5 1.82 11.13 2.49 11.12C3.12 11.11 3.57 11.7 3.72 11.94C4.44 13.15 5.59 12.81 6.05 12.6C6.12 12.08 6.33 11.73 6.56 11.53C4.78 11.33 2.92 10.64 2.92 7.58C2.92 6.71 3.23 5.99 3.74 5.43C3.66 5.23 3.38 4.41 3.82 3.31C3.82 3.31 4.49 3.1 6.02 4.13C6.66 3.95 7.34 3.86 8.02 3.86C8.7 3.86 9.38 3.95 10.02 4.13C11.55 3.09 12.22 3.31 12.22 3.31C12.66 4.41 12.38 5.23 12.3 5.43C12.81 5.99 13.12 6.7 13.12 7.58C13.12 10.65 11.25 11.33 9.47 11.53C9.76 11.78 10.01 12.26 10.01 13.01C10.01 14.08 10 14.94 10 15.21C10 15.42 10.15 15.67 10.55 15.59C13.71 14.53 16 11.53 16 8C16 3.58 12.42 0 8 0Z" transform="scale(64)" fill="#1B1F23"/>
35-
</svg>
36-
<span class="flex-none">Github</span>
37-
</a>
25+
<div class="text-sm mb-5 md:mb-10 lg:mb-20">
26+
<p class="max-w-screen-lg text-lg sm:text-2xl sm:leading-10 font-medium mb-5 text-gray-600">
27+
You can run Buggregator via docker from Docker Hub by using command below.
28+
</p>
29+
<div
30+
class="mb-2 text-center w-full bg-gray-50 text-gray-400 font-semibold hover:text-gray-900 font-mono px-3 py-2 border border-gray-200 rounded-xl transition-colors duration-200">
31+
docker run --pull always -p 23517:8000 -p 1025:1025 -p 9912:9912 -p 9913:9913
32+
butschster/buggregator:latest
3833
</div>
34+
<a class="flex border border-gray-200 w-28 justify-center items-center gap-x-2 bg-gray-50 hover:bg-gray-700 text-gray-700 hover:text-white leading-6 font-semibold py-3 border border-transparent rounded-xl focus:ring-2 focus:ring-offset-2 focus:ring-offset-white focus:ring-gray-900 focus:outline-none transition-colors duration-200"
35+
href="https://github.com/buggregator/app">
36+
<svg class="w-6 h-6 fill-current" viewBox="0 0 1024 1024" fill="none"
37+
xmlns="http://www.w3.org/2000/svg">
38+
<path fill-rule="evenodd" clip-rule="evenodd"
39+
d="M8 0C3.58 0 0 3.58 0 8C0 11.54 2.29 14.53 5.47 15.59C5.87 15.66 6.02 15.42 6.02 15.21C6.02 15.02 6.01 14.39 6.01 13.72C4 14.09 3.48 13.23 3.32 12.78C3.23 12.55 2.84 11.84 2.5 11.65C2.22 11.5 1.82 11.13 2.49 11.12C3.12 11.11 3.57 11.7 3.72 11.94C4.44 13.15 5.59 12.81 6.05 12.6C6.12 12.08 6.33 11.73 6.56 11.53C4.78 11.33 2.92 10.64 2.92 7.58C2.92 6.71 3.23 5.99 3.74 5.43C3.66 5.23 3.38 4.41 3.82 3.31C3.82 3.31 4.49 3.1 6.02 4.13C6.66 3.95 7.34 3.86 8.02 3.86C8.7 3.86 9.38 3.95 10.02 4.13C11.55 3.09 12.22 3.31 12.22 3.31C12.66 4.41 12.38 5.23 12.3 5.43C12.81 5.99 13.12 6.7 13.12 7.58C13.12 10.65 11.25 11.33 9.47 11.53C9.76 11.78 10.01 12.26 10.01 13.01C10.01 14.08 10 14.94 10 15.21C10 15.42 10.15 15.67 10.55 15.59C13.71 14.53 16 11.53 16 8C16 3.58 12.42 0 8 0Z"
40+
transform="scale(64)" fill="#1B1F23"/>
41+
</svg>
42+
<span class="flex-none">Github</span>
43+
</a>
44+
</div>
3945

40-
<div class="px-4 sm:px-6 md:px-8 mb-20">
41-
<h2 class="text-3xl sm:text-5xl lg:text-6xl leading-none font-extrabold text-blue-600 tracking-tight mb-8 text-center">Buggregator is a standalone.</h2>
42-
<p class="text-center max-w-4xl text-lg sm:text-2xl text-gray-700 font-bold space-y-6 max-w-4xl mx-auto mb-6">
43-
It runs without installation on multiple platforms via docker and supports symfony var-dumper, monolog, sentry, smtp and spatie ray package.
44-
</p>
45-
<div class="flex flex-col items-center">
46-
<div class="p-1 border-2 border-blue-400 rounded-full">
47-
<img src="https://avatars.githubusercontent.com/u/773481?v=4" alt="" class="w-16 h-16 rounded-full bg-blue-200" loading="lazy">
48-
</div>
49-
<a href="https://github.com/butschster" class="text-gray-900 text-lg font-bold">butschster</a>
50-
<div class="text-blue-600 text-sm font-bold">Creator of Buggregator</div>
46+
47+
<a href="#demo" class="flex flex-col items-center text-gray-900 mb-5 md:mb-10 lg:mb-20">
48+
<h3 class="sm:text-lg lg:text-4xl sm:leading-snug font-extrabold tracking-wide mb-3">demo</h3>
49+
<div class="animate-bounce">
50+
<svg class="fill-current transform rotate-90 h-10" xmlns="http://www.w3.org/2000/svg"
51+
viewBox="0 0 512 512">
52+
<path
53+
d="M295.6 163.7c-5.1 5-5.1 13.3-.1 18.4l60.8 60.9H124.9c-7.1 0-12.9 5.8-12.9 13s5.8 13 12.9 13h231.3l-60.8 60.9c-5 5.1-4.9 13.3.1 18.4 5.1 5 13.2 5 18.3-.1l82.4-83c1.1-1.2 2-2.5 2.7-4.1.7-1.6 1-3.3 1-5 0-3.4-1.3-6.6-3.7-9.1l-82.4-83c-4.9-5.2-13.1-5.3-18.2-.3z"/>
54+
</svg>
55+
</div>
56+
</a>
57+
58+
<div class="px-4 sm:px-6 md:px-8 mb-5 md:mb-10 lg:mb-20">
59+
<h2 class="text-3xl sm:text-5xl lg:text-6xl leading-none font-extrabold text-blue-600 tracking-tight mb-8 text-center">
60+
Buggregator is a standalone.</h2>
61+
<p class="text-center max-w-4xl text-lg sm:text-2xl text-gray-700 font-bold space-y-6 max-w-4xl mx-auto mb-6">
62+
It runs without installation on multiple platforms via docker and supports symfony var-dumper, monolog,
63+
sentry, smtp and spatie ray package.
64+
</p>
65+
<div class="flex flex-col items-center">
66+
<div class="p-1 border-2 border-blue-400 rounded-full">
67+
<img src="https://avatars.githubusercontent.com/u/773481?v=4" alt=""
68+
class="w-16 h-16 rounded-full bg-blue-200" loading="lazy">
5169
</div>
70+
<a href="https://github.com/butschster" class="text-gray-900 text-lg font-bold">butschster</a>
71+
<div class="text-blue-600 text-sm font-bold">Creator of Buggregator</div>
5272
</div>
73+
</div>
74+
75+
</div>
5376

54-
<div class="space-y-5 sm:space-y-10 md:space-y-16 lg:space-y-20">
77+
<div class="relative">
78+
@if(config('app.buggregator_url'))
79+
<div class="sticky top-0 p-0 lg:px-10" id="demo">
80+
<iframe src="{{ config('app.buggregator_url') }}"
81+
frameborder="0"
82+
height="600px"
83+
class="transform sm:scale-75 lg:scale-100 w-full bg-white border-4 border-blue-600 rounded-lg sticky top-0 w-full shadow-2xl">
84+
</iframe>
85+
</div>
86+
@endif
87+
88+
<div class="max-w-screen-lg xl:max-w-screen-xl mx-auto py-10 px-5 md:px-8 lg:px-16">
89+
<div class="space-y-5 sm:space-y-10 md:space-y-16 lg:space-y-20 rounded-b-lg">
5590
@foreach($buttonGroups as $group => $buttons)
5691
<div class="p-5 md:p-8 lg:p-10 bg-gray-50 rounded-xl">
5792
<h3 class="text-lg sm:text-xl lg:text-3xl leading-none font-extrabold text-gray-900 tracking-tight mb-8">
@@ -67,21 +102,13 @@
67102
</div>
68103
@endforeach
69104
</div>
70-
71-
<div class="flex justify-center my-20">
72-
<img src="{{ asset('images/pacman.png') }}" alt="">
73-
</div>
74105
</div>
75-
76-
@if(config('app.buggregator_url'))
77-
</div>
78-
<div class="w-2/3">
79-
<iframe src="{{ config('app.buggregator_url') }}" frameborder="0" class="w-full h-screen"></iframe>
80106
</div>
81-
@endif
82107

108+
<div class="flex justify-center my-20">
109+
<img src="{{ asset('images/pacman.png') }}" alt="">
110+
</div>
83111
</div>
84-
85112
@verbatim
86113
<script>
87114
Vue.component('button-action', {

0 commit comments

Comments
 (0)