vocalapp.github.io/index.html at master · VocalPodcastProject/vocalapp.github.io · GitHub

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
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
<html>
    <head>
        <link href="https://fonts.googleapis.com/css?family=Adamina|Neuton|Mukta" rel="stylesheet">
        <link rel="stylesheet" type="text/css" href="style.css">
        <title>Vocal - Podcast client for the free desktop.</title>
    </head>
    <body>
        <h1>Vocal</h1>
        <h2>The modern podcast client for the free desktop.</h2>
        <img id="main-icon" src="images/vocal.svg" alt="Vocal logo showing a white microphone on a purple background" />

        <img id="main-screenshot" src="images/library_screenshot_cropped.png" alt="A screenshot of Vocal with multiple shows" />

        <div id="features">
            <!-- COPY ME FOR NEW FEATURES
                <div class="feature">
                    <h4></h4>
                    <p></p>
                </div>
            -->

            <h3>Features</h3>

            <div id="feature-float">

                <div class="feature">
                    <h4>A Great Playback Experience</h4>
                    <p>With multiple playback speeds, smooth seeking, and episode queueing.</p>
                </div>

                <div class="feature">
                    <h4>iTunes Store Integration</h4>
                    <p>Search across and browse the most popular podcast directory in the world.</p>
                </div>

                <div class="feature">
                    <h4>Custom Skip Intervals</h4>
                    <p>Your time is valuable, so Vocal lets you set custom time intervals for the skip forward and backward buttons (so you can catch something you missed a few seconds ago, or jump forward a few minutes to breeze past an advertisement).</p>
                </div>

                <div class="feature">
                    <h4>Smart Library Management</h4>
                    <p>Never worry about old downloads filling up your device! Vocal periodically cleans your library so the freshest content is always available, while also keeping the cruft out.</p>
                </div>

                <div class="feature">
                    <h4>Position Saving</h4>
                    <p>Vocal remembers exactly where you were in each episode, so it can start back right where you left off.</p>
                </div>

                <div class="feature">
                    <h4>Light and Dark Themes</h4>
                    <p>Switch between light and dark themes depending on your mood or to prevent eye strain.</p>
                </div>

                <div class="feature">
                    <h4>Full System Integration</h4>
                    <p>With native notifications, system media keys, and sound menu integration, Vocal feels right at home in most modern Linux distributions.</p>
                </div>

                <div class="feature">
                    <h4>Fully Adaptive</h4>
                    <p>By using the latest GTK and libadwaita features, Vocal can seamlessly adapt from the largest screen down to the one you keep in your pocket.</p>
                </div>

                <div class="feature">
                    <h4>Keep in Sync</h4>
                    <p>Vocal now syncs with gpodder.net, so you can keep your library in sync between multiple devices and apps.</p>
                </div>

                <div class="feature">
                    <h4>And much more...</h4>
                    <p>Try it for yourself to see what all Vocal has to offer.</p>
                </div>
            </div>
        </div>

        <div id="screenshots">
            <h3>Screenshots</h3>
            <img width=70% class="screenshot" src="https://github.com/VocalPodcastProject/vocal/raw/master/screenshot1.png" alt="Library view with light theme">
            <img width=70% class="screenshot" src="https://github.com/VocalPodcastProject/vocal/raw/master/screenshot2.png" alt="Library view with dark theme">
            <img width=70% class="screenshot" src="https://github.com/VocalPodcastProject/vocal/raw/master/screenshot3.png" alt="iTunes Top 100 view">
            <img width=70% class="screenshot" src="https://github.com/VocalPodcastProject/vocal/raw/master/screenshot4.png" alt="New Episodes View">
            <img width=70% class="screenshot" src="https://github.com/VocalPodcastProject/vocal/raw/master/screenshot5.png" alt="Podcast View">
            <button class="w3-button w3-display-left" onclick="plusDivs(-1)">&#10094;</button>
            <button class="w3-button w3-display-right" onclick="plusDivs(+1)">&#10095;</button>
        </div>

        <!-- Script below adapted from a W3C example -->
        <script>
            var slideIndex = 1;
            showDivs(slideIndex);

            function plusDivs(n) {
                showDivs(slideIndex += n);
            }

            function showDivs(n) {
                var i;
                var x = document.getElementsByClassName("screenshot");
                if (n > x.length) {slideIndex = 1}
                if (n < 1) {slideIndex = x.length} ;
                for (i = 0; i < x.length; i++) {
                    x[i].style.display = "none";
                }
                x[slideIndex-1].style.display = "block";
            }
        </script>

        <div id="download">
            <h3>Download</h3>

            <div id="install-options">
                <a href="https://flathub.org/repo/appstream/com.github.needleandthread.vocal.flatpakref" class="download-option">
                    <h4>Flatpak for All Linux Distributions</h4>
                    <img src="images/flatpak.png" height=150 alt="Flatpak Icon" />
                </a>

            </div>

            <p>Also available in GNOME Software out-of-the-box in many Linux distributions.</p>
        </div>

        <div id="support">
            <h3>Support the Project</h3>

            <script type='text/javascript' src='https://storage.ko-fi.com/cdn/widget/Widget_2.js'></script><script type='text/javascript'>kofiwidget2.init('Like the app? Buy the maintainer a coffee!', '#29abe0', 'I2I82T5G2');kofiwidget2.draw();</script>
        </div>

        <h3 class="dark-background" style="margin-bottom: 0%; padding-bottom: 3%;">Get Involved</h3>
        <div id="get-involved">

            <div id="get-involved-links">
                <ul>
                    <li><a href="https://github.com/VocalPodcastProject/vocal">See the code</a></li>
                    <li><a href="https://github.com/VocalPodcastProject/vocal/issues">Report an issue or request a feature</a></li>
                    <li><a href="https://github.com/VocalPodcastProject/vocal/pulls">Make a pull request</a></li>
                    <li><a href="https://github.com/VocalPodcastProject/vocal/wiki">See the project roadmap</a></li>
                    <li><a href="https://github.com/VocalPodcastProject/vocal/wiki/FAQ">Get help from the FAQ</a></li>
                    <li><a href="https://www.transifex.com/needle-and-thread/vocal/">Contribute translations</a></li>
                </ul>
            </div>

            <div style="display: block">
                <a href="https://github.com/VocalPodcastProject/vocal">
                    <img src="images/github_logo.png" width=200 alt="GitHub logo" />
                    <img src="images/github_icon.png" width=80 alt="GitHub icon" />
                </a>
                <br>
                <a href="https://www.transifex.com/needle-and-thread/vocal/">
                    <img src="images/transifex.png" width=260 alt="Transifex icon" />
                </a>
            </div>
        </div>


        <div id="contact-us">
            <p>Unless otherwise noted, the contents on this website are licensed under the Creative Commons CC-BY-SA 4.0 license. Contributions welcome on <a href="https://github.com/VocalPodcastProject/vocalapp.github.io">GitHub</a>. <a href="https://twitter.com/VocalPodcastApp">Follow us on Twitter @VocalPodcastApp.</a></p>
        </div>
    </body>
</html>