<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Automation Studio</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
<style>
:root {
--primary-color: #00c7b7;
--secondary-color: #2d3436;
--background-color: #f8f9fa;
--card-shadow: 0 4px 6px rgba(0,0,0,0.1);
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Segoe UI', system-ui;
}
body {
background: var(--background-color);
color: var(--secondary-color);
}
/* ヘッダー */
.dashboard-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1.5rem;
background: white;
box-shadow: var(--card-shadow);
}
.brand {
display: flex;
align-items: center;
gap: 1rem;
}
.brand-logo {
width: 40px;
height: 40px;
}
/* メインコンテンツ */
.main-container {
max-width: 1200px;
margin: 2rem auto;
padding: 0 1rem;
}
/* アプレットカード */
.applet-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
gap: 1.5rem;
margin-top: 2rem;
}
.applet-card {
background: white;
border-radius: 12px;
padding: 1.5rem;
box-shadow: var(--card-shadow);
transition: transform 0.2s;
position: relative;
}
.applet-card:hover {
transform: translateY(-5px);
}
.applet-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 1rem;
}
.toggle-switch {
position: relative;
display: inline-block;
width: 48px;
height: 24px;
}
.toggle-slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
transition: .4s;
border-radius: 34px;
}
.toggle-slider:before {
position: absolute;
content: "";
height: 16px;
width: 16px;
left: 4px;
bottom: 4px;
background-color: white;
transition: .4s;
border-radius: 50%;
}
input:checked + .toggle-slider {
background-color: var(--primary-color);
}
input:checked + .toggle-slider:before {
transform: translateX(24px);
}
.service-flow {
display: flex;
align-items: center;
gap: 1rem;
margin: 1.5rem 0;
}
.service-icon {
width: 48px;
height: 48px;
border-radius: 12px;
padding: 8px;
box-shadow: var(--card-shadow);
}
.divider-arrow {
flex-grow: 1;
border-top: 2px dashed #ddd;
position: relative;
}
.divider-arrow::after {
content: "➔";
position: absolute;
right: -10px;
top: -12px;
background: white;
padding: 0 4px;
color: var(--primary-color);
}
/* 作成モーダル */
.modal-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0,0,0,0.5);
display: none;
align-items: center;
justify-content: center;
z-index: 1000;
}
.modal-content {
background: white;
border-radius: 16px;
width: 90%;
max-width: 600px;
max-height: 90vh;
overflow-y: auto;
padding: 2rem;
animation: modalSlideIn 0.3s ease-out;
}
@keyframes modalSlideIn {
from { transform: translateY(20px); opacity: 0; }
to { transform: translateY(0); opacity: 1; }
}
.service-picker {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1rem;
margin: 2rem 0;
}
.service-option {
text-align: center;
padding: 1rem;
border: 2px solid #eee;
border-radius: 8px;
cursor: pointer;
transition: all 0.2s;
}
.service-option:hover {
border-color: var(--primary-color);
background: #f7f7f7;
}
.service-option img {
width: 64px;
height: 64px;
margin-bottom: 0.5rem;
}
/* レスポンシブデザイン */
@media (max-width: 768px) {
.applet-grid {
grid-template-columns: 1fr;
}
.service-picker {
grid-template-columns: repeat(2, 1fr);
}
}
</style>
</head>
<body>
<header class="dashboard-header">
<div class="brand">
<img src="https://img.icons8.com/color/96/automation.png" class="brand-logo" alt="Logo">
<h1>Automation Studio</h1>
</div>
<button class="create-button" onclick="openModal()">
<i class="fas fa-plus"></i> New Automation
</button>
</header>
<div class="main-container">
<div class="applet-grid">
<!-- アプレットが動的に追加されます -->
</div>
</div>
<!-- 作成モーダル -->
<div class="modal-overlay" id="modal">
<div class="modal-content">
<h2>Create New Automation</h2>
<div class="service-picker" id="triggerServices">
<!-- トリガーサービスが動的に追加されます -->
</div>
<div class="service-picker" id="actionServices">
<!-- アクションサービスが動的に追加されます -->
</div>
<div class="modal-actions">
<button class="btn-secondary" onclick="closeModal()">Cancel</button>
<button class="btn-primary" onclick="createApplet()">Create</button>
</div>
</div>
</div>
<script>
// ダミーデータ
const services = {
triggers: [
{ id: 'email', name: 'Email', icon: 'https://img.icons8.com/color/96/new-post.png' },
{ id: 'calendar', name: 'Calendar', icon: 'https://img.icons8.com/color/96/google-calendar.png' },
{ id: 'weather', name: 'Weather', icon: 'https://img.icons8.com/color/96/partly-cloudy-day.png' }
],
actions: [
{ id: 'slack', name: 'Slack', icon: 'https://img.icons8.com/color/96/slack.png' },
{ id: 'drive', name: 'Google Drive', icon: 'https://img.icons8.com/color/96/google-drive.png' },
{ id: 'notification', name: 'Notification', icon: 'https://img.icons8.com/color/96/appointment-reminders.png' }
]
};
// モーダル制御
function openModal() {
document.getElementById('modal').style.display = 'flex';
populateServices();
}
function closeModal() {
document.getElementById('modal').style.display = 'none';
}
// サービスの表示
function populateServices() {
const triggerContainer = document.getElementById('triggerServices');
const actionContainer = document.getElementById('actionServices');
triggerContainer.innerHTML = services.triggers.map(service => `
<div class="service-option" onclick="selectTrigger('${service.id}')">
<img src="${service.icon}" alt="${service.name}">
<div>${service.name}</div>
</div>
`).join('');
actionContainer.innerHTML = services.actions.map(service => `
<div class="service-option" onclick="selectAction('${service.id}')">
<img src="${service.icon}" alt="${service.name}">
<div>${service.name}</div>
</div>
`).join('');
}
// アプレット作成
let selectedTrigger = null;
let selectedAction = null;
function selectTrigger(serviceId) {
selectedTrigger = services.triggers.find(s => s.id === serviceId);
updateSelections();
}
function selectAction(serviceId) {
selectedAction = services.actions.find(s => s.id === serviceId);
updateSelections();
}
function updateSelections() {
document.querySelectorAll('.service-option').forEach(el => {
el.style.borderColor = '#eee';
});
if (selectedTrigger) {
const triggerEl = document.querySelector(`[onclick="selectTrigger('${selectedTrigger.id}')"]`);
triggerEl.style.borderColor = 'var(--primary-color)';
}
if (selectedAction) {
const actionEl = document.querySelector(`[onclick="selectAction('${selectedAction.id}')"]`);
actionEl.style.borderColor = 'var(--primary-color)';
}
}
function createApplet() {
if (!selectedTrigger || !selectedAction) return;
const appletGrid = document.querySelector('.applet-grid');
const newApplet = document.createElement('div');
newApplet.className = 'applet-card';
newApplet.innerHTML = `
<div class="applet-header">
<h3>${selectedTrigger.name} → ${selectedAction.name}</h3>
<label class="toggle-switch">
<input type="checkbox">
<span class="toggle-slider"></span>
</label>
</div>
<div class="service-flow">
<img src="${selectedTrigger.icon}" class="service-icon">
<div class="divider-arrow"></div>
<img src="${selectedAction.icon}" class="service-icon">
</div>
<p>Last triggered: Never</p>
`;
appletGrid.appendChild(newApplet);
closeModal();
selectedTrigger = null;
selectedAction = null;
}
// モーダル外をクリックで閉じる
window.onclick = function(event) {
if (event.target.classList.contains('modal-overlay')) {
closeModal();
}
}
</script>
</body>
</html>
