Skip to content

Instantly share code, notes, and snippets.

@amoretspero

amoretspero/ClientSideCode-HTML-Razor-Index.cshtml

Created May 18, 2017 12:33
Show Gist options
  • Save amoretspero/7ec337586cdf90b555c3b06768ee5ecd to your computer and use it in GitHub Desktop.
Save amoretspero/7ec337586cdf90b555c3b06768ee5ecd to your computer and use it in GitHub Desktop.
Download ZIP
Sample code for client-side code in HTML and Razor.
Raw
ClientSideCode-HTML-Razor-Index.cshtml
@model ExamSearchIndexViewModel
@{
ViewData["Title"] = "";
Layout = "_Layout_Testcloud_Main";
}
@section Metatags {
<meta name="description" content="기클: 기출문제클라우드는 캠퍼스박스에서 제공하는 기출문제 검색 서비스입니다. 원하는 기출문제와 해설을 간단하게 다운로드할 수 있으며, 등급컷과 난이도 정보 역시 확인할 수 있습니다." />
}
<!--
Note: This html code uses code snippets bought from Envato market.
-->
<section id="slider" class="slider-parallax swiper_wrapper full-screen clearfix">
<div class="slider-parallax-inner">
<div class="fslider" data-speed="3000" data-pause="7500" data-animation="fade" loop autoplay muted data-arrows="false" data-pagi="false" style="position: absolute; width: 100%; height: 100%; top: 0; left: 0; background-color: #333;">
<div class="flexslider" style="height: 100% !important;">
<div class="full-screen force-full-screen section nopadding nomargin noborder ohidden" style="height: 100%;">
<div class="container clearfix">&nbsp;</div>
<div class="video-wrap">
<video poster="" preload="none" loop autoplay muted>
<source src="/images/canvas/videos/examsearch-index-cloud.mp4" type="video/mp4" />
</video>
</div>
</div>
</div>
</div>
<div id="travel-slider-overlay">
<div class="vertical-middle">
<div class="container clearfix">
<div class="tabs travel-organiser-tabs clearfix">
<ul class="tab-nav clearfix">
<li><a href="#tab-csat" onclick="RefreshSearchForm()"><i class="icon-testcloud-text-csat"></i><span class="hidden-xs">수능 &amp; 모의고사</span></a></li>
<li><a href="#tab-militaryacademy" onclick="RefreshSearchForm()"><i class="icon-testcloud-text-militaryacademy"></i><span class="hidden-xs">사관학교</span></a></li>
<li><a href="#tab-policeacademy" onclick="RefreshSearchForm()"><i class="icon-testcloud-text-policeacademy"></i><span class="hidden-xs">경찰대</span></a></li>
</ul>
<div class="tab-container">
<div class="tab-content clearfix" id="tab-csat">
<div class="heading-block nobottomborder bottommargin-sm clearfix">
<h4 class="fleft">수능 &amp; 모의고사 기출문제 검색</h4>
<div class="clear"></div>
</div>
<div class="nobottommargin clearfix">
<div class="row">
<div class="col-sm-6 col-xs-12 bottommargin-sm">
<label for="">언제 출제되었나요?</label>
<select name="month" class="sm-form-control" id="year-selected" onchange="ResetSchoolYear(); ResetFormError('year', 'csat')">
<option value="">연도를 선택해주세요</option>
<option value="2018">2017년 (2018학년도)</option>
<option value="2017">2016년 (2017학년도)</option>
<option value="2016">2015년 (2016학년도)</option>
<option value="2015">2014년 (2015학년도)</option>
<option value="2014">2013년 (2014학년도)</option>
</select>
<span class="text-danger field-validation-error">
<span id="year-error-csat" class=""></span>
</span>
</div>
<div class="col-sm-6 col-xs-12 bottommargin-sm">
<label for="">몇 학년 문제인가요?</label>
<select name="schoolyear" class="sm-form-control" id="schoolyear-selected" onchange="ChangeMonthList(); ResetFormError('schoolyear', 'csat')">
<option value="">학년을 선택해주세요</option>
<option value="고등학교3학년">고등학교 3학년</option>
<option value="고등학교2학년">고등학교 2학년</option>
<option value="고등학교1학년">고등학교 1학년</option>
</select>
<span class="text-danger field-validation-error">
<span id="schoolyear-error-csat" class=""></span>
</span>
</div>
<div class="clear"></div>
<div class="col-sm-12 bottommargin-sm" id="month-selection-region" hidden>
<label for="">몇 월에 치러진 시험인가요?</label>
<div class="clear"></div>
<div class="btn-group fleft" id="month-selection">
</div>
<div class="input-group" id="month-selection-select"></div>
<span class="text-danger field-validation-error fleft">
<span id="month-error-csat" class=""></span>
</span>
<div class="clear bottommargin-sm visible-xs"></div>
</div>
<div class="col-sm-6">
<button class="button button-3d nomargin rightmargin-sm" onclick="GetExamPapers('csat')" id="button-get-exam-papers-csat">시험지를 찾아주세요!</button>
</div>
<div id="waiting-message-csat" class="col-sm-6 feature-box notopmargin" style="padding-left:0px;">
</div>
</div>
</div>
</div>
<div class="tab-content clearfix" id="tab-militaryacademy">
<div class="heading-block nobottomborder bottommargin-sm clearfix">
<h4 class="fleft">사관학교 기출문제 검색</h4>
<div class="clear"></div>
</div>
<div class="nobottommargin clearfix">
<div class="row">
<div class="col-sm-6 col-xs-12 bottommargin-sm">
<label for="">언제 출제되었나요?</label>
<select name="month" class="sm-form-control" id="year-selected-militaryacademy" onchange="ResetFormError('year', 'militaryacademy')">
<option value="">연도를 선택해주세요</option>
<option value="2017">2016년 (2017학년도)</option>
<option value="2016">2015년 (2016학년도)</option>
<option value="2015">2014년 (2015학년도)</option>
<option value="2014">2013년 (2014학년도)</option>
</select>
<span class="text-danger field-validation-error">
<span id="year-error-militaryacademy" class=""></span>
</span>
</div>
<div class="clear"></div>
<div class="col-sm-6">
<button class="button button-3d nomargin rightmargin-sm" onclick="GetExamPapers('militaryacademy')" id="button-get-exam-papers-militaryacademy">시험지를 찾아주세요!</button>
</div>
<div id="waiting-message-militaryacademy" class="col-sm-6 feature-box notopmargin" style="padding-left:0px;">
</div>
</div>
</div>
</div>
<div class="tab-content clearfix" id="tab-policeacademy">
<div class="heading-block nobottomborder bottommargin-sm clearfix">
<h4 class="fleft">경찰대 기출문제 검색</h4>
<div class="clear"></div>
</div>
<div class="nobottommargin clearfix">
<div class="row">
<div class="col-sm-6 col-xs-12 bottommargin-sm">
<label for="">언제 출제되었나요?</label>
<select name="month" class="sm-form-control" id="year-selected-policeacademy" onchange="ResetFormError('year', 'policeacademy')">
<option value="">연도를 선택해주세요</option>
<option value="2017">2016년 (2017학년도)</option>
<option value="2016">2015년 (2016학년도)</option>
<option value="2015">2014년 (2015학년도)</option>
<option value="2014">2013년 (2014학년도)</option>
</select>
<span class="text-danger field-validation-error">
<span id="year-error-policeacademy" class=""></span>
</span>
</div>
<div class="clear"></div>
<div class="col-sm-6">
<button class="button button-3d nomargin rightmargin-sm" onclick="GetExamPapers('policeacademy')" id="button-get-exam-papers-policeacademy">시험지를 찾아주세요!</button>
</div>
<div id="waiting-message-policeacademy" class="col-sm-6 feature-box notopmargin" style="padding-left:0px;">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Content
============================================= -->
<section id="content">
<div class="content-wrap">
<div class="container bottommargin-lg clearfix">
<div class="row clearfix">
<div id="exam-search-result-header" class="heading-block center" data-animate="fadeIn">
<h2>기출문제를 먼저 검색해주세요!</h2>
<span>바로 위에 간단한 정보를 입력하는 곳이 있습니다.</span>
</div>
<div id="exam-search-result-subject-filter" class="center bottommargin" data-animate="fadeIn">
</div>
<div id="exam-search-result" data-animate="fadeIn">
</div>
</div>
</div>
</div>
<div class="section parallax dark nobottommargin nobottomborder" style="background: url('/images/index-service.jpg');" data-stellar-background-ratio="0.8">
<div class="container clearfix">
<div class="heading-block center">
<h2>기클: 기출문제 클라우드</h2>
<span>모의고사 기출문제, 매번 찾고 다운받느라 힘드셨죠?<br />기클에서 한 번에 해결하세요!</span>
</div>
</div>
</div>
<div class="row clearfix nobottommargin common-height">
<div class="col-md-6 col-sm-12 dark center col-padding" style="background-color: #515875;">
<div>
<i class="i-plain i-xlarge divcenter icon-line2-directions"></i>
<div class="counter counter-lined"><span data-from="100" data-to="1500" data-refresh-interval="50" data-speed="2500"></span>+</div>
<h5>기출문제 시험지 &amp; 해설지</h5>
</div>
</div>
<div class="col-md-6 col-sm-12 dark center col-padding" style="background-color: #88C3D8;">
<div>
<i class="i-plain i-xlarge divcenter icon-line2-clock"></i>
<div class="counter counter-lined"><span data-from="60" data-to="3500" data-refresh-interval="30" data-speed="2500"></span>+</div>
<h5>다운로드</h5>
</div>
</div>
</div>
<div class="section nobottommargin notopmargin">
<div class="container clear-bottommargin clearfix">
<div class="row topmargin-sm clearfix">
<div class="col-md-4 bottommargin">
<i class="i-plain color i-large icon-line2-energy inline-block" style="margin-bottom: 15px;"></i>
<div class="heading-block nobottomborder" style="margin-bottom: 15px;">
<h4>더 편한, 더 빠른 다운로드</h4>
</div>
<p>기출문제 일일이 찾고 다운로드 받기 귀찮으셨죠?<br /><strong>[기클]</strong>에서 단 5번의 클릭으로 원하는 기출문제를 찾을 수 있습니다.<br />찾기만 빠르면 뭐 하나요. 다운로드도 편해야죠.<br /><strong>[기클]</strong>에서는 모든 기출문제를 바로 다운로드 받아서 인쇄할 수 있는 PDF 포맷으로 제공합니다.</p>
</div>
<div class="col-md-4 bottommargin">
<i class="i-plain color i-large icon-line2-screen-desktop inline-block" style="margin-bottom: 15px;"></i>
<div class="heading-block nobottomborder" style="margin-bottom: 15px;">
<h4>더 정확한 난이도 평가</h4>
</div>
<p>똑같은 점수라도 난이도에 따라 등급이 다릅니다. 똑같은 등급컷이라도 수험생의 체감 난이도는 천차만별입니다.<br /><strong>[기클]</strong>에서는 최대한 수험생의 입장에서 난이도를 파악할 수 있도록 단순한 난이도 평가는 지양합니다. 등급컷과 만점자 비율까지 모두 고려한, 더 정확한 난이도 평가를 만나보세요!</p>
</div>
<div class="col-md-4 bottommargin">
<i class="i-plain color i-large icon-line2-equalizer inline-block" style="margin-bottom: 15px;"></i>
<div class="heading-block nobottomborder" style="margin-bottom: 15px;">
<h4>당신을 위한 시험지(준비중)</h4>
</div>
<p>맨날 똑같은 기출문제 풀면 지루합니다. 저희도 공부 해봐서 압니다. 그래서 공부를 하다보면 내가 잘 풀지 못하는 문제만 골라서 풀어보고 싶을 때가 많습니다. 그런데 기출문제지 한 권을 또 사자니 돈 아깝죠.<br /><strong>[기클]</strong>에서는 여러분을 위해 직접 시험지를 만들고, 인쇄해서 풀 수 있는 서비스를 개발하고 있습니다.</p>
</div>
</div>
</div>
</div>
<div class="content-wrap border-color nobottompadding">
<div class="container bottommargin clearfix">
<div class="row clearfix">
<div class="heading-block center">
<h2>연도별 / 월별 / 과목별 분류</h2>
<p>
기클에서 제공하는 수능 기출문제의 기본 분류입니다
</p>
</div>
<div id="exam-search-default-categories" class="center bottommargin" data-animate="fadeIn">
<div id="exam-search-default-category-year" data-animate="fadeIn">
<button class="button button-large button-dirtygreen" onclick="ToggleDefaultCategory('year')">연도별 분류</button>
<div class="exam-search-default-category-detail-region" id="exam-search-default-category-detail-year" data-category-type="year" data-animate="fadeIn" hidden>
<a href="/ExamSearch/ListYear?year=2018" class="button button-white button-light">2017년</a>
<a href="/ExamSearch/ListYear?year=2017" class="button button-white button-light">2016년</a>
<a href="/ExamSearch/ListYear?year=2016" class="button button-white button-light">2015년</a>
<a href="/ExamSearch/ListYear?year=2015" class="button button-white button-light">2014년</a>
<a href="/ExamSearch/ListYear?year=2014" class="button button-white button-light">2013년</a>
</div>
</div>
<div class="divider bottommargin-xs"></div>
<div id="exam-search-default-category-month" data-animate="fadeIn">
<button class="button button-large button-dirtygreen" onclick="ToggleDefaultCategory('month')">월별 분류</button>
<div class="exam-search-default-category-detail-region" id="exam-search-default-category-detail-month" data-category-type="month" data-animate="fadeIn" hidden>
<a href="/ExamSearch/ListMonth?month=3" class="button button-white button-light">3월</a>
<a href="/ExamSearch/ListMonth?month=4" class="button button-white button-light">4월</a>
<a href="/ExamSearch/ListMonth?month=6" class="button button-white button-light">6월</a>
<a href="/ExamSearch/ListMonth?month=7" class="button button-white button-light">7월</a>
<a href="/ExamSearch/ListMonth?month=9" class="button button-white button-light">9월</a>
<a href="/ExamSearch/ListMonth?month=10" class="button button-white button-light">10월</a>
<a href="/ExamSearch/ListMonth?month=11" class="button button-white button-light">11월</a>
</div>
</div>
<div class="divider bottommargin-xs"></div>
<div id="exam-search-default-category-subject" data-animate="fadeIn">
<button class="button button-large button-dirtygreen" onclick="ToggleDefaultCategory('subject')">과목별 분류</button>
<div class="exam-search-default-category-detail-region" id="exam-search-default-category-detail-subject" data-category-type="subject" data-animate="fadeIn" hidden>
<a href="/ExamSearch/ListSubject?subject=국어영역" class="button button-white button-light">국어영역</a>
<a href="/ExamSearch/ListSubject?subject=수학영역" class="button button-white button-light">수학영역</a>
<a href="/ExamSearch/ListSubject?subject=영어영역" class="button button-white button-light">영어영역</a>
<a href="/ExamSearch/ListSubject?subject=한국사영역" class="button button-white button-light">한국사영역</a>
<a href="/ExamSearch/ListSubject?subject=사회탐구영역" class="button button-white button-light">사회탐구영역</a>
<a href="/ExamSearch/ListSubject?subject=과학탐구영역" class="button button-white button-light">과학탐구영역</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="divider-border line"></div>
<div class="content-wrap border-color nobottompadding">
<div class="container bottommargin clearfix">
<div class="row clearfix">
<div class="heading-block center">
<h2>시험 리스트</h2>
<p>
기클에서 제공하고 있는 모든 시험의 리스트입니다. 클릭하면 해당 시험 문제지 모음으로 이동합니다.
</p>
</div>
<div class="exam-search-exam-list-region">
@foreach(var exam in Model.Exams)
{
<p class="bottommargin-xs">
<a href="/ExamSearch/SearchResult?Type=@(exam.Type)&Year=@(exam.Year)&SchoolYear=@(exam.SchoolYear)&Month=@(exam.Month)" style="color: darkblue; font-size:16px;">@(exam.ExamDisplayName)</a>
</p>
}
</div>
</div>
</div>
</div>
</section><!-- #content end -->
@section Scripts {
<script type="text/javascript" src="~/js/examsearch-index.js"></script>
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment