Flask로 Replit DB를 활용하여 일기장 웹페이지를 개발해줘.
화면 구성
- 메인 화면은 제목과 달력으로 구성되어 있어.
제목은 'My Diary'야. H2와 Bold처리해서 써줘.
달력은 2024년 7월 전체의 날짜가 표 형식으로 되어 있어. 표의 가장 윗줄은 요일 영어로 써줘.
2024년 7월 1일부터 2024년 7월 31일까지 표에 칸칸이 날짜별로 써줘.
- 사용자가 한 날짜를 클릭하면 해당 날짜 일기 페이지로 이동해.
- 일기 페이지는 제목, 텍스트 박스, save 버튼, 메인화면으로 돌아가는 버튼 으로 구성되어 있어.
제목은 'Diary Entry for 해당 날짜'야. H2와 Bold처리해줘.
###ex) Diary Entry for 2024-07-03###
텍스트 박스는 사용자가 텍스트를 입력하는 곳이야. 테두리에 파란색 줄이 쳐져 있게 해줘.
save 버튼은 'save'라고 쓰고, 박스 형식이야. H4로 만들어줘. save 버튼을 누르면 DB에 저장해야해. 저장시 사용자가 다시 해당 날짜를 누르면 전에 써둔 일기가 텍스트 박스 안에 적혀있어야해.
메인화면으로 돌아가는 버튼은 'Back to Calender' 라고 쓰고, 밑줄쳐줘. H4로 만들어줘. 사용자가 이 버튼을 누르면 메인 화면으로 돌아가야해.
Flask로 Replit DB를 활용하여 일기장 웹페이지를 개발해줘.
#화면 구성
메인화면, 일기쓰는화면
##메인화면
제목 + 달력
###제목
"My Diary" 라고 쓰고, H2와 Bold 처리해줘.
메인 화면의 왼쪽 위에 써야해.
###달력
달력은 2024년 7월 달 전체가 나타나있으면 돼.
표 형식으로 구현해줘.
표의 가장 윗줄은 요일을 영어로 적어줘. 일요일부터 시작하게 해줘.
사용자가 한 날짜를 클릭하면 해당 날짜의 일기쓰는 화면으로 이동해야해.
##일기쓰는화면
제목 + 텍스트박스 + 저장 버튼 + 메인화면으로 돌아가는 버튼
###제목
"Diary Entry for 해당 날짜"라고 쓰고, H2와 Bold 처리해줘.
ex) Diary Entry for 2024-07-04
화면 왼쪽 가장 위에 써줘
###텍스트박스
사용자가 텍스트를 입력하는 곳이야.
사각형 모양이고, 테두리에 파란색 줄이 쳐져 있게 해줘.
가로 길이는 전체 페이지의 30%
세로 길이는 150px
테두리 두께는 2px
제목 아래에 써줘.
###저장버튼
"Save" 라고 쓰고, 박스로 된 버튼이야.
H4로 써줘.
사용자가 이 버튼을 누르면 해당 날짜 DB에 저장해야해.
저장시 사용자가 다시 해당 날짜를 누르면 전에 써둔 일기가 텍스트 박스 안에 적혀있어야해.
###메인화면으로 돌아가는 버튼
"Back to Calendar" 라고 쓰고, 밑줄쳐진 버튼이야.
H4로 써줘.
사용자가 이 버튼을 누르면 메인 화면으로 돌아가야해