kristofersxyz/templates/main/lightsaber.html

{% extends "layout.html" %}
{% load static %}
{% block title %}{{ title }}{% endblock %}
{% block meta %}
    <link rel="stylesheet"
          type="text/css"
          href="{% static 'main/css/lightsaber.css' %}"/>
    <script src="{% static 'main/js/lightsaber.js' %}" defer></script>
{% endblock %}
{% block content %}
    <div class="body">
        <div class="lightsaber">
            <div class="pommel-cap metal"></div>
            <div class="grip metal">
                <div class="controls metal">
                    <div style="--i: 0" class="button"></div>
                    <div style="--i: 1" class="button"></div>
                    <div style="--i: 2" class="button -down"></div>
                    <div style="--i: 3" class="button -up"></div>
                </div>
            </div>
            <div class="hilt">
                <div style="--i: 0" class="segment black-metal"></div>
                <div style="--i: 1" class="segment metal"></div>
                <div style="--i: 2" class="segment black-metal"></div>
                <div style="--i: 3" class="segment metal"></div>
                <div style="--i: 4" class="segment black-metal"></div>
                <div style="--i: 5" class="segment metal"></div>
                <div style="--i: 6" class="segment black-metal"></div>
                <div style="--i: 7" class="segment metal"></div>
                <div style="--i: 8" class="segment black-metal"></div>
                <div style="--i: 9" class="segment metal"></div>
                <div style="--i: 10" class="segment black-metal"></div>
                <div style="--i: 11" class="segment metal"></div>
            </div>
            <div class="focusing-ring">
                <div style="--i: 0" class="segment black-metal"></div>
                <div style="--i: 1" class="segment metal"></div>
                <div style="--i: 2" class="segment copper"></div>
            </div>
            <div class="blade-emitter">
                <div style="--i: 0" class="segment metal start"></div>
                <div style="--i: 1" class="segment metal middle"></div>
                <div style="--i: 2" class="segment metal end"></div>
            </div>
            <div class="blade">
                <div class="glow"></div>
                <div class="glow large"></div>
            </div>
        </div>
    </div>
{% endblock %}