Skip to content

Commit

Permalink
Widgets to Refactor Later
Browse files Browse the repository at this point in the history
  • Loading branch information
@AbdhilahiRWabwire
AbdhilahiRWabwire committed Dec 24, 2024
1 parent 4a3c4b7 commit 97aa084
Show file tree
Hide file tree
Showing 24 changed files with 4,132 additions and 0 deletions.
45 changes: 45 additions & 0 deletions lib/markup/disclosure.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,45 @@
<!DOCTYPE html>

<html lang="en">
<h3>Parking <abbr title="Frequently Asked Questions">FAQ</abbr>s</h3>
<dl class="faq">
<dt>
<button type="button" aria-expanded="false" aria-controls="faq1_desc">What do I do if I have a permit for an assigned lot, but can't find a space there?</button>
</dt>
<dd>
<div id="faq1_desc" class="desc">
Park at the nearest available parking meter without paying the meter and call 999-999-9999 to report the problem.
We will note and approve your alternate location and will investigate the cause of the shortage in your assigned facility.
</div>
</dd>
<dt>
<button type="button" aria-expanded="false" aria-controls="faq2_desc">What do I do if I lose my permit or if my permit is stolen?</button>
</dt>
<dd>
<div id="faq2_desc" class="desc">
You should come to the Parking office and report the loss.
There is a fee to replace your lost permit.
However, if your permit was stolen, a copy of a police report needs to be submitted along with a stolen parking permit form for a fee replacement exemption.
</div>
</dd>
<dt>
<button type="button" aria-expanded="false" aria-controls="faq3_desc">Is there free parking on holidays?</button>
</dt>
<dd>
<div id="faq3_desc" class="desc">
All facilities are restricted from 2:00 am - 6:00 am on all days.
No exceptions are made for any holiday or recess except those officially listed as a <q>Holidays</q> in the calendar.
Please note: 24-hour rental spaces, 24-hour rental lots, and disabled parking is enforced at all times.
</div>
</dd>
<dt>
<button type="button" aria-expanded="false" aria-controls="faq4_desc">Do all parking facilities have the same enforcement rules?</button>
</dt>
<dd>
<div id="faq4_desc" class="desc">
Some parking facility restrictions differ from others.
Be sure to take note of the signs at each lot entrance.
</div>
</dd>
</dl>
</html>
21 changes: 21 additions & 0 deletions lib/markup/menu-button.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
<!DOCTYPE html>

<html lang="en">
<div class="menu-button-actions">
<button type="button" id="menubutton1" aria-haspopup="true" aria-expanded="false" aria-controls="menu1">
Actions
<svg xmlns="http://www.w3.org/2000/svg" class="down" width="12" height="9" viewBox="0 0 12 9">
<polygon points="1 0, 11 0, 6 8"></polygon>
</svg>
</button>
<ul id="menu1" role="menu" tabindex="-1" aria-labelledby="menubutton1" aria-activedescendant="mi1">
<li id="mi1" role="menuitem">Action 1</li>
<li id="mi2" role="menuitem">Action 2</li>
<li id="mi3" role="menuitem">Action 3</li>
<li id="mi4" role="menuitem">Action 4</li>
</ul>
</div>
<p>
<label>Last Action: <input class="action" id="action_output" type="text" value=""></label>
</p>
</html>
17 changes: 17 additions & 0 deletions lib/markup/meter.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
<!DOCTYPE html>

<html lang="en">
<p>
The value of this meter changes every 5 seconds.
Use the pause button to stop changes.
</p>
<h3 id="cpu_usage_label">Central Processing Unit (CPU) Usage</h3>
<p>
<button type="button" class="play-meters">Pause Updates</button>
</p>
<div role="meter" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100" aria-labelledby="cpu_usage_label">
<svg width="100" height="100" class="fill" aria-hidden="true" version="1.1" xmlns="http://www.w3.org/2000/svg">
<rect x="0" y="0" width="100%" height="100%" fill="currentcolor"></rect>
</svg>
</div>
</html>
163 changes: 163 additions & 0 deletions lib/markup/navigation-menu.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,163 @@
<!DOCTYPE html>

<html lang="en">
<div class="page">

<header role="banner">
<div class="title">Mythical University</div>
<div class="tagline">Using a Menubar for navigation links</div>
</header>
<nav aria-label="Mythical University">
<ul class="menubar-navigation" role="menubar" aria-label="Mythical University">
<li role="none">
<a role="menuitem" href="#home"> Home </a>
</li>
<li role="none">
<a role="menuitem" aria-haspopup="true" aria-expanded="false" href="#about">
About
<svg xmlns="http://www.w3.org/2000/svg" class="down" width="12" height="9" viewBox="0 0 12 9">
<polygon points="1 0, 11 0, 6 8"></polygon>
</svg>
</a>
<ul role="menu" aria-label="About">
<li role="none">
<a role="menuitem" href="#overview">Overview</a>
</li>
<li role="none">
<a role="menuitem" href="#administration">Administration</a>
</li>
<li role="none">
<a role="menuitem" aria-haspopup="true" aria-expanded="false" href="#facts">
Facts
<svg xmlns="http://www.w3.org/2000/svg" class="right" width="9" height="12" viewBox="0 0 9 12">
<polygon points="0 1, 0 11, 8 6"></polygon>
</svg>
</a>
<ul role="menu" aria-label="Facts">
<li role="none">
<a role="menuitem" href="#history">History</a>
</li>
<li role="none">
<a role="menuitem" href="#current-statistics">Current Statistics</a>
</li>
<li role="none">
<a role="menuitem" href="#awards">Awards</a>
</li>
</ul>
</li>
<li role="none">
<a role="menuitem" aria-haspopup="true" aria-expanded="false" href="#campus-tours">
Campus Tours
<svg xmlns="http://www.w3.org/2000/svg" class="right" width="9" height="12" viewBox="0 0 9 12">
<polygon points="0 1, 0 11, 8 6"></polygon>
</svg>
</a>
<ul role="menu" aria-label="Campus Tours">
<li role="none">
<a role="menuitem" href="#for-prospective-students">For prospective students</a>
</li>
<li role="none">
<a role="menuitem" href="#for-alumni">For alumni</a>
</li>
<li role="none">
<a role="menuitem" href="#for-visitors">For visitors</a>
</li>
</ul>
</li>
</ul>
</li>
<li role="none">
<a role="menuitem" aria-haspopup="true" aria-expanded="false" href="#admissions">
Admissions
<svg xmlns="http://www.w3.org/2000/svg" class="down" width="12" height="9" viewBox="0 0 12 9">
<polygon points="1 0, 11 0, 6 8"></polygon>
</svg>
</a>
<ul role="menu" aria-label="Admissions">
<li role="none">
<a role="menuitem" href="#apply">Apply</a>
</li>
<li role="none">
<a role="menuitem" aria-haspopup="true" aria-expanded="false" href="#tuition">
Tuition
<svg xmlns="http://www.w3.org/2000/svg" class="right" width="9" height="12" viewBox="0 0 9 12">
<polygon points="0 1, 0 11, 8 6"></polygon>
</svg>
</a>
<ul role="menu" aria-label="Tuition">
<li role="none">
<a role="menuitem" href="#undergraduate">Undergraduate</a>
</li>
<li role="none">
<a role="menuitem" href="#graduate">Graduate</a>
</li>
<li role="none">
<a role="menuitem" href="#professional-schools">Professional Schools</a>
</li>
</ul>
</li>
<li role="none">
<a role="menuitem" href="#sign-up">Sign Up</a>
</li>
<li role="separator"></li>
<li role="none">
<a role="menuitem" href="#visit">Visit</a>
</li>
<li role="none">
<a role="menuitem" href="#photo-tour">Photo Tour</a>
</li>
<li role="none">
<a role="menuitem" href="#connect">Connect</a>
</li>
</ul>
</li>
<li role="none">
<a role="menuitem" aria-haspopup="true" aria-expanded="false" href="#academics">
Academics
<svg xmlns="http://www.w3.org/2000/svg" class="down" width="12" height="9" viewBox="0 0 12 9">
<polygon points="1 0, 11 0, 6 8"></polygon>
</svg>
</a>
<ul role="menu" id="sub-menu-academics" aria-label="Academics">
<li role="none">
<a role="menuitem" href="#colleges-and-schools">Colleges &amp; Schools</a>
</li>
<li role="none">
<a role="menuitem" href="#programs-of-study">Programs of Study</a>
</li>
<li role="none">
<a role="menuitem" href="#honors-programs">Honors Programs</a>
</li>
<li role="none">
<a role="menuitem" href="#online-courses">Online Courses</a>
</li>
<li role="separator"></li>
<li role="none">
<a role="menuitem" href="#course-explorer">Course Explorer</a>
</li>
<li role="none">
<a role="menuitem" href="#register-for-class">Register for Class</a>
</li>
<li role="none">
<a role="menuitem" href="#academic-calendar">Academic Calendar</a>
</li>
<li role="none">
<a role="menuitem" href="#tanscripts">Transcripts</a>
</li>
</ul>
</li>
</ul>
</nav>

<div class="main">
<section aria-labelledby="id-page-title">
<h1 id="id-page-title" class="page_title">Mythical University</h1>
<div class="content">
<p></p>
</div>
</section>
</div>

<footer role="contentinfo">Mythical University footer information</footer>
</div>
</html>
19 changes: 19 additions & 0 deletions lib/markup/radio-group.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
<!DOCTYPE html>

<html lang="en">
<h3 id="group_label_1">Pizza Crust</h3>

<ul class="radiogroup-activedescendant" role="radiogroup" aria-labelledby="group_label_1" aria-activedescendant="rb11" tabindex="0">
<li id="rb11" role="radio" aria-checked="false">Regular crust</li>
<li id="rb12" role="radio" aria-checked="false">Deep dish</li>
<li id="rb13" role="radio" aria-checked="false">Thin crust</li>
</ul>

<h3 id="group_label_2">Pizza Delivery</h3>

<ul class="radiogroup-activedescendant" role="radiogroup" aria-labelledby="group_label_2" aria-activedescendant="rb21" tabindex="0">
<li id="rb21" role="radio" aria-checked="false">Pick up</li>
<li id="rb22" role="radio" aria-checked="false">Home Delivery</li>
<li id="rb23" role="radio" aria-checked="false">Dine in Restaurant</li>
</ul>
</html>
30 changes: 30 additions & 0 deletions lib/markup/switch.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
<!DOCTYPE html>

<html lang="en">
<fieldset>
<legend>Accessibility Preferences</legend>
<label>
<span class="label">Reduced motion</span>
<input id="id-switch-1" type="checkbox" role="switch">
<span class="state">
<span class="container">
<span class="position"> </span>
</span>
<span class="on" aria-hidden="true">On</span>
<span class="off" aria-hidden="true">Off</span>
</span>
</label>

<label>
<span class="label">Show captions</span>
<input id="id-switch-2" type="checkbox" role="switch">
<span class="state">
<span class="container">
<span class="position"> </span>
</span>
<span class="on" aria-hidden="true">On</span>
<span class="off" aria-hidden="true">Off</span>
</span>
</label>
</fieldset>
</html>
51 changes: 51 additions & 0 deletions lib/markup/tabs.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,51 @@
<!DOCTYPE html>

<html lang="en">
<div class="tabs">
<h3 id="tablist-1">Danish Composers</h3>
<div role="tablist" aria-labelledby="tablist-1" class="automatic">
<button id="tab-1" type="button" role="tab" aria-selected="true" aria-controls="tabpanel-1">
<span class="focus">Maria Ahlefeldt</span>
</button>
<button id="tab-2" type="button" role="tab" aria-selected="false" aria-controls="tabpanel-2" tabindex="-1">
<span class="focus">Carl Andersen</span>
</button>
<button id="tab-3" type="button" role="tab" aria-selected="false" aria-controls="tabpanel-3" tabindex="-1">
<span class="focus">Ida da Fonseca</span>
</button>
<button id="tab-4" type="button" role="tab" aria-selected="false" aria-controls="tabpanel-4" tabindex="-1">
<span class="focus">Peter Müller</span>
</button>
</div>

<div id="tabpanel-1" role="tabpanel" tabindex="0" aria-labelledby="tab-1">
<p>
Maria Theresia Ahlefeldt (16 January 1755 – 20 December 1810) was a Danish, (originally German), composer.
She is known as the first female composer in Denmark.
Maria Theresia composed music for several ballets, operas, and plays of the royal theatre.
She was given good critic as a composer and described as a “<span lang="da">virkelig Tonekunstnerinde</span>” ('a True Artist of Music').
</p>
</div>
<div id="tabpanel-2" role="tabpanel" tabindex="0" aria-labelledby="tab-2" class="is-hidden">
<p>
Carl Joachim Andersen (29 April 1847 – 7 May 1909) was a Danish flutist, conductor and composer born in Copenhagen, son of the flutist Christian Joachim Andersen.
Both as a virtuoso and as composer of flute music, he is considered one of the best of his time.
He was considered to be a tough leader and teacher and demanded as such a lot from his orchestras but through that style he reached a high level.
</p>
</div>
<div id="tabpanel-3" role="tabpanel" tabindex="0" aria-labelledby="tab-3" class="is-hidden">
<p>
Ida Henriette da Fonseca (July 27, 1802 – July 6, 1858) was a Danish opera singer and composer.
Ida Henriette da Fonseca was the daughter of Abraham da Fonseca (1776–1849) and Marie Sofie Kiærskou (1784–1863).
She and her sister Emilie da Fonseca were students of Giuseppe Siboni, choir master of the Opera in Copenhagen.
She was given a place at the royal Opera alongside her sister the same year she debuted in 1827.
</p>
</div>
<div id="tabpanel-4" role="tabpanel" tabindex="0" aria-labelledby="tab-4" class="is-hidden">
<p>
Peter Erasmus Lange-Müller (1 December 1850 – 26 February 1926) was a Danish composer and pianist.
His compositional style was influenced by Danish folk music and by the work of Robert Schumann; Johannes Brahms; and his Danish countrymen, including J.P.E. Hartmann.
</p>
</div>
</div>
</html>
Loading

0 comments on commit 97aa084

Please sign in to comment.