1 00:00:02,480 --> 00:00:09,710 The last video tutorial we have seen that how we can integrate YOLO v9 with flask and create a complete 2 00:00:09,710 --> 00:00:10,430 web app. 3 00:00:11,000 --> 00:00:17,960 But I have skipped how you can create a web app layout using HTML and CSS. 4 00:00:18,170 --> 00:00:23,360 As in the back end we will be using flask, but to create the complete web app layout, I will be using 5 00:00:23,510 --> 00:00:24,710 HTML and CSS. 6 00:00:24,710 --> 00:00:29,780 And in the last video tutorial I did not explain how we have created this web app layout. 7 00:00:30,050 --> 00:00:36,170 So in this tutorial I will be creating this complete web app layout that we have created for our object 8 00:00:36,170 --> 00:00:37,250 detection application. 9 00:00:37,250 --> 00:00:41,990 So this is uh, let me explain you how we create this complete web app layout. 10 00:00:41,990 --> 00:00:44,390 And then we will start writing the code. 11 00:00:44,390 --> 00:00:47,450 So this is how our complete web app layout looks like. 12 00:00:47,450 --> 00:00:50,300 So in the blue color over here, this is the sideline. 13 00:00:50,630 --> 00:00:53,900 Uh, this is the sidebar where you can see we have different icons. 14 00:00:53,900 --> 00:00:55,940 And here is our right panel. 15 00:00:55,940 --> 00:00:59,660 And in the right panel we will have our application name over here. 16 00:00:59,660 --> 00:01:01,820 So currently it's Photoshop application written. 17 00:01:01,820 --> 00:01:04,790 But as you know that we are doing object detection using YOLO v9. 18 00:01:04,790 --> 00:01:07,910 So we will have object detection as our application name. 19 00:01:07,910 --> 00:01:10,040 And here I have added the logo. 20 00:01:10,040 --> 00:01:12,950 So you can add your own company logo as well. 21 00:01:12,950 --> 00:01:14,510 So it's all depending on your choice. 22 00:01:14,510 --> 00:01:15,950 Or you can skip it as well. 23 00:01:16,070 --> 00:01:18,590 And here you can see this is the tablet area. 24 00:01:19,420 --> 00:01:21,940 In the tablet area you can see this black color. 25 00:01:21,940 --> 00:01:23,260 So this is a tablet image. 26 00:01:23,260 --> 00:01:31,810 And inside this I will be displaying my output image or uh, in uh live webcam feed or output video. 27 00:01:31,810 --> 00:01:34,810 So the user will upload an image or video. 28 00:01:34,810 --> 00:01:40,540 And over here in this tablet area we will be showing you the, uh, showing you the output image or 29 00:01:40,540 --> 00:01:46,300 video with detections like using YOLO v9 we will be detecting different objects like over here you can 30 00:01:46,300 --> 00:01:50,110 see person bus a handbag, backpacks all this. 31 00:01:50,110 --> 00:01:51,970 So we're detecting different things. 32 00:01:53,260 --> 00:01:58,960 So we can divide this complete layout into, uh, three different containers. 33 00:01:59,080 --> 00:01:59,380 Okay. 34 00:01:59,380 --> 00:02:05,200 So the first one will be the sidebar, the second one will be the, uh, the first one will be the sideline. 35 00:02:05,200 --> 00:02:08,770 Uh, the second one will be the sidebar, and the third one will be the right panel. 36 00:02:08,770 --> 00:02:16,690 So this complete layout can be divided into three different containers, uh, sideline sidebar and the 37 00:02:16,690 --> 00:02:17,650 right panel. 38 00:02:20,010 --> 00:02:20,700 Okay. 39 00:02:20,700 --> 00:02:22,260 I think I've just. 40 00:02:24,310 --> 00:02:28,210 So now you can see that we can have three different containers. 41 00:02:28,210 --> 00:02:33,550 Or this complete layout can be divided into three different containers sideline sidebar and the right 42 00:02:33,550 --> 00:02:34,150 panel. 43 00:02:35,200 --> 00:02:35,650 Okay. 44 00:02:35,650 --> 00:02:37,090 So what is container? 45 00:02:37,120 --> 00:02:43,930 Container is basically a division or and in HTML code to create this division we can use div tag okay. 46 00:02:43,930 --> 00:02:46,330 So container is nothing but a division. 47 00:02:46,720 --> 00:02:50,800 Uh and to create this division uh we will be using div tag in HTML code. 48 00:02:50,800 --> 00:02:52,390 So we'll be creating a main page. 49 00:02:52,390 --> 00:02:56,110 And inside this main page like this complete is our main page. 50 00:02:56,110 --> 00:02:59,620 And inside this main page we will have three different divisions. 51 00:02:59,770 --> 00:03:03,310 Uh one for the sideline, one for the sidebar and one for the right panel. 52 00:03:03,730 --> 00:03:04,300 Okay. 53 00:03:04,300 --> 00:03:11,350 So after uh, containing the creating three different containers or using our, uh, like three different 54 00:03:11,350 --> 00:03:17,680 visions using div tag in HTML, uh, then we will go into the sidebar and here we will create different 55 00:03:17,680 --> 00:03:19,090 icons okay. 56 00:03:19,090 --> 00:03:21,730 So we will create multiple different icons. 57 00:03:21,730 --> 00:03:25,660 So after creating different icons uh. 58 00:03:27,120 --> 00:03:28,620 In the sidebar. 59 00:03:28,740 --> 00:03:33,720 Uh, then we will go towards the header and in the header, uh, then we will go towards the right panel. 60 00:03:33,720 --> 00:03:35,550 So this is the complete right panel. 61 00:03:35,550 --> 00:03:39,030 In the right panel we will create two different containers okay. 62 00:03:39,030 --> 00:03:42,900 So uh in right panel we will then have two different containers. 63 00:03:42,900 --> 00:03:45,300 One is for the header like you can see over here. 64 00:03:45,300 --> 00:03:51,480 And the second one is for the tablet area in the header we will have the name of our application plus 65 00:03:51,480 --> 00:03:53,100 uh the logo over here. 66 00:03:53,100 --> 00:03:58,530 And in the tablet area we will have our output image or output video being displayed. 67 00:03:58,530 --> 00:04:01,980 So this is how our complete web app layout looks like. 68 00:04:01,980 --> 00:04:02,970 So. 69 00:04:05,370 --> 00:04:09,210 So let's start writing the code and let's design this complete webapp layout. 70 00:04:09,210 --> 00:04:15,000 So I have just given you an overview of how we will create this web app layout. 71 00:04:17,640 --> 00:04:21,330 So now you can see over here we have our boilerplate code. 72 00:04:21,330 --> 00:04:28,590 So first we will change the title of the web application and just write it over here object detection 73 00:04:29,190 --> 00:04:31,860 using object detection. 74 00:04:31,860 --> 00:04:32,550 That's fine. 75 00:04:35,080 --> 00:04:40,900 So after we change the title of the web app, now we will link our CSS file. 76 00:04:40,930 --> 00:04:46,600 Okay, so I will write a link to the CSS file. 77 00:04:47,230 --> 00:04:47,620 Okay. 78 00:04:47,620 --> 00:04:52,270 So now you can see that CSS file is empty over here style dot CSS. 79 00:04:52,630 --> 00:04:55,810 And we are writing this HTML CSS code from scratch. 80 00:04:55,810 --> 00:04:56,500 So. 81 00:04:57,420 --> 00:05:01,860 Will link to the CSS file and for this. 82 00:05:04,100 --> 00:05:11,570 I will just write over here links CSS and you can see that it automatically, uh, links to the CSS 83 00:05:11,570 --> 00:05:11,930 file. 84 00:05:11,930 --> 00:05:15,650 But you can see over here we have added the CSS file static folder. 85 00:05:15,890 --> 00:05:17,420 And you can find it over here. 86 00:05:17,420 --> 00:05:20,300 It's not in the templates inside this HTML. 87 00:05:22,660 --> 00:05:25,900 So for this, what I will do is. 88 00:05:28,900 --> 00:05:31,330 I would like to go out for. 89 00:05:34,670 --> 00:05:37,130 And we are looking. 90 00:05:38,520 --> 00:05:39,990 What the CSS file. 91 00:05:43,100 --> 00:05:45,200 And the file name is. 92 00:05:54,820 --> 00:05:56,110 Style dot CSS. 93 00:05:58,150 --> 00:05:59,740 So this is how it works. 94 00:05:59,740 --> 00:06:01,990 So we have linked the CSS file. 95 00:06:03,580 --> 00:06:08,950 So now we will go ahead inside the body and we'll create three different containers. 96 00:06:12,680 --> 00:06:13,160 Of. 97 00:06:15,510 --> 00:06:18,930 So we'll create three different containers within one container. 98 00:06:19,110 --> 00:06:23,910 So or we will create three different divisions within one container. 99 00:06:23,910 --> 00:06:25,980 So I will just write main page. 100 00:06:26,250 --> 00:06:26,910 Okay. 101 00:06:35,680 --> 00:06:37,810 And over here I will just write. 102 00:06:42,230 --> 00:06:43,400 Okay. 103 00:06:43,400 --> 00:06:45,710 I think it's not working over here. 104 00:06:49,210 --> 00:06:52,750 I try to add a shortcut in PyCharm, but it's not working. 105 00:06:52,750 --> 00:06:56,470 Although it works in, uh, very well in Visual Studio. 106 00:06:57,630 --> 00:07:00,180 Okay, so I will just toss. 107 00:07:02,600 --> 00:07:03,800 The main page. 108 00:07:07,560 --> 00:07:09,210 Let's try it again. 109 00:07:12,630 --> 00:07:14,580 Or it's not working over here. 110 00:07:15,700 --> 00:07:17,320 It works on Visual Studio. 111 00:07:17,320 --> 00:07:20,020 I don't know why it's not working over here. 112 00:07:32,100 --> 00:07:33,900 So we have created the main page. 113 00:07:33,900 --> 00:07:35,730 We have created a sideline. 114 00:07:36,360 --> 00:07:38,880 Uh, next we need to create a sidebar. 115 00:07:39,480 --> 00:07:42,360 And then we also create a right panel over here. 116 00:08:05,180 --> 00:08:10,280 So we have our sideline sidebar, and the third container will be the. 117 00:08:11,700 --> 00:08:13,650 Uh, will be the right banner. 118 00:08:20,410 --> 00:08:22,570 So I will just write over here. 119 00:08:32,380 --> 00:08:34,960 So we have created three different containers. 120 00:08:34,960 --> 00:08:37,600 So let's see how it looks like. 121 00:08:41,910 --> 00:08:43,320 So now you can see. 122 00:08:43,320 --> 00:08:45,600 We can't see any effect over here. 123 00:08:45,990 --> 00:08:46,830 Okay. 124 00:08:46,860 --> 00:08:49,860 So like we don't see any impact over here correctly. 125 00:08:51,310 --> 00:08:51,880 Well. 126 00:08:51,880 --> 00:08:53,770 So let's run this. 127 00:08:54,840 --> 00:08:57,270 Python flask app.py file first. 128 00:09:32,330 --> 00:09:35,630 So this might take a few seconds. 129 00:09:46,950 --> 00:09:47,370 Okay. 130 00:09:47,370 --> 00:09:48,810 So there is an issue over here. 131 00:09:48,810 --> 00:09:50,340 Let's fix this up first. 132 00:09:55,690 --> 00:09:56,020 So. 133 00:10:02,050 --> 00:10:03,940 I think it will be a sort of. 134 00:10:05,320 --> 00:10:05,560 Okay. 135 00:10:05,560 --> 00:10:07,870 So now you can see over here it's currently empty. 136 00:10:07,870 --> 00:10:13,630 So I will just go over here and inside this style dot CSS file. 137 00:10:13,630 --> 00:10:17,680 And we will write some CSS code so we can see some results. 138 00:10:17,680 --> 00:10:20,620 Or we can see three different containers on our HTML page. 139 00:10:43,570 --> 00:10:47,110 So whatever we write over here will affect the complete page. 140 00:10:53,650 --> 00:10:59,320 So margin is zero and box sizing will be. 141 00:11:02,420 --> 00:11:03,080 For the. 142 00:11:06,980 --> 00:11:08,960 Through the body color will be. 143 00:11:22,010 --> 00:11:25,610 Okay, so let's see if it impacts anything. 144 00:11:26,590 --> 00:11:30,400 How can also you can see that we can see the red color in the background. 145 00:11:30,790 --> 00:11:33,760 Uh, but this is not what I am looking for. 146 00:11:34,960 --> 00:11:35,260 Okay. 147 00:11:35,260 --> 00:11:37,150 So we can change it to white. 148 00:11:37,150 --> 00:11:41,770 But you can see that by writing some CSS code we can see the effect on our. 149 00:11:43,470 --> 00:11:44,490 Application. 150 00:11:45,490 --> 00:11:47,920 So now you can see over here. 151 00:11:49,160 --> 00:11:51,710 We can create a main page. 152 00:11:55,030 --> 00:11:57,970 Here you can see that we have written dot main page. 153 00:12:02,710 --> 00:12:05,650 For the height of this main page will be. 154 00:12:08,790 --> 00:12:11,310 100% of the complete viewport height. 155 00:12:11,970 --> 00:12:12,570 Okay. 156 00:12:12,570 --> 00:12:14,070 And we'll set. 157 00:12:16,070 --> 00:12:17,180 Display as Plex. 158 00:12:17,180 --> 00:12:17,840 So. 159 00:12:20,440 --> 00:12:24,430 So we have set the property of our parent element as flex. 160 00:12:24,580 --> 00:12:25,360 Okay. 161 00:12:30,710 --> 00:12:37,340 So when the parent complex uh, flex, then the, uh, boxes or containers inside them can be easily 162 00:12:37,340 --> 00:12:37,880 managed. 163 00:12:37,880 --> 00:12:39,470 So we have set up. 164 00:12:39,470 --> 00:12:42,800 So now you can see this main page is our parent box. 165 00:12:43,160 --> 00:12:45,980 Or so we have set up parent box property as well. 166 00:12:45,980 --> 00:12:50,510 So we can easily manage the boxes inside it or contained containers inside it. 167 00:12:50,510 --> 00:12:54,470 Like we have three different containers inside the main page sideline sidebar right panel. 168 00:13:04,550 --> 00:13:07,490 So now next we will write for the sideline. 169 00:13:11,770 --> 00:13:14,020 Obvious.i dot side dash line. 170 00:13:14,020 --> 00:13:14,770 Over here. 171 00:13:18,920 --> 00:13:22,280 And we will just set the height as. 172 00:13:24,320 --> 00:13:25,220 100%. 173 00:13:25,220 --> 00:13:26,090 Over here. 174 00:13:30,250 --> 00:13:31,300 That will be. 175 00:13:34,040 --> 00:13:35,360 On 25 weeks. 176 00:13:36,170 --> 00:13:41,120 So we are just setting, uh, the width, uh, size of the width as fixed as 20 px. 177 00:13:41,390 --> 00:13:46,340 So if we just change the size of the application, the width will remain the same because we have set 178 00:13:46,340 --> 00:13:47,690 it 25 x. 179 00:13:47,930 --> 00:13:52,310 Uh, but if you, if we change the weight to 2,015%. 180 00:13:52,310 --> 00:13:57,020 So when we change the size of the application, like, uh, zoom down or zoom up. 181 00:13:57,020 --> 00:13:59,030 So the weight will also change. 182 00:14:03,110 --> 00:14:06,140 And now we'll add the background color over here. 183 00:14:06,140 --> 00:14:08,120 Background color. 184 00:14:12,000 --> 00:14:13,980 Something light. 185 00:14:15,680 --> 00:14:19,490 I have written a few names of the colors, I will just add it manually. 186 00:14:22,920 --> 00:14:26,340 Similarly will do for the sidebar over here as well. 187 00:14:39,460 --> 00:14:42,970 We will make the background color as. 188 00:14:45,030 --> 00:14:47,430 So I will just add the hex value for the color. 189 00:14:53,650 --> 00:14:55,510 The height will be 100%. 190 00:14:58,490 --> 00:15:04,550 Uh, weight will be, uh, 15% of the complete application. 191 00:15:13,770 --> 00:15:15,960 And then we have for the right panel. 192 00:15:29,960 --> 00:15:31,760 We write write dash panel. 193 00:15:43,150 --> 00:15:48,490 Well, we will keep the bright panel color as, uh, okay, we can just set the color as. 194 00:15:49,610 --> 00:15:50,000 Uh. 195 00:15:51,500 --> 00:15:53,180 Between or now. 196 00:15:54,970 --> 00:15:55,540 For. 197 00:15:56,580 --> 00:15:58,980 Let's set this as royal. 198 00:16:09,600 --> 00:16:12,270 The height will be 100% of the remaining height. 199 00:16:14,070 --> 00:16:15,270 Robert will be. 200 00:16:19,630 --> 00:16:21,820 Uh, the 100% of the remaining bit. 201 00:16:21,850 --> 00:16:23,020 Not for the height. 202 00:16:24,270 --> 00:16:25,080 This all? 203 00:16:26,830 --> 00:16:28,390 Let's see how it does. 204 00:16:28,570 --> 00:16:29,050 Let's. 205 00:16:31,060 --> 00:16:31,690 Okay. 206 00:16:31,690 --> 00:16:34,210 So now you can see here we have our sidebar. 207 00:16:34,360 --> 00:16:35,560 This is the side. 208 00:16:35,740 --> 00:16:36,700 This is a sideline. 209 00:16:36,700 --> 00:16:37,450 This is a sidebar. 210 00:16:37,450 --> 00:16:41,320 And this is the uh right panel which we have over here. 211 00:16:43,920 --> 00:16:51,600 So now you can see over here, but let me just change it to orange. 212 00:16:53,620 --> 00:16:55,930 And so people just refresh this up now. 213 00:16:55,960 --> 00:16:56,230 Okay. 214 00:16:56,230 --> 00:16:58,870 So now you can see this is our sideline sidebar. 215 00:16:58,870 --> 00:17:00,550 And this is our right panel. 216 00:17:00,580 --> 00:17:01,360 Okay. 217 00:17:01,720 --> 00:17:04,660 So we are good to go for now. 218 00:17:04,660 --> 00:17:07,090 And let's make it to again light slate you. 219 00:17:11,340 --> 00:17:14,670 Now I will add different icons into my sidebar. 220 00:17:14,670 --> 00:17:16,260 So let's go ahead with this. 221 00:17:19,090 --> 00:17:22,120 Now we will be adding different icons in the sidebar. 222 00:17:22,120 --> 00:17:28,690 To add different icons, you can simply go to Fonts.google.com icons and you can. 223 00:17:28,690 --> 00:17:34,390 Here you can find different icons like home menu, close setting, done favorite add. 224 00:17:34,390 --> 00:17:41,680 So if you want to add different these icons into your HTML page, then you can go to Developers.google.com 225 00:17:41,680 --> 00:17:43,960 Dafont docs, material icons. 226 00:17:43,960 --> 00:17:52,180 And here you can see the setup method, how you can use this Google uh fonts uh, in in your HTML page. 227 00:17:52,180 --> 00:17:54,340 So here you can see all the details over here. 228 00:17:54,340 --> 00:17:56,800 So we'll just copy this link from here. 229 00:17:57,610 --> 00:18:03,520 And you can find all the details as well like how you can use these icons as well. 230 00:18:03,520 --> 00:18:05,920 So let's get started with this up. 231 00:18:07,250 --> 00:18:09,770 So I will just go over here. 232 00:18:15,980 --> 00:18:19,580 For light add material icons. 233 00:18:20,980 --> 00:18:21,640 Okay. 234 00:18:29,900 --> 00:18:31,970 Provided all this link over here. 235 00:18:31,970 --> 00:18:37,490 Now we will go into the sidebar and we will be adding different icons. 236 00:18:37,610 --> 00:18:39,650 Okay so I will just write span. 237 00:18:42,640 --> 00:18:42,910 Okay. 238 00:18:49,810 --> 00:18:54,610 Then I will be writing over here I dot material. 239 00:18:55,930 --> 00:19:00,400 I think this will not also work over here. 240 00:19:11,210 --> 00:19:16,340 Loss is equal to tr dash icons. 241 00:19:19,930 --> 00:19:24,820 And we can go over here and we can pick any of the icon. 242 00:19:25,760 --> 00:19:29,300 Uh, let me just write some code icon. 243 00:19:40,670 --> 00:19:44,180 So I will be using this icon palette over here. 244 00:19:45,590 --> 00:19:46,610 Okay. 245 00:19:47,000 --> 00:19:48,200 And. 246 00:19:50,070 --> 00:19:54,930 Okay, so let's see if we are able to add this icon over here or not. 247 00:19:55,810 --> 00:19:56,050 Okay. 248 00:19:56,050 --> 00:19:59,860 So now you can see that we can you can find this icon over here. 249 00:19:59,860 --> 00:20:00,790 So that's good. 250 00:20:00,790 --> 00:20:03,160 Uh, let's add the other icons as well. 251 00:20:19,150 --> 00:20:21,340 National icons. 252 00:20:24,470 --> 00:20:29,000 So in this way you can also search for different icons and add them. 253 00:20:29,030 --> 00:20:31,640 So I'm adding adding all these icons. 254 00:20:32,600 --> 00:20:37,280 Uh, plus, we can also need to add an upload button or an play button as well. 255 00:20:37,280 --> 00:20:39,470 So let's add those icons as well. 256 00:20:41,540 --> 00:20:44,180 So just copy all these links from here. 257 00:20:53,100 --> 00:20:55,170 So here we have the file upload. 258 00:21:03,220 --> 00:21:05,320 Then we have the play arrow. 259 00:21:09,330 --> 00:21:09,480 And. 260 00:21:11,250 --> 00:21:13,230 So then we have the. 261 00:21:16,200 --> 00:21:17,550 LA own icon. 262 00:21:29,890 --> 00:21:31,810 Then we have the great. 263 00:21:33,610 --> 00:21:34,540 Video game. 264 00:21:35,110 --> 00:21:38,230 So I've added all these icons over here. 265 00:21:38,230 --> 00:21:43,690 Now you can find if I just refresh this up, you can find all these icons, but you can see that they 266 00:21:43,690 --> 00:21:48,490 are a bit horizontal and this is not what we want. 267 00:21:48,910 --> 00:21:49,300 Okay. 268 00:21:49,300 --> 00:21:53,020 So let's make a few changes. 269 00:21:53,500 --> 00:21:55,840 So we'll just go to our sidebar. 270 00:21:57,410 --> 00:21:59,360 And we will just right over here. 271 00:21:59,540 --> 00:21:59,990 Display. 272 00:21:59,990 --> 00:22:00,890 Flex. 273 00:22:01,460 --> 00:22:01,910 Flex. 274 00:22:01,910 --> 00:22:02,270 Dash. 275 00:22:02,270 --> 00:22:03,530 Direction. 276 00:22:04,530 --> 00:22:06,480 Thankfully column. 277 00:22:09,100 --> 00:22:10,030 Okay. 278 00:22:10,030 --> 00:22:10,990 And let's see. 279 00:22:12,400 --> 00:22:12,850 Okay. 280 00:22:12,850 --> 00:22:15,340 So now you can see it looks pretty fine now. 281 00:22:23,160 --> 00:22:23,370 Okay. 282 00:22:23,370 --> 00:22:26,850 But, uh, let's, uh, make improve some things. 283 00:22:48,960 --> 00:22:49,860 So if I just write. 284 00:22:49,860 --> 00:22:52,410 So now you can see there looks pretty good now. 285 00:22:52,410 --> 00:22:55,080 But now they are, um, yeah. 286 00:22:55,080 --> 00:22:56,970 Just uh, towards the edges. 287 00:22:56,970 --> 00:22:58,650 So we need to stop this. 288 00:22:59,470 --> 00:23:01,750 So for this I will just write. 289 00:23:04,000 --> 00:23:05,380 Adding dash. 290 00:23:07,360 --> 00:23:10,930 Of HTTP and padding. 291 00:23:10,930 --> 00:23:13,090 Dash bottom. 292 00:23:15,190 --> 00:23:16,120 Empty space. 293 00:23:16,720 --> 00:23:17,110 Okay. 294 00:23:18,830 --> 00:23:21,530 So now you can see it looks fine. 295 00:23:21,530 --> 00:23:23,300 But now for the bottom. 296 00:23:23,300 --> 00:23:25,730 I don't know what is the issue. 297 00:23:27,060 --> 00:23:28,950 Uh, okay. 298 00:23:28,950 --> 00:23:31,260 So the spellings are not correct for the spelling. 299 00:23:32,400 --> 00:23:34,830 Uh, hopefully now this will fix up this issue. 300 00:23:37,350 --> 00:23:37,650 Okay. 301 00:23:37,650 --> 00:23:39,150 So now you can see over here. 302 00:23:39,150 --> 00:23:40,560 Now it looks pretty fine. 303 00:23:45,420 --> 00:23:49,230 Okay, so we are very good over here. 304 00:23:56,860 --> 00:24:00,820 Uh, we can just change the color of the right white over here. 305 00:24:05,640 --> 00:24:06,450 Okay. 306 00:24:09,040 --> 00:24:17,020 Uh, plus, uh, we need to have add some styles, like I want to increase the size of these icons like 307 00:24:17,020 --> 00:24:18,850 they are very small for now. 308 00:24:18,970 --> 00:24:22,300 So to do this, what I will do over here. 309 00:24:29,940 --> 00:24:31,590 I will dial. 310 00:24:34,560 --> 00:24:36,390 Born that size. 311 00:24:39,270 --> 00:24:40,380 36, pp. 312 00:24:43,470 --> 00:24:45,570 Uh, color will be white. 313 00:24:48,690 --> 00:24:49,380 Okay. 314 00:24:49,860 --> 00:24:52,500 So let's see if there is any effect over here. 315 00:24:52,500 --> 00:24:57,060 So now you can see the font has been increased for this icon okay. 316 00:24:57,060 --> 00:24:59,550 We will do the same for the others as well. 317 00:25:00,710 --> 00:25:01,250 Uh. 318 00:25:03,670 --> 00:25:06,040 So we can simply copy this up from here. 319 00:25:06,040 --> 00:25:06,760 And we can. 320 00:25:18,330 --> 00:25:23,490 So now you can see the size of all the icons are increased, but you can see they have disappeared. 321 00:25:23,580 --> 00:25:26,340 So let's create a circle around them. 322 00:25:36,820 --> 00:25:38,500 So we will just write over here. 323 00:25:38,500 --> 00:25:42,190 Span class is equal to circle. 324 00:25:42,190 --> 00:25:45,430 So let's add this up over all over here. 325 00:25:57,060 --> 00:25:59,880 And I will go to the CSS file over here. 326 00:26:06,290 --> 00:26:08,960 And we are making all these changes in the sidebar. 327 00:26:08,960 --> 00:26:12,530 So let's add down the code over here. 328 00:26:25,980 --> 00:26:30,180 The background color will be gray. 329 00:26:32,650 --> 00:26:33,970 A height will be. 330 00:26:36,030 --> 00:26:37,710 There will be five x. 331 00:26:39,520 --> 00:26:42,910 The weight will be 75 x. 332 00:26:44,900 --> 00:26:45,440 Hello. 333 00:26:53,310 --> 00:26:53,580 Next. 334 00:26:53,580 --> 00:26:54,390 Refresh this up. 335 00:26:54,390 --> 00:27:01,170 So now you can see that, uh, they look good now, but, uh, let's make them a bit circle. 336 00:27:01,170 --> 00:27:04,950 So we write border dash radius. 337 00:27:09,620 --> 00:27:10,490 Three person. 338 00:27:14,180 --> 00:27:17,060 Okay, so now you can see they are not in center. 339 00:27:17,060 --> 00:27:18,680 So let's solve this issue. 340 00:27:21,940 --> 00:27:22,630 Display. 341 00:27:22,630 --> 00:27:23,710 Flex. 342 00:27:27,030 --> 00:27:29,400 Justify dash content. 343 00:27:31,890 --> 00:27:32,670 Center. 344 00:27:35,930 --> 00:27:37,250 The lighting. 345 00:27:37,250 --> 00:27:38,390 This will fix the issue. 346 00:27:39,660 --> 00:27:42,720 Um, but they are not saying that currently as well. 347 00:27:42,810 --> 00:27:45,390 So we just need to write for the. 348 00:27:47,480 --> 00:27:47,750 The. 349 00:27:53,860 --> 00:27:54,310 Welcome. 350 00:27:54,670 --> 00:27:57,490 So now there looks pretty good and they are now in the center. 351 00:27:57,490 --> 00:27:58,300 That's fine. 352 00:28:08,320 --> 00:28:14,920 Uh, one thing I want to do is I want to change this play button and video button to blue as well. 353 00:28:15,310 --> 00:28:17,800 The background should be blue over here. 354 00:28:19,030 --> 00:28:22,390 So what we can do over here is I will just. 355 00:28:22,390 --> 00:28:23,020 Right. 356 00:28:23,940 --> 00:28:25,050 Two dash. 357 00:28:28,840 --> 00:28:29,380 Circle. 358 00:28:33,230 --> 00:28:37,790 And let's make the back ground. 359 00:28:38,720 --> 00:28:39,020 Uh. 360 00:29:00,160 --> 00:29:00,610 Okay. 361 00:29:00,730 --> 00:29:06,640 And we were using this blue circle over here. 362 00:29:19,590 --> 00:29:21,360 Okay, so that's pretty fine. 363 00:29:21,870 --> 00:29:24,450 Uh, I think we have these changes now. 364 00:29:24,450 --> 00:29:24,750 Okay. 365 00:29:24,750 --> 00:29:25,620 So that's good. 366 00:29:25,620 --> 00:29:30,150 So now, plus when I hover over it I want to change the color as well. 367 00:29:32,210 --> 00:29:36,620 So now you can see we have this class circle. 368 00:29:36,620 --> 00:29:38,990 So when I hover over it. 369 00:29:45,830 --> 00:29:50,090 And a background color should be yellow. 370 00:29:56,650 --> 00:29:58,570 And when I click over it. 371 00:30:03,770 --> 00:30:05,840 Background color should be. 372 00:30:07,210 --> 00:30:09,220 I mean, so that's pretty funny. 373 00:30:10,300 --> 00:30:12,550 Because now you can see when I hover it's yellow. 374 00:30:12,550 --> 00:30:14,170 And when I click on it's green. 375 00:30:14,710 --> 00:30:16,840 So that's look pretty amazing. 376 00:30:23,160 --> 00:30:30,630 So what we have done for now is, uh, we have created our initial layout, like you can see over here. 377 00:30:31,500 --> 00:30:32,310 Okay. 378 00:30:36,210 --> 00:30:39,240 We'll just change the color of the slide line to light slate gray. 379 00:30:39,240 --> 00:30:43,080 And now we'll add a box shadow in the sidebar. 380 00:30:48,530 --> 00:30:51,650 Now to add the box shadow I will just write box shadow. 381 00:30:53,130 --> 00:30:53,610 Okay. 382 00:30:53,610 --> 00:30:55,440 And here I will pass the values. 383 00:30:55,440 --> 00:30:57,630 You can check the documentation for more. 384 00:31:03,700 --> 00:31:06,340 And here I will just pass the RGB color of the shadow. 385 00:31:15,570 --> 00:31:18,870 So let's see if the box shadow can be seen. 386 00:31:18,870 --> 00:31:19,290 Okay. 387 00:31:19,290 --> 00:31:20,370 No, there is no box. 388 00:31:20,370 --> 00:31:21,660 Box shadow over here. 389 00:31:22,380 --> 00:31:24,660 Uh, let's see if we have made any mistake. 390 00:31:28,390 --> 00:31:30,220 Things look pretty fine for now. 391 00:31:34,280 --> 00:31:37,550 I think, uh, I know. 392 00:31:38,780 --> 00:31:41,480 Okay, so if I just remove this from here. 393 00:31:42,860 --> 00:31:43,940 Okay, so now you can see. 394 00:31:43,940 --> 00:31:45,620 We can see the box shadow for now. 395 00:31:49,540 --> 00:31:50,560 Okay, so that's visible. 396 00:31:50,560 --> 00:31:51,940 I've just removed the background color. 397 00:31:52,750 --> 00:31:53,260 Okay. 398 00:31:53,260 --> 00:31:55,600 We are done with the box shadow okay. 399 00:31:55,600 --> 00:31:58,600 And then now we just need to go towards the right panel. 400 00:31:58,600 --> 00:32:02,560 So in the right panel we will have the header and the tablet area. 401 00:32:15,840 --> 00:32:17,850 So over here, I will just write. 402 00:32:35,330 --> 00:32:38,270 So over here I will be writing. 403 00:32:42,850 --> 00:32:44,470 So I will give. 404 00:32:58,340 --> 00:32:58,820 At the. 405 00:33:01,570 --> 00:33:02,020 Okay. 406 00:33:02,020 --> 00:33:05,050 And next we will have as well. 407 00:33:05,050 --> 00:33:05,740 Dave. 408 00:33:08,450 --> 00:33:11,360 And class is equal to. 409 00:33:13,580 --> 00:33:15,800 Tabular dash container. 410 00:33:21,530 --> 00:33:25,520 Okay, so, uh, in the header, we need to add few things. 411 00:33:25,520 --> 00:33:29,360 Uh, let me first go to the style dot CSS over here. 412 00:33:47,050 --> 00:33:49,930 So the background color of the header will be. 413 00:33:51,690 --> 00:33:52,860 Royal blue. 414 00:33:55,470 --> 00:33:59,340 The height will be of the header will be 75 x. 415 00:34:00,870 --> 00:34:01,560 Okay. 416 00:34:03,640 --> 00:34:04,150 Okay. 417 00:34:04,150 --> 00:34:07,870 And later on, I will just add a tablet container over here. 418 00:34:08,410 --> 00:34:13,030 Uh, you can skip for the tablet container, but let's see how our header. 419 00:34:13,030 --> 00:34:14,710 So now you can see here is our header. 420 00:34:14,710 --> 00:34:16,000 And it's pretty fine. 421 00:34:16,900 --> 00:34:18,070 Okay. 422 00:34:27,920 --> 00:34:28,550 Oh, no. 423 00:34:28,550 --> 00:34:32,480 Let's add the required things into the header first. 424 00:34:42,570 --> 00:34:45,990 So here we have the empty container. 425 00:34:45,990 --> 00:34:47,160 This is the class name. 426 00:34:47,160 --> 00:34:48,840 You can write any offer here. 427 00:34:50,080 --> 00:34:50,710 Okay. 428 00:34:50,710 --> 00:34:53,110 And then we will add, uh. 429 00:34:55,730 --> 00:34:56,450 Okay. 430 00:34:56,930 --> 00:34:57,170 Okay. 431 00:35:05,570 --> 00:35:08,210 So this is the title we are writing the header. 432 00:35:26,020 --> 00:35:27,670 On in the no go. 433 00:35:27,700 --> 00:35:29,050 I will be adding this. 434 00:35:59,810 --> 00:36:03,530 And the file name will be and your logo.png. 435 00:36:17,510 --> 00:36:18,500 So let's refresh. 436 00:36:18,500 --> 00:36:22,220 So now you can see here we have title but we are not in the correct position. 437 00:36:22,220 --> 00:36:26,150 Plus the size is also very different over here. 438 00:36:26,150 --> 00:36:27,710 So let's correct this up. 439 00:36:29,180 --> 00:36:31,490 So we want the width to be. 440 00:36:33,820 --> 00:36:35,410 90. 441 00:36:39,430 --> 00:36:42,370 And the height will be 30. 442 00:36:48,300 --> 00:36:51,510 So now you can see it, but they are not in the correct position. 443 00:36:51,510 --> 00:36:54,150 So let's fix this up in the style.css file. 444 00:37:01,140 --> 00:37:03,120 So we'll just write over here. 445 00:37:05,780 --> 00:37:06,680 Display. 446 00:37:07,220 --> 00:37:08,120 Flex. 447 00:37:12,280 --> 00:37:12,970 Okay. 448 00:37:15,300 --> 00:37:19,140 Well, we don't want into the column, so let's write like that. 449 00:37:19,290 --> 00:37:19,950 Action. 450 00:37:20,980 --> 00:37:21,580 Oh, no. 451 00:37:23,950 --> 00:37:26,680 Justify Dash content. 452 00:37:27,980 --> 00:37:29,750 Space between. 453 00:37:37,150 --> 00:37:39,850 So let's see the impact of the. 454 00:37:42,740 --> 00:37:44,870 We want these items in the center. 455 00:37:59,250 --> 00:38:01,950 Let us add this stuff over here then. 456 00:38:03,310 --> 00:38:05,170 You don't need to write this. 457 00:38:19,380 --> 00:38:20,880 Oh, no, this is wrong. 458 00:38:20,910 --> 00:38:21,720 Many years. 459 00:38:24,060 --> 00:38:24,870 Okay. 460 00:38:24,870 --> 00:38:25,530 Let's see. 461 00:38:28,550 --> 00:38:30,650 Um, where I'm meeting. 462 00:38:30,650 --> 00:38:31,550 Mistake. 463 00:38:43,580 --> 00:38:46,760 Um, there is a mistake, but let's see where we are. 464 00:38:59,470 --> 00:38:59,770 A. 465 00:39:01,260 --> 00:39:01,890 Okay. 466 00:39:03,380 --> 00:39:03,650 Oh. 467 00:39:18,330 --> 00:39:19,050 Okay. 468 00:39:19,050 --> 00:39:21,600 I think we don't require this. 469 00:39:23,200 --> 00:39:25,450 Okay, so now it's pretty good now. 470 00:39:32,280 --> 00:39:35,310 So we can also add a box shadow here. 471 00:39:44,330 --> 00:39:47,750 Uh, we can keep the same values which we have written above. 472 00:39:50,270 --> 00:39:50,900 Okay. 473 00:39:53,830 --> 00:39:57,820 And now you can see that we can change the font for this as well. 474 00:39:57,970 --> 00:40:00,820 So we can also add fonts. 475 00:40:01,150 --> 00:40:08,890 So if I just go over here and go to fonts from here, if I just open this font from here. 476 00:40:21,150 --> 00:40:21,510 Mhm. 477 00:40:23,560 --> 00:40:26,620 So we can select any of the font from here. 478 00:40:31,420 --> 00:40:31,840 Okay. 479 00:40:37,080 --> 00:40:41,220 So let's use this font up from here okay. 480 00:40:41,220 --> 00:40:42,870 And get font. 481 00:40:42,870 --> 00:40:44,640 Get embed code from here. 482 00:40:44,640 --> 00:40:47,220 And just copy this code from here. 483 00:40:48,470 --> 00:40:49,220 And. 484 00:40:50,240 --> 00:41:00,980 Go back towards this PyCharm notebook from here and just write over here and wants. 485 00:41:05,030 --> 00:41:05,750 Okay. 486 00:41:10,640 --> 00:41:12,440 And just right over here. 487 00:41:15,920 --> 00:41:16,160 And. 488 00:41:33,270 --> 00:41:36,600 And just so now we. 489 00:41:41,060 --> 00:41:42,590 Okay, so we have added. 490 00:41:43,730 --> 00:41:48,530 The link of the font over here, and it's, uh, really working fine. 491 00:41:49,550 --> 00:41:52,370 Okay, so now I will just go over here. 492 00:41:59,670 --> 00:42:01,140 And just right over here. 493 00:42:01,960 --> 00:42:05,740 So we have the font family as Roboto. 494 00:42:23,360 --> 00:42:27,530 And if there's not appearing, then it will use the default font. 495 00:42:31,860 --> 00:42:34,380 The color of the text should be white. 496 00:42:35,740 --> 00:42:39,130 And the font size should be. 497 00:42:40,640 --> 00:42:41,840 1.5. 498 00:42:49,640 --> 00:42:52,520 Okay, so now you can see the color is white. 499 00:42:53,360 --> 00:42:53,900 Okay. 500 00:42:53,900 --> 00:42:56,390 There is a shoe somewhere in the corner. 501 00:42:58,650 --> 00:42:59,040 Thank. 502 00:43:05,170 --> 00:43:05,680 Yeah. 503 00:43:06,740 --> 00:43:08,510 Just remove this up from here. 504 00:43:10,830 --> 00:43:13,080 Now the spacing issue will be definitely fixed. 505 00:43:13,110 --> 00:43:16,410 Now you can see that it's going very edge to the corner. 506 00:43:16,410 --> 00:43:18,420 So let's pick this up as well. 507 00:43:23,350 --> 00:43:26,020 So there we have Dot. 508 00:43:44,640 --> 00:43:46,110 Okay, so that's pretty good. 509 00:43:46,110 --> 00:43:46,980 Plus. 510 00:43:47,820 --> 00:43:49,920 We can fix this up as well. 511 00:43:51,890 --> 00:43:52,160 The. 512 00:44:04,660 --> 00:44:06,610 So now this will fix up the issue. 513 00:44:06,640 --> 00:44:09,310 Now you can see that quite good position now. 514 00:44:09,310 --> 00:44:12,730 So now below we need to add the tablet image. 515 00:44:12,730 --> 00:44:18,160 And inside this image we will uh display our input videos or output images. 516 00:44:18,160 --> 00:44:19,330 Output videos. 517 00:44:23,620 --> 00:44:26,380 So first I will just write down the code over here. 518 00:44:46,760 --> 00:44:47,300 Occurred. 519 00:44:52,230 --> 00:44:54,180 And here I will pass down the URL. 520 00:44:54,240 --> 00:44:55,410 So I will just write. 521 00:45:01,430 --> 00:45:02,840 You are in for. 522 00:45:13,660 --> 00:45:15,040 File name is equal to. 523 00:45:17,640 --> 00:45:17,910 Yeah. 524 00:45:23,470 --> 00:45:26,410 Okay, so that looks pretty good. 525 00:45:26,410 --> 00:45:28,390 And let's see whether we have this. 526 00:45:29,050 --> 00:45:29,380 Okay. 527 00:45:29,380 --> 00:45:32,680 No, but it's not in the correct order like you can see. 528 00:45:32,740 --> 00:45:35,230 So let's fix this issue up over here. 529 00:45:40,590 --> 00:45:42,840 So we have this tablet container. 530 00:45:51,860 --> 00:45:55,130 So the height of the tablet container will be. 531 00:45:56,110 --> 00:45:57,370 Hundred percent. 532 00:46:00,900 --> 00:46:01,410 Okay. 533 00:46:07,480 --> 00:46:09,490 Display will be flex. 534 00:46:13,090 --> 00:46:13,540 It will. 535 00:46:39,030 --> 00:46:42,120 Okay, so let's fix this up as well. 536 00:46:42,120 --> 00:46:42,930 So. 537 00:46:45,580 --> 00:46:48,070 Um, let's make this position absolute. 538 00:47:27,090 --> 00:47:29,550 Sorry, I forgot to add the tablet image. 539 00:47:30,980 --> 00:47:32,900 I'll pretend the height over here. 540 00:47:36,320 --> 00:47:38,870 And the wait will be 800. 541 00:47:39,990 --> 00:47:41,760 And the height will be. 542 00:47:43,040 --> 00:47:43,760 600. 543 00:47:47,500 --> 00:47:48,940 So now you can see now. 544 00:47:49,930 --> 00:47:53,560 Okay, a few things still left. 545 00:47:56,780 --> 00:47:57,200 And. 546 00:48:05,560 --> 00:48:06,970 I made one mistake. 547 00:48:06,970 --> 00:48:10,600 There should be a semicolon and hopefully this will fix it. 548 00:48:10,780 --> 00:48:12,100 Okay, so that's fixed. 549 00:48:12,250 --> 00:48:15,910 So now you can see we have designed this complete web app layout. 550 00:48:15,940 --> 00:48:18,160 I just need to add one thing over here. 551 00:48:23,530 --> 00:48:24,190 Okay. 552 00:48:24,190 --> 00:48:24,790 So. 553 00:48:26,770 --> 00:48:33,130 Uh, the other thing which we need to add over here is, uh, we need to display. 554 00:48:34,220 --> 00:48:34,850 Our. 555 00:48:36,700 --> 00:48:37,150 Output. 556 00:48:37,150 --> 00:48:37,480 Image. 557 00:48:37,480 --> 00:48:38,260 Video. 558 00:48:40,840 --> 00:48:42,280 It is equal to. 559 00:48:46,480 --> 00:48:46,660 He. 560 00:49:20,150 --> 00:49:24,530 So we have worked 740 and high as 540. 561 00:49:25,900 --> 00:49:26,230 Okay. 562 00:49:26,230 --> 00:49:30,850 So here we have the directions and it will be shown side over here. 563 00:49:32,010 --> 00:49:32,850 Okay. 564 00:49:33,880 --> 00:49:34,120 Yeah. 565 00:49:34,120 --> 00:49:34,900 That's correct. 566 00:49:34,900 --> 00:49:35,950 I made a mistake. 567 00:49:35,950 --> 00:49:38,290 There should be detections. 568 00:49:41,390 --> 00:49:43,040 Okay, so now it's fine. 569 00:49:53,600 --> 00:49:57,380 Okay, so in this way we have designed this complete web app layout. 570 00:50:02,420 --> 00:50:04,640 Okay, so that's all from this tutorial. 571 00:50:04,640 --> 00:50:10,160 I just want to explain you how you can create your own web app layout, like I've seen in this video 572 00:50:10,160 --> 00:50:11,690 that that's all from this video. 573 00:50:11,690 --> 00:50:12,320 Thanks for watching.