Skip to content

Commit

Permalink
Merge pull request #31 from haruyan-hopemucci/feature/histories
Browse files Browse the repository at this point in the history 
履歴機能実装
  • Loading branch information
@haruyan-hopemucci
haruyan-hopemucci authored Feb 18, 2024
2 parents 4b2495f + 29dadb8 commit 7d44aa1
Show file tree
Hide file tree
Showing 5 changed files with 227 additions and 87 deletions.
16 changes: 16 additions & 0 deletions docs/css/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,4 +16,20 @@ canvas#output-image {

img[hidden] {
display: none;
}

.history-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 4px;
width: 100%;
}
.history-container .history-item {
-o-object-fit: cover;
object-fit: cover;
}
.history-container .history-item img {
width: 100%;
-o-object-fit: contain;
object-fit: contain;
}/*# sourceMappingURL=style.css.map */
2 changes: 1 addition & 1 deletion docs/css/style.css.map
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

17 changes: 15 additions & 2 deletions docs/css/style.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,6 @@
// left: 1em;
// z-index: -100;
}

}

img#pasted-image {
Expand All @@ -26,4 +25,18 @@ canvas#output-image {

img[hidden] {
display: none;
}
}

.history-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 4px;
width: 100%;
.history-item {
object-fit: cover;
img {
width: 100%;
object-fit: contain;
}
}
}
220 changes: 142 additions & 78 deletions docs/index.html
View file
Original file line number Diff line number Diff line change
@@ -1,85 +1,149 @@
<!DOCTYPE html>
<html lang="ja-jp">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>LGTN Generator</title>
<script
src="https://code.jquery.com/jquery-3.7.1.min.js"
integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo="
crossorigin="anonymous"
></script>
<script src="./js/heic2any.js"></script>
<script src="./js/app.js"></script>
<link
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM"
crossorigin="anonymous"
/>
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz"
crossorigin="anonymous"
></script>
<link rel="stylesheet" href="./css/style.css" />
</head>

<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>LGTN Generator</title>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"
integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
<script src="./js/heic2any.js"></script>
<script src="./js/app.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous" />
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz"
crossorigin="anonymous"></script>
<link rel="stylesheet" href="./css/style.css" />
</head>

<body>
<main class="container">
<h1>LGTN Generator <small>v0.5.0</small></h1>
<div id="paste-area">
<div id="paste-area-message">
クリップボードにコピーした画像をペーストしてください。
</div>
</div>
<div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="chooseOverlay" id="inlineRadio1" value="LGTM" checked />
<label class="form-check-label" for="inlineRadio1">LGTM画像を生成</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="chooseOverlay" id="inlineRadio2" value="LGTN" />
<label class="form-check-label" for="inlineRadio2">LGTN画像を生成</label>
<body>
<main class="container">
<h1>LGTN Generator <small>v0.6.0</small></h1>
<div class="row">
<div class="col-md-6">
<div id="paste-area">
<div id="paste-area-message">
クリップボードにコピーした画像をペーストしてください。
</div>
</div>
<div>
<div class="form-check form-check-inline">
<input
class="form-check-input"
type="radio"
name="chooseOverlay"
id="inlineRadio1"
value="LGTM"
checked
/>
<label class="form-check-label" for="inlineRadio1"
>LGTM画像を生成</label
>
</div>
<div class="form-check form-check-inline">
<input
class="form-check-input"
type="radio"
name="chooseOverlay"
id="inlineRadio2"
value="LGTN"
/>
<label class="form-check-label" for="inlineRadio2"
>LGTN画像を生成</label
>
</div>
</div>
<div>
<div class="form-check">
<input
class="form-check-input"
type="radio"
name="textPosition"
id="textPositionTop"
value="top"
/>
<label class="form-check-label" for="textPositionTop"
>テキスト位置：上</label
>
</div>
<div class="form-check">
<input
class="form-check-input"
type="radio"
name="textPosition"
id="textPositionMiddle"
value="middle"
checked
/>
<label class="form-check-label" for="textPositionMiddle"
>テキスト位置：中</label
>
</div>
<div class="form-check">
<input
class="form-check-input"
type="radio"
name="textPosition"
id="textPositionBottom"
value="bottom"
/>
<label class="form-check-label" for="textPositionBottom"
>テキスト位置：下</label
>
</div>
</div>
<img id="pasted-image" hidden />
<img id="img__LGTM" src="./img/lgtm.png" hidden />
<img id="img__LGTN" src="./img/lgtn.png" hidden />
<canvas id="output-image" width="400" height="400"></canvas>
</div>
<div class="col-md-6">
<section id="history" class="history">
<h2>History</h2>
<div id="history-container" class="history-container"></div>
</section>
</div>
</div>
</div>
<div>
<div class="form-check">
<input class="form-check-input" type="radio" name="textPosition" id="textPositionTop" value="top" />
<label class="form-check-label" for="textPositionTop">テキスト位置：上</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="textPosition" id="textPositionMiddle" value="middle"
checked />
<label class="form-check-label" for="textPositionMiddle">テキスト位置：中</label>

<div class="alert alert-warning" role="alert">
<h2>使用方法</h2>
<ul>
<li>Finder, Exproloerで画像ファイルをコピーしてペースト！</li>
<li>
OSの画像切り抜き機能でスクリーンをクリップボードにコピーしてペースト！
</li>
</ul>
<h2>制限事項</h2>
<ul>
<li>
Firefox, safariでは動作しません。 各種スマホは動作未確認です。
</li>
</ul>
<h2>動作確認環境</h2>
<h3>Windows10</h3>
<ul>
<li>Google Chrome</li>
<li>Microsoft Edge</li>
</ul>
<h3>MacOS Venture</h3>
<ul>
<li>Google Chrome</li>
</ul>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="textPosition" id="textPositionBottom" value="bottom" />
<label class="form-check-label" for="textPositionBottom">テキスト位置：下</label>
</main>
<template id="history-template">
<div class="history-item">
<img src="" />
</div>
</div>
<img id="pasted-image" hidden />
<img id="img__LGTM" src="./img/lgtm.png" hidden />
<img id="img__LGTN" src="./img/lgtn.png" hidden />
<canvas id="output-image" width="400" height="400"></canvas>
<div class="alert alert-warning" role="alert">
<h2>使用方法</h2>
<ul>
<li>Finder, Exproloerで画像ファイルをコピーしてペースト！</li>
<li>
OSの画像切り抜き機能でスクリーンをクリップボードにコピーしてペースト！
</li>
</ul>
<h2>制限事項</h2>
<ul>
<li>
Firefox, safariでは動作しません。 各種スマホは動作未確認です。
</li>
</ul>
<h2>動作確認環境</h2>
<h3>Windows10</h3>
<ul>
<li>Google Chrome</li>
<li>Microsoft Edge</li>
</ul>
<h3>MacOS Venture</h3>
<ul>
<li>Google Chrome</li>
</ul>
</div>
</main>
</body>

</template>
</body>
</html>
Loading

0 comments on commit 7d44aa1

Please sign in to comment.