-
Notifications
You must be signed in to change notification settings - Fork 0
/
iphone.html
144 lines (137 loc) · 10.1 KB
/
iphone.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
<!DOCTYPE html>
<html lang="en">
<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">
<meta name="autoRender" content="true">
<title>सुदंर CSS | iphone</title>
<script src="./lessCompiler.js" ></script>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Assistant:wght@200;300;400;500;600;700&display=swap" rel="stylesheet">
<style>
</style>
</head>
<body sunder="bg_#bdd9f5 m_0 p_0 font-family_'Assistant',`sans-serif ov_hidden">
<div id="loader">
<div sunder="position_absolute h_100% w_100% bg_#d65076 z_5 dis_grid pli_center">
<p sunder="c_white ftw_900 ftsz_3rem">Loading Awesomeness ...</p>
</div>
</div>
<div id="main" sunder="dis_flex w_fit-content mx_auto position_relative top_-100vh trndu_2s a_&float_2rem_5rem`5s`ease`infinite">
<div sunder="position_relative dis_flex fd_column w_.2rem h_fit-content top_2rem">
<div sunder="position_relative w_100% mt_1rem h_2rem bg_#fad7bd bsh_0`0`1px`grey z_2 top_5rem"></div>
<div sunder="position_relative w_100% mt_1rem h_3rem bg_#fad7bd bsh_0`0`1px`grey z_2 top_5rem"></div>
<div sunder="position_relative w_100% mt_1rem h_4rem bg_#fad7bd bsh_0`0`1px`grey z_2 top_5rem"></div>
</div>
<div sunder="w_350px position_relative h_712px bg_black mx_5px my_5% brad_60px bsh_0`0`20px ov_hidden border_10px`solid`black out_3px`solid`#fad7bd">
<img src="./background.jpg" sunder="$filter $bright_110 position_absolute h_100% w_100%">
<div sunder="position_absolute top_0 left_0 right_0">
<div sunder="h_30px brad_0`0`20px`20px w_140px bg_black mx_auto">
<div sunder="position_relative top_50% bg_rgb(white,10%) h_.3rem w_30% mx_auto"></div>
</div>
</div>
<div sunder="position_relative">
<div sunder="dis_flex jc_end :^&>*:ml_.5rem mr_1.5rem mt_.25rem">
<svg xmlns="http://www.w3.org/2000/svg" sunder="h_1rem w_1rem c_white" viewBox="0 0 20 20" fill="currentColor">
<path d="M2 11a1 1 0 011-1h2a1 1 0 011 1v5a1 1 0 01-1 1H3a1 1 0 01-1-1v-5zM8 7a1 1 0 011-1h2a1 1 0 011 1v9a1 1 0 01-1 1H9a1 1 0 01-1-1V7zM14 4a1 1 0 011-1h2a1 1 0 011 1v12a1 1 0 01-1 1h-2a1 1 0 01-1-1V4z" />
</svg>
<svg xmlns="http://www.w3.org/2000/svg" sunder="h_1rem w_1rem c_white" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M17.778 8.222c-4.296-4.296-11.26-4.296-15.556 0A1 1 0 01.808 6.808c5.076-5.077 13.308-5.077 18.384 0a1 1 0 01-1.414 1.414zM14.95 11.05a7 7 0 00-9.9 0 1 1 0 01-1.414-1.414 9 9 0 0112.728 0 1 1 0 01-1.414 1.414zM12.12 13.88a3 3 0 00-4.242 0 1 1 0 01-1.415-1.415 5 5 0 017.072 0 1 1 0 01-1.415 1.415zM9 16a1 1 0 011-1h.01a1 1 0 110 2H10a1 1 0 01-1-1z" clip-rule="evenodd" />
</svg>
<svg xmlns="http://www.w3.org/2000/svg" sunder="h_1rem w_1rem c_white" viewBox="0 0 20 20" fill="currentColor">
<path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z" />
</svg>
</div>
<div sunder="h_2px w_4.5rem ml_auto mr_1.5rem mt_.25rem bg_white">
</div>
<div sunder="mt_.5rem dis_flex fd_column ai_center">
<svg xmlns="http://www.w3.org/2000/svg" sunder="h_2rem c_white mt_.5rem" viewBox="0 0 20 20" fill="currentColor">
<path d="M10 2a5 5 0 00-5 5v2a2 2 0 00-2 2v5a2 2 0 002 2h10a2 2 0 002-2v-5a2 2 0 00-2-2H7V7a3 3 0 015.905-.75 1 1 0 001.937-.5A5.002 5.002 0 0010 2z" />
</svg>
<p sunder="m_0 c_white ftsz_5rem ftw_200">9:41</p>
<p sunder="m_0 c_white ftsz_1rem ftw_700">Monday, June 7</p>
</div>
<div sunder="mt_1rem mx_.5rem position_relative">
<div sunder="position_absolute tr_scale(.90) tro_bottom bt_-.875rem l_0 r_0 bg_rgba(white,.2) p_1rem backdrop-filter_blur(5px) brad_0`0`25px`25px"></div>
<div sunder="position_absolute tr_scale(.95) tro_bottom bt_-.5rem l_0 r_0 bg_rgba(white,.3) p_1rem backdrop-filter_blur(5px) brad_0`0`25px`25px"></div>
<div sunder="mx_auto h_auto bg_rgba(white,.5) p_1rem pb_.25rem backdrop-filter_blur(5px) brad_25px">
<div sunder="dis_flex jc_space-between">
<div sunde="dis_flex">
<p sunder="ftsz_1rem m_0 ftw_bold">9:30 AM</p>
<h2 sunder="ftsz_1.5rem m_0 ftw_bold">Your Morning Summary</h2>
</div>
<span sunder="bg_#5e6873 h_2rem w_2rem brad_100% c_white dis_flex ai_center jc_center">
11
</span>
</div>
<div sunder="mt_.5rem dis_flex gap_.5rem">
<div>
<img sunder="w_100% brad_5px" src="https://picsum.photos/300/200?random=1">
<h3 sunder="mb_.25rem mt_.75rem ftsz_1rem ftw_bold">Lorem ipsum dolor sit.</h3>
<p sunder="m_0 ftsz_.75rem ftw_500">Lorem ipsum dolor sit amet consectetur adipisicing elit Lorem ipsum dolor sit amet.</p>
</div>
<div>
<img sunder="w_100% brad_5px" src="https://picsum.photos/300/200?random=2">
<h3 sunder="mb_.25rem mt_.75rem ftsz_1rem ftw_bold">Lorem ipsum dolor sit.</h3>
<p sunder="m_0 ftsz_.75rem ftw_500">Lorem ipsum dolor sit amet consectetur adipisicing elit Lorem ipsum dolor sit amet.</p>
</div>
</div>
<hr sunder="mt_1rem bcol_rgb(black,20%)"></hr>
<div sunder="dis_grid gtc_repeat(3,minmax(0,1fr)) gap_.25rem ai_end mt_.75rem">
<div sunder="gc_span`2/span`2">
<h3 sunder="ftsz_.875rem lh_1.25rem ftw_bold m_0">More Updates</h3>
<p sunder="mt_.1rem ftsz_.75rem lh_1rem">Polywork, Keystone 6, and Sarah Dasner</p>
</div>
<ul sunder="dis_flex p_0 mb_0 fd_row-reverse :^&>*:mr_-.5rem">
<li sunder="lsy_none mr_0"><img src="https://picsum.photos/32?random=1" sunder="w_2rem h_2rem object-fit_cover brad_25% bg_cyan"></li>
<li sunder="lsy_none"><img src="https://picsum.photos/32?random=2" sunder="w_2rem h_2rem object-fit_cover brad_25% bg_cyan"></li>
<li sunder="lsy_none"><img src="https://picsum.photos/32?random=3" sunder="w_2rem h_2rem object-fit_cover brad_25% bg_cyan"></li>
</ul>
</div>
</div>
</div>
</div>
<div sunder="position_absolute bt_0 l_0 r_0 h_5rem">
<div sunder="dis_flex jc_space-between px_2.5rem">
<div sunder="bg_rgb(white,20%) p_.5rem dis_flex jc_center ai_center brad_100% w_1.95rem h_1.95rem cur_pointer :h:bg_rgb(white,40%)">
<svg xmlns="http://www.w3.org/2000/svg" sunder="h_1.5rem w_1.5rem c_white" viewBox="0 0 20 20" fill="currentColor">
<path d="M11 3a1 1 0 10-2 0v1a1 1 0 102 0V3zM15.657 5.757a1 1 0 00-1.414-1.414l-.707.707a1 1 0 001.414 1.414l.707-.707zM18 10a1 1 0 01-1 1h-1a1 1 0 110-2h1a1 1 0 011 1zM5.05 6.464A1 1 0 106.464 5.05l-.707-.707a1 1 0 00-1.414 1.414l.707.707zM5 10a1 1 0 01-1 1H3a1 1 0 110-2h1a1 1 0 011 1zM8 16v-1h4v1a2 2 0 11-4 0zM12 14c.015-.34.208-.646.477-.859a4 4 0 10-4.954 0c.27.213.462.519.476.859h4.002z" />
</svg>
</div>
<div sunder="bg_rgb(white,20%) p_.5rem dis_flex jc_center ai_center brad_100% w_1.95rem h_1.95rem cur_pointer :h:bg_rgb(white,40%)">
<svg xmlns="http://www.w3.org/2000/svg" sunder="h_1.5rem w_1.5rem c_white" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M4 5a2 2 0 00-2 2v8a2 2 0 002 2h12a2 2 0 002-2V7a2 2 0 00-2-2h-1.586a1 1 0 01-.707-.293l-1.121-1.121A2 2 0 0011.172 3H8.828a2 2 0 00-1.414.586L6.293 4.707A1 1 0 015.586 5H4zm6 9a3 3 0 100-6 3 3 0 000 6z" clip-rule="evenodd" />
</svg>
</div>
</div>
</div>
<div sunder="position_absolute bottom_1% left_0 right_0">
<div sunder="h_5px brad_20px w_140px bg_rgb(white,80%) :h:bg_white mx_auto">
</div>
</div>
</div>
<div sunder="position_relative dis_flex fd_column w_.2rem h_fit-content top_6rem">
<div sunder="position_relative w_100% mt_1rem h_4rem bg_#fad7bd bsh_0`0`1px`grey z_2 top_8rem"></div>
</div>
</div>
<script src="./avyav.js"></script>
<script src="./vinyas.js"></script>
<script src="./sundar.js"></script>
<script>
run(document.querySelector("body"));
run(document.getElementById("loader").getElementsByTagName("*"));
window.onload = function(){
setTimeout(function(){
run();
document.getElementById("loader").children[0].setAttribute("sunder","position_absolute h_100% trndu_1s w_100% z_0 dis_grid pli_center $filter $opacity_0");
var sunder = document.getElementById("main").getAttribute("sunder").split(" ");
sunder.splice(sunder.indexOf("top_-100vh"),1);
document.getElementById("main").setAttribute("sunder",sunder.join(" "));
}
,500);
};
</script>
</body>
</html>