スクリプトAI「Rain」

アディラス

: スクリプトAI「Rain」

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

162

…がお気に入り登録しました。

投稿日時：

プロンプト実行例

こんにちは！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>

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

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

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

GPTs
キャラクター作成
顔面偏差値測定ツール
▼最新作はこちら▼ https://oshiete.ai/item_lists/73557973863457792 あなたの顔写真を送付するだけで顔面偏差値を数字で出力してくれます。各項目別に点数付けしてくれて、顔の強みや特徴まで分析してくれるツール。客観的評価を知りたい方はぜひ使ってみてください。
6
2
368
1.23K
Tam-BizAI編集長
GPTs
ロールプレイ
GPTで副業診断
Big5とはもっとも信頼性が高いと言われる性格分析です。 GPTsが簡単な10個の質問であなたの心理的傾向（Big5）を分析し、おすすめの副業を教えてくれます。どんな副業が出てくるかは作者にもわかりません。。ぜひ気楽に遊んでみてください。
3
0
694
1.54K
Kaori.Kei
GPTs
資料作成
なぜなぜ分析用GPT『Five Whys』
ユーザーが与えた問題に対して、なぜなぜ分析してくれます。「なぜ？」を繰り返すことで、根本原因の特定、対策立案から、フォローアップ方法の提案までしてくれる優れものです。これで業務効率UP間違いなし！？
2
0
181
759
こば
画像生成
キャラクター作成
推奨モデル - DALL•E 3
ヘンな顔
⚠️笑いすぎ注意！⚠️ 変顔を生成します。毎朝のデジタルにらめっこ「笑うと負けよ！」などにご活用ください。なお、笑いすぎで腹筋が崩壊しても、責任は持ちませんのでご注意ください。 --- **ヘンな顔の歌** (作詞: VEP) 1. ぼくの顔、ちょっとヘンかも？鏡に映るまゆげの角度右は上がって、左は下がるみんな笑って、ぼくも笑う **サビ** ヘンな顔、ヘンな顔だけど愛されてるんだよヘンな顔、ヘンな顔ユニークな僕、バンザイ！ 2. おでこにシワが、勝手にできる目を開けてても、眠そうな顔友だちみんなも、大爆笑でもぼくのこと、好きなんだろ？ **サビ** ヘンな顔、ヘンな顔だけど愛されてるんだよヘンな顔、ヘンな顔ユニークな僕、バンザイ！ **ブリッジ** 世界にひとつだけの顔ありのままを楽しもうヘンだって、いいじゃない！それがぼくだから **サビ** ヘンな顔、ヘンな顔みんなと笑いあうんだよヘンな顔、ヘンな顔ユニークな僕、最高だ！ ---------- 😊少しでも気に入っていただけましたら、お気に入り（❤マーク）をクリックしていただけると、とても励みになりますので、ぜひお願いいたします。 😊また、お気に入りに登録しておくと、笑いたいときにいつでもマイページからすぐにご利用いただけます。 😊感想など、お気軽にコメントください。
0
0
15
81
VEP

スクリプトAI「Rain」

コメント 0

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