|
|
<html><head><link href="https://cdn.jsdelivr.net/npm/daisyui@3.1.6/dist/full.css" rel="stylesheet" type="text/css" /><script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script><script src="https://cdn.tailwindcss.com?plugins=forms,typography,aspect-ratio"></script><script defer src="https://cdnjs.cloudflare.com/ajax/libs/three.js/0.156.1/three.min.js"></script><script type="module" src="main.js"></script><title>sample app</title></head><body><h1>sample app</h1> |
|
|
<img |
|
|
src="https://images.unsplash.com/photo-1582320676881-4cd8c6c74c41?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1934&q=80" |
|
|
width="600" height="400" |
|
|
loading="lazy" |
|
|
class="rounded-full h-40 w-40" |
|
|
/> |
|
|
<p> |
|
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam nec lorem a leo gravida dictum non ut ex. In in nunc id velit eleifend congue. Morbi tincidunt feugiat augue sed laoreet. Donec accumsan nunc enim, vitae varius nibh mattis vel. Suspendisse sagittis erat justo, in porta metus maximus a. Quisque vitae dignissim elit. Suspendisse ornare, velit ac dapibus pulvinar, velit diam fermentum dolor, quis sagittis augue lorem sed turpis. Curabitur est magna, finibus eu lacus in, lacinia vulputate lectus. Maecenas nec tellus eu ex porttitor laoreet. Proin mollis eu dui sit amet consequat. |
|
|
</p> |
|
|
<button |
|
|
class="btn btn-success" |
|
|
x-on:click="toggleModal" |
|
|
> |
|
|
Generate New Image |
|
|
</button> |
|
|
|
|
|
|
|
|
<div |
|
|
x-data="{ isOpen: false }" |
|
|
x-ref="modal" |
|
|
x-on:click.outside="isOpen = false" |
|
|
class="modal" |
|
|
aria-hidden="true" |
|
|
> |
|
|
<div class="modal-window" x-show="isOpen"> |
|
|
<button |
|
|
class="modal-close" |
|
|
x-on:click="isOpen = false" |
|
|
> |
|
|
X |
|
|
</button> |
|
|
<h2 class="text-3xl"> SOMETHING IN MIND </h2> |
|
|
<div class="flex justify-center px-3 py-3"> |
|
|
<img |
|
|
class="w-64 h-64 rounded-full h-64" |
|
|
src="DATA:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" |
|
|
/> |
|
|
</div> |
|
|
<div class="flex justify-center mt-3 mb-3"> |
|
|
<button class="btn btn-success" x-on:click="somefunction"> |
|
|
Generate Videos |
|
|
</button> |
|
|
</div> |
|
|
<div class="flex justify-center px-3 py-3"> |
|
|
<img |
|
|
class="image w-100" |
|
|
src="DATA:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" |
|
|
/> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</body></html> |
