diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..1377554 --- /dev/null +++ b/.gitignore @@ -0,0 +1 @@ +*.swp diff --git a/icf.css b/icf.css index c07b283..6ab66d1 100644 --- a/icf.css +++ b/icf.css @@ -26,7 +26,7 @@ em, i { } #head { - background-color: rgb(255, 255, 255); + background-color: #1f618d; height: 80px; left: 0; position: fixed; @@ -34,6 +34,12 @@ em, i { top: 0; z-index: 1; } +#icf_the { + height: 22px; + left: 9px; + position: absolute; + top: 49px; +} #icf_icon { height: 64px; left: 64px; @@ -46,10 +52,20 @@ em, i { position: absolute; top: 49px; } +#link { + display: none; + font-family: Source Serif Semibold; + font-size: 15px; + //font-weight: bold; + position: fixed; + right: 16px; + top: 154px; + z-index: 100; +} #timeline { background-color: rgb(192, 192, 192); - height: 32px; + height: 64px; left: 0; overflow: hidden; position: fixed; @@ -58,32 +74,32 @@ em, i { z-index: 1; } #timeline > img { - height: 32px; + height: 64px; position: absolute; user-select: none; -webkit-user-select: none; } #menu { - background: rgb(255, 255, 255); + background: #1f618d; border-bottom: 1px dotted rgb(255, 128, 0); color: rgb(192, 192, 192); font-family: Source Serif Semibold; font-size: 18px; height: 24px; left: 0; - padding: 8px 64px; + padding: 8px 12px; position: fixed; right: 0; - top: 112px; + top: 144px; z-index: 1; } #menu > a { - color: rgb(128, 128, 128); + color: rgb(192, 192, 192); text-decoration: none; } #menu > a:hover { - color: rgb(192, 128, 64); + color: rgb(224, 160, 96); } #menu > a.selected { color: rgb(255, 128, 0); @@ -100,7 +116,7 @@ em, i { padding-bottom: 32px; position: absolute; text-align: justify; - top: 160px; + top: 192px; width: 800px; } .section:not(.selected) { diff --git a/icf.js b/icf.js index 05a910c..6dce486 100644 --- a/icf.js +++ b/icf.js @@ -3,14 +3,20 @@ let hashes = slice(document.querySelectorAll('#menu > a')).map(function(element) }) let movies = [ - {id: 'GJT', frames: 241117}, - {id: 'IKP', frames: 250936} + {id: 'GJT', title: 'Aan (Mehboob, 1952)', frames: 241117}, + {id: 'IKP', title: 'Mother India (Mehboob, 1957)', frames: 250936} ] let movie = movies[Math.floor(new Date() / 86400000) % 2] +let timelineLink = document.getElementById('link') +timelineLink.href = 'https://indiancine.ma/' + movie.id +timelineLink.innerHTML = movie.title +let timelineLinkEntered = false + let timelineElement = document.getElementById('timeline') let timelineElements = [] let timelineWidth = 1500 +let timelineResize = 1 let timelineTiles = Math.ceil(movie.frames / timelineWidth) let timelinesLeft @@ -26,7 +32,7 @@ function getTimelineElement(index, left) { element.src = 'https://media.indiancine.ma/' + movie.id + '/timelinekeyframes64p' + (index + 1) + '.jpg' element.style.left = left + 'px' - element.style.width = timelineWidth / 2 + 'px' + element.style.width = timelineWidth * timelineResize + 'px' timelineElement.appendChild(element) return element } @@ -54,13 +60,13 @@ function init() { let frame = Math.floor(Math.random() * movie.frames) let timelines = [{ index: Math.floor(frame / timelineWidth), - left: -(frame / timelineWidth) / 2 + left: -(frame / timelineWidth) * timelineResize }] let windowWidth = window.innerWidth while (last(timelines).left < windowWidth + timelineWidth / 2) { timelines.push({ index: (last(timelines).index + 1) % timelineTiles, - left: last(timelines).left + timelineWidth / 2 + left: last(timelines).left + timelineWidth * timelineResize }) } timelineElements = timelines.map(function(timeline, i) { @@ -76,6 +82,9 @@ function last(array) { function play() { if (speed <= 0 && acceleration < 0) { paused = true + if (!timelineLinkEntered) { + timelineLink.style.display = 'none' + } return } //console.log('play', speed, acceleration) @@ -83,12 +92,12 @@ function play() { timelineElements.forEach(function(element) { element.style.left = (parseFloat(element.style.left) - speed) + 'px' }) - if (parseFloat(timelineElements[0].style.left) <= -timelineWidth / 2) { + if (parseFloat(timelineElements[0].style.left) <= -timelineWidth * timelineResize) { timelineElement.removeChild(timelineElements.shift()) let lastElement = last(timelineElements) timelineElements.push(getTimelineElement( (lastElement.data.index + 1) % timelineTiles, - parseFloat(lastElement.style.left) + timelineWidth / 2 + parseFloat(lastElement.style.left) + timelineWidth * timelineResize )) timelineElement.appendChild(last(timelineElements)) } @@ -99,7 +108,7 @@ function play() { } function resize() { - timelinesLeft = (window.innerWidth - 4096) / 2 + timelinesLeft = (window.innerWidth - 4096) * timelineResize } function slice(nodelist) { @@ -110,6 +119,7 @@ function start() { acceleration = maxAcceleration if (paused) { paused = false + timelineLink.style.display = 'block' play() } } @@ -125,4 +135,17 @@ window.addEventListener('hashchange', hashchange) window.addEventListener('resize', resize) timeline.addEventListener('mouseenter', start) timeline.addEventListener('mouseleave', stop) +timelineLink.addEventListener('mouseenter', function() { + timelineLinkEntered = true +}) +timelineLink.addEventListener('mouseleave', function() { + if (paused) { + setTimeout(function() { + if (paused) { + timelineLink.style.display = 'none' + } + }, 1000) + } + timelineLinkEntered = false +}) diff --git a/icf.the.png b/icf.the.png new file mode 100644 index 0000000..e863c59 Binary files /dev/null and b/icf.the.png differ diff --git a/index.html b/index.html index fb5425d..a7ea03b 100644 --- a/index.html +++ b/index.html @@ -9,6 +9,7 @@ @@ -19,6 +20,7 @@ Goals · Charter · Team · + Advisors · Support · News @@ -77,8 +79,9 @@

Lawrence Liang is a lawyer, writer and film scholar. A founder of Alternative Law forum, he is currently at Ambedkar University Delhi. Involved with various copyleft initiatives, Lawrence has been with Pad.ma and Indiancine.ma from its inception and is a founding trustee of The Indian Cinema Foundation.

Sebastian Lütgert is an artist, programmer, writer, based in Berlin and sometimes Bombay, co-founder of 0x2620 (since 2007) and 0xDB (since 2007).

Shaina Anand is an artist and filmmaker, co-initiator of the collaborative studio CAMP. Her films and projects over the past decade have shown how deep technical experimentation and artistic form can meet while extracting new qualities and experiences from contemporary life and materials. Shaina is part of the core group that runs Pad.ma and Indiancine.ma and is a founding trustee of The Indian Cinema Foundation.

-

Zinnia Ambapardiwala joined the collaborative studio CAMP in 2008. She oversees media encoding, archiving and backend operations for Pad.ma and Indiancine.ma.

-

Advisors

+

Zinnia Ambapardiwala joined the collaborative studio CAMP in 2008. She oversees media encoding, archiving and backend operations for Pad.ma and Indiancine.ma.



+ +

Kiran Rao is a screenwriter and director of Dhobhi Ghaat (2011), and a film producer deeply committed to promoting independent cinema and living screen cultures. She is also chairperson of MAMI (Mumbai Academy of Moving Images), and producer at Aamir Khan Productions.

Moinak Biswas (Jadavpur University, Kolkata) teaches film studies at Jadavpur University and has been widely published in both English and Bengali on contemporary Indian cinema. He started the medialab at Jadavpur University, and has collaborated with Pad.ma and Indiancine.ma.

Ranjani Majumdar teaches Cinema Studies at the School of Arts and Aesthetics, Jawaharlal Nehru University. She was part of India's first and all-women documentary collective Mediastorm. She is the author of Bombay Cinema: An Archive of the City (2007). Her areas of research include, the cinematic city, media theory, and the intersection of travel, design and colour in 1960s Bombay cinema.