Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Improved CSS and HTML #2

Merged
merged 1 commit into from
Sep 25, 2024
Merged

Improved CSS and HTML #2

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
39 changes: 2 additions & 37 deletions events.js
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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);
}