카테고리 없음

스파르타 AI-8기 TIL(1/12)-TeamProject

kimjunki-8 2025. 1. 12. 20:40

오늘 구현한 것.

1. main.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    <nav class="navbar navbar-expand-lg" style="background-color: #28a745; padding: 10px 0;">
        <div class="container-fluid d-flex flex-column align-items-center">
            <!-- 로고와 제목을 가로 정렬 -->
            <div class="d-flex align-items-center">
                <!-- 이미지 -->
                <img src="C:\\Users\\kevinkim\\Downloads\\sparta_logo.png" alt="Logo" style="height: 50px; margin-right: 10px;">
                <!-- 제목 -->
                <p class="fw-bold mb-0" style="font-size: 2rem; color: white;">SPA-Chef</p>
            </div>
            <!-- 네비게이션 링크 -->
            <div class="collapse navbar-collapse mt-3" id="navbarNav">
                <ul class="navbar-nav d-flex flex-row justify-content-center">
                    <li class="nav-item mx-3">
                        <a class="nav-link" href="{% url 'about' %}" style="color: white; transition: background-color 0.3s;">소개</a>
                    </li>
                    <li class="nav-item mx-3">
                        <a class="nav-link" href="{% url 'main' %}" style="color: white; transition: background-color 0.3s;">메인</a>
                    </li>
                </ul>
            </div>
            <!-- 토글 버튼 (모바일용) -->
            <button class="navbar-toggler mt-3" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
        </div>
    </nav>
    <style>
        /* 전체 페이지 설정 */
        body, html {
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100%;
            overflow: hidden;
        }
    
        /* 애니메이션 효과를 줄 배경 */
        body {
            background-image: url('https://mblogthumb-phinf.pstatic.net/MjAyMDEyMTJfMzMg/MDAxNjA3Nzc2MTgwODI3.8SU429uhc5Uhcchl_LgHV72H4IgKfmO5PZu3hbOFFH8g.aWKGB59iknmiEBJXvTmFYpWh4EBMmkk3HwRTDK_ad_cg.JPEG.cutesiwoo/%ED%99%88%ED%8C%8C%ED%8B%B0%EC%9D%8C%EC%8B%9D_%EC%82%AC%EC%A7%84%EB%AA%A8%EC%9D%8C23.JPG?type=w800'); /* 원하는 이미지 URL */
            background-size: cover; /* 이미지가 화면을 꽉 채우도록 설정 */
            background-repeat: repeat-x; /* X축으로 반복 */
            animation: moveLeft 60s linear infinite; /* 애니메이션 적용, 60초로 설정하여 더 부드럽게 이동 */
        }
    
        /* 배경을 왼쪽으로 이동시키는 애니메이션 */
        @keyframes moveLeft {
            0% {
                background-position: 0 0; /* 초기 위치 */
            }
            100% {
                background-position: -100vw 0; /* 이미지가 화면을 넘어가면서 이동 */
            }
        }
    </style>
</head>
<body>
    <div class="container d-flex justify-content-center align-items-center" style="margin-top: 0px; height: 85vh;">
        <div class="card p-4 shadow-lg" style="width: 100%; max-width: 500px;">
            <h2 class="text-center mb-4">회원가입</h2>
            <br>
            <h5 class="text-left mb-4">더 많은 레시피를 만나보세요!</h5>
            <form>
                <!-- Full Name Input -->
                <div class="mb-3">
                    <label for="fullName" class="form-label">사용자명</label>
                    <input type="text" class="form-control" id="fullName" placeholder="사용자명을 입력해주세요" required>
                </div>
                <br>
                <!-- Email Input -->
                <div class="mb-3">
                    <label for="email" class="form-label">이메일</label>
                    <input type="email" class="form-control" id="email" placeholder="이메일을 입력해주세요" required>
                </div>
                <br>
                <!-- Password Input -->
                <div class="mb-3">
                    <label for="password" class="form-label">비밀번호</label>
                    <input type="password" class="form-control" id="password" placeholder="비밀번호를 입력해주세요" required>
                </div>
                <br>
                <!-- Confirm Password Input -->
                <div class="mb-3">
                    <label for="confirmPassword" class="form-label">비밀번호 확인</label>
                    <input type="password" class="form-control" id="confirmPassword" placeholder="다시 비밀번호를 입력해주세요" required>
                </div>
                <!-- Submit Button -->
                <button type="submit" class="btn btn-success w-100">가입하기</button>
            </form>
            <br>
            <button onclick="window.history.back()" class="btn btn-success w-100">뒤로가기</button>
            <hr class="my-4">
            <div class="text-center">
                <p class="mb-0">이미 계정이 있으신가요? <a href="#">로그인하기</a></p>
            </div>
        </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
</body>
</html>

 

2. login.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
        <nav class="navbar navbar-expand-lg" style="background-color: #28a745; padding: 10px 0;">
            <div class="container-fluid d-flex flex-column align-items-center">
                <!-- 로고와 제목을 가로 정렬 -->
                <div class="d-flex align-items-center">
                    <!-- 이미지 -->
                    <img src="C:\\Users\\kevinkim\\Downloads\\sparta_logo.png" alt="Logo" style="height: 50px; margin-right: 10px;">
                    <!-- 제목 -->
                    <p class="fw-bold mb-0" style="font-size: 2rem; color: white;">SPA-Chef</p>
                </div>
                <!-- 네비게이션 링크 -->
                <div class="collapse navbar-collapse mt-3" id="navbarNav">
                    <ul class="navbar-nav d-flex flex-row justify-content-center">
                        <li class="nav-item mx-3">
                            <a class="nav-link" href="{% url 'about' %}" style="color: white; transition: background-color 0.3s;">소개</a>
                        </li>
                        <li class="nav-item mx-3">
                            <a class="nav-link" href="{% url 'main' %}" style="color: white; transition: background-color 0.3s;">메인</a>
                        </li>
                    </ul>
                </div>
                <!-- 토글 버튼 (모바일용) -->
                <button class="navbar-toggler mt-3" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
            </div>
        </nav>
        <style>
            .nav-link:hover {
                background-color: #218838; /* 마우스를 올렸을 때 색상 변화 */
                border-radius: 5px;
            }
            /* 전체 페이지 설정 */
            body, html {
                margin: 0;
                padding: 0;
                width: 100%;
                height: 100%;
                overflow: hidden;
            }
        
            /* 애니메이션 효과를 줄 배경 */
            body {
                background-image: url('https://mblogthumb-phinf.pstatic.net/MjAyMDEyMTJfMzMg/MDAxNjA3Nzc2MTgwODI3.8SU429uhc5Uhcchl_LgHV72H4IgKfmO5PZu3hbOFFH8g.aWKGB59iknmiEBJXvTmFYpWh4EBMmkk3HwRTDK_ad_cg.JPEG.cutesiwoo/%ED%99%88%ED%8C%8C%ED%8B%B0%EC%9D%8C%EC%8B%9D_%EC%82%AC%EC%A7%84%EB%AA%A8%EC%9D%8C23.JPG?type=w800'); /* 원하는 이미지 URL */
                background-size: cover; /* 이미지가 화면을 꽉 채우도록 설정 */
                background-repeat: repeat-x; /* X축으로 반복 */
                animation: moveLeft 60s linear infinite; /* 애니메이션 적용, 60초로 설정하여 더 부드럽게 이동 */
            }
        
            /* 배경을 왼쪽으로 이동시키는 애니메이션 */
            @keyframes moveLeft {
                0% {
                    background-position: 0 0; /* 초기 위치 */
                }
                100% {
                    background-position: -100vw 0; /* 이미지가 화면을 넘어가면서 이동 */
                }
            }
        </style>
        
    </head>
<body>
    <div class="content">
        <div class="container d-flex justify-content-center align-items-center" style="margin-top: 0px; height: 80vh;">
            <div class="card p-4 shadow-lg" style="width: 100%; max-width: 500px;">
                <h2 class="text-center mb-4" style="font-size: 1.8rem;">환영합니다!</h2>
                <h5 class = "text-start mb-4">오늘도 맛있는 한끼!</h5>
                <form>
                    <div class="mb-3">
                        <label for="email" class="form-label" style="font-size: 1rem;">이메일</label>
                        <input type="email" class="form-control" id="email" placeholder="이메일을 입력해 주세요" required>
                    </div>
                    <div class="mb-3">
                        <label for="password" class="form-label" style="font-size: 1rem;">비밀번호</label>
                        <input type="password" class="form-control" id="password" placeholder="비밀번호를 입력해 주세요" required>
                    </div>
                    <button type="submit" class="btn btn-success w-100 py-2" style="font-size: 1.1rem;">로그인</button>
                </form>
                <br>
                <button onclick="window.history.back()" class="btn btn-success w-100 py-2" style="font-size: 1.1rem;">뒤로가기</button>
                <hr class="my-4">
                <div class="text-center">
                    <p class="mb-0" style="font-size: 0.9rem;">계정이 없으신가요?<br>
                        <a href="#">계정 생성</a>
                    </p>
                </div>
            </div>
        </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
</body>
</html>

 

3. signup.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    <nav class="navbar navbar-expand-lg" style="background-color: #28a745; padding: 10px 0;">
        <div class="container-fluid d-flex flex-column align-items-center">
            <!-- 로고와 제목을 가로 정렬 -->
            <div class="d-flex align-items-center">
                <!-- 이미지 -->
                <img src="C:\\Users\\kevinkim\\Downloads\\sparta_logo.png" alt="Logo" style="height: 50px; margin-right: 10px;">
                <!-- 제목 -->
                <p class="fw-bold mb-0" style="font-size: 2rem; color: white;">SPA-Chef</p>
            </div>
            <!-- 네비게이션 링크 -->
            <div class="collapse navbar-collapse mt-3" id="navbarNav">
                <ul class="navbar-nav d-flex flex-row justify-content-center">
                    <li class="nav-item mx-3">
                        <a class="nav-link" href="{% url 'about' %}" style="color: white; transition: background-color 0.3s;">소개</a>
                    </li>
                    <li class="nav-item mx-3">
                        <a class="nav-link" href="{% url 'main' %}" style="color: white; transition: background-color 0.3s;">메인</a>
                    </li>
                </ul>
            </div>
            <!-- 토글 버튼 (모바일용) -->
            <button class="navbar-toggler mt-3" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
        </div>
    </nav>
    <style>
        /* 전체 페이지 설정 */
        body, html {
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100%;
            overflow: hidden;
        }
    
        /* 애니메이션 효과를 줄 배경 */
        body {
            background-image: url('https://mblogthumb-phinf.pstatic.net/MjAyMDEyMTJfMzMg/MDAxNjA3Nzc2MTgwODI3.8SU429uhc5Uhcchl_LgHV72H4IgKfmO5PZu3hbOFFH8g.aWKGB59iknmiEBJXvTmFYpWh4EBMmkk3HwRTDK_ad_cg.JPEG.cutesiwoo/%ED%99%88%ED%8C%8C%ED%8B%B0%EC%9D%8C%EC%8B%9D_%EC%82%AC%EC%A7%84%EB%AA%A8%EC%9D%8C23.JPG?type=w800'); /* 원하는 이미지 URL */
            background-size: cover; /* 이미지가 화면을 꽉 채우도록 설정 */
            background-repeat: repeat-x; /* X축으로 반복 */
            animation: moveLeft 60s linear infinite; /* 애니메이션 적용, 60초로 설정하여 더 부드럽게 이동 */
        }
    
        /* 배경을 왼쪽으로 이동시키는 애니메이션 */
        @keyframes moveLeft {
            0% {
                background-position: 0 0; /* 초기 위치 */
            }
            100% {
                background-position: -100vw 0; /* 이미지가 화면을 넘어가면서 이동 */
            }
        }
    </style>
</head>
<body>
    <div class="container d-flex justify-content-center align-items-center" style="margin-top: 0px; height: 85vh;">
        <div class="card p-4 shadow-lg" style="width: 100%; max-width: 500px;">
            <h2 class="text-center mb-4">회원가입</h2>
            <br>
            <h5 class="text-left mb-4">더 많은 레시피를 만나보세요!</h5>
            <form>
                <!-- Full Name Input -->
                <div class="mb-3">
                    <label for="fullName" class="form-label">사용자명</label>
                    <input type="text" class="form-control" id="fullName" placeholder="사용자명을 입력해주세요" required>
                </div>
                <br>
                <!-- Email Input -->
                <div class="mb-3">
                    <label for="email" class="form-label">이메일</label>
                    <input type="email" class="form-control" id="email" placeholder="이메일을 입력해주세요" required>
                </div>
                <br>
                <!-- Password Input -->
                <div class="mb-3">
                    <label for="password" class="form-label">비밀번호</label>
                    <input type="password" class="form-control" id="password" placeholder="비밀번호를 입력해주세요" required>
                </div>
                <br>
                <!-- Confirm Password Input -->
                <div class="mb-3">
                    <label for="confirmPassword" class="form-label">비밀번호 확인</label>
                    <input type="password" class="form-control" id="confirmPassword" placeholder="다시 비밀번호를 입력해주세요" required>
                </div>
                <!-- Submit Button -->
                <button type="submit" class="btn btn-success w-100">가입하기</button>
            </form>
            <br>
            <button onclick="window.history.back()" class="btn btn-success w-100">뒤로가기</button>
            <hr class="my-4">
            <div class="text-center">
                <p class="mb-0">이미 계정이 있으신가요? <a href="#">로그인하기</a></p>
            </div>
        </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
</body>
</html>

이렇게 세가지

 

'카테고리 없음'의 다른글

  • 현재글스파르타 AI-8기 TIL(1/12)-TeamProject

티스토리툴바