HTML Template (Chords)

Markup
Predefined HTML structure for displaying guitar chords and lyrics. Simplifies creation of chord sheets or tablature websites.
1<!DOCTYPE html>
2<html lang="en">
3<head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <script src="https://cdn.tailwindcss.com"></script>
7    <title>Professional Chord Display</title>
8</head>
9<body class="bg-zinc-900">
10    <div class="container mx-auto p-4 max-w-3xl">
11        <!-- Main Display Panel -->
12        <div class="bg-gradient-to-b from-zinc-800 to-zinc-900 rounded-xl p-6 shadow-2xl border border-zinc-700">
13<!-- Control Panel -->
14<div class="flex items-center justify-between mb-8 border-b border-zinc-700 pb-4">
15    <!-- Left Group: Play and Timer -->
16    <div class="flex items-center space-x-3">
17        <button class="px-5 py-2 bg-gradient-to-b from-emerald-500 to-emerald-600 text-white rounded-md shadow-lg hover:from-emerald-600 hover:to-emerald-700 font-medium">
18            PLAY
19        </button>
20        <div class="flex items-center space-x-2 bg-zinc-800 px-3 py-1 rounded-md border border-zinc-600">
21            <button class="w-8 h-8 flex items-center justify-center text-emerald-400 hover:text-emerald-300">-</button>
22            <span class="w-12 text-center text-emerald-400 font-mono text-lg">3.0s</span>
23            <button class="w-8 h-8 flex items-center justify-center text-emerald-400 hover:text-emerald-300">+</button>
24        </div>
25    </div>
26
27    <!-- Center: Metronome -->
28    <div class="flex items-center space-x-2">
29        <button class="px-4 py-2 bg-gradient-to-b from-zinc-700 to-zinc-800 text-zinc-400 rounded-md border border-zinc-600 hover:border-emerald-400 font-medium flex items-center space-x-2">
30            <span>♩</span>
31            <span class="font-mono">120</span>
32        </button>
33    </div>
34
35    <!-- Right Group: Chord Types and Sound -->
36    <div class="flex space-x-2">
37        <button class="px-4 py-2 bg-gradient-to-b from-zinc-700 to-zinc-800 text-emerald-400 rounded-md border border-zinc-600 hover:border-emerald-400 font-medium">
38            BASIC
39        </button>
40        <button class="px-4 py-2 bg-gradient-to-b from-zinc-700 to-zinc-800 text-zinc-400 rounded-md border border-zinc-600 hover:border-emerald-400 font-medium">
41            7TH
42        </button>
43        <button class="w-10 h-10 bg-gradient-to-b from-zinc-700 to-zinc-800 text-emerald-400 rounded-md border border-zinc-600 hover:border-emerald-400 flex items-center justify-center ml-2">
44            🔊
45        </button>
46    </div>
47</div>
48
49            <!-- Chord Display -->
50            <div class="flex items-center justify-center space-x-6">
51                <button class="text-4xl text-emerald-400 hover:text-emerald-300 w-16 h-16 flex items-center justify-center">
52                    ←
53                </button>
54                <div class="bg-zinc-800 p-8 rounded-lg border border-zinc-700 min-w-[400px] text-center shadow-inner">
55                    <div class="text-7xl font-bold mb-3 text-emerald-400 font-mono tracking-wider">Am7</div>
56                    <div class="text-xl text-emerald-300/80 font-medium">(A minor seventh)</div>
57                </div>
58                <button class="text-4xl text-emerald-400 hover:text-emerald-300 w-16 h-16 flex items-center justify-center">
59                    →
60                </button>
61            </div>
62        </div>
63
64        <!-- Version Info -->
65        <div class="text-right mt-2 text-zinc-600 text-sm">
66            Pro Chord Display v1.0
67        </div>
68    </div>
69</body>
70</html>
Created on 11/20/2024