YandolsZX
/
RMT-Clock-PHP
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

[WIP] Prototype Layout for RMT site

Browse Source
master
YandolsZX 3 years ago
parent bbc87e3fa6
commit e34bb969c2
2 changed files with 117 additions and 7 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 35
      index.php
  2. 89
      style.css

35
index.php
Unescape View File

@ -1,9 +1,13 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Rocknarok Multiverse Time Clock</title> <title>Rocknarok Multiverse Time Clock</title>
<link rel="stylesheet" href="style.css" />
<script type= "text/javascript" src="jquery-3.6.0.min.js"> </script> <script type= "text/javascript" src="jquery-3.6.0.min.js"> </script>
<section>
<!-- Request Rocknarok Universe datetime from API --> <!-- Request Rocknarok Universe datetime from API -->
<script type= "text/javascript"> <script type= "text/javascript">
$(document).ready(function() { $(document).ready(function() {
@ -60,18 +64,35 @@ $(document).ready(function() {
update(); update();
}); });
</script> </script>
</section>
</head> </head>
<body> <body>
<h1>Rocknarok Multiverse Time Clock</h1> <div class="mainlayout container">
<p>Rocknarok Universe Current time:<p> <header class="item">
<div id="ruclock"> </div> <br/> <h1>Rocknarok Multiverse Time Clock</h1>
</header>
<p>St. Sky Universe Current time:</p> <main class="item">
<div id="ssuclock"> </div> <br/> <p>Rocknarok Universe Current time:<p>
<div id="ruclock"> </div> <br/>
<p>Kocharion Universe Current time:</p> <p>St. Sky Universe Current time:</p>
<div id="kuclock"> </div> <br/> <div id="ssuclock"> </div> <br/>
<p>Kocharion Universe Current time:</p>
<div id="kuclock"> </div> <br/>
</main>
<footer class="item">
<ul class="bottom">
<li><span>&copy Yandols Zeon X</span></li>
<li>The clocks displayed on this page is content part of the Rocknarok Multiverse, which you can check out <a href="https://lore.yandols.xyz">here</a>.</li>
<li><a href="https://git.yandols.xyz/YandolsZX/RMT-Clock-PHP">Clock Project Repo</a></li>
</ul>
</footer>
</div>
</body> </body>
</html> </html>

89
style.css
Unescape View File

@ -0,0 +1,89 @@
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400&display=swap");
* {
box-sizing: border-box;
font: inherit;
color: inherit;
}
/* All */
body {
font-family: "Poppins", sans-serif;
color: #333;
background-color: snow;
margin: 0 auto;
/* max-width: 1000px; */
}
/* Header */
header {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
h1 {
font-weight: 800;
font-size: 3em;
padding: 18px;
}
/* Footer */
footer {
display: flex;
flex-direction: column;
align-items: center;
flex-grow: 1;
text-align: center;
}
footer .bottom {
margin: 2em 0;
padding: 0;
text-align: center;
}
footer .bottom li {
border-left: solid 1px rgba(144, 144, 144, 0.25);
display: inline-block;
list-style: none;
margin-left: 1.5em;
padding-left: 1.5em;
}
footer .bottom li:first-child {
border-left: 0;
margin-left: 0;
padding-left: 0;
}
/* Othe Style Elements */
ul {
padding-left: 1.5rem;
}
.item {
padding: 8px;
background-color: white;
border: 4px solid tomato;
border-radius: 6px;
box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.25);
}
.height-50 {
height: 50vh;
}
/* Main Layout Container */
.mainlayout.container {
display: grid;
height: 100vh;
grid-template-rows: auto 1fr auto;
}
Write Preview
Loading…
Cancel
Save