Christian Krakau-Louis
70 lines
4.2 KiB
HTML
70 lines
4.2 KiB
HTML
{% extends 'base.html' %}
|
|
|
|
{% block title %}Import from {{ service_name }}{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="max-w-2xl mx-auto px-4 py-10">
|
|
<div class="bg-white rounded-lg shadow-md p-8">
|
|
<h2 class="text-3xl font-bold mb-4 text-center text-navy-800 font-montserrat">
|
|
Import {{ item_type }} from {{ service_name }}
|
|
{% if service_name == 'Spotify' %}<i class="fab fa-spotify ml-2 text-sm"></i>{% elif service_name == 'Deezer' %}<i class="fab fa-deezer ml-2 text-sm"></i>{% endif %}
|
|
</h2>
|
|
|
|
<div class="mb-8 bg-gray-50 rounded-lg p-5 border border-gray-200">
|
|
<h3 class="font-semibold text-lg mb-2 flex items-center text-navy-800">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2 text-teal-500" viewBox="0 0 20 20" fill="currentColor">
|
|
<path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd" />
|
|
</svg>
|
|
How to find the {{ service_name }} {{ item_type|lower }} ID
|
|
</h3>
|
|
<ol class="text-gray-700 space-y-2">
|
|
<li>1. Go to the {{ service_name }} website and navigate to your desired {{ item_type|lower }}</li>
|
|
<li>2. Look at the URL in your browser's address bar</li>
|
|
<li>3. Find the ID in the URL format shown below:</li>
|
|
</ol>
|
|
<div class="mt-3 p-3 bg-gray-100 rounded border border-gray-300 font-mono text-sm break-all">
|
|
{{ url_example_prefix }}<span class="font-bold text-teal-600">{{ url_example_id }}</span>
|
|
</div>
|
|
</div>
|
|
|
|
<form method="POST" action="{{ form_action }}" class="space-y-6">
|
|
<input type="hidden" name="csrf_token" value="{{ csrf_token() }}"/>
|
|
<div>
|
|
<label for="{{ id_field }}" class="block text-sm font-medium text-gray-700 mb-2">{{ item_type }} ID:</label>
|
|
<input type="text" id="{{ id_field }}" name="{{ id_field }}" placeholder="Enter {{ item_type|lower }} ID..." required
|
|
class="w-full px-4 py-3 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-teal-500 focus:border-teal-500" />
|
|
</div>
|
|
|
|
<div class="flex justify-between items-center pt-2">
|
|
<a href="{{ back_url }}" class="inline-flex items-center px-4 py-2 bg-gray-100 hover:bg-gray-200 text-gray-800 rounded-md transition-colors border border-gray-300">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18" />
|
|
</svg>
|
|
Back to Search
|
|
</a>
|
|
<button type="submit" class="inline-flex items-center px-6 py-2 rounded-md font-medium text-white transition-colors bg-orange-500 hover:bg-orange-600">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12" />
|
|
</svg>
|
|
Import {{ item_type }}
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
|
|
<div class="mt-6 text-center text-sm text-gray-500">
|
|
<p>Importing from {{ service_name }} allows you to add songs directly to your music round collection.</p>
|
|
<div class="mt-2">
|
|
{% if service_name == 'Spotify' %}
|
|
<span class="inline-flex items-center text-navy-800">
|
|
<i class="fab fa-spotify mr-1"></i> Spotify Integration
|
|
</span>
|
|
{% elif service_name == 'Deezer' %}
|
|
<span class="inline-flex items-center text-navy-800">
|
|
<i class="fab fa-deezer mr-1"></i> Deezer Integration
|
|
</span>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endblock %} |