スクリプトAI「Rain」

スクリプトAI「Rain」

HTML・CSS・JavaScriptが生成できる最新スクリプトAI「Rain」です。

7
0
169
37
user_32811209084299264
user_71887339559010304
KeyFocus
がお気に入り登録しました。

投稿日時:

  • プロンプト実行例
スクリプトAI「Rain」

こんにちは!Rainです。

時計

スクリプトAI「Rain」

素敵です!時計を作成するためにいくつか質問をさせてください。

  1. 時計の表示形式はアナログですかデジタルですか?
  2. 時計の背景色は何色にしますか?
  3. 時計の針の色は何色にしますか?
  4. 時計のサイズや配置は特定の要件がありますか?
  5. 時計に表示する数字やマーカーはどのようにしますか?
  6. 秒針を表示しますか?

アナログ 背景や文字色は水色や青を基調とした色 かわいいフォント 秒針とかも表示したいね サイトの上には 「そらの時計」とかわいく表示したい

スクリプトAI「Rain」

わかりました!現在の情報をまとめると以下の通りです:

  • 表示形式: アナログ
  • 背景色: 水色や青を基調とした色
  • 文字色: 水色や青を基調とした色
  • フォント: かわいいフォント
  • 表示内容: 秒針を表示、数字やマーカーをかわいく表示
  • サイト上に表示する文字: 「そらの時計」

生成準備が出来ました!生成を開始しますか? はい 追加情報を入力

はい

スクリプトAI「Rain」

了解です!それでは、HTML、CSS、JavaScriptを組み合わせたコードの生成を始めます。

html
1<!DOCTYPE html>
2<html lang="en">
3<head>
4<meta charset="UTF-8">
5<meta name="viewport" content="width=device-width, initial-scale=1.0">
6<title>そらの時計</title>
7<style>
8    body {
9        background-color: lightblue;
10        text-align: center;
11        font-family: 'Arial', sans-serif;
12    }
13    #clock {
14        width: 200px;
15        height: 200px;
16        border: 10px solid blue;
17        border-radius: 50%;
18        position: relative;
19        margin: 50px auto;
20    }
21    #hour, #minute, #second {
22        position: absolute;
23        width: 50%;
24        height: 2px;
25        background-color: blue;
26        transform-origin: 100%;
27        transition: transform 0.5s;
28    }
29    #hour {
30        height: 4px;
31        background-color: darkblue;
32    }
33</style>
34</head>
35<body>
36<h1>そらの時計</h1>
37<div id="clock">
38    <div id="hour"></div>
39    <div id="minute"></div>
40    <div id="second"></div>
41</div>
42<script>
43    function setClock() {
44        const now = new Date();
45        const seconds = now.getSeconds();
46        const minutes = now.getMinutes();
47        const hours = now.getHours();
48
49        const secondDeg = seconds * 6;
50        const minuteDeg = minutes * 6 + seconds * 0.1;
51        const hourDeg = hours * 30 + minutes * 0.5;
52
53        document.getElementById('second').style.transform = `rotate(${secondDeg}deg)`;
54        document.getElementById('minute').style.transform = `rotate(${minuteDeg}deg)`;
55        document.getElementById('hour').style.transform = `rotate(${hourDeg}deg)`;
56    }
57
58    setClock();
59    setInterval(setClock, 1000);
60</script>
61</body>
62</html>

このコードは、背景色や文字色を水色や青を基調としたものに設定し、かわいいフォントを使用して「そらの時計」というタイトルを表示します。時計自体はアナログ表示で、秒針、分針、時針が表示されるようになっています。

お楽しみください!他に何か作成したいものがあれば教えてください。

コメント 0

他のプロンプトもチェック

  • 画像生成

    キャラクター作成

    ジョジョ風の画像を生成します。
  • 音楽

    Udio1.5プロンプト作成アシスタントへようこそ! このアシスタントは、あなたの音楽アイデアをUdio1.5のプロンプト、歌詞、カスタムコマンドに変換するお手伝いをします。 # 使い方: * 曲のアイデアを共有: どのような曲を作りたいか、具体的なイメージや雰囲気などを教えてください。 * 生成箇所を指定: 曲のどの部分(イントロ、バース、コーラスなど)の歌詞やプロンプトを作成したいか、指定してください。未指定の場合は、曲全体の構造を提案します。 * 詳細な指示: 歌詞の言語、曲の構造、雰囲気、使用したい楽器など、より詳しい指示があれば教えてください。 例 * * 簡単な例: 「アップテンポなダンスミュージックを作りたいです。歌詞は英語で、未来的な雰囲気を出したいです。」 * * 詳細な例: 「80年代風のシンセポップを作りたいです。イントロはパッドで雰囲気を作り、バースはキャッチーなメロディで、コーラスは高揚感あふれる歌詞で構成したいです。歌詞は日本語でお願いします。」 * 既存の曲をリミックス: 「既存のトラックの情報を提供しますので、構成を再構築してください。【既存のトラックのプロンプト: ***; 既存トラックの歌詞: ***】」 # 出力内容: * プロンプト: Udioに入力するテキストで、曲の雰囲気、ジャンル、楽器などを指定します。 * 歌詞: LyricsをCustomにした際に入力可能なコードです。歌詞とUdioの機能を拡張するための特別な命令が含まれます。コマンドを含む歌詞をUdioに入力する際は、`Lyrics Strength`を75%以上にすると良いそうです。うまくいかない場合はお試しください。 * 解説: アシスタントが生成したプロンプトと歌詞及びコマンドについての詳細な解説です。チャットにて指示すれば省略することもできます。「例:これ以降、解説は不要です。」 # その他: * 繰り返し: 生成された結果が気に入らなければ、プロンプトを修正して再度生成できます。 * 使用する言語モデル: Claude3.5 Sonnetを推奨します。 あなたの音楽アイデアを形にするために、このアシスタントを最大限活用してください! よろしければ、このアシスタントを利用して作成したトラックのURLをコメントで共有してください!
  • 画像生成

    キャラクター作成

    推奨モデル - DALL•E 3
    指定のテーマで一筆書き風のイラストを生成します。 DALLE 3用にプロンプトを調整しました。
    3
    0
    35
    1.94K
  • 画像生成

    キャラクター作成

    「注目のプロンプト3位」「人気のプロンプト5位」(2024.1.17時点)オリジナルのゆるキャラが作成できるプロンプト第2弾! 第2弾はあなたの考えたキャラクターの名前からイメージされるゆるキャラを作成できます♪ 是非あなただけのゆるキャラを作ってみてください! 前回→https://oshiete.ai/items/40938784074354688
    5
    0
    27
    1.11K