Skip to content

Commit e1de24d

Browse files
WEBGRSWEBGRS
committed
Front page: drop popular-course chips and search examples; tool cards in browser frames on gradient panels with icons, checks and an Open button
1 parent d4deec1 commit e1de24d

1 file changed

Lines changed: 65 additions & 40 deletions

File tree

‎index.html‎

Lines changed: 65 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -53,10 +53,6 @@
5353
.search input::placeholder { color: #5f7480; }
5454
.search button { border: 0; border-radius: 999px; background: var(--navy); color: #fff; font: 700 16px Archivo, sans-serif; padding: 0 24px; cursor: pointer; }
5555
.search button:hover { background: var(--navy-2); }
56-
.popular { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 16px auto 0; max-width: 720px; font-size: 14px; }
57-
.popular span { padding: 6px 4px; font-weight: 600; text-shadow: 0 1px 8px rgba(8,30,50,.5); }
58-
.popular a { text-decoration: none; background: rgba(255,255,255,.9); color: var(--ink); border-radius: 999px; padding: 6px 13px; font-weight: 600; }
59-
.popular a:hover { background: #fff; }
6056
.credit { position: absolute; z-index: 1; right: 14px; bottom: 10px; font-size: 12px; color: rgba(255,255,255,.92); text-shadow: 0 1px 4px rgba(0,0,0,.6); }
6157
.credit a { color: inherit; }
6258

@@ -69,18 +65,42 @@
6965
.tools { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 28px; }
7066
.tool:nth-child(1), .tool:nth-child(4) { grid-column: span 7; }
7167
.tool:nth-child(2), .tool:nth-child(3) { grid-column: span 5; }
72-
.tool > a { display: flex; flex-direction: column; height: 100%; text-decoration: none; border: 1px solid var(--line); border-radius: 20px; overflow: hidden; background: #fff; transition: box-shadow .2s, transform .2s; }
73-
.tool > a:hover { box-shadow: 0 14px 40px rgba(15,42,58,.12); transform: translateY(-3px); }
74-
.shot { display: block; background: var(--accent); padding: 24px 24px 0; height: 300px; overflow: hidden; }
75-
.shot img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: left top; border-radius: 10px 10px 0 0; box-shadow: 0 10px 30px rgba(15,42,58,.25); }
76-
.t-courses { --accent: var(--courses); } .t-housing { --accent: var(--housing); } .t-food { --accent: var(--food); } .t-guide { --accent: var(--guide); }
77-
.tool .txt { display: block; padding: 22px 24px 24px; }
78-
.tool h3 { margin: 0 0 6px; font-size: 26px; line-height: 1.15; font-weight: 800; display: flex; align-items: center; gap: 10px; }
79-
.tool h3::before { content: ""; width: 12px; height: 12px; border-radius: 4px; background: var(--accent); flex: none; }
80-
.tool p { margin: 0 0 12px; color: var(--ink-2); }
81-
.feat { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; font-size: 15px; }
82-
.feat li { display: flex; gap: 9px; align-items: baseline; }
83-
.feat li::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); flex: none; transform: translateY(-1px); }
68+
.t-courses { --a: #e9a23b; --a2: #f8d27f; --ai: #95560a; --at: #fdf2e0; }
69+
.t-housing { --a: #2f7fb0; --a2: #7fc3e8; --ai: #1c5f88; --at: #e5f1f9; }
70+
.t-food { --a: #5c9b38; --a2: #a9d67c; --ai: #3a6e1f; --at: #ebf5e2; }
71+
.t-guide { --a: #c4505c; --a2: #f0a0a6; --ai: #9e3240; --at: #fbe8ea; }
72+
.tool > a {
73+
display: flex; flex-direction: column; height: 100%; text-decoration: none; background: #fff; border-radius: 24px; overflow: hidden;
74+
box-shadow: 0 1px 2px rgba(15,42,58,.06), 0 8px 28px rgba(15,42,58,.09); transition: box-shadow .25s, transform .25s;
75+
}
76+
.tool > a:hover { transform: translateY(-4px); box-shadow: 0 2px 4px rgba(15,42,58,.06), 0 20px 50px rgba(15,42,58,.16); }
77+
.shot {
78+
display: block; height: 310px; padding: 28px 28px 0; overflow: hidden;
79+
background: radial-gradient(120% 90% at 0% 0%, rgba(255,255,255,.38), rgba(255,255,255,0) 55%), linear-gradient(135deg, var(--a), var(--a2));
80+
}
81+
.win {
82+
display: flex; flex-direction: column; height: 100%; background: #fff; border-radius: 12px 12px 0 0; overflow: hidden;
83+
box-shadow: 0 18px 40px rgba(15,42,58,.28); transform: translateY(8px); transition: transform .3s ease;
84+
}
85+
.tool > a:hover .win { transform: translateY(0); }
86+
.bar { flex: none; display: flex; align-items: center; gap: 6px; height: 28px; padding: 0 12px; background: #f2f4f6; border-bottom: 1px solid #e2e7eb; }
87+
.bar i { width: 9px; height: 9px; border-radius: 50%; }
88+
.bar i:nth-child(1) { background: #ff6159; } .bar i:nth-child(2) { background: #ffbd2e; } .bar i:nth-child(3) { background: #28c941; }
89+
.bar em { margin-left: 8px; min-width: 0; font: 500 12px Archivo, sans-serif; color: #4f626d; background: #fff; border-radius: 6px; padding: 2px 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
90+
.win img { display: block; width: 100%; flex: 1; min-height: 0; object-fit: cover; object-position: left top; }
91+
.txt { display: flex; flex-direction: column; flex: 1; padding: 24px 28px 26px; }
92+
.head { display: flex; align-items: center; gap: 14px; margin-bottom: 10px; }
93+
.ico { flex: none; width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; background: var(--at); color: var(--ai); }
94+
.ico svg { width: 24px; height: 24px; }
95+
.tool h3 { margin: 0; font-size: 27px; line-height: 1.12; font-weight: 800; }
96+
.tool p { margin: 0 0 14px; color: var(--ink-2); }
97+
.feat { margin: 0 0 22px; padding: 0; list-style: none; display: grid; gap: 8px; font-size: 15px; }
98+
.feat li { display: flex; gap: 10px; align-items: flex-start; }
99+
.feat li::before { content: ""; flex: none; width: 18px; height: 18px; margin-top: 2px; background: var(--ai);
100+
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7'/%3E%3C/svg%3E") center / contain no-repeat; }
101+
.go { margin-top: auto; align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 15px; color: var(--ai); background: var(--at); border-radius: 999px; padding: 9px 18px; }
102+
.go svg { width: 16px; height: 16px; transition: transform .2s; }
103+
.tool > a:hover .go svg { transform: translateX(3px); }
84104

85105
/* News */
86106
.news { background: var(--band); }
@@ -131,7 +151,8 @@
131151
.search input { font-size: 16px; padding: 10px 12px; }
132152
.search button { padding: 0 16px; }
133153
.sec { padding: 52px 0; }
134-
.shot { padding: 14px 14px 0; }
154+
.shot { padding: 16px 16px 0; }
155+
.txt { padding: 20px 20px 22px; }
135156
.tool h3 { font-size: 23px; }
136157
.links { grid-template-columns: 1fr; }
137158
footer .wrap { grid-template-columns: 1fr; }
@@ -162,17 +183,9 @@
162183
<div class="hero-in wrap">
163184
<h1 id="h1" data-i18n="h1">Everything for student life in Madison</h1>
164185
<form class="search" action="https://courses.madisonstudents.com/" method="get" role="search">
165-
<input name="q" type="search" autocomplete="off" aria-label="Search courses" data-i18n-ph="ph" placeholder="Search courses: CS 577, calculus, an instructor…">
186+
<input name="q" type="search" autocomplete="off" aria-label="Search courses" data-i18n-ph="ph" placeholder="Search courses">
166187
<button type="submit" data-i18n="go">Search</button>
167188
</form>
168-
<div class="popular">
169-
<span data-i18n="popular">Popular:</span>
170-
<a href="https://courses.madisonstudents.com/?q=COMP+SCI+300">COMP SCI 300</a>
171-
<a href="https://courses.madisonstudents.com/?q=MATH+234">MATH 234</a>
172-
<a href="https://courses.madisonstudents.com/?q=STAT+240">STAT 240</a>
173-
<a href="https://courses.madisonstudents.com/?q=CHEM+103">CHEM 103</a>
174-
<a href="https://courses.madisonstudents.com/?q=COMP+SCI+220">COMP SCI 220</a>
175-
</div>
176189
</div>
177190
<div class="credit"><span data-i18n="photo">Photo</span>: <a href="https://commons.wikimedia.org/wiki/File:State_of_the_Map_US_2026_capitol_photo_1.jpg">Justin Meyers</a></div>
178191
</section>
@@ -181,28 +194,40 @@ <h1 id="h1" data-i18n="h1">Everything for student life in Madison</h1>
181194
<div class="sec-h"><h2 id="tools-h" data-i18n="toolsH">Tools</h2></div>
182195
<ul class="tools">
183196
<li class="tool t-courses"><a href="https://courses.madisonstudents.com/">
184-
<span class="shot"><img src="img/courses.webp" width="960" height="600" alt="" loading="lazy"></span>
185-
<span class="txt"><h3 data-i18n="courses">Courses</h3>
197+
<span class="shot"><span class="win"><span class="bar"><i></i><i></i><i></i><em>courses.madisonstudents.com</em></span><img src="img/courses.webp" width="960" height="600" alt="" loading="lazy"></span></span>
198+
<span class="txt">
199+
<span class="head"><span class="ico"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 19V5a2 2 0 0 1 2-2h13v15H6a2 2 0 0 0-2 2z"/><path d="M4 19a2 2 0 0 0 2 2h13"/><path d="M9 8h6M9 12h4"/></svg></span><h3 data-i18n="courses">Courses</h3></span>
186200
<p data-i18n="coursesD">Look up any UW–Madison course before you enroll.</p>
187-
<ul class="feat"><li data-i18n="c1">Grade distributions by term and by instructor</li><li data-i18n="c2">This term's sections, times and open seats</li><li data-i18n="c3">A planner that builds clash-free schedules</li></ul></span>
201+
<ul class="feat"><li data-i18n="c1">Grade distributions by term and by instructor</li><li data-i18n="c2">This term's sections, times and open seats</li><li data-i18n="c3">A planner that builds clash-free schedules</li></ul>
202+
<span class="go"><span data-i18n="open">Open</span><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12h14M13 6l6 6-6 6"/></svg></span>
203+
</span>
188204
</a></li>
189205
<li class="tool t-housing"><a href="https://housing.madisonstudents.com/">
190-
<span class="shot"><img src="img/housing.webp" width="960" height="600" alt="" loading="lazy"></span>
191-
<span class="txt"><h3 data-i18n="housing">Housing</h3>
206+
<span class="shot"><span class="win"><span class="bar"><i></i><i></i><i></i><em>housing.madisonstudents.com</em></span><img src="img/housing.webp" width="960" height="600" alt="" loading="lazy"></span></span>
207+
<span class="txt">
208+
<span class="head"><span class="ico"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 11l9-7 9 7"/><path d="M5 10v10h14V10"/><path d="M10 20v-6h4v6"/></svg></span><h3 data-i18n="housing">Housing</h3></span>
192209
<p data-i18n="housingD">Rentals near campus from landlord sites and the UW listings.</p>
193-
<ul class="feat"><li data-i18n="h1b">Photo cards and a map</li><li data-i18n="h2b">Prices per person or for the whole unit</li><li data-i18n="h3b">Walking time and the nearest bus stops</li></ul></span>
210+
<ul class="feat"><li data-i18n="h1b">Photo cards and a map</li><li data-i18n="h2b">Prices per person or for the whole unit</li><li data-i18n="h3b">Walking time and the nearest bus stops</li></ul>
211+
<span class="go"><span data-i18n="open">Open</span><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12h14M13 6l6 6-6 6"/></svg></span>
212+
</span>
194213
</a></li>
195214
<li class="tool t-food"><a href="https://food.madisonstudents.com/">
196-
<span class="shot"><img src="img/food.webp" width="960" height="600" alt="" loading="lazy"></span>
197-
<span class="txt"><h3 data-i18n="food">Food</h3>
215+
<span class="shot"><span class="win"><span class="bar"><i></i><i></i><i></i><em>food.madisonstudents.com</em></span><img src="img/food.webp" width="960" height="600" alt="" loading="lazy"></span></span>
216+
<span class="txt">
217+
<span class="head"><span class="ico"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M7 3v8a2 2 0 0 0 2 2v8"/><path d="M11 3v8a2 2 0 0 1-2 2"/><path d="M17 21V3c-2 1-3 4-3 8h3"/></svg></span><h3 data-i18n="food">Food</h3></span>
198218
<p data-i18n="foodD">Every place to eat in Madison on one map.</p>
199-
<ul class="feat"><li data-i18n="f1">Ratings from six platforms, combined</li><li data-i18n="f2">Which delivery apps carry each place</li><li data-i18n="f3">Open-now filter and a random pick</li></ul></span>
219+
<ul class="feat"><li data-i18n="f1">Ratings from six platforms, combined</li><li data-i18n="f2">Which delivery apps carry each place</li><li data-i18n="f3">Open-now filter and a random pick</li></ul>
220+
<span class="go"><span data-i18n="open">Open</span><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12h14M13 6l6 6-6 6"/></svg></span>
221+
</span>
200222
</a></li>
201223
<li class="tool t-guide"><a href="https://guide.madisonstudents.com/">
202-
<span class="shot"><img src="img/guide.webp" width="960" height="600" alt="" loading="lazy"></span>
203-
<span class="txt"><h3 data-i18n="guide">Campus guide</h3>
224+
<span class="shot"><span class="win"><span class="bar"><i></i><i></i><i></i><em>guide.madisonstudents.com</em></span><img src="img/guide.webp" width="960" height="600" alt="" loading="lazy"></span></span>
225+
<span class="txt">
226+
<span class="head"><span class="ico"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 21s-7-6.2-7-12a7 7 0 0 1 14 0c0 5.8-7 12-7 12z"/><circle cx="12" cy="9" r="2.5"/></svg></span><h3 data-i18n="guide">Campus guide</h3></span>
204227
<p data-i18n="guideD">The everyday places around campus, explained.</p>
205-
<ul class="feat"><li data-i18n="g1">Groceries, clinics, campus offices, gyms and banks</li><li data-i18n="g2">Hours, phone and address, each with its source</li><li data-i18n="g3">Ask a question in English or Chinese</li></ul></span>
228+
<ul class="feat"><li data-i18n="g1">Groceries, clinics, campus offices, gyms and banks</li><li data-i18n="g2">Hours, phone and address, each with its source</li><li data-i18n="g3">Ask a question in English or Chinese</li></ul>
229+
<span class="go"><span data-i18n="open">Open</span><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12h14M13 6l6 6-6 6"/></svg></span>
230+
</span>
206231
</a></li>
207232
</ul>
208233
</div></section>
@@ -251,8 +276,8 @@ <h2 id="news-h" data-i18n="newsH">Today in Madison</h2>
251276
(function () {
252277
var ZH = {
253278
courses: "选课", housing: "租房", food: "吃饭", guide: "校园指南", news: "新闻",
254-
h1: "在麦迪逊上学，常用的都在这里", ph: "搜课程：CS 577、微积分、老师名字……", go: "搜索", popular: "热门：", photo: "摄影",
255-
toolsH: "工具",
279+
h1: "在麦迪逊上学，常用的都在这里", ph: "搜索课程", go: "搜索", photo: "摄影",
280+
toolsH: "工具", open: "打开",
256281
coursesD: "选课前把威大任何一门课查清楚。", c1: "历年成绩分布，可按学期、按老师看", c2: "本学期的班级、上课时间和剩余名额", c3: "自动排出不冲突的课表",
257282
housingD: "校园周边的出租房，汇总房东官网和学校租房平台。", h1b: "照片卡片和地图两种看法", h2b: "按每人或整套看价格", h3b: "步行时间和最近的公交站",
258283
foodD: "麦迪逊所有能吃饭的地方，放在一张地图上。", f1: "六个平台的评分合在一起", f2: "每家店能在哪些外卖平台点", f3: "只看营业中，或者随机帮你挑一家",

0 commit comments

Comments
 (0)