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

new responsive webdesign #2024

Closed
wants to merge 10 commits into from
Closed

new responsive webdesign #2024

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
3f721fb
fix tests
Huxinator Dec 8, 2024
7dac3e5
update github actions/cache to v4
g5bot Dec 11, 2024
d81f1f3
neue Startseite - Responsive
Treknerd Jan 31, 2025
bff2716
Merge branch 'dev' of https://github.com/Treknerd/core into dev
Treknerd Jan 31, 2025
18daf2e
introduce field type effect NFS_MALFUNCTION_COOLDOWN
g5bot Feb 5, 2025
3eb706c
fix show signatures
g5bot Feb 5, 2025
e368386
Merge branch 'dev' of https://github.com/st-universe/core into dev
Treknerd Feb 5, 2025
4c947b8
Fix colours of status and button to maindesk
Treknerd Feb 5, 2025
0a17997
Fix Status colours and Maindesk button
Treknerd Feb 6, 2025
1386fda
Merge branch 'st-universe:dev' into dev
Treknerd Feb 6, 2025
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
524 changes: 524 additions & 0 deletions src/Public/static/css/stuweb.css
View file
Open in desktop

Large diffs are not rendered by default.

66 changes: 49 additions & 17 deletions src/Public/static/js/main.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -214,22 +214,15 @@ function regVarCheck(vari, value) {
return varcheck;
}
function updateMobileValue() {
var countryCode = document.getElementById("countryCodeSelect").value;
var mobileNumber = document.getElementById("mobile").value;

mobileNumber = mobileNumber.replace(/\s+/g, "");

var prefixesToRemove = ["+49", "+43", "+41"];
for (var i = 0; i < prefixesToRemove.length; i++) {
if (mobileNumber.startsWith(prefixesToRemove[i])) {
mobileNumber = mobileNumber.substring(prefixesToRemove[i].length);
break;
}
}
mobileNumber = mobileNumber.replace(/^0+/, "");
const countryCode = document.getElementById("countryCodeSelect").value;
const mobileNumber = document.getElementById("mobile").value.trim();
const combinedMobileValue = document.getElementById("combinedMobileValue");

var combinedValue = countryCode + mobileNumber;
document.getElementById("combinedMobileValue").textContent = combinedValue;
if (mobileNumber) {
combinedMobileValue.textContent = `${countryCode} ${mobileNumber}`;
} else {
combinedMobileValue.textContent = "";
}
}

document.addEventListener("DOMContentLoaded", function () {
Expand All @@ -243,9 +236,9 @@ document.addEventListener("DOMContentLoaded", function () {
(currentDate >= startHoliday && currentDate <= new Date(year, 11, 31)) ||
(currentDate >= new Date(year + 1, 0, 1) && currentDate <= endHoliday)
) {
bannerImg.src = "/assets/main/banner_x_mas.png";
bannerImg.src = "/assets/main/banner_x_mas.PNG";
} else {
bannerImg.src = "/assets/main/banner.png";
bannerImg.src = "/assets/main/banner.PNG";
}
});

Expand All @@ -259,3 +252,42 @@ function debounce(func, wait) {
timeout = setTimeout(() => func.apply(context, args), wait);
};
}


document.querySelectorAll('.btn-header-link').forEach((button) => {
button.addEventListener('click', function (e) {
e.preventDefault(); // Verhindert das Standardverhalten des Links

const targetSelector = button.getAttribute('data-target');
const target = document.querySelector(targetSelector);

if (target) {
// Toggle the "show" class on the target element
if (target.classList.contains('show')) {
target.classList.remove('show');
button.classList.add('collapsed');
button.setAttribute('aria-expanded', 'false');
} else {
// Schließe andere geöffnete Panels (falls data-parent definiert ist)
const parentSelector = target.getAttribute('data-parent');
if (parentSelector) {
document.querySelectorAll(`${parentSelector} .collapse.show`).forEach((openCollapse) => {
openCollapse.classList.remove('show');
const relatedButton = document.querySelector(
`[data-target="#${openCollapse.id}"]`
);
if (relatedButton) {
relatedButton.classList.add('collapsed');
relatedButton.setAttribute('aria-expanded', 'false');
}
});
}
// Öffne das aktuelle Panel
target.classList.add('show');
button.classList.remove('collapsed');
button.setAttribute('aria-expanded', 'true');
}
}
});
});

228 changes: 216 additions & 12 deletions src/html/index/help.twig
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,17 +1,221 @@
{% extends "html/index/indexDefaults.twig" %}

{% block body %}
<div style="width: 100%;">
Du brauchst Hilfe? Keine Panik.
<br /><br />
Es gibt verschiedene Wege, Hilfe zu einem spezifischen Problem zu bekommen. Erster Anlaufpunkt für Fragen
und
Informationen ist in jedem Fall das <a href="{{ FORUM }}" target="_blank"
style="text-decoration: underline;">Forum</a>
und die
<a href="{{ WIKI }}" target="_blank" style="text-decoration: underline;">Wiki</a> (im
Aufbau), sowie auch der <a href="{{ CHAT }}" target="_blank"
style="text-decoration: underline;">Discord-Chat</a>.<br />
Dort gibt es neben Einsteigerinfos und Datenbanken auch nützliche Tipps rund um den Alltag als Siedler.
</div>
<div class="mainbar_box_header mt-4">
<small>Erste Hilfe - die Star Trek Universe Community</small>
</div>

<div class="mainbar_box_content"><div class="pt-3 pl-3 pr-3 text-center">
<h3 class="mb-0 text-center">Du brauchst Hilfe? Keine Panik.</h3>
</div>

<div class="p-3 d-flex text-center">
<span style="display: inline;">
Es gibt verschiedene Wege, Hilfe zu einem spezifischen Problem zu bekommen. Erster Anlaufpunkt für Fragen
und Informationen ist in jedem Fall das <a href="{{ FORUM }}" target="_blank">Forum</a> und die <a href="{{ WIKI }}" target="_blank">Wiki</a> (im Aufbau), sowie auch der <a href="{{ CHAT }}" target="_blank">Discord-Chat</a>. Dort gibt es neben Einsteigerinfos und Datenbanken auch nützliche Tipps rund um den Alltag als Siedler in Star Trek Universe.
</span>
</div>

<div class="pt-4 pl-3 pr-3 text-center">
<h3 class="mb-0 text-center">Ingame - Step by Step Tutorials</h3>
</div>
<div class="p-3 d-flex text-center no-wrap">
Neben der Community von Star Trek Universe wird dir im Spiel auch direkt geholfen. Mithilfe eines Padds im jeweiligen Fraktionsdesign bekommst du direkt beim spielen die ersten nützlichen Tipps an die Hand.
</div>

<div class="ml-1 mr-1 d-none d-md-flex">
<div class="row pr-3 pl-3 pt-3 pb-2">

<div class="col-3 gallery">
<img class="w-100" src="/assets/main/stu-tutorial-maindesk.jpg" alt="Screenshot Maindesk Star Trek Stuniverse" data-toggle="modal" data-target="#pic1Modal">
</div>
<div class="modal" id="pic1Modal" tabindex="-1" aria-labelledby="pic1ModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" style="max-width: 60%;">
<div class="modal-content text-center">
<img class="img-fluid" src="/assets/main/stu-tutorial-maindesk.jpg" alt="Screenshot des Tutorial vom Maindesk von Star Trek Stuniverse">
<div class="p-3">
Tutorial vom Startbildschirm nach dem Login. Auch Maindesk genannt.
</div>
<div class="modal-footer justify-content-between">
<button type="button" class="btn-stu" data-dismiss="modal" data-toggle="modal" data-target="#pic4Modal"><i class="fa-solid fa-left-long"></i></button>
<button type="button" class="btn-stu" data-dismiss="modal">Schliessen</button>
<button type="button" class="btn-stu" data-dismiss="modal" data-toggle="modal" data-target="#pic2Modal"><i class="fa-solid fa-right-long"></i></button>
</div>
</div>
</div>
</div>

<div class="col-3 gallery">
<img class="w-100" src="/assets/main/stu-tutorial-kolonie.jpg" alt="Screenshot Ansicht Kolonie von Star Trek Stuniverse" data-toggle="modal" data-target="#pic2Modal">
</div>
<div class="modal" id="pic2Modal" tabindex="-1" aria-labelledby="pic2ModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" style="max-width: 60%;">
<div class="modal-content text-center">
<img class="img-fluid" src="/assets/main/stu-tutorial-kolonie.jpg" alt="Screenshot Tutorialansicht Kolonie von Star Trek Stuniverse">
<div class="p-3">
Tutorial welches Schritt für Schritt dir alle Optionen und Möglichkeiten auf deinen Kolonien erklärt.
</div>
<div class="modal-footer justify-content-between">
<button type="button" class="btn-stu" data-dismiss="modal" data-toggle="modal" data-target="#pic1Modal"><i class="fa-solid fa-left-long"></i></button>
<button type="button" class="btn-stu" data-dismiss="modal">Schliessen</button>
<button type="button" class="btn-stu" data-dismiss="modal" data-toggle="modal" data-target="#pic3Modal"><i class="fa-solid fa-right-long"></i></button>
</div>
</div>
</div>
</div>

<div class="col-3 gallery">
<img class="w-100" src="/assets/main/stu-tutorial-schiffe-übersicht.jpg" alt="Screenshot Ansicht Schiffs-Hud von Star Trek Stuniverse" data-toggle="modal" data-target="#pic3Modal">
</div>
<div class="modal" id="pic3Modal" tabindex="-1" aria-labelledby="pic3ModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" style="max-width: 60%;">
<div class="modal-content text-center">
<img class="img-fluid" src="/assets/main/stu-tutorial-schiffe-übersicht.jpg" alt="Screenshot Tutorialansicht Flottenübersicht von Star Trek Stuniverse">
<div class="p-3">
Tutorial der Schiffs- bzw- Flottenübersicht. Alle wichtigen Daten auf einen Blick.
</div>
<div class="modal-footer justify-content-between">
<button type="button" class="btn-stu" data-dismiss="modal" data-toggle="modal" data-target="#pic2Modal"><i class="fa-solid fa-left-long"></i></button>
<button type="button" class="btn-stu" data-dismiss="modal">Schliessen</button>
<button type="button" class="btn-stu" data-dismiss="modal" data-toggle="modal" data-target="#pic4Modal"><i class="fa-solid fa-right-long"></i></button>
</div>
</div>
</div>
</div>

<div class="col-3 gallery">
<img class="w-100" src="/assets/main/stu-tutorial-forschung.jpg" alt="Screenshot Tutorialansicht der Forschung in Star Trek Stuniverse" data-toggle="modal" data-target="#pic4Modal">
</div>
<div class="modal" id="pic4Modal" tabindex="-1" aria-labelledby="pic4ModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" style="max-width: 60%;">
<div class="modal-content text-center">
<img class="img-fluid" src="/assets/main/stu-tutorial-forschung.jpg" alt="Screenshot Tutorialansicht der Forschung in Star Trek Stuniverse">
<div class="p-3">
Kleines Tutorial um sich im Forschungsbaum von Stuniverse zurecht zu finden.
</div>
<div class="modal-footer justify-content-between">
<button type="button" class="btn-stu" data-dismiss="modal" data-toggle="modal" data-target="#pic3Modal"><i class="fa-solid fa-left-long"></i></button>
<button type="button" class="btn-stu" data-dismiss="modal">Schliessen</button>
<button type="button" class="btn-stu" data-dismiss="modal" data-toggle="modal" data-target="#pic1Modal"><i class="fa-solid fa-right-long"></i></button>
</div>
</div>
</div>
</div>
</div>
</div>

<div class="pr-3 pl-3">
<div class="registration_box_content text-center mt-4">
<p>Neugierig geworden?</p>
<div class="pb-2">
<a href="/index.php?SHOW_REGISTRATION=1" class="btn-stu btn-stu-w" role="button">
Jetzt kostenlos registrieren und spielen!
</a>
</div>
</div>

<div class="pt-5 pl-3 pr-3 pb-3 text-center">
<h3 class="text-center">Fragen & Antworten zu Star Trek Universe</h3>
</div>

<div id="main">
<div class="accordion pb-3" id="faq">

<div class="card">
<div class="card-header" id="faqhead1">
<a href="#" class="btn btn-header-link collapsed" data-target="#faq1" aria-expanded="false" aria-controls="faq1">
Ist Star Trek Universe wirklich kostenlos und ohne Pay to Win?
</a>
</div>
<div id="faq1" class="collapse fade" aria-labelledby="faqhead1" data-parent="#faq">
<div class="card-body">
Ja, Stuniverse ist komplett kostenlos. Es handelt sich um ein Fanprojekt und nach den Regelungen von Paramount Pictures dürfen solche Projekte nur Non-Profit sein. Daher wird es nie Werbung oder Premium im Spiel geben.
</div>
</div>
</div>

<div class="card">
<div class="card-header" id="faqhead2">
<a href="#" class="btn btn-header-link collapsed" data-target="#faq2" aria-expanded="false" aria-controls="faq2">
Warum benötige ich zum registrieren eine Handynummer?
</a>
</div>
<div id="faq2" class="collapse fade" aria-labelledby="faqhead2" data-parent="#faq">
<div class="card-body">
Die Registrierung mit Handynummer soll in Zeiten von VPN's bei Star Trek Universe das Multiaccounting erschweren. Natürlich kann man es nie ganz unterbinden doch wir haben die Erfahrung gemacht, dass es recht effektiv ist. Für mehr wird die Handynummer nicht genutzt.
</div>
</div>
</div>

<div class="card">
<div class="card-header" id="faqhead3">
<a href="#" class="btn btn-header-link collapsed" data-target="#faq3" aria-expanded="false" aria-controls="faq3">
Was bedeutet rundenbasiertes Star Trek Strategiespiel voller Rollenspielelementen?
</a>
</div>
<div id="faq3" class="collapse fade" aria-labelledby="faqhead3" data-parent="#faq">
<div class="card-body">
Rundenbasiert bedeutet, dass Star Trek Universe in Runden abläuft. Jeder Tag hat 5 Runden, auch Ticks genannt. Diese sind 12:00, 15:00, 18:00, 21:00 und 24:00 Uhr.
<br><br>
Mit jedem Rundenwechsel werden bestimmte Elemente neu berechnet. Zum Beispiel die Energie deiner Schiffe werden aufgefüllt und die produzierten Ressourcen auf deinen Kolonien aktualisiert.
</div>
</div>
</div>

<div class="card">
<div class="card-header" id="faqhead4">
<a href="#" class="btn btn-header-link collapsed" data-target="#faq4" aria-expanded="false" aria-controls="faq4">
Was sind NPC Accounts und was machen diese?
</a>
</div>
<div id="faq4" class="collapse fade" aria-labelledby="faqhead4" data-parent="#faq">
<div class="card-body">
NPC Accounts sind Non-Playable Character. Im Spiel Star Trek Universe gibt es zwei verschiedene Arten von NPC Accounts. Einmal die Script-NPC's, wie die Kazon. Dieser NPC fliegt umher und greift Sternenbasen und Schiffe von Spielern an um diese zu plündern.
<br><br>
Dann gibt es aber noch die NPC's die von einem Menschen gespielt werden. Die sogenannten Großmächte. In Star Trek Universe sind das die Ferengi-Allianz, das Romulanische Sternenimperium, die Cardassianische Union, das Klingonische Reich und die Vereinigte Föderation der Planeten.
<br><br>
Diese NPC's interagieren mit den Spielern. Du kannst mit Ihnen Rollenspiel (RPG) betreiben. Aber anders als bei Spielern geht es diesen NPC's nicht darum zu gewinnen. Sie sind dafür da die Spieler zu unterhalten und kleine aber auch große Geschichten auszuspielen an denen du dich beteiligen kannst.
<br><br>
Aber wundere dich nicht wenn du als Romulanische Fraktion beim Cardassianer (NPC) kritisch beäugt wirst wenn du was von ihm willst. Die NPC's verhalten sich wie ihre Pendants in Star Trek.
</div>
</div>
</div>

<div class="card">
<div class="card-header" id="faqhead5">
<a href="#" class="btn btn-header-link collapsed" data-target="#faq5" aria-expanded="false" aria-controls="faq5">
Wer steckt hinter Star Trek Universe?
</a>
</div>
<div id="faq5" class="collapse fade" aria-labelledby="faqhead5" data-parent="#faq">
<div class="card-body">
Dieses Onlinespiel ist ein Fanprojekt was seit Jahrzehnten immer weiterentwickelt wird. Mittlerweile befindet sich Stuniverse in der dritten Version und wird fortwährend weiterentwickelt. Auch dank den Ideen der Community.
<br><br>
Betrieben wird das Spiel von Hux. Er verwaltet nicht nur als Administrator das Online-Strategiespiel sondern programmiert auch mit an neuen Features und Bugsfixes. Beim Coding helfen ihm g5bot und Treknerd.
<br><br>
Neben den drei Programmierern gehört auch VI0S dazu. Dieser zeichnet sich verantwortlich für die Ingame-Grafiken, wie z.B. dem Design der Schiffe der verschiedenen Fraktion und den Icons. Dazu kommen noch Spieler welche das Wiki von Stuniverse pflegen und aktualisieren.
</div>
</div>
</div>

<div class="card">
<div class="card-header" id="faqhead6">
<a href="#" class="btn btn-header-link collapsed" data-target="#faq6" aria-expanded="false" aria-controls="faq6">
Kann man euch und euer Spiel unterstützen?
</a>
</div>
<div id="faq6" class="collapse" aria-labelledby="faqhead6" data-parent="#faq">
<div class="card-body">
Das kannst du. Empfehle uns deinen Freunden und Bekannten weiter. Poste vielleicht auf Social Media einfach mal was zu Star Trek Universe, inkl. Verlinkung. Sei kreativ!
<br><br>
Spenden oder irgendwelche Gelder in irgendeiner Form können und werden wir für Stuniverse nicht annehmen da es gegen die Fan-Guidelines von Paramount verstößt. Mehr Informationen bekommst du im Discord.
</div>
</div>
</div>

</div>
</div>
</div>

{% endblock %}
Loading