|
<!DOCTYPE html>
|
|
<html lang="ja">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Redmine LINE風テーマモックアップ</title>
|
|
<style>
|
|
:root {
|
|
/* カラーパレット */
|
|
--primary-color: #00c300;
|
|
--primary-dark: #00a000;
|
|
--primary-light: #e6f7e6;
|
|
--secondary-color: #1ebbeb;
|
|
--secondary-light: #e3f2fd;
|
|
|
|
/* テキストカラー */
|
|
--text-color: #333333;
|
|
--text-light: #666666;
|
|
--text-muted: #999999;
|
|
--text-white: #ffffff;
|
|
|
|
/* 背景カラー */
|
|
--bg-color: #f7f7f7;
|
|
--bg-content: #ffffff;
|
|
--border-color: #e0e0e0;
|
|
--border-light: #eeeeee;
|
|
|
|
/* 状態カラー */
|
|
--error-color: #f44336;
|
|
--success-color: #4caf50;
|
|
--warning-color: #ff9800;
|
|
--info-color: #2196f3;
|
|
|
|
/* ステータスカラー */
|
|
--status-new: #2196f3;
|
|
--status-inprogress: #ff9800;
|
|
--status-resolved: #4caf50;
|
|
--status-feedback: #9c27b0;
|
|
--status-closed: #9e9e9e;
|
|
--status-rejected: #f44336;
|
|
|
|
/* 優先度カラー */
|
|
--priority-highest: #ff5252;
|
|
--priority-high: #ff9800;
|
|
--priority-normal: #4caf50;
|
|
--priority-low: #2196f3;
|
|
--priority-lowest: #9e9e9e;
|
|
|
|
/* スペーシング */
|
|
--spacing-xs: 5px;
|
|
--spacing-sm: 10px;
|
|
--spacing-md: 15px;
|
|
--spacing-lg: 20px;
|
|
--spacing-xl: 30px;
|
|
|
|
/* ボーダーレディウス */
|
|
--border-radius-sm: 4px;
|
|
--border-radius-md: 8px;
|
|
--border-radius-lg: 12px;
|
|
--border-radius-pill: 20px;
|
|
--border-radius-circle: 50%;
|
|
|
|
/* シャドウ */
|
|
--shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.05);
|
|
--shadow-md: 0 2px 10px rgba(0, 0, 0, 0.08);
|
|
--shadow-lg: 0 5px 15px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
* {
|
|
box-sizing: border-box;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
body {
|
|
font-family: 'Hiragino Kaku Gothic Pro', 'Meiryo', 'Osaka', 'MS PGothic', sans-serif;
|
|
font-size: 14px;
|
|
line-height: 1.6;
|
|
color: var(--text-color);
|
|
background-color: var(--bg-color);
|
|
}
|
|
|
|
.container {
|
|
width: 100%;
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
padding: var(--spacing-md);
|
|
}
|
|
|
|
.mockup-container {
|
|
margin-bottom: var(--spacing-xl);
|
|
border: 1px solid var(--border-color);
|
|
border-radius: var(--border-radius-md);
|
|
background-color: var(--bg-content);
|
|
box-shadow: var(--shadow-md);
|
|
overflow: hidden;
|
|
}
|
|
|
|
.mockup-title {
|
|
margin-bottom: var(--spacing-lg);
|
|
padding-bottom: var(--spacing-sm);
|
|
border-bottom: 1px solid var(--border-color);
|
|
font-size: 24px;
|
|
font-weight: bold;
|
|
color: var(--primary-color);
|
|
}
|
|
|
|
.mockup-description {
|
|
margin-bottom: var(--spacing-lg);
|
|
}
|
|
|
|
/* ヘッダー */
|
|
.header {
|
|
background-color: var(--primary-color);
|
|
color: var(--text-white);
|
|
padding: var(--spacing-md) var(--spacing-lg);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
box-shadow: var(--shadow-sm);
|
|
}
|
|
|
|
.header h1 {
|
|
font-size: 22px;
|
|
font-weight: bold;
|
|
margin: 0;
|
|
}
|
|
|
|
.header a {
|
|
color: var(--text-white);
|
|
text-decoration: none;
|
|
}
|
|
|
|
.header-right {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.header-search {
|
|
margin-right: var(--spacing-lg);
|
|
position: relative;
|
|
}
|
|
|
|
.header-search input {
|
|
width: 250px;
|
|
padding: 8px 12px;
|
|
padding-right: 30px;
|
|
border: none;
|
|
border-radius: var(--border-radius-pill);
|
|
font-size: 14px;
|
|
}
|
|
|
|
.header-search button {
|
|
position: absolute;
|
|
right: 10px;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
background: none;
|
|
border: none;
|
|
color: var(--text-light);
|
|
cursor: pointer;
|
|
}
|
|
|
|
.user-menu {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.user-menu a {
|
|
margin-left: var(--spacing-md);
|
|
display: inline-flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.avatar {
|
|
width: 32px;
|
|
height: 32px;
|
|
border-radius: var(--border-radius-circle);
|
|
background-color: var(--primary-dark);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: var(--text-white);
|
|
font-weight: bold;
|
|
font-size: 14px;
|
|
margin-left: var(--spacing-sm);
|
|
}
|
|
|
|
/* トップメニュー */
|
|
.top-menu {
|
|
background-color: var(--primary-dark);
|
|
color: var(--text-white);
|
|
padding: 0 var(--spacing-lg);
|
|
box-shadow: var(--shadow-sm);
|
|
display: flex;
|
|
overflow-x: auto;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.top-menu ul {
|
|
display: flex;
|
|
list-style: none;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
.top-menu li {
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
.top-menu a {
|
|
color: var(--text-white);
|
|
text-decoration: none;
|
|
padding: var(--spacing-md) var(--spacing-md);
|
|
display: block;
|
|
position: relative;
|
|
}
|
|
|
|
.top-menu a.selected:after {
|
|
content: '';
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 3px;
|
|
background-color: var(--text-white);
|
|
}
|
|
|
|
/* メインコンテンツ */
|
|
.main {
|
|
background-color: var(--bg-content);
|
|
border-radius: var(--border-radius-md);
|
|
box-shadow: var(--shadow-sm);
|
|
margin: var(--spacing-lg);
|
|
padding: var(--spacing-lg);
|
|
overflow: hidden;
|
|
}
|
|
|
|
.content {
|
|
padding-right: var(--spacing-lg);
|
|
}
|
|
|
|
/* ログイン画面 */
|
|
.login-container {
|
|
max-width: 400px;
|
|
margin: 100px auto;
|
|
padding: var(--spacing-lg);
|
|
background-color: var(--bg-content);
|
|
border-radius: var(--border-radius-md);
|
|
box-shadow: var(--shadow-md);
|
|
}
|
|
|
|
.login-logo {
|
|
text-align: center;
|
|
margin-bottom: var(--spacing-lg);
|
|
}
|
|
|
|
.login-logo img {
|
|
width: 120px;
|
|
height: auto;
|
|
}
|
|
|
|
.login-form .form-group {
|
|
margin-bottom: var(--spacing-md);
|
|
}
|
|
|
|
.login-form label {
|
|
display: block;
|
|
margin-bottom: var(--spacing-xs);
|
|
font-weight: bold;
|
|
}
|
|
|
|
.login-form input[type="text"],
|
|
.login-form input[type="password"] {
|
|
width: 100%;
|
|
padding: 10px 12px;
|
|
border: 1px solid var(--border-color);
|
|
border-radius: var(--border-radius-sm);
|
|
font-size: 14px;
|
|
}
|
|
|
|
.login-form input[type="text"]:focus,
|
|
.login-form input[type="password"]:focus {
|
|
border-color: var(--primary-color);
|
|
box-shadow: 0 0 0 2px rgba(0, 195, 0, 0.1);
|
|
outline: none;
|
|
}
|
|
|
|
.login-form button {
|
|
width: 100%;
|
|
padding: 10px;
|
|
background-color: var(--primary-color);
|
|
color: var(--text-white);
|
|
border: none;
|
|
border-radius: var(--border-radius-pill);
|
|
font-weight: bold;
|
|
cursor: pointer;
|
|
font-size: 16px;
|
|
margin-top: var(--spacing-md);
|
|
}
|
|
|
|
.login-form button:hover {
|
|
background-color: var(--primary-dark);
|
|
}
|
|
|
|
.login-options {
|
|
margin-top: var(--spacing-lg);
|
|
text-align: center;
|
|
font-size: 13px;
|
|
}
|
|
|
|
.login-options a {
|
|
color: var(--primary-color);
|
|
text-decoration: none;
|
|
}
|
|
|
|
.login-options a:hover {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
/* プロジェクト一覧 */
|
|
.page-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: var(--spacing-lg);
|
|
}
|
|
|
|
.page-header h2 {
|
|
font-size: 20px;
|
|
font-weight: bold;
|
|
color: var(--text-color);
|
|
}
|
|
|
|
.page-actions {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.button {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 8px 16px;
|
|
background-color: var(--primary-color);
|
|
color: var(--text-white);
|
|
border: none;
|
|
border-radius: var(--border-radius-pill);
|
|
font-weight: bold;
|
|
text-decoration: none;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.button:hover {
|
|
background-color: var(--primary-dark);
|
|
}
|
|
|
|
.button-secondary {
|
|
background-color: var(--text-white);
|
|
color: var(--text-color);
|
|
border: 1px solid var(--border-color);
|
|
}
|
|
|
|
.button-secondary:hover {
|
|
background-color: var(--bg-color);
|
|
}
|
|
|
|
.view-switch {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-left: var(--spacing-md);
|
|
}
|
|
|
|
.view-switch label {
|
|
display: flex;
|
|
align-items: center;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.view-switch input[type="checkbox"] {
|
|
margin-right: var(--spacing-xs);
|
|
}
|
|
|
|
.projects-list {
|
|
margin-bottom: var(--spacing-xl);
|
|
}
|
|
|
|
.projects-table {
|
|
width: 100%;
|
|
border-collapse: separate;
|
|
border-spacing: 0;
|
|
border-radius: var(--border-radius-md);
|
|
overflow: hidden;
|
|
box-shadow: var(--shadow-sm);
|
|
}
|
|
|
|
.projects-table th {
|
|
background-color: #f5f5f5;
|
|
padding: var(--spacing-sm) var(--spacing-md);
|
|
text-align: left;
|
|
font-weight: bold;
|
|
border-bottom: 1px solid var(--border-color);
|
|
}
|
|
|
|
.projects-table td {
|
|
padding: var(--spacing-sm) var(--spacing-md);
|
|
border-bottom: 1px solid var(--border-light);
|
|
}
|
|
|
|
.projects-table tr:last-child td {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.projects-table tr:hover {
|
|
background-color: var(--primary-light);
|
|
}
|
|
|
|
.project-name a {
|
|
color: var(--primary-color);
|
|
text-decoration: none;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.project-name a:hover {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.project-description {
|
|
color: var(--text-light);
|
|
font-size: 13px;
|
|
}
|
|
|
|
/* プロジェクトカードビュー */
|
|
.projects-cards {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
|
|
gap: var(--spacing-lg);
|
|
}
|
|
|
|
.project-card {
|
|
background-color: var(--bg-content);
|
|
border-radius: var(--border-radius-md);
|
|
box-shadow: var(--shadow-sm);
|
|
overflow: hidden;
|
|
transition: transform 0.2s, box-shadow 0.2s;
|
|
}
|
|
|
|
.project-card:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: var(--shadow-md);
|
|
}
|
|
|
|
.project-card-header {
|
|
background-color: var(--primary-color);
|
|
color: var(--text-white);
|
|
padding: var(--spacing-md);
|
|
}
|
|
|
|
.project-card-header h3 {
|
|
margin: 0;
|
|
font-size: 16px;
|
|
}
|
|
|
|
.project-card-header a {
|
|
color: var(--text-white);
|
|
text-decoration: none;
|
|
}
|
|
|
|
.project-card-body {
|
|
padding: var(--spacing-md);
|
|
}
|
|
|
|
.project-card-description {
|
|
color: var(--text-light);
|
|
font-size: 13px;
|
|
margin-bottom: var(--spacing-md);
|
|
}
|
|
|
|
.project-card-footer {
|
|
padding: var(--spacing-md);
|
|
border-top: 1px solid var(--border-light);
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
background-color: #f9f9f9;
|
|
}
|
|
|
|
.project-card-meta {
|
|
font-size: 12px;
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
.project-card-actions a {
|
|
color: var(--primary-color);
|
|
text-decoration: none;
|
|
font-size: 13px;
|
|
margin-left: var(--spacing-sm);
|
|
}
|
|
|
|
/* チケット一覧 */
|
|
.filters {
|
|
margin-bottom: var(--spacing-lg);
|
|
padding: var(--spacing-md);
|
|
background-color: #f9f9f9;
|
|
border-radius: var(--border-radius-md);
|
|
border: 1px solid var(--border-light);
|
|
}
|
|
|
|
.filters-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: var(--spacing-sm);
|
|
}
|
|
|
|
.filters-title {
|
|
font-weight: bold;
|
|
}
|
|
|
|
.filters-toggle {
|
|
color: var(--primary-color);
|
|
text-decoration: none;
|
|
font-size: 13px;
|
|
}
|
|
|
|
.filters-content {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
|
|
gap: var(--spacing-md);
|
|
}
|
|
|
|
.filters-group {
|
|
margin-bottom: var(--spacing-sm);
|
|
}
|
|
|
|
.filters-group label {
|
|
display: block;
|
|
margin-bottom: var(--spacing-xs);
|
|
font-size: 13px;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.filters-group select,
|
|
.filters-group input[type="text"] {
|
|
width: 100%;
|
|
padding: 6px 8px;
|
|
border: 1px solid var(--border-color);
|
|
border-radius: var(--border-radius-sm);
|
|
font-size: 13px;
|
|
}
|
|
|
|
.filters-buttons {
|
|
grid-column: 1 / -1;
|
|
margin-top: var(--spacing-sm);
|
|
}
|
|
|
|
.filters-buttons button {
|
|
margin-right: var(--spacing-sm);
|
|
}
|
|
|
|
.issues-table {
|
|
width: 100%;
|
|
border-collapse: separate;
|
|
border-spacing: 0;
|
|
border-radius: var(--border-radius-md);
|
|
overflow: hidden;
|
|
box-shadow: var(--shadow-sm);
|
|
}
|
|
|
|
.issues-table th {
|
|
background-color: #f5f5f5;
|
|
padding: var(--spacing-sm) var(--spacing-md);
|
|
text-align: left;
|
|
font-weight: bold;
|
|
border-bottom: 1px solid var(--border-color);
|
|
}
|
|
|
|
.issues-table td {
|
|
padding: var(--spacing-sm) var(--spacing-md);
|
|
border-bottom: 1px solid var(--border-light);
|
|
}
|
|
|
|
.issues-table tr:last-child td {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.issues-table tr:hover {
|
|
background-color: var(--primary-light);
|
|
}
|
|
|
|
.issues-table .issue {
|
|
transition: background-color 0.2s;
|
|
}
|
|
|
|
.issue-id a {
|
|
color: var(--text-color);
|
|
text-decoration: none;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.issue-id a:hover {
|
|
color: var(--primary-color);
|
|
}
|
|
|
|
.issue-subject a {
|
|
color: var(--primary-color);
|
|
text-decoration: none;
|
|
}
|
|
|
|
.issue-subject a:hover {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.issue-priority-highest td:first-child {
|
|
border-left: 4px solid var(--priority-highest);
|
|
}
|
|
|
|
.issue-priority-high td:first-child {
|
|
border-left: 4px solid var(--priority-high);
|
|
}
|
|
|
|
.issue-priority-normal td:first-child {
|
|
border-left: 4px solid var(--priority-normal);
|
|
}
|
|
|
|
.issue-priority-low td:first-child {
|
|
border-left: 4px solid var(--priority-low);
|
|
}
|
|
|
|
.issue-priority-lowest td:first-child {
|
|
border-left: 4px solid var(--priority-lowest);
|
|
}
|
|
|
|
.status-badge {
|
|
display: inline-block;
|
|
padding: 2px 8px;
|
|
border-radius: var(--border-radius-pill);
|
|
font-size: 12px;
|
|
font-weight: bold;
|
|
color: var(--text-white);
|
|
}
|
|
|
|
.status-new {
|
|
background-color: var(--status-new);
|
|
}
|
|
|
|
.status-inprogress {
|
|
background-color: var(--status-inprogress);
|
|
}
|
|
|
|
.status-resolved {
|
|
background-color: var(--status-resolved);
|
|
}
|
|
|
|
.status-feedback {
|
|
background-color: var(--status-feedback);
|
|
}
|
|
|
|
.status-closed {
|
|
background-color: var(--status-closed);
|
|
}
|
|
|
|
.status-rejected {
|
|
background-color: var(--status-rejected);
|
|
}
|
|
|
|
.pagination {
|
|
margin-top: var(--spacing-lg);
|
|
display: flex;
|
|
justify-content: center;
|
|
}
|
|
|
|
.pagination a,
|
|
.pagination span {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 36px;
|
|
height: 36px;
|
|
margin: 0 4px;
|
|
border-radius: var(--border-radius-circle);
|
|
text-decoration: none;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.pagination a {
|
|
background-color: var(--bg-content);
|
|
color: var(--text-color);
|
|
}
|
|
|
|
.pagination a:hover {
|
|
background-color: var(--primary-light);
|
|
color: var(--primary-color);
|
|
}
|
|
|
|
.pagination span.current {
|
|
background-color: var(--primary-color);
|
|
color: var(--text-white);
|
|
font-weight: bold;
|
|
}
|
|
|
|
/* チケット詳細 - LINE風チャットUI */
|
|
.issue-details {
|
|
margin-bottom: var(--spacing-lg);
|
|
}
|
|
|
|
.issue-header {
|
|
margin-bottom: var(--spacing-lg);
|
|
padding-bottom: var(--spacing-md);
|
|
border-bottom: 1px solid var(--border-light);
|
|
}
|
|
|
|
.issue-title {
|
|
font-size: 20px;
|
|
font-weight: bold;
|
|
margin-bottom: var(--spacing-sm);
|
|
}
|
|
|
|
.issue-meta {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: var(--spacing-md);
|
|
font-size: 13px;
|
|
color: var(--text-light);
|
|
}
|
|
|
|
.issue-meta-item {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.issue-meta-label {
|
|
font-weight: bold;
|
|
margin-right: var(--spacing-xs);
|
|
}
|
|
|
|
.issue-description {
|
|
margin-bottom: var(--spacing-lg);
|
|
padding: var(--spacing-md);
|
|
background-color: #f9f9f9;
|
|
border-radius: var(--border-radius-md);
|
|
border: 1px solid var(--border-light);
|
|
}
|
|
|
|
.issue-comments {
|
|
margin-bottom: var(--spacing-lg);
|
|
}
|
|
|
|
.comments-title {
|
|
font-size: 16px;
|
|
font-weight: bold;
|
|
margin-bottom: var(--spacing-md);
|
|
padding-bottom: var(--spacing-xs);
|
|
border-bottom: 1px solid var(--border-light);
|
|
}
|
|
|
|
.comment {
|
|
display: flex;
|
|
margin-bottom: var(--spacing-md);
|
|
}
|
|
|
|
.comment.me {
|
|
flex-direction: row-reverse;
|
|
}
|
|
|
|
.comment-avatar {
|
|
width: 40px;
|
|
height: 40px;
|
|
border-radius: var(--border-radius-circle);
|
|
background-color: var(--text-muted);
|
|
color: var(--text-white);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-weight: bold;
|
|
font-size: 16px;
|
|
margin-right: var(--spacing-md);
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.comment.me .comment-avatar {
|
|
margin-right: 0;
|
|
margin-left: var(--spacing-md);
|
|
background-color: var(--primary-color);
|
|
}
|
|
|
|
.comment-content {
|
|
position: relative;
|
|
background-color: #f0f0f0;
|
|
padding: var(--spacing-md);
|
|
border-radius: var(--border-radius-md);
|
|
max-width: 70%;
|
|
}
|
|
|
|
.comment.me .comment-content {
|
|
background-color: var(--primary-light);
|
|
}
|
|
|
|
.comment-content:before {
|
|
content: '';
|
|
position: absolute;
|
|
left: -10px;
|
|
top: 15px;
|
|
border-width: 10px 10px 0 0;
|
|
border-style: solid;
|
|
border-color: transparent #f0f0f0 transparent transparent;
|
|
}
|
|
|
|
.comment.me .comment-content:before {
|
|
left: auto;
|
|
right: -10px;
|
|
border-width: 0 10px 10px 0;
|
|
border-color: transparent transparent transparent var(--primary-light);
|
|
}
|
|
|
|
.comment-author {
|
|
font-weight: bold;
|
|
margin-bottom: var(--spacing-xs);
|
|
}
|
|
|
|
.comment-date {
|
|
font-size: 12px;
|
|
color: var(--text-muted);
|
|
margin-top: var(--spacing-xs);
|
|
}
|
|
|
|
.comment-form {
|
|
margin-top: var(--spacing-lg);
|
|
padding: var(--spacing-md);
|
|
background-color: #f9f9f9;
|
|
border-radius: var(--border-radius-md);
|
|
border: 1px solid var(--border-light);
|
|
}
|
|
|
|
.comment-form textarea {
|
|
width: 100%;
|
|
height: 100px;
|
|
padding: var(--spacing-sm);
|
|
border: 1px solid var(--border-color);
|
|
border-radius: var(--border-radius-sm);
|
|
resize: vertical;
|
|
margin-bottom: var(--spacing-sm);
|
|
}
|
|
|
|
.comment-form button {
|
|
float: right;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<h1 class="mockup-title">Redmine LINE風テーマ モックアップ</h1>
|
|
<p class="mockup-description">
|
|
以下は、Redmine 5.x向けに開発したLINE風テーマのモックアップです。実際のRedmineとは異なる場合があります。
|
|
</p>
|
|
|
|
<!-- ログイン画面 -->
|
|
<h2 class="mockup-title">ログイン画面</h2>
|
|
<div class="mockup-container">
|
|
<div class="login-container">
|
|
<div class="login-logo">
|
|
<h1 style="color: #00c300;">Redmine</h1>
|
|
</div>
|
|
<div class="login-form">
|
|
<div class="form-group">
|
|
<label for="username">ユーザー名</label>
|
|
<input type="text" id="username" name="username">
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="password">パスワード</label>
|
|
<input type="password" id="password" name="password">
|
|
</div>
|
|
<div class="form-group">
|
|
<label>
|
|
<input type="checkbox"> ログイン状態を保持する
|
|
</label>
|
|
</div>
|
|
<button type="submit">ログイン</button>
|
|
</div>
|
|
<div class="login-options">
|
|
<a href="#">パスワードを忘れた場合</a> | <a href="#">新規登録</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- プロジェクト一覧 -->
|
|
<h2 class="mockup-title">プロジェクト一覧</h2>
|
|
<div class="mockup-container">
|
|
<div class="header">
|
|
<h1><a href="#">Redmine</a></h1>
|
|
<div class="header-right">
|
|
<div class="header-search">
|
|
<input type="text" placeholder="検索...">
|
|
<button>🔍</button>
|
|
</div>
|
|
<div class="user-menu">
|
|
<a href="#">マイページ</a>
|
|
<a href="#">
|
|
ユーザー名
|
|
<div class="avatar">U</div>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="top-menu">
|
|
<ul>
|
|
<li><a href="#" class="selected">ホーム</a></li>
|
|
<li><a href="#">マイページ</a></li>
|
|
<li><a href="#">プロジェクト</a></li>
|
|
<li><a href="#">管理</a></li>
|
|
<li><a href="#">ヘルプ</a></li>
|
|
</ul>
|
|
</div>
|
|
<div class="main">
|
|
<div class="page-header">
|
|
<h2>プロジェクト</h2>
|
|
<div class="page-actions">
|
|
<a href="#" class="button">新しいプロジェクト</a>
|
|
<div class="view-switch">
|
|
<label>
|
|
<input type="checkbox" checked> カードビュー
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- プロジェクトカードビュー -->
|
|
<div class="projects-cards">
|
|
<div class="project-card">
|
|
<div class="project-card-header">
|
|
<h3><a href="#">プロジェクト1</a></h3>
|
|
</div>
|
|
<div class="project-card-body">
|
|
<div class="project-card-description">
|
|
このプロジェクトは新しい製品開発のためのプロジェクトです。主な目標は...
|
|
</div>
|
|
</div>
|
|
<div class="project-card-footer">
|
|
<div class="project-card-meta">
|
|
更新日: 2025-05-08
|
|
</div>
|
|
<div class="project-card-actions">
|
|
<a href="#">詳細</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="project-card">
|
|
<div class="project-card-header">
|
|
<h3><a href="#">プロジェクト2</a></h3>
|
|
</div>
|
|
<div class="project-card-body">
|
|
<div class="project-card-description">
|
|
ウェブサイトリニューアルプロジェクト。デザイン刷新と機能追加を行います。
|
|
</div>
|
|
</div>
|
|
<div class="project-card-footer">
|
|
<div class="project-card-meta">
|
|
更新日: 2025-05-07
|
|
</div>
|
|
<div class="project-card-actions">
|
|
<a href="#">詳細</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="project-card">
|
|
<div class="project-card-header">
|
|
<h3><a href="#">プロジェクト3</a></h3>
|
|
</div>
|
|
<div class="project-card-body">
|
|
<div class="project-card-description">
|
|
モバイルアプリ開発プロジェクト。iOS/Android両対応のアプリを開発します。
|
|
</div>
|
|
</div>
|
|
<div class="project-card-footer">
|
|
<div class="project-card-meta">
|
|
更新日: 2025-05-05
|
|
</div>
|
|
<div class="project-card-actions">
|
|
<a href="#">詳細</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="project-card">
|
|
<div class="project-card-header">
|
|
<h3><a href="#">プロジェクト4</a></h3>
|
|
</div>
|
|
<div class="project-card-body">
|
|
<div class="project-card-description">
|
|
インフラ更新プロジェクト。クラウド移行とサーバーのアップグレードを行います。
|
|
</div>
|
|
</div>
|
|
<div class="project-card-footer">
|
|
<div class="project-card-meta">
|
|
更新日: 2025-05-03
|
|
</div>
|
|
<div class="project-card-actions">
|
|
<a href="#">詳細</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- チケット一覧 -->
|
|
<h2 class="mockup-title">チケット一覧</h2>
|
|
<div class="mockup-container">
|
|
<div class="header">
|
|
<h1><a href="#">Redmine</a></h1>
|
|
<div class="header-right">
|
|
<div class="header-search">
|
|
<input type="text" placeholder="検索...">
|
|
<button>🔍</button>
|
|
</div>
|
|
<div class="user-menu">
|
|
<a href="#">マイページ</a>
|
|
<a href="#">
|
|
ユーザー名
|
|
<div class="avatar">U</div>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="top-menu">
|
|
<ul>
|
|
<li><a href="#">ホーム</a></li>
|
|
<li><a href="#">マイページ</a></li>
|
|
<li><a href="#" class="selected">プロジェクト</a></li>
|
|
<li><a href="#">管理</a></li>
|
|
<li><a href="#">ヘルプ</a></li>
|
|
</ul>
|
|
</div>
|
|
<div class="main">
|
|
<div class="page-header">
|
|
<h2>プロジェクト2 - チケット</h2>
|
|
<div class="page-actions">
|
|
<a href="#" class="button">新しいチケット</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="filters">
|
|
<div class="filters-header">
|
|
<div class="filters-title">フィルタ</div>
|
|
<a href="#" class="filters-toggle">▼ 詳細</a>
|
|
</div>
|
|
<div class="filters-content">
|
|
<div class="filters-group">
|
|
<label>ステータス</label>
|
|
<select>
|
|
<option>すべて</option>
|
|
<option>新規</option>
|
|
<option>進行中</option>
|
|
<option>フィードバック</option>
|
|
<option>解決済み</option>
|
|
<option>終了</option>
|
|
<option>却下</option>
|
|
</select>
|
|
</div>
|
|
<div class="filters-group">
|
|
<label>優先度</label>
|
|
<select>
|
|
<option>すべて</option>
|
|
<option>最高</option>
|
|
<option>高め</option>
|
|
<option>通常</option>
|
|
<option>低め</option>
|
|
<option>最低</option>
|
|
</select>
|
|
</div>
|
|
<div class="filters-group">
|
|
<label>担当者</label>
|
|
<select>
|
|
<option>すべて</option>
|
|
<option>自分</option>
|
|
<option>担当者なし</option>
|
|
<option>ユーザー1</option>
|
|
<option>ユーザー2</option>
|
|
</select>
|
|
</div>
|
|
<div class="filters-buttons">
|
|
<button class="button">適用</button>
|
|
<button class="button button-secondary">クリア</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="issues-list">
|
|
<table class="issues-table">
|
|
<thead>
|
|
<tr>
|
|
<th>#</th>
|
|
<th>トラッカー</th>
|
|
<th>ステータス</th>
|
|
<th>優先度</th>
|
|
<th>題名</th>
|
|
<th>担当者</th>
|
|
<th>更新日</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr class="issue issue-priority-highest">
|
|
<td class="issue-id"><a href="#">#123</a></td>
|
|
<td>機能</td>
|
|
<td><span class="status-badge status-new">新規</span></td>
|
|
<td>最高</td>
|
|
<td class="issue-subject"><a href="#">ログイン画面のデザイン改善</a></td>
|
|
<td>山田 太郎</td>
|
|
<td>2025-05-09</td>
|
|
</tr>
|
|
<tr class="issue issue-priority-high">
|
|
<td class="issue-id"><a href="#">#122</a></td>
|
|
<td>機能</td>
|
|
<td><span class="status-badge status-inprogress">進行中</span></td>
|
|
<td>高め</td>
|
|
<td class="issue-subject"><a href="#">プロジェクト一覧のカードビュー実装</a></td>
|
|
<td>佐藤 花子</td>
|
|
<td>2025-05-08</td>
|
|
</tr>
|
|
<tr class="issue issue-priority-normal">
|
|
<td class="issue-id"><a href="#">#121</a></td>
|
|
<td>バグ</td>
|
|
<td><span class="status-badge status-resolved">解決済み</span></td>
|
|
<td>通常</td>
|
|
<td class="issue-subject"><a href="#">フィルター機能のバグ修正</a></td>
|
|
<td>鈴木 一郎</td>
|
|
<td>2025-05-07</td>
|
|
</tr>
|
|
<tr class="issue issue-priority-low">
|
|
<td class="issue-id"><a href="#">#120</a></td>
|
|
<td>サポート</td>
|
|
<td><span class="status-badge status-feedback">フィードバック</span></td>
|
|
<td>低め</td>
|
|
<td class="issue-subject"><a href="#">ドキュメントの更新</a></td>
|
|
<td>田中 明</td>
|
|
<td>2025-05-06</td>
|
|
</tr>
|
|
<tr class="issue issue-priority-lowest">
|
|
<td class="issue-id"><a href="#">#119</a></td>
|
|
<td>タスク</td>
|
|
<td><span class="status-badge status-closed">終了</span></td>
|
|
<td>最低</td>
|
|
<td class="issue-subject"><a href="#">テストデータの作成</a></td>
|
|
<td>高橋 誠</td>
|
|
<td>2025-05-05</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<div class="pagination">
|
|
<a href="#">«</a>
|
|
<span class="current">1</span>
|
|
<a href="#">2</a>
|
|
<a href="#">3</a>
|
|
<a href="#">»</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- チケット詳細 - LINE風チャットUI -->
|
|
<h2 class="mockup-title">チケット詳細 - LINE風チャットUI</h2>
|
|
<div class="mockup-container">
|
|
<div class="header">
|
|
<h1><a href="#">Redmine</a></h1>
|
|
<div class="header-right">
|
|
<div class="header-search">
|
|
<input type="text" placeholder="検索...">
|
|
<button>🔍</button>
|
|
</div>
|
|
<div class="user-menu">
|
|
<a href="#">マイページ</a>
|
|
<a href="#">
|
|
ユーザー名
|
|
<div class="avatar">U</div>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="top-menu">
|
|
<ul>
|
|
<li><a href="#">ホーム</a></li>
|
|
<li><a href="#">マイページ</a></li>
|
|
<li><a href="#" class="selected">プロジェクト</a></li>
|
|
<li><a href="#">管理</a></li>
|
|
<li><a href="#">ヘルプ</a></li>
|
|
</ul>
|
|
</div>
|
|
<div class="main">
|
|
<div class="issue-details">
|
|
<div class="issue-header">
|
|
<div class="issue-title">#122 プロジェクト一覧のカードビュー実装</div>
|
|
<div class="issue-meta">
|
|
<div class="issue-meta-item">
|
|
<span class="issue-meta-label">ステータス:</span>
|
|
<span class="status-badge status-inprogress">進行中</span>
|
|
</div>
|
|
<div class="issue-meta-item">
|
|
<span class="issue-meta-label">優先度:</span>
|
|
<span>高め</span>
|
|
</div>
|
|
<div class="issue-meta-item">
|
|
<span class="issue-meta-label">担当者:</span>
|
|
<span>佐藤 花子</span>
|
|
</div>
|
|
<div class="issue-meta-item">
|
|
<span class="issue-meta-label">開始日:</span>
|
|
<span>2025-05-01</span>
|
|
</div>
|
|
<div class="issue-meta-item">
|
|
<span class="issue-meta-label">期日:</span>
|
|
<span>2025-05-15</span>
|
|
</div>
|
|
<div class="issue-meta-item">
|
|
<span class="issue-meta-label">進捗率:</span>
|
|
<span>60%</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="issue-description">
|
|
<p>プロジェクト一覧画面に、現在のテーブル表示に加えてカードビュー表示機能を追加します。</p>
|
|
<p>カードビューでは、各プロジェクトを視覚的なカードとして表示し、プロジェクト名、概要、最終更新日、進捗率などの情報を表示します。</p>
|
|
<p>テーブルビューとカードビューの切り替えは、トグルスイッチで行えるようにします。</p>
|
|
</div>
|
|
|
|
<div class="issue-comments">
|
|
<h3 class="comments-title">コメント</h3>
|
|
|
|
<div class="comment">
|
|
<div class="comment-avatar">佐</div>
|
|
<div class="comment-content">
|
|
<div class="comment-author">佐藤 花子</div>
|
|
<p>作業を開始しました。まずはデザインの検討からはじめます。</p>
|
|
<div class="comment-date">2025-05-02 10:15</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="comment me">
|
|
<div class="comment-avatar">鈴</div>
|
|
<div class="comment-content">
|
|
<div class="comment-author">鈴木 一郎</div>
|
|
<p>カードのデザインは、LINE風のデザイン言語に合わせてください。角丸のカードで、影をつけると良いと思います。</p>
|
|
<div class="comment-date">2025-05-02 11:30</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="comment">
|
|
<div class="comment-avatar">佐</div>
|
|
<div class="comment-content">
|
|
<div class="comment-author">佐藤 花子</div>
|
|
<p>デザイン案を作成しました。添付ファイルを確認してください。</p>
|
|
<p>カードには以下の情報を表示する予定です：<br>
|
|
- プロジェクト名<br>
|
|
- 説明（短縮表示）<br>
|
|
- 最終更新日<br>
|
|
- アクションボタン</p>
|
|
<div class="comment-date">2025-05-05 14:45</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="comment me">
|
|
<div class="comment-avatar">鈴</div>
|
|
<div class="comment-content">
|
|
<div class="comment-author">鈴木 一郎</div>
|
|
<p>デザイン案を確認しました。良いと思います。実装を進めてください。</p>
|
|
<p>進捗率の表示もあると良いかもしれません。検討してみてください。</p>
|
|
<div class="comment-date">2025-05-06 09:20</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="comment">
|
|
<div class="comment-avatar">佐</div>
|
|
<div class="comment-content">
|
|
<div class="comment-author">佐藤 花子</div>
|
|
<p>進捗状況を報告します。カードビューの基本的な表示機能は実装完了しました。</p>
|
|
<p>現在、切り替え機能を実装中です。60%程度完了しています。</p>
|
|
<div class="comment-date">2025-05-08 16:30</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="comment-form">
|
|
<textarea placeholder="コメントを追加..."></textarea>
|
|
<button class="button">送信</button>
|
|
<div style="clear: both;"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html>
|