|
1 | 1 | <!DOCTYPE html> |
2 | 2 | <html lang="en"> |
3 | 3 | <head> |
| 4 | + <meta charset="UTF-8"> |
| 5 | + <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
4 | 6 | <title>Download Phoenix Code Editor</title> |
5 | | - <link rel="stylesheet" type="text/css" href="../thirdparty/fontawesome/css/all.min.css"> |
6 | 7 | <style> |
7 | | - /* Brackets Fonts */ |
8 | | - |
9 | | - /* Alternative weights */ |
10 | | - |
11 | | - :root { |
12 | | - --sansFontFamily: 'SourceSansPro', Helvetica, Arial, "Meiryo UI", "MS Pゴシック", "MS PGothic", sans-serif; |
13 | | - } |
14 | | - |
15 | | - /* SourceSansPro Regular */ |
16 | | - @font-face { |
17 | | - font-family: 'SourceSansPro'; |
18 | | - src: url('../styles/fonts/SourceSansPro/SourceSansPro-Regular.ttf'); |
19 | | - font-weight: normal; |
20 | | - font-style: normal; |
21 | | - } |
22 | | - |
23 | | - body { |
24 | | - background: #000A2E; |
| 8 | + body, html { |
| 9 | + margin: 0; |
| 10 | + padding: 0; |
| 11 | + height: 100%; |
25 | 12 | overflow: hidden; |
26 | | - display: flex; |
27 | | - justify-content: center; |
28 | | - align-items: center; |
29 | | - font-family: var(--sansFontFamily) ; |
30 | | - font-size: 22px; |
31 | | - } |
32 | | - |
33 | | - img { |
34 | | - vertical-align: middle; |
35 | | - border-style: none; |
36 | | - } |
37 | | - |
38 | | - #starsLeft { |
39 | | - position: absolute; |
40 | | - left: 0px; |
41 | | - top: 5%; |
42 | | - opacity: 0.7; |
43 | | - z-index: 2; |
44 | | - } |
45 | | - |
46 | | - #starsRight { |
47 | | - position: absolute; |
48 | | - z-index: 2; |
49 | | - right: 0px; |
50 | | - top: 5%; |
51 | | - opacity: 0.7; |
52 | | - } |
53 | | - |
54 | | - #mainDiv { |
55 | | - color: #ffffffef; |
56 | | - top: 35%; |
57 | | - left: 50%; |
58 | | - transform: translate(-50%, -50%); |
59 | | - position: absolute; |
60 | | - z-index: 8; |
61 | | - align-items: center; |
62 | | - justify-content: center; |
63 | | - display: flex!important; |
64 | | - flex-direction: column!important; |
65 | | - } |
66 | | - |
67 | | - #logo { |
68 | | - height: 35vh; |
69 | | - vertical-align: middle; |
70 | | - border-style: none; |
71 | | - box-sizing: border-box; |
72 | | - |
73 | | - } |
74 | | - |
75 | | - #MainText { |
76 | | - color: #ffffffef; |
77 | | - text-align: center!important; |
78 | | - } |
79 | | - |
80 | | - h1 { |
81 | | - font-size: 2.25rem; |
82 | | - font-weight: 600; |
83 | | - line-height: 1.2; |
84 | | - margin-top: 0; |
85 | 13 | } |
86 | | - |
87 | | - .primary-button { |
88 | | - width: 350px; |
89 | | - height: 60px; |
90 | | - background: linear-gradient(90deg, #FAAA47 0%, #FA1801 100%); |
91 | | - font-family: var(--sansFontFamily) ; |
92 | | - background-size: 200% 200%; |
93 | | - border-radius: 5px; |
94 | | - border: none; |
95 | | - outline: none; |
96 | | - color: #ffffffef; |
97 | | - cursor: pointer; |
98 | | - box-shadow: 0 0 0 #FAAA47; |
99 | | - transition:2s background-color; |
100 | | - animation: Animation 2s ease infinite; |
101 | | - } |
102 | | - |
103 | | - @keyframes Animation { |
104 | | - 0%{background-position:0% 0%} |
105 | | - 50%{background-position:100% 0%} |
106 | | - 100%{background-position:0% 0%} |
107 | | - } |
108 | | - |
109 | | - |
110 | | - .clouds { |
111 | | - position: absolute; |
112 | | - bottom: 0; |
113 | | - width: 101%; |
114 | | - } |
115 | | - |
116 | | - #cloudLeftTop { |
117 | | - position: absolute; |
118 | | - top: -10%; |
119 | | - left: -20px; |
120 | | - z-index: 1; |
121 | | - } |
122 | | - |
123 | | - #cloudBottomRight { |
124 | | - position: absolute; |
125 | | - bottom: 10%; |
126 | | - right: -20px; |
127 | | - z-index: 1; |
128 | | - } |
129 | | - |
130 | | - .night { |
131 | | - position: relative; |
| 14 | + iframe { |
132 | 15 | width: 100%; |
133 | 16 | height: 100%; |
134 | | - transform: rotateZ(45deg); |
135 | | - } |
136 | | - |
137 | | - .shooting_star { |
138 | | - position: absolute; |
139 | | - left: 50%; |
140 | | - top: 50%; |
141 | | - width: 100px; |
142 | | - height: 1px; |
143 | | - background: linear-gradient(-45deg, rgba(95, 145, 255, 1), rgba(0, 0, 255, 0)); |
144 | | - border-radius: 999px; |
145 | | - filter: drop-shadow(0 0 6px rgba(105, 155, 255, 1)); |
146 | | - animation: |
147 | | - tail 3000ms ease-in-out , |
148 | | - shooting 3000ms ease-in-out ; |
149 | | - animation-fill-mode: forwards; |
150 | | - } |
151 | | - |
152 | | - @keyframes tail { |
153 | | - 0% { |
154 | | - width: 0; |
155 | | - } |
156 | | - |
157 | | - 30% { |
158 | | - width: 100px; |
159 | | - } |
160 | | - |
161 | | - 100% { |
162 | | - width: 0; |
163 | | - } |
164 | | - } |
165 | | - |
166 | | - @keyframes shooting { |
167 | | - 0% { |
168 | | - transform: translateX(0); |
169 | | - } |
170 | | - |
171 | | - 100% { |
172 | | - transform: translateX(300px); |
173 | | - } |
| 17 | + border: none; |
174 | 18 | } |
175 | | - |
176 | 19 | </style> |
177 | | - <meta name="robots" content="noindex"> |
178 | 20 | </head> |
179 | | - |
180 | 21 | <body> |
181 | | -<img id="starsLeft" src="../assets/phoenix-splash/images/stars-left.svg"/> |
182 | | -<div id="mainDiv"> |
183 | | - <img id="logo" src="../assets/phoenix-splash/images/phoenix-logo.svg"/> |
184 | | - <div id="MainText"> |
185 | | - <h1>Phoenix Code Editor</h1> |
186 | | - <span>A text editor designed to make coding as intuitive and fun as playing a video game - specially |
187 | | - crafted for web developers, designers, and students.</span> |
188 | | - <br><br> |
189 | | - <a href="https://phcode.io"> |
190 | | - <button id="load-status-display-btn" class="primary-button" style="font-size: x-large"> |
191 | | - <i class="fa-solid fa-download"></i> Download from phcode.io</button> |
192 | | - </a> |
193 | | - </div> |
194 | | -</div> |
195 | | -<img id="cloudLeftTop" src="../assets/phoenix-splash/images/vector-top-left.png"/> |
196 | | -<img id="cloudBottomRight" src="../assets/phoenix-splash/images/vector-bottom-right.png"/> |
197 | | -<img id="starsRight" src="../assets/phoenix-splash/images/stars-right.svg"/> |
198 | | -<img class="clouds" style="z-index: 3; transform: translate(0px, -1.55909px);" src="../assets/phoenix-splash/images/cloud1.svg"/> |
199 | | -<img class="clouds" style="z-index: 6; transform: translate(0px, -2.33863px);" src="../assets/phoenix-splash/images/cloud2.svg"/> |
200 | | -<img class="clouds" style="z-index: 5; transform: translate(0px, -3.89772px);" src="../assets/phoenix-splash/images/cloud3.svg"/> |
201 | | -<img class="clouds" style="z-index: 6; transform: translate(0px, -3.89772px);" src="../assets/phoenix-splash/images/cloud4.svg"/> |
202 | | -<div class="night"> |
203 | | - <div class="shooting_star"> |
204 | | - <div class="shooting_star"/> |
205 | | - </div> |
206 | | -</div> |
207 | | -<div class="night"> |
208 | | - <div class="shooting_star"> |
209 | | - <div class="shooting_star"/> |
210 | | - </div> |
211 | | -</div> |
212 | | -<div class="night"> |
213 | | - <div class="shooting_star"> |
214 | | - <div class="shooting_star"/> |
215 | | - </div> |
216 | | -</div> |
| 22 | +<iframe src="https://phcode.io" allowfullscreen></iframe> |
217 | 23 | </body> |
218 | 24 | </html> |
0 commit comments