-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
57 lines (53 loc) · 10.3 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
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>
weather
</title>
<link href="css/style.css" rel="stylesheet"/>
<link href="css/animtion_respon.css" rel="stylesheet"/>
</head>
<body>
<main>
<div id="container">
<div id="top">
<div class="temp">
<div id="icon_top"></div>
<p id="current_temp"></p>
</div>
<div id="top_con">
<h1 id="text_city" style="width:100%;text-align:center;color:white;">city</h1>
<div id="switch">
<div onclick="switch_tg();" id="togel">
C
</div>
</div>
</div>
</div>
<div id="con_botton">
<div id="botton_left">
<div id="input_con">
<input name="ice-cream-choice" list="datalist" placeholder="City" type="text" id="input_city"/>
<datalist id="datalist">
</datalist>
<button onclick="changelocation();" id="btn_location">
<svg width="55" height="55" viewBox="0 0 55 55" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M22.9166 41.25C26.9842 41.2491 30.9347 39.8874 34.1389 37.3816L44.213 47.4558L47.4535 44.2154L37.3793 34.1412C39.8864 30.9367 41.2489 26.9854 41.2499 22.9166C41.2499 12.8081 33.0251 4.58331 22.9166 4.58331C12.808 4.58331 4.58325 12.8081 4.58325 22.9166C4.58325 33.0252 12.808 41.25 22.9166 41.25ZM22.9166 9.16665C30.4997 9.16665 36.6666 15.3335 36.6666 22.9166C36.6666 30.4998 30.4997 36.6666 22.9166 36.6666C15.3335 36.6666 9.16659 30.4998 9.16659 22.9166C9.16659 15.3335 15.3335 9.16665 22.9166 9.16665Z" fill="white"/>
<path d="M26.1525 19.6763C27.0211 20.5471 27.5 21.6975 27.5 22.9167H32.0833C32.0854 21.7122 31.8486 20.5194 31.3869 19.407C30.9251 18.2946 30.2474 17.2847 29.3929 16.4358C25.9233 12.9708 19.9077 12.9708 16.4404 16.4358L19.6763 19.6808C21.4179 17.9438 24.42 17.9483 26.1525 19.6763Z" fill="white"/>
</svg>
</button>
</div>
<svg class="svg_location" xmlns="http://www.w3.org/2000/svg" data-name="Layer 1" width="100%" height="50%" viewBox="0 0 910.90841 704.9959" class="injected-svg gridItem__media" xmlns:xlink="http://www.w3.org/1999/xlink">
<ellipse cx="697.31694" cy="542.77041" rx="48.50275" ry="98.96521" fill="#3F3D56" class="svg-bg"/>
<path d="M837.2664,831.34929c19.42587-116.55145.19558-232.6818-.00093-233.84029l-3.77868.64007c.19558,1.15288,19.31544,116.6731-.00094,232.57138Z" transform="translate(-144.42849 -126.5888)" fill="#d81b60" class="svg-accent"/><rect x="818.15251" y="636.6288" width="3.83318" height="49.73959" transform="translate(-294.44613 946.03684) rotate(-61.8584)" fill="#d81b60" class="svg-accent"/><rect x="841.49104" y="671.34009" width="49.7413" height="3.83318" transform="translate(-359.60704 361.93068) rotate(-28.15796)" fill="#d81b60" class="svg-accent"/><ellipse cx="813.85467" cy="386.14381" rx="94.86568" ry="193.56431" fill="#e6e6e6"/><path d="M947.71657,829.26577c37.944-227.6604.38273-454.4917-.00094-456.75629l-3.77868.64007c.38273,2.259,37.8336,228.48015-.00094,455.48738Z" transform="translate(-144.42849 -126.5888)" fill="#d81b60" class="svg-accent"/><rect x="913.97034" y="448.71399" width="3.83318" height="97.28714" transform="translate(-99.08394 943.80398) rotate(-61.8584)" fill="#d81b60" class="svg-accent"/><rect x="957.78573" y="518.43871" width="97.28714" height="3.83318" transform="translate(-270.87542 409.92268) rotate(-28.15742)" fill="#d81b60" class="svg-accent"/><path d="M737.958,829.874H233.36182a7.00817,7.00817,0,0,1-7-7V504.02832a7.00786,7.00786,0,0,1,7-7H737.958a7.00818,7.00818,0,0,1,7,7V822.874A7.00849,7.00849,0,0,1,737.958,829.874Z" transform="translate(-144.42849 -126.5888)" fill="#e6e6e6"/><path d="M279.76611,535.666a3.00328,3.00328,0,0,0-3,3V788.2373a3.00328,3.00328,0,0,0,3,3h411.7876a3.00328,3.00328,0,0,0,3-3V538.666a3.00328,3.00328,0,0,0-3-3Z" transform="translate(-144.42849 -126.5888)" fill="#fff"/><rect x="126.57151" y="457.54243" width="424.55338" height="15.81483" fill="#e6e6e6"/><rect x="126.57151" y="534.85938" width="424.55338" height="15.81482" fill="#e6e6e6"/><rect x="189.77354" y="492.6865" width="177.47757" height="15.81482" fill="#e6e6e6"/><rect x="126.57151" y="616.56934" width="424.55338" height="15.81482" fill="#e6e6e6"/><rect x="181.8661" y="408.07717" width="15.81482" height="218.15678" fill="#e6e6e6"/><rect x="477.07631" y="408.07717" width="15.81482" height="135.56825" fill="#e6e6e6"/><rect x="357.58644" y="408.07717" width="15.81482" height="257.57088" fill="#e6e6e6"/><rect x="267.09047" y="537.49519" width="15.81482" height="128.15283" fill="#e6e6e6"/><circle cx="365.49385" cy="544.76679" r="20.20784" fill="#d81b60" class="svg-accent"/><polygon points="910.513 704.996 0 704.996 0 702.814 910.908 702.814 910.513 704.996" fill="#3F3D56" class="svg-bg"/><circle cx="367.91606" cy="300.06685" r="124.6554" fill="#d81b60" class="svg-accent"/><polygon points="369.135 502.707 329.753 435.433 290.371 368.159 368.323 367.69 446.275 367.221 407.705 434.964 369.135 502.707" fill="#d81b60" class="svg-accent"/><circle cx="368.91666" cy="299.28272" r="44.7245" fill="#fff"/><path d="M509.46118,127.22932s-26.67361-7.51371-34.563,28.92773-1.87841,54.85-1.87841,54.85l59.546-6.95016S549.47162,138.312,509.46118,127.22932Z" transform="translate(-144.42849 -126.5888)" fill="#2F2E41" class="svg-fg"/><path d="M469.55423,285.065s-39.12585,3.89676-32.157,19.69272,6.96878,17.1897,6.96878,17.1897l34.37939,61.32544,11.15009-11.61465s-12.54386-27.41062-12.54386-36.23777S464.3432,311.262,464.3432,311.262l22.76474-1.85833Z" transform="translate(-144.42849 -126.5888)" fill="#ffb9b9"/><path d="M576.77316,303.82857l13.00843,28.33979s9.75631,9.75631,20.4418,48.78158,13.00842,37.63153,13.00842,37.63153l-16.26053,3.25211s-18.11886-42.27738-24.15851-45.52948-13.473-32.98566-13.473-32.98566l-21.371-26.946,6.50421-14.40219Z" transform="translate(-144.42849 -126.5888)" fill="#ffb9b9"/><path d="M560.97723,271.30749l19.97718,37.167S555.86673,296.85979,552.15,322.41207l-22.76474-17.6543s-31.59188,10.22089-50.63989,6.50418c0,0,5.575-17.65429-14.40219-25.55227l45.06488-5.575-1.85834-9.75632,4.64588-9.29175Z" transform="translate(-144.42849 -126.5888)" fill="#2F2E41" class="svg-fg"/><path d="M481.5329,374.91033s-12.54386-1.85834-9.29172,9.29172l6.50421,22.30014s-8.36255,22.76474,4.64588,17.6543,21.371-36.70234,21.371-36.70234,5.575-24.1585,0-24.1585-23.22934-3.71668-21.371,0S481.5329,374.91033,481.5329,374.91033Z" transform="translate(-144.42849 -126.5888)" fill="#2F2E41" class="svg-fg"/><path d="M621.83807,412.07726s-16.26052-4.18127-19.97723,2.32294-2.78751,27.87518-2.78751,28.33978,5.575,5.11044,7.43338,5.11044,13.473,20.90641,29.269,13.473S621.83807,412.07726,621.83807,412.07726Z" transform="translate(-144.42849 -126.5888)" fill="#2F2E41" class="svg-fg"/><circle cx="504.76223" cy="165.84637" r="18.11888" transform="matrix(0.16018, -0.98709, 0.98709, 0.16018, 115.77492, 510.93639)" fill="#ffb9b9"/><path d="M519.629,169.56306s3.71667,19.51263,6.96881,22.30015-24.62308,6.9688-24.62308,6.9688,4.18128-13.473-.92917-20.44182S519.629,169.56306,519.629,169.56306Z" transform="translate(-144.42849 -126.5888)" fill="#ffb9b9"/><path d="M568.41061,280.13467c-3.16384,0-11.21978-1.31012-20.25137-2.99659-7.81427-1.4588-16.36737-3.19171-23.11319-4.59475-7.2243-1.50525-12.38583-2.62955-12.38583-2.62955s-1.85834,11.61465-7.898,10.22089c-5.20334-1.19864-20.753-55.51343-24.95758-70.52424a5.22178,5.22178,0,0,1,2.309-5.86773l21.357-13.041,5.47284,2.09063s9.24527-7.14535,14.61121-7.28936,14.65771-1.53778,14.65771-1.53778,10.68549.92918,12.54386,8.82714,2.7875,57.14415,9.75631,65.9713S577.23776,280.13467,568.41061,280.13467Z" transform="translate(-144.42849 -126.5888)" fill="#d0cde1"/><path d="M503.36847,306.15148s0,18.11887,12.07925,15.33136.92917-19.51263.92917-19.51263Z" transform="translate(-144.42849 -126.5888)" fill="#ffb9b9"/><path d="M536.81873,308.00985s-4.18128,21.371-13.00843,18.11886,0-22.30017,0-22.30017Z" transform="translate(-144.42849 -126.5888)" fill="#ffb9b9"/><path d="M556.33139,257.36993s-4.54831,10.85275-8.17212,19.76815c-7.81427-1.4588-16.36737-3.19171-23.11319-4.59475a13.30234,13.30234,0,0,1,2.01633-3.55872c3.2521-3.7167,1.39377-4.64587,1.39377-4.64587-2.78751-5.575-.46457-13.00843-.46457-13.00843-5.575-14.86676,2.7875-33.45025,2.7875-33.45025Z" transform="translate(-144.42849 -126.5888)" opacity="0.15" style="isolation:isolate"/><path d="M532.17285,217.88006s-8.36255,18.58346-2.7875,33.45025c0,0-2.32294,7.43338.46456,13.00843,0,0,1.85834.92917-1.39376,4.64587s-6.03962,16.7251-3.71668,19.51263-3.2521,7.898-1.85834,10.68549-2.32293,6.50421-2.32293,6.50421,13.93759,2.78751,16.26053,6.96878c0,0,2.7875-3.2521,1.39376-6.96878s-.46457-5.11047.92917-7.43338,5.575-7.43338,6.03961-9.75632S557.72513,257.37,557.72513,257.37l-5.665-52.49179Z" transform="translate(-144.42849 -126.5888)" fill="#d0cde1"/><path d="M483.85583,204.87163l-.868.15781a5.22217,5.22217,0,0,0-4.29025,5.17661c.03308,4.66458.29587,12.94275,1.44153,24.39914,1.85834,18.58346,8.36255,46.45864,9.75632,49.24618a148.2977,148.2977,0,0,0,7.43338,14.40219c4.18127,6.96881,5.11047,4.64588,4.18127,7.898a4.89285,4.89285,0,0,0,1.39377,5.11048s8.36255-9.29175,16.72513-4.18128a10.35185,10.35185,0,0,0,.92917-4.18127c0-2.32294,1.39376-4.64588-.92917-6.03965s1.39377-7.43338-2.32294-10.68548-4.18127-2.78751-3.71671-6.03964a13.8389,13.8389,0,0,0-.92916-6.50421Z" transform="translate(-144.42849 -126.5888)" fill="#d0cde1"/><path d="M511.53613,142.57154s-7.5137,19.9113-25.92227,28.17636l-3.00546-17.65719Z" transform="translate(-144.42849 -126.5888)" fill="#2F2E41" class="svg-fg"/>
<ellipse cx="377.98805" cy="32.28878" rx="2.55524" ry="4.87816" fill="#ffb9b9"/></svg>
</div>
<div id="botton_right">
</div>
</div>
</div>
</main>
<script src="js/weather.js"></script>
</body>
</html>