Aurora-(1)로그인 UI화면 구현[클라이언트]

# pynecone 라이브러리를 가져옵니다.
import pynecone as pc

# 입력 필드를 만드는 함수를 정의합니다.
def get_input_field(icon: str, placeholder: str, _type: str):
    return pc.container(
        # 수평으로 정렬된 아이콘과 입력 필드를 포함하는 컨테이너를 생성합니다.
        pc.hstack(
            pc.icon(
                tag=icon,
                color='green',
                fontSize='12px',
            ),
            pc.input(
                placeholder=placeholder,
                border='0px',
                focus_border_color='black',
                fontWeight='semibold',
                fontSize='13px',
                type=_type,
            ),
        ),
        borderBottom='0.3px solid green',
        width='300px',
        height='43px',
    )

# 웹 페이지의 메인 인덱스 함수를 정의합니다.
def index():
    # 로그인 컨테이너를 만듭니다.
    login_container = pc.container(
        pc.vstack(
            pc.container(height= '75px'),
            pc.container(
                pc.text(
                    'ONESTARGRAM',
                    style= {
                        "fontSize": "25px",
                        "fontWeight": "bolder",
                        "letterSpacing": "5px",
                        "fontFamily": "Georgia, Serif",
                        "background": "-webkit-linear-gradient(-45deg, #fa0000, #f0b46c)",
                        "-webkit-background-clip": "text",
                        "color": "transparent",
                    },
                    center_content =True,
                ),
            ),
        ),
        pc.vstack(
            pc.container(height= '10px'),
            pc.container(
                pc.text(
                    'Start a strong social network service!',
                    style= {
                        "fontSize": "15px",
                        "letterSpacing": "2px",
                        "color": 'black'
                    },
                    center_content =True,
                ),
            ),
            pc.container(
                pc.image(
                    src="favicon.ico",
                    alt="star",
                    style={"width": "100px", "height": "120px"},
                ),
                center_content=True,
            ),
            # 이메일과 비밀번호 입력 필드를 가져옵니다.
            get_input_field('EmailIcon','Email',''),
            get_input_field('LockIcon','PassWord','password'),
            pc.button(
                pc.text(
                    '비밀번호를 잊어버리셨나요?',
                    style = {
                        'fontSize':'12px',
                        'color':'black',
                        'textAlign':'end',
                    },
                ),
                style = {
                    'float':'right',
                },
            ),
            pc.container(height='55px'),
            pc.hstack(
                # "회원가입" 버튼을 만듭니다.
                pc.button(
                    pc.text(
                        '회원가입',
                        style = {
                            'color':'black',
                            'fontSize':'13px',
                            'weight':'bolder',
                        },
                    ),
                    color_scheme='blue',
                ),
                pc.container(width='130px'),
                # "로그인" 버튼을 만듭니다.
                pc.button(
                    pc.text(
                        '로그인',
                        style={
                            'color':'black',
                            'fontSize':'13px',
                            'weight':'bolder',
                            'textAlign':'end',
                        },
                    ),
                    color_scheme='blue',
                )
            ),
        ),
        
        width ='500px',
        height='75vh',
        center_content=True,
        bg = '#ffffff',
        borderRadius='15px',
        boxShadow='-11px 11px 50px #9ecadb'
    )

    # 웹 페이지의 메인 컨테이너를 만듭니다.
    _main = pc.container(
        login_container,
        center_content=True,
        justifyContent='center',
        maxWidth='auto',
        height='100vh',
        bg='#000000',
    )
    
    return _main

# Pynecone 앱을 생성하고 인덱스 페이지를 추가합니다.
app = pc.App()
app.add_page(index)

# 앱을 컴파일합니다.
app.compile()

 

결과화면