BuboBubo/topos
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

continue graphical mockup

Browse Source
This commit is contained in:
Raphaël Forment
2023-07-30 16:25:50 +02:00
parent e785e0ae0a
commit 2bfc25b1f2
1 changed files with 17 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
index.html
View File

@ -92,39 +92,44 @@
<!-- Font Size Selection -->
<div class="space-y-6 w-auto min-w-screen px-4">
<div id="font-size-selector" class="flex flex-row space-x-4 rounded-lg">
<label for="default-range" class="text-sm font-medium text-black w-1/5">Font Size</label>
<input id="default-range" type="range" step=1 value="22" class="w-4/5 h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer dark:bg-gray-700">
<label for="default-range" class="text-xs lg:text-sm font-medium text-black w-2/5 lg:w-1/5">Font Size: 22px</label>
<input id="default-range" type="range" step=1 value="22" class="align-middle w-3/5 lg:w-4/5 h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer dark:bg-gray-700">
</div>
</div>
<!-- Font Family Selection -->
<div class="space-y-6 w-auto min-w-screen px-4">
</div>
<!-- Editor mode selection -->
<div class="flex flex-row space-x-4 justify-center px-4">
<div class="flex flex-row space-x-4 justify-center px-2 mx-2">
<div class="flex items-center pl-4 border border-gray-200 rounded dark:border-gray-700 w-full">
<input id="bordered-radio-1" type="radio" value="" name="bordered-radio" class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
<label for="bordered-radio-1" class="w-full py-4 ml-2 text-sm font-medium text-black">Normal Editor Mode</label>
<label for="bordered-radio-1" class="w-full py-4 ml-2 text-sm font-medium text-black">Normal Mode</label>
</div>
<div class="flex items-center pl-4 border border-gray-200 rounded dark:border-gray-700 w-full">
<input checked id="bordered-radio-2" type="radio" value="" name="bordered-radio" class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
<label for="bordered-radio-2" class="w-full py-4 ml-2 text-sm font-medium text-black">Vim Editor Mode</label>
<label for="bordered-radio-2" class="w-full py-4 ml-2 text-sm font-medium text-black">Vim Mode</label>
</div>
</div>
<!-- Information card -->
<div class="flex lg:flex-row flex-col w-auto min-w-screen px-4 pb-8 space-x-8">
<a class="block max-w-sm p-6 bg-white border border-gray-200 rounded-lg shadow bg-gray-800 border-gray-700 hover:bg-gray-700">
<h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white">GitHub</h5>
<div class="flex lg:flex-row space-y-2 lg:space-y-0 flex-col w-auto min-w-screen px-4 lg:space-x-8 space-x-0">
<a class="block max-w-sm p-6 border border-gray-200 rounded-lg shadow bg-gray-800 border-gray-700 hover:bg-gray-700">
<h5 class="mb-2 lg:text-2xl text-xl font-bold tracking-tight text-gray-900 dark:text-white">GitHub</h5>
<p class="font-normal text-gray-700 dark:text-gray-400">Get involved in the dev process and or file an issue for a broken feature</p>
</a>
<a class="block max-w-sm p-6 bg-white border border-gray-200 rounded-lg shadow bg-gray-800 border-gray-700 hover:bg-gray-700">
<h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white">Discord</h5>
<a class="block max-w-sm p-6 border border-gray-200 rounded-lg shadow bg-gray-800 border-gray-700 hover:bg-gray-700">
<h5 class="mb-2 lg:text-2xl text-xl font-bold tracking-tight text-gray-900 dark:text-white">Discord</h5>
<p class="font-normal text-gray-700 dark:text-gray-400">Join the community on the official Topos/Sardine Discord Server.</p>
</a>
<a class="block max-w-sm p-6 bg-white border border-gray-200 rounded-lg shadow bg-gray-800 border-gray-800 hover:bg-gray-700">
<h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white">Website</h5>
<a class="block max-w-sm p-6 border border-gray-200 rounded-lg shadow bg-gray-800 border-gray-800 hover:bg-gray-700">
<h5 class="mb-2 text-xl lg:text-2xl font-bold tracking-tight text-gray-900 dark:text-white">Website</h5>
<p class="font-normal text-gray-700 dark:text-gray-400">Documentation, videos and more on the official website.</p>
</a>
</div>
<div class="flex space-x-6 border-t border-gray-200 rounded-b dark:border-gray-600 mx-4 border-spacing-y-4">
<button data-modal-hide="defaultModal" type="button" class="hover:bg-gray-700 bg-gray-800 mt-4 mb-4 text-white focus:ring-4 font-medium rounded-lg text-sm px-5 py-2.5 text-center">OK</button>
<button data-modal-hide="defaultModal" type="button" class="mt-4 mb-4 text-white hover:bg-gray-100 focus:ring-4 focus:outline-none focus:ring-blue-300 rounded-lg border border-gray-200 text-sm font-medium px-5 py-2.5 hover:text-gray-900 focus:z-10 dark:bg-gray-800 dark:text-gray-300 dark:border-gray-500 dark:hover:text-white dark:hover:bg-gray-600 dark:focus:ring-gray-600">Cancel</button>
</div>
</div>
</div>
</div>