adaptive screen size for windows installation

This commit is contained in:
Bao Nguyen
2023-02-16 17:22:05 +07:00
parent a860b8ad33
commit ad6894f496
9 changed files with 18 additions and 18 deletions

View File

@@ -153,7 +153,7 @@
</style>
<div class="h-screen w-screen overflow-hidden flex flex-col bg-[#5a7edc]">
<div class="absolute inset-0 overflow-hidden flex flex-col bg-[#5a7edc]">
<div class="h-[70px] bg-[#00309c] flex flex-row items-center shrink-0">
<img src="/images/xp_logo_horizontal.png" class="h-[40px] ml-4" alt="" />
</div>

View File

@@ -10,10 +10,10 @@
export let options = {
title: 'Windows XP Professional Setup',
min_width: 680,
min_height: 470,
width:700,
height: 470,
min_width: 600,
min_height: 400,
width:600,
height: 400,
minimize_btn_disabled: true,
maximize_btn_disabled: true,
close_btn_disabled: true
@@ -37,7 +37,7 @@
<img src="/images/95/0.png" width="50" alt="">
</div>
</div>
<div class="p-8 shadow flex">
<div class="p-4 shadow flex">
<div class="bg-black shrink-0">
<div class="p-2 h-full w-full bg-yellow-500 rounded-md text-sm text-black">
<p>
@@ -56,13 +56,13 @@
<p class="mt-4">Type the Product Key below:</p>
</div>
</div>
<div class="p-8 py-8 shadow-sm grow">
<div class="p-2 py-4 shadow-sm grow">
<p class="mb-2 text-black text-sm">Product Key:</p>
{#each [0,1,2,3,4] as index}
<input style="background-color: #fff;
box-shadow: inset -1px -1px #fff, inset 1px 1px grey, inset -2px -2px #dfdfdf, inset 2px 2px #0a0a0a;
box-sizing: border-box;
padding: 3px 4px;" type="text" class="h-6 w-24 text-center focus:outline-none text-black font-bold uppercase" maxlength="5" id="product_key_part_{index}"
padding: 3px 4px;" type="text" class="h-6 w-[85px] text-center focus:outline-none text-black font-bold uppercase" maxlength="5" id="product_key_part_{index}"
on:input={(event) => {
if(event.target.value.length == 5){
document.querySelector(`#product_key_part_${index+1}`).focus();

View File

@@ -59,7 +59,7 @@
</script>
<div class="w-screen h-screen bg-[rgb(2,7,176)] overflow-hidden font-Levi">
<div class="absolute inset-0 bg-[rgb(2,7,176)] overflow-hidden font-Levi">
<div class=" mt-4 text-xl font-bold text-slate-400 inline-block">
<p class="px-2">Windows XP Professional Setup</p>
<div class="w-full h-[1px] mb-1 bg-slate-400"></div>
@@ -72,7 +72,7 @@
<div class="absolute bottom-[100px] left-0 right-0">
<div class="absolute bottom-[150px] left-0 right-0">
<div class="border-double border-4 border-slate-400 mx-auto max-w-[700px]">
<p class="text-slate-400 ml-4 my-2">Setup is copying files...</p>
<p class="my-2 text-center">{Math.floor(progress)}%</p>

View File

@@ -39,7 +39,7 @@
</script>
<div class="w-screen h-screen bg-[rgb(2,7,176)] overflow-hidden font-Levi">
<div class="absolute inset-0 bg-[rgb(2,7,176)] overflow-hidden font-Levi">
<div class=" mt-4 text-xl font-bold text-slate-400 inline-block">
<p class="px-2">Windows XP Licensing Agreement</p>
<div class="w-full h-[1px] mb-1 bg-slate-400"></div>

View File

@@ -41,7 +41,7 @@
</script>
<div class="w-screen h-screen bg-[rgb(2,7,176)] overflow-hidden font-Levi">
<div class="absolute inset-0 bg-[rgb(2,7,176)] overflow-hidden font-Levi">
<div class=" mt-4 text-xl font-bold text-slate-400 inline-block">
<p class="px-2">Windows XP Professional Setup</p>
<div class="w-full h-[1px] mb-1 bg-slate-400"></div>
@@ -53,7 +53,7 @@
<p class="mt-4 text-center">On 10237 MB Disk 0 at Id 0 on bus 0 on atapi [MBR]</p>
<div class="absolute bottom-[100px] left-0 right-0">
<div class="absolute bottom-[150px] left-0 right-0">
<div class="border-double border-4 border-slate-400 mx-auto max-w-[700px]">
<p class="text-slate-400 ml-4 my-2">Setup is formatting...</p>
<p class="my-2 text-center">{progress}%</p>

View File

@@ -44,7 +44,7 @@
</script>
<div class="w-screen h-screen bg-[rgb(2,7,176)] overflow-hidden font-Levi">
<div class="absolute inset-0 bg-[rgb(2,7,176)] overflow-hidden font-Levi">
<div class=" mt-4 text-xl font-bold text-slate-400 inline-block">
<p class="px-2">Windows XP Professional Setup</p>
<div class="w-full h-[1px] mb-1 bg-slate-400"></div>

View File

@@ -50,7 +50,7 @@
</script>
<div class="w-screen h-screen bg-[rgb(2,7,176)] overflow-hidden font-Levi">
<div class="absolute inset-0 bg-[rgb(2,7,176)] overflow-hidden font-Levi">
<div class=" mt-4 text-xl font-bold text-slate-400 inline-block">
<p class="px-2">Windows XP Professional Setup</p>
<div class="w-full h-[1px] mb-1 bg-slate-400"></div>
@@ -65,7 +65,7 @@
<div class="absolute bottom-[100px] left-0 right-0">
<div class="absolute bottom-[150px] left-0 right-0">
<div class="border-double border-4 border-slate-400 pt-8 mx-auto max-w-[700px]">
<p class="text-slate-400 ml-4 my-2"></p>
<p class="my-2 text-center">Your computer will reboot in {time_left > 1 ? time_left + ' seconds' : time_left + ' second'}...</p>

View File

@@ -29,7 +29,7 @@
</script>
<div class="w-screen h-screen bg-[rgb(2,7,176)] overflow-hidden font-Levi">
<div class="absolute inset-0 bg-[rgb(2,7,176)] overflow-hidden font-Levi">
<div class=" mt-4 text-xl font-bold text-slate-400 inline-block">
<p class="px-2">Windows XP Professional Setup</p>
<div class="w-full h-[1px] mb-1 bg-slate-400"></div>

View File

@@ -33,7 +33,7 @@
</script>
<div class="w-screen h-screen bg-[rgb(2,7,176)] overflow-hidden font-Levi">
<div class="absolute inset-0 bg-[rgb(2,7,176)] overflow-hidden font-Levi">
<div class=" mt-4 text-xl font-bold text-slate-400 inline-block">
<p class="px-2">Windows XP Professional Setup</p>
<div class="w-full h-[1px] mb-1 bg-slate-400"></div>