|
1 | 1 | @inherits Microsoft.AspNetCore.Mvc.Razor.RazorPage<TModel> |
2 | 2 | @inject AppConfig AppConfig |
3 | 3 | @inject MarkdownPodcasts Podcasts |
4 | | -@using System.Text.Encodings.Web |
5 | | -@using Microsoft.AspNetCore.Mvc.Razor |
6 | 4 | <!doctype html> |
7 | 5 | <html lang="en"> |
8 | 6 | <head> |
|
37 | 35 |
|
38 | 36 | @{ |
39 | 37 | var r = new Random(); |
| 38 | + void AboutSection(string? cls = null) |
| 39 | + { |
| 40 | + <section class="@cls"> |
| 41 | + <h2 class="flex items-center font-mono text-sm font-medium leading-7 text-slate-900 dark:text-slate-50"> |
| 42 | + @{ TinyWaveFormIcon(["fill-violet-300", "fill-pink-300"], "h-2.5 w-2.5"); } |
| 43 | + <span class="ml-2.5">About</span> |
| 44 | + </h2> |
| 45 | + <p class="mt-2 text-base leading-7 text-slate-700 dark:text-slate-200"> |
| 46 | + @Html.Raw(Podcasts.Config.About) |
| 47 | + </p> |
| 48 | + </section> |
| 49 | + } |
| 50 | + |
| 51 | + void TinyWaveFormIcon(string[] colors, string? cls = null) |
| 52 | + { |
| 53 | + <svg aria-hidden="true" viewBox="0 0 10 10" class="@cls"> |
| 54 | + <path d="M0 5a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v4a1 1 0 0 1-1 1H1a1 1 0 0 1-1-1V5Z" |
| 55 | + class="@colors[0]" /> |
| 56 | + <path d="M6 1a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v8a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1V1Z" |
| 57 | + class="@colors[1]" /> |
| 58 | + </svg> |
| 59 | + } |
| 60 | + |
| 61 | + void Waveform(string? cls = null) |
| 62 | + { |
| 63 | + var id = "waveform-" + r.Next(1000); |
| 64 | + var total = 100; |
| 65 | + var width = 2; |
| 66 | + var gap = 2; |
| 67 | + var minHeight = 40; |
| 68 | + var maxHeight = 80; |
| 69 | + <svg aria-hidden="true" class="@cls"> |
| 70 | + <defs> |
| 71 | + <linearGradient id="@id-fade" x1="0" x2="0" y1="0" y2="1"> |
| 72 | + <stop offset="40%" stop-color="white"></stop> |
| 73 | + <stop offset="100%" stop-color="black"></stop> |
| 74 | + </linearGradient> |
| 75 | + <linearGradient id="@id-gradient"> |
| 76 | + <stop offset="0%" stop-color="#4989E8"></stop> |
| 77 | + <stop offset="50%" stop-color="#6159DA"></stop> |
| 78 | + <stop offset="100%" stop-color="#FF54AD"></stop> |
| 79 | + </linearGradient> |
| 80 | + <mask id="@id-mask"> |
| 81 | + <rect width="100%" height="100%" fill="url(#@id-pattern)"></rect> |
| 82 | + </mask> |
| 83 | + <pattern id="@id-pattern" |
| 84 | + width="@(total * width + total * gap)" |
| 85 | + height="100%" |
| 86 | + patternUnits="userSpaceOnUse"> |
| 87 | + @for (var i = 0; i < total; i++) |
| 88 | + { |
| 89 | + <rect width="@width" |
| 90 | + height="@r.Next(minHeight, maxHeight)" |
| 91 | + x="@(gap * (i + 1) + width * i)" |
| 92 | + fill="url(#@id-fade)"></rect> |
| 93 | + } |
| 94 | + </pattern> |
| 95 | + </defs> |
| 96 | + <rect width="100%" height="100%" fill="url(#@id-gradient)" mask="url(#@id-mask)" opacity="0.25"></rect> |
| 97 | + </svg> |
| 98 | + } |
40 | 99 | } |
41 | 100 |
|
42 | 101 | <div class="min-h-screen"> |
|
62 | 121 | @Podcasts.Config.Description |
63 | 122 | </p> |
64 | 123 | </div> |
65 | | - <section class="mt-12 hidden lg:block"> |
66 | | - <h2 class="flex items-center font-mono text-sm font-medium leading-7 text-slate-900 dark:text-slate-50"> |
67 | | - <svg aria-hidden="true" viewBox="0 0 10 10" class="h-2.5 w-2.5"> |
68 | | - <path d="M0 5a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v4a1 1 0 0 1-1 1H1a1 1 0 0 1-1-1V5Z" |
69 | | - class="fill-violet-300" /> |
70 | | - <path d="M6 1a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v8a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1V1Z" |
71 | | - class="fill-pink-300" /> |
72 | | - </svg> |
73 | | - <span class="ml-2.5">About</span> |
74 | | - </h2> |
75 | | - <p class="mt-2 text-base leading-7 text-slate-700 dark:text-slate-200"> |
76 | | - @Html.Raw(Podcasts.Config.About) |
77 | | - </p> |
78 | | - </section> |
| 124 | + @{ AboutSection("mt-12 hidden lg:block"); } |
79 | 125 | <section class="mt-10 lg:mt-12"> |
80 | 126 | <h2 class="sr-only flex items-center font-mono text-sm font-medium leading-7 text-slate-900 dark:text-slate-50 lg:not-sr-only"> |
81 | | - <svg aria-hidden="true" viewBox="0 0 10 10" class="h-2.5 w-2.5"> |
82 | | - <path d="M0 5a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v4a1 1 0 0 1-1 1H1a1 1 0 0 1-1-1V5Z" |
83 | | - class="fill-indigo-300" /> |
84 | | - <path d="M6 1a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v8a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1V1Z" |
85 | | - class="fill-blue-300" /> |
86 | | - </svg> |
| 127 | + @{ TinyWaveFormIcon(["fill-indigo-300", "fill-blue-300"], "h-2.5 w-2.5"); } |
87 | 128 | <span class="ml-2.5">Listen</span> |
88 | 129 | </h2> |
89 | 130 | <div class="h-px bg-gradient-to-r from-slate-200/0 via-slate-200 to-slate-200/0 lg:hidden"></div> |
|
102 | 143 | </div> |
103 | 144 | </div> |
104 | 145 | <div class="border-t border-slate-200 dark:border-slate-700 lg:relative lg:mb-28 lg:ml-112 lg:border-t-0 xl:ml-120"> |
105 | | - @{ |
106 | | - var id = "waveform-" + r.Next(1000); |
107 | | - var total = 100; |
108 | | - var width = 2; |
109 | | - var gap = 2; |
110 | | - var minHeight = 40; |
111 | | - var maxHeight = 80; |
112 | | - } |
113 | | - <svg aria-hidden="true" class="absolute left-0 top-0 h-20 w-full"> |
114 | | - <defs> |
115 | | - <linearGradient id="@id-fade" x1="0" x2="0" y1="0" y2="1"> |
116 | | - <stop offset="40%" stop-color="white"></stop> |
117 | | - <stop offset="100%" stop-color="black"></stop> |
118 | | - </linearGradient> |
119 | | - <linearGradient id="@id-gradient"> |
120 | | - <stop offset="0%" stop-color="#4989E8"></stop> |
121 | | - <stop offset="50%" stop-color="#6159DA"></stop> |
122 | | - <stop offset="100%" stop-color="#FF54AD"></stop> |
123 | | - </linearGradient> |
124 | | - <mask id="@id-mask"> |
125 | | - <rect width="100%" height="100%" fill="url(#@id-pattern)"></rect> |
126 | | - </mask> |
127 | | - <pattern id="@id-pattern" |
128 | | - width="@(total * width + total * gap)" |
129 | | - height="100%" |
130 | | - patternUnits="userSpaceOnUse"> |
131 | | - @for (var i = 0; i < total; i++) |
132 | | - { |
133 | | - <rect width="@width" |
134 | | - height="@r.Next(minHeight, maxHeight)" |
135 | | - x="@(gap * (i + 1) + width * i)" |
136 | | - fill="url(#@id-fade)"></rect> |
137 | | - } |
138 | | - </pattern> |
139 | | - </defs> |
140 | | - <rect width="100%" height="100%" fill="url(#@id-gradient)" mask="url(#@id-mask)" opacity="0.25"></rect> |
141 | | - </svg> |
| 146 | + @{ Waveform("absolute left-0 top-0 h-20 w-full"); } |
142 | 147 | <div class="relative"> |
143 | 148 | @RenderBody() |
144 | 149 | </div> |
145 | 150 | </div> |
146 | 151 | <footer class="border-t border-slate-200 dark:border-slate-700 bg-slate-50 dark:bg-slate-900 py-10 pb-40 sm:py-16 sm:pb-32 lg:hidden"> |
147 | 152 | <div class="mx-auto px-4 sm:px-6 md:max-w-2xl md:px-4"> |
148 | | - <section class="mt-12 hidden lg:block"> |
149 | | - <h2 class="flex items-center font-mono text-sm font-medium leading-7 text-slate-900 dark:text-slate-50"> |
150 | | - <svg aria-hidden="true" viewBox="0 0 10 10" class="h-2.5 w-2.5"> |
151 | | - <path d="M0 5a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v4a1 1 0 0 1-1 1H1a1 1 0 0 1-1-1V5Z" |
152 | | - class="fill-violet-300" /> |
153 | | - <path d="M6 1a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v8a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1V1Z" |
154 | | - class="fill-pink-300" /> |
155 | | - </svg> |
156 | | - <span class="ml-2.5">About</span> |
157 | | - </h2> |
158 | | - <p class="mt-2 text-base leading-7 text-slate-700 dark:text-slate-200"> |
159 | | - @Html.Raw(Podcasts.Config.About) |
160 | | - </p> |
161 | | - </section> |
| 153 | + @{ AboutSection("mt-12 hidden lg:block"); } |
162 | 154 | </div> |
163 | 155 | </footer> |
164 | 156 | <div class="fixed inset-x-0 bottom-0 z-10 lg:left-112 xl:left-120"> |
|
0 commit comments