131 lines
4.8 KiB
HTML
131 lines
4.8 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="de">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>MercyV Bike</title>
|
|
<link rel="stylesheet" href="style.css">
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.7.14/vue.min.js"></script>
|
|
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
|
</head>
|
|
<body>
|
|
|
|
<div id="app" v-show="show" style="display:none;">
|
|
|
|
<!-- ══════════════════ HAUPT-PANEL ══════════════════ -->
|
|
<div class="mb-backdrop" v-show="!showAdmin">
|
|
<div class="mb-modal">
|
|
|
|
<!-- Header -->
|
|
<div class="mb-header">
|
|
<div class="mb-header-left">
|
|
<div class="mb-header-icon">
|
|
<i class="fas fa-bicycle" style="color:#E8830A;font-size:16px;"></i>
|
|
</div>
|
|
<div class="mb-header-title">
|
|
<span class="mb-title-main">Gratis Fahrrad</span>
|
|
<span class="mb-title-sub">Jeder bekommt eines</span>
|
|
</div>
|
|
</div>
|
|
<div class="mb-header-right">
|
|
<button class="mb-close-btn" @click="close()"><i class="fas fa-times"></i></button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Body -->
|
|
<div class="mb-body">
|
|
|
|
<!-- Bereits abgeholt -->
|
|
<div class="mb-claimed-notice" v-if="claimed">
|
|
<i class="fas fa-check-circle"></i>
|
|
<span>Du hast bereits ein Fahrrad erhalten.</span>
|
|
<span class="mb-claimed-model" v-if="claimedModel">{{ claimedModel }}</span>
|
|
</div>
|
|
|
|
<!-- Fahrrad-Auswahl -->
|
|
<div class="mb-bikes" v-if="!claimed">
|
|
<div class="mb-bike-card"
|
|
v-for="b in bikes" :key="b.model"
|
|
:class="selected === b.model ? 'mb-bike-active' : ''"
|
|
@click="selectBike(b.model)">
|
|
<img :src="'images/' + b.image + '.png'"
|
|
class="mb-bike-img"
|
|
onerror="this.src='images/defaultimage.png'">
|
|
<div class="mb-bike-name">{{ b.label }}</div>
|
|
<div class="mb-bike-free"><i class="fas fa-gift"></i> Gratis</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Button -->
|
|
<button class="mb-claim-btn" v-if="!claimed && selected" @click="claimBike()">
|
|
<i class="fas fa-bicycle"></i> Fahrrad abholen
|
|
</button>
|
|
|
|
</div><!-- /.mb-body -->
|
|
|
|
<!-- Admin-Link -->
|
|
<div class="mb-admin-link" v-if="isAdmin" @click="openAdmin()">
|
|
<i class="fas fa-cog"></i> Admin
|
|
</div>
|
|
|
|
</div><!-- /.mb-modal -->
|
|
</div>
|
|
|
|
<!-- ══════════════════ ADMIN-PANEL ══════════════════ -->
|
|
<div class="mb-backdrop-transparent" v-if="showAdmin">
|
|
<div class="mb-modal mb-modal-admin">
|
|
|
|
<div class="mb-header">
|
|
<div class="mb-header-left">
|
|
<div class="mb-header-icon">
|
|
<i class="fas fa-cog" style="color:#E8830A;font-size:14px;"></i>
|
|
</div>
|
|
<div class="mb-header-title">
|
|
<span class="mb-title-main">Bike Admin</span>
|
|
<span class="mb-title-sub">NPC Konfiguration</span>
|
|
</div>
|
|
</div>
|
|
<div class="mb-header-right">
|
|
<button class="mb-close-btn" @click="closeAdmin()"><i class="fas fa-times"></i></button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mb-admin-body">
|
|
|
|
<div class="mb-form-section">
|
|
<div class="mb-form-label"><i class="fas fa-user"></i> NPC Modell</div>
|
|
<input v-model="npc.model" placeholder="a_m_m_beach_01" class="mb-input">
|
|
</div>
|
|
|
|
<div class="mb-form-section">
|
|
<div class="mb-form-label"><i class="fas fa-map-marker-alt"></i> NPC Position</div>
|
|
<div class="mb-pos-row">
|
|
<input type="number" v-model.number="npc.x" placeholder="X" class="mb-input mb-input-sm">
|
|
<input type="number" v-model.number="npc.y" placeholder="Y" class="mb-input mb-input-sm">
|
|
<input type="number" v-model.number="npc.z" placeholder="Z" class="mb-input mb-input-sm">
|
|
<input type="number" v-model.number="npc.heading" placeholder="Heading" class="mb-input mb-input-sm">
|
|
</div>
|
|
<button class="mb-capture-btn" @click="capturePos()">
|
|
<i class="fas fa-crosshairs"></i> Hier erfassen (E drücken)
|
|
</button>
|
|
</div>
|
|
|
|
<button class="mb-save-btn" @click="saveNPC()">
|
|
<i class="fas fa-save"></i> NPC speichern & setzen
|
|
</button>
|
|
|
|
<div class="mb-admin-hint">
|
|
<i class="fas fa-info-circle"></i>
|
|
<span>Mit <kbd>/bikereset [ID]</kbd> kannst du den Claim eines Spielers zurücksetzen.</span>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div><!-- /#app -->
|
|
|
|
<script src="script.js"></script>
|
|
</body>
|
|
</html>
|