354 lines
17 KiB
HTML
354 lines
17 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="ko">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Bookmark Divider</title>
|
|
<link id="favicon" rel="icon" href="./favicon/default.png">
|
|
<link rel="stylesheet" href="./style.css">
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<h1 id="site-title">Bookmark Divider</h1>
|
|
<div>북마크를 깔끔하게 정리하기 위해 만든 사이트입니다.</div>
|
|
<div>아래 색상 블록을 드래그하여 원하는 북마크 사이에 놓기만 하면 쉽게 등록할 수 있습니다.</div>
|
|
<div>폴더로 구분된 북마크에도 가로 또는 아이콘형 북마크와 이름을 추가하여 보기 좋게 섹션을 구성할 수 있습니다.</div>
|
|
|
|
<div class="line-container">
|
|
<div class="section-line">
|
|
<div class="section-header">
|
|
<h2>가로 라인</h2>
|
|
<div style="display: flex; align-items: end; gap: 1rem;">
|
|
<div style="margin-bottom: 10px;">sample)</div>
|
|
<img src="./favicon/line-green.png" alt="가로 라인">
|
|
</div>
|
|
</div>
|
|
<div class="color-container">
|
|
<div class="color-row">
|
|
<span class="color-name" data-type="line" data-color="blue">Blue</span>
|
|
<a class="color-block" data-type="line" data-color="blue" href="?type=line-blue" draggable="true"
|
|
style="background-color:#3498db;"></a>
|
|
</div>
|
|
<div class="color-row">
|
|
<span class="color-name" data-type="line" data-color="red">Red</span>
|
|
<a class="color-block" data-type="line" data-color="red" href="?type=line-red" draggable="true"
|
|
style="background-color:#e74c3c;"></a>
|
|
</div>
|
|
<div class="color-row">
|
|
<span class="color-name" data-type="line" data-color="green">Green</span>
|
|
<a class="color-block" data-type="line" data-color="green" href="?type=line-green" draggable="true"
|
|
style="background-color:#2ecc71;"></a>
|
|
</div>
|
|
<div class="color-row">
|
|
<span class="color-name" data-type="line" data-color="yellow">Yellow</span>
|
|
<a class="color-block" data-type="line" data-color="yellow" href="?type=line-yellow" draggable="true"
|
|
style="background-color:#f1c40f;"></a>
|
|
</div>
|
|
<div class="color-row">
|
|
<span class="color-name" data-type="line" data-color="orange">Orange</span>
|
|
<a class="color-block" data-type="line" data-color="orange" href="?type=line-orange" draggable="true"
|
|
style="background-color:#e67e22;"></a>
|
|
</div>
|
|
<div class="color-row">
|
|
<span class="color-name" data-type="line" data-color="purple">Purple</span>
|
|
<a class="color-block" data-type="line" data-color="purple" href="?type=line-purple" draggable="true"
|
|
style="background-color:#9b59b6;"></a>
|
|
</div>
|
|
<div class="color-row">
|
|
<span class="color-name" data-type="line" data-color="gray">Gray</span>
|
|
<a class="color-block" data-type="line" data-color="gray" href="?type=line-gray" draggable="true"
|
|
style="background-color:#7f8c8d;"></a>
|
|
</div>
|
|
<div class="color-row">
|
|
<span class="color-name" data-type="line" data-color="mint">Mint</span>
|
|
<a class="color-block" data-type="line" data-color="mint" href="?type=line-mint" draggable="true"
|
|
style="background-color:#00ffff;"></a>
|
|
</div>
|
|
<div class="color-row">
|
|
<span class="color-name" data-type="line" data-color="black">Black</span>
|
|
<a class="color-block" data-type="line" data-color="black" href="?type=line-black" draggable="true"
|
|
style="background-color:#222222;"></a>
|
|
</div>
|
|
<div class="color-row">
|
|
<span class="color-name" data-type="line" data-color="white">White</span>
|
|
<a class="color-block" data-type="line" data-color="white" href="?type=line-white" draggable="true"
|
|
style="background-color:#ffffff;"></a>
|
|
</div>
|
|
|
|
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<div class="section-bar">
|
|
<div class="section-header">
|
|
<h2>세로 라인</h2>
|
|
<div style="display: flex; align-items: end; gap: 1rem;">
|
|
<div style="margin-bottom: 10px;">sample)</div>
|
|
<img src="./favicon/bar-green.png" alt="세로 라인">
|
|
</div>
|
|
</div>
|
|
<div class="color-container">
|
|
<div class="color-row">
|
|
<span class="color-name" data-type="bar" data-color="blue">Blue</span>
|
|
<a class="color-block" data-type="bar" data-color="blue" href="?type=bar-blue" draggable="true"
|
|
style="background-color:#3498db;"></a>
|
|
</div>
|
|
<div class="color-row">
|
|
<span class="color-name" data-type="bar" data-color="red">Red</span>
|
|
<a class="color-block" data-type="bar" data-color="red" href="?type=bar-red" draggable="true"
|
|
style="background-color:#e74c3c;"></a>
|
|
</div>
|
|
<div class="color-row">
|
|
<span class="color-name" data-type="bar" data-color="green">Green</span>
|
|
<a class="color-block" data-type="bar" data-color="green" href="?type=bar-green" draggable="true"
|
|
style="background-color:#2ecc71;"></a>
|
|
</div>
|
|
<div class="color-row">
|
|
<span class="color-name" data-type="bar" data-color="yellow">Yellow</span>
|
|
<a class="color-block" data-type="bar" data-color="yellow" href="?type=bar-yellow" draggable="true"
|
|
style="background-color:#f1c40f;"></a>
|
|
</div>
|
|
<div class="color-row">
|
|
<span class="color-name" data-type="bar" data-color="orange">Orange</span>
|
|
<a class="color-block" data-type="bar" data-color="orange" href="?type=bar-orange" draggable="true"
|
|
style="background-color:#e67e22;"></a>
|
|
</div>
|
|
<div class="color-row">
|
|
<span class="color-name" data-type="bar" data-color="purple">Purple</span>
|
|
<a class="color-block" data-type="bar" data-color="purple" href="?type=bar-purple" draggable="true"
|
|
style="background-color:#9b59b6;"></a>
|
|
</div>
|
|
<div class="color-row">
|
|
<span class="color-name" data-type="bar" data-color="gray">Gray</span>
|
|
<a class="color-block" data-type="bar" data-color="gray" href="?type=bar-gray" draggable="true"
|
|
style="background-color:#7f8c8d;"></a>
|
|
</div>
|
|
<div class="color-row">
|
|
<span class="color-name" data-type="bar" data-color="mint">Mint</span>
|
|
<a class="color-block" data-type="bar" data-color="mint" href="?type=bar-mint" draggable="true"
|
|
style="background-color:#00ffff;"></a>
|
|
</div>
|
|
<div class="color-row">
|
|
<span class="color-name" data-type="bar" data-color="black">Black</span>
|
|
<a class="color-block" data-type="bar" data-color="black" href="?type=bar-black" draggable="true"
|
|
style="background-color:#222222;"></a>
|
|
</div>
|
|
<div class="color-row">
|
|
<span class="color-name" data-type="bar" data-color="white">White</span>
|
|
<a class="color-block" data-type="bar" data-color="white" href="?type=bar-white" draggable="true"
|
|
style="background-color:#ffffff;"></a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="line-container">
|
|
<div class="section-bar">
|
|
<div class="section-header">
|
|
<h2>삼각형 (아래로)</h2>
|
|
<div style="display: flex; align-items: end; gap: 1rem;">
|
|
<div style="margin-bottom: 10px;">sample)</div>
|
|
<img src="./favicon/triangle-down-green.png" alt="삼각형 다운">
|
|
</div>
|
|
</div>
|
|
<div class="color-container">
|
|
<div class="color-row">
|
|
<span class="color-name" data-type="triangle-down" data-color="blue">Blue</span>
|
|
<a class="color-block" data-type="triangle-down" data-color="blue" href="?type=triangle-down-blue"
|
|
draggable="true" style="background-color:#3498db;"></a>
|
|
</div>
|
|
<div class="color-row">
|
|
<span class="color-name" data-type="triangle-down" data-color="red">Red</span>
|
|
<a class="color-block" data-type="triangle-down" data-color="red" href="?type=triangle-down-red"
|
|
draggable="true" style="background-color:#e74c3c;"></a>
|
|
</div>
|
|
<div class="color-row">
|
|
<span class="color-name" data-type="triangle-down" data-color="green">Green</span>
|
|
<a class="color-block" data-type="triangle-down" data-color="green" href="?type=triangle-down-green"
|
|
draggable="true" style="background-color:#2ecc71;"></a>
|
|
</div>
|
|
<div class="color-row">
|
|
<span class="color-name" data-type="triangle-down" data-color="yellow">Yellow</span>
|
|
<a class="color-block" data-type="triangle-down" data-color="yellow" href="?type=triangle-down-yellow"
|
|
draggable="true" style="background-color:#f1c40f;"></a>
|
|
</div>
|
|
<div class="color-row">
|
|
<span class="color-name" data-type="triangle-down" data-color="orange">Orange</span>
|
|
<a class="color-block" data-type="triangle-down" data-color="orange" href="?type=triangle-down-orange"
|
|
draggable="true" style="background-color:#e67e22;"></a>
|
|
</div>
|
|
<div class="color-row">
|
|
<span class="color-name" data-type="triangle-down" data-color="purple">Purple</span>
|
|
<a class="color-block" data-type="triangle-down" data-color="purple" href="?type=triangle-down-purple"
|
|
draggable="true" style="background-color:#9b59b6;"></a>
|
|
</div>
|
|
<div class="color-row">
|
|
<span class="color-name" data-type="triangle-down" data-color="gray">Gray</span>
|
|
<a class="color-block" data-type="triangle-down" data-color="gray" href="?type=triangle-down-gray"
|
|
draggable="true" style="background-color:#7f8c8d;"></a>
|
|
</div>
|
|
<div class="color-row">
|
|
<span class="color-name" data-type="triangle-down" data-color="mint">Mint</span>
|
|
<a class="color-block" data-type="triangle-down" data-color="mint" href="?type=triangle-down-mint"
|
|
draggable="true" style="background-color:#00ffff;"></a>
|
|
</div>
|
|
<div class="color-row">
|
|
<span class="color-name" data-type="triangle-down" data-color="black">Black</span>
|
|
<a class="color-block" data-type="triangle-down" data-color="black" href="?type=triangle-down-black"
|
|
draggable="true" style="background-color:#222222;"></a>
|
|
</div>
|
|
<div class="color-row">
|
|
<span class="color-name" data-type="triangle-down" data-color="white">White</span>
|
|
<a class="color-block" data-type="triangle-down" data-color="white" href="?type=triangle-down-white"
|
|
draggable="true" style="background-color:#ffffff;"></a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="section-bar">
|
|
<div class="section-header">
|
|
<h2>삼각형 (위로)</h2>
|
|
<div style="display: flex; align-items: end; gap: 1rem;">
|
|
<div style="margin-bottom: 10px;">sample)</div>
|
|
<img src="./favicon/triangle-up-green.png" alt="삼각형 다운">
|
|
</div>
|
|
</div>
|
|
<div class="color-container">
|
|
<div class="color-row">
|
|
<span class="color-name" data-type="triangle-up" data-color="blue">Blue</span>
|
|
<a class="color-block" data-type="triangle-up" data-color="blue" href="?type=triangle-up-blue"
|
|
draggable="true" style="background-color:#3498db;"></a>
|
|
</div>
|
|
<div class="color-row">
|
|
<span class="color-name" data-type="triangle-up" data-color="red">Red</span>
|
|
<a class="color-block" data-type="triangle-up" data-color="red" href="?type=triangle-up-red" draggable="true"
|
|
style="background-color:#e74c3c;"></a>
|
|
</div>
|
|
<div class="color-row">
|
|
<span class="color-name" data-type="triangle-up" data-color="green">Green</span>
|
|
<a class="color-block" data-type="triangle-up" data-color="green" href="?type=triangle-up-green"
|
|
draggable="true" style="background-color:#2ecc71;"></a>
|
|
</div>
|
|
<div class="color-row">
|
|
<span class="color-name" data-type="triangle-up" data-color="yellow">Yellow</span>
|
|
<a class="color-block" data-type="triangle-up" data-color="yellow" href="?type=triangle-up-yellow"
|
|
draggable="true" style="background-color:#f1c40f;"></a>
|
|
</div>
|
|
<div class="color-row">
|
|
<span class="color-name" data-type="triangle-up" data-color="orange">Orange</span>
|
|
<a class="color-block" data-type="triangle-up" data-color="orange" href="?type=triangle-up-orange"
|
|
draggable="true" style="background-color:#e67e22;"></a>
|
|
</div>
|
|
<div class="color-row">
|
|
<span class="color-name" data-type="triangle-up" data-color="purple">Purple</span>
|
|
<a class="color-block" data-type="triangle-up" data-color="purple" href="?type=triangle-up-purple"
|
|
draggable="true" style="background-color:#9b59b6;"></a>
|
|
</div>
|
|
<div class="color-row">
|
|
<span class="color-name" data-type="triangle-up" data-color="gray">Gray</span>
|
|
<a class="color-block" data-type="triangle-up" data-color="gray" href="?type=triangle-up-gray"
|
|
draggable="true" style="background-color:#7f8c8d;"></a>
|
|
</div>
|
|
<div class="color-row">
|
|
<span class="color-name" data-type="triangle-up" data-color="mint">Mint</span>
|
|
<a class="color-block" data-type="triangle-up" data-color="mint" href="?type=triangle-up-mint"
|
|
draggable="true" style="background-color:#00ffff;"></a>
|
|
</div>
|
|
<div class="color-row">
|
|
<span class="color-name" data-type="triangle-up" data-color="black">Black</span>
|
|
<a class="color-block" data-type="triangle-up" data-color="black" href="?type=triangle-up-black"
|
|
draggable="true" style="background-color:#222222;"></a>
|
|
</div>
|
|
<div class="color-row">
|
|
<span class="color-name" data-type="triangle-up" data-color="white">White</span>
|
|
<a class="color-block" data-type="triangle-up" data-color="white" href="?type=triangle-up-white"
|
|
draggable="true" style="background-color:#ffffff;"></a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<!-- Coupang -->
|
|
<div class="ads_coupang">
|
|
<iframe
|
|
src="https://ads-partners.coupang.com/widgets.html?id=915533&template=carousel&trackingCode=AF6561083&subId=&width=1280&height=128&tsource="
|
|
width="100%" height="128" frameborder="0" scrolling="no" referrerpolicy="unsafe-url" browsingtopics></iframe>
|
|
</div>
|
|
|
|
<script>
|
|
const favicon = document.getElementById('favicon');
|
|
const siteTitle = document.getElementById('site-title');
|
|
|
|
// 왼쪽 이름 클릭 → URL & 파비콘 변경
|
|
const colorNames = document.querySelectorAll('.color-name');
|
|
colorNames.forEach(name => {
|
|
name.addEventListener('click', () => {
|
|
const type = name.dataset.type;
|
|
const color = name.dataset.color;
|
|
const combined = `${type}-${color}`;
|
|
const newUrl = `${window.location.pathname}?type=${combined}`;
|
|
|
|
history.pushState(null, '', newUrl);
|
|
favicon.href = `favicon/${combined}.png`;
|
|
});
|
|
});
|
|
|
|
// 오른쪽 색상 블록 클릭은 아무 동작 없이 드래그만 가능
|
|
const colorBlocks = document.querySelectorAll('.color-block');
|
|
colorBlocks.forEach(block => {
|
|
block.addEventListener('click', e => e.preventDefault()); // 클릭 무시
|
|
});
|
|
|
|
// 사이트명 클릭 → 디폴트 상태
|
|
siteTitle.addEventListener('click', () => {
|
|
history.pushState(null, '', window.location.pathname);
|
|
favicon.href = 'favicon/default.png';
|
|
updateSelectedBlock();
|
|
});
|
|
|
|
// 페이지 로드 시 쿼리 읽어서 파비콘 적용
|
|
const params = new URLSearchParams(window.location.search);
|
|
const typeParam = params.get('type');
|
|
if (typeParam) {
|
|
favicon.href = `favicon/${typeParam}.png`;
|
|
}
|
|
|
|
function updateSelectedBlock() {
|
|
// 기존 선택 표시 제거
|
|
document.querySelectorAll('.color-block.selected').forEach(el => el.classList.remove('selected'));
|
|
|
|
// URL 쿼리 확인
|
|
const params = new URLSearchParams(window.location.search);
|
|
const typeParam = params.get('type');
|
|
|
|
if (!typeParam) return;
|
|
|
|
const selectedBlock = document.querySelector(`.color-block[href="?type=${typeParam}"]`);
|
|
if (selectedBlock) selectedBlock.classList.add('selected');
|
|
}
|
|
|
|
// 이름 클릭 시 선택 표시 업데이트
|
|
colorNames.forEach(name => {
|
|
name.addEventListener('click', () => {
|
|
const type = name.dataset.type;
|
|
const color = name.dataset.color;
|
|
const combined = `${type}-${color}`;
|
|
const newUrl = `${window.location.pathname}?type=${combined}`;
|
|
|
|
history.pushState(null, '', newUrl);
|
|
favicon.href = `favicon/${combined}.png`;
|
|
|
|
updateSelectedBlock();
|
|
});
|
|
});
|
|
|
|
window.addEventListener('load', updateSelectedBlock);
|
|
</script>
|
|
|
|
</body>
|
|
|
|
</html> |