Yadciel/Titan
1
0
Fork 0
mirror of https://github.com/TitanEmbeds/Titan.git synced 2025-06-16 19:35:24 +02:00
Code Issues Packages Projects Releases Wiki Activity

Implemented Cosmetics and User Custom CSS, closes #7

Browse Source
This commit is contained in:
Jeremy Zhang
2017-05-22 01:07:32 +00:00
parent 6480df1b57
commit d18c9bf1c9
9 changed files with 274 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
webapp/titanembeds/templates/dashboard.html.j2
View File

@ -29,4 +29,35 @@
</div>
{% endfor %}
</div>
<hr>
{% if cosmetics is none %}
<div class="row">
<div class="col s12">
<div class="card-panel indigo lighten-5 z-depth-3 hoverable black-text">
<h4>Cosmetics!</h4>
<p class="flow-text">Would you like to have <strong>cosmetics</strong> such as <em>custom CSS</em> for your embed?</p>
<a class="waves-effect waves-light btn" href="https://discord.io/Titan">Talk to us!</a>
</div>
</div>
</div>
{% endif %}
{% if css_list is not none %}
<p class="flow-text">
Create or modify your custom CSS.
<a class="waves-effect waves-light btn" href="{{ url_for("user.new_custom_css_get") }}">New</a>
</p>
<div class="row">
{% for css in css_list %}
<div class="col l4 m6 s12">
<div class="card-panel indigo lighten-5 z-depth-3 hoverable black-text">
<p class="flow-text truncate"><code>#{{ css.id }}</code> {{ css.name }}</p>
<a class="waves-effect waves-light btn" href="{{ url_for("user.edit_custom_css_get", css_id=css.id) }}">Modify</a>
</div>
</div>
{% endfor %}
</div>
{% endif %}
{% endblock %}

4
webapp/titanembeds/templates/embed.html.j2
View File

@ -14,6 +14,10 @@
<title>{{ guild['name'] }} - Embed - Titan Embeds for Discord</title>
{% include 'google_analytics.html.j2' %}
{% if css is not none %}
<style>{{ css.css }}</style>
{% endif %}
</head>
<body>
<div class="navbar-fixed">

65
webapp/titanembeds/templates/usercss.html.j2 Normal file
View File

@ -0,0 +1,65 @@
{% extends 'site_layout.html.j2' %}
{% block title %}{% if new %}New{% else %}Editing {{ css.name }} -{% endif %} User CSS{% endblock %}
{% block content %}
<h1>{% if new %}New{% else %}Editing {{ css.name }}{% endif %} - User Defined CSS</h1>
<p><strong>Note:</strong> This feature is only used for CSS. Any attempts to enter HTML or malicious CSS code
will have CSS cosmetic privilages removed, if caught. Please don't, we check the databases often. Thanks!</p>
{% if not new %}
<div class="card-panel indigo lighten-5 z-depth-3 hoverable black-text">
<div class="row">
<div class="col s12">
<p class="flow-text">Using your custom CSS</p>
<p><strong>This user defined CSS has a unique ID of <em style="font-size: 130%;">{{ css.id }}</em>.</strong></p>
<p>To use this CSS in the embed, you must apped a <code>?css={{ css.id }}</code> to the embed URL.</p>
<p>Something like this will work:</p>
<input readonly value="https://titanembeds.tk/embed/1234567890987654321?css={{ css.id }}" id="disabled" type="text" onClick="this.setSelectionRange(48, this.value.length)">
</div>
</div>
</div>
{% endif %}
<div class="card-panel indigo lighten-5 z-depth-3 hoverable black-text">
<div class="row">
<div class="col s12">
<p class="flow-text">Give your CSS a name</p>
<input placeholder="Some Lit CSS" id="css_name" type="text" {% if not new %}value="{{ css.name }}"{% endif %}>
<label for="css_name">Name</label>
</div>
<div class="col s12">
<p class="flow-text">Edit your CSS code here</p>
<div style="position: relative; height: 40vh;">
<div id="css_editor">{% if new %}/* Enter your CSS code here! */{% else %}{{ css.css }}{% endif %}</div>
</div>
<br>
</div>
<div class="col s12">
<a id="submit-btn" class="waves-effect waves-light btn">Submit</a>
{% if not new %}<a id="delete-btn" class="waves-effect waves-light btn red">Delete</a>{% endif %}
</div>
</div>
</div>
{% endblock %}
{% block script %}
<script src="//cdnjs.cloudflare.com/ajax/libs/ace/1.2.6/ace.js" integrity="sha256-xrr4HH5eSY+cFz4SH7ja/LaAi9qcEdjMpeMP49/iOLs=" crossorigin="anonymous"></script>
<script>
const newCSS = {% if new %}true{% else %}false{% endif %};
</script>
<script type="text/javascript" src="{{ url_for('static', filename='js/usercss.js') }}"></script>
{% endblock %}
{% block additional_head_elements %}
<style>
#css_editor {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
</style>
{% endblock %}