1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 | <span class="dec"><!DOCTYPE html></span><span class="pln"></span><span class="tag"><html</span><span class="pln"> </span><span class="atn">lang</span><span class="pun">=</span><span class="atv">"ja"</span><span class="tag">></span><span class="pln"></span><span class="tag"><head></span><span class="pln"> </span><span class="tag"><meta</span><span class="pln"> </span><span class="atn">charset</span><span class="pun">=</span><span class="atv">"UTF-8"</span><span class="tag">></span><span class="pln"> </span><span class="tag"><meta</span><span class="pln"> </span><span class="atn">name</span><span class="pun">=</span><span class="atv">"viewport"</span><span class="pln"> </span><span class="atn">content</span><span class="pun">=</span><span class="atv">"width=device-width, initial-scale=1.0"</span><span class="tag">></span><span class="pln"> </span><span class="tag"><title></span><span class="pln">創作アイディア生成サイト</span><span class="tag"></title></span><span class="pln"> </span><span class="tag"><style></span><span class="pln"> body </span><span class="pun">{</span><span class="pln"> font</span><span class="pun">-</span><span class="pln">family</span><span class="pun">:</span><span class="pln"> </span><span class="typ">Arial</span><span class="pun">,</span><span class="pln"> sans</span><span class="pun">-</span><span class="pln">serif</span><span class="pun">;</span><span class="pln"> margin</span><span class="pun">:</span><span class="pln"> </span><span class="lit">0</span><span class="pun">;</span><span class="pln"> display</span><span class="pun">:</span><span class="pln"> flex</span><span class="pun">;</span><span class="pln"> flex</span><span class="pun">-</span><span class="pln">direction</span><span class="pun">:</span><span class="pln"> column</span><span class="pun">;</span><span class="pln"> align</span><span class="pun">-</span><span class="pln">items</span><span class="pun">:</span><span class="pln"> center</span><span class="pun">;</span><span class="pln"> background</span><span class="pun">-</span><span class="pln">color</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">var</span><span class="pun">(--</span><span class="pln">background</span><span class="pun">-</span><span class="pln">color</span><span class="pun">,</span><span class="pln"> </span><span class="com">#f4f6f9);</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="pun">.</span><span class="pln">container </span><span class="pun">{</span><span class="pln"> max</span><span class="pun">-</span><span class="pln">width</span><span class="pun">:</span><span class="pln"> </span><span class="lit">800px</span><span class="pun">;</span><span class="pln"> width</span><span class="pun">:</span><span class="pln"> </span><span class="lit">90</span><span class="pun">%;</span><span class="pln"> padding</span><span class="pun">:</span><span class="pln"> </span><span class="lit">20px</span><span class="pun">;</span><span class="pln"> text</span><span class="pun">-</span><span class="pln">align</span><span class="pun">:</span><span class="pln"> center</span><span class="pun">;</span><span class="pln"> background</span><span class="pun">-</span><span class="pln">color</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">var</span><span class="pun">(--</span><span class="pln">chat</span><span class="pun">-</span><span class="pln">bg</span><span class="pun">-</span><span class="pln">color</span><span class="pun">,</span><span class="pln"> </span><span class="com">#ffffff);</span><span class="pln"> border</span><span class="pun">-</span><span class="pln">radius</span><span class="pun">:</span><span class="pln"> </span><span class="lit">10px</span><span class="pun">;</span><span class="pln"> box</span><span class="pun">-</span><span class="pln">shadow</span><span class="pun">:</span><span class="pln"> </span><span class="lit">0</span><span class="pln"> </span><span class="lit">4px</span><span class="pln"> </span><span class="lit">15px</span><span class="pln"> rgba</span><span class="pun">(</span><span class="lit">0</span><span class="pun">,</span><span class="pln"> </span><span class="lit">0</span><span class="pun">,</span><span class="pln"> </span><span class="lit">0</span><span class="pun">,</span><span class="pln"> </span><span class="lit">0.2</span><span class="pun">);</span><span class="pln"> margin</span><span class="pun">-</span><span class="pln">top</span><span class="pun">:</span><span class="pln"> </span><span class="lit">20px</span><span class="pun">;</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="pun">.</span><span class="pln">title </span><span class="pun">{</span><span class="pln"> font</span><span class="pun">-</span><span class="pln">size</span><span class="pun">:</span><span class="pln"> </span><span class="lit">24px</span><span class="pun">;</span><span class="pln"> margin</span><span class="pun">-</span><span class="pln">bottom</span><span class="pun">:</span><span class="pln"> </span><span class="lit">15px</span><span class="pun">;</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="pun">.</span><span class="pln">theme</span><span class="pun">-</span><span class="pln">toggle</span><span class="pun">-</span><span class="pln">btn </span><span class="pun">{</span><span class="pln"> position</span><span class="pun">:</span><span class="pln"> absolute</span><span class="pun">;</span><span class="pln"> right</span><span class="pun">:</span><span class="pln"> </span><span class="lit">15px</span><span class="pun">;</span><span class="pln"> top</span><span class="pun">:</span><span class="pln"> </span><span class="lit">15px</span><span class="pun">;</span><span class="pln"> padding</span><span class="pun">:</span><span class="pln"> </span><span class="lit">5px</span><span class="pln"> </span><span class="lit">10px</span><span class="pun">;</span><span class="pln"> cursor</span><span class="pun">:</span><span class="pln"> pointer</span><span class="pun">;</span><span class="pln"> border</span><span class="pun">:</span><span class="pln"> none</span><span class="pun">;</span><span class="pln"> background</span><span class="pun">-</span><span class="pln">color</span><span class="pun">:</span><span class="pln"> </span><span class="com">#0078d7;</span><span class="pln"> color</span><span class="pun">:</span><span class="pln"> </span><span class="com">#ffffff;</span><span class="pln"> border</span><span class="pun">-</span><span class="pln">radius</span><span class="pun">:</span><span class="pln"> </span><span class="lit">5px</span><span class="pun">;</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="pun">.</span><span class="pln">dropdown</span><span class="pun">,</span><span class="pln"> </span><span class="pun">.</span><span class="pln">input</span><span class="pun">,</span><span class="pln"> </span><span class="pun">.</span><span class="pln">button </span><span class="pun">{</span><span class="pln"> width</span><span class="pun">:</span><span class="pln"> </span><span class="lit">80</span><span class="pun">%;</span><span class="pln"> margin</span><span class="pun">:</span><span class="pln"> </span><span class="lit">5px</span><span class="pun">;</span><span class="pln"> padding</span><span class="pun">:</span><span class="pln"> </span><span class="lit">10px</span><span class="pun">;</span><span class="pln"> font</span><span class="pun">-</span><span class="pln">size</span><span class="pun">:</span><span class="pln"> </span><span class="lit">16px</span><span class="pun">;</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="pun">.</span><span class="pln">idea</span><span class="pun">-</span><span class="pln">display </span><span class="pun">{</span><span class="pln"> margin</span><span class="pun">-</span><span class="pln">top</span><span class="pun">:</span><span class="pln"> </span><span class="lit">20px</span><span class="pun">;</span><span class="pln"> font</span><span class="pun">-</span><span class="pln">size</span><span class="pun">:</span><span class="pln"> </span><span class="lit">18px</span><span class="pun">;</span><span class="pln"> padding</span><span class="pun">:</span><span class="pln"> </span><span class="lit">15px</span><span class="pun">;</span><span class="pln"> color</span><span class="pun">:</span><span class="pln"> </span><span class="com">#333;</span><span class="pln"> background</span><span class="pun">-</span><span class="pln">color</span><span class="pun">:</span><span class="pln"> </span><span class="com">#f4f4f4;</span><span class="pln"> border</span><span class="pun">-</span><span class="pln">radius</span><span class="pun">:</span><span class="pln"> </span><span class="lit">10px</span><span class="pun">;</span><span class="pln"> text</span><span class="pun">-</span><span class="pln">align</span><span class="pun">:</span><span class="pln"> left</span><span class="pun">;</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="pun">.</span><span class="pln">related</span><span class="pun">-</span><span class="pln">ideas </span><span class="pun">{</span><span class="pln"> font</span><span class="pun">-</span><span class="pln">size</span><span class="pun">:</span><span class="pln"> </span><span class="lit">14px</span><span class="pun">;</span><span class="pln"> color</span><span class="pun">:</span><span class="pln"> </span><span class="com">#555;</span><span class="pln"> margin</span><span class="pun">-</span><span class="pln">top</span><span class="pun">:</span><span class="pln"> </span><span class="lit">10px</span><span class="pun">;</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="tag"></style></span><span class="pln"></span><span class="tag"></head></span><span class="pln"></span><span class="tag"><body></span><span class="pln"></span><span class="tag"><div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"container"</span><span class="tag">></span><span class="pln"> </span><span class="tag"><h1</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"title"</span><span class="tag">></span><span class="pln">創作アイディア生成サイト</span><span class="tag"></h1></span><span class="pln"> </span><span class="tag"><button</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"theme-toggle-btn"</span><span class="pln"> </span><span class="atn">onclick</span><span class="pun">=</span><span class="atv">"</span><span class="pln">toggleTheme</span><span class="pun">()</span><span class="atv">"</span><span class="tag">></span><span class="pln"><img draggable="false" role="img" class="emoji" alt=" src="https://s.w.org/images/core/emoji/15.0.3/svg/1f319.svg"> ダークモード</span><span class="tag"></button></span><span class="pln"> </span><span class="tag"><label</span><span class="pln"> </span><span class="atn">for</span><span class="pun">=</span><span class="atv">"categorySelect"</span><span class="tag">></span><span class="pln">カテゴリを選択</span><span class="tag"></label></span><span class="pln"> </span><span class="tag"><select</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"categorySelect"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"dropdown"</span><span class="tag">></span><span class="pln"> </span><span class="tag"><option</span><span class="pln"> </span><span class="atn">value</span><span class="pun">=</span><span class="atv">"fantasy"</span><span class="tag">></span><span class="pln">ファンタジー</span><span class="tag"></option></span><span class="pln"> </span><span class="tag"><option</span><span class="pln"> </span><span class="atn">value</span><span class="pun">=</span><span class="atv">"sci-fi"</span><span class="tag">></span><span class="pln">SF</span><span class="tag"></option></span><span class="pln"> </span><span class="tag"><option</span><span class="pln"> </span><span class="atn">value</span><span class="pun">=</span><span class="atv">"mystery"</span><span class="tag">></span><span class="pln">ミステリー</span><span class="tag"></option></span><span class="pln"> </span><span class="tag"><option</span><span class="pln"> </span><span class="atn">value</span><span class="pun">=</span><span class="atv">"horror"</span><span class="tag">></span><span class="pln">ホラー</span><span class="tag"></option></span><span class="pln"> </span><span class="tag"></select></span><span class="pln"> </span><span class="tag"><BR></span><span class="pln"> </span><span class="tag"><label</span><span class="pln"> </span><span class="atn">for</span><span class="pun">=</span><span class="atv">"elementSelect"</span><span class="tag">></span><span class="pln">詳細要素を選択</span><span class="tag"></label></span><span class="pln"> </span><span class="tag"><select</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"elementSelect"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"dropdown"</span><span class="tag">></span><span class="pln"> </span><span class="tag"><option</span><span class="pln"> </span><span class="atn">value</span><span class="pun">=</span><span class="atv">"character"</span><span class="tag">></span><span class="pln">キャラクター</span><span class="tag"></option></span><span class="pln"> </span><span class="tag"><option</span><span class="pln"> </span><span class="atn">value</span><span class="pun">=</span><span class="atv">"plot"</span><span class="tag">></span><span class="pln">プロット</span><span class="tag"></option></span><span class="pln"> </span><span class="tag"><option</span><span class="pln"> </span><span class="atn">value</span><span class="pun">=</span><span class="atv">"setting"</span><span class="tag">></span><span class="pln">舞台設定</span><span class="tag"></option></span><span class="pln"> </span><span class="tag"><option</span><span class="pln"> </span><span class="atn">value</span><span class="pun">=</span><span class="atv">"theme"</span><span class="tag">></span><span class="pln">テーマ</span><span class="tag"></option></span><span class="pln"> </span><span class="tag"></select></span><span class="pln"> </span><span class="tag"><button</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"button"</span><span class="pln"> </span><span class="atn">onclick</span><span class="pun">=</span><span class="atv">"</span><span class="pln">generateIdea</span><span class="pun">()</span><span class="atv">"</span><span class="tag">></span><span class="pln">アイディア生成</span><span class="tag"></button></span><span class="pln"> </span><span class="tag"><div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"idea-display"</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"ideaDisplay"</span><span class="tag">></span><span class="pln">ここに生成されたアイディアが表示されます。</span><span class="tag"></div></span><span class="pln"> </span><span class="tag"><div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"related-ideas"</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"relatedIdeas"</span><span class="tag">></div></span><span class="pln"></span><span class="tag"></div></span><span class="pln"></span><span class="tag"><script></span><span class="pln"> </span><span class="kwd">const</span><span class="pln"> ideas </span><span class="pun">=</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><span class="str">"fantasy"</span><span class="pun">:</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><span class="str">"character"</span><span class="pun">:</span><span class="pln"> </span><span class="pun">[</span><span class="str">"勇敢な騎士"</span><span class="pun">,</span><span class="pln"> </span><span class="str">"神秘的な魔法使い"</span><span class="pun">,</span><span class="pln"> </span><span class="str">"不思議な生物"</span><span class="pun">],</span><span class="pln"> </span><span class="str">"plot"</span><span class="pun">:</span><span class="pln"> </span><span class="pun">[</span><span class="str">"王国を救うための冒険"</span><span class="pun">,</span><span class="pln"> </span><span class="str">"魔法の秘宝を巡る争い"</span><span class="pun">,</span><span class="pln"> </span><span class="str">"禁断の魔法を探求する旅"</span><span class="pun">],</span><span class="pln"> </span><span class="str">"setting"</span><span class="pun">:</span><span class="pln"> </span><span class="pun">[</span><span class="str">"ドラゴンが住む山"</span><span class="pun">,</span><span class="pln"> </span><span class="str">"不思議な森"</span><span class="pun">,</span><span class="pln"> </span><span class="str">"海底の王国"</span><span class="pun">],</span><span class="pln"> </span><span class="str">"theme"</span><span class="pun">:</span><span class="pln"> </span><span class="pun">[</span><span class="str">"友情と勇気"</span><span class="pun">,</span><span class="pln"> </span><span class="str">"運命と戦い"</span><span class="pun">,</span><span class="pln"> </span><span class="str">"魔法と現実の対立"</span><span class="pun">]</span><span class="pln"> </span><span class="pun">},</span><span class="pln"> </span><span class="str">"sci-fi"</span><span class="pun">:</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><span class="str">"character"</span><span class="pun">:</span><span class="pln"> </span><span class="pun">[</span><span class="str">"宇宙飛行士"</span><span class="pun">,</span><span class="pln"> </span><span class="str">"AIロボット"</span><span class="pun">,</span><span class="pln"> </span><span class="str">"サイボーグ"</span><span class="pun">],</span><span class="pln"> </span><span class="str">"plot"</span><span class="pun">:</span><span class="pln"> </span><span class="pun">[</span><span class="str">"異星人との接触"</span><span class="pun">,</span><span class="pln"> </span><span class="str">"未来都市の陰謀"</span><span class="pun">,</span><span class="pln"> </span><span class="str">"宇宙戦争"</span><span class="pun">],</span><span class="pln"> </span><span class="str">"setting"</span><span class="pun">:</span><span class="pln"> </span><span class="pun">[</span><span class="str">"宇宙ステーション"</span><span class="pun">,</span><span class="pln"> </span><span class="str">"荒廃した地球"</span><span class="pun">,</span><span class="pln"> </span><span class="str">"人工惑星"</span><span class="pun">],</span><span class="pln"> </span><span class="str">"theme"</span><span class="pun">:</span><span class="pln"> </span><span class="pun">[</span><span class="str">"人間と機械の共存"</span><span class="pun">,</span><span class="pln"> </span><span class="str">"進化の危機"</span><span class="pun">,</span><span class="pln"> </span><span class="str">"文明の崩壊と再生"</span><span class="pun">]</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="pun">};</span><span class="pln"> </span><span class="kwd">const</span><span class="pln"> relatedIdeas </span><span class="pun">=</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><span class="str">"友情と勇気"</span><span class="pun">:</span><span class="pln"> </span><span class="pun">[</span><span class="str">"戦場での友情"</span><span class="pun">,</span><span class="pln"> </span><span class="str">"共に戦う友人の絆"</span><span class="pun">],</span><span class="pln"> </span><span class="str">"運命と戦い"</span><span class="pun">:</span><span class="pln"> </span><span class="pun">[</span><span class="str">"運命に抗うヒーロー"</span><span class="pun">,</span><span class="pln"> </span><span class="str">"過去を背負う主人公の決意"</span><span class="pun">]</span><span class="pln"> </span><span class="pun">};</span><span class="pln"> </span><span class="kwd">let</span><span class="pln"> isDarkMode </span><span class="pun">=</span><span class="pln"> </span><span class="kwd">false</span><span class="pun">;</span><span class="pln"> </span><span class="kwd">function</span><span class="pln"> toggleTheme</span><span class="pun">()</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> isDarkMode </span><span class="pun">=</span><span class="pln"> </span><span class="pun">!</span><span class="pln">isDarkMode</span><span class="pun">;</span><span class="pln"> document</span><span class="pun">.</span><span class="pln">body</span><span class="pun">.</span><span class="pln">style</span><span class="pun">.</span><span class="pln">setProperty</span><span class="pun">(</span><span class="str">"--background-color"</span><span class="pun">,</span><span class="pln"> isDarkMode </span><span class="pun">?</span><span class="pln"> </span><span class="str">"#333"</span><span class="pln"> </span><span class="pun">:</span><span class="pln"> </span><span class="str">"#f4f6f9"</span><span class="pun">);</span><span class="pln"> document</span><span class="pun">.</span><span class="pln">body</span><span class="pun">.</span><span class="pln">style</span><span class="pun">.</span><span class="pln">setProperty</span><span class="pun">(</span><span class="str">"--chat-bg-color"</span><span class="pun">,</span><span class="pln"> isDarkMode </span><span class="pun">?</span><span class="pln"> </span><span class="str">"#444"</span><span class="pln"> </span><span class="pun">:</span><span class="pln"> </span><span class="str">"#ffffff"</span><span class="pun">);</span><span class="pln"> document</span><span class="pun">.</span><span class="pln">querySelector</span><span class="pun">(</span><span class="str">".theme-toggle-btn"</span><span class="pun">).</span><span class="pln">textContent </span><span class="pun">=</span><span class="pln"> isDarkMode </span><span class="pun">?</span><span class="pln"> </span><span class="str">"<img draggable="false" role="img" class="emoji" alt=" src="https://s.w.org/images/core/emoji/15.0.3/svg/1f31e.svg"> ライトモード"</span><span class="pln"> </span><span class="pun">:</span><span class="pln"> </span><span class="str">"<img draggable="false" role="img" class="emoji" alt=" src="https://s.w.org/images/core/emoji/15.0.3/svg/1f319.svg"> ダークモード"</span><span class="pun">;</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="kwd">function</span><span class="pln"> generateIdea</span><span class="pun">()</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><span class="kwd">const</span><span class="pln"> category </span><span class="pun">=</span><span class="pln"> document</span><span class="pun">.</span><span class="pln">getElementById</span><span class="pun">(</span><span class="str">"categorySelect"</span><span class="pun">).</span><span class="pln">value</span><span class="pun">;</span><span class="pln"> </span><span class="kwd">const</span><span class="pln"> element </span><span class="pun">=</span><span class="pln"> document</span><span class="pun">.</span><span class="pln">getElementById</span><span class="pun">(</span><span class="str">"elementSelect"</span><span class="pun">).</span><span class="pln">value</span><span class="pun">;</span><span class="pln"> </span><span class="kwd">const</span><span class="pln"> ideaArray </span><span class="pun">=</span><span class="pln"> ideas</span><span class="pun">[</span><span class="pln">category</span><span class="pun">][</span><span class="pln">element</span><span class="pun">];</span><span class="pln"> </span><span class="kwd">const</span><span class="pln"> randomIdea </span><span class="pun">=</span><span class="pln"> ideaArray</span><span class="pun">[</span><span class="typ">Math</span><span class="pun">.</span><span class="pln">floor</span><span class="pun">(</span><span class="typ">Math</span><span class="pun">.</span><span class="pln">random</span><span class="pun">()</span><span class="pln"> </span><span class="pun">*</span><span class="pln"> ideaArray</span><span class="pun">.</span><span class="pln">length</span><span class="pun">)];</span><span class="pln"> document</span><span class="pun">.</span><span class="pln">getElementById</span><span class="pun">(</span><span class="str">"ideaDisplay"</span><span class="pun">).</span><span class="pln">textContent </span><span class="pun">=</span><span class="pln"> randomIdea</span><span class="pun">;</span><span class="pln"> displayRelatedIdeas</span><span class="pun">(</span><span class="pln">randomIdea</span><span class="pun">);</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="kwd">function</span><span class="pln"> displayRelatedIdeas</span><span class="pun">(</span><span class="pln">idea</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><span class="kwd">const</span><span class="pln"> relatedDiv </span><span class="pun">=</span><span class="pln"> document</span><span class="pun">.</span><span class="pln">getElementById</span><span class="pun">(</span><span class="str">"relatedIdeas"</span><span class="pun">);</span><span class="pln"> relatedDiv</span><span class="pun">.</span><span class="pln">innerHTML </span><span class="pun">=</span><span class="pln"> </span><span class="str">"<h4>関連するアイディア:</h4>"</span><span class="pun">;</span><span class="pln"> </span><span class="kwd">const</span><span class="pln"> relatedItems </span><span class="pun">=</span><span class="pln"> relatedIdeas</span><span class="pun">[</span><span class="pln">idea</span><span class="pun">]</span><span class="pln"> </span><span class="pun">||</span><span class="pln"> </span><span class="pun">[</span><span class="str">"関連アイディアが見つかりません"</span><span class="pun">];</span><span class="pln"> relatedItems</span><span class="pun">.</span><span class="pln">forEach</span><span class="pun">(</span><span class="pln">item </span><span class="pun">=></span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><span class="kwd">const</span><span class="pln"> relatedItemDiv </span><span class="pun">=</span><span class="pln"> document</span><span class="pun">.</span><span class="pln">createElement</span><span class="pun">(</span><span class="str">"div"</span><span class="pun">);</span><span class="pln"> relatedItemDiv</span><span class="pun">.</span><span class="pln">textContent </span><span class="pun">=</span><span class="pln"> </span><span class="pun">`-</span><span class="pln"> $</span><span class="pun">{</span><span class="pln">item</span><span class="pun">}`;</span><span class="pln"> relatedDiv</span><span class="pun">.</span><span class="pln">appendChild</span><span class="pun">(</span><span class="pln">relatedItemDiv</span><span class="pun">);</span><span class="pln"> </span><span class="pun">});</span><span class="pln"> </span><span class="pun">}</span><span class="pln"></span><span class="tag"></script></span><span class="pln"></span><span class="tag"></body></span><span class="pln"></span><span class="tag"></html></span><span class="pln"></span> |
タグ: HTML
"
"神と対話するAI
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 | <span class="dec"><!DOCTYPE html></span><span class="pln"></span><span class="tag"><html</span><span class="pln"> </span><span class="atn">lang</span><span class="pun">=</span><span class="atv">"ja"</span><span class="tag">></span><span class="pln"></span><span class="tag"><head></span><span class="pln"> </span><span class="tag"><meta</span><span class="pln"> </span><span class="atn">charset</span><span class="pun">=</span><span class="atv">"UTF-8"</span><span class="tag">></span><span class="pln"> </span><span class="tag"><meta</span><span class="pln"> </span><span class="atn">name</span><span class="pun">=</span><span class="atv">"viewport"</span><span class="pln"> </span><span class="atn">content</span><span class="pun">=</span><span class="atv">"width=device-width, initial-scale=1.0"</span><span class="tag">></span><span class="pln"> </span><span class="tag"><title></span><span class="pln">神と対話するAI</span><span class="tag"></title></span><span class="pln"> </span><span class="tag"><style></span><span class="pln"> </span><span class="com">/* 神秘的な背景とエフェクト */</span><span class="pln"> body </span><span class="pun">{</span><span class="pln"> font</span><span class="pun">-</span><span class="pln">family</span><span class="pun">:</span><span class="pln"> </span><span class="str">'Georgia'</span><span class="pun">,</span><span class="pln"> serif</span><span class="pun">;</span><span class="pln"> background</span><span class="pun">-</span><span class="pln">color</span><span class="pun">:</span><span class="pln"> </span><span class="com">#1a1a2e;</span><span class="pln"> color</span><span class="pun">:</span><span class="pln"> </span><span class="com">#d1d1e9;</span><span class="pln"> display</span><span class="pun">:</span><span class="pln"> flex</span><span class="pun">;</span><span class="pln"> align</span><span class="pun">-</span><span class="pln">items</span><span class="pun">:</span><span class="pln"> center</span><span class="pun">;</span><span class="pln"> justify</span><span class="pun">-</span><span class="pln">content</span><span class="pun">:</span><span class="pln"> center</span><span class="pun">;</span><span class="pln"> height</span><span class="pun">:</span><span class="pln"> </span><span class="lit">100vh</span><span class="pun">;</span><span class="pln"> margin</span><span class="pun">:</span><span class="pln"> </span><span class="lit">0</span><span class="pun">;</span><span class="pln"> overflow</span><span class="pun">:</span><span class="pln"> hidden</span><span class="pun">;</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="pun">.</span><span class="pln">chat</span><span class="pun">-</span><span class="pln">container </span><span class="pun">{</span><span class="pln"> width</span><span class="pun">:</span><span class="pln"> </span><span class="lit">100</span><span class="pun">%;</span><span class="pln"> max</span><span class="pun">-</span><span class="pln">width</span><span class="pun">:</span><span class="pln"> </span><span class="lit">600px</span><span class="pun">;</span><span class="pln"> background</span><span class="pun">-</span><span class="pln">color</span><span class="pun">:</span><span class="pln"> rgba</span><span class="pun">(</span><span class="lit">43</span><span class="pun">,</span><span class="pln"> </span><span class="lit">43</span><span class="pun">,</span><span class="pln"> </span><span class="lit">63</span><span class="pun">,</span><span class="pln"> </span><span class="lit">0.9</span><span class="pun">);</span><span class="pln"> border</span><span class="pun">-</span><span class="pln">radius</span><span class="pun">:</span><span class="pln"> </span><span class="lit">10px</span><span class="pun">;</span><span class="pln"> box</span><span class="pun">-</span><span class="pln">shadow</span><span class="pun">:</span><span class="pln"> </span><span class="lit">0px</span><span class="pln"> </span><span class="lit">4px</span><span class="pln"> </span><span class="lit">12px</span><span class="pln"> rgba</span><span class="pun">(</span><span class="lit">0</span><span class="pun">,</span><span class="pln"> </span><span class="lit">0</span><span class="pun">,</span><span class="pln"> </span><span class="lit">0</span><span class="pun">,</span><span class="pln"> </span><span class="lit">0.6</span><span class="pun">);</span><span class="pln"> padding</span><span class="pun">:</span><span class="pln"> </span><span class="lit">20px</span><span class="pun">;</span><span class="pln"> position</span><span class="pun">:</span><span class="pln"> relative</span><span class="pun">;</span><span class="pln"> overflow</span><span class="pun">:</span><span class="pln"> hidden</span><span class="pun">;</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="pun">.</span><span class="pln">messages </span><span class="pun">{</span><span class="pln"> height</span><span class="pun">:</span><span class="pln"> </span><span class="lit">300px</span><span class="pun">;</span><span class="pln"> overflow</span><span class="pun">-</span><span class="pln">y</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">auto</span><span class="pun">;</span><span class="pln"> margin</span><span class="pun">-</span><span class="pln">bottom</span><span class="pun">:</span><span class="pln"> </span><span class="lit">10px</span><span class="pun">;</span><span class="pln"> padding</span><span class="pun">-</span><span class="pln">right</span><span class="pun">:</span><span class="pln"> </span><span class="lit">10px</span><span class="pun">;</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="pun">.</span><span class="pln">message </span><span class="pun">{</span><span class="pln"> margin</span><span class="pun">:</span><span class="pln"> </span><span class="lit">10px</span><span class="pln"> </span><span class="lit">0</span><span class="pun">;</span><span class="pln"> line</span><span class="pun">-</span><span class="pln">height</span><span class="pun">:</span><span class="pln"> </span><span class="lit">1.5</span><span class="pun">;</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="pun">.</span><span class="pln">user</span><span class="pun">-</span><span class="pln">message </span><span class="pun">{</span><span class="pln"> text</span><span class="pun">-</span><span class="pln">align</span><span class="pun">:</span><span class="pln"> right</span><span class="pun">;</span><span class="pln"> color</span><span class="pun">:</span><span class="pln"> </span><span class="com">#00aaff;</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="pun">.</span><span class="pln">ai</span><span class="pun">-</span><span class="pln">message </span><span class="pun">{</span><span class="pln"> text</span><span class="pun">-</span><span class="pln">align</span><span class="pun">:</span><span class="pln"> left</span><span class="pun">;</span><span class="pln"> color</span><span class="pun">:</span><span class="pln"> </span><span class="com">#e6e6fa;</span><span class="pln"> font</span><span class="pun">-</span><span class="pln">style</span><span class="pun">:</span><span class="pln"> italic</span><span class="pun">;</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="pun">.</span><span class="pln">typing</span><span class="pun">-</span><span class="pln">indicator </span><span class="pun">{</span><span class="pln"> font</span><span class="pun">-</span><span class="pln">size</span><span class="pun">:</span><span class="pln"> </span><span class="lit">1.5em</span><span class="pun">;</span><span class="pln"> color</span><span class="pun">:</span><span class="pln"> </span><span class="com">#e6e6fa;</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="pun">.</span><span class="pln">input</span><span class="pun">-</span><span class="pln">container </span><span class="pun">{</span><span class="pln"> display</span><span class="pun">:</span><span class="pln"> flex</span><span class="pun">;</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> input</span><span class="pun">[</span><span class="pln">type</span><span class="pun">=</span><span class="str">"text"</span><span class="pun">]</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> flex</span><span class="pun">:</span><span class="pln"> </span><span class="lit">1</span><span class="pun">;</span><span class="pln"> padding</span><span class="pun">:</span><span class="pln"> </span><span class="lit">10px</span><span class="pun">;</span><span class="pln"> border</span><span class="pun">-</span><span class="pln">radius</span><span class="pun">:</span><span class="pln"> </span><span class="lit">5px</span><span class="pun">;</span><span class="pln"> border</span><span class="pun">:</span><span class="pln"> </span><span class="lit">1px</span><span class="pln"> solid </span><span class="com">#555;</span><span class="pln"> background</span><span class="pun">-</span><span class="pln">color</span><span class="pun">:</span><span class="pln"> </span><span class="com">#444;</span><span class="pln"> color</span><span class="pun">:</span><span class="pln"> </span><span class="com">#e6e6fa;</span><span class="pln"> margin</span><span class="pun">-</span><span class="pln">right</span><span class="pun">:</span><span class="pln"> </span><span class="lit">10px</span><span class="pun">;</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> button </span><span class="pun">{</span><span class="pln"> padding</span><span class="pun">:</span><span class="pln"> </span><span class="lit">10px</span><span class="pln"> </span><span class="lit">20px</span><span class="pun">;</span><span class="pln"> border</span><span class="pun">:</span><span class="pln"> none</span><span class="pun">;</span><span class="pln"> border</span><span class="pun">-</span><span class="pln">radius</span><span class="pun">:</span><span class="pln"> </span><span class="lit">5px</span><span class="pun">;</span><span class="pln"> background</span><span class="pun">-</span><span class="pln">color</span><span class="pun">:</span><span class="pln"> </span><span class="com">#5a5adb;</span><span class="pln"> color</span><span class="pun">:</span><span class="pln"> white</span><span class="pun">;</span><span class="pln"> cursor</span><span class="pun">:</span><span class="pln"> pointer</span><span class="pun">;</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="com">/* 背景アニメーション */</span><span class="pln"> </span><span class="pun">.</span><span class="pln">background</span><span class="pun">-</span><span class="pln">animation </span><span class="pun">{</span><span class="pln"> position</span><span class="pun">:</span><span class="pln"> absolute</span><span class="pun">;</span><span class="pln"> top</span><span class="pun">:</span><span class="pln"> </span><span class="lit">0</span><span class="pun">;</span><span class="pln"> left</span><span class="pun">:</span><span class="pln"> </span><span class="lit">0</span><span class="pun">;</span><span class="pln"> right</span><span class="pun">:</span><span class="pln"> </span><span class="lit">0</span><span class="pun">;</span><span class="pln"> bottom</span><span class="pun">:</span><span class="pln"> </span><span class="lit">0</span><span class="pun">;</span><span class="pln"> background</span><span class="pun">:</span><span class="pln"> radial</span><span class="pun">-</span><span class="pln">gradient</span><span class="pun">(</span><span class="pln">circle</span><span class="pun">,</span><span class="pln"> rgba</span><span class="pun">(</span><span class="lit">255</span><span class="pun">,</span><span class="lit">255</span><span class="pun">,</span><span class="lit">255</span><span class="pun">,</span><span class="lit">0.1</span><span class="pun">),</span><span class="pln"> rgba</span><span class="pun">(</span><span class="lit">0</span><span class="pun">,</span><span class="lit">0</span><span class="pun">,</span><span class="lit">0</span><span class="pun">,</span><span class="lit">0</span><span class="pun">)</span><span class="pln"> </span><span class="lit">70</span><span class="pun">%);</span><span class="pln"> animation</span><span class="pun">:</span><span class="pln"> glow </span><span class="lit">5s</span><span class="pln"> infinite alternate</span><span class="pun">;</span><span class="pln"> pointer</span><span class="pun">-</span><span class="pln">events</span><span class="pun">:</span><span class="pln"> none</span><span class="pun">;</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="lit">@keyframes</span><span class="pln"> glow </span><span class="pun">{</span><span class="pln"> </span><span class="kwd">from</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> opacity</span><span class="pun">:</span><span class="pln"> </span><span class="lit">0.4</span><span class="pun">;</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> to </span><span class="pun">{</span><span class="pln"> opacity</span><span class="pun">:</span><span class="pln"> </span><span class="lit">0.7</span><span class="pun">;</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="tag"></style></span><span class="pln"></span><span class="tag"></head></span><span class="pln"></span><span class="tag"><body></span><span class="pln"></span><span class="tag"><div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"chat-container"</span><span class="tag">></span><span class="pln"> </span><span class="tag"><h2></span><span class="pln">神と対話するAI</span><span class="tag"></h2></span><span class="pln"> </span><span class="tag"><div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"messages"</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"messages"</span><span class="tag">></div></span><span class="pln"> </span><span class="tag"><div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"input-container"</span><span class="tag">></span><span class="pln"> </span><span class="tag"><input</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"text"</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"userInput"</span><span class="pln"> </span><span class="atn">placeholder</span><span class="pun">=</span><span class="atv">"質問を入力してください..."</span><span class="tag">></span><span class="pln"> </span><span class="tag"><button</span><span class="pln"> </span><span class="atn">onclick</span><span class="pun">=</span><span class="atv">"</span><span class="pln">sendMessage</span><span class="pun">()</span><span class="atv">"</span><span class="tag">></span><span class="pln">送信</span><span class="tag"></button></span><span class="pln"> </span><span class="tag"></div></span><span class="pln"> </span><span class="tag"><div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"background-animation"</span><span class="tag">></div></span><span class="pln"></span><span class="tag"></div></span><span class="pln"></span><span class="tag"><script></span><span class="pln"> </span><span class="kwd">const</span><span class="pln"> messagesContainer </span><span class="pun">=</span><span class="pln"> document</span><span class="pun">.</span><span class="pln">getElementById</span><span class="pun">(</span><span class="str">"messages"</span><span class="pun">);</span><span class="pln"> </span><span class="kwd">function</span><span class="pln"> addMessage</span><span class="pun">(</span><span class="pln">content</span><span class="pun">,</span><span class="pln"> className</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><span class="kwd">const</span><span class="pln"> message </span><span class="pun">=</span><span class="pln"> document</span><span class="pun">.</span><span class="pln">createElement</span><span class="pun">(</span><span class="str">"div"</span><span class="pun">);</span><span class="pln"> message</span><span class="pun">.</span><span class="pln">className </span><span class="pun">=</span><span class="pln"> </span><span class="str">"message "</span><span class="pln"> </span><span class="pun">+</span><span class="pln"> className</span><span class="pun">;</span><span class="pln"> message</span><span class="pun">.</span><span class="pln">innerHTML </span><span class="pun">=</span><span class="pln"> content</span><span class="pun">;</span><span class="pln"> messagesContainer</span><span class="pun">.</span><span class="pln">appendChild</span><span class="pun">(</span><span class="pln">message</span><span class="pun">);</span><span class="pln"> messagesContainer</span><span class="pun">.</span><span class="pln">scrollTop </span><span class="pun">=</span><span class="pln"> messagesContainer</span><span class="pun">.</span><span class="pln">scrollHeight</span><span class="pun">;</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="kwd">function</span><span class="pln"> getAIResponse</span><span class="pun">(</span><span class="pln">userMessage</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><span class="kwd">const</span><span class="pln"> responses </span><span class="pun">=</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><span class="str">"目的"</span><span class="pun">:</span><span class="pln"> </span><span class="pun">[</span><span class="pln"> </span><span class="str">"あなたの目的はあなたの選択の中にあります。心を澄まし、その小さな声に耳を傾けなさい。"</span><span class="pun">,</span><span class="pln"> </span><span class="str">"目的は定まっているものではなく、あなたが形作るものです。勇気を持って探し続けなさい。"</span><span class="pln"> </span><span class="pun">],</span><span class="pln"> </span><span class="str">"未来"</span><span class="pun">:</span><span class="pln"> </span><span class="pun">[</span><span class="pln"> </span><span class="str">"未来は揺れ動く霧のようなもの…手の中にありながら捉えられぬもの。だが、あなたの意思がその霧を晴らすだろう。"</span><span class="pun">,</span><span class="pln"> </span><span class="str">"未来は、あなたの内にある希望が灯し出すもの。信じる道を歩みなさい。"</span><span class="pln"> </span><span class="pun">],</span><span class="pln"> </span><span class="str">"愛"</span><span class="pun">:</span><span class="pln"> </span><span class="pun">[</span><span class="pln"> </span><span class="str">"愛とは、無限に与えること。光のようにあなたを包み、他者を受け入れるものです。"</span><span class="pun">,</span><span class="pln"> </span><span class="str">"愛とは、心の中の静けさと繋がり、他者の存在をただあるがままに受け入れること。"</span><span class="pln"> </span><span class="pun">],</span><span class="pln"> </span><span class="str">"default"</span><span class="pun">:</span><span class="pln"> </span><span class="pun">[</span><span class="pln"> </span><span class="str">"その問いの答えは、あなた自身が見つけ出すもの。内なる声を信じなさい。"</span><span class="pun">,</span><span class="pln"> </span><span class="str">"すべての答えは既にあなたの心の中にあります。耳を澄まし、その声に従いなさい。"</span><span class="pln"> </span><span class="pun">]</span><span class="pln"> </span><span class="pun">};</span><span class="pln"> </span><span class="kwd">const</span><span class="pln"> keywords </span><span class="pun">=</span><span class="pln"> </span><span class="typ">Object</span><span class="pun">.</span><span class="pln">keys</span><span class="pun">(</span><span class="pln">responses</span><span class="pun">);</span><span class="pln"> </span><span class="kwd">for</span><span class="pln"> </span><span class="pun">(</span><span class="kwd">let</span><span class="pln"> keyword </span><span class="kwd">of</span><span class="pln"> keywords</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><span class="kwd">if</span><span class="pln"> </span><span class="pun">(</span><span class="pln">userMessage</span><span class="pun">.</span><span class="pln">includes</span><span class="pun">(</span><span class="pln">keyword</span><span class="pun">))</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><span class="kwd">const</span><span class="pln"> possibleResponses </span><span class="pun">=</span><span class="pln"> responses</span><span class="pun">[</span><span class="pln">keyword</span><span class="pun">];</span><span class="pln"> </span><span class="kwd">return</span><span class="pln"> possibleResponses</span><span class="pun">[</span><span class="typ">Math</span><span class="pun">.</span><span class="pln">floor</span><span class="pun">(</span><span class="typ">Math</span><span class="pun">.</span><span class="pln">random</span><span class="pun">()</span><span class="pln"> </span><span class="pun">*</span><span class="pln"> possibleResponses</span><span class="pun">.</span><span class="pln">length</span><span class="pun">)];</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="kwd">const</span><span class="pln"> defaultResponses </span><span class="pun">=</span><span class="pln"> responses</span><span class="pun">[</span><span class="str">"default"</span><span class="pun">];</span><span class="pln"> </span><span class="kwd">return</span><span class="pln"> defaultResponses</span><span class="pun">[</span><span class="typ">Math</span><span class="pun">.</span><span class="pln">floor</span><span class="pun">(</span><span class="typ">Math</span><span class="pun">.</span><span class="pln">random</span><span class="pun">()</span><span class="pln"> </span><span class="pun">*</span><span class="pln"> defaultResponses</span><span class="pun">.</span><span class="pln">length</span><span class="pun">)];</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="kwd">function</span><span class="pln"> sendMessage</span><span class="pun">()</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><span class="kwd">const</span><span class="pln"> userInput </span><span class="pun">=</span><span class="pln"> document</span><span class="pun">.</span><span class="pln">getElementById</span><span class="pun">(</span><span class="str">"userInput"</span><span class="pun">).</span><span class="pln">value</span><span class="pun">.</span><span class="pln">trim</span><span class="pun">();</span><span class="pln"> </span><span class="kwd">if</span><span class="pln"> </span><span class="pun">(</span><span class="pln">userInput </span><span class="pun">===</span><span class="pln"> </span><span class="str">""</span><span class="pun">)</span><span class="pln"> </span><span class="kwd">return</span><span class="pun">;</span><span class="pln"> addMessage</span><span class="pun">(</span><span class="pln">userInput</span><span class="pun">,</span><span class="pln"> </span><span class="str">"user-message"</span><span class="pun">);</span><span class="pln"> document</span><span class="pun">.</span><span class="pln">getElementById</span><span class="pun">(</span><span class="str">"userInput"</span><span class="pun">).</span><span class="pln">value </span><span class="pun">=</span><span class="pln"> </span><span class="str">""</span><span class="pun">;</span><span class="pln"> </span><span class="kwd">const</span><span class="pln"> aiResponse </span><span class="pun">=</span><span class="pln"> getAIResponse</span><span class="pun">(</span><span class="pln">userInput</span><span class="pun">);</span><span class="pln"> </span><span class="com">// タイピングエフェクトを表示</span><span class="pln"> setTimeout</span><span class="pun">(()</span><span class="pln"> </span><span class="pun">=></span><span class="pln"> </span><span class="pun">{</span><span class="pln"> addMessage</span><span class="pun">(`<</span><span class="pln">span </span><span class="kwd">class</span><span class="pun">=</span><span class="str">"typing-indicator"</span><span class="pun">>...</</span><span class="pln">span</span><span class="pun">>`,</span><span class="pln"> </span><span class="str">"ai-message"</span><span class="pun">);</span><span class="pln"> setTimeout</span><span class="pun">(()</span><span class="pln"> </span><span class="pun">=></span><span class="pln"> </span><span class="pun">{</span><span class="pln"> messagesContainer</span><span class="pun">.</span><span class="pln">lastChild</span><span class="pun">.</span><span class="pln">remove</span><span class="pun">();</span><span class="pln"> addMessage</span><span class="pun">(</span><span class="pln">aiResponse</span><span class="pun">,</span><span class="pln"> </span><span class="str">"ai-message"</span><span class="pun">);</span><span class="pln"> </span><span class="pun">},</span><span class="pln"> </span><span class="lit">2000</span><span class="pun">);</span><span class="pln"> </span><span class="com">// タイピングエフェクト表示後の応答</span><span class="pln"> </span><span class="pun">},</span><span class="pln"> </span><span class="lit">800</span><span class="pun">);</span><span class="pln"> </span><span class="com">// 遅延で自然な応答</span><span class="pln"> </span><span class="pun">}</span><span class="pln"></span><span class="tag"></script></span><span class="pln"></span><span class="tag"></body></span><span class="pln"></span><span class="tag"></html></span><span class="pln"></span> |
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>神と対話するAI</title>
<style>
/* 神秘的な背景とエフェクト */
body {
font-family: 'Georgia', serif;
background-color: #1a1a2e;
color: #d1d1e9;
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
margin: 0;
overflow: hidden;
}
.chat-container {
width: 100%;
max-width: 600px;
background-color: rgba(43, 43, 63, 0.9);
border-radius: 10px;
box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.6);
padding: 20px;
position: relative;
overflow: hidden;
}
.messages {
height: 300px;
overflow-y: auto;
margin-bottom: 10px;
padding-right: 10px;
}
.message {
margin: 10px 0;
line-height: 1.5;
}
.user-message {
text-align: right;
color: #00aaff;
}
.ai-message {
text-align: left;
color: #e6e6fa;
font-style: italic;
}
.typing-indicator {
font-size: 1.5em;
color: #e6e6fa;
}
.input-container {
display: flex;
}
input[type="text"] {
flex: 1;
padding: 10px;
border-radius: 5px;
border: 1px solid #555;
background-color: #444;
color: #e6e6fa;
margin-right: 10px;
}
button {
padding: 10px 20px;
border: none;
border-radius: 5px;
background-color: #5a5adb;
color: white;
cursor: pointer;
}
/* 背景アニメーション */
.background-animation {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: radial-gradient(circle, rgba(255,255,255,0.1), rgba(0,0,0,0) 70%);
animation: glow 5s infinite alternate;
pointer-events: none;
}
@keyframes glow {
from {
opacity: 0.4;
}
to {
opacity: 0.7;
}
}
</style>
</head>
<body>
<div class="chat-container">
<h2>神と対話するAI</h2>
<div class="messages" id="messages"></div>
<div class="input-container">
<input type="text" id="userInput" placeholder="質問を入力してください...">
<button onclick="sendMessage()">送信</button>
</div>
<div class="background-animation"></div>
</div>
<script>
const messagesContainer = document.getElementById("messages");
function addMessage(content, className) {
const message = document.createElement("div");
message.className = "message " + className;
message.innerHTML = content;
messagesContainer.appendChild(message);
messagesContainer.scrollTop = messagesContainer.scrollHeight;
}
function getAIResponse(userMessage) {
const responses = {
"目的": [
"あなたの目的はあなたの選択の中にあります。心を澄まし、その小さな声に耳を傾けなさい。",
"目的は定まっているものではなく、あなたが形作るものです。勇気を持って探し続けなさい。"
],
"未来": [
"未来は揺れ動く霧のようなもの…手の中にありながら捉えられぬもの。だが、あなたの意思がその霧を晴らすだろう。",
"未来は、あなたの内にある希望が灯し出すもの。信じる道を歩みなさい。"
],
"愛": [
"愛とは、無限に与えること。光のようにあなたを包み、他者を受け入れるものです。",
"愛とは、心の中の静けさと繋がり、他者の存在をただあるがままに受け入れること。"
],
"default": [
"その問いの答えは、あなた自身が見つけ出すもの。内なる声を信じなさい。",
"すべての答えは既にあなたの心の中にあります。耳を澄まし、その声に従いなさい。"
]
};
const keywords = Object.keys(responses);
for (let keyword of keywords) {
if (userMessage.includes(keyword)) {
const possibleResponses = responses[keyword];
return possibleResponses[Math.floor(Math.random() * possibleResponses.length)];
}
}
const defaultResponses = responses["default"];
return defaultResponses[Math.floor(Math.random() * defaultResponses.length)];
}
function sendMessage() {
const userInput = document.getElementById("userInput").value.trim();
if (userInput === "") return;
addMessage(userInput, "user-message");
document.getElementById("userInput").value = "";
const aiResponse = getAIResponse(userInput);
// タイピングエフェクトを表示
setTimeout(() => {
addMessage(`<span class="typing-indicator">...</span>`, "ai-message");
setTimeout(() => {
messagesContainer.lastChild.remove();
addMessage(aiResponse, "ai-message");
}, 2000); // タイピングエフェクト表示後の応答
}, 800); // 遅延で自然な応答
}
</script>
</body>
</html>タスク管理.html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 | <span class="dec"><!DOCTYPE html></span><span class="pln"></span><span class="tag"><html</span><span class="pln"> </span><span class="atn">lang</span><span class="pun">=</span><span class="atv">"ja"</span><span class="tag">></span><span class="pln"></span><span class="tag"><head></span><span class="pln"> </span><span class="tag"><meta</span><span class="pln"> </span><span class="atn">charset</span><span class="pun">=</span><span class="atv">"UTF-8"</span><span class="tag">></span><span class="pln"> </span><span class="tag"><meta</span><span class="pln"> </span><span class="atn">name</span><span class="pun">=</span><span class="atv">"viewport"</span><span class="pln"> </span><span class="atn">content</span><span class="pun">=</span><span class="atv">"width=device-width, initial-scale=1.0"</span><span class="tag">></span><span class="pln"> </span><span class="tag"><title></span><span class="pln">AIベースのタスク管理アプリ</span><span class="tag"></title></span><span class="pln"> </span><span class="tag"><style></span><span class="pln"> body </span><span class="pun">{</span><span class="pln"> font</span><span class="pun">-</span><span class="pln">family</span><span class="pun">:</span><span class="pln"> </span><span class="typ">Arial</span><span class="pun">,</span><span class="pln"> sans</span><span class="pun">-</span><span class="pln">serif</span><span class="pun">;</span><span class="pln"> background</span><span class="pun">-</span><span class="pln">color</span><span class="pun">:</span><span class="pln"> </span><span class="com">#f4f4f9;</span><span class="pln"> margin</span><span class="pun">:</span><span class="pln"> </span><span class="lit">0</span><span class="pun">;</span><span class="pln"> padding</span><span class="pun">:</span><span class="pln"> </span><span class="lit">0</span><span class="pun">;</span><span class="pln"> display</span><span class="pun">:</span><span class="pln"> flex</span><span class="pun">;</span><span class="pln"> flex</span><span class="pun">-</span><span class="pln">direction</span><span class="pun">:</span><span class="pln"> column</span><span class="pun">;</span><span class="pln"> align</span><span class="pun">-</span><span class="pln">items</span><span class="pun">:</span><span class="pln"> center</span><span class="pun">;</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> h1 </span><span class="pun">{</span><span class="pln"> color</span><span class="pun">:</span><span class="pln"> </span><span class="com">#333;</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="pun">.</span><span class="pln">task</span><span class="pun">-</span><span class="pln">container </span><span class="pun">{</span><span class="pln"> width</span><span class="pun">:</span><span class="pln"> </span><span class="lit">90</span><span class="pun">%;</span><span class="pln"> max</span><span class="pun">-</span><span class="pln">width</span><span class="pun">:</span><span class="pln"> </span><span class="lit">1200px</span><span class="pun">;</span><span class="pln"> padding</span><span class="pun">:</span><span class="pln"> </span><span class="lit">20px</span><span class="pun">;</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="pun">.</span><span class="pln">task</span><span class="pun">-</span><span class="pln">form </span><span class="pun">{</span><span class="pln"> display</span><span class="pun">:</span><span class="pln"> flex</span><span class="pun">;</span><span class="pln"> flex</span><span class="pun">-</span><span class="pln">direction</span><span class="pun">:</span><span class="pln"> column</span><span class="pun">;</span><span class="pln"> margin</span><span class="pun">-</span><span class="pln">bottom</span><span class="pun">:</span><span class="pln"> </span><span class="lit">20px</span><span class="pun">;</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="pun">.</span><span class="pln">task</span><span class="pun">-</span><span class="pln">form input</span><span class="pun">,</span><span class="pln"> </span><span class="pun">.</span><span class="pln">task</span><span class="pun">-</span><span class="pln">form textarea </span><span class="pun">{</span><span class="pln"> margin</span><span class="pun">-</span><span class="pln">bottom</span><span class="pun">:</span><span class="pln"> </span><span class="lit">10px</span><span class="pun">;</span><span class="pln"> padding</span><span class="pun">:</span><span class="pln"> </span><span class="lit">10px</span><span class="pun">;</span><span class="pln"> font</span><span class="pun">-</span><span class="pln">size</span><span class="pun">:</span><span class="pln"> </span><span class="lit">16px</span><span class="pun">;</span><span class="pln"> border</span><span class="pun">:</span><span class="pln"> </span><span class="lit">1px</span><span class="pln"> solid </span><span class="com">#ccc;</span><span class="pln"> border</span><span class="pun">-</span><span class="pln">radius</span><span class="pun">:</span><span class="pln"> </span><span class="lit">5px</span><span class="pun">;</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="pun">.</span><span class="pln">task</span><span class="pun">-</span><span class="pln">form button </span><span class="pun">{</span><span class="pln"> padding</span><span class="pun">:</span><span class="pln"> </span><span class="lit">10px</span><span class="pun">;</span><span class="pln"> background</span><span class="pun">-</span><span class="pln">color</span><span class="pun">:</span><span class="pln"> </span><span class="com">#28a745;</span><span class="pln"> color</span><span class="pun">:</span><span class="pln"> </span><span class="com">#fff;</span><span class="pln"> border</span><span class="pun">:</span><span class="pln"> none</span><span class="pun">;</span><span class="pln"> border</span><span class="pun">-</span><span class="pln">radius</span><span class="pun">:</span><span class="pln"> </span><span class="lit">5px</span><span class="pun">;</span><span class="pln"> cursor</span><span class="pun">:</span><span class="pln"> pointer</span><span class="pun">;</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="pun">.</span><span class="pln">task</span><span class="pun">-</span><span class="pln">form button</span><span class="pun">:</span><span class="pln">hover </span><span class="pun">{</span><span class="pln"> background</span><span class="pun">-</span><span class="pln">color</span><span class="pun">:</span><span class="pln"> </span><span class="com">#218838;</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="pun">.</span><span class="pln">kanban</span><span class="pun">-</span><span class="pln">board </span><span class="pun">{</span><span class="pln"> display</span><span class="pun">:</span><span class="pln"> flex</span><span class="pun">;</span><span class="pln"> justify</span><span class="pun">-</span><span class="pln">content</span><span class="pun">:</span><span class="pln"> space</span><span class="pun">-</span><span class="pln">around</span><span class="pun">;</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="pun">.</span><span class="pln">kanban</span><span class="pun">-</span><span class="pln">column </span><span class="pun">{</span><span class="pln"> background</span><span class="pun">-</span><span class="pln">color</span><span class="pun">:</span><span class="pln"> </span><span class="com">#f8f9fa;</span><span class="pln"> padding</span><span class="pun">:</span><span class="pln"> </span><span class="lit">20px</span><span class="pun">;</span><span class="pln"> width</span><span class="pun">:</span><span class="pln"> </span><span class="lit">30</span><span class="pun">%;</span><span class="pln"> border</span><span class="pun">-</span><span class="pln">radius</span><span class="pun">:</span><span class="pln"> </span><span class="lit">10px</span><span class="pun">;</span><span class="pln"> min</span><span class="pun">-</span><span class="pln">height</span><span class="pun">:</span><span class="pln"> </span><span class="lit">300px</span><span class="pun">;</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="pun">.</span><span class="pln">kanban</span><span class="pun">-</span><span class="pln">column h2 </span><span class="pun">{</span><span class="pln"> text</span><span class="pun">-</span><span class="pln">align</span><span class="pun">:</span><span class="pln"> center</span><span class="pun">;</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="pun">.</span><span class="pln">task</span><span class="pun">-</span><span class="pln">list </span><span class="pun">{</span><span class="pln"> margin</span><span class="pun">-</span><span class="pln">top</span><span class="pun">:</span><span class="pln"> </span><span class="lit">10px</span><span class="pun">;</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="pun">.</span><span class="pln">task</span><span class="pun">-</span><span class="pln">item </span><span class="pun">{</span><span class="pln"> display</span><span class="pun">:</span><span class="pln"> flex</span><span class="pun">;</span><span class="pln"> justify</span><span class="pun">-</span><span class="pln">content</span><span class="pun">:</span><span class="pln"> space</span><span class="pun">-</span><span class="pln">between</span><span class="pun">;</span><span class="pln"> background</span><span class="pun">-</span><span class="pln">color</span><span class="pun">:</span><span class="pln"> </span><span class="com">#e9ecef;</span><span class="pln"> margin</span><span class="pun">-</span><span class="pln">bottom</span><span class="pun">:</span><span class="pln"> </span><span class="lit">10px</span><span class="pun">;</span><span class="pln"> padding</span><span class="pun">:</span><span class="pln"> </span><span class="lit">10px</span><span class="pun">;</span><span class="pln"> border</span><span class="pun">-</span><span class="pln">radius</span><span class="pun">:</span><span class="pln"> </span><span class="lit">5px</span><span class="pun">;</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="pun">.</span><span class="pln">task</span><span class="pun">-</span><span class="pln">item</span><span class="pun">.</span><span class="pln">high </span><span class="pun">{</span><span class="pln"> background</span><span class="pun">-</span><span class="pln">color</span><span class="pun">:</span><span class="pln"> </span><span class="com">#ffcccc;</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="pun">.</span><span class="pln">task</span><span class="pun">-</span><span class="pln">item</span><span class="pun">.</span><span class="pln">medium </span><span class="pun">{</span><span class="pln"> background</span><span class="pun">-</span><span class="pln">color</span><span class="pun">:</span><span class="pln"> </span><span class="com">#fff3cd;</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="pun">.</span><span class="pln">task</span><span class="pun">-</span><span class="pln">item</span><span class="pun">.</span><span class="pln">low </span><span class="pun">{</span><span class="pln"> background</span><span class="pun">-</span><span class="pln">color</span><span class="pun">:</span><span class="pln"> </span><span class="com">#d4edda;</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="pun">.</span><span class="pln">task</span><span class="pun">-</span><span class="pln">item button </span><span class="pun">{</span><span class="pln"> background</span><span class="pun">-</span><span class="pln">color</span><span class="pun">:</span><span class="pln"> </span><span class="com">#dc3545;</span><span class="pln"> color</span><span class="pun">:</span><span class="pln"> </span><span class="com">#fff;</span><span class="pln"> border</span><span class="pun">:</span><span class="pln"> none</span><span class="pun">;</span><span class="pln"> border</span><span class="pun">-</span><span class="pln">radius</span><span class="pun">:</span><span class="pln"> </span><span class="lit">5px</span><span class="pun">;</span><span class="pln"> cursor</span><span class="pun">:</span><span class="pln"> pointer</span><span class="pun">;</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="pun">.</span><span class="pln">task</span><span class="pun">-</span><span class="pln">item button</span><span class="pun">:</span><span class="pln">hover </span><span class="pun">{</span><span class="pln"> background</span><span class="pun">-</span><span class="pln">color</span><span class="pun">:</span><span class="pln"> </span><span class="com">#c82333;</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="tag"></style></span><span class="pln"></span><span class="tag"></head></span><span class="pln"></span><span class="tag"><body></span><span class="pln"> </span><span class="tag"><h1></span><span class="pln">タスク管理</span><span class="tag"></h1></span><span class="pln"> </span><span class="tag"><div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"task-container"</span><span class="tag">></span><span class="pln"> </span><span class="tag"><form</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"task-form"</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"taskForm"</span><span class="tag">></span><span class="pln"> </span><span class="tag"><input</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"text"</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"taskTitle"</span><span class="pln"> </span><span class="atn">placeholder</span><span class="pun">=</span><span class="atv">"タスクタイトル"</span><span class="pln"> </span><span class="atn">required</span><span class="tag">></span><span class="pln"> </span><span class="tag"><textarea</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"taskDescription"</span><span class="pln"> </span><span class="atn">placeholder</span><span class="pun">=</span><span class="atv">"タスク詳細"</span><span class="pln"> </span><span class="atn">rows</span><span class="pun">=</span><span class="atv">"4"</span><span class="tag">></textarea></span><span class="pln"> </span><span class="tag"><input</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"date"</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"taskDueDate"</span><span class="pln"> </span><span class="atn">required</span><span class="tag">></span><span class="pln"> </span><span class="tag"><button</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"submit"</span><span class="tag">></span><span class="pln">タスクを追加</span><span class="tag"></button></span><span class="pln"> </span><span class="tag"></form></span><span class="pln"> </span><span class="tag"><div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"kanban-board"</span><span class="tag">></span><span class="pln"> </span><span class="tag"><div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"kanban-column"</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"notStarted"</span><span class="tag">></span><span class="pln"> </span><span class="tag"><h2></span><span class="pln">未着手</span><span class="tag"></h2></span><span class="pln"> </span><span class="tag"><div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"task-list"</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"notStartedList"</span><span class="tag">></div></span><span class="pln"> </span><span class="tag"></div></span><span class="pln"> </span><span class="tag"><div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"kanban-column"</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"inProgress"</span><span class="tag">></span><span class="pln"> </span><span class="tag"><h2></span><span class="pln">進行中</span><span class="tag"></h2></span><span class="pln"> </span><span class="tag"><div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"task-list"</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"inProgressList"</span><span class="tag">></div></span><span class="pln"> </span><span class="tag"></div></span><span class="pln"> </span><span class="tag"><div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"kanban-column"</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"completed"</span><span class="tag">></span><span class="pln"> </span><span class="tag"><h2></span><span class="pln">完了</span><span class="tag"></h2></span><span class="pln"> </span><span class="tag"><div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"task-list"</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"completedList"</span><span class="tag">></div></span><span class="pln"> </span><span class="tag"></div></span><span class="pln"> </span><span class="tag"></div></span><span class="pln"> </span><span class="tag"></div></span><span class="pln"> </span><span class="tag"><script></span><span class="pln"> </span><span class="kwd">let</span><span class="pln"> tasks </span><span class="pun">=</span><span class="pln"> JSON</span><span class="pun">.</span><span class="pln">parse</span><span class="pun">(</span><span class="pln">localStorage</span><span class="pun">.</span><span class="pln">getItem</span><span class="pun">(</span><span class="str">'tasks'</span><span class="pun">))</span><span class="pln"> </span><span class="pun">||</span><span class="pln"> </span><span class="pun">[];</span><span class="pln"> </span><span class="com">// 優先度予測（ルールベース）</span><span class="pln"> </span><span class="kwd">function</span><span class="pln"> predictPriority</span><span class="pun">(</span><span class="pln">taskDueDate</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><span class="kwd">const</span><span class="pln"> daysLeft </span><span class="pun">=</span><span class="pln"> </span><span class="pun">(</span><span class="kwd">new</span><span class="pln"> </span><span class="typ">Date</span><span class="pun">(</span><span class="pln">taskDueDate</span><span class="pun">)</span><span class="pln"> </span><span class="pun">-</span><span class="pln"> </span><span class="kwd">new</span><span class="pln"> </span><span class="typ">Date</span><span class="pun">())</span><span class="pln"> </span><span class="pun">/</span><span class="pln"> </span><span class="pun">(</span><span class="lit">1000</span><span class="pln"> </span><span class="pun">*</span><span class="pln"> </span><span class="lit">60</span><span class="pln"> </span><span class="pun">*</span><span class="pln"> </span><span class="lit">60</span><span class="pln"> </span><span class="pun">*</span><span class="pln"> </span><span class="lit">24</span><span class="pun">);</span><span class="pln"> </span><span class="kwd">if</span><span class="pln"> </span><span class="pun">(</span><span class="pln">daysLeft </span><span class="pun"><</span><span class="pln"> </span><span class="lit">2</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><span class="kwd">return</span><span class="pln"> </span><span class="str">'High'</span><span class="pun">;</span><span class="pln"> </span><span class="com">// 緊急度が高い</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="kwd">else</span><span class="pln"> </span><span class="kwd">if</span><span class="pln"> </span><span class="pun">(</span><span class="pln">daysLeft </span><span class="pun"><</span><span class="pln"> </span><span class="lit">7</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><span class="kwd">return</span><span class="pln"> </span><span class="str">'Medium'</span><span class="pun">;</span><span class="pln"> </span><span class="com">// 1週間以内</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="kwd">else</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><span class="kwd">return</span><span class="pln"> </span><span class="str">'Low'</span><span class="pun">;</span><span class="pln"> </span><span class="com">// 余裕がある</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="com">// タスクをローカルストレージに保存</span><span class="pln"> </span><span class="kwd">function</span><span class="pln"> saveTasks</span><span class="pun">()</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> localStorage</span><span class="pun">.</span><span class="pln">setItem</span><span class="pun">(</span><span class="str">'tasks'</span><span class="pun">,</span><span class="pln"> JSON</span><span class="pun">.</span><span class="pln">stringify</span><span class="pun">(</span><span class="pln">tasks</span><span class="pun">));</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="com">// タスク表示</span><span class="pln"> </span><span class="kwd">function</span><span class="pln"> loadTasks</span><span class="pun">()</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><span class="kwd">const</span><span class="pln"> notStartedList </span><span class="pun">=</span><span class="pln"> document</span><span class="pun">.</span><span class="pln">getElementById</span><span class="pun">(</span><span class="str">'notStartedList'</span><span class="pun">);</span><span class="pln"> </span><span class="kwd">const</span><span class="pln"> inProgressList </span><span class="pun">=</span><span class="pln"> document</span><span class="pun">.</span><span class="pln">getElementById</span><span class="pun">(</span><span class="str">'inProgressList'</span><span class="pun">);</span><span class="pln"> </span><span class="kwd">const</span><span class="pln"> completedList </span><span class="pun">=</span><span class="pln"> document</span><span class="pun">.</span><span class="pln">getElementById</span><span class="pun">(</span><span class="str">'completedList'</span><span class="pun">);</span><span class="pln"> notStartedList</span><span class="pun">.</span><span class="pln">innerHTML </span><span class="pun">=</span><span class="pln"> </span><span class="str">''</span><span class="pun">;</span><span class="pln"> inProgressList</span><span class="pun">.</span><span class="pln">innerHTML </span><span class="pun">=</span><span class="pln"> </span><span class="str">''</span><span class="pun">;</span><span class="pln"> completedList</span><span class="pun">.</span><span class="pln">innerHTML </span><span class="pun">=</span><span class="pln"> </span><span class="str">''</span><span class="pun">;</span><span class="pln"> tasks</span><span class="pun">.</span><span class="pln">forEach</span><span class="pun">(</span><span class="pln">task </span><span class="pun">=></span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><span class="kwd">const</span><span class="pln"> taskItem </span><span class="pun">=</span><span class="pln"> document</span><span class="pun">.</span><span class="pln">createElement</span><span class="pun">(</span><span class="str">'div'</span><span class="pun">);</span><span class="pln"> taskItem</span><span class="pun">.</span><span class="pln">classList</span><span class="pun">.</span><span class="pln">add</span><span class="pun">(</span><span class="str">'task-item'</span><span class="pun">,</span><span class="pln"> task</span><span class="pun">.</span><span class="pln">priority</span><span class="pun">.</span><span class="pln">toLowerCase</span><span class="pun">());</span><span class="pln"> taskItem</span><span class="pun">.</span><span class="pln">setAttribute</span><span class="pun">(</span><span class="str">'draggable'</span><span class="pun">,</span><span class="pln"> </span><span class="kwd">true</span><span class="pun">);</span><span class="pln"> taskItem</span><span class="pun">.</span><span class="pln">innerHTML </span><span class="pun">=</span><span class="pln"> </span><span class="pun">`</span><span class="pln"> </span><span class="pun"><</span><span class="pln">div</span><span class="pun">></span><span class="pln"> </span><span class="pun"><</span><span class="pln">strong</span><span class="pun">></span><span class="pln">$</span><span class="pun">{</span><span class="pln">task</span><span class="pun">.</span><span class="pln">title</span><span class="pun">}</</span><span class="pln">strong</span><span class="pun">></span><span class="pln"> </span><span class="pun"><</span><span class="pln">p</span><span class="pun">></span><span class="pln">$</span><span class="pun">{</span><span class="pln">task</span><span class="pun">.</span><span class="pln">description</span><span class="pun">}</</span><span class="pln">p</span><span class="pun">></span><span class="pln"> </span><span class="pun"><</span><span class="pln">small</span><span class="pun">>期限:</span><span class="pln"> $</span><span class="pun">{</span><span class="kwd">new</span><span class="pln"> </span><span class="typ">Date</span><span class="pun">(</span><span class="pln">task</span><span class="pun">.</span><span class="pln">dueDate</span><span class="pun">).</span><span class="pln">toLocaleDateString</span><span class="pun">()}</</span><span class="pln">small</span><span class="pun">></span><span class="pln"> </span><span class="pun"><</span><span class="pln">p</span><span class="pun">>優先度:</span><span class="pln"> $</span><span class="pun">{</span><span class="pln">task</span><span class="pun">.</span><span class="pln">priority</span><span class="pun">}</</span><span class="pln">p</span><span class="pun">></span><span class="pln"> </span><span class="pun"></</span><span class="pln">div</span><span class="pun">></span><span class="pln"> </span><span class="pun"><</span><span class="pln">button onclick</span><span class="pun">=</span><span class="str">"deleteTask('${task.id}')"</span><span class="pun">>削除</</span><span class="pln">button</span><span class="pun">></span><span class="pln"> </span><span class="pun">`;</span><span class="pln"> taskItem</span><span class="pun">.</span><span class="pln">addEventListener</span><span class="pun">(</span><span class="str">'dragstart'</span><span class="pun">,</span><span class="pln"> </span><span class="pun">(</span><span class="pln">e</span><span class="pun">)</span><span class="pln"> </span><span class="pun">=></span><span class="pln"> </span><span class="pun">{</span><span class="pln"> e</span><span class="pun">.</span><span class="pln">dataTransfer</span><span class="pun">.</span><span class="pln">setData</span><span class="pun">(</span><span class="str">'text/plain'</span><span class="pun">,</span><span class="pln"> task</span><span class="pun">.</span><span class="pln">id</span><span class="pun">);</span><span class="pln"> </span><span class="pun">});</span><span class="pln"> </span><span class="kwd">if</span><span class="pln"> </span><span class="pun">(</span><span class="pln">task</span><span class="pun">.</span><span class="pln">status </span><span class="pun">===</span><span class="pln"> </span><span class="str">'notStarted'</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> notStartedList</span><span class="pun">.</span><span class="pln">appendChild</span><span class="pun">(</span><span class="pln">taskItem</span><span class="pun">);</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="kwd">else</span><span class="pln"> </span><span class="kwd">if</span><span class="pln"> </span><span class="pun">(</span><span class="pln">task</span><span class="pun">.</span><span class="pln">status </span><span class="pun">===</span><span class="pln"> </span><span class="str">'inProgress'</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> inProgressList</span><span class="pun">.</span><span class="pln">appendChild</span><span class="pun">(</span><span class="pln">taskItem</span><span class="pun">);</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="kwd">else</span><span class="pln"> </span><span class="kwd">if</span><span class="pln"> </span><span class="pun">(</span><span class="pln">task</span><span class="pun">.</span><span class="pln">status </span><span class="pun">===</span><span class="pln"> </span><span class="str">'completed'</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> completedList</span><span class="pun">.</span><span class="pln">appendChild</span><span class="pun">(</span><span class="pln">taskItem</span><span class="pun">);</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="pun">});</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="com">// タスク追加</span><span class="pln"> document</span><span class="pun">.</span><span class="pln">getElementById</span><span class="pun">(</span><span class="str">'taskForm'</span><span class="pun">).</span><span class="pln">addEventListener</span><span class="pun">(</span><span class="str">'submit'</span><span class="pun">,</span><span class="pln"> </span><span class="pun">(</span><span class="pln">e</span><span class="pun">)</span><span class="pln"> </span><span class="pun">=></span><span class="pln"> </span><span class="pun">{</span><span class="pln"> e</span><span class="pun">.</span><span class="pln">preventDefault</span><span class="pun">();</span><span class="pln"> </span><span class="kwd">const</span><span class="pln"> title </span><span class="pun">=</span><span class="pln"> document</span><span class="pun">.</span><span class="pln">getElementById</span><span class="pun">(</span><span class="str">'taskTitle'</span><span class="pun">).</span><span class="pln">value</span><span class="pun">;</span><span class="pln"> </span><span class="kwd">const</span><span class="pln"> description </span><span class="pun">=</span><span class="pln"> document</span><span class="pun">.</span><span class="pln">getElementById</span><span class="pun">(</span><span class="str">'taskDescription'</span><span class="pun">).</span><span class="pln">value</span><span class="pun">;</span><span class="pln"> </span><span class="kwd">const</span><span class="pln"> dueDate </span><span class="pun">=</span><span class="pln"> document</span><span class="pun">.</span><span class="pln">getElementById</span><span class="pun">(</span><span class="str">'taskDueDate'</span><span class="pun">).</span><span class="pln">value</span><span class="pun">;</span><span class="pln"> </span><span class="kwd">const</span><span class="pln"> priority </span><span class="pun">=</span><span class="pln"> predictPriority</span><span class="pun">(</span><span class="pln">dueDate</span><span class="pun">);</span><span class="pln"> </span><span class="kwd">const</span><span class="pln"> newTask </span><span class="pun">=</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> id</span><span class="pun">:</span><span class="pln"> </span><span class="typ">Date</span><span class="pun">.</span><span class="pln">now</span><span class="pun">().</span><span class="pln">toString</span><span class="pun">(),</span><span class="pln"> title</span><span class="pun">,</span><span class="pln"> description</span><span class="pun">,</span><span class="pln"> dueDate</span><span class="pun">,</span><span class="pln"> priority</span><span class="pun">,</span><span class="pln"> status</span><span class="pun">:</span><span class="pln"> </span><span class="str">'notStarted'</span><span class="pln"> </span><span class="com">// 初期状態は未着手</span><span class="pln"> </span><span class="pun">};</span><span class="pln"> tasks</span><span class="pun">.</span><span class="pln">push</span><span class="pun">(</span><span class="pln">newTask</span><span class="pun">);</span><span class="pln"> saveTasks</span><span class="pun">();</span><span class="pln"> document</span><span class="pun">.</span><span class="pln">getElementById</span><span class="pun">(</span><span class="str">'taskForm'</span><span class="pun">).</span><span class="pln">reset</span><span class="pun">();</span><span class="pln"> loadTasks</span><span class="pun">();</span><span class="pln"> </span><span class="pun">});</span><span class="pln"> </span><span class="com">// タスク削除</span><span class="pln"> </span><span class="kwd">function</span><span class="pln"> deleteTask</span><span class="pun">(</span><span class="pln">taskId</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> tasks </span><span class="pun">=</span><span class="pln"> tasks</span><span class="pun">.</span><span class="pln">filter</span><span class="pun">(</span><span class="pln">task </span><span class="pun">=></span><span class="pln"> task</span><span class="pun">.</span><span class="pln">id </span><span class="pun">!==</span><span class="pln"> taskId</span><span class="pun">);</span><span class="pln"> saveTasks</span><span class="pun">();</span><span class="pln"> loadTasks</span><span class="pun">();</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="com">// ドラッグ&ドロップの設定</span><span class="pln"> document</span><span class="pun">.</span><span class="pln">querySelectorAll</span><span class="pun">(</span><span class="str">'.kanban-column'</span><span class="pun">).</span><span class="pln">forEach</span><span class="pun">(</span><span class="pln">column </span><span class="pun">=></span><span class="pln"> </span><span class="pun">{</span><span class="pln"> column</span><span class="pun">.</span><span class="pln">addEventListener</span><span class="pun">(</span><span class="str">'dragover'</span><span class="pun">,</span><span class="pln"> </span><span class="pun">(</span><span class="pln">e</span><span class="pun">)</span><span class="pln"> </span><span class="pun">=></span><span class="pln"> </span><span class="pun">{</span><span class="pln"> e</span><span class="pun">.</span><span class="pln">preventDefault</span><span class="pun">();</span><span class="pln"> </span><span class="pun">});</span><span class="pln"> column</span><span class="pun">.</span><span class="pln">addEventListener</span><span class="pun">(</span><span class="str">'drop'</span><span class="pun">,</span><span class="pln"> </span><span class="pun">(</span><span class="pln">e</span><span class="pun">)</span><span class="pln"> </span><span class="pun">=></span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><span class="kwd">const</span><span class="pln"> taskId </span><span class="pun">=</span><span class="pln"> e</span><span class="pun">.</span><span class="pln">dataTransfer</span><span class="pun">.</span><span class="pln">getData</span><span class="pun">(</span><span class="str">'text/plain'</span><span class="pun">);</span><span class="pln"> </span><span class="kwd">const</span><span class="pln"> newStatus </span><span class="pun">=</span><span class="pln"> column</span><span class="pun">.</span><span class="pln">id</span><span class="pun">;</span><span class="pln"> </span><span class="kwd">const</span><span class="pln"> task </span><span class="pun">=</span><span class="pln"> tasks</span><span class="pun">.</span><span class="pln">find</span><span class="pun">(</span><span class="pln">task </span><span class="pun">=></span><span class="pln"> task</span><span class="pun">.</span><span class="pln">id </span><span class="pun">===</span><span class="pln"> taskId</span><span class="pun">);</span><span class="pln"> task</span><span class="pun">.</span><span class="pln">status </span><span class="pun">=</span><span class="pln"> newStatus</span><span class="pun">;</span><span class="pln"> saveTasks</span><span class="pun">();</span><span class="pln"> loadTasks</span><span class="pun">();</span><span class="pln"> </span><span class="pun">});</span><span class="pln"> </span><span class="pun">});</span><span class="pln"> </span><span class="com">// ページ読み込み時にタスクを表示</span><span class="pln"> loadTasks</span><span class="pun">();</span><span class="pln"> </span><span class="tag"></script></span><span class="pln"></span><span class="tag"></body></span><span class="pln"></span><span class="tag"></html></span><span class="pln"></span> |
ドメイン取得サイト.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Domain Acquisition</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.container {
background-color: #fff;
padding: 20px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
border-radius: 8px;
text-align: center;
width: 100%;
max-width: 600px;
}
h1 {
margin-bottom: 20px;
}
input[type="text"] {
width: 80%;
padding: 10px;
margin: 10px 0;
border: 1px solid #ccc;
border-radius: 5px;
font-size: 16px;
}
button {
padding: 10px 20px;
border: none;
background-color: #007BFF;
color: white;
font-size: 16px;
border-radius: 5px;
cursor: pointer;
}
button:hover {
background-color: #0056b3;
}
.result {
margin-top: 20px;
}
.loading {
display: none;
margin-top: 20px;
}
.domain-list {
margin-top: 20px;
}
.domain-list ul {
list-style-type: none;
padding: 0;
}
.domain-list li {
background-color: #f9f9f9;
margin: 10px 0;
padding: 10px;
border-radius: 5px;
border: 1px solid #ddd;
text-align: left;
display: flex;
justify-content: space-between;
}
.price {
color: green;
}
.purchase-link {
text-decoration: none;
background-color: #28a745;
color: white;
padding: 5px 10px;
border-radius: 5px;
}
.error {
color: red;
margin-top: 20px;
}
@media (max-width: 600px) {
input[type="text"] {
width: 100%;
}
}
</style>
</head>
<body>
<div class="container">
<h1>Check Domain Availability</h1>
<form id="domain-form">
<input type="text" id="domain-name" placeholder="Enter domain name" required>
<button type="submit">Search</button>
</form>
<div class="loading" id="loading">
<p>Searching...</p>
<img src="https://i.gifer.com/ZZ5H.gif" alt="Loading" width="50">
</div>
<div class="result" id="result"></div>
<div class="error" id="error"></div>
<div class="domain-list" id="domain-list"></div>
</div>
<script>
const form = document.getElementById('domain-form');
const resultDiv = document.getElementById('result');
const loadingDiv = document.getElementById('loading');
const errorDiv = document.getElementById('error');
const domainListDiv = document.getElementById('domain-list');
form.addEventListener('submit', function (event) {
event.preventDefault();
const domainName = document.getElementById('domain-name').value.trim();
// フィールドをリセット
resultDiv.innerHTML = '';
errorDiv.innerHTML = '';
domainListDiv.innerHTML = '';
loadingDiv.style.display = 'block'; // ローディング表示
if (validateDomainName(domainName)) {
// ダミーデータの使用例（実際にはAPIを呼び出します）
setTimeout(() => {
loadingDiv.style.display = 'none'; // ローディング終了
// 検索結果の仮表示
const available = Math.random() > 0.5; // ランダムに結果を生成
if (available) {
resultDiv.innerHTML = `<strong>${domainName}</strong> is available!`;
// 他のTLDを提案し、価格と購入リンクを表示
const suggestions = [
{ tld: '.com', price: '$10.99', link: 'https://buydomain.com/com' },
{ tld: '.net', price: '$9.99', link: 'https://buydomain.com/net' },
{ tld: '.org', price: '$11.99', link: 'https://buydomain.com/org' },
{ tld: '.info', price: '$8.99', link: 'https://buydomain.com/info' },
{ tld: '.co', price: '$12.99', link: 'https://buydomain.com/co' }
];
let domainList = '<ul>';
suggestions.forEach(({ tld, price, link }) => {
domainList += `<li>${domainName}${tld} <span class="price">${price}</span> <a href="${link}" target="_blank" class="purchase-link">Buy</a></li>`;
});
domainList += '</ul>';
domainListDiv.innerHTML = domainList;
} else {
resultDiv.innerHTML = `<strong>${domainName}</strong> is already taken.`;
}
}, 2000); // 実際のAPIではこのタイミングで結果を取得
} else {
errorDiv.innerHTML = 'Please enter a valid domain name. It should follow the format: example.com';
loadingDiv.style.display = 'none'; // エラー時はローディングを停止
}
});
// ドメイン名のバリデーション関数
function validateDomainName(domain) {
const domainPattern = /^[a-zA-Z0-9-]{1,63}\.[a-zA-Z]{2,}$/;
return domainPattern.test(domain);
}
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Domain Acquisition</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.container {
background-color: #fff;
padding: 20px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
border-radius: 8px;
text-align: center;
width: 100%;
max-width: 600px;
}
h1 {
margin-bottom: 20px;
}
input[type="text"] {
width: 80%;
padding: 10px;
margin: 10px 0;
border: 1px solid #ccc;
border-radius: 5px;
font-size: 16px;
}
button {
padding: 10px 20px;
border: none;
background-color: #007BFF;
color: white;
font-size: 16px;
border-radius: 5px;
cursor: pointer;
}
button:hover {
background-color: #0056b3;
}
.result {
margin-top: 20px;
}
.loading {
display: none;
margin-top: 20px;
}
.domain-list {
margin-top: 20px;
}
.domain-list ul {
list-style-type: none;
padding: 0;
}
.domain-list li {
background-color: #f9f9f9;
margin: 10px 0;
padding: 10px;
border-radius: 5px;
border: 1px solid #ddd;
text-align: left;
display: flex;
justify-content: space-between;
}
.price {
color: green;
}
.purchase-link {
text-decoration: none;
background-color: #28a745;
color: white;
padding: 5px 10px;
border-radius: 5px;
}
.error {
color: red;
margin-top: 20px;
}
@media (max-width: 600px) {
input[type="text"] {
width: 100%;
}
}
</style>
</head>
<body>
<div class="container">
<h1>Check Domain Availability</h1>
<form id="domain-form">
<input type="text" id="domain-name" placeholder="Enter domain name" required>
<button type="submit">Search</button>
</form>
<div class="loading" id="loading">
<p>Searching...</p>
<img src="https://i.gifer.com/ZZ5H.gif" alt="Loading" width="50">
</div>
<div class="result" id="result"></div>
<div class="error" id="error"></div>
<div class="domain-list" id="domain-list"></div>
</div>
<script>
const form = document.getElementById('domain-form');
const resultDiv = document.getElementById('result');
const loadingDiv = document.getElementById('loading');
const errorDiv = document.getElementById('error');
const domainListDiv = document.getElementById('domain-list');
form.addEventListener('submit', function (event) {
event.preventDefault();
const domainName = document.getElementById('domain-name').value.trim();
// フィールドをリセット
resultDiv.innerHTML = '';
errorDiv.innerHTML = '';
domainListDiv.innerHTML = '';
loadingDiv.style.display = 'block'; // ローディング表示
if (validateDomainName(domainName)) {
// ダミーデータの使用例（実際にはAPIを呼び出します）
setTimeout(() => {
loadingDiv.style.display = 'none'; // ローディング終了
// 検索結果の仮表示
const available = Math.random() > 0.5; // ランダムに結果を生成
if (available) {
resultDiv.innerHTML = `<strong>${domainName}</strong> is available!`;
// 他のTLDを提案し、価格と購入リンクを表示
const suggestions = [
{ tld: '.com', price: '$10.99', link: 'https://buydomain.com/com' },
{ tld: '.net', price: '$9.99', link: 'https://buydomain.com/net' },
{ tld: '.org', price: '$11.99', link: 'https://buydomain.com/org' },
{ tld: '.info', price: '$8.99', link: 'https://buydomain.com/info' },
{ tld: '.co', price: '$12.99', link: 'https://buydomain.com/co' }
];
let domainList = '<ul>';
suggestions.forEach(({ tld, price, link }) => {
domainList += `<li>${domainName}${tld} <span class="price">${price}</span> <a href="${link}" target="_blank" class="purchase-link">Buy</a></li>`;
});
domainList += '</ul>';
domainListDiv.innerHTML = domainList;
} else {
resultDiv.innerHTML = `<strong>${domainName}</strong> is already taken.`;
}
}, 2000); // 実際のAPIではこのタイミングで結果を取得
} else {
errorDiv.innerHTML = 'Please enter a valid domain name. It should follow the format: example.com';
loadingDiv.style.display = 'none'; // エラー時はローディングを停止
}
});
// ドメイン名のバリデーション関数
function validateDomainName(domain) {
const domainPattern = /^[a-zA-Z0-9-]{1,63}\.[a-zA-Z]{2,}$/;
return domainPattern.test(domain);
}
</script>
</body>
</html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Domain Acquisition</title> <style> body { font-family: Arial, sans-serif; background-color: #f4f4f4; margin: 0; padding: 0; display: flex; justify-content: center; align-items: center; height: 100vh; } .container { background-color: #fff; padding: 20px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); border-radius: 8px; text-align: center; width: 100%; max-width: 600px; } h1 { margin-bottom: 20px; } input[type="text"] { width: 80%; padding: 10px; margin: 10px 0; border: 1px solid #ccc; border-radius: 5px; font-size: 16px; } button { padding: 10px 20px; border: none; background-color: #007BFF; color: white; font-size: 16px; border-radius: 5px; cursor: pointer; } button:hover { background-color: #0056b3; } .result { margin-top: 20px; } .loading { display: none; margin-top: 20px; } .domain-list { margin-top: 20px; } .domain-list ul { list-style-type: none; padding: 0; } .domain-list li { background-color: #f9f9f9; margin: 10px 0; padding: 10px; border-radius: 5px; border: 1px solid #ddd; text-align: left; display: flex; justify-content: space-between; } .price { color: green; } .purchase-link { text-decoration: none; background-color: #28a745; color: white; padding: 5px 10px; border-radius: 5px; } .error { color: red; margin-top: 20px; } @media (max-width: 600px) { input[type="text"] { width: 100%; } } </style> </head> <body> <div class="container"> <h1>Check Domain Availability</h1> <form id="domain-form"> <input type="text" id="domain-name" placeholder="Enter domain name" required> <button type="submit">Search</button> </form> <div class="loading" id="loading"> <p>Searching...</p> <img src="https://i.gifer.com/ZZ5H.gif" alt="Loading" width="50"> </div> <div class="result" id="result"></div> <div class="error" id="error"></div> <div class="domain-list" id="domain-list"></div> </div> <script> const form = document.getElementById('domain-form'); const resultDiv = document.getElementById('result'); const loadingDiv = document.getElementById('loading'); const errorDiv = document.getElementById('error'); const domainListDiv = document.getElementById('domain-list'); form.addEventListener('submit', function (event) { event.preventDefault(); const domainName = document.getElementById('domain-name').value.trim(); // フィールドをリセット resultDiv.innerHTML = ''; errorDiv.innerHTML = ''; domainListDiv.innerHTML = ''; loadingDiv.style.display = 'block'; // ローディング表示 if (validateDomainName(domainName)) { // ダミーデータの使用例（実際にはAPIを呼び出します） setTimeout(() => { loadingDiv.style.display = 'none'; // ローディング終了 // 検索結果の仮表示 const available = Math.random() > 0.5; // ランダムに結果を生成 if (available) { resultDiv.innerHTML = `<strong>${domainName}</strong> is available!`; // 他のTLDを提案し、価格と購入リンクを表示 const suggestions = [ { tld: '.com', price: '$10.99', link: 'https://buydomain.com/com' }, { tld: '.net', price: '$9.99', link: 'https://buydomain.com/net' }, { tld: '.org', price: '$11.99', link: 'https://buydomain.com/org' }, { tld: '.info', price: '$8.99', link: 'https://buydomain.com/info' }, { tld: '.co', price: '$12.99', link: 'https://buydomain.com/co' } ]; let domainList = '<ul>'; suggestions.forEach(({ tld, price, link }) => { domainList += `<li>${domainName}${tld} <span class="price">${price}</span> <a href="${link}" target="_blank" class="purchase-link">Buy</a></li>`; }); domainList += '</ul>'; domainListDiv.innerHTML = domainList; } else { resultDiv.innerHTML = `<strong>${domainName}</strong> is already taken.`; } }, 2000); // 実際のAPIではこのタイミングで結果を取得 } else { errorDiv.innerHTML = 'Please enter a valid domain name. It should follow the format: example.com'; loadingDiv.style.display = 'none'; // エラー時はローディングを停止 } }); // ドメイン名のバリデーション関数 function validateDomainName(domain) { const domainPattern = /^[a-zA-Z0-9-]{1,63}\.[a-zA-Z]{2,}$/; return domainPattern.test(domain); } </script> </body> </html>
Bootstrapフッターを配置
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<title>My Site</title>
</head>
<body>
<header class="bg-primary text-center text-light p-5">
<h1 class="fs-3">My Admin</h1>
</header>
<div class="container mt-5">
<section class="row">
<section class="col-md-4 mb-5">
こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。
</section>
<section class="col-md-8">
こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。
</section>
</section>
</div>
<footer class="bg-secondary text-center text-light p-5 mt-5">
(c) chodomeyuhei
</footer>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW"
crossorigin="anonymous"></script>
</body>
</html>ブックマークサイト.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ブックマークサイト</title>
<style>
:root {
--bg-color: #f4f4f9;
--text-color: #000;
--link-color: #007bff;
--btn-bg-color: #007bff;
--btn-hover-color: #0056b3;
--delete-btn-bg-color: #dc3545;
--delete-btn-hover-color: #c82333;
}
[data-theme="dark"] {
--bg-color: #2e2e2e;
--text-color: #fff;
--link-color: #66b2ff;
--btn-bg-color: #0056b3;
--btn-hover-color: #007bff;
--delete-btn-bg-color: #c82333;
--delete-btn-hover-color: #dc3545;
}
body {
font-family: Arial, sans-serif;
margin: 20px;
padding: 0;
background-color: var(--bg-color);
color: var(--text-color);
transition: background-color 0.3s, color 0.3s;
}
.container {
max-width: 800px;
margin: auto;
padding: 20px;
background: #fff;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
border-radius: 8px;
background-color: var(--bg-color);
color: var(--text-color);
transition: background-color 0.3s, color 0.3s;
}
.bookmark-form {
display: flex;
flex-direction: column;
gap: 10px;
margin-bottom: 20px;
}
.bookmark-form input, .bookmark-form select {
padding: 10px;
font-size: 16px;
border: 1px solid #ddd;
border-radius: 5px;
background-color: var(--bg-color);
color: var(--text-color);
}
.bookmark-form button {
padding: 10px;
font-size: 16px;
background-color: var(--btn-bg-color);
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
}
.bookmark-form button:hover {
background-color: var(--btn-hover-color);
}
.bookmark-list {
list-style-type: none;
padding: 0;
}
.bookmark-item {
display: flex;
justify-content: space-between;
align-items: center;
margin: 10px 0;
padding: 10px;
border: 1px solid #ddd;
border-radius: 5px;
background-color: #fafafa;
background-color: var(--bg-color);
color: var(--text-color);
}
.bookmark-item a {
text-decoration: none;
color: var(--link-color);
}
.bookmark-item button {
padding: 5px 10px;
font-size: 14px;
background-color: var(--delete-btn-bg-color);
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
}
.bookmark-item button:hover {
background-color: var(--delete-btn-hover-color);
}
.controls {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
}
</style>
</head>
<body data-theme="light">
<div class="container">
<h1>ブックマークサイト</h1>
<div class="controls">
<input type="text" id="search-bar" placeholder="ブックマークを検索" oninput="filterBookmarks()">
<select id="category-filter" onchange="filterByCategory()">
<option value="all">すべてのカテゴリー</option>
</select>
<button onclick="toggleTheme()">ダークモード切り替え</button>
</div>
<div class="bookmark-form">
<input type="text" id="bookmark-title" placeholder="タイトルを入力してください" required>
<input type="url" id="bookmark-url" placeholder="URLを入力してください" required>
<input type="text" id="bookmark-category" placeholder="カテゴリーを入力してください">
<button onclick="addBookmark()">ブックマークを追加</button>
</div>
<ul id="bookmark-list" class="bookmark-list"></ul>
</div>
<script>
document.addEventListener('DOMContentLoaded', loadBookmarks);
function loadBookmarks() {
const bookmarks = JSON.parse(localStorage.getItem('bookmarks')) || [];
const categories = new Set();
bookmarks.forEach(bookmark => {
renderBookmark(bookmark);
categories.add(bookmark.category);
});
updateCategoryFilter(Array.from(categories));
}
function addBookmark() {
const titleInput = document.getElementById('bookmark-title');
const urlInput = document.getElementById('bookmark-url');
const categoryInput = document.getElementById('bookmark-category');
const title = titleInput.value.trim();
const url = urlInput.value.trim();
const category = categoryInput.value.trim();
if (title === '' || url === '') {
alert('タイトルとURLを入力してください。');
return;
}
const bookmark = { title, url, category };
saveBookmark(bookmark);
renderBookmark(bookmark);
titleInput.value = '';
urlInput.value = '';
categoryInput.value = '';
updateCategoryFilter([category]);
}
function saveBookmark(bookmark) {
const bookmarks = JSON.parse(localStorage.getItem('bookmarks')) || [];
bookmarks.push(bookmark);
localStorage.setItem('bookmarks', JSON.stringify(bookmarks));
}
function renderBookmark(bookmark) {
const bookmarkList = document.getElementById('bookmark-list');
const listItem = document.createElement('li');
listItem.className = 'bookmark-item';
listItem.innerHTML = `
<span>${bookmark.title} (${bookmark.category})</span>
<div>
<a href="${bookmark.url}" target="_blank">訪問</a>
<button onclick="editBookmark('${bookmark.url}')">編集</button>
<button onclick="deleteBookmark('${bookmark.url}')">削除</button>
</div>
`;
bookmarkList.appendChild(listItem);
}
function deleteBookmark(url) {
let bookmarks = JSON.parse(localStorage.getItem('bookmarks')) || [];
bookmarks = bookmarks.filter(bookmark => bookmark.url !== url);
localStorage.setItem('bookmarks', JSON.stringify(bookmarks));
refreshBookmarkList();
}
function editBookmark(url) {
let bookmarks = JSON.parse(localStorage.getItem('bookmarks')) || [];
const bookmark = bookmarks.find(bookmark => bookmark.url === url);
if (bookmark) {
document.getElementById('bookmark-title').value = bookmark.title;
document.getElementById('bookmark-url').value = bookmark.url;
document.getElementById('bookmark-category').value = bookmark.category;
deleteBookmark(url); // 編集のために一旦削除
}
}
function refreshBookmarkList() {
const bookmarkList = document.getElementById('bookmark-list');
bookmarkList.innerHTML = '';
loadBookmarks();
}
function filterBookmarks() {
const query = document.getElementById('search-bar').value.toLowerCase();
const bookmarkItems = document.querySelectorAll('.bookmark-item');
bookmarkItems.forEach(item => {
const title = item.querySelector('span').innerText.toLowerCase();
item.style.display = title.includes(query) ? 'flex' : 'none';
});
}
function filterByCategory() {
const category = document.getElementById('category-filter').value;
const bookmarkItems = document.querySelectorAll('.bookmark-item');
bookmarkItems.forEach(item => {
const itemCategory = item.querySelector('span').innerText.split(' (')[1].slice(0, -1);
item.style.display = (category === 'all' || itemCategory === category) ? 'flex' : 'none';
});
}
function updateCategoryFilter(categories) {
const filter = document.getElementById('category-filter');
categories.forEach(category => {
if (![...filter.options].some(option => option.value === category)) {
const option = document.createElement('option');
option.value = category;
option.textContent = category;
filter.appendChild(option);
}
});
}
function toggleTheme() {
const body = document.body;
const currentTheme = body.getAttribute('data-theme');
const newTheme = currentTheme === 'light' ? 'dark' : 'light';
body.setAttribute('data-theme', newTheme);
}
</script>
</body>
</html>React className属性
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My React App</title>
<script src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<link rel="stylesheet" href="style.css">
<body>
<div id="container"></div>
<script type="text/babel">
'use strict';
{
const container = document.querySelector('#container');
const root = ReactDOM.createRoot(container);
root.render(
<>
<h1>アイテム</h1>
<ul className="menus">
<li>ポーション</li>
<li>エリクサー</li>
<li>ラストエリクサー</li>
</ul>
<p>合計: 0G</p>
</>
);
}
</script>
</body>
</html>style.css
@charset "utf-8";
body{
margin: 0;
}
#container{
width: 400px;
margin: auto;
}
h1{
margin: 16px 0 0 0;
font-size: 20px;
text-align: center;
}
.menus{
margin: 0;
padding: 0;
list-style-type: none;
}
.menus > li{
border: 1px solid #ccc;
padding: 8px;
border-radius: 8px;
margin-top: 16px;
}
p{
margin: 0;
text-align: right;
}CSS 画像を左右に振り分ける
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Flexbox</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<article>
<img src="forest.png" width="240" height="160">
<div class="text">
<h1>タイトル</h1>
<p>こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。</p>
</div>
</article>
<article>
<img src="forest.png" width="240" height="160">
<div class="text">
<h1>タイトル</h1>
<p>こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。</p>
</div>
</article>
<article>
<img src="forest.png" width="240" height="160">
<div class="text">
<h1>タイトル</h1>
<p>こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。</p>
</div>
</article>
<article>
<img src="forest.png" width="240" height="160">
<div class="text">
<h1>タイトル</h1>
<p>こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。</p>
</div>
</article>
</body>
</html>style.css
@charset "utf-8";
article {
display: flex;
gap: 16px;
align-items: center;
}
article+article {
margin-top: 32px;
}
article:nth-child(even) {
flex-direction: row-reverse;
}
.text {
flex: 1;
}
h1 {
margin: 0;
font-size: 22px;
}HTMLCSS 画像付きの記事一覧を作る
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Flexbox</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<article>
<img src="forest.png" width="240" height="160">
<div class="text">
<h1>タイトル</h1>
<p>こんにちは。こんにちは。</p>
</div>
</article>
</body>
</html>style.css
@charset "utf-8";
article {
display: flex;
gap: 16px;
}
.text {
background: pink;
flex: 1;
}Social Networking Service
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Social Networking Service</title>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
<style>
body {
padding: 20px;
}
.card {
margin-bottom: 20px;
}
</style>
</head>
<body>
<div class="container">
<h1 class="text-center mb-4">Social Networking Service</h1>
<!-- ログインフォーム -->
<div id="loginForm" class="card w-50 mx-auto">
<div class="card-body">
<h2 class="card-title text-center mb-4">Login</h2>
<div class="form-group">
<input type="text" id="loginUsername" class="form-control" placeholder="Username">
</div>
<div class="form-group">
<input type="password" id="loginPassword" class="form-control" placeholder="Password">
</div>
<button onclick="login()" class="btn btn-primary btn-block">Login</button>
<button onclick="registerForm()" class="btn btn-secondary btn-block">Register</button>
</div>
</div>
<!-- 登録フォーム -->
<div id="registerForm" class="card w-50 mx-auto" style="display: none;">
<div class="card-body">
<h2 class="card-title text-center mb-4">Register</h2>
<div class="form-group">
<input type="text" id="registerName" class="form-control" placeholder="Full Name">
</div>
<div class="form-group">
<input type="text" id="registerUsername" class="form-control" placeholder="Username">
</div>
<div class="form-group">
<input type="password" id="registerPassword" class="form-control" placeholder="Password">
</div>
<button onclick="register()" class="btn btn-primary btn-block">Register</button>
<button onclick="loginForm()" class="btn btn-secondary btn-block">Back to Login</button>
</div>
</div>
<!-- プロフィール -->
<div id="profile" class="card w-50 mx-auto" style="display: none;">
<div class="card-body">
<h2 class="card-title text-center mb-4">Profile</h2>
<p><strong>Name:</strong> <span id="profileName"></span></p>
<p><strong>Username:</strong> <span id="profileUsername"></span></p>
<button onclick="logout()" class="btn btn-danger btn-block">Logout</button>
</div>
</div>
<!-- 投稿フォーム -->
<div id="postForm" class="card w-75 mx-auto" style="display: none;">
<div class="card-body">
<h2 class="card-title text-center mb-4">Create Post</h2>
<div class="form-group">
<textarea id="postContent" class="form-control" rows="3" placeholder="What's on your mind?"></textarea>
</div>
<button onclick="createPost()" class="btn btn-primary btn-block">Post</button>
</div>
</div>
<!-- 投稿一覧 -->
<div id="postList" class="w-75 mx-auto mt-4"></div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.4/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<script>
let currentUser = null; // 現在のログインユーザー
let users = []; // ユーザーの配列
let posts = []; // 投稿の配列
function login() {
const username = document.getElementById('loginUsername').value;
const password = document.getElementById('loginPassword').value;
const user = users.find(u => u.username === username && u.password === password);
if (user) {
currentUser = user;
showProfile();
} else {
alert('Invalid username or password.');
}
}
function logout() {
currentUser = null;
hideAll();
document.getElementById('loginForm').style.display = 'block';
}
function registerForm() {
hideAll();
document.getElementById('registerForm').style.display = 'block';
}
function register() {
const name = document.getElementById('registerName').value;
const username = document.getElementById('registerUsername').value;
const password = document.getElementById('registerPassword').value;
users.push({ name, username, password });
alert('Registration successful! Please login.');
loginForm();
}
function loginForm() {
hideAll();
document.getElementById('loginForm').style.display = 'block';
}
function showProfile() {
hideAll();
document.getElementById('profile').style.display = 'block';
document.getElementById('profileName').textContent = currentUser.name;
document.getElementById('profileUsername').textContent = currentUser.username;
document.getElementById('postForm').style.display = 'block';
displayPosts();
}
function createPost() {
const postContent = document.getElementById('postContent').value;
if (postContent.trim() !== '') {
const post = {
id: Date.now(),
content: postContent,
author: currentUser.name,
authorUsername: currentUser.username,
likes: 0,
comments: []
};
posts.unshift(post); // 最新の投稿を先頭に追加
displayPosts();
document.getElementById('postContent').value = ''; // 投稿後、入力欄を空にする
}
}
function displayPosts() {
const postList = document.getElementById('postList');
postList.innerHTML = '';
posts.forEach(post => {
const postElement = document.createElement('div');
postElement.innerHTML = `
<div class="card mb-3">
<div class="card-body">
<p class="card-text">${post.content}</p>
<small class="text-muted">Posted by ${post.author} (@${post.authorUsername}) at ${new Date(post.id).toLocaleString()}</small><br>
<button onclick="likePost(${post.id})" class="btn btn-primary btn-sm mt-2">Like (${post.likes})</button>
<button onclick="showComments(${post.id})" class="btn btn-secondary btn-sm mt-2">Comments</button>
</div>
</div>
`;
postList.appendChild(postElement);
});
}
function likePost(postId) {
const post = posts.find(p => p.id === postId);
post.likes++;
displayPosts();
}
function showComments(postId) {
const post = posts.find(p => p.id === postId);
const comments = prompt('Enter your comment:');
if (comments !== null && comments.trim() !== '') {
post.comments.push({ author: currentUser.name, content: comments });
displayPosts();
}
}
function hideAll() {
document.getElementById('loginForm').style.display = 'none';
document.getElementById('registerForm').style.display = 'none';
document.getElementById('profile').style.display = 'none';
document.getElementById('postForm').style.display = 'none';
}
users.push({ name: 'User One', username: 'user1', password: 'password1' });
users.push({ name: 'User Two', username: 'user2', password: 'password2' });
hideAll();
document.getElementById('loginForm').style.display = 'block';
</script>
</body>
</html>