プロジェクト

全般

プロフィール

ダウンロード (40.6 KB)

機能 #30 » line-redmine-final.html

新テーマのホーム - Redmine Admin, 2025-05-11 04:59

 
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>LINE風 Redmineテーマ</title>
<style>
/* ベースとなる変数 */
:root {
--line-primary: #06C755; /* LINEの特徴的なグリーン */
--line-secondary: #1E1E1E; /* ほぼ黒（テキスト用） */
--line-background: #F1F1F4; /* 背景色 */
--line-light-gray: #E8EAED; /* 明るい背景色 */
--line-mid-gray: #D8D8DD; /* 境界線・区切り線 */
--line-dark-gray: #8E8E93; /* セカンダリテキスト */
--line-white: #FFFFFF; /* 白背景 */
--line-sidebar-bg: #1E1E1E; /* サイドバー背景色（黒） */
--line-active-item: #E1F7E8; /* アクティブ項目 */
--line-border: #DCDCE0; /* ボーダー色 */
--border-radius-small: 6px;
--border-radius-medium: 10px;
--border-radius-large: 14px;
--shadow-small: 0 1px 3px rgba(0,0,0,0.1);
--shadow-medium: 0 4px 6px rgba(0,0,0,0.08);
--transition-speed: 0.3s;
}
/* リセット */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Noto Sans JP', sans-serif;
background-color: var(--line-background);
color: var(--line-secondary);
line-height: 1.5;
font-size: 14px;
height: 100vh;
display: flex;
flex-direction: column;
}
/* レイアウト */
.layout {
display: flex;
height: calc(100vh - 56px);
overflow: hidden;
}
/* ヘッダー */
header {
background-color: var(--line-primary);
height: 56px;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 16px;
border-bottom: 1px solid var(--line-border);
box-shadow: var(--shadow-small);
color: white;
}
.logo {
display: flex;
align-items: center;
font-weight: 600;
font-size: 16px;
color: white;
}
.logo img {
width: 28px;
height: 28px;
margin-right: 10px;
}
.header-right {
display: flex;
align-items: center;
gap: 15px;
}
.search-box {
position: relative;
}
.search-box input {
background-color: rgba(255, 255, 255, 0.2);
border: none;
border-radius: var(--border-radius-medium);
padding: 10px 12px 10px 36px;
width: 220px;
font-size: 14px;
color: white;
}
.search-box input::placeholder {
color: rgba(255, 255, 255, 0.7);
}
.search-box::before {
content: "⚲";
position: absolute;
left: 12px;
top: 50%;
transform: translateY(-50%);
color: white;
font-size: 16px;
}
.user-avatar {
width: 34px;
height: 34px;
border-radius: 50%;
background-color: white;
display: flex;
align-items: center;
justify-content: center;
color: var(--line-primary);
font-weight: bold;
box-shadow: var(--shadow-small);
cursor: pointer;
}
/* サイドバー */
.sidebar {
display: flex;
height: 100%;
}
/* アイコンサイドバー（黒背景） */
.icon-sidebar {
width: 56px;
background-color: var(--line-sidebar-bg);
height: 100%;
padding: 10px 0;
display: flex;
flex-direction: column;
overflow-y: auto;
z-index: 10;
}
.icon-item {
height: 40px;
display: flex;
justify-content: center;
align-items: center;
margin: 4px 8px;
border-radius: var(--border-radius-small);
color: #A0A0A0;
cursor: pointer;
transition: all var(--transition-speed) ease;
}
.icon-item.active {
background-color: var(--line-primary);
color: white;
}
.icon-item:hover {
background-color: #333333;
color: white;
}
.icon-item svg {
width: 20px;
height: 20px;
fill: currentColor;
}
.sidebar-divider {
height: 1px;
background-color: #333333;
margin: 8px 8px;
}
/* 拡張サイドバー（ドロワー - 白背景） */
.drawer-sidebar {
width: 0;
background-color: var(--line-white);
height: 100%;
border-right: 1px solid var(--line-border);
overflow: hidden;
transition: width var(--transition-speed) ease;
box-shadow: var(--shadow-medium);
position: relative;
z-index: 9;
}
.drawer-sidebar.active {
width: 250px;
}
.drawer-content {
width: 250px;
padding: 15px 0;
overflow-y: auto;
height: 100%;
}
/* ドロワーヘッダー（折りたたみボタン付き） */
.drawer-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 15px;
border-bottom: 1px solid var(--line-border);
margin-bottom: 10px;
}
.drawer-title {
font-weight: 600;
color: var(--line-dark-gray);
}
.drawer-collapse {
width: 26px;
height: 26px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
color: var(--line-dark-gray);
cursor: pointer;
background-color: var(--line-light-gray);
transition: all var(--transition-speed) ease;
}
.drawer-collapse:hover {
background-color: var(--line-mid-gray);
color: var(--line-secondary);
}
.drawer-section {
margin-bottom: 20px;
}
.section-title {
padding: 5px 15px;
font-size: 12px;
font-weight: 600;
color: var(--line-dark-gray);
}
.drawer-item {
padding: 10px 15px;
margin: 2px 8px;
display: flex;
align-items: center;
cursor: pointer;
border-radius: var(--border-radius-small);
transition: all var(--transition-speed) ease;
}
.drawer-item.active {
background-color: var(--line-active-item);
color: var(--line-primary);
font-weight: 500;
}
.drawer-item:hover {
background-color: var(--line-light-gray);
transform: translateY(-1px);
}
.drawer-item i {
display: flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
margin-right: 10px;
color: var(--line-primary);
}
.drawer-item.active i {
color: var(--line-primary);
}
/* メインコンテンツ */
.main-content {
flex: 1;
display: flex;
flex-direction: column;
overflow: hidden;
}
.tab-bar {
background-color: var(--line-white);
height: 48px;
padding: 0 10px;
display: flex;
align-items: center;
border-bottom: 1px solid var(--line-border);
overflow-x: auto;
box-shadow: var(--shadow-small);
}
.tab {
display: flex;
align-items: center;
height: 36px;
padding: 0 15px;
margin-right: 8px;
background-color: var(--line-light-gray);
border-radius: var(--border-radius-medium);
cursor: pointer;
border: 1px solid var(--line-mid-gray);
min-width: 120px;
max-width: 200px;
transition: all var(--transition-speed) ease;
}
.tab.active {
background-color: var(--line-active-item);
color: var(--line-primary);
font-weight: 500;
}
.tab:hover {
transform: translateY(-1px);
box-shadow: var(--shadow-small);
}
.tab i {
margin-right: 8px;
width: 18px;
height: 18px;
display: flex;
align-items: center;
justify-content: center;
color: var(--line-primary);
}
.tab-name {
flex: 1;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.tab-close {
margin-left: 8px;
width: 16px;
height: 16px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
color: var(--line-dark-gray);
font-size: 14px;
}
.tab-close:hover {
background-color: rgba(0, 0, 0, 0.1);
}
/* コンテンツエリア */
.content-area {
flex: 1;
padding: 20px;
overflow-y: auto;
}
.content-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
}
.content-title {
font-size: 24px;
font-weight: 600;
}
.button {
background-color: var(--line-primary);
color: white;
border: none;
border-radius: var(--border-radius-medium);
padding: 10px 16px;
font-weight: 500;
cursor: pointer;
display: flex;
align-items: center;
transition: all var(--transition-speed) ease;
}
.button:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-medium);
}
.button i {
margin-right: 8px;
display: flex;
align-items: center;
justify-content: center;
}
/* ウェルカムエリア */
.welcome-card {
background-color: var(--line-white);
border-radius: var(--border-radius-large);
overflow: hidden;
margin-bottom: 20px;
box-shadow: var(--shadow-medium);
border: 1px solid var(--line-mid-gray);
}
.welcome-header {
padding: 15px 20px;
background-color: var(--line-active-item);
display: flex;
align-items: center;
border-bottom: 1px solid var(--line-mid-gray);
}
.welcome-title {
font-weight: 600;
font-size: 18px;
display: flex;
align-items: center;
}
.welcome-title i {
margin-right: 10px;
color: var(--line-primary);
display: flex;
align-items: center;
justify-content: center;
}
.welcome-body {
padding: 20px;
}
/* プロジェクト一覧 */
.project-list {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 20px;
}
.project-card {
background-color: var(--line-white);
border-radius: var(--border-radius-medium);
overflow: hidden;
box-shadow: var(--shadow-small);
border: 1px solid var(--line-mid-gray);
transition: all var(--transition-speed) ease;
}
.project-card:hover {
transform: translateY(-3px);
box-shadow: var(--shadow-medium);
}
.project-header {
padding: 12px 15px;
background-color: var(--line-active-item);
border-bottom: 1px solid var(--line-mid-gray);
}
.project-title {
font-weight: 600;
display: flex;
align-items: center;
}
.project-title i {
margin-right: 8px;
color: var(--line-primary);
display: flex;
align-items: center;
justify-content: center;
width: 20px;
height: 20px;
}
.project-body {
padding: 15px;
}
.project-desc {
margin-bottom: 15px;
color: var(--line-dark-gray);
font-size: 13px;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.project-actions {
display: flex;
justify-content: space-between;
align-items: center;
}
.project-stats {
display: flex;
gap: 10px;
color: var(--line-dark-gray);
font-size: 12px;
}
.project-stat {
display: flex;
align-items: center;
}
.project-stat i {
margin-right: 4px;
display: flex;
align-items: center;
justify-content: center;
}
.button-outline {
background-color: var(--line-white);
color: var(--line-secondary);
border: 1px solid var(--line-mid-gray);
border-radius: var(--border-radius-medium);
padding: 6px 12px;
font-size: 13px;
cursor: pointer;
transition: all var(--transition-speed) ease;
}
.button-outline:hover {
background-color: var(--line-light-gray);
transform: translateY(-1px);
}
/* フッター */
.footer-bar {
background-color: var(--line-white);
height: 36px;
display: flex;
align-items: center;
border-top: 1px solid var(--line-border);
padding: 0 10px;
color: var(--line-dark-gray);
font-size: 12px;
}
/* スクロールバーカスタマイズ */
::-webkit-scrollbar {
width: 8px;
height: 8px;
}
::-webkit-scrollbar-track {
background: var(--line-light-gray);
border-radius: 4px;
}
::-webkit-scrollbar-thumb {
background: #BEBEC2;
border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
background: var(--line-dark-gray);
}
/* SVGアイコン */
.icon {
display: inline-flex;
align-items: center;
justify-content: center;
}
.icon svg {
width: 100%;
height: 100%;
}
/* レスポンシブ対応 */
@media (max-width: 768px) {
.drawer-sidebar.active {
position: absolute;
top: 56px;
left: 56px;
bottom: 0;
z-index: 100;
}
.project-list {
grid-template-columns: 1fr;
}
}
</style>
</head>
<body>
<!-- ヘッダー -->
<header>
<div class="logo">
<img src="/api/placeholder/28/28" alt="LINE Redmine">
<span>LINE Redmine</span>
</div>
<div class="header-right">
<div class="search-box">
<input type="text" placeholder="検索...">
</div>
<div class="user-avatar">U</div>
</div>
</header>
<!-- メインレイアウト -->
<div class="layout">
<!-- サイドバー -->
<div class="sidebar">
<!-- アイコンサイドバー（黒背景） -->
<div class="icon-sidebar">
<!-- ホーム -->
<div class="icon-item active" data-section="home">
<svg viewBox="0 0 24 24">
<path d="M10,20V14H14V20H19V12H22L12,3L2,12H5V20H10Z" />
</svg>
</div>
<!-- マイページ -->
<div class="icon-item" data-section="mypage">
<svg viewBox="0 0 24 24">
<path d="M12,4A4,4 0 0,1 16,8A4,4 0 0,1 12,12A4,4 0 0,1 8,8A4,4 0 0,1 12,4M12,14C16.42,14 20,15.79 20,18V20H4V18C4,15.79 7.58,14 12,14Z" />
</svg>
</div>
<!-- プロジェクト -->
<div class="icon-item" data-section="projects">
<svg viewBox="0 0 24 24">
<path d="M3,3H21V7H3V3M4,8H20V21H4V8M9.5,11A0.5,0.5 0 0,0 9,11.5V13H15V11.5A0.5,0.5 0 0,0 14.5,11H9.5Z" />
</svg>
</div>
<!-- チケット -->
<div class="icon-item" data-section="tickets">
<svg viewBox="0 0 24 24">
<path d="M3,5H9V11H3V5M5,7V9H7V7H5M11,7H21V9H11V7M11,15H21V17H11V15M5,13V15H7V13H5M3,13H9V19H3V13Z" />
</svg>
</div>
<div class="sidebar-divider"></div>
<!-- 管理 -->
<div class="icon-item" data-section="admin">
<svg viewBox="0 0 24 24">
<path d="M12,15.5A3.5,3.5 0 0,1 8.5,12A3.5,3.5 0 0,1 12,8.5A3.5,3.5 0 0,1 15.5,12A3.5,3.5 0 0,1 12,15.5M19.43,12.97C19.47,12.65 19.5,12.33 19.5,12C19.5,11.67 19.47,11.34 19.43,11L21.54,9.37C21.73,9.22 21.78,8.95 21.66,8.73L19.66,5.27C19.54,5.05 19.27,4.96 19.05,5.05L16.56,6.05C16.04,5.66 15.5,5.32 14.87,5.07L14.5,2.42C14.46,2.18 14.25,2 14,2H10C9.75,2 9.54,2.18 9.5,2.42L9.13,5.07C8.5,5.32 7.96,5.66 7.44,6.05L4.95,5.05C4.73,4.96 4.46,5.05 4.34,5.27L2.34,8.73C2.21,8.95 2.27,9.22 2.46,9.37L4.57,11C4.53,11.34 4.5,11.67 4.5,12C4.5,12.33 4.53,12.65 4.57,12.97L2.46,14.63C2.27,14.78 2.21,15.05 2.34,15.27L4.34,18.73C4.46,18.95 4.73,19.03 4.95,18.95L7.44,17.94C7.96,18.34 8.5,18.68 9.13,18.93L9.5,21.58C9.54,21.82 9.75,22 10,22H14C14.25,22 14.46,21.82 14.5,21.58L14.87,18.93C15.5,18.67 16.04,18.34 16.56,17.94L19.05,18.95C19.27,19.03 19.54,18.95 19.66,18.73L21.66,15.27C21.78,15.05 21.73,14.78 21.54,14.63L19.43,12.97Z" />
</svg>
</div>
<div class="sidebar-divider"></div>
<!-- ユーザー設定 -->
<div class="icon-item" data-section="user">
<svg viewBox="0 0 24 24">
<path d="M12,4A4,4 0 0,1 16,8A4,4 0 0,1 12,12A4,4 0 0,1 8,8A4,4 0 0,1 12,4M12,6A2,2 0 0,0 10,8A2,2 0 0,0 12,10A2,2 0 0,0 14,8A2,2 0 0,0 12,6M12,13C14.67,13 20,14.33 20,17V20H4V17C4,14.33 9.33,13 12,13M12,14.9C9.03,14.9 5.9,16.36 5.9,17V18.1H18.1V17C18.1,16.36 14.97,14.9 12,14.9Z" />
</svg>
</div>
<!-- 設定 -->
<div class="icon-item" data-section="settings">
<svg viewBox="0 0 24 24">
<path d="M19.14,12.94c0.04-0.3,0.06-0.61,0.06-0.94c0-0.32-0.02-0.64-0.07-0.94l2.03-1.58c0.18-0.14,0.23-0.41,0.12-0.61 l-1.92-3.32c-0.12-0.22-0.37-0.29-0.59-0.22l-2.39,0.96c-0.5-0.38-1.03-0.7-1.62-0.94L14.4,2.81c-0.04-0.24-0.24-0.41-0.48-0.41 h-3.84c-0.24,0-0.43,0.17-0.47,0.41L9.25,5.35C8.66,5.59,8.12,5.92,7.63,6.29L5.24,5.33c-0.22-0.08-0.47,0-0.59,0.22L2.74,8.87 C2.62,9.08,2.66,9.34,2.86,9.48l2.03,1.58C4.84,11.36,4.8,11.69,4.8,12s0.02,0.64,0.07,0.94l-2.03,1.58 c-0.18,0.14-0.23,0.41-0.12,0.61l1.92,3.32c0.12,0.22,0.37,0.29,0.59,0.22l2.39-0.96c0.5,0.38,1.03,0.7,1.62,0.94l0.36,2.54 c0.05,0.24,0.24,0.41,0.48,0.41h3.84c0.24,0,0.44-0.17,0.47-0.41l0.36-2.54c0.59-0.24,1.13-0.56,1.62-0.94l2.39,0.96 c0.22,0.08,0.47,0,0.59-0.22l1.92-3.32c0.12-0.22,0.07-0.47-0.12-0.61L19.14,12.94z M12,15.6c-1.98,0-3.6-1.62-3.6-3.6 s1.62-3.6,3.6-3.6s3.6,1.62,3.6,3.6S13.98,15.6,12,15.6z" />
</svg>
</div>
<!-- ログアウト -->
<div class="icon-item" data-section="logout">
<svg viewBox="0 0 24 24">
<path d="M16,17V14H9V10H16V7L21,12L16,17M14,2A2,2 0 0,1 16,4V6H14V4H5V20H14V18H16V20A2,2 0 0,1 14,22H5A2,2 0 0,1 3,20V4A2,2 0 0,1 5,2H14Z" />
</svg>
</div>
<!-- ヘルプ -->
<div class="icon-item" data-section="help">
<svg viewBox="0 0 24 24">
<path d="M11,18H13V16H11V18M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M12,20C7.59,20 4,16.41 4,12C4,7.59 7.59,4 12,4C16.41,4 20,7.59 20,12C20,16.41 16.41,20 12,20M12,6A4,4 0 0,0 8,10H10A2,2 0 0,1 12,8A2,2 0 0,1 14,10C14,12 11,11.75 11,15H13C13,12.75 16,12.5 16,10A4,4 0 0,0 12,6Z" />
</svg>
</div>
</div>
<!-- ドロワーサイドバー（白背景） -->
<div class="drawer-sidebar" id="drawerSidebar">
<div class="drawer-content">
<!-- ドロワーヘッダー（折りたたみボタン付き） -->
<div class="drawer-header">
<div class="drawer-title">メニュー</div>
<div class="drawer-collapse" id="drawerCollapse"><<</div>
</div>
<!-- ホームセクション -->
<div class="drawer-section" id="section-home">
<div class="section-title">ホーム</div>
<div class="drawer-item active">
<i>
<svg viewBox="0 0 24 24">
<path d="M10,20V14H14V20H19V12H22L12,3L2,12H5V20H10Z" />
</svg>
</i>
ダッシュボード
</div>
<div class="drawer-item">
<i>
<svg viewBox="0 0 24 24">
<path d="M13,3V9H21V3M13,21H21V11H13M3,21H11V15H3M3,13H11V3H3V13Z" />
</svg>
</i>
アクティビティ
</div>
<div class="drawer-item">
<i>
<svg viewBox="0 0 24 24">
<path d="M20,2H4A2,2 0 0,0 2,4V22L6,18H20A2,2 0 0,0 22,16V4A2,2 0 0,0 20,2M6,9H18V11H6M14,14H6V12H14M18,8H6V6H18" />
</svg>
</i>
お知らせ
</div>
</div>
<!-- マイページセクション -->
<div class="drawer-section" id="section-mypage" style="display: none;">
<div class="section-title">マイページ</div>
<div class="drawer-item">
<i>
<svg viewBox="0 0 24 24">
<path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z" />
</svg>
</i>
マイタスク
</div>
<div class="drawer-item">
<i>
<svg viewBox="0 0 24 24">
<path d="M12,9A3,3 0 0,0 9,12A3,3 0 0,0 12,15A3,3 0 0,0 15,12A3,3 0 0,0 12,9M12,17A5,5 0 0,1 7,12A5,5 0 0,1 12,7A5,5 0 0,1 17,12A5,5 0 0,1 12,17M12,4.5C7,4.5 2.73,7.61 1,12C2.73,16.39 7,19.5 12,19.5C17,19.5 21.27,16.39 23,12C21.27,7.61 17,4.5 12,4.5Z" />
</svg>
</i>
ウォッチ中
</div>
</div>
<!-- プロジェクトセクション -->
<div class="drawer-section" id="section-projects" style="display: none;">
<div class="section-title">プロジェクト</div>
<div class="drawer-item">
<i>
<svg viewBox="0 0 24 24">
<path d="M3,3H21V7H3V3M4,8H20V21H4V8M9.5,11A0.5,0.5 0 0,0 9,11.5V13H15V11.5A0.5,0.5 0 0,0 14.5,11H9.5Z" />
</svg>
</i>
すべて表示
</div>
<div class="drawer-item">
<i>
<svg viewBox="0 0 24 24">
<path d="M19,13H13V19H11V13H5V11H11V5H13V11H19V13Z" />
</svg>
</i>
新規作成
</div>
<div class="section-title">最近のプロジェクト</div>
<div class="drawer-item">
<i>
<svg viewBox="0 0 24 24">
<path d="M20,19H4C2.89,19 2,18.1 2,17V5C2,3.89 2.89,3 4,3H20A2,2 0 0,1 22,5V17A2,2 0 0,1 20,19Z" />
</svg>
</i>
デザインシステム
</div>
<div class="drawer-item">
<i>
<svg viewBox="0 0 24 24">
<path d="M17.9,17.39C17.64,16.59 16.89,16 16,16H15V13A1,1 0 0,0 14,12H8V10H10A1,1 0 0,0 11,9V7H13A2,2 0 0,0 15,5V4.59C17.93,5.77 20,8.64 20,12C20,14.08 19.2,15.97 17.9,17.39M11,19.93C7.05,19.44 4,16.08 4,12C4,11.38 4.08,10.78 4.21,10.21L9,15V16A2,2 0 0,0 11,18M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z" />
</svg>
</i>
モバイルアプリ
</div>
<div class="drawer-item">
<i>
<svg viewBox="0 0 24 24">
<path d="M17,13H13V17H11V13H7V11H11V7H13V11H17M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z" />
</svg>
</i>
API開発
</div>
</div>
<!-- チケットセクション -->
<div class="drawer-section" id="section-tickets" style="display: none;">
<div class="section-title">チケット</div>
<div class="drawer-item">
<i>
<svg viewBox="0 0 24 24">
<path d="M3,5H9V11H3V5M5,7V9H7V7H5M11,7H21V9H11V7M11,15H21V17H11V15M5,13V15H7V13H5M3,13H9V19H3V13Z" />
</svg>
</i>
すべてのチケット
</div>
<div class="drawer-item">
<i>
<svg viewBox="0 0 24 24">
<path d="M12,4A4,4 0 0,1 16,8A4,4 0 0,1 12,12A4,4 0 0,1 8,8A4,4 0 0,1 12,4M12,14C16.42,14 20,15.79 20,18V20H4V18C4,15.79 7.58,14 12,14Z" />
</svg>
</i>
担当チケット
</div>
<div class="drawer-item">
<i>
<svg viewBox="0 0 24 24">
<path d="M12,9A3,3 0 0,0 9,12A3,3 0 0,0 12,15A3,3 0 0,0 15,12A3,3 0 0,0 12,9M12,17A5,5 0 0,1 7,12A5,5 0 0,1 12,7A5,5 0 0,1 17,12A5,5 0 0,1 12,17M12,4.5C7,4.5 2.73,7.61 1,12C2.73,16.39 7,19.5 12,19.5C17,19.5 21.27,16.39 23,12C21.27,7.61 17,4.5 12,4.5Z" />
</svg>
</i>
ウォッチ中
</div>
</div>
<!-- 管理セクション -->
<div class="drawer-section" id="section-admin" style="display: none;">
<div class="section-title">管理</div>
<div class="drawer-item">
<i>
<svg viewBox="0 0 24 24">
<path d="M3,3H21V7H3V3M4,8H20V21H4V8M9.5,11A0.5,0.5 0 0,0 9,11.5V13H15V11.5A0.5,0.5 0 0,0 14.5,11H9.5Z" />
</svg>
</i>
プロジェクト
</div>
<div class="drawer-item">
<i>
<svg viewBox="0 0 24 24">
<path d="M12,4A4,4 0 0,1 16,8A4,4 0 0,1 12,12A4,4 0 0,1 8,8A4,4 0 0,1 12,4M12,14C16.42,14 20,15.79 20,18V20H4V18C4,15.79 7.58,14 12,14Z" />
</svg>
</i>
ユーザー
</div>
<div class="drawer-item">
<i>
<svg viewBox="0 0 24 24">
<path d="M12,5.5A3.5,3.5 0 0,1 15.5,9A3.5,3.5 0 0,1 12,12.5A3.5,3.5 0 0,1 8.5,9A3.5,3.5 0 0,1 12,5.5M5,8C5.56,8 6.08,8.15 6.53,8.42C6.38,9.85 6.8,11.27 7.66,12.38C7.16,13.34 6.16,14 5,14A3,3 0 0,1 2,11A3,3 0 0,1 5,8M19,8A3,3 0 0,1 22,11A3,3 0 0,1 19,14C17.84,14 16.84,13.34 16.34,12.38C17.2,11.27 17.62,9.85 17.47,8.42C17.92,8.15 18.44,8 19,8M5.5,18.25C5.5,16.18 8.41,14.5 12,14.5C15.59,14.5 18.5,16.18 18.5,18.25V20H5.5V18.25M0,20V18.5C0,17.11 1.89,15.94 4.45,15.6C3.86,16.28 3.5,17.22 3.5,18.25V20H0M24,20H20.5V18.25C20.5,17.22 20.14,16.28 19.55,15.6C22.11,15.94 24,17.11 24,18.5V20Z" />
</svg>
</i>
グループ
</div>
</div>
<!-- ユーザー情報セクション -->
<div class="drawer-section" id="section-user" style="display: none;">
<div class="section-title">ユーザー情報</div>
<div class="drawer-item">
<i>
<svg viewBox="0 0 24 24">
<path d="M12,4A4,4 0 0,1 16,8A4,4 0 0,1 12,12A4,4 0 0,1 8,8A4,4 0 0,1 12,4M12,14C16.42,14 20,15.79 20,18V20H4V18C4,15.79 7.58,14 12,14Z" />
</svg>
</i>
ログイン中: admin
</div>
<div class="drawer-item">
<i>
<svg viewBox="0 0 24 24">
<path d="M12,15.5A3.5,3.5 0 0,1 8.5,12A3.5,3.5 0 0,1 12,8.5A3.5,3.5 0 0,1 15.5,12A3.5,3.5 0 0,1 12,15.5M19.43,12.97C19.47,12.65 19.5,12.33 19.5,12C19.5,11.67 19.47,11.34 19.43,11L21.54,9.37C21.73,9.22 21.78,8.95 21.66,8.73L19.66,5.27C19.54,5.05 19.27,4.96 19.05,5.05L16.56,6.05C16.04,5.66 15.5,5.32 14.87,5.07L14.5,2.42C14.46,2.18 14.25,2 14,2H10C9.75,2 9.54,2.18 9.5,2.42L9.13,5.07C8.5,5.32 7.96,5.66 7.44,6.05L4.95,5.05C4.73,4.96 4.46,5.05 4.34,5.27L2.34,8.73C2.21,8.95 2.27,9.22 2.46,9.37L4.57,11C4.53,11.34 4.5,11.67 4.5,12C4.5,12.33 4.53,12.65 4.57,12.97L2.46,14.63C2.27,14.78 2.21,15.05 2.34,15.27L4.34,18.73C4.46,18.95 4.73,19.03 4.95,18.95L7.44,17.94C7.96,18.34 8.5,18.68 9.13,18.93L9.5,21.58C9.54,21.82 9.75,22 10,22H14C14.25,22 14.46,21.82 14.5,21.58L14.87,18.93C15.5,18.67 16.04,18.34 16.56,17.94L19.05,18.95C19.27,19.03 19.54,18.95 19.66,18.73L21.66,15.27C21.78,15.05 21.73,14.78 21.54,14.63L19.43,12.97Z" />
</svg>
</i>
個人設定
</div>
</div>
<!-- ログアウトセクション -->
<div class="drawer-section" id="section-logout" style="display: none;">
<div class="section-title">アカウント</div>
<div class="drawer-item">
<i>
<svg viewBox="0 0 24 24">
<path d="M16,17V14H9V10H16V7L21,12L16,17M14,2A2,2 0 0,1 16,4V6H14V4H5V20H14V18H16V20A2,2 0 0,1 14,22H5A2,2 0 0,1 3,20V4A2,2 0 0,1 5,2H14Z" />
</svg>
</i>
ログアウト
</div>
</div>
<!-- 設定セクション -->
<div class="drawer-section" id="section-settings" style="display: none;">
<div class="section-title">設定</div>
<div class="drawer-item">
<i>
<svg viewBox="0 0 24 24">
<path d="M12,15.5A3.5,3.5 0 0,1 8.5,12A3.5,3.5 0 0,1 12,8.5A3.5,3.5 0 0,1 15.5,12A3.5,3.5 0 0,1 12,15.5M19.43,12.97C19.47,12.65 19.5,12.33 19.5,12C19.5,11.67 19.47,11.34 19.43,11L21.54,9.37C21.73,9.22 21.78,8.95 21.66,8.73L19.66,5.27C19.54,5.05 19.27,4.96 19.05,5.05L16.56,6.05C16.04,5.66 15.5,5.32 14.87,5.07L14.5,2.42C14.46,2.18 14.25,2 14,2H10C9.75,2 9.54,2.18 9.5,2.42L9.13,5.07C8.5,5.32 7.96,5.66 7.44,6.05L4.95,5.05C4.73,4.96 4.46,5.05 4.34,5.27L2.34,8.73C2.21,8.95 2.27,9.22 2.46,9.37L4.57,11C4.53,11.34 4.5,11.67 4.5,12C4.5,12.33 4.53,12.65 4.57,12.97L2.46,14.63C2.27,14.78 2.21,15.05 2.34,15.27L4.34,18.73C4.46,18.95 4.73,19.03 4.95,18.95L7.44,17.94C7.96,18.34 8.5,18.68 9.13,18.93L9.5,21.58C9.54,21.82 9.75,22 10,22H14C14.25,22 14.46,21.82 14.5,21.58L14.87,18.93C15.5,18.67 16.04,18.34 16.56,17.94L19.05,18.95C19.27,19.03 19.54,18.95 19.66,18.73L21.66,15.27C21.78,15.05 21.73,14.78 21.54,14.63L19.43,12.97Z" />
</svg>
</i>
一般設定
</div>
<div class="drawer-item">
<i>
<svg viewBox="0 0 24 24">
<path d="M17.9,17.39C17.64,16.59 16.89,16 16,16H15V13A1,1 0 0,0 14,12H8V10H10A1,1 0 0,0 11,9V7H13A2,2 0 0,0 15,5V4.59C17.93,5.77 20,8.64 20,12C20,14.08 19.2,15.97 17.9,17.39M11,19.93C7.05,19.44 4,16.08 4,12C4,11.38 4.08,10.78 4.21,10.21L9,15V16A2,2 0 0,0 11,18M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z" />
</svg>
</i>
テーマ設定
</div>
</div>
<!-- ヘルプセクション -->
<div class="drawer-section" id="section-help" style="display: none;">
<div class="section-title">ヘルプ</div>
<div class="drawer-item">
<i>
<svg viewBox="0 0 24 24">
<path d="M21,6V8H3V6H21M3,18H12V16H3V18M3,13H21V11H3V13Z" />
</svg>
</i>
ガイド
</div>
<div class="drawer-item">
<i>
<svg viewBox="0 0 24 24">
<path d="M7,7H5A2,2 0 0,0 3,9V17H5V13H7V17H9V9A2,2 0 0,0 7,7M7,11H5V9H7M14,7H10V17H12V13H14A2,2 0 0,0 16,11V9A2,2 0 0,0 14,7M14,11H12V9H14M20,7V17H22V7M20,11H18V9H20V11Z" />
</svg>
</i>
API
</div>
<div class="drawer-item">
<i>
<svg viewBox="0 0 24 24">
<path d="M14,17H7V15H14M17,13H7V11H17M17,9H7V7H17M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3Z" />
</svg>
</i>
リリースノート
</div>
<div class="drawer-item">
<i>
<svg viewBox="0 0 24 24">
<path d="M11,18H13V16H11V18M12,6A4,4 0 0,0 8,10H10A2,2 0 0,1 12,8A2,2 0 0,1 14,10C14,12 11,11.75 11,15H13C13,12.75 16,12.5 16,10A4,4 0 0,0 12,6Z" />
</svg>
</i>
サポート
</div>
</div>
</div>
</div>
</div>
<!-- メインコンテンツ -->
<div class="main-content">
<!-- タブバー -->
<div class="tab-bar">
<div class="tab active">
<i>H</i>
<span class="tab-name">ダッシュボード</span>
<div class="tab-close">×</div>
</div>
<div class="tab">
<i>P</i>
<span class="tab-name">プロジェクト</span>
<div class="tab-close">×</div>
</div>
<div class="tab">
<i>T</i>
<span class="tab-name">チケット #123: ボタンスタイル</span>
<div class="tab-close">×</div>
</div>
</div>
<!-- コンテンツエリア -->
<div class="content-area">
<div class="content-header">
<h1 class="content-title">ダッシュボード</h1>
<button class="button">
<i>+</i> 新規プロジェクト
</button>
</div>
<!-- ウェルカムカード -->
<div class="welcome-card">
<div class="welcome-header">
<div class="welcome-title">
<i>/</i> Redmineへようこそ
</div>
</div>
<div class="welcome-body">
<p>Redmineは、オープンソースの柔軟なプロジェクト管理ソフトウェアです。このLINE風テーマを使って、より使いやすく、より美しい環境でプロジェクト管理を行いましょう。</p>
<p>注意: このメッセージは「ウェルカムテキスト」設定で変更できます（管理 &gt; 設定 &gt; 全般）。</p>
</div>
</div>
<!-- プロジェクト一覧 -->
<div class="content-header">
<h2>最近のプロジェクト</h2>
<button class="button">
<i>A</i> すべて表示
</button>
</div>
<div class="project-list">
<div class="project-card">
<div class="project-header">
<div class="project-title">
<i>D</i> LINEデザインシステム
</div>
</div>
<div class="project-body">
<div class="project-desc">
LINEのデザインシステムを管理するプロジェクト。コンポーネント、スタイルガイド、アイコンなどを含みます。
</div>
<div class="project-actions">
<div class="project-stats">
<div class="project-stat">
<i>T</i> 24
</div>
<div class="project-stat">
<i>P</i> 60%
</div>
</div>
<button class="button-outline">詳細</button>
</div>
</div>
</div>
<div class="project-card">
<div class="project-header">
<div class="project-title">
<i>M</i> モバイルアプリ
</div>
</div>
<div class="project-body">
<div class="project-desc">
モバイルアプリケーション開発のためのプロジェクト。iOSおよびAndroidプラットフォーム向け機能を管理します。
</div>
<div class="project-actions">
<div class="project-stats">
<div class="project-stat">
<i>T</i> 42
</div>
<div class="project-stat">
<i>P</i> 75%
</div>
</div>
<button class="button-outline">詳細</button>
</div>
</div>
</div>
<div class="project-card">
<div class="project-header">
<div class="project-title">
<i>A</i> 認証システム
</div>
</div>
<div class="project-body">
<div class="project-desc">
ユーザー認証システムとシングルサインオンのためのプロジェクト。セキュリティと使いやすさの向上が目的です。
</div>
<div class="project-actions">
<div class="project-stats">
<div class="project-stat">
<i>T</i> 18
</div>
<div class="project-stat">
<i>P</i> 45%
</div>
</div>
<button class="button-outline">詳細</button>
</div>
</div>
</div>
<div class="project-card">
<div class="project-header">
<div class="project-title">
<i>A</i> API開発
</div>
</div>
<div class="project-body">
<div class="project-desc">
RESTful APIの開発とドキュメント作成のためのプロジェクト。外部サービスとの連携をサポートします。
</div>
<div class="project-actions">
<div class="project-stats">
<div class="project-stat">
<i>T</i> 31
</div>
<div class="project-stat">
<i>P</i> 80%
</div>
</div>
<button class="button-outline">詳細</button>
</div>
</div>
</div>
</div>
</div>
<!-- フッターバー -->
<div class="footer-bar">
Powered by Redmine © 2006-2025 Jean-Philippe Lang | LINE Redmineテーマ
</div>
</div>
</div>
<script>
// ドロワーの折りたたみボタン
document.getElementById('drawerCollapse').addEventListener('click', function() {
document.getElementById('drawerSidebar').classList.remove('active');
});
// サイドバーのセクション切り替え
document.querySelectorAll('.icon-item').forEach(item => {
item.addEventListener('click', function() {
const section = this.getAttribute('data-section');
// アクティブアイコンを更新
document.querySelectorAll('.icon-item').forEach(icon => {
icon.classList.remove('active');
});
this.classList.add('active');
// ドロワーを表示
document.getElementById('drawerSidebar').classList.add('active');
// セクションを切り替え
document.querySelectorAll('.drawer-section').forEach(sec => {
sec.style.display = 'none';
});
document.getElementById('section-' + section).style.display = 'block';
});
});
// ドロワー項目のアクティブ状態
document.querySelectorAll('.drawer-item').forEach(item => {
item.addEventListener('click', function() {
document.querySelectorAll('.drawer-item').forEach(i => {
i.classList.remove('active');
});
this.classList.add('active');
});
});
// タブのアクティブ状態
document.querySelectorAll('.tab').forEach(tab => {
tab.addEventListener('click', function() {
document.querySelectorAll('.tab').forEach(t => {
t.classList.remove('active');
});
this.classList.add('active');
});
});
// タブの閉じるボタン
document.querySelectorAll('.tab-close').forEach(close => {
close.addEventListener('click', function(e) {
e.stopPropagation();
this.closest('.tab').remove();
// 最初のタブをアクティブにする（閉じた後）
const remainingTabs = document.querySelectorAll('.tab');
if (remainingTabs.length > 0) {
remainingTabs[0].classList.add('active');
}
});
});
// コンテンツエリア外でのクリックでドロワーを閉じる（モバイル対応）
document.querySelector('.content-area').addEventListener('click', function() {
if (window.innerWidth <= 768) {
document.getElementById('drawerSidebar').classList.remove('active');
}
});
// スケーリングアニメーション
document.querySelectorAll('.button, .drawer-item, .tab, .project-card').forEach(element => {
element.addEventListener('mousedown', function() {
this.style.transform = 'scale(0.98)';
});
element.addEventListener('mouseup', function() {
if (this.classList.contains('button')) {
this.style.transform = 'translateY(-2px)';
} else if (this.classList.contains('drawer-item')) {
this.style.transform = 'translateY(-1px)';
} else if (this.classList.contains('tab')) {
this.style.transform = 'translateY(-1px)';
} else if (this.classList.contains('project-card')) {
this.style.transform = 'translateY(-3px)';
}
});
element.addEventListener('mouseleave', function() {
if (this.classList.contains('project-card')) {
this.style.transform = '';
}
});
});
</script>
</body>
</html>
(2-2/2)