1515 Your audience already has phones - let's use them!
1616 </p >
1717 <button
18- @click =" createRoom"
1918 :disabled =" creating"
2019 class =" inline-flex items-center px-8 py-4 border border-transparent text-lg font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 disabled:opacity-50 disabled:cursor-not-allowed"
20+ @click =" createRoom"
2121 >
2222 <span v-if =" !creating" >Create Your Room</span >
2323 <span v-else class =" flex items-center" >
2424 <svg class =" animate-spin -ml-1 mr-3 h-5 w-5 text-white" fill =" none" viewBox =" 0 0 24 24" >
25- <circle class =" opacity-25" cx =" 12" cy =" 12" r =" 10" stroke =" currentColor" stroke-width =" 4" ></ circle >
26- <path class =" opacity-75" fill =" currentColor" d =" M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" ></ path >
25+ <circle class =" opacity-25" cx =" 12" cy =" 12" r =" 10" stroke =" currentColor" stroke-width =" 4" / >
26+ <path class =" opacity-75" fill =" currentColor" d =" M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" / >
2727 </svg >
2828 Creating...
2929 </span >
6262 <ul class =" space-y-3" >
6363 <li class =" flex items-start" >
6464 <svg class =" h-6 w-6 text-green-500 mr-2 flex-shrink-0" fill =" none" stroke =" currentColor" viewBox =" 0 0 24 24" >
65- <path stroke-linecap =" round" stroke-linejoin =" round" stroke-width =" 2" d =" M5 13l4 4L19 7" ></ path >
65+ <path stroke-linecap =" round" stroke-linejoin =" round" stroke-width =" 2" d =" M5 13l4 4L19 7" / >
6666 </svg >
6767 <span class =" text-gray-700" >Works on any phone browser</span >
6868 </li >
6969 <li class =" flex items-start" >
7070 <svg class =" h-6 w-6 text-green-500 mr-2 flex-shrink-0" fill =" none" stroke =" currentColor" viewBox =" 0 0 24 24" >
71- <path stroke-linecap =" round" stroke-linejoin =" round" stroke-width =" 2" d =" M5 13l4 4L19 7" ></ path >
71+ <path stroke-linecap =" round" stroke-linejoin =" round" stroke-width =" 2" d =" M5 13l4 4L19 7" / >
7272 </svg >
7373 <span class =" text-gray-700" >Handles large audiences</span >
7474 </li >
7575 <li class =" flex items-start" >
7676 <svg class =" h-6 w-6 text-green-500 mr-2 flex-shrink-0" fill =" none" stroke =" currentColor" viewBox =" 0 0 24 24" >
77- <path stroke-linecap =" round" stroke-linejoin =" round" stroke-width =" 2" d =" M5 13l4 4L19 7" ></ path >
77+ <path stroke-linecap =" round" stroke-linejoin =" round" stroke-width =" 2" d =" M5 13l4 4L19 7" / >
7878 </svg >
7979 <span class =" text-gray-700" >Zero setup time</span >
8080 </li >
119119 <ul class =" space-y-3" >
120120 <li class =" flex items-start" >
121121 <svg class =" h-6 w-6 text-green-500 mr-2 flex-shrink-0" fill =" none" stroke =" currentColor" viewBox =" 0 0 24 24" >
122- <path stroke-linecap =" round" stroke-linejoin =" round" stroke-width =" 2" d =" M5 13l4 4L19 7" ></ path >
122+ <path stroke-linecap =" round" stroke-linejoin =" round" stroke-width =" 2" d =" M5 13l4 4L19 7" / >
123123 </svg >
124124 <span class =" text-gray-700" >Transparent overlay mode</span >
125125 </li >
126126 <li class =" flex items-start" >
127127 <svg class =" h-6 w-6 text-green-500 mr-2 flex-shrink-0" fill =" none" stroke =" currentColor" viewBox =" 0 0 24 24" >
128- <path stroke-linecap =" round" stroke-linejoin =" round" stroke-width =" 2" d =" M5 13l4 4L19 7" ></ path >
128+ <path stroke-linecap =" round" stroke-linejoin =" round" stroke-width =" 2" d =" M5 13l4 4L19 7" / >
129129 </svg >
130130 <span class =" text-gray-700" >OBS/vMix integration</span >
131131 </li >
132132 <li class =" flex items-start" >
133133 <svg class =" h-6 w-6 text-green-500 mr-2 flex-shrink-0" fill =" none" stroke =" currentColor" viewBox =" 0 0 24 24" >
134- <path stroke-linecap =" round" stroke-linejoin =" round" stroke-width =" 2" d =" M5 13l4 4L19 7" ></ path >
134+ <path stroke-linecap =" round" stroke-linejoin =" round" stroke-width =" 2" d =" M5 13l4 4L19 7" / >
135135 </svg >
136136 <span class =" text-gray-700" >Real-time display</span >
137137 </li >
152152 <ul class =" space-y-3" >
153153 <li class =" flex items-start" >
154154 <svg class =" h-6 w-6 text-green-500 mr-2 flex-shrink-0" fill =" none" stroke =" currentColor" viewBox =" 0 0 24 24" >
155- <path stroke-linecap =" round" stroke-linejoin =" round" stroke-width =" 2" d =" M5 13l4 4L19 7" ></ path >
155+ <path stroke-linecap =" round" stroke-linejoin =" round" stroke-width =" 2" d =" M5 13l4 4L19 7" / >
156156 </svg >
157157 <span class =" text-gray-700" >Works with any video platform</span >
158158 </li >
159159 <li class =" flex items-start" >
160160 <svg class =" h-6 w-6 text-green-500 mr-2 flex-shrink-0" fill =" none" stroke =" currentColor" viewBox =" 0 0 24 24" >
161- <path stroke-linecap =" round" stroke-linejoin =" round" stroke-width =" 2" d =" M5 13l4 4L19 7" ></ path >
161+ <path stroke-linecap =" round" stroke-linejoin =" round" stroke-width =" 2" d =" M5 13l4 4L19 7" / >
162162 </svg >
163163 <span class =" text-gray-700" >Dual-screen support</span >
164164 </li >
165165 <li class =" flex items-start" >
166166 <svg class =" h-6 w-6 text-green-500 mr-2 flex-shrink-0" fill =" none" stroke =" currentColor" viewBox =" 0 0 24 24" >
167- <path stroke-linecap =" round" stroke-linejoin =" round" stroke-width =" 2" d =" M5 13l4 4L19 7" ></ path >
167+ <path stroke-linecap =" round" stroke-linejoin =" round" stroke-width =" 2" d =" M5 13l4 4L19 7" / >
168168 </svg >
169169 <span class =" text-gray-700" >Live analytics dashboard</span >
170170 </li >
@@ -374,9 +374,9 @@ const createRoom = async () => {
374374 { emoji: ' 👏' },
375375 { emoji: ' ⭐' },
376376 { emoji: ' 👍' },
377- { emoji: ' 😂' }
378- ]
379- }
377+ { emoji: ' 😂' },
378+ ],
379+ },
380380 })
381381
382382 // Extract roomId and signature from the dashboard URL
@@ -390,7 +390,7 @@ const createRoom = async () => {
390390 router .push ({
391391 name: ' dashboard' ,
392392 params: { roomId },
393- query: { sig: signature }
393+ query: { sig: signature },
394394 })
395395 } catch (error) {
396396 console .error (' Failed to create room:' , error)
@@ -399,4 +399,4 @@ const createRoom = async () => {
399399 creating .value = false
400400 }
401401}
402- </script >
402+ </script >
0 commit comments