참고 많이 함
- 심플 상태창 (출력 프롬프트 빌림)
특징: 모바일로 보기 편한 길이랑 위치
일단 반응형 디자인 모드에서는 괜찮게 보이는데 실사용은 안해봐서 몰겟네
+) 폰 좁아터진거 쓰면 좀 크다
나중에 작은 버전 하나 올림
iOS UI 긴빠이했는데 문제되면 내림
프롬프트/정규식
출력 내용 커스텀 방법
| 필수 출력 프롬프트 |
| Date: (DD) | (Month) | (Weekday) Time: (H:MM AM/PM) Weather: (Current weather emoji) Location: (Current location) Activity: (Main activity that <char> has been doing, considering continuity) |
좌측에 월-일-요일-날씨, 우측에 장소-시간-행동을 넣어놨다.
상태창 출력을 필수 출력 프롬프트 순서에 맞춰놨기 때문에 복장이든 호감도든 추가하고 싶은 게 있으면 하단에 추가하고 정규식 끝단 수정해서 쓰거나 알아서 잘 고치면 된다. (근데 상태창에 표시하려면 css 뜯어고쳐야댐)
| IN |
| Date:\s*(.*)\s*\|\s*(.*)\s*\|\s*(.*)\nTime:\s*(.*)\nWeather:\s*(.*)\nLocation:\s*(.*)\nActivity:\s*(.*) |
| OUT |
| <br> <style> body { display: flex; justify-content: center; align-items: center; height: 100vh; background-color: #f0f0f0; } .widget { width: 330px; border-radius: 15px; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.7); background-color: rgba(255, 255, 255, 1); padding: 18px; box-sizing: border-box; display: flex; flex-direction: column; margin-left: -4.9em; margin-top: 35px } .header { display: flex; justify-content: space-between; align-items: flex-start; } .date-container { width: 95px; } .day-month { margin-bottom: 2px; } .day-month .month { text-transform: capitalize; color: #909090; text-transform: uppercase; font-size: 11px; margin-bottom: -4px; } .day-month .day { font-weight: bold; color: #ff3b30; font-size: 16px; margin-bottom: 0px; } .date-weather { display: flex; align-items: end; white-space: nowrap; } .date { font-size: 50px; color: black; margin-right: 3px; line-height: 1; margin-top: 10px; text-indent: -2px; } .weather-icon { font-size: 18px; margin-bottom: 29px; } .events-container { flex: 1; margin-top: 3px; } .event { display: flex; align-items: flex-start; margin-bottom: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 200px; } .event:last-child { margin-bottom: 0; } .event .color-bar { width: 4px; margin-right: 6px; border-radius: 2px; } .color-bar-1 { background-color: #395a7f; height: 36px; } .color-bar-2 { background-color: #6e9fc1; height: 18px; } .color-bar-3 { background-color: #4895ef; height: 18px; } .color-bar-4 { background-color: #016180; height: 18px; } .event .text { flex: 1; font-size: 14px; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 1px; color: black; } .event .time { color: #909090; font-size: 12px; display: block; margin-top: 3px; } .event .moreevent { color: #909090; flex: 1; font-size: 12px; line-height: 1.2; margin-top: 3px; } </style> <div class="widget"> <div class="header"> <div class="date-container"> <div class="day-month"> <div class="month">$2</div> <div class="day">$3</div> </div> <div class="date-weather"> <div class="date">$1</div> <div class="weather-icon">$5</div> </div> </div> <div class="events-container"> <div class="event"> <div class="color-bar color-bar-1"></div> <div class="text">$6 <span class="time">$4</span> </div> </div> <div class="event"> <div class="color-bar color-bar-2"></div> <div class="text">$7</div> </div> <div class="event"> <div class="color-bar color-bar-3"></div> <div class="color-bar color-bar-4" style=" margin-left: -3px;"></div> <div class="moreevent">2 more events</div> </div> </div> </div> </div> <br> |
CSS 커스텀
그냥 채찍 시키자
| 사소한 색상 조절 |
.widget { width: 330px; border-radius: 15px; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.7);/*박스 그림자, 너무 진하면 0.7 부분 더 낮은 숫자로 바꾸면 됨*/ background-color: rgba(255, 255, 255, 1); /*배경색*/ padding: 18px; box-sizing: border-box; display: flex; flex-direction: column; margin-left: -4.9em; margin-top: 35px } |
| .event .color-bar { width: 4px; margin-right: 6px; border-radius: 2px; } .color-bar-1 { background-color: #395a7f; /*제일 위 컬러 바 색상*/ height: 36px; } .color-bar-2 { background-color: #6e9fc1; /*중간 컬러 바 색상*/ height: 18px; } .color-bar-3 { background-color: #4895ef; /*하단 앞쪽 컬러 바 색상*/ height: 18px; } .color-bar-4 { background-color: #016180; /*하단 뒤쪽 컬러 바 색상*/ height: 18px; } |
| 상태창 길이/위치 조절하기 |
| .widget { width: 330px; /*가로 길이*/ border-radius: 15px; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.7); background-color: rgba(255, 255, 255, 1); padding: 18px; box-sizing: border-box; display: flex; flex-direction: column; margin-left: -4.9em; /*상태창 더 왼쪽으로 보내려면 4.9보다 큰 값 넣기*/ margin-top: 35px } --- .event { display: flex; align-items: flex-start; margin-bottom: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 200px; /*늘리거나 줄인 길이만큼 여기도 같이 조정하기*/ } |
특?징?
우측 텍스트가 한 줄 넘어가면 생략되는데 일부러 그렇게 했음(css 보면 이유 알 수 있을거임)
장소는 모르겠는데 활동은 자주 잘릴듯. 감정처럼 짧게 나오는 항목들로 대체하는 게 보기 나을 거 같다
펼쳐서 전체 내용 보는 형식으로 확장할 순 있겠는데 일단 지금은 졸려서 나중에 생각해봄
문제 있으면 피드백 부탁
