Spaces:
Running
Running
File size: 6,387 Bytes
1fb0a63 de12c7f 1fb0a63 de12c7f 1fb0a63 de12c7f 1fb0a63 de12c7f 1fb0a63 de12c7f 1fb0a63 de12c7f 1476658 1fb0a63 de12c7f 1476658 de12c7f 1476658 de12c7f 1fb0a63 de12c7f | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 | {% extends "base.html" %}
{% block content %}
<div class="max-w-7xl mx-auto px-4 sm:px-6">
<div class="mb-8">
<div class="flex flex-col-reverse sm:flex-row sm:items-start sm:justify-between gap-4 mb-4">
<div>
<h1 class="font-display text-4xl sm:text-5xl font-bold tracking-tight mb-4">
{{ note.title }}
</h1>
<div class="flex flex-wrap gap-3 mb-6">
<span class="px-4 py-2 bg-blue-500/20 border border-blue-500/50 rounded-lg font-mono text-sm">
{{ note.subject.name }}
</span>
<span class="px-4 py-2 bg-purple-500/20 border border-purple-500/50 rounded-lg font-mono text-sm">
{{ note.note_type.name }}
</span>
<span class="glass rounded-lg font-mono text-sm text-gray-400 flex items-center gap-2 px-3 py-2">
<img src="https://api.dicebear.com/9.x/thumbs/svg?seed={{ note.user.email }}"
alt="{{ note.user.name }} Avatar" class="w-6 h-6 rounded-full">
by {{ note.user.name }}
</span>
<span class="px-4 py-2 glass rounded-lg font-mono text-sm text-gray-400">
{{ note.created_at.strftime('%b %d, %Y') }}
</span>
</div>
{% if note.description %}
<p class="font-mono text-gray-300 max-w-3xl">{{ note.description }}</p>
{% endif %}
</div>
<a href="{{ url_for('notes.list') }}"
class="inline-flex items-center gap-2 font-mono text-sm text-gray-400 hover:text-blue-400 transition whitespace-nowrap">
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
</svg>
Back to Notes
</a>
</div>
</div>
<!-- Preview Area -->
<div class="grid grid-cols-1 xl:grid-cols-4 gap-4 mb-8">
<div class="glass p-4 sm:p-8 rounded-2xl xl:col-span-3" id="preview-container">
{% if preview.kind == 'youtube' %}
<div class="rounded-2xl overflow-hidden bg-black/40 border border-white/10">
<iframe src="{{ preview.embed_url }}" class="w-full aspect-video" frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen loading="lazy"></iframe>
</div>
{% elif preview.kind == 'image' %}
<img src="{{ preview.url }}" class="w-full rounded-xl object-contain max-h-[80vh]" alt="{{ note.title }}" loading="lazy">
{% elif preview.kind == 'pdf' %}
<iframe src="{{ preview.url }}" class="w-full h-[75vh] rounded-xl bg-white/5"></iframe>
{% elif preview.kind == 'video' %}
<video controls class="w-full rounded-xl bg-black/40">
<source src="{{ preview.url }}">
</video>
{% elif preview.kind == 'audio' %}
<div class="glass rounded-xl p-6">
<audio controls class="w-full">
<source src="{{ preview.url }}">
</audio>
</div>
{% elif preview.kind == 'text' %}
<iframe src="{{ preview.url }}" class="w-full h-[75vh] rounded-xl bg-white/5"></iframe>
{% elif preview.kind == 'document' %}
<iframe src="{{ preview.viewer_url }}" class="w-full h-[75vh] rounded-xl bg-white/5"></iframe>
{% elif preview.kind == 'iframe' %}
<iframe src="{{ preview.url }}" class="w-full h-[75vh] rounded-xl bg-white/5"></iframe>
{% else %}
<div class="text-center py-12">
<p class="font-mono text-gray-300 mb-3">Inline preview is not available for this resource.</p>
<a href="{{ preview.url }}" target="_blank"
class="inline-flex items-center gap-2 font-mono text-sm text-blue-400 hover:text-blue-300 transition break-all">
Open in new tab
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
</svg>
</a>
</div>
{% endif %}
</div>
<aside class="glass rounded-2xl p-5 space-y-4">
<h2 class="font-display text-xl">Preview Details</h2>
<div class="space-y-3 font-mono text-xs text-gray-300">
<div class="flex items-center justify-between gap-3">
<span class="text-gray-500">Mode</span>
<span class="uppercase tracking-wide">{{ preview.kind }}</span>
</div>
{% if preview.ext %}
<div class="flex items-center justify-between gap-3">
<span class="text-gray-500">File Type</span>
<span class="uppercase tracking-wide">{{ preview.ext }}</span>
</div>
{% endif %}
{% if preview.filename %}
<div class="pt-2">
<p class="text-gray-500 mb-1">Filename</p>
<p class="break-words text-gray-300">{{ preview.filename }}</p>
</div>
{% endif %}
</div>
{% if preview.url %}
<a href="{{ preview.url }}" target="_blank"
class="w-full inline-flex justify-center items-center gap-2 px-3 py-2 rounded-lg bg-white/5 border border-white/10 font-mono text-xs hover:bg-white/10 transition">
Open Raw Link
</a>
{% endif %}
</aside>
</div>
<!-- Actions -->
<div class="flex gap-4">
{% if current_user.id == note.user_id %}
<a href="{{ url_for('notes.edit', id=note.id) }}"
class="btn-magnetic glass px-8 py-4 rounded-xl font-mono font-semibold hover:bg-white/5 text-center">
Edit
</a>
{% endif %}
{% if note.presigned_url %}
{% if note.original_link %}
<a href="{{ note.presigned_url }}" target="_blank"
class="btn-magnetic glass px-8 py-4 rounded-xl font-mono font-semibold border-2 border-blue-500/50 hover:border-blue-400 animate-glow text-center">
Go To Site
</a>
{% else %}
<a href="{{ note.presigned_url }}" download
class="btn-magnetic glass px-8 py-4 rounded-xl font-mono font-semibold border-2 border-blue-500/50 hover:border-blue-400 animate-glow text-center">
Download
</a>
{% endif %}
{% endif %}
<a href="{{ url_for('notes.share', id=note.id) }}"
class="btn-magnetic glass px-8 py-4 rounded-xl font-mono font-semibold hover:bg-white/5 text-center">
Share
</a>
</div>
</div>
{% endblock %}
|