Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 8 additions & 6 deletions _includes/includes/ui/keyboard-details.php
Original file line number Diff line number Diff line change
Expand Up @@ -4,13 +4,14 @@
require_once('includes/template.php');
require_once('includes/playstore.php');
require_once('includes/appstore.php');
require_once('includes/ui/section-announcement.php');

use \DateTime;
use \Keyman\Site\com\keyman\KeymanWebHost;
use \Keyman\Site\Common\KeymanHosts;
use \Keyman\Site\com\keyman\Locale;
use \Keyman\Site\com\keyman;

Locale::definePageLocale('LOCALE_KEYBOARDS_DETAILS', 'keyboards/details');
$_m_KeyboardDetails = function($id, ...$args) {
return Locale::m(LOCALE_KEYBOARDS_DETAILS, $id, ...$args);
Expand Down Expand Up @@ -307,7 +308,7 @@ protected static function WriteTitle() {
} else {
$head_options += [
'js' => ['../keyboard-search/keyboard-details.js', 'qrcode.js'],
'css' => ['template.css', '../keyboard-search/search.css']
'css' => ['template.css', '../keyboard-search/search.css', 'section-announcement.css']
];
$embed_target = '';
}
Expand All @@ -319,6 +320,7 @@ protected static function WriteTitle() {
var embed_query='';
</script>
<?php
\UI\SectionAnnouncement::render();
} else {
global $session_query;
?>
Expand Down Expand Up @@ -376,7 +378,7 @@ protected static function WriteTitle() {
<div>
<a href='/keyboards/$dep$session_query_q' class='deprecated'>
<span> " . $_m_KeyboardDetails("important_note") . " </span>" .
$_m_KeyboardDetails("obsolete_version") .
$_m_KeyboardDetails("obsolete_version") .
" <span>$dep</span>" . $_m_KeyboardDetails("instead") . "</a>
</div>
<div>
Expand Down Expand Up @@ -636,7 +638,7 @@ protected static function WriteKeyboardDetails() {
$s = @file_get_contents(KeymanHosts::Instance()->SERVER_api_keyman_com.'/keyboard/' . rawurlencode($name));
if ($s === FALSE) {
echo "<span class='keyboard-unavailable' title='" .
$_m_KeyboardDetails("keyboard_not_available",
$_m_KeyboardDetails("keyboard_not_available",
KeymanHosts::Instance()->keyman_com_host) .
"'>$hname</span> ";
} else {
Expand Down Expand Up @@ -669,9 +671,9 @@ protected static function WriteKeyboardDetails() {

foreach($langs as $bcp47 => $detail) {
if($n == 3) {
echo " <a id='expand-languages' href='#expand-languages'>" .
echo " <a id='expand-languages' href='#expand-languages'>" .
$_m_KeyboardDetails("expand_more", $count) . "</a>";
echo "<a id='collapse-languages' href='#collapse-languages'>" .
echo "<a id='collapse-languages' href='#collapse-languages'>" .
$_m_KeyboardDetails("collapse") . "</a> <span class='expand-languages'>";
}
if (property_exists($detail, 'languageName')) {
Expand Down
22 changes: 22 additions & 0 deletions _includes/includes/ui/section-announcement.php
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
<?php
namespace UI;

class SectionAnnouncement {
public function render() {
?>

<!-- event banner: uncomment this section when we have an event or promotion -->
<div class="section section-announcement">
<div class='wrapper'>
<div class='content'>
<p style='font-size:2em'><a href='/funding-appeal'>Funding appeal &mdash; we need your support</a></p>
<p style='font-size:1.25em; color: black; line-height: 1.25em; font-weight: normal'>
The Keyman project is facing a major funding crisis. <a href="/funding-appeal">Learn more</a>
</p>
</div>
</div>
</div>

<?php
}
}
164 changes: 164 additions & 0 deletions cdn/dev/css/funding.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,164 @@
.funding-tracker-widget {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
max-width: 400px;
margin: 20px auto;
padding: 15px;
border: 1px solid #ddd;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
background-color: #fff;
}

#section2 .tracker-header h3 {
margin-top: 0;
color: #333;
font-size: 1.1rem;
padding-left: 0;
}

.progress-container {
background-color: #e0e0e0;
border-radius: 5px;
overflow: hidden;
margin-bottom: 10px;
height: 20px;
}

.progress-bar {
background-color: #28a745; /* Green color for progress */
height: 100%;
width: 0; /* Set initial width to 0, adjust with JavaScript or inline style */
transition: width 1s ease-in-out; /* Smooth transition for the bar */
text-align: center;
line-height: 20px;
color: white;
font-size: 0.8rem;
}

.tracker-stats {
display: flex;
justify-content: space-between;
color: #555;
}

.amount-raised {
font-weight: bold;
color: #28a745;
}

.donate-link-container {
text-align: center;
}

.donate-link {
display: inline-block;
background: #b92034;
color: #f0f0f0 !important;
font-size: 24px;
margin: 12px 12px 12px 0;
padding: 14px 22px;
border-radius: 4px;
box-shadow: 0px 0px 4px rgba(185, 32, 52, 0.5);
}

.donate-link:hover {
background: #df1b35ff;
color: white !important;
}

.share-link {
display: inline-block;
background: #202ab9ff;
color: #f0f0f0 !important;
font-size: 24px;
margin: 12px 12px 12px 0;
padding: 14px 22px;
border-radius: 4px;
box-shadow: 0px 0px 4px rgba(185, 32, 52, 0.5);
}

.share-link:hover {
background: #1b29ecff;
color: white !important;
}

/* General container styles */
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Note, we don't have medallions at this point, but keeping the additional CSS doesn't hurt.


.medallions {
display: flex;
flex-direction: row;
justify-content: center;
}

.medallion-container {
display: flex;
align-items: center;
text-align: center;
margin: 20px;
flex-direction: column;
}

.medallion-container .donation-amount {
margin-top: 10px;
font-weight: bold;
color: #333;
}

.medallion-container .tier-label {
font-size: 1.2em;
padding: 10px;
line-height: 1.2;
}

/* Base styling for all medallions */
.medallion {
width: 100px;
height: 100px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
font-family: sans-serif;
box-shadow: inset 0 0 10px rgba(255, 255, 255, 0.5),
0 4px 8px rgba(0, 0, 0, 0.3);
border: 4px solid rgba(0, 0, 0, 0.1);
text-shadow: 0 1px 1px rgba(255, 255, 255, 0.4);
}

/* Gold Tier */
.medallion-container .gold {
background: radial-gradient(
circle at 30% 30%,
#fff9ac 0%,
#d4af37 40%,
#8a6d3b 100%
);
color: #5c4b1a;
}

/* Silver Tier */
.medallion-container .silver {
background: radial-gradient(
circle at 30% 30%,
#ffffff 0%,
#c0c0c0 40%,
#707070 100%
);
color: #4a4a4a;
}

/* Bronze Tier */
.medallion-container .bronze {
background: radial-gradient(
circle at 30% 30%,
#f5d1b5 0%,
#cd7f32 40%,
#7d4a21 100%
);
color: #3e2410;
}

.sponsors tr > td img {
width: 150px;
}
26 changes: 2 additions & 24 deletions cdn/dev/css/index.css
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,8 @@
* Section1 CSS
* ***********************************/

@import url('section-announcement.css');

.main1 {
float: left;
width: 100%;
Expand Down Expand Up @@ -242,30 +244,6 @@
color: #2F4B67
}

.section-announcement {
color: #B92034;
background: white;
}

.section-announcement p {
font-size: 36pt;
font-weight: bold;
padding: 36px 12px;
text-align: center;
}

.section-announcement p a {
color: #B92034;
text-decoration: none;
padding: 4px;
display: inline-block;
}

.section-announcement p a:hover {
background: #D6D6D6;
border-radius: 6px;
}

.lang-ital {
font-style: italic;
font-size: 12pt;
Expand Down
49 changes: 49 additions & 0 deletions cdn/dev/css/section-announcement.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,49 @@

html .section-announcement {
color: #B92034;
background: white;
padding: 0;

/* grow transition */
display: grid;
animation: 2s ease-out 0s 1 expand-section-announcement;
overflow: hidden;
}

@keyframes expand-section-announcement {
0% {
grid-template-rows: 0fr;
}
75% {
grid-template-rows: 0fr;
}
100% {
grid-template-rows: 1fr;
}
}

.section-announcement > .wrapper {
overflow: hidden;
}

.section-announcement .content {
padding: 36px 12px;
}

.section-announcement p {
font-size: 36pt;
font-weight: bold;
padding: 8px 4px;
text-align: center;
}

.section-announcement p a {
color: #B92034;
padding: 4px;
display: inline-block;
}

.section-announcement p a:hover {
background: #D6D6D6;
border-radius: 6px;
}
13 changes: 13 additions & 0 deletions cdn/dev/css/template.css
Original file line number Diff line number Diff line change
Expand Up @@ -133,6 +133,11 @@ q:after {
content: none;
}

#section2 .markdown h3 {
font-size: 16pt;
font-weight: bold
}

.markdown blockquote {
margin: 12px 24px 24px;
padding: 18px 6px 6px 6px;
Expand All @@ -151,6 +156,14 @@ q:after {
padding: 1em;
}

#section2 .markdown strong {
font-weight: bold;
}

#section2 .markdown em {
font-style: italic;
}

table {
border-collapse: collapse;
border-spacing: 0;
Expand Down
Loading