Skip to content

Commit

Permalink
Merge pull request #2 from Arne-Zillhardt/better_styling
Browse files Browse the repository at this point in the history 
Improved CSS and HTML
  • Loading branch information
@Kiyotoko
Kiyotoko authored Sep 25, 2024
2 parents f744b19 + 44f50c3 commit 499b027
Show file tree
Hide file tree
Showing 3 changed files with 200 additions and 84 deletions.
39 changes: 2 additions & 37 deletions events.js
View file
Original file line number Diff line number Diff line change
@@ -1,39 +1,4 @@
function copy() {
navigator.clipboard.writeText('xmlns:xsi="http://www.w3.org/2001/XMLSchema" xsi:schemaLocation="https://kiyotoko.github.io/eaw-xml-schema/schemas/%SCHEMA% https://kiyotoko.github.io/eaw-xml-schema/schemas/%SCHEMA%.xsd"')
}

function styleAll() {
const elements = document.getElementsByClassName("code")
console.log("Found ", elements)
for (let element of elements) {
style(element)
}
}

function style(element) {
let text = element.innerHTML
let build = ""
let i = 0
while (i < text.length) {
let char = text.charAt(i)
if (char === "\"") {
console.log("Found string")
build += '<span class="string">'
build += char
while (i < text.length) {
char = text.charAt(++i)
if (char === "\"") {
build += '</span>'
break
}
build += char
}
} else if (char !== ' ' || char !== '=') {

}
build += char
i++
}

element.innerHTML = build
}
document.getElementById("copy").innerText = "Copied!"
}
100 changes: 72 additions & 28 deletions index.html
View file
Original file line number Diff line number Diff line change
@@ -1,38 +1,82 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title>EaW XML Schemas</title>
<link rel="stylesheet" href="style.css" type="text/css">
<meta charset="UTF-8">
</head>
<body>
<main>
<h1 class="title">EaW XML Schemas</h1>

<head>
<title>EaW XML Schemas</title>
<link rel="stylesheet" href="style.css" type="text/css" />
<script src="events.js"></script>
<meta charset="UTF-8" />
</head>

<body>
<main>
<h1>EaW XML Schemas</h1>

<div class="part">
<h2>Idea</h2>
<p>XML schemas are used to define and document elements. This project contains multiple schemas for different xml data structures in the game Star Wars: Empire at War. These should help new people to find their way around. As there is not much information easily available online outside of the wiki, these can be particularly helpful for elements that are not self-explanatory.</p>
<p>
XML schemas are used to define and document elements. This project
contains multiple schemas for different xml data structures in the
game Star Wars: Empire at War. These should help new people to find
their way around. As there is not much information easily available
online outside of the wiki, these can be particularly helpful for
elements that are not self-explanatory.
</p>
</div>

<div class="part">
<h2>Usage</h2>
<p>At the root of your element, add the following attributes:</p>
<div class="wrapper">
<code class="code">xmlns:xsi="http://www.w3.org/2001/XMLSchema" xsi:schemaLocation="https://kiyotoko.github.io/eaw-xml-schema/schemas/%SCHEMA% https://kiyotoko.github.io/eaw-xml-schema/schemas/%SCHEMA%.xsd"</code>
<div class="code-box">
<button id="copy" onclick="copy()">Copy text</button>
<div class="code-wrappper">
<p class="code">
xmlns:xsi="http://www.w3.org/2001/XMLSchema"
xsi:schemaLocation="https://kiyotoko.github.io/eaw-xml-schema/schemas/%SCHEMA%
https://kiyotoko.github.io/eaw-xml-schema/schemas/%SCHEMA%.xsd"
</p>
</div>
</div>
<script src="events.js">
console.log("Called!")
styleAll()
</script>
<button onclick="copy()">Copy text</button>
<p>Note: Replace <code>%SCHEMA%</code> with the name of the schema you need (see below for a selection).</p>
<p style="color: rgb(188, 84, 84);">
Note: Replace <code class="code-paragraph">%SCHEMA%</code> with the name of the schema you
need (see below for a selection).
</p>
</div>

<div class="part">
<h2>List of Schemas</h2>
<p>This is a list of all xml schemas that currently exist. More schemas will be added in the future.</p>
<p>
This is a list of all xml schemas that currently exist. More schemas
will be added in the future.
</p>
<ul>
<li><a href="https://kiyotoko.github.io/eaw-xml-schema/schemas/ground.xsd">Ground</a></li>
<li><a href="https://kiyotoko.github.io/eaw-xml-schema/schemas/hardpoints.xsd">Hardpoints</a></li>
<li><a href="https://kiyotoko.github.io/eaw-xml-schema/schemas/planets.xsd">Planets</a></li>
<li><a href="https://kiyotoko.github.io/eaw-xml-schema/schemas/projectiles.xsd">Projectiles</a></li>
<li><a href="https://kiyotoko.github.io/eaw-xml-schema/schemas/space.xsd">Space</a></li>
<li><a href="https://kiyotoko.github.io/eaw-xml-schema/schemas/starbases.xsd">Starbases</a></li>
<li><a href="https://kiyotoko.github.io/eaw-xml-schema/schemas/trades.xsd">Trades</a></li>
<li><a href="https://kiyotoko.github.io/eaw-xml-schema/schemas/upgrades.xsd">Upgrades</a></li>
<li>
<a href="https://kiyotoko.github.io/eaw-xml-schema/schemas/ground.xsd" target="_blank">Ground</a>
</li>
<li>
<a href="https://kiyotoko.github.io/eaw-xml-schema/schemas/hardpoints.xsd" target="_blank">Hardpoints</a>
</li>
<li>
<a href="https://kiyotoko.github.io/eaw-xml-schema/schemas/planets.xsd" target="_blank">Planets</a>
</li>
<li>
<a href="https://kiyotoko.github.io/eaw-xml-schema/schemas/projectiles.xsd" target="_blank">Projectiles</a>
</li>
<li>
<a href="https://kiyotoko.github.io/eaw-xml-schema/schemas/space.xsd" target="_blank">Space</a>
</li>
<li>
<a href="https://kiyotoko.github.io/eaw-xml-schema/schemas/starbases.xsd" target="_blank">Starbases</a>
</li>
<li>
<a href="https://kiyotoko.github.io/eaw-xml-schema/schemas/trades.xsd" target="_blank">Trades</a>
</li>
<li>
<a href="https://kiyotoko.github.io/eaw-xml-schema/schemas/upgrades.xsd" target="_blank">Upgrades</a>
</li>
</ul>
</main>
</body>
</div>
</main>
</body>

</html>
145 changes: 126 additions & 19 deletions style.css
View file
Original file line number Diff line number Diff line change
@@ -1,36 +1,143 @@
:root {
--background-color: #1d2a35;
--code-box-background-color: #38444d;
--code-box-background-color-hover: #3c3c3c;
--code-background-color: rgb(21, 32, 43);
--text-color: #ddd;
--text-color-hover: #7d7c7c;
--code-text-color: rgb(218, 186, 83);
--button-text-color: white;

text-rendering: optimizeLegibility;
}

body {
font-family: Helvetica, serif;
font-size: 1.2em;
color: var(--text-color);
background-color: var(--background-color);
}

body::-webkit-scrollbar {
display: none;
}

main {
width: 800px;
margin: 30px calc(50% - 400px) 30px calc(50% - 400px);
display: flex;
flex-direction: column;
flex-flow: center;
align-items: center;
}

.keyword {
color: blue
h1 {
border-bottom: 4px solid rgba(255, 255, 255, 0.87);
text-align: center;
width: 50vw;
transition: font-size 0.5s;
}

.string {
color: green;
h2 {
border-bottom: 2px solid var(--text-color);
width: 20vw;
transition: font-size 0.5s;
}

.wrapper {
color: white;
background-color: #666666;
h1:hover {
font-size: 2.2em;
}

h2:hover {
font-size: 1.7em;
}

a {
color: var(--text-color);
text-decoration: none;
transition: 0.5s;
}

a:hover {
font-size: 1.2em;
color: var(--text-color-hover);
border-bottom: 2px solid var(--text-color-hover);
}

button {
font-size: 0.9em;
border: none;
border-radius: 5px;
background-color: rgba(0, 0, 0, 0);
color: var(--button-text-color);
cursor: pointer;
transition: 0.5s;
margin-top: -1vh;
margin-bottom: -1vh;
margin-left: -0.5vh;
margin-right: -0.5vh;
padding-top: 1vh;
padding-bottom: 1vh;
padding-left: 0.5vh;
padding-right: 0.5vh;
border-radius: 5px;
}

button:hover {
box-shadow: 10px 10px 30px rgba(27, 27, 27, 0.7);
}

button:active {
box-shadow: none;
transition: 0s;
}

.part {
width: 60vw;
}

.code-box {
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
row-gap: 1vh;
padding-top: 1vh;
padding-left: 1vw;
padding-right: 1vw;
padding-bottom: 1vw;

box-shadow: 10px 10px 30px rgba(27, 27, 27, 0.5);
border-radius: 5px;
border-radius: 5px;

color: var(--text-color);
background-color: var(--code-box-background-color);
width: 50vw;
transition: background-color 0.5s;
}

.code-box:hover {
background-color: var(--code-box-background-color-hover);
}

.code-wrappper {
color: var(--code-text-color);
background-color: var(--code-background-color);
padding: 8px;
border-radius: 10px;
z-index: 1;
}

h1 {
text-align: center;
width: 80%;
margin-left: 10%;
margin-bottom: 3cm;
border-bottom: 4px solid black;
.code {
-webkit-user-select: all;
user-select: all;
margin: 0;
padding: 0;
}

h2 {
border-bottom: 2px solid black;
width: 70%;
.code-paragraph {
-webkit-user-select: all;
user-select: all;
margin: 0;
padding: 0;
background-color: var(--code-background-color);
color: var(--code-text-color);
}

0 comments on commit 499b027

Please sign in to comment.