2022-10-29 18:28:24 +09:00
{% extends "base.html" %}
{% block content %}
2026-01-02 17:48:58 +09:00
< link rel = "stylesheet" href = "{{ url_for('.static', filename='css/mobile_custom.css') }}" / >
< link rel = "stylesheet" href = "{{ url_for('.static', filename='css/' ~ arg['sub'] ~ '.css') }}" / >
2026-01-01 00:32:59 +09:00
< div id = "linkkf_setting_wrapper" class = "container-fluid mt-4 mx-auto content-cloak" style = "max-width: 100%; padding-left: 5px; padding-right: 5px;" >
2025-12-29 23:12:44 +09:00
< div class = "glass-card p-4" >
2026-04-01 19:09:14 +09:00
< div class = "d-flex justify-content-between align-items-center mb-4 linkkf-setting-header" >
2025-12-29 23:12:44 +09:00
< h2 class = "text-white font-weight-bold" > < i class = "bi bi-gear-fill mr-2" > < / i > Linkkf 설정< / h2 >
2026-04-01 19:09:14 +09:00
< div class = "linkkf-setting-actions" >
2026-01-09 22:18:48 +09:00
< button type = "button" class = "btn btn-outline-info btn-sm mr-2" id = "btn-self-update" title = "최신 버전으로 업데이트" >
< i class = "bi bi-arrow-repeat" > < / i > 업데이트
< / button >
{{ macros.m_button_group([['globalSettingSaveBtn', '설정 저장']])}}
< / div >
2022-10-29 18:28:24 +09:00
< / div >
2025-12-29 23:12:44 +09:00
{{ macros.m_row_start('5') }}
{{ macros.m_row_end() }}
< nav >
{{ macros.m_tab_head_start() }}
{{ macros.m_tab_head('normal', '일반', true) }}
2026-01-08 16:38:24 +09:00
{{ macros.m_tab_head('auto', '자동등록', false) }}
2025-12-29 23:12:44 +09:00
{{ macros.m_tab_head('action', '기타', false) }}
{{ macros.m_tab_head_end() }}
< / nav >
< form id = "setting" class = "mt-4" >
< div class = "tab-content" id = "nav-tabContent" >
{{ macros.m_tab_content_start('normal', true) }}
{{ macros.setting_input_text_and_buttons('linkkf_url', 'linkkf URL', [['go_btn', 'GO']], value=arg['linkkf_url']) }}
2026-01-01 16:57:48 +09:00
<!-- 저장 폴더 (탐색 버튼 포함) -->
< div class = "row" style = "padding-top: 10px; padding-bottom:10px; align-items: center;" >
< div class = "col-sm-3 set-left" >
< strong > 저장 폴더< / strong >
< / div >
< div class = "col-sm-9" >
< div class = "input-group col-sm-9" >
< input type = "text" class = "form-control form-control-sm" id = "linkkf_download_path" name = "linkkf_download_path" value = "{{arg['linkkf_download_path']}}" >
< div class = "btn-group btn-group-sm flex-wrap mr-2" role = "group" style = "padding-left:5px; padding-top:0px" >
< button type = "button" class = "btn btn-sm btn-outline-primary" id = "browse_folder_btn" title = "폴더 탐색" >
< i class = "bi bi-folder2-open" > < / i > 탐색
< / button >
< / div >
< / div >
< div style = "padding-left:20px; padding-top:5px;" >
< em > 정상적으로 다운 완료 된 파일이 이동할 폴더 입니다.< / em >
< / div >
< / div >
< / div >
2026-01-01 00:32:59 +09:00
{{ macros.setting_input_int('linkkf_max_ffmpeg_process_count', '동시 다운로드 에피소드 수', value=arg['linkkf_max_ffmpeg_process_count'], desc='동시에 다운로드할 에피소드 개수입니다.') }}
{{ macros.setting_select('linkkf_download_method', '다운로드 방법', [['ffmpeg', 'ffmpeg (기본)'], ['ytdlp', 'yt-dlp (단일쓰레드)'], ['aria2c', 'yt-dlp (멀티쓰레드/aria2c)']], col='3', value=arg['linkkf_download_method'], desc='aria2c 선택 시 병렬 다운로드로 속도가 향상됩니다.') }}
{{ macros.setting_input_int('linkkf_download_threads', '멀티쓰레드 갯수', value=arg['linkkf_download_threads'], desc='yt-dlp/aria2c 사용 시 적용될 병렬 다운로드 쓰레드 수입니다. (기본 16)') }}
2025-12-29 23:12:44 +09:00
{{ macros.setting_checkbox('linkkf_order_desc', '요청 화면 최신순 정렬', value=arg['linkkf_order_desc'], desc='On : 최신화부터, Off : 1화부터') }}
{{ macros.setting_checkbox('linkkf_auto_make_folder', '제목 폴더 생성', value=arg['linkkf_auto_make_folder'], desc='제목으로 폴더를 생성하고 폴더 안에 다운로드합니다.') }}
< div id = "linkkf_auto_make_folder_div" class = "collapse pl-4 border-left ml-3" style = "border-color: rgba(255,255,255,0.1) !important;" >
{{ macros.setting_input_text('linkkf_finished_insert', '완결 표시', col='3', value=arg['linkkf_finished_insert'], desc=['완결된 컨텐츠 폴더명 앞에 넣을 문구입니다.']) }}
{{ macros.setting_checkbox('linkkf_auto_make_season_folder', '시즌 폴더 생성', value=arg['linkkf_auto_make_season_folder'], desc=['On : Season 번호 폴더를 만듭니다.']) }}
< / div >
{{ macros.setting_checkbox('linkkf_uncompleted_auto_enqueue', '자동으로 다시 받기', value=arg['linkkf_uncompleted_auto_enqueue'], desc=['On : 플러그인 로딩시 미완료인 항목은 자동으로 다시 받습니다.']) }}
{{ macros.m_tab_content_end() }}
{{ macros.m_tab_content_start('auto', false) }}
{{ macros.global_setting_scheduler_button(arg['scheduler'], arg['is_running']) }}
{{ macros.setting_input_text('linkkf_interval', '스케쥴링 실행 정보', value=arg['linkkf_interval'], col='3', desc=['Inverval(minute 단위)이나 Cron 설정']) }}
{{ macros.setting_checkbox('linkkf_auto_start', '시작시 자동실행', value=arg['linkkf_auto_start'], desc='On : 시작시 자동으로 스케쥴러에 등록됩니다.') }}
2026-01-08 16:38:24 +09:00
<!-- 자동 다운로드 작품 코드 - Tag Chips UI -->
< div class = "row" style = "padding-top: 10px; padding-bottom:10px;" >
< div class = "col-sm-3 set-left" > < strong > 자동 다운로드할 작품 코드< / strong > < / div >
< div class = "col-sm-9" >
< input type = "hidden" id = "linkkf_auto_code_list" name = "linkkf_auto_code_list" value = "{{arg['linkkf_auto_code_list']}}" >
< div id = "tag_chips_container" class = "tag-chips-wrapper mb-2" > < / div >
< div class = "input-group input-group-sm" >
< input type = "text" id = "new_tag_input" class = "form-control" placeholder = "작품명 입력 후 Enter (all: 모두 받기)" >
< div class = "input-group-append" > < button type = "button" class = "btn btn-outline-primary" id = "add_tag_btn" > < i class = "bi bi-plus-lg" > < / i > 추가< / button > < / div >
< / div >
< div style = "padding-top:5px;" > < em class = "text-muted" > Enter로 추가, X로 삭제, 드래그 순서변경 | all 입력시 모두 받기< / em > < / div >
< / div >
< / div >
2025-12-29 23:12:44 +09:00
{{ macros.setting_checkbox('linkkf_auto_mode_all', '에피소드 모두 받기', value=arg['linkkf_auto_mode_all'], desc=['On : 이전 에피소드를 모두 받습니다.', 'Off : 최신 에피소드만 받습니다.']) }}
2026-01-11 14:00:27 +09:00
{{ macros.setting_checkbox('linkkf_auto_download_new', '새 에피소드 자동 다운로드', value=arg['linkkf_auto_download_new'], desc=['On : 새 에피소드 감지 시 자동으로 큐에 추가합니다.', 'Off : 알림만 보내고 다운로드는 수동으로 합니다.']) }}
< div class = "row" style = "padding-top: 10px; padding-bottom:10px;" >
< div class = "col-sm-3 set-left" > < strong > 모니터링 주기< / strong > < / div >
< div class = "col-sm-9" >
< select class = "form-control form-control-sm col-sm-3" id = "linkkf_monitor_interval" name = "linkkf_monitor_interval" >
< option value = "5" { % if arg . get ( ' linkkf_monitor_interval ' , ' 10 ' ) = = ' 5 ' % } selected { % endif % } > 5분< / option >
< option value = "10" { % if arg . get ( ' linkkf_monitor_interval ' , ' 10 ' ) = = ' 10 ' or not arg . get ( ' linkkf_monitor_interval ' ) % } selected { % endif % } > 10분 (기본)< / option >
< option value = "15" { % if arg . get ( ' linkkf_monitor_interval ' , ' 10 ' ) = = ' 15 ' % } selected { % endif % } > 15분< / option >
< option value = "30" { % if arg . get ( ' linkkf_monitor_interval ' , ' 10 ' ) = = ' 30 ' % } selected { % endif % } > 30분< / option >
< option value = "60" { % if arg . get ( ' linkkf_monitor_interval ' , ' 10 ' ) = = ' 60 ' % } selected { % endif % } > 1시간< / option >
< / select >
< div style = "padding-top:5px;" > < em class = "text-muted" > 'all' 모드 사용 시 사이트를 확인하는 주기입니다.< / em > < / div >
< / div >
< / div >
{{ macros.m_tab_content_end() }}
{{ macros.m_tab_content_start('action', false) }}
< div class = "row mb-3" >
< div class = "col-sm-12" >
< h5 class = "text-white mb-3" > < i class = "bi bi-lightning-fill mr-2" > < / i > 수동 작업< / h5 >
< / div >
< / div >
< div class = "row mb-4" >
< div class = "col-sm-3 set-left" > < strong > 스케줄러 1회 실행< / strong > < / div >
< div class = "col-sm-9" >
< button type = "button" class = "btn btn-outline-success btn-sm" id = "global_one_execute_btn" >
< i class = "bi bi-play-circle mr-1" > < / i > 1회 실행
< / button >
< div style = "padding-top:5px;" > < em class = "text-muted" > 자동 다운로드 스케줄러를 즉시 1회 실행합니다.< / em > < / div >
< / div >
< / div >
< div class = "row mb-4" >
< div class = "col-sm-3 set-left" > < strong > DB 초기화< / strong > < / div >
< div class = "col-sm-9" >
< button type = "button" class = "btn btn-outline-danger btn-sm" id = "global_reset_db_btn" >
< i class = "bi bi-trash mr-1" > < / i > DB 초기화
< / button >
< div style = "padding-top:5px;" > < em class = "text-muted" > 다운로드 기록 DB를 초기화합니다.< / em > < / div >
< / div >
< / div >
< hr style = "border-color: rgba(255,255,255,0.1); margin: 30px 0;" >
< div class = "row mb-3" >
< div class = "col-sm-12" >
< h5 class = "text-white mb-3" > < i class = "bi bi-bell-fill mr-2" > < / i > 알림 설정< / h5 >
< / div >
< / div >
{{ macros.setting_checkbox('linkkf_notify_enabled', '알림 활성화', value=arg['linkkf_notify_enabled'], desc='새 에피소드가 큐에 추가되면 알림을 보냅니다.') }}
< div class = "row mb-3" >
< div class = "col-sm-12" >
< h6 class = "text-info mb-2" > < i class = "bi bi-discord mr-1" > < / i > Discord< / h6 >
< / div >
< / div >
< div class = "row" style = "padding-top: 10px; padding-bottom:10px;" >
< div class = "col-sm-3 set-left" > < strong > Discord Webhook URL< / strong > < / div >
< div class = "col-sm-9" >
< div class = "input-group" >
< input type = "text" class = "form-control form-control-sm" id = "linkkf_discord_webhook_url" name = "linkkf_discord_webhook_url" value = "{{arg['linkkf_discord_webhook_url']}}" >
< div class = "input-group-append" >
< button type = "button" class = "btn btn-sm btn-outline-secondary" id = "copy_discord_url_btn" title = "URL 복사" >
< i class = "bi bi-clipboard" > < / i >
< / button >
< / div >
< / div >
< div style = "padding-top:5px;" > < em class = "text-muted" > Discord 서버 설정 → 연동 → 웹훅에서 URL을 복사하세요.< / em > < / div >
< / div >
< / div >
< div class = "row mb-3 mt-4" >
< div class = "col-sm-12" >
< h6 class = "text-info mb-2" > < i class = "bi bi-telegram mr-1" > < / i > Telegram< / h6 >
< / div >
< / div >
{{ macros.setting_input_text('linkkf_telegram_bot_token', 'Telegram Bot Token', col='9', value=arg['linkkf_telegram_bot_token'], desc='@BotFather에서 생성한 봇 토큰입니다.') }}
{{ macros.setting_input_text('linkkf_telegram_chat_id', 'Telegram Chat ID', col='4', value=arg['linkkf_telegram_chat_id'], desc='알림을 받을 채팅방 ID (개인: 숫자, 그룹: -숫자)') }}
< div class = "row mb-3 mt-3" >
< div class = "col-sm-3" > < / div >
< div class = "col-sm-9" >
< button type = "button" class = "btn btn-outline-info btn-sm" id = "test_notify_btn" >
< i class = "bi bi-send mr-1" > < / i > 테스트 알림 전송
< / button >
< / div >
< / div >
2025-12-29 23:12:44 +09:00
{{ macros.m_tab_content_end() }}
< / div > <!-- tab - content -->
< / form >
< / div >
2022-10-29 18:28:24 +09:00
< / div > <!-- 전체 -->
2026-01-01 16:57:48 +09:00
<!-- 폴더 탐색 모달 -->
< div class = "modal fade" id = "folderBrowserModal" tabindex = "-1" role = "dialog" aria-labelledby = "folderBrowserModalLabel" aria-hidden = "true" >
< div class = "modal-dialog modal-lg" role = "document" >
< div class = "modal-content" style = "background: #1e293b; border: 1px solid rgba(255,255,255,0.1);" >
< div class = "modal-header" style = "border-color: rgba(255,255,255,0.1);" >
< h5 class = "modal-title text-white" id = "folderBrowserModalLabel" >
< i class = "bi bi-folder2-open mr-2" > < / i > 폴더 선택
< / h5 >
< button type = "button" class = "close text-white" data-dismiss = "modal" aria-label = "Close" >
< span aria-hidden = "true" > × < / span >
< / button >
< / div >
< div class = "modal-body" >
< div class = "d-flex align-items-center mb-3" >
< button type = "button" class = "btn btn-sm btn-outline-secondary mr-2" id = "folder_go_up" title = "상위 폴더" >
< i class = "bi bi-arrow-up" > < / i >
< / button >
< div class = "flex-grow-1 px-3 py-2 rounded" style = "background: rgba(0,0,0,0.3); font-family: monospace; color: #94a3b8;" >
< span id = "current_path_display" > /< / span >
< / div >
< / div >
< div id = "folder_list" style = "min-height: 300px; max-height: 600px; overflow-y: auto; background: rgba(0,0,0,0.2); border-radius: 8px; padding: 4px;" >
< div class = "text-center text-muted py-4" >
< i class = "bi bi-arrow-repeat spin" > < / i > 로딩 중...
< / div >
< / div >
< / div >
< div class = "modal-footer" style = "border-color: rgba(255,255,255,0.1);" >
< button type = "button" class = "btn btn-secondary" data-dismiss = "modal" > 취소< / button >
< button type = "button" class = "btn btn-primary" id = "folder_select_btn" >
< i class = "bi bi-check-lg mr-1" > < / i > 선택
< / button >
< / div >
< / div >
< / div >
< / div >
2025-12-29 23:12:44 +09:00
< link rel = "stylesheet" href = "https://cdn.jsdelivr.net/npm/bootstrap-icons@1.7.2/font/bootstrap-icons.css" >
< style >
2026-04-01 19:09:14 +09:00
@ media ( max-width : 768px ) {
. linkkf-setting-header {
flex-direction : column !important ;
align-items : flex-start !important ;
gap : 12 px ;
}
. linkkf-setting-actions {
display : flex ;
flex-wrap : wrap ;
width : 100 % ;
gap : 8 px ;
}
. linkkf-setting-actions . btn ,
. linkkf-setting-actions # globalSettingSaveBtn {
margin-right : 0 !important ;
}
. linkkf-setting-actions > div {
display : inline-flex ;
}
# linkkf_auto_make_folder_div {
border-left : none !important ;
margin-left : 0 !important ;
padding-left : 0 !important ;
}
# linkkf_setting_wrapper . tab-pane {
border-left : none !important ;
border-right : none !important ;
border-bottom : none !important ;
padding-left : 0 !important ;
padding-right : 0 !important ;
}
}
2025-12-29 23:12:44 +09:00
/* Global Background */
body {
font-family : 'NamumSquareNeo' , system-ui , - apple-system , Segoe UI , Roboto , Helvetica Neue , Noto Sans , Liberation Sans , Arial , sans-serif ;
background-image : linear-gradient ( 135 deg , #1f2937 , #111827 , #0f172a ) ;
color : #e2e8f0 ;
min-height : 100 vh ;
}
/* Glass Card Container */
. glass-card {
background : rgba ( 30 , 41 , 59 , 0.7 ) ;
backdrop-filter : blur ( 12 px ) ;
border : 1 px solid rgba ( 255 , 255 , 255 , 0.08 ) ;
border-radius : 16 px ;
box-shadow : 0 4 px 6 px -1 px rgba ( 0 , 0 , 0 , 0.1 ) , 0 2 px 4 px -1 px rgba ( 0 , 0 , 0 , 0.06 ) ;
}
/* Tabs Styling */
. nav-tabs {
border-bottom : 2 px solid rgba ( 255 , 255 , 255 , 0.1 ) ;
}
. nav-tabs . nav-link {
color : #94a3b8 ;
border : none ;
font-weight : 600 ;
padding : 10 px 20 px ;
border-radius : 8 px 8 px 0 0 ;
transition : all 0.2 s ;
}
. nav-tabs . nav-link : hover {
color : #e2e8f0 ;
background : rgba ( 255 , 255 , 255 , 0.05 ) ;
}
. nav-tabs . nav-link . active {
color : #60a5fa !important ;
background : rgba ( 30 , 41 , 59 , 0.8 ) !important ;
border-bottom : 2 px solid #60a5fa !important ;
}
/* Navigation Menu Override (Top Sub-menu) */
ul . nav . nav-pills . bg-light {
background-color : rgba ( 30 , 41 , 59 , 0.6 ) !important ;
backdrop-filter : blur ( 10 px ) ;
border : 1 px solid rgba ( 255 , 255 , 255 , 0.08 ) ;
border-radius : 50 rem !important ; /* Pill shape container */
padding : 6 px !important ;
box-shadow : 0 4 px 20 px rgba ( 0 , 0 , 0 , 0.2 ) !important ;
display : inline-flex !important ; /* Fit content */
flex-wrap : wrap ; /* allow wrap on small screens */
justify-content : center ;
width : auto !important ; /* Prevent full width */
margin-bottom : 20 px ;
}
2026-01-01 00:32:59 +09:00
/* Navigation (Tabs) Optimization */
2026-01-01 02:19:22 +09:00
/* Navigation Menu Override */
ul . nav . nav-pills . bg-light {
background-color : rgba ( 6 , 78 , 59 , 0.4 ) !important ;
backdrop-filter : blur ( 10 px ) ;
border : 1 px solid rgba ( 16 , 185 , 129 , 0.1 ) ;
border-radius : 50 rem !important ;
2026-01-01 00:32:59 +09:00
padding : 6 px !important ;
2026-01-01 02:19:22 +09:00
box-shadow : 0 4 px 20 px rgba ( 0 , 0 , 0 , 0.2 ) !important ;
2026-01-01 00:32:59 +09:00
display : inline-flex !important ;
2026-01-01 02:19:22 +09:00
gap : 4 px ;
margin-bottom : 20 px ;
2025-12-29 23:12:44 +09:00
}
2026-01-01 02:19:22 +09:00
ul . nav . nav-pills . nav-link {
2026-01-01 00:32:59 +09:00
color : #d1fae5 !important ;
font-weight : 600 !important ;
2026-01-01 02:19:22 +09:00
padding : 8 px 20 px !important ;
border-radius : 50 rem !important ;
2026-01-01 00:32:59 +09:00
transition : all 0.3 s ease !important ;
border : 1 px solid transparent !important ;
2025-12-29 23:12:44 +09:00
}
2026-01-01 02:19:22 +09:00
ul . nav . nav-pills . nav-link : hover {
background-color : rgba ( 16 , 185 , 129 , 0.1 ) !important ;
2025-12-29 23:12:44 +09:00
color : #fff !important ;
transform : translateY ( -1 px ) ;
}
2026-01-01 02:19:22 +09:00
ul . nav . nav-pills . nav-link . active {
2026-01-01 00:32:59 +09:00
background : linear-gradient ( 135 deg , #10b981 0 % , #059669 100 % ) !important ;
2025-12-29 23:12:44 +09:00
color : #fff !important ;
2026-01-01 00:32:59 +09:00
box-shadow : 0 4 px 12 px rgba ( 16 , 185 , 129 , 0.3 ) !important ;
2025-12-29 23:12:44 +09:00
}
/* Form Controls */
. form-control , . custom-select , textarea {
background-color : rgba ( 0 , 0 , 0 , 0.3 ) !important ;
border : 1 px solid rgba ( 255 , 255 , 255 , 0.1 ) !important ;
color : #f1f5f9 !important ;
border-radius : 8 px !important ;
}
. form-control : focus , . custom-select : focus , textarea : focus {
background-color : rgba ( 0 , 0 , 0 , 0.5 ) !important ;
2026-01-01 00:32:59 +09:00
border-color : #10b981 !important ;
box-shadow : 0 0 0 2 px rgba ( 16 , 185 , 129 , 0.25 ) !important ;
2025-12-29 23:12:44 +09:00
}
/* Labels & Text */
label , . col-form-label {
font-weight : 600 ;
color : #cbd5e1 ;
}
. text-muted {
color : #94a3b8 !important ;
}
/* Buttons */
. btn {
border : none ;
border-radius : 8 px ;
font-weight : 600 ;
transition : all 0.3 s ease ;
padding : 8 px 16 px ;
text-transform : uppercase ;
letter-spacing : 0.5 px ;
}
. btn-primary , # globalSettingSaveBtn {
2026-01-01 00:32:59 +09:00
background : linear-gradient ( 135 deg , #10b981 0 % , #059669 100 % ) ;
2025-12-29 23:12:44 +09:00
color : white ;
2026-01-01 00:32:59 +09:00
box-shadow : 0 4 px 15 px rgba ( 16 , 185 , 129 , 0.4 ) ;
2025-12-29 23:12:44 +09:00
}
. btn-primary : hover , # globalSettingSaveBtn : hover {
2026-01-01 00:32:59 +09:00
background : linear-gradient ( 135 deg , #34d399 0 % , #10b981 100 % ) ;
2025-12-29 23:12:44 +09:00
transform : translateY ( -2 px ) ;
2026-01-01 00:32:59 +09:00
box-shadow : 0 6 px 20 px rgba ( 16 , 185 , 129 , 0.6 ) ;
2025-12-29 23:12:44 +09:00
}
/* GO Button specific (Input Group) */
# go_btn {
background : linear-gradient ( 135 deg , #10b981 0 % , #059669 100 % ) ;
color : white ;
box-shadow : 0 4 px 15 px rgba ( 16 , 185 , 129 , 0.4 ) ;
border-radius : 0 8 px 8 px 0 !important ; /* Fix for input group */
margin-left : -1 px ;
}
# go_btn : hover {
background : linear-gradient ( 135 deg , #34d399 0 % , #10b981 100 % ) ;
transform : translateY ( -1 px ) ;
box-shadow : 0 6 px 20 px rgba ( 16 , 185 , 129 , 0.6 ) ;
z-index : 5 ;
}
. btn-outline-primary {
color : #60a5fa ;
border : 1 px solid #60a5fa ;
background : transparent ;
}
. btn-outline-primary : hover {
background : rgba ( 96 , 165 , 250 , 0.1 ) ;
color : #93c5fd ;
box-shadow : 0 0 15 px rgba ( 96 , 165 , 250 , 0.3 ) ;
}
. btn : active {
transform : translateY ( 0 ) !important ;
box-shadow : inset 0 2 px 4 px rgba ( 0 , 0 , 0 , 0.2 ) !important ;
}
/* Custom Checkbox/Switch Override (if Bootstrap switch is used) */
. custom-control-label :: before {
background-color : rgba ( 0 , 0 , 0 , 0.3 ) ;
border-color : rgba ( 255 , 255 , 255 , 0.2 ) ;
}
. custom-control-input : checked ~ . custom-control-label :: before {
2026-01-01 00:32:59 +09:00
background-color : #10b981 ;
border-color : #10b981 ;
2025-12-29 23:12:44 +09:00
}
/* Collapse Borders */
2026-01-01 22:58:25 +09:00
/* Folder Browser Modal Styles */
. folder-item {
cursor : pointer ;
transition : background 0.2 s ;
border-bottom : 1 px solid rgba ( 255 , 255 , 255 , 0.05 ) ;
display : flex !important ;
align-items : center ;
width : 100 % ;
overflow : hidden ;
}
. folder-item : hover {
background : rgba ( 255 , 255 , 255 , 0.05 ) ;
}
. folder-item span {
white-space : nowrap ;
overflow : hidden ;
text-overflow : ellipsis ;
flex : 1 ;
min-width : 0 ;
}
. folder-item . selected {
background : rgba ( 16 , 185 , 129 , 0.3 ) !important ;
2025-12-29 23:12:44 +09:00
}
2026-01-08 16:38:24 +09:00
/* Tag Chips Styles */
. tag-chips-wrapper { display : flex ; flex-wrap : wrap ; gap : 8 px ; padding : 12 px ; min-height : 60 px ; background : rgba ( 0 , 0 , 0 , 0.2 ) ; border : 1 px dashed rgba ( 255 , 255 , 255 , 0.15 ) ; border-radius : 8 px ; }
. tag-chips-wrapper : empty :: before { content : '작품이 없습니다.' ; color : #64748b ; font-style : italic ; }
. tag-chip { display : inline-flex ; align-items : center ; gap : 8 px ; padding : 8 px 12 px ; background : linear-gradient ( 135 deg , rgba ( 16 , 185 , 129 , 0.3 ) , rgba ( 5 , 150 , 105 , 0.4 ) ) ; border : 1 px solid rgba ( 16 , 185 , 129 , 0.4 ) ; border-radius : 20 px ; font-size : 0.9 rem ; color : #e2e8f0 ; cursor : grab ; transition : all 0.2 s ease ; }
. tag-chip : hover { background : linear-gradient ( 135 deg , rgba ( 16 , 185 , 129 , 0.5 ) , rgba ( 5 , 150 , 105 , 0.6 ) ) ; transform : translateY ( -2 px ) ; box-shadow : 0 4 px 12 px rgba ( 16 , 185 , 129 , 0.3 ) ; }
. tag-chip . tag-text { max-width : 200 px ; overflow : hidden ; text-overflow : ellipsis ; white-space : nowrap ; }
. tag-chip . tag-remove { width : 18 px ; height : 18 px ; background : rgba ( 239 , 68 , 68 , 0.5 ) ; border-radius : 50 % ; cursor : pointer ; display : flex ; align-items : center ; justify-content : center ; font-size : 0.75 rem ; }
. tag-chip . tag-remove : hover { background : rgba ( 239 , 68 , 68 , 0.9 ) ; }
. tag-chip . tag-index { width : 20 px ; height : 20 px ; background : rgba ( 0 , 0 , 0 , 0.3 ) ; border-radius : 50 % ; font-size : 0.7 rem ; color : #94a3b8 ; display : flex ; align-items : center ; justify-content : center ; }
2025-12-29 23:12:44 +09:00
< / style >
2022-10-29 18:28:24 +09:00
< script type = "text/javascript" >
var package _name = "{{arg['package_name'] }}" ;
var sub = "{{arg['sub'] }}" ;
var current _data = null ;
$ ( document ) . ready ( function ( ) {
2025-12-29 23:12:44 +09:00
// Width Fix
$ ( "#main_container" ) . removeClass ( "container" ) . addClass ( "container-fluid" ) ;
2022-10-29 18:28:24 +09:00
use _collapse ( 'linkkf_auto_make_folder' ) ;
} ) ;
$ ( '#ani365_auto_make_folder' ) . change ( function ( ) {
use _collapse ( 'linkkf_auto_make_folder' ) ;
} ) ;
$ ( "body" ) . on ( 'click' , '#go_btn' , function ( e ) {
e . preventDefault ( ) ;
let url = document . getElementById ( "linkkf_url" ) . value
window . open ( url , "_blank" ) ;
} ) ;
2026-01-11 14:00:27 +09:00
// 1회 실행 버튼
$ ( document ) . on ( 'click' , '#global_one_execute_btn' , function ( e ) {
e . preventDefault ( ) ;
$ . ajax ( {
url : '/' + package _name + '/ajax/' + sub + '/immediately_execute' ,
type : "POST" ,
cache : false ,
dataType : "json" ,
success : function ( ret ) {
if ( ret . ret == 'success' ) {
$ . notify ( '스케줄러 1회 실행을 시작합니다.' , { type : 'success' } ) ;
} else {
$ . notify ( ret . msg || '실행 실패' , { type : 'danger' } ) ;
}
} ,
error : function ( xhr , status , error ) {
$ . notify ( '에러: ' + error , { type : 'danger' } ) ;
}
} ) ;
} ) ;
// DB 초기화 버튼
$ ( document ) . on ( 'click' , '#global_reset_db_btn' , function ( e ) {
e . preventDefault ( ) ;
if ( ! confirm ( '정말 DB를 초기화하시겠습니까?' ) ) return ;
$ . ajax ( {
url : '/' + package _name + '/ajax/' + sub + '/reset_db' ,
type : "POST" ,
cache : false ,
dataType : "json" ,
success : function ( ret ) {
if ( ret . ret == 'success' ) {
$ . notify ( 'DB가 초기화되었습니다.' , { type : 'success' } ) ;
} else {
$ . notify ( ret . msg || '초기화 실패' , { type : 'danger' } ) ;
}
} ,
error : function ( xhr , status , error ) {
$ . notify ( '에러: ' + error , { type : 'danger' } ) ;
}
} ) ;
} ) ;
// Discord Webhook URL 복사 버튼
$ ( document ) . on ( 'click' , '#copy_discord_url_btn' , function ( e ) {
e . preventDefault ( ) ;
var url = $ ( '#linkkf_discord_webhook_url' ) . val ( ) ;
if ( ! url ) {
$ . notify ( '복사할 URL이 없습니다.' , { type : 'warning' } ) ;
return ;
}
navigator . clipboard . writeText ( url ) . then ( function ( ) {
$ . notify ( 'URL이 클립보드에 복사되었습니다.' , { type : 'success' } ) ;
} ) . catch ( function ( ) {
// Fallback for older browsers
var temp = $ ( '<input>' ) . val ( url ) . appendTo ( 'body' ) . select ( ) ;
document . execCommand ( 'copy' ) ;
temp . remove ( ) ;
$ . notify ( 'URL이 클립보드에 복사되었습니다.' , { type : 'success' } ) ;
} ) ;
} ) ;
// 테스트 알림 버튼
$ ( document ) . on ( 'click' , '#test_notify_btn' , function ( e ) {
e . preventDefault ( ) ;
var btn = $ ( this ) ;
btn . prop ( 'disabled' , true ) . html ( '<i class="bi bi-arrow-repeat spin mr-1"></i> 전송 중...' ) ;
$ . ajax ( {
url : '/' + package _name + '/ajax/' + sub + '/test_notification' ,
type : "POST" ,
cache : false ,
dataType : "json" ,
success : function ( ret ) {
if ( ret . ret == 'success' ) {
$ . notify ( '테스트 알림을 전송했습니다!' , { type : 'success' } ) ;
} else {
$ . notify ( ret . msg || '알림 전송 실패' , { type : 'danger' } ) ;
}
} ,
error : function ( xhr , status , error ) {
$ . notify ( '에러: ' + error , { type : 'danger' } ) ;
} ,
complete : function ( ) {
btn . prop ( 'disabled' , false ) . html ( '<i class="bi bi-send mr-1"></i> 테스트 알림 전송' ) ;
}
} ) ;
} ) ;
2026-01-01 16:57:48 +09:00
// ======================================
// 폴더 탐색 기능
// ======================================
var currentBrowsePath = '' ;
var parentPath = null ;
$ ( '#browse_folder_btn' ) . on ( 'click' , function ( ) {
var initialPath = $ ( '#linkkf_download_path' ) . val ( ) || '' ;
loadFolderList ( initialPath ) ;
$ ( '#folderBrowserModal' ) . modal ( 'show' ) ;
} ) ;
function loadFolderList ( path ) {
$ ( '#folder_list' ) . html ( '<div class="text-center text-muted py-4"><i class="bi bi-arrow-repeat"></i> 로딩 중...</div>' ) ;
$ . ajax ( {
url : '/' + package _name + '/ajax/' + sub + '/browse_dir' ,
type : 'POST' ,
data : { path : path } ,
dataType : 'json' ,
success : function ( ret ) {
if ( ret . ret === 'success' ) {
currentBrowsePath = ret . current _path ;
parentPath = ret . parent _path ;
$ ( '#current_path_display' ) . text ( currentBrowsePath ) ;
$ ( '#folder_go_up' ) . prop ( 'disabled' , ! parentPath ) ;
var html = '' ;
if ( parentPath ) {
html += '<div class="folder-item folder-parent d-flex align-items-center p-2 rounded" data-path="' + escapeHtml ( parentPath ) + '" style="cursor: pointer; border-bottom: 1px solid rgba(255,255,255,0.1);">' ;
html += '<i class="bi bi-folder-symlink text-info mr-2"></i><span class="text-light">..</span><span class="text-muted ml-2">(상위 폴더)</span></div>' ;
}
html += '<div class="folder-item folder-current d-flex align-items-center p-2 rounded" data-path="' + escapeHtml ( currentBrowsePath ) + '" style="cursor: pointer; border-bottom: 1px solid rgba(255,255,255,0.05);">' ;
html += '<i class="bi bi-folder-check text-success mr-2"></i><span class="text-light">.</span><span class="text-muted ml-2">(현재 폴더)</span></div>' ;
if ( ret . directories . length === 0 ) {
html += '<div class="text-center text-muted py-3"><small>하위 폴더 없음</small></div>' ;
} else {
for ( var i = 0 ; i < ret . directories . length ; i ++ ) {
var dir = ret . directories [ i ] ;
html += '<div class="folder-item d-flex align-items-center p-2 rounded" data-path="' + escapeHtml ( dir . path ) + '" style="cursor: pointer;">' ;
html += '<i class="bi bi-folder-fill text-warning mr-2"></i><span class="text-light">' + escapeHtml ( dir . name ) + '</span></div>' ;
}
}
$ ( '#folder_list' ) . html ( html ) ;
} else {
$ ( '#folder_list' ) . html ( '<div class="text-center text-danger py-4">로드 실패: ' + ( ret . error || '알 수 없는 오류' ) + '</div>' ) ;
}
} ,
error : function ( xhr , status , error ) {
$ ( '#folder_list' ) . html ( '<div class="text-center text-danger py-4">에러: ' + error + '</div>' ) ;
}
} ) ;
}
$ ( '#folder_list' ) . on ( 'dblclick' , '.folder-item' , function ( ) { loadFolderList ( $ ( this ) . data ( 'path' ) ) ; } ) ;
$ ( '#folder_list' ) . on ( 'click' , '.folder-item' , function ( ) {
$ ( '.folder-item' ) . removeClass ( 'selected' ) . css ( 'background' , '' ) ;
$ ( this ) . addClass ( 'selected' ) . css ( 'background' , 'rgba(16, 185, 129, 0.3)' ) ;
currentBrowsePath = $ ( this ) . data ( 'path' ) ;
$ ( '#current_path_display' ) . text ( currentBrowsePath ) ;
} ) ;
$ ( '#folder_go_up' ) . on ( 'click' , function ( ) { if ( parentPath ) loadFolderList ( parentPath ) ; } ) ;
$ ( '#folder_select_btn' ) . on ( 'click' , function ( ) {
$ ( '#linkkf_download_path' ) . val ( currentBrowsePath ) ;
$ ( '#folderBrowserModal' ) . modal ( 'hide' ) ;
$ . notify ( '저장 폴더가 설정되었습니다: ' + currentBrowsePath , { type : 'success' } ) ;
} ) ;
function escapeHtml ( text ) { var div = document . createElement ( 'div' ) ; div . appendChild ( document . createTextNode ( text ) ) ; return div . innerHTML ; }
2025-12-30 00:50:13 +09:00
< / script >
< style >
/* Smooth Load Transition */
. content-cloak ,
# menu_module_div ,
# menu_page_div {
opacity : 0 ;
transition : opacity 0.5 s ease-out ;
}
/* Staggered Delays for Natural Top-Down Flow */
# menu_module_div . visible {
opacity : 1 ;
transition-delay : 0 ms ;
}
# menu_page_div . visible {
opacity : 1 ;
transition-delay : 150 ms ;
}
. content-cloak . visible {
opacity : 1 ;
transition-delay : 300 ms ;
}
/* Navigation Menu Override (Top Sub-menu) */
ul . nav . nav-pills . bg-light {
background-color : rgba ( 30 , 41 , 59 , 0.6 ) !important ;
backdrop-filter : blur ( 10 px ) ;
border : 1 px solid rgba ( 255 , 255 , 255 , 0.08 ) ;
border-radius : 50 rem !important ;
padding : 6 px !important ;
box-shadow : 0 4 px 20 px rgba ( 0 , 0 , 0 , 0.2 ) !important ;
display : inline-flex !important ;
flex-wrap : wrap ;
justify-content : center ;
width : auto !important ;
margin-bottom : 20 px ;
}
ul . nav . nav-pills . nav-item { margin : 0 2 px ; }
ul . nav . nav-pills . nav-link {
border-radius : 50 rem !important ;
padding : 8 px 20 px !important ;
color : #94a3b8 !important ;
font-weight : 600 ;
transition : all 0.3 s ease ;
}
ul . nav . nav-pills . nav-link : hover {
background-color : rgba ( 255 , 255 , 255 , 0.1 ) ;
color : #fff !important ;
transform : translateY ( -1 px ) ;
}
ul . nav . nav-pills . nav-link . active {
2026-01-01 02:19:22 +09:00
background : linear-gradient ( 135 deg , #10b981 0 % , #059669 100 % ) !important ;
2025-12-30 00:50:13 +09:00
color : #fff !important ;
2026-01-01 02:19:22 +09:00
box-shadow : 0 4 px 12 px rgba ( 16 , 185 , 129 , 0.3 ) !important ;
2025-12-30 00:50:13 +09:00
}
< / style >
< script type = "text/javascript" >
$ ( document ) . ready ( function ( ) {
// Smooth Load Trigger
setTimeout ( function ( ) {
$ ( '.content-cloak, #menu_module_div, #menu_page_div' ) . addClass ( 'visible' ) ;
} , 100 ) ;
2026-01-08 16:38:24 +09:00
initTagChips ( ) ;
} ) ;
// Tag Chips 기능
function initTagChips ( ) {
var value = $ ( '#linkkf_auto_code_list' ) . val ( ) . trim ( ) ;
if ( value ) {
var items = value . split ( /[|\n]/ ) . map ( s => s . trim ( ) ) . filter ( s => s . length > 0 ) ;
items . forEach ( function ( item , index ) { addTagChip ( item , index ) ; } ) ;
}
updateTagIndices ( ) ;
}
function addTagChip ( text , index ) {
var chip = $ ( '<div class="tag-chip" draggable="true" data-value="' + escapeHtml ( text ) + '"><span class="tag-index">' + ( index + 1 ) + '</span><span class="tag-text" title="' + escapeHtml ( text ) + '">' + escapeHtml ( text ) + '</span><span class="tag-remove"><i class="bi bi-x"></i></span></div>' ) ;
$ ( '#tag_chips_container' ) . append ( chip ) ;
}
function updateHiddenField ( ) {
var values = [ ] ;
$ ( '#tag_chips_container .tag-chip' ) . each ( function ( ) { values . push ( $ ( this ) . data ( 'value' ) ) ; } ) ;
$ ( '#linkkf_auto_code_list' ) . val ( values . join ( '|' ) ) ;
}
function updateTagIndices ( ) {
$ ( '#tag_chips_container .tag-chip' ) . each ( function ( i ) { $ ( this ) . find ( '.tag-index' ) . text ( i + 1 ) ; } ) ;
}
$ ( '#tag_chips_container' ) . on ( 'click' , '.tag-remove' , function ( e ) {
e . stopPropagation ( ) ;
var chip = $ ( this ) . closest ( '.tag-chip' ) ;
chip . fadeOut ( 200 , function ( ) { $ ( this ) . remove ( ) ; updateHiddenField ( ) ; updateTagIndices ( ) ; } ) ;
2025-12-30 00:50:13 +09:00
} ) ;
2026-01-08 16:38:24 +09:00
$ ( '#add_tag_btn' ) . on ( 'click' , function ( ) { addNewTag ( ) ; } ) ;
$ ( '#new_tag_input' ) . on ( 'keypress' , function ( e ) { if ( e . which === 13 ) { e . preventDefault ( ) ; addNewTag ( ) ; } } ) ;
function addNewTag ( ) {
var text = $ ( '#new_tag_input' ) . val ( ) . trim ( ) ;
if ( ! text ) { $ . notify ( '작품명을 입력하세요' , { type : 'warning' } ) ; return ; }
var exists = false ;
$ ( '#tag_chips_container .tag-chip' ) . each ( function ( ) { if ( $ ( this ) . data ( 'value' ) === text ) exists = true ; } ) ;
if ( exists ) { $ . notify ( '이미 등록된 작품입니다' , { type : 'warning' } ) ; return ; }
addTagChip ( text , $ ( '#tag_chips_container .tag-chip' ) . length ) ;
updateHiddenField ( ) ;
$ ( '#new_tag_input' ) . val ( '' ) ;
$ . notify ( '"' + text + '" 추가됨' , { type : 'success' } ) ;
}
var draggedChip = null ;
$ ( '#tag_chips_container' ) . on ( 'dragstart' , '.tag-chip' , function ( e ) { draggedChip = this ; $ ( this ) . addClass ( 'dragging' ) ; } ) ;
$ ( '#tag_chips_container' ) . on ( 'dragend' , '.tag-chip' , function ( ) { $ ( this ) . removeClass ( 'dragging' ) ; draggedChip = null ; updateHiddenField ( ) ; updateTagIndices ( ) ; } ) ;
$ ( '#tag_chips_container' ) . on ( 'dragover' , function ( e ) { e . preventDefault ( ) ; var after = getDragAfterElement ( this , e . originalEvent . clientX ) ; if ( ! after ) this . appendChild ( draggedChip ) ; else this . insertBefore ( draggedChip , after ) ; } ) ;
function getDragAfterElement ( container , x ) {
return [ ... container . querySelectorAll ( '.tag-chip:not(.dragging)' ) ] . reduce ( ( c , el ) => { var box = el . getBoundingClientRect ( ) ; var offset = x - box . left - box . width / 2 ; return ( offset < 0 && offset > c . offset ) ? { offset , element : el } : c ; } , { offset : Number . NEGATIVE _INFINITY } ) . element ;
}
2026-01-09 22:18:48 +09:00
// ======================================
// 자가 업데이트 기능
// ======================================
2026-01-11 14:00:27 +09:00
$ ( document ) . on ( 'click' , '#btn-self-update' , function ( ) {
$ ( '#updateConfirmModal' ) . modal ( 'show' ) ;
} ) ;
// 실제 업데이트 실행 (모달에서 확인 버튼 클릭 시)
$ ( document ) . on ( 'click' , '#confirmUpdateBtn' , function ( ) {
$ ( '#updateConfirmModal' ) . modal ( 'hide' ) ;
2026-01-09 22:18:48 +09:00
2026-01-11 14:00:27 +09:00
var btn = $ ( '#btn-self-update' ) ;
2026-01-09 22:18:48 +09:00
var originalHTML = btn . html ( ) ;
btn . prop ( 'disabled' , true ) . html ( '<i class="bi bi-arrow-repeat spin"></i> 업데이트 중...' ) ;
$ . ajax ( {
url : '/' + package _name + '/ajax/' + sub + '/self_update' ,
type : 'POST' ,
dataType : 'json' ,
success : function ( ret ) {
if ( ret . ret === 'success' ) {
$ . notify ( '<strong>업데이트 완료!</strong> 페이지를 새로고침합니다.' , { type : 'success' } ) ;
setTimeout ( function ( ) { location . reload ( ) ; } , 1500 ) ;
} else {
$ . notify ( '<strong>업데이트 실패: ' + ret . msg + '</strong>' , { type : 'danger' } ) ;
}
} ,
error : function ( ) {
$ . notify ( '<strong>업데이트 중 오류 발생</strong>' , { type : 'danger' } ) ;
} ,
complete : function ( ) {
btn . prop ( 'disabled' , false ) . html ( originalHTML ) ;
}
} ) ;
} ) ;
2022-10-29 18:28:24 +09:00
< / script >
2026-01-11 14:00:27 +09:00
<!-- Update Confirmation Modal (Linkkf Green Theme) -->
< div class = "modal fade" id = "updateConfirmModal" tabindex = "-1" role = "dialog" aria-hidden = "true" >
< div class = "modal-dialog modal-dialog-centered" role = "document" >
< div class = "modal-content animate__animated animate__zoomIn" style = "background: linear-gradient(145deg, #1e293b 0%, #0f172a 100%); border: 1px solid rgba(16, 185, 129, 0.3); border-radius: 20px; box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);" >
< div class = "modal-body text-center" style = "padding: 40px 30px;" >
< div style = "width: 80px; height: 80px; background: linear-gradient(135deg, rgba(16, 185, 129, 0.2) 0%, rgba(5, 150, 105, 0.2) 100%); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 24px; border: 2px solid rgba(16, 185, 129, 0.3);" >
< i class = "bi bi-arrow-repeat" style = "color: #10b981; font-size: 36px;" > < / i >
< / div >
< h4 style = "color: #f1f5f9; font-weight: 700; margin-bottom: 12px;" > 플러그인 업데이트< / h4 >
< p style = "color: #94a3b8; font-size: 15px; margin-bottom: 8px;" > 최신 코드를 다운로드하고 플러그인을 리로드합니다.< / p >
< p style = "color: #64748b; font-size: 13px; margin-bottom: 32px;" > < i class = "bi bi-info-circle" > < / i > 서버 재시작 없이 즉시 적용됩니다.< / p >
< div style = "display: flex; gap: 12px; justify-content: center;" >
< button type = "button" class = "btn" data-dismiss = "modal" style = "width: 120px; background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.2); color: #94a3b8; border-radius: 10px; padding: 12px 24px; font-weight: 600;" > 취소< / button >
< button type = "button" id = "confirmUpdateBtn" class = "btn" style = "width: 140px; background: linear-gradient(135deg, #10b981 0%, #059669 100%); border: none; color: white; border-radius: 10px; padding: 12px 24px; font-weight: 600; box-shadow: 0 4px 15px rgba(16, 185, 129, 0.4);" >
< i class = "bi bi-download" > < / i > 업데이트
< / button >
< / div >
< / div >
< / div >
< / div >
< / div >
< style >
/* Update Button Enhanced Visibility (Linkkf Green) */
# btn-self-update {
background : linear-gradient ( 135 deg , #10b981 0 % , #059669 100 % ) !important ;
border : none !important ;
color : white !important ;
font-weight : 600 ;
padding : 8 px 16 px ;
border-radius : 8 px ;
box-shadow : 0 2 px 8 px rgba ( 16 , 185 , 129 , 0.3 ) ;
transition : all 0.2 s ease ;
}
# btn-self-update : hover : not ( : disabled ) {
background : linear-gradient ( 135 deg , #059669 0 % , #047857 100 % ) !important ;
transform : translateY ( -1 px ) ;
box-shadow : 0 4 px 12 px rgba ( 16 , 185 , 129 , 0.4 ) ;
}
# btn-self-update : disabled {
background : linear-gradient ( 135 deg , #475569 0 % , #334155 100 % ) !important ;
color : #94a3b8 !important ;
cursor : not-allowed ;
box-shadow : none ;
opacity : 0.7 ;
}
# btn-self-update . bi-arrow-repeat . spin ,
. spin {
animation : spin 1 s linear infinite ;
}
@ keyframes spin {
from { transform : rotate ( 0 deg ) ; }
to { transform : rotate ( 360 deg ) ; }
}
/* Animate.css for modal */
. animate__animated { animation-duration : 0.3 s ; }
. animate__zoomIn { animation-name : zoomIn ; }
@ keyframes zoomIn {
from { opacity : 0 ; transform : scale3d ( 0.3 , 0.3 , 0.3 ) ; }
50 % { opacity : 1 ; }
}
< / style >
2026-04-01 19:09:14 +09:00
{% endblock %}
