-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
137 lines (110 loc) · 5.09 KB
/
index.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
<!DOCTYPE html>
<html lang="ja" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="shortcut icon" href="favicon.ico">
<meta property="og:url" content="https://moon.sakudev.net" />
<meta property="og:title" content="月の位置がわかる">
<meta property="og:description" content="現在地から月の位置と満ち欠けがわかる">
<meta property="og:image"
content="https://1.bp.blogspot.com/-XLavryAPzxA/W0mF-kOMvZI/AAAAAAABNWE/-AT77B6Ome8hdb9JqbJr0HoTuLUXcrscQCLcBGAs/s800/moon_michikake05.png" />
<meta property="og:type" content="website">
<title>月の方角を表す</title>
<!-- CSS -->
<link rel="stylesheet" href="css/index.css" media="screen">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<!-- JavaScript -->
<script type="text/javascript" src="js/suncalc.js"></script>
<!--月の計算-->
<script type="text/javascript" src="js/time.js"></script>
<!--現時刻の表示-->
<script type="text/javascript" src="js/getPosition.js"></script><!-- 現時刻の月の位置 -->
<script type="text/javascript" src="js/anyPosition.js"></script><!-- 任意の月の位置 -->
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"
integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"
integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI"
crossorigin="anonymous"></script>
</head>
<body>
<main class="mainDiv">
<div class="content">
<div class="content_head">
<header class="title">
<h3 class="title_text">月の位置わかーる</h3>
</header>
</div>
<!-- S3とCloudFrontを使用しています -->
<div class="content_body">
<p class="clock" id="view_clock"></p>
<p>ボタンを押すと位置情報を取得して、月の位置を表示してくれます</p>
<button type="button" class="btn btn-primary btn-lg active" onclick="getPosition();">現時刻で月の位置を出力する</button>
<p class="content_separate">もしくは</p>
<div class="userInput">
<div class="input">
<form name="dateTimeForm">
<!--日付を入力-->
<input type="date" name="dateInput">
<!--時間を入力-->
<input type="time" name="timeInput" step="600">
</form>
</div>
<button type="button" class="btn btn-primary btn-lg active" onclick="anyPosition();">↑の日時で出力</button>
</div>
<div class="moon_img">
<img id="img_place" src="./ffffff.png" width="200" />
</div>
<div class="moon_azimuth"><span id="now_azimuth">方位</span></div>
</div>
<div class="content_foot">
<hr class="cp_hr02" />
<div class="details">
<h4>詳細</h4>
<div>方角 : <span id="now_direction"></span>°</div>
<div>満ち欠け : <span id="now_illumination_fraction"></span></div>
</div>
<hr class="cp_hr02" />
<div class="notice">
<h4>補足</h4>
<p>位置情報を外部に送信したり、製作者が位置情報を取得することはありません。</p>
<p>方角はコンパスの角度と合わせると位置がわかります。</p>
<p>月のイラストはだいたいの目安としてご覧ください。</p>
<p>満ち欠けは0(新月)~1(満月)の間で変動します。</p>
</p>
</div>
<div class="github_logo"><a href="https://github.com/t-sakurai816/moon_position"><img alt="github-logo"
src="https://github.githubassets.com/images/modules/logos_page/GitHub-Logo.png"></a>
</div>
</div>
<!-- いるけどいらない -->
<div class="waste">
<!-- 日付 -->
<span id="span1" hidden></span>
<!-- 時間 -->
<span id="span2" hidden></span>
<!--緯度-->
<span id="now_latiude" hidden></span>
<!-- 経度 -->
<span id="now_longitude" hidden></span>
<!-- ラジアン -->
<span id="now_moon_position_rad" hidden></span>
<!-- ラジアン→角度 -->
<span id="now_degree" hidden></span>
<!-- 日の入り時刻 -->
<span id="now_sunny_in" hidden></span>
<!-- 満ち欠け(画像表示用) -->
<span id="now_illumination" hidden></span>
</div>
</div>
</main>
</body>
</html>