Anvil: Web Apps with Nothing but Python Transcripts
Chapter: Rounding out the UI
Lecture: Creating the landing page: Anonymous home
Login or
purchase this course
to watch this video and the rest of the course contents.
0:00
Now there's a few parts of our app that are just kind of unfinished. Like, for example, this. Let's run our app and just see
0:07
what the experience is here if we're not logged in. I think you'll find it to be less satisfying. So, log out. Login looks just totally good.
0:15
But this, not so much, huh? Home anonymous? Yeah. If this was the thing you found when you went to the website to try it out
0:22
to consider creating an account you would go away. So, let's just quickly add some kind of landing page here. So, let's go over.
0:31
And I've got some rebuilt text here. Let's call this "Label Title". Something like that. "Home Anonymous" is not what we want.
0:39
We want to set a few text properties to make it a little bit bigger. So, go down here. Let's actually set, span that out. Set that to be centered.
0:50
And the font size to be 32. And let's actually go and add one of these little icons as well. Let's put a scale. Balance scale.
1:01
There we go because we're tracking stuff you weigh with scales. Things like that. Next up, we want to put an image. It's going to go to the top there.
1:11
Put an image. And let's say we want it about like so. Nice and big. Put that banner. So, here, I have this peaceful image
1:24
I've gotten from a place called Unsplash. www.unsplash.com You get a whole bunch of awesome, free rights free, royalty free big images like this.
1:34
So, go ahead and grab that and we're going to throw that in there. Make it a tad bigger. And let's go ahead and set that to zoom to fill.
1:43
There we go, like that. That's good. We're going to put a little text box in here. We'll call this "Label Pitch" or something like that.
1:52
It's like a sales pitch. Let's set thee font size here to be 18. All right, now let's just see where we are with this so far.
1:59
All right, this looks really good. Maybe that image is a little grainy but it's okay. I've noticed there's nothing else to scroll down to.
2:06
Which is fine, it's okay. But we need some kind of call to action. Right? Let's get a big button right there next. So, we'll call the button "Register"
2:23
but the text will show as "Create A Free Account" like that. And its role is going to be primary. And "Create A Free Account". And does it have a name?
2:34
Yes. So, that's cool. Let me double-click it. First we're going to use our "Sign Up With" form. And then we're going to set the account for our...
2:45
Actually, don't need to do that. I think that should work. Here we go. Maybe we're still going to need some help here. But I think this might work.
2:57
Anyway, we'll see. We might have to do something by setting the account bit. In terms of, you know showing register versus account.
3:05
And login versus logout. And so on. But we got that. But let's just finish out the design of this page here. And I'm going to have a couple of icons.
3:12
So, let's have one other section here. Put this image down below. And actually, I want to have some text in here as well.
3:23
So, I'm going to use a column panel. There we go. Put a little column panel down here. And within that, I'm going to put three more columns.
3:31
One column just goes like that. And let's go ahead and put some stuff into the columns so we don't lose track of what's going on.
3:40
And let's put some text below the image. This looks pretty good. It's a couple of layers so it might get a little tricky with drag and drop
3:48
but let's see what we can do. Notice here it's trying to go to the right of the image but if I go more right that little blue thing drops down.
3:54
Now, it'll go right in that column, the outer column panel which is what I want. There. There we go. And in here, we want an image and we want a label.
4:10
If we can get it to go down in this spot. Perfect. Now, that looks like it's not quite in the right spot. Just put that right over here.
4:22
Yeah. Not always the easiest thing to do but there we go. Pretty close. We need to maybe align these up a little bit better here.
4:30
Okay. Move that over. Maybe a tad bit more. There we go. Are these the same size? Perfect! Okay. Well, that was a lot of drag and drop playing
4:43
but, let's just go ahead and set the text for these. I'm going to do, like, little icons and we're going to give them a nice message.
4:48
We'll say, "Wake up feeling energized" and let's just set that to be bold and center. I want to pick an image here.
5:02
And I got some more cool transparent images. These came from a place called The Noun Project. If you pay for it, also royalty free, like I do.
5:10
If you don't, I think you've got to do attribution. But, got these cool icon-type pictures. So, we're going to put that picture there.
5:17
The next one we're going to pick is this free thing. There you go. And then, third, is going to be that app.
5:28
Like so. And then for the text on these two. All right, there we go. So, let's go ahead and run this and see how our page looks.
5:40
We should be logged out now, I think. Yes, we are. And look at this Fitness works! Get fit by tracking your health! Are you looking to be more healthy?
5:49
It takes time, we get it. But if you see progress, that'll keep you going! And that's where fit works will Get you started!" Or whatever.
5:57
So, here's our cool little icons. And it's going to be our landing page. Obviously we would do more in a real one
6:02
but it's an okay start. We click this. It's going to either let us sign up or Yeah, I guess, just sign up. I guess I'll create another one.
6:20
Use the letter "A" for the password because hey, I'm security conscious. All right. Copy. That's how I remember it. All right. Try and sign up.
6:29
Just take us home. Perfect! And that almost worked but notice "register" and "logged in" is up here. So, let's just quickly fix that.
6:39
And I think the best way to fix it might be over here. So, when we go over here to load component rather Yeah, there's a couple options
6:51
but let's go ahead and just put it over here into load component. I guess we'll say. So, we'll just ask if there is a user.
7:02
Let's go ahead and set the account state. And I forgot Are we passing the user? Yes. This thing again. Okay. If we're doing this in the right order
7:15
we'll be fine over here long as we go home. Yeah, I think this will work. Let's try it one more time.
7:24
Now it's working because we're loading up from start but let's go down here. Click this button. And three@talkpython.fm. So many accounts.
7:36
Totally different password this time. Alright. Sign up should not take us home with the navigation. The navigation will check for the user
7:42
and then trigger that. Well, actually the home form will. Cool. So we saw that change as you would expect. Now, we're in our authenticated home
7:51
but we got to add our first measurement. Perfect. I think this home landing page, when we're logged out.
7:59
It's not perfect but it's going to be what we're going with. It's good enough.