Skip to content

Commit

Permalink
Helpダイアログを追加
Browse files Browse the repository at this point in the history
  • Loading branch information
new-sankaku committed Jul 14, 2024
1 parent 4a51419 commit bc14b36
Show file tree
Hide file tree
Showing 6 changed files with 381 additions and 88 deletions.
Binary file added SP-MangaEditer/03_images/infomation/20240715.webp
Binary file not shown.
File renamed without changes.
153 changes: 153 additions & 0 deletions SP-MangaEditer/css/ui/share.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,153 @@
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700&family=Space+Grotesk:wght@400;700&display=swap');

#mangaEditorDesu_custom-popup {
display: none;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: rgba(10, 10, 10, 0.9);
padding: 40px;
border-radius: 15px;
box-shadow: 0 0 20px rgba(255, 165, 0, 0.5), 0 0 40px rgba(255, 69, 0, 0.3);
z-index: 1000;
max-width: 90%;
width: 800px;
font-family: 'Space Grotesk', 'Orbitron', sans-serif;
color: #e0e0e0;
border: 2px solid #ff6b00;
animation: mangaEditorDesu_steamPunk 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
overflow: hidden;
}

@keyframes mangaEditorDesu_steamPunk {
0% { transform: translate(-50%, -50%) scale(0.5) rotate(-10deg); opacity: 0; }
100% { transform: translate(-50%, -50%) scale(1) rotate(0deg); opacity: 1; }
}

#mangaEditorDesu_custom-popup::before {
content: '';
position: absolute;
top: -10px;
left: -10px;
right: -10px;
bottom: -10px;
border: 2px solid #ff6b00;
border-radius: 20px;
z-index: -1;
animation: mangaEditorDesu_glow 2s infinite alternate;
}

@keyframes mangaEditorDesu_glow {
0% { box-shadow: 0 0 5px #ff6b00, 0 0 10px #ff6b00, 0 0 15px #ff6b00; }
100% { box-shadow: 0 0 10px #ff6b00, 0 0 20px #ff6b00, 0 0 30px #ff6b00; }
}

#mangaEditorDesu_popup-content {
display: flex;
align-items: flex-start;
}

#mangaEditorDesu_popup-image {
max-width: 45%;
height: auto;
border-radius: 10px;
border: 3px solid #ff6b00;
box-shadow: 0 0 15px rgba(255, 107, 0, 0.7);
margin-right: 20px;
}

#mangaEditorDesu_text-content {
flex-grow: 1;
}

#mangaEditorDesu_custom-popup h2 {
margin-top: 0;
color: #ff6b00;
font-size: 32px;
text-transform: uppercase;
letter-spacing: 2px;
text-shadow: 2px 2px 4px rgba(255, 107, 0, 0.6);
animation: mangaEditorDesu_textGlow 1.5s ease-in-out infinite alternate;
}

@keyframes mangaEditorDesu_textGlow {
0% { text-shadow: 0 0 5px #ff6b00, 0 0 10px #ff6b00; }
100% { text-shadow: 0 0 10px #ff6b00, 0 0 20px #ff6b00, 0 0 30px #ff6b00; }
}

#mangaEditorDesu_custom-popup p {
color: #b0b0b0;
font-size: 16px;
line-height: 1.6;
margin-bottom: 20px;
}

#mangaEditorDesu_close-popup {
background-color: #ff6b00;
color: #000;
border: none;
padding: 12px 24px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 18px;
margin-top: 20px;
cursor: pointer;
border-radius: 30px;
transition: all 0.3s;
text-transform: uppercase;
font-weight: bold;
letter-spacing: 1px;
box-shadow: 0 0 10px rgba(255, 107, 0, 0.5);
}

#mangaEditorDesu_close-popup:hover {
background-color: #ff8c00;
transform: scale(1.05) translateY(-3px);
box-shadow: 0 5px 15px rgba(255, 107, 0, 0.8);
}

.mangaEditorDesu_link-section {
margin-top: 20px;
padding: 15px;
background-color: rgba(50, 50, 50, 0.7);
border-radius: 10px;
border: 1px solid #ff6b00;
}

.mangaEditorDesu_link-section a {
color: #ff6b00;
text-decoration: none;
transition: all 0.3s;
}

.mangaEditorDesu_link-section a:hover {
color: #ff8c00;
text-shadow: 0 0 5px rgba(255, 140, 0, 0.7);
}

.mangaEditorDesu_flames {
position: absolute;
bottom: -10px;
left: 0;
width: 100%;
height: 60px;
filter: blur(1px);
pointer-events: none;
}

.mangaEditorDesu_flame {
position: absolute;
bottom: 0;
width: 20px;
height: 60px;
background: #ff6b00;
border-radius: 50% 50% 20% 20% / 40% 40% 60% 60%;
animation: mangaEditorDesu_flicker 0.5s infinite alternate;
}

@keyframes mangaEditorDesu_flicker {
0% { height: 60px; opacity: 1; }
100% { height: 50px; opacity: 0.8; }
}
155 changes: 78 additions & 77 deletions SP-MangaEditer/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -68,38 +68,39 @@
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

<link rel="stylesheet" href="css/form.css?v=3.9">

<link rel="stylesheet" href="css/common.css?v=3.9">
<link rel="stylesheet" href="css/components.css?v=3.9">
<link rel="stylesheet" href="css/layout.css?v=3.9">
<link rel="stylesheet" href="css/ImageControleManager.css?v=3.9">
<link rel="stylesheet" href="css/anime.css?v=3.9">
<link rel="stylesheet" href="css/layoutLayer.css?v=3.9">
<link rel="stylesheet" href="css/toast.css?v=3.9">
<link rel="stylesheet" href="css/ui/modeChange.css?v=3.9">
<link rel="stylesheet" href="css/ui/objectMenu.css?v=3.9">
<link rel="stylesheet" href="css/tippy.css?v=3.9">
<link rel="stylesheet" href="third/tippy/tippy.css?v=3.9">

<link href="third/Bootstrup/bootstrap.min.css?v=3.9" rel="stylesheet">
<link rel="stylesheet" href="css/form.css?v=4.0">

<link rel="stylesheet" href="css/common.css?v=4.0">
<link rel="stylesheet" href="css/components.css?v=4.0">
<link rel="stylesheet" href="css/layout.css?v=4.0">
<link rel="stylesheet" href="css/ImageControleManager.css?v=4.0">
<link rel="stylesheet" href="css/anime.css?v=4.0">
<link rel="stylesheet" href="css/layoutLayer.css?v=4.0">
<link rel="stylesheet" href="css/toast.css?v=4.0">
<link rel="stylesheet" href="css/ui/modeChange.css?v=4.0">
<link rel="stylesheet" href="css/ui/objectMenu.css?v=4.0">
<link rel="stylesheet" href="css/ui/share.css?v=4.0">
<link rel="stylesheet" href="css/tippy.css?v=4.0">
<link rel="stylesheet" href="third/tippy/tippy.css?v=4.0">

<link href="third/Bootstrup/bootstrap.min.css?v=4.0" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/flag-icon-css/3.5.0/css/flag-icon.min.css">

<script src="third/glfx/glfx.js?v=3.9"></script>
<script src="third/Fabric.js/fabric.min.js?v=3.9"></script>
<script src="third/Fabric.js/fabric.min_PlusEraser.js?v=3.9"></script>
<script src="third/i18next/i18next.min.js?v=3.9"></script>
<script src="third/jsts/jsts.min.js?v=3.9"></script>
<script src="third/browser-image-compression/browser-image-compression.js?v=3.9"></script>
<script src="third/intro/intro.min.js?v=3.9"></script>
<script src="third/glfx/glfx.js?v=4.0"></script>
<script src="third/Fabric.js/fabric.min.js?v=4.0"></script>
<script src="third/Fabric.js/fabric.min_PlusEraser.js?v=4.0"></script>
<script src="third/i18next/i18next.min.js?v=4.0"></script>
<script src="third/jsts/jsts.min.js?v=4.0"></script>
<script src="third/browser-image-compression/browser-image-compression.js?v=4.0"></script>
<script src="third/intro/intro.min.js?v=4.0"></script>
<script src="js/fabric/dist/fabric-brush.min.js"></script>
<script src="js/fabric/brushes/ink_brush.js?v=3.9"></script>
<link rel="stylesheet" href="third/intro/introjs.min.css?v=3.9">
<link rel="stylesheet" href="css/ui/intro.css?v=3.9">
<script src="js/fabric/brushes/ink_brush.js?v=4.0"></script>
<link rel="stylesheet" href="third/intro/introjs.min.css?v=4.0">
<link rel="stylesheet" href="css/ui/intro.css?v=4.0">

<script src="third/tippy/popper.min.js?v=3.9"></script>
<script src="third/tippy/tippy-bundle.umd.min.js?v=3.9"></script>
<script src="third/tippy/popper.min.js?v=4.0"></script>
<script src="third/tippy/tippy-bundle.umd.min.js?v=4.0"></script>

<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/rough.js/3.1.0/rough.js"></script> -->
</head>
Expand Down Expand Up @@ -1652,68 +1653,68 @@
<div id="sp-manga-toastContainer" class="position-fixed bottom-0 end-0 p-3" style="z-index: 11; min-width: 250px;">
</div>

<script src="js/Settings.js?v=3.9" defer></script>
<script src="js/Settings.js?v=4.0" defer></script>

<script src="third/jszip/jszip.min.js?v=3.9" defer></script>
<script src="third/crypto-js/crypto-js.min.js?v=3.9"></script>
<script src="third/Bootstrup/bootstrap.bundle.min.js?v=3.9"></script>
<script src="third/jszip/jszip.min.js?v=4.0" defer></script>
<script src="third/crypto-js/crypto-js.min.js?v=4.0"></script>
<script src="third/Bootstrup/bootstrap.bundle.min.js?v=4.0"></script>


<script src="js/ui/canvasObjectMenu.js?v=3.9" defer></script>
<script src="js/ui/intro.js?v=3.9" defer></script>
<script src="js/ui/Toast.js?v=3.9" defer></script>
<script src="js/ui/tippy.js?v=3.9" defer></script>
<script src="js/ui/canvasObjectMenu.js?v=4.0" defer></script>
<script src="js/ui/intro.js?v=4.0" defer></script>
<script src="js/ui/Toast.js?v=4.0" defer></script>
<script src="js/ui/tippy.js?v=4.0" defer></script>
<script src="js/ui/i18next.js" defer></script>
<script src="js/ui/modeChange.js?v=3.9" defer></script>

<script src="js/util/FabricUtil.js?v=3.9" defer></script>
<script src="js/util/ImageUtil.js?v=3.9" defer></script>
<script src="js/util/AnimeUtil.js?v=3.9" defer></script>
<script src="js/util/ShareUtil.js?v=3.9" defer></script>

<script src="js/CanvasManager.js?v=3.9" defer></script>
<script src="js/ProjectManagement.js?v=3.9" defer></script>
<script src="js/Shortcut.js?v=3.9" defer></script>
<script src="js/PanelManager.js?v=3.9" defer></script>
<script src="js/PromptManager.js?v=3.9" defer></script>

<script src="js/ai/queue/Spinner.js?v=3.9" defer></script>
<script src="js/ai/queue/TaskQueue.js?v=3.9" defer></script>
<script src="js/ai/SDWebUI/SDWebUISettings.js?v=3.9" defer></script>
<script src="js/ai/SDWebUI/SDWebUIMultiCallApi.js?v=3.9" defer></script>
<script src="js/ai/SDWebUI/SDWebUISingleCallApi.js?v=3.9" defer></script>
<script src="js/ui/modeChange.js?v=4.0" defer></script>

<script src="js/util/FabricUtil.js?v=4.0" defer></script>
<script src="js/util/ImageUtil.js?v=4.0" defer></script>
<script src="js/util/AnimeUtil.js?v=4.0" defer></script>
<script src="js/util/ShareUtil.js?v=4.0" defer></script>

<script src="js/CanvasManager.js?v=4.0" defer></script>
<script src="js/ProjectManagement.js?v=4.0" defer></script>
<script src="js/Shortcut.js?v=4.0" defer></script>
<script src="js/PanelManager.js?v=4.0" defer></script>
<script src="js/PromptManager.js?v=4.0" defer></script>

<script src="js/ai/queue/Spinner.js?v=4.0" defer></script>
<script src="js/ai/queue/TaskQueue.js?v=4.0" defer></script>
<script src="js/ai/SDWebUI/SDWebUISettings.js?v=4.0" defer></script>
<script src="js/ai/SDWebUI/SDWebUIMultiCallApi.js?v=4.0" defer></script>
<script src="js/ai/SDWebUI/SDWebUISingleCallApi.js?v=4.0" defer></script>
<script src="js/ai/ComfyuiManagement.js" defer></script>
<script src="js/ai/GenerativeAI.js?v=3.9" defer></script>
<script src="js/ai/GenerativeAI.js?v=4.0" defer></script>

<script src="js/layer/FloatingWindowManagement.js?v=3.9" defer></script>
<script src="js/layer/LayerAIManagement.js?v=3.9" defer></script>
<script src="js/layer/LayerManagement.js?v=3.9" defer></script>
<script src="js/layer/ImageHistoryManagement.js?v=3.9" defer></script>
<script src="js/layer/FloatingWindowManagement.js?v=4.0" defer></script>
<script src="js/layer/LayerAIManagement.js?v=4.0" defer></script>
<script src="js/layer/LayerManagement.js?v=4.0" defer></script>
<script src="js/layer/ImageHistoryManagement.js?v=4.0" defer></script>

<script src="js/sidebar/Sidebar.js?v=3.9" defer></script>
<script src="js/sidebar/TextEffect.js?v=3.9" defer></script>
<script src="js/sidebar/VerticalText.js?v=3.9" defer></script>
<script src="js/sidebar/SpeechBubbleEffect.js?v=3.9" defer></script>
<script src="js/sidebar/OriginalBrush.js?v=3.9" defer></script>
<script src="js/sidebar/PenTools.js?v=3.9" defer></script>
<script src="js/sidebar/Knife.js?v=3.9" defer></script>
<script src="js/sidebar/Sidebar.js?v=4.0" defer></script>
<script src="js/sidebar/TextEffect.js?v=4.0" defer></script>
<script src="js/sidebar/VerticalText.js?v=4.0" defer></script>
<script src="js/sidebar/SpeechBubbleEffect.js?v=4.0" defer></script>
<script src="js/sidebar/OriginalBrush.js?v=4.0" defer></script>
<script src="js/sidebar/PenTools.js?v=4.0" defer></script>
<script src="js/sidebar/Knife.js?v=4.0" defer></script>

<script src="js/controle/CommonControleManagement.js?v=3.9" defer></script>
<script src="js/controle/ImageControleManager.js?v=3.9" defer></script>
<script src="js/controle/InfomationControle.js?v=3.9" defer></script>
<script src="js/controle/glfxControle.js?v=3.9" defer></script>
<script src="js/controle/CommonControleManagement.js?v=4.0" defer></script>
<script src="js/controle/ImageControleManager.js?v=4.0" defer></script>
<script src="js/controle/InfomationControle.js?v=4.0" defer></script>
<script src="js/controle/glfxControle.js?v=4.0" defer></script>


<script src="js/io/ImageDownload.js?v=3.9" defer></script>
<script src="js/io/ImageDownload.js?v=4.0" defer></script>

<!-- <script src="js/effect/roughHelper.js?v=3.9" defer></script> -->
<script src="js/event/FabricManagement.js?v=3.9" defer></script>
<!-- <script src="js/effect/roughHelper.js?v=4.0" defer></script> -->
<script src="js/event/FabricManagement.js?v=4.0" defer></script>

<script src="js/svg/GoogleIconNames.js?v=3.9"></script>
<script src="js/svg/GoogleIconHelper.js?v=3.9"></script>
<script src="js/svg/MangaPanelsImage_Landscape.js?v=3.9" defer></script>
<script src="js/svg/MangaPanelsImage_Vertical.js?v=3.9" defer></script>
<script src="js/svg/SpeechBubble.js?v=3.9" defer></script>
<script src="js/svg/GoogleIconNames.js?v=4.0"></script>
<script src="js/svg/GoogleIconHelper.js?v=4.0"></script>
<script src="js/svg/MangaPanelsImage_Landscape.js?v=4.0" defer></script>
<script src="js/svg/MangaPanelsImage_Vertical.js?v=4.0" defer></script>
<script src="js/svg/SpeechBubble.js?v=4.0" defer></script>
</body>

</html>
Loading

0 comments on commit bc14b36

Please sign in to comment.