Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>ISU Permanent Art Collection | Cunningham Memorial Library</title> | |
| <!-- Fonts --> | |
| <link rel="preconnect" href="https://fonts.googleapis.com"> | |
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> | |
| <link | |
| href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&family=Playfair+Display:ital,wght@0,400;0,700;1,400&display=swap" | |
| rel="stylesheet"> | |
| <!-- Icons --> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| /* --- CSS VARIABLES & RESET --- */ | |
| :root { | |
| --isu-blue: #003087; | |
| --isu-blue-dark: #001f5e; | |
| --isu-blue-light: #00419e; | |
| --isu-gold: #C9A84C; | |
| --isu-gold-dim: rgba(201, 168, 76, 0.5); | |
| --bg-white: #ffffff; | |
| --bg-warm: #F9F7F4; | |
| --text-dark: #1A1A1A; | |
| --text-gray: #666666; | |
| --font-serif: 'Playfair Display', Georgia, serif; | |
| --font-sans: 'Inter', system-ui, -apple-system, sans-serif; | |
| --transition: all 0.25s ease; | |
| } | |
| * { | |
| box-sizing: border-box; | |
| margin: 0; | |
| padding: 0; | |
| } | |
| html { | |
| scroll-behavior: smooth; | |
| } | |
| body { | |
| font-family: var(--font-sans); | |
| background-color: var(--bg-white); | |
| color: var(--text-dark); | |
| line-height: 1.6; | |
| overflow-x: hidden; | |
| } | |
| h1, | |
| h2, | |
| h3, | |
| h4, | |
| h5, | |
| h6 { | |
| font-family: var(--font-serif); | |
| font-weight: 700; | |
| line-height: 1.2; | |
| } | |
| a { | |
| text-decoration: none; | |
| color: inherit; | |
| transition: var(--transition); | |
| } | |
| ul { | |
| list-style: none; | |
| } | |
| img { | |
| max-width: 100%; | |
| display: block; | |
| object-fit: cover; | |
| } | |
| /* --- UTILITIES --- */ | |
| .container { | |
| width: 90%; | |
| max-width: 1400px; | |
| margin: 0 auto; | |
| padding: 0 1rem; | |
| } | |
| .section-label { | |
| font-size: 0.75rem; | |
| text-transform: uppercase; | |
| letter-spacing: 0.15em; | |
| color: var(--text-gray); | |
| font-weight: 600; | |
| margin-bottom: 0.5rem; | |
| display: block; | |
| } | |
| .btn { | |
| display: inline-block; | |
| padding: 1rem 2rem; | |
| font-weight: 600; | |
| text-transform: uppercase; | |
| letter-spacing: 0.05em; | |
| border: none; | |
| cursor: pointer; | |
| transition: var(--transition); | |
| font-size: 0.9rem; | |
| } | |
| .btn-primary { | |
| background-color: var(--bg-white); | |
| color: var(--isu-blue); | |
| } | |
| .btn-primary:hover { | |
| background-color: var(--isu-gold); | |
| color: var(--isu-blue-dark); | |
| } | |
| .btn-secondary { | |
| background-color: var(--isu-blue); | |
| color: var(--bg-white); | |
| border: 1px solid var(--isu-blue); | |
| } | |
| .btn-secondary:hover { | |
| background-color: var(--isu-gold); | |
| border-color: var(--isu-gold); | |
| color: var(--isu-blue); | |
| } | |
| /* --- NAVIGATION --- */ | |
| .navbar { | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| background-color: var(--isu-blue); | |
| color: white; | |
| z-index: 1000; | |
| padding: 1rem 0; | |
| box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); | |
| } | |
| .nav-container { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| } | |
| .brand { | |
| display: flex; | |
| align-items: center; | |
| font-family: var(--font-serif); | |
| font-size: 1.25rem; | |
| font-weight: 700; | |
| } | |
| .brand-accent { | |
| width: 4px; | |
| height: 24px; | |
| background-color: var(--isu-gold); | |
| margin-right: 12px; | |
| display: block; | |
| } | |
| .nav-links { | |
| display: flex; | |
| gap: 2rem; | |
| } | |
| .nav-links a { | |
| font-size: 0.9rem; | |
| font-weight: 500; | |
| opacity: 0.9; | |
| } | |
| .nav-links a:hover, | |
| .nav-links a.active { | |
| opacity: 1; | |
| color: var(--isu-gold); | |
| } | |
| .mobile-toggle { | |
| display: none; | |
| font-size: 1.5rem; | |
| cursor: pointer; | |
| } | |
| /* --- HERO SECTION --- */ | |
| .hero { | |
| height: 90vh; | |
| min-height: 600px; | |
| background: linear-gradient(135deg, var(--isu-blue-dark) 0%, var(--isu-blue) 50%, var(--isu-blue-light) 100%); | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| text-align: center; | |
| color: white; | |
| position: relative; | |
| margin-top: 60px; | |
| /* Offset fixed nav */ | |
| } | |
| .hero-content { | |
| max-width: 800px; | |
| padding: 2rem; | |
| z-index: 2; | |
| } | |
| .hero-sub { | |
| font-size: 0.8rem; | |
| text-transform: uppercase; | |
| letter-spacing: 0.2em; | |
| margin-bottom: 1.5rem; | |
| opacity: 0.8; | |
| display: block; | |
| } | |
| .hero h1 { | |
| font-size: clamp(2.5rem, 5vw, 4.5rem); | |
| margin-bottom: 1.5rem; | |
| } | |
| .hero p { | |
| font-size: 1.2rem; | |
| margin-bottom: 2.5rem; | |
| opacity: 0.9; | |
| font-weight: 300; | |
| } | |
| /* --- STATS SECTION --- */ | |
| .stats-section { | |
| padding: 5rem 0; | |
| background-color: var(--bg-white); | |
| } | |
| .stats-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); | |
| gap: 2rem; | |
| margin-top: 2rem; | |
| } | |
| .stat-card { | |
| border-left: 4px solid var(--isu-blue); | |
| padding: 1rem 1.5rem; | |
| transition: var(--transition); | |
| } | |
| .stat-card:hover { | |
| border-left-color: var(--isu-gold); | |
| transform: translateX(5px); | |
| } | |
| .stat-number { | |
| font-family: var(--font-serif); | |
| font-size: 2.5rem; | |
| color: var(--isu-blue); | |
| font-weight: 700; | |
| display: block; | |
| margin-bottom: 0.5rem; | |
| } | |
| .stat-label { | |
| font-size: 0.75rem; | |
| text-transform: uppercase; | |
| letter-spacing: 0.1em; | |
| color: var(--text-gray); | |
| } | |
| /* --- CATEGORIES (GLASSMORPHISM) --- */ | |
| .categories-section { | |
| padding: 6rem 0; | |
| background: linear-gradient(135deg, #001f5e 0%, #003087 100%); | |
| color: white; | |
| } | |
| .categories-header { | |
| text-align: center; | |
| margin-bottom: 3rem; | |
| } | |
| .categories-header .section-label { | |
| color: rgba(255, 255, 255, 0.7); | |
| } | |
| .categories-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); | |
| gap: 1.5rem; | |
| } | |
| .cat-card { | |
| background: rgba(255, 255, 255, 0.08); | |
| border: 1px solid rgba(255, 255, 255, 0.18); | |
| border-radius: 14px; | |
| backdrop-filter: blur(12px); | |
| -webkit-backdrop-filter: blur(12px); | |
| padding: 2rem; | |
| transition: var(--transition); | |
| position: relative; | |
| overflow: hidden; | |
| cursor: pointer; | |
| display: flex; | |
| flex-direction: column; | |
| justify-content: space-between; | |
| height: 200px; | |
| } | |
| .cat-card:hover { | |
| border-color: rgba(201, 168, 76, 0.5); | |
| box-shadow: 0 0 28px rgba(201, 168, 76, 0.25); | |
| transform: translateY(-5px); | |
| } | |
| .cat-card:hover h3, | |
| .cat-card:hover .cat-link { | |
| color: var(--isu-gold); | |
| } | |
| .cat-card h3 { | |
| font-size: 1.5rem; | |
| margin-bottom: 0.5rem; | |
| } | |
| .cat-card p { | |
| font-size: 0.9rem; | |
| opacity: 0.8; | |
| } | |
| .cat-link { | |
| font-size: 0.85rem; | |
| font-weight: 600; | |
| text-transform: uppercase; | |
| letter-spacing: 0.05em; | |
| margin-top: auto; | |
| display: inline-block; | |
| } | |
| .badge-new { | |
| position: absolute; | |
| top: 1rem; | |
| right: 1rem; | |
| background-color: var(--isu-gold); | |
| color: var(--isu-blue-dark); | |
| font-size: 0.6rem; | |
| font-weight: 700; | |
| padding: 2px 6px; | |
| border-radius: 4px; | |
| text-transform: uppercase; | |
| } | |
| /* --- FEATURED WORKS --- */ | |
| .featured-section { | |
| padding: 6rem 0; | |
| background-color: var(--bg-warm); | |
| } | |
| .featured-header { | |
| text-align: center; | |
| margin-bottom: 3rem; | |
| } | |
| .artwork-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); | |
| gap: 2rem; | |
| } | |
| .art-card { | |
| background: white; | |
| box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05); | |
| transition: var(--transition); | |
| cursor: pointer; | |
| overflow: hidden; | |
| } | |
| .art-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); | |
| } | |
| .art-img-wrapper { | |
| width: 100%; | |
| height: 300px; | |
| overflow: hidden; | |
| background-color: #eee; | |
| } | |
| .art-img-wrapper img { | |
| width: 100%; | |
| height: 100%; | |
| object-fit: cover; | |
| transition: transform 0.5s ease; | |
| } | |
| .art-card:hover .art-img-wrapper img { | |
| transform: scale(1.05); | |
| } | |
| .art-info { | |
| padding: 1.5rem; | |
| } | |
| .art-accession { | |
| font-size: 0.7rem; | |
| color: #999; | |
| margin-bottom: 0.5rem; | |
| display: block; | |
| } | |
| .art-title { | |
| font-family: var(--font-serif); | |
| font-style: italic; | |
| font-size: 1.2rem; | |
| margin-bottom: 0.25rem; | |
| color: var(--text-dark); | |
| } | |
| .art-artist { | |
| font-weight: 600; | |
| font-size: 0.9rem; | |
| color: var(--isu-blue); | |
| margin-bottom: 0.5rem; | |
| } | |
| .art-meta { | |
| font-size: 0.8rem; | |
| color: var(--text-gray); | |
| } | |
| /* --- BROWSE / COLLECTION PAGE --- */ | |
| .browse-layout { | |
| display: grid; | |
| grid-template-columns: 280px 1fr; | |
| gap: 3rem; | |
| padding-top: 6rem; | |
| min-height: 80vh; | |
| } | |
| .filter-sidebar { | |
| position: sticky; | |
| top: 100px; | |
| height: fit-content; | |
| padding: 1.5rem; | |
| background: white; | |
| border: 1px solid #eee; | |
| border-radius: 8px; | |
| } | |
| .filter-group { | |
| margin-bottom: 2rem; | |
| } | |
| .filter-title { | |
| font-size: 0.8rem; | |
| font-weight: 700; | |
| text-transform: uppercase; | |
| letter-spacing: 0.1em; | |
| margin-bottom: 1rem; | |
| color: var(--isu-blue); | |
| } | |
| .search-input { | |
| width: 100%; | |
| padding: 0.8rem; | |
| border: 1px solid #ddd; | |
| border-radius: 4px; | |
| font-family: var(--font-sans); | |
| margin-bottom: 1rem; | |
| } | |
| .filter-options label { | |
| display: flex; | |
| align-items: center; | |
| margin-bottom: 0.5rem; | |
| font-size: 0.9rem; | |
| cursor: pointer; | |
| color: var(--text-gray); | |
| } | |
| .filter-options input { | |
| margin-right: 10px; | |
| accent-color: var(--isu-blue); | |
| } | |
| .collection-results { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); | |
| gap: 1.5rem; | |
| padding-bottom: 4rem; | |
| } | |
| /* --- ARTIST A-Z --- */ | |
| .artist-page { | |
| padding-top: 8rem; | |
| padding-bottom: 4rem; | |
| } | |
| .artist-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); | |
| gap: 1rem; | |
| } | |
| .artist-item { | |
| padding: 1rem; | |
| border-bottom: 1px solid #eee; | |
| transition: var(--transition); | |
| cursor: pointer; | |
| } | |
| .artist-item:hover { | |
| background-color: var(--bg-warm); | |
| color: var(--isu-blue); | |
| padding-left: 1.5rem; | |
| } | |
| .artist-name { | |
| font-family: var(--font-serif); | |
| font-size: 1.2rem; | |
| } | |
| /* --- DETAIL VIEW --- */ | |
| .detail-view { | |
| padding-top: 8rem; | |
| padding-bottom: 4rem; | |
| } | |
| .detail-container { | |
| display: grid; | |
| grid-template-columns: 1.5fr 1fr; | |
| gap: 4rem; | |
| align-items: start; | |
| } | |
| .detail-image { | |
| width: 100%; | |
| box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15); | |
| } | |
| .detail-info h1 { | |
| font-size: 3rem; | |
| margin-bottom: 0.5rem; | |
| color: var(--isu-blue); | |
| } | |
| .detail-meta-table { | |
| width: 100%; | |
| margin: 2rem 0; | |
| border-top: 1px solid #ddd; | |
| } | |
| .detail-row { | |
| display: flex; | |
| border-bottom: 1px solid #eee; | |
| } | |
| .detail-label { | |
| width: 150px; | |
| font-weight: 600; | |
| font-size: 0.9rem; | |
| padding: 1rem 0; | |
| color: var(--text-gray); | |
| } | |
| .detail-value { | |
| padding: 1rem 0; | |
| font-size: 0.95rem; | |
| } | |
| /* --- FOOTER --- */ | |
| footer { | |
| background-color: var(--isu-blue); | |
| color: white; | |
| padding: 4rem 0 2rem; | |
| } | |
| .footer-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); | |
| gap: 3rem; | |
| margin-bottom: 3rem; | |
| } | |
| .footer-brand { | |
| display: flex; | |
| align-items: center; | |
| font-family: var(--font-serif); | |
| font-size: 1.2rem; | |
| margin-bottom: 1rem; | |
| } | |
| .footer-brand-accent { | |
| width: 4px; | |
| height: 24px; | |
| background-color: var(--isu-gold); | |
| margin-right: 12px; | |
| } | |
| .footer-col h4 { | |
| font-size: 0.9rem; | |
| text-transform: uppercase; | |
| letter-spacing: 0.1em; | |
| margin-bottom: 1.5rem; | |
| color: var(--isu-gold); | |
| } | |
| .footer-links li { | |
| margin-bottom: 0.8rem; | |
| } | |
| .footer-links a:hover { | |
| color: var(--isu-gold); | |
| padding-left: 5px; | |
| } | |
| .contact-info p { | |
| margin-bottom: 0.5rem; | |
| font-size: 0.9rem; | |
| opacity: 0.9; | |
| } | |
| .footer-bottom { | |
| border-top: 1px solid rgba(255, 255, 255, 0.1); | |
| padding-top: 2rem; | |
| text-align: center; | |
| font-size: 0.8rem; | |
| opacity: 0.6; | |
| } | |
| /* --- RESPONSIVE --- */ | |
| @media (max-width: 900px) { | |
| .browse-layout { | |
| grid-template-columns: 1fr; | |
| } | |
| .filter-sidebar { | |
| position: static; | |
| margin-bottom: 2rem; | |
| } | |
| .detail-container { | |
| grid-template-columns: 1fr; | |
| } | |
| } | |
| @media (max-width: 768px) { | |
| .nav-links { | |
| display: none; | |
| flex-direction: column; | |
| position: absolute; | |
| top: 100%; | |
| left: 0; | |
| width: 100%; | |
| background: var(--isu-blue); | |
| padding: 2rem; | |
| text-align: center; | |
| } | |
| .nav-links.active { | |
| display: flex; | |
| } | |
| .mobile-toggle { | |
| display: block; | |
| } | |
| .hero h1 { | |
| font-size: 2.5rem; | |
| } | |
| } | |
| /* Utility to hide sections */ | |
| .view-section { | |
| display: none; | |
| } | |
| .view-section.active { | |
| display: block; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <!-- HEADER --> | |
| <header class="navbar"> | |
| <div class="container nav-container"> | |
| <a href="#" class="brand" onclick="navigateTo('home')"> | |
| <span class="brand-accent"></span> | |
| Permanent Art Collection | |
| </a> | |
| <div class="mobile-toggle" onclick="toggleMobileMenu()"> | |
| <i class="fas fa-bars"></i> | |
| </div> | |
| <nav class="nav-links" id="navLinks"> | |
| <a href="#" onclick="navigateTo('home')">Home</a> | |
| <a href="#" onclick="navigateTo('browse')">Browse Collection</a> | |
| <a href="#" onclick="navigateTo('artists')">Artists A–Z</a> | |
| <a href="#" onclick="navigateTo('about')">About</a> | |
| <a href="#" onclick="navigateTo('visit')">Visit & Research</a> | |
| </nav> | |
| </div> | |
| </header> | |
| <!-- MAIN CONTENT AREA --> | |
| <main> | |
| <!-- HOME PAGE --> | |
| <section id="home" class="view-section active"> | |
| <!-- Hero --> | |
| <div class="hero"> | |
| <div class="hero-content"> | |
| <span class="hero-sub">Cunningham Memorial Library · Special Collections</span> | |
| <h1>A Legacy of Vision</h1> | |
| <p>Explore 4,000 works of American and European significance, from WPA-era murals to the pioneers of Pop Art. | |
| </p> | |
| <button class="btn btn-primary" onclick="navigateTo('browse')">Browse Collection</button> | |
| </div> | |
| </div> | |
| <!-- Stats --> | |
| <div class="container"> | |
| <div class="stats-section"> | |
| <span class="section-label">Collection at a Glance</span> | |
| <div class="stats-grid"> | |
| <div class="stat-card"> | |
| <span class="stat-number">4,000+</span> | |
| <span class="stat-label">Total Works</span> | |
| </div> | |
| <div class="stat-card"> | |
| <span class="stat-number">240+</span> | |
| <span class="stat-label">WPA Pieces</span> | |
| </div> | |
| <div class="stat-card"> | |
| <span class="stat-number">150+</span> | |
| <span class="stat-label">Warhol Works</span> | |
| </div> | |
| <div class="stat-card"> | |
| <span class="stat-number">34</span> | |
| <span class="stat-label">Public Sculptures</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Categories --> | |
| <div class="categories-section"> | |
| <div class="container"> | |
| <div class="categories-header"> | |
| <span class="section-label">Explore By</span> | |
| <h2>Categories</h2> | |
| </div> | |
| <div class="categories-grid" id="categoriesGrid"> | |
| <!-- Injected via JS --> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Featured Works --> | |
| <div class="featured-section"> | |
| <div class="container"> | |
| <div class="featured-header"> | |
| <span class="section-label">Curated Highlights</span> | |
| <h2>Featured Works</h2> | |
| </div> | |
| <div class="artwork-grid" id="featuredGrid"> | |
| <!-- Injected via JS --> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- BROWSE PAGE --> | |
| <section id="browse" class="view-section"> | |
| <div class="container browse-layout"> | |
| <aside class="filter-sidebar"> | |
| <div class="filter-group"> | |
| <div class="filter-title">Search</div> | |
| <input type="text" class="search-input" placeholder="Keywords, artists..." id="searchInput"> | |
| </div> | |
| <div class="filter-group"> | |
| <div class="filter-title">Category</div> | |
| <div class="filter-options" id="categoryFilters"> | |
| <!-- Injected via JS --> | |
| </div> | |
| </div> | |
| <div class="filter-group"> | |
| <button class="btn btn-secondary" style="width:100%" onclick="resetFilters()">Clear Filters</button> | |
| </div> | |
| </aside> | |
| <div> | |
| <div class="section-label" style="margin-bottom: 2rem;"> | |
| <span id="resultCount">0</span> Results | |
| </div> | |
| <div class="collection-results" id="browseGrid"> | |
| <!-- Injected via JS --> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- ARTIST A-Z PAGE --> | |
| <section id="artists" class="view-section"> | |
| <div class="container artist-page"> | |
| <div class="featured-header"> | |
| <span class="section-label">Index</span> | |
| <h2>Artists A–Z</h2> | |
| </div> | |
| <div class="artist-grid" id="artistGrid"> | |
| <!-- Injected via JS --> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- DETAIL PAGE --> | |
| <section id="detail" class="view-section"> | |
| <div class="container detail-view"> | |
| <button class="btn btn-secondary" style="margin-bottom: 2rem;" onclick="navigateTo('browse')"> | |
| <i class="fas fa-arrow-left"></i> Back to Collection | |
| </button> | |
| <div class="detail-container" id="detailContent"> | |
| <!-- Injected via JS --> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- ABOUT PAGE --> | |
| <section id="about" class="view-section"> | |
| <div class="container" style="padding-top: 8rem; max-width: 800px;"> | |
| <span class="section-label">History</span> | |
| <h1 style="font-size: 3rem; margin-bottom: 2rem; color: var(--isu-blue);">About the Collection</h1> | |
| <p style="font-size: 1.2rem; margin-bottom: 2rem;"> | |
| The Indiana State University Permanent Art Collection is a treasure trove of artistic heritage housed within | |
| the Special Collections Department of Cunningham Memorial Library. Established in the 1960s, the collection | |
| has grown to encompass approximately 4,000 works of art. | |
| </p> | |
| <p style="margin-bottom: 2rem;"> | |
| The collection is particularly renowned for its significant holdings of Works Progress Administration (WPA) | |
| art from the 1930s and 40s, including murals and prints that document the American experience during the Great | |
| Depression. Additionally, the university holds one of the largest public collections of Andy Warhol works in | |
| the Midwest, featuring prints from his iconic series. | |
| </p> | |
| <div | |
| style="background: var(--bg-warm); padding: 2rem; border-left: 4px solid var(--isu-gold); margin-top: 3rem;"> | |
| <h3>Donations</h3> | |
| <p style="margin-top: 1rem;">The collection continues to grow through generous donations from alumni, faculty, | |
| and friends of the university. If you are interested in donating to the PAC, please contact Special | |
| Collections.</p> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- VISIT PAGE --> | |
| <section id="visit" class="view-section"> | |
| <div class="container" style="padding-top: 8rem;"> | |
| <div class="browse-layout"> | |
| <div> | |
| <span class="section-label">Location</span> | |
| <h1 style="font-size: 3rem; margin-bottom: 2rem; color: var(--isu-blue);">Visit & Research</h1> | |
| <p style="margin-bottom: 2rem; font-size: 1.1rem;"> | |
| The Permanent Art Collection is located in the Special Collections Department on the 3rd floor of | |
| Cunningham Memorial Library. | |
| </p> | |
| <div style="background: white; padding: 2rem; border: 1px solid #eee; margin-bottom: 2rem;"> | |
| <h3>Hours of Operation</h3> | |
| <p style="margin-top: 1rem;"><strong>Monday – Friday:</strong> 8:00 AM – 4:30 PM</p> | |
| <p><strong>Weekends:</strong> Closed (By Appointment Only)</p> | |
| </div> | |
| <h3>Request an Appointment</h3> | |
| <p style="margin-bottom: 1rem;">To view specific works or conduct research, please fill out the form below. | |
| </p> | |
| <form style="display: grid; gap: 1rem; max-width: 500px;"> | |
| <input type="text" placeholder="Name" class="search-input" style="width: 100%;"> | |
| <input type="email" placeholder="Email" class="search-input" style="width: 100%;"> | |
| <textarea placeholder="Message / Requested Works" style="width: 100%; padding: 1rem; border: 1px solid #ddd; border-radius: 4px; font-family: inherit;" rows="4"></textarea> | |
| <button type="button" class="btn btn-secondary">Send Request</button> | |
| </form> | |
| </div> | |
| <div | |
| style="background: #eee; height: 400px; border-radius: 8px; display: flex; align-items: center; justify-content: center;"> | |
| <p style="color: #999;">[Map Placeholder: 510 N 6½ Street, Terre Haute IN]</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| </main> | |
| <!-- FOOTER --> | |
| <footer> | |
| <div class="container"> | |
| <div class="footer-grid"> | |
| <div class="footer-col"> | |
| <div class="footer-brand"> | |
| <span class="footer-brand-accent"></span> | |
| Permanent Art Collection<br>Indiana State University | |
| </div> | |
| <p style="opacity: 0.8; font-size: 0.9rem; margin-top: 1rem;"> | |
| Cunningham Memorial Library<br> | |
| Special Collections Department<br> | |
| 510 N 6½ Street<br> | |
| Terre Haute IN 47809 | |
| </p> | |
| </div> | |
| <div class="footer-col"> | |
| <h4>Explore</h4> | |
| <ul class="footer-links"> | |
| <li><a href="#" onclick="navigateTo('browse')">Browse Collection</a></li> | |
| <li><a href="#" onclick="navigateTo('artists')">Artists A–Z</a></li> | |
| <li><a href="#" onclick="navigateTo('about')">About the Collection</a></li> | |
| <li><a href="#" onclick="navigateTo('visit')">Visit & Research</a></li> | |
| </ul> | |
| </div> | |
| <div class="footer-col"> | |
| <h4>Contact</h4> | |
| <div class="contact-info"> | |
| <p><i class="fas fa-phone" style="color: var(--isu-gold); margin-right: 8px;"></i> 812-237-2610</p> | |
| <p><i class="fas fa-clock" style="color: var(--isu-gold); margin-right: 8px;"></i> Mon–Fri 8:00 AM–4:30 PM | |
| </p> | |
| <p><i class="fas fa-envelope" style="color: var(--isu-gold); margin-right: 8px;"></i> libspcl@indstate.edu | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="footer-bottom"> | |
| © 2023 Indiana State University. All rights reserved. <span style="margin: 0 10px;">|</span> <a | |
| href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" | |
| style="text-decoration: underline;">Built with anycoder</a> | |
| </div> | |
| </div> | |
| </footer> | |
| <!-- JAVASCRIPT --> | |
| <script> | |
| // --- DATA SEED --- | |
| const artworks = [ | |
| { | |
| id: 1, | |
| artist: "Andy Warhol", | |
| title: "Flowers", | |
| year: "1965", | |
| medium: "Serigraph", | |
| category: "Pop Art", | |
| accession: "1972.04.001", | |
| image: "https://images.unsplash.com/photo-1541963463532-d68292c34b19?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80", | |
| desc: "One of Warhol's most iconic series, exploring themes of nature and mass production." | |
| }, | |
| { | |
| id: 2, | |
| artist: "Joseph Stella", | |
| title: "Smoke Stacks", | |
| year: "1935–36", | |
| medium: "Oil on canvas", | |
| category: "WPA", | |
| accession: "WPA-1935-02", | |
| image: "https://images.unsplash.com/photo-1579783902614-a3fb39279c0f?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80", | |
| desc: "A powerful depiction of industrial America during the New Deal era." | |
| }, | |
| { | |
| id: 3, | |
| artist: "George Marinko", | |
| title: "Moon Ring Fantasy", | |
| year: "1938", | |
| medium: "Oil on panel", | |
| category: "WPA", | |
| accession: "WPA-1938-11", | |
| image: "https://images.unsplash.com/photo-1536924940846-227afb31e2a5?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80", | |
| desc: "Surrealist influences meet Midwestern landscape in this WPA commissioned piece." | |
| }, | |
| { | |
| id: 4, | |
| artist: "Richard Anuszkiewicz", | |
| title: "Untitled (Inward Eye series)", | |
| year: "1970", | |
| medium: "Serigraph", | |
| category: "Op Art", | |
| accession: "1971.02.001", | |
| image: "https://images.unsplash.com/photo-1550684848-fac1c5b4e853?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80", | |
| desc: "A study in color interaction and geometric perception." | |
| }, | |
| { | |
| id: 5, | |
| artist: "Andrew Moore", | |
| title: "County Archives, Vigo County Courthouse", | |
| year: "2011", | |
| medium: "Archival inkjet print", | |
| category: "Contemporary American", | |
| accession: "2012.05.004", | |
| image: "https://images.unsplash.com/photo-1554188248-986adbb73be0?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80", | |
| desc: "Documentary photography capturing the decay and history of public institutions." | |
| }, | |
| { | |
| id: 6, | |
| artist: "Bernard Buffet", | |
| title: "Untitled", | |
| year: "1960s", | |
| medium: "Lithograph on paper", | |
| category: "European Art", | |
| accession: "1965.08.12", | |
| image: "https://images.unsplash.com/photo-1578301978693-85fa9c0320b9?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80", | |
| desc: "Expressive line work characteristic of Buffet's post-war style." | |
| }, | |
| { | |
| id: 7, | |
| artist: "Howard Kalish", | |
| title: "Chorus of Trumpets", | |
| year: "1975", | |
| medium: "Stainless steel, aluminum, urethane", | |
| category: "Public Sculpture", | |
| accession: "SC-1975-01", | |
| image: "https://images.unsplash.com/photo-1558591710-4b4a1ae0f04d?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80", | |
| desc: "Large scale kinetic sculpture installed on campus." | |
| }, | |
| { | |
| id: 8, | |
| artist: "Robert Indiana", | |
| title: "Portfolio of 13 Screenprints", | |
| year: "1960s", | |
| medium: "Screenprint", | |
| category: "Pop Art", | |
| accession: "1969.01.005", | |
| image: "https://images.unsplash.com/photo-1618005182384-a83a8bd57fbe?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80", | |
| desc: "A complete portfolio featuring Indiana's signature hard-edge style." | |
| }, | |
| { | |
| id: 9, | |
| artist: "Pablo Picasso", | |
| title: "Print", | |
| year: "1950s", | |
| medium: "Lithograph", | |
| category: "European Art", | |
| accession: "1958.03.22", | |
| image: "https://images.unsplash.com/photo-1577720580479-7d839d829c73?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80", | |
| desc: "Mid-century lithograph showcasing Picasso's mastery of line." | |
| }, | |
| { | |
| id: 10, | |
| artist: "Jacob Lawrence", | |
| title: "Migration Series #12", | |
| year: "1941", | |
| medium: "Casein tempera", | |
| category: "Black Arts Movement", | |
| accession: "1980.11.04", | |
| image: "https://images.unsplash.com/photo-1582201943021-e8e6444d0159?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80", | |
| desc: "A pivotal work depicting the Great Migration of African Americans." | |
| } | |
| ]; | |
| const categories = [ | |
| { name: "Pop Art", count: "150+ works" }, | |
| { name: "WPA", count: "240+ works" }, | |
| { name: "Contemporary American", count: "500+ works" }, | |
| { name: "European Art", count: "300+ works" }, | |
| { name: "Op Art", count: "8 portfolios" }, | |
| { name: "Public Sculpture", count: "34 works" }, | |
| { name: "ISU Faculty & Alumni", count: "120+ works" }, | |
| { name: "African & Global", count: "200+ works" }, | |
| { name: "Black Arts Movement", count: "New", badge: true } | |
| ]; | |
| // --- STATE & NAVIGATION --- | |
| let currentFilter = 'All'; | |
| function navigateTo(pageId) { | |
| // Hide all sections | |
| document.querySelectorAll('.view-section').forEach(el => el.classList.remove('active')); | |
| // Show target section | |
| document.getElementById(pageId).classList.add('active'); | |
| // Close mobile menu if open | |
| document.getElementById('navLinks').classList.remove('active'); | |
| // Scroll to top | |
| window.scrollTo(0, 0); | |
| // Specific page logic | |
| if(pageId === 'browse') renderBrowse(); | |
| if(pageId === 'artists') renderArtists(); | |
| if(pageId === 'home') renderHome(); | |
| } | |
| function toggleMobileMenu() { | |
| document.getElementById('navLinks').classList.toggle('active'); | |
| } | |
| // --- RENDER FUNCTIONS --- | |
| function createArtCard(art) { | |
| return ` | |
| <div class="art-card" onclick="showDetail(${art.id})"> | |
| <div class="art-img-wrapper"> | |
| <img src="${art.image}" alt="${art.title}" loading="lazy"> | |
| </div> | |
| <div class="art-info"> | |
| <span class="art-accession">${art.accession}</span> | |
| <h3 class="art-title">${art.title}</h3> | |
| <div class="art-artist">${art.artist}</div> | |
| <div class="art-meta">${art.year} · ${art |